fix: tighten sharing and shadcn composition

src/app/settings/page.tsx

@@ -9,6 +9,7 @@ import { PushOptIn } from "@/components/push-opt-in";
 import { NotifyChannelToggles } from "@/components/notify-channel-toggles";
 import { ResponsiveSidebar } from "@/components/settings-section";
 import type { SectionId } from "@/components/settings-section";
+import { AvatarFallbackWithName } from "@/components/avatar-fallback";
 import { revokeShareLinkAction } from "./actions";
 import { listCalendars } from "@/modules/calendar/server/queries";
 import { listLists } from "@/modules/lists/server/queries";
@@ -43,7 +44,7 @@ export default async function SettingsPage({
     <div className="grid gap-5 sm:grid-cols-[220px_1fr]">
       <ResponsiveSidebar active={section} />
       <div className="space-y-4">
-        {section === "household" && <HouseholdSection household={household} userName={user.name} />}
+        {section === "household" && <HouseholdSection household={household} user={user} />}
         {section === "sharing" && <SharingSection />}
         {section === "notifications" && (
           <NotificationsSection user={user} vapidKey={vapidKey} ntfyConfigured={ntfyConfigured} />
@@ -58,10 +59,10 @@ export default async function SettingsPage({
 
 function HouseholdSection({
   household,
-  userName,
+  user,
 }: {
   household: { id: string; name: string };
-  userName: string | null;
+  user: { name: string | null; image: string | null };
 }) {
   return (
     <>
@@ -91,11 +92,9 @@ function HouseholdSection({
         </CardHeader>
         <CardContent>
           <div className="set-row" style={{ borderBottom: "0", padding: 0 }}>
-            <span className="avatar avatar-lg" style={{ background: "var(--c-household)" }}>
-              {(userName ?? "?").trim()[0]?.toUpperCase()}
-            </span>
+            <AvatarFallbackWithName name={user.name ?? undefined} image={user.image} />
             <div className="label">
-              <div className="t">{userName ?? "Anonymous"}</div>
+              <div className="t">{user.name ?? "Anonymous"}</div>
               <div className="d">Signed in via Authentik</div>
             </div>
           </div>