chore: code refactor

app/(app)/notifications/page.tsx

@@ -14,13 +14,14 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import Image from "next/image";
 import Link from "next/link";
 import { Bell } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { useAuthGate } from "@/components/auth/auth-gate";
 import { useNotifications } from "@/components/notifications/notifications-provider";
 import { notifications, type AppNotification } from "@/lib/social";
+import { UserAvatar } from "@/components/ui/user-avatar";
+import { timeAgo } from "@/lib/time";
 
 export default function NotificationsPage() {
   const { user, loading } = useAuth();
@@ -122,7 +123,7 @@ function NotificationRow({
     <div
       className={cnRow(unread)}
     >
-      <Avatar src={n.actor_avatar_url ?? null} name={display} />
+      <UserAvatar src={n.actor_avatar_url} name={display} />
       <div className="min-w-0 flex-1">
         <p className="text-sm text-foreground leading-snug">
           <span className="font-semibold">{display}</span> {message}
@@ -194,34 +195,6 @@ function messageFor(n: AppNotification): string {
   }
 }
 
-function Avatar({ src, name }: { src: string | null; name: string }) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={40}
-        height={40}
-        className="size-10 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
-        unoptimized
-      />
-    );
-  }
-  const initials =
-    name
-      .replace(/^@/, "")
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="size-10 shrink-0 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10">
-      {initials}
-    </div>
-  );
-}
-
 function Empty() {
   return (
     <div className="flex flex-col items-center text-center gap-3 py-16 text-muted-foreground">
@@ -231,18 +204,3 @@ function Empty() {
   );
 }
 
-/** Compact relative time ("just now", "5m", "3h", "2d"), falling back to
- *  a date for anything older than a week. */
-function timeAgo(iso: string): string {
-  const then = new Date(iso).getTime();
-  if (Number.isNaN(then)) return "";
-  const secs = Math.max(0, Math.floor((Date.now() - then) / 1000));
-  if (secs < 45) return "just now";
-  const mins = Math.floor(secs / 60);
-  if (mins < 60) return `${mins}m ago`;
-  const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d ago`;
-  return new Date(iso).toLocaleDateString();
-}