fix and update

apps/frontend/components/family/avatar-with-presence.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { UserAvatar } from '@/components/id/user-avatar';
+import { cn } from '@/lib/utils';
+
+export function OnlineDot({ online, className }: { online?: boolean; className?: string }) {
+  if (!online) return null;
+  return (
+    <span
+      className={cn(
+        'absolute bottom-0 right-0 z-10 h-3 w-3 rounded-full border-2 border-white bg-emerald-500 shadow-sm',
+        className
+      )}
+      aria-hidden
+    />
+  );
+}
+
+export function AvatarWithPresence({
+  userId,
+  displayName,
+  hasAvatar,
+  token,
+  isVerified,
+  verificationIcon,
+  online,
+  className = 'h-9 w-9',
+  badgeSize = 'xs'
+}: {
+  userId: string;
+  displayName?: string;
+  hasAvatar?: boolean;
+  token: string | null;
+  isVerified?: boolean;
+  verificationIcon?: string | null;
+  online?: boolean;
+  className?: string;
+  badgeSize?: 'xs' | 'sm' | 'md' | 'lg';
+}) {
+  return (
+    <div className="relative inline-flex shrink-0">
+      <UserAvatar
+        userId={userId}
+        displayName={displayName}
+        hasAvatar={hasAvatar}
+        token={token}
+        isVerified={isVerified}
+        verificationIcon={verificationIcon}
+        className={className}
+        badgeSize={badgeSize}
+      />
+      <OnlineDot online={online} />
+    </div>
+  );
+}