fix: tighten sharing and shadcn composition

src/components/sidebar.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { eq } from "drizzle-orm";
+import { cn } from "@/lib/utils";
 import { auth } from "@/lib/auth";
 import { db } from "@/lib/db";
 import { getRegistry } from "@/modules/_core/registry";
@@ -7,6 +8,7 @@ import { householdMembers, households, users } from "@/modules/_core/schema";
 import { BrandMark } from "@/components/brand-mark";
 import { NavIcon } from "@/components/nav-icon";
 import { NavLink } from "@/components/nav-link";
+import { AvatarFallbackWithName } from "@/components/avatar-fallback";
 
 type Variant = "side" | "top";
 
@@ -102,23 +104,16 @@ function HouseholdPill({
   return (
     <div className="household-pill" title={info.household.name}>
       <div style={{ display: "flex" }}>
-        {visible.map((m, i) => {
-          const initial = (m.name ?? m.email ?? "?").trim()[0]?.toUpperCase() ?? "?";
-          return (
-            <span
-              key={m.id}
-              className="avatar avatar-sm"
-              style={{
-                background: avatarColor(m.id),
-                marginLeft: i > 0 ? -6 : 0,
-                boxShadow: "0 0 0 1.5px var(--card)",
-              }}
-              title={m.name ?? m.email ?? undefined}
-            >
-              {initial}
-            </span>
-          );
-        })}
+        {visible.map((m, i) => (
+          <AvatarFallbackWithName
+            key={m.id}
+            name={m.name ?? m.email ?? undefined}
+            image={m.image}
+            className={cn(i > 0 && "-ml-1.5", "shadow-[0_0_0_1.5px_var(--card)]")}
+            fallbackStyle={{ background: avatarColor(m.id) }}
+            title={m.name ?? m.email ?? undefined}
+          />
+        ))}
       </div>
       <div className="household-text" style={{ minWidth: 0 }}>
         <div