users: Extract user meta from cards

User meta data in cards was duplicated across annotations, highlights,
and bookmarks, some with varying behavior. This change consolidates all
of that into one shared component.

web/src/components/AnnotationCard.jsx

···
 } from "lucide-react";
 import { HighlightIcon, TrashIcon } from "./Icons";
 import ShareMenu from "./ShareMenu";
+import UserMeta from "./UserMeta";
 
 function buildTextFragmentUrl(baseUrl, selector) {
   if (!selector || selector.type !== "TextQuoteSelector" || !selector.exact) {
···
     }
   };
 
-  const formatDate = (dateString, simple = true) => {
-    if (!dateString) return "";
-    const date = new Date(dateString);
-    const now = new Date();
-    const diff = now - date;
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(diff / 3600000);
-    const days = Math.floor(diff / 86400000);
-    if (minutes < 1) return "just now";
-    if (minutes < 60) return `${minutes}m`;
-    if (hours < 24) return `${hours}h`;
-    if (days < 7) return `${days}d`;
-    if (simple)
-      return date.toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-      });
-    return date.toLocaleString();
-  };
-
-  const authorDisplayName = data.author?.displayName || data.author?.handle;
-  const authorHandle = data.author?.handle;
-  const authorAvatar = data.author?.avatar;
-  const authorDid = data.author?.did;
-  const marginProfileUrl = authorDid ? `/profile/${authorDid}` : null;
   const highlightedText =
     data.selector?.type === "TextQuoteSelector" ? data.selector.exact : null;
   const fragmentUrl = buildTextFragmentUrl(data.url, data.selector);
···
     <article className="card annotation-card">
       <header className="annotation-header">
         <div className="annotation-header-left">
-          <Link to={marginProfileUrl || "#"} className="annotation-avatar-link">
-            <div className="annotation-avatar">
-              {authorAvatar ? (
-                <img src={authorAvatar} alt={authorDisplayName} />
-              ) : (
-                <span>
-                  {(authorDisplayName || authorHandle || "??")
-                    ?.substring(0, 2)
-                    .toUpperCase()}
-                </span>
-              )}
-            </div>
-          </Link>
-          <div className="annotation-meta">
-            <div className="annotation-author-row">
-              <Link
-                to={marginProfileUrl || "#"}
-                className="annotation-author-link"
-              >
-                <span className="annotation-author">{authorDisplayName}</span>
-              </Link>
-              {authorHandle && (
-                <a
-                  href={`https://bsky.app/profile/${authorHandle}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="annotation-handle"
-                >
-                  @{authorHandle}
-                </a>
-              )}
-            </div>
-            <div className="annotation-time">{formatDate(data.createdAt)}</div>
-          </div>
+          <UserMeta author={data.author} createdAt={data.createdAt} />
         </div>
         <div className="annotation-header-right">
           <div style={{ display: "flex", gap: "4px" }}>
···
     }
   };
 
-  const formatDate = (dateString, simple = true) => {
-    if (!dateString) return "";
-    const date = new Date(dateString);
-    const now = new Date();
-    const diff = now - date;
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(diff / 3600000);
-    const days = Math.floor(diff / 86400000);
-    if (minutes < 1) return "just now";
-    if (minutes < 60) return `${minutes}m`;
-    if (hours < 24) return `${hours}h`;
-    if (days < 7) return `${days}d`;
-    if (simple)
-      return date.toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-      });
-    return date.toLocaleString();
-  };
-
   return (
     <article className="card annotation-card">
       <header className="annotation-header">
         <div className="annotation-header-left">
-          <Link
-            to={data.author?.did ? `/profile/${data.author.did}` : "#"}
-            className="annotation-avatar-link"
-          >
-            <div className="annotation-avatar">
-              {data.author?.avatar ? (
-                <img src={data.author.avatar} alt="avatar" />
-              ) : (
-                <span>??</span>
-              )}
-            </div>
-          </Link>
-          <div className="annotation-meta">
-            <Link to="#" className="annotation-author-link">
-              <span className="annotation-author">
-                {data.author?.displayName || "Unknown"}
-              </span>
-            </Link>
-            <div className="annotation-time">{formatDate(data.createdAt)}</div>
-            {data.author?.handle && (
-              <a
-                href={`https://bsky.app/profile/${data.author.handle}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="annotation-handle"
-              >
-                @{data.author.handle}
-              </a>
-            )}
-          </div>
+          <UserMeta author={data.author} createdAt={data.createdAt} />
         </div>
 
         <div className="annotation-header-right">

web/src/components/BookmarkCard.jsx

···
 import { useState, useEffect } from "react";
 import { useAuth } from "../context/AuthContext";
-import { Link } from "react-router-dom";
 import {
   normalizeAnnotation,
   normalizeBookmark,
···
 import { HeartIcon, TrashIcon, BookmarkIcon } from "./Icons";
 import { Folder } from "lucide-react";
 import ShareMenu from "./ShareMenu";
+import UserMeta from "./UserMeta";
 
 export default function BookmarkCard({
   bookmark,
···
     }
   };
 
-  const formatDate = (dateString) => {
-    if (!dateString) return "";
-    const date = new Date(dateString);
-    const now = new Date();
-    const diff = now - date;
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(diff / 3600000);
-    const days = Math.floor(diff / 86400000);
-    if (minutes < 1) return "just now";
-    if (minutes < 60) return `${minutes}m`;
-    if (hours < 24) return `${hours}h`;
-    if (days < 7) return `${days}d`;
-    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-  };
-
   let domain = "";
   try {
     if (data.url) domain = new URL(data.url).hostname.replace("www.", "");
   } catch {
     /* ignore */
   }
-
-  const authorDisplayName = data.author?.displayName || data.author?.handle;
-  const authorHandle = data.author?.handle;
-  const authorAvatar = data.author?.avatar;
-  const authorDid = data.author?.did;
-  const marginProfileUrl = authorDid ? `/profile/${authorDid}` : null;
 
   return (
     <article className="card annotation-card bookmark-card">
       <header className="annotation-header">
         <div className="annotation-header-left">
-          <Link to={marginProfileUrl || "#"} className="annotation-avatar-link">
-            <div className="annotation-avatar">
-              {authorAvatar ? (
-                <img src={authorAvatar} alt={authorDisplayName} />
-              ) : (
-                <span>
-                  {(authorDisplayName || authorHandle || "??")
-                    ?.substring(0, 2)
-                    .toUpperCase()}
-                </span>
-              )}
-            </div>
-          </Link>
-          <div className="annotation-meta">
-            <div className="annotation-author-row">
-              <Link
-                to={marginProfileUrl || "#"}
-                className="annotation-author-link"
-              >
-                <span className="annotation-author">{authorDisplayName}</span>
-              </Link>
-              {authorHandle && (
-                <a
-                  href={`https://bsky.app/profile/${authorHandle}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="annotation-handle"
-                >
-                  @{authorHandle}
-                </a>
-              )}
-            </div>
-            <div className="annotation-time">{formatDate(data.createdAt)}</div>
-          </div>
+          <UserMeta author={data.author} createdAt={data.createdAt} />
         </div>
 
         <div className="annotation-header-right">

web/src/components/UserMeta.jsx

···
+import { Link } from "react-router-dom";
+
+const formatDate = (dateString, simple = true) => {
+  if (!dateString) return "";
+  const date = new Date(dateString);
+  const now = new Date();
+  const diff = now - date;
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m`;
+  if (hours < 24) return `${hours}h`;
+  if (days < 7) return `${days}d`;
+  if (simple)
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+    });
+  return date.toLocaleString();
+};
+
+export default function UserMeta({ author, createdAt }) {
+  const authorDisplayName = author?.displayName || author?.handle || "Unknown";
+  const authorHandle = author?.handle;
+  const authorAvatar = author?.avatar;
+  const authorDid = author?.did;
+  const marginProfileUrl = authorDid ? `/profile/${authorDid}` : "#";
+
+  return (
+    <>
+      <Link to={marginProfileUrl} className="annotation-avatar-link">
+        <div className="annotation-avatar">
+          {authorAvatar ? (
+            <img src={authorAvatar} alt={authorDisplayName} />
+          ) : (
+            <span>
+              {authorDisplayName?.substring(0, 2).toUpperCase() || "??"}
+            </span>
+          )}
+        </div>
+      </Link>
+      <div className="annotation-meta">
+        <div className="annotation-author-row">
+          <Link to={marginProfileUrl} className="annotation-author-link">
+            <span className="annotation-author">{authorDisplayName}</span>
+          </Link>
+          {authorHandle && (
+            <a
+              href={`https://bsky.app/profile/${authorHandle}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="annotation-handle"
+            >
+              @{authorHandle}
+            </a>
+          )}
+        </div>
+        <div className="annotation-time">{formatDate(createdAt)}</div>
+      </div>
+    </>
+  );
+}