feat: add post like

app/(app)/notifications/page.tsx

@@ -99,7 +99,7 @@ export default function NotificationsPage() {
       ) : (
         <ul className="divide-y divide-border rounded-2xl border border-border overflow-hidden">
           {items.map((n) => (
-            <NotificationRow key={n.id} n={n} />
+            <NotificationRow key={n.id} n={n} selfHandle={user.handle} />
           ))}
         </ul>
       )}
@@ -107,9 +107,15 @@ export default function NotificationsPage() {
   );
 }
 
-function NotificationRow({ n }: { n: AppNotification }) {
+function NotificationRow({
+  n,
+  selfHandle,
+}: {
+  n: AppNotification;
+  selfHandle: string;
+}) {
   const display = n.actor_name || (n.actor_handle ? `@${n.actor_handle}` : "Someone");
-  const message = messageFor(n.kind);
+  const message = messageFor(n);
   const unread = !n.read_at;
 
   const body = (
@@ -131,10 +137,18 @@ function NotificationRow({ n }: { n: AppNotification }) {
     </div>
   );
 
-  // Link to the actor's profile when we know their handle.
+  // A like links to your own post; everything else links to the actor's
-  return n.actor_handle ? (
+  // profile (when we know their handle).
+  const href =
+    n.kind === "post_like" && n.post_id
+      ? `/u/${selfHandle}/posts#post-${n.post_id}`
+      : n.actor_handle
+        ? `/u/${n.actor_handle}`
+        : null;
+
+  return href ? (
     <li>
-      <Link href={`/u/${n.actor_handle}`} className="block">
+      <Link href={href} className="block">
         {body}
       </Link>
     </li>
@@ -152,12 +166,17 @@ function cnRow(unread: boolean) {
 
 /** Human-readable tail for each notification kind. Add cases as new
  *  notification kinds are introduced on the backend. */
-function messageFor(kind: string): string {
+function messageFor(n: AppNotification): string {
-  switch (kind) {
+  switch (n.kind) {
     case "follow_request":
       return "requested to follow you.";
     case "follow_accepted":
       return "accepted your follow request.";
+    case "post_like": {
+      const others = (n.actor_count ?? 1) - 1;
+      if (others <= 0) return "liked your post.";
+      return `and ${others} ${others === 1 ? "other" : "others"} liked your post.`;
+    }
     default:
       return "sent you a notification.";
   }

components/notifications/notifications-provider.tsx

@@ -59,6 +59,8 @@ function messageFor(e: IncomingEvent): string {
       return `${who} requested to follow you`;
     case "follow_accepted":
       return `${who} accepted your follow request`;
+    case "post_like":
+      return `${who} liked your post`;
     default:
       return "You have a new notification";
   }

components/profile/follow-list-drawer.tsx

@@ -1,40 +1,16 @@
 "use client";
 
 /**
- * FollowListDrawer — the followers / following list for a profile.
+ * FollowListDrawer — the followers / following list for a profile. A thin
- *
+ * wrapper over the generic virtualized UserListDrawer, wired to the
- * Opens as a right-side drawer on desktop and a bottom sheet on mobile. The
+ * relationships followers/following endpoints.
- * list is virtualized (fixed-height rows) and paginated: it fetches a page at
- * a time from the BFF and loads the next page as you scroll near the bottom.
- * The search field queries the backend across the profile's followers /
- * following (debounced), so it works against the full set, not just the
- * loaded page.
- *
- * State-update notes (React 19 / set-state-in-effect rule): the (re)load runs
- * inside a debounce timer callback and pagination runs from the scroll
- * handler — never synchronously inside an effect body.
  */
 
-import { useEffect, useRef, useState } from "react";
+import { relationships } from "@/lib/social";
-import Image from "next/image";
+import { UserListDrawer } from "@/components/social/user-list-drawer";
-import Link from "next/link";
-import { Loader2, Search } from "lucide-react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-} from "@/components/ui/drawer";
-import { useMediaQuery } from "@/components/selection-toolbar/shared";
-import { relationships, type UserSummary } from "@/lib/social";
-import { cn } from "@/lib/utils";
 
 export type FollowMode = "followers" | "following";
 
-const PAGE = 30;
-const ROW = 64; // px — fixed row height for the virtualizer
-
 export function FollowListDrawer({
   open,
   mode,
@@ -46,227 +22,17 @@ export function FollowListDrawer({
   handle: string;
   onClose: () => void;
 }) {
-  const isMobile = useMediaQuery("(max-width: 767px)");
-  const direction = isMobile ? "bottom" : "right";
-
-  const [q, setQ] = useState("");
-  const [items, setItems] = useState<UserSummary[]>([]);
-  const [total, setTotal] = useState(0);
-  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
-
-  // reqRef tags the current query "session"; a newer reload bumps it so any
-  // in-flight reload/append for an older query is ignored on arrival.
-  const reqRef = useRef(0);
-  const busyRef = useRef(false);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const fetchPage = mode === "followers" ? relationships.followers : relationships.following;
-
-  // (Re)load page 0 whenever the drawer opens or the mode/handle/query
-  // changes. Debounced so typing in search doesn't spam the BFF.
-  useEffect(() => {
-    if (!open) return;
-    const t = window.setTimeout(() => {
-      const token = ++reqRef.current;
-      busyRef.current = true;
-      setItems([]);
-      setStatus("loading");
-      fetchPage(handle, { q, limit: PAGE, offset: 0 })
-        .then((res) => {
-          if (reqRef.current !== token) return;
-          setItems(res.users);
-          setTotal(res.total);
-          setStatus("idle");
-        })
-        .catch(() => {
-          if (reqRef.current === token) setStatus("error");
-        })
-        .finally(() => {
-          if (reqRef.current === token) busyRef.current = false;
-        });
-    }, 250);
-    return () => window.clearTimeout(t);
-  }, [open, mode, handle, q, fetchPage]);
-
-  function loadMore() {
-    if (busyRef.current || items.length >= total) return;
-    const token = reqRef.current; // same session — don't bump
-    const offset = items.length;
-    busyRef.current = true;
-    setStatus("loading");
-    fetchPage(handle, { q, limit: PAGE, offset })
-      .then((res) => {
-        if (reqRef.current !== token) return;
-        setItems((prev) => [...prev, ...res.users]);
-        setTotal(res.total);
-        setStatus("idle");
-      })
-      .catch(() => {
-        if (reqRef.current === token) setStatus("error");
-      })
-      .finally(() => {
-        if (reqRef.current === token) busyRef.current = false;
-      });
-  }
-
-  // TanStack Virtual returns non-memoizable functions; the React Compiler
-  // simply skips memoizing this component, which is fine here.
-  // eslint-disable-next-line react-hooks/incompatible-library
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => ROW,
-    overscan: 8,
-  });
-
-  const empty = status !== "loading" && items.length === 0;
-
   return (
-    <Drawer
+    <UserListDrawer
       open={open}
-      direction={direction}
+      onClose={onClose}
-      onOpenChange={(o) => {
+      title={mode === "followers" ? "Followers" : "Following"}
-        if (!o) onClose();
+      depsKey={`${mode}:${handle}`}
-      }}
+      fetchPage={(params) =>
-    >
+        mode === "followers"
-      <DrawerContent
+          ? relationships.followers(handle, params)
-        direction={direction}
+          : relationships.following(handle, params)
-        className={cn(
-          "bg-card flex flex-col",
-          isMobile ? "h-[85vh]" : "h-full w-[88vw] max-w-sm",
-        )}
-      >
-        <DrawerHeader className="border-b border-border text-left">
-          <DrawerTitle className="text-base capitalize">{mode}</DrawerTitle>
-          <div className="relative mt-2">
-            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <input
-              type="search"
-              value={q}
-              onChange={(e) => setQ(e.target.value)}
-              placeholder={`Search ${mode}`}
-              autoComplete="off"
-              className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
-            />
-          </div>
-        </DrawerHeader>
-
-        <div
-          ref={scrollRef}
-          onScroll={(e) => {
-            const el = e.currentTarget;
-            if (el.scrollHeight - el.scrollTop - el.clientHeight < 240) {
-              loadMore();
       }
-          }}
-          className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
-        >
-          {status === "error" ? (
-            <Message>Couldn&apos;t load. Pull down to retry.</Message>
-          ) : empty ? (
-            <Message>
-              {q.trim()
-                ? "No matches."
-                : mode === "followers"
-                  ? "No followers yet."
-                  : "Not following anyone yet."}
-            </Message>
-          ) : (
-            <div
-              style={{
-                height: virtualizer.getTotalSize(),
-                position: "relative",
-                width: "100%",
-              }}
-            >
-              {virtualizer.getVirtualItems().map((vi) => {
-                const u = items[vi.index];
-                if (!u) return null;
-                return (
-                  <div
-                    key={vi.key}
-                    style={{
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: vi.size,
-                      transform: `translateY(${vi.start}px)`,
-                    }}
-                  >
-                    <Row user={u} onNavigate={onClose} />
-                  </div>
-                );
-              })}
-            </div>
-          )}
-
-          {status === "loading" ? (
-            <div className="flex justify-center py-4">
-              <Loader2 className="size-5 animate-spin text-muted-foreground" />
-            </div>
-          ) : null}
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
-}
-
-function Row({
-  user,
-  onNavigate,
-}: {
-  user: UserSummary;
-  onNavigate: () => void;
-}) {
-  return (
-    <Link
-      href={`/u/${user.handle}`}
-      onClick={onNavigate}
-      className="flex h-16 items-center gap-3 px-4 transition-colors hover:bg-muted/50"
-    >
-      <RowAvatar src={user.avatar_url} name={user.name} />
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-semibold text-foreground">
-          {user.name}
-        </p>
-        <p className="truncate text-sm text-muted-foreground">@{user.handle}</p>
-      </div>
-    </Link>
-  );
-}
-
-function RowAvatar({ src, name }: { src: string | null; name: string }) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={40}
-        height={40}
-        className="size-10 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
-        unoptimized
     />
   );
-  }
-  const initials =
-    name
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary ring-1 ring-foreground/10">
-      {initials}
-    </div>
-  );
-}
-
-function Message({ children }: { children: React.ReactNode }) {
-  return (
-    <p className="px-4 py-10 text-center text-sm text-muted-foreground">
-      {children}
-    </p>
-  );
 }

components/profile/profile-header.tsx

@@ -87,7 +87,9 @@ export function ProfileHeader({
   // without a refetch. Re-seeds per profile via the call-site key.
   const [followers, setFollowers] = useState(followerCount ?? 0);
   const [following, setFollowing] = useState(followingCount ?? 0);
-  const [rel, setRel] = useState<RelationshipState | null>(relationship ?? null);
+  const [rel, setRel] = useState<RelationshipState | null>(
+    relationship ?? null,
+  );
 
   // Which follow list (if any) is open in the drawer.
   const [followList, setFollowList] = useState<FollowMode | null>(null);
@@ -110,7 +112,7 @@ export function ProfileHeader({
         />
         <div className="space-y-2">
           <div className="space-y-1">
-            <h1 className="font-[family-name:var(--font-title)] font-semibold text-xl sm:text-2xl text-foreground leading-tight">
+            <h1 className="font-(family-name:--font-title) font-semibold text-xl sm:text-2xl text-foreground leading-tight">
               {name}
             </h1>
             <p className="text-sm text-muted-foreground">@{handle}</p>

components/social/post-actions-footer.tsx

@@ -21,9 +21,10 @@
  * see the in-place auth modal before the underlying action runs.
  */
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Loader2 } from "lucide-react";
 import {
+  HiHeart,
   HiOutlineArrowPath,
   HiOutlineChatBubbleOvalLeft,
   HiOutlineFolderPlus,
@@ -37,6 +38,7 @@ import { useAuth } from "@/components/auth/auth-provider";
 import { useAuthGate } from "@/components/auth/auth-gate";
 import { useMediaQuery } from "@/components/selection-toolbar/shared";
 import { CollectionsDrawer } from "@/components/selection-toolbar/collections-drawer";
+import { PostLikesDrawer } from "@/components/social/post-likes-drawer";
 import { useSharePost } from "./share-post-provider";
 
 // All icons come from the Heroicons v2 outline family (react-icons
@@ -60,6 +62,12 @@ export function PostActionsFooter({ post }: { post: Post }) {
   const [reshared, setReshared] = useState<boolean>(
     !!post.viewer_has_reshared,
   );
+  // Like state — seeded from the hydrated post, toggled optimistically and
+  // reconciled to the server's effective count on success.
+  const [liked, setLiked] = useState<boolean>(!!post.viewer_has_liked);
+  const [likeCount, setLikeCount] = useState<number>(post.likes_count ?? 0);
+  const [likesOpen, setLikesOpen] = useState(false);
+  const likeBusy = useRef(false);
 
   const isOwner = !!user && user.id === post.user_id;
   // Owners and resharers both see Send — the post is "on their account"
@@ -71,6 +79,32 @@ export function PostActionsFooter({ post }: { post: Post }) {
     await fn();
   }
 
+  // Like toggle — optimistic flip + count nudge, reconciled to the server's
+  // effective total (DB count + pending Redis delta) on success, rolled back
+  // on error. A ref guard ignores taps while a request is in flight.
+  async function onLikeToggle() {
+    if (likeBusy.current) return;
+    likeBusy.current = true;
+    const next = !liked;
+    setLiked(next);
+    setLikeCount((c) => Math.max(0, c + (next ? 1 : -1)));
+    try {
+      const res = next
+        ? await postsApi.like(post.id)
+        : await postsApi.unlike(post.id);
+      setLiked(res.liked);
+      setLikeCount(res.likes_count);
+    } catch (err) {
+      setLiked(!next);
+      setLikeCount((c) => Math.max(0, c + (next ? -1 : 1)));
+      const msg =
+        err instanceof SocialError ? err.message : "Could not update like";
+      toast.error(msg, { duration: 3000 });
+    } finally {
+      likeBusy.current = false;
+    }
+  }
+
   async function onReshare() {
     // Optimistic flip first so the UI feels instant; revert on error.
     setReshared(true);
@@ -105,14 +139,26 @@ export function PostActionsFooter({ post }: { post: Post }) {
       <div className="flex items-center justify-between px-2">
         <div className="flex items-center gap-1">
           <ActionButton
-            label="Like"
+            label={liked ? "Unlike" : "Like"}
-            onClick={() =>
+            onClick={() => withAuth(onLikeToggle)}
-              withAuth(() => {
+            icon={
-                toast("Likes are coming soon", { duration: 2000 });
+              liked ? (
-              })
+                <HiHeart className={cn(ICON_CLASS, "text-red-500")} />
+              ) : (
+                <HiOutlineHeart className={ICON_CLASS} />
+              )
             }
-            icon={<HiOutlineHeart className={ICON_CLASS} />}
           />
+          {likeCount > 0 ? (
+            <button
+              type="button"
+              onClick={() => setLikesOpen(true)}
+              aria-label={`${likeCount} ${likeCount === 1 ? "like" : "likes"}`}
+              className="-ml-1 mr-1 rounded px-1 text-sm font-medium tabular-nums text-muted-foreground transition-colors hover:text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {likeCount}
+            </button>
+          ) : null}
           <ActionButton
             label="Comment"
             onClick={() =>
@@ -169,6 +215,11 @@ export function PostActionsFooter({ post }: { post: Post }) {
         isMobile={isMobile}
         existingPostId={post.id}
       />
+      <PostLikesDrawer
+        open={likesOpen}
+        postId={post.id}
+        onClose={() => setLikesOpen(false)}
+      />
       {/* SharePostSheet is mounted globally by SharePostProvider, so
           no per-card instance lives here. The provider's
           openShareSheet swaps the active post under the hood. */}

components/social/post-likes-drawer.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+/**
+ * PostLikesDrawer — the "liked by" list for a post. A thin wrapper over the
+ * generic virtualized UserListDrawer, wired to the post-likes endpoint.
+ */
+
+import { posts } from "@/lib/social";
+import { UserListDrawer } from "@/components/social/user-list-drawer";
+
+export function PostLikesDrawer({
+  open,
+  postId,
+  onClose,
+}: {
+  open: boolean;
+  postId: string;
+  onClose: () => void;
+}) {
+  return (
+    <UserListDrawer
+      open={open}
+      onClose={onClose}
+      title="Likes"
+      depsKey={`likes:${postId}`}
+      fetchPage={(params) => posts.likers(postId, params)}
+    />
+  );
+}

components/social/user-list-drawer.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+/**
+ * UserListDrawer — a generic, virtualized, paginated, searchable list of
+ * users in a drawer (right on desktop, bottom sheet on mobile). Powers both
+ * the followers/following lists and the post "liked by" list.
+ *
+ * The caller supplies `fetchPage(params)` returning `{ users, total }` and a
+ * `depsKey` that changes when the data source changes (so the list reloads).
+ * Search is debounced and queries the backend across the full set. The list
+ * loads the next page as you scroll near the bottom.
+ *
+ * State-update notes (set-state-in-effect rule): the (re)load runs inside a
+ * debounce timer callback and pagination runs from the scroll handler — never
+ * synchronously inside an effect body.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Loader2, Search } from "lucide-react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import type { FollowList, FollowListParams, UserSummary } from "@/lib/social";
+import { cn } from "@/lib/utils";
+
+const PAGE = 30;
+const ROW = 64; // px — fixed row height for the virtualizer
+
+export type FetchUserPage = (params: FollowListParams) => Promise<FollowList>;
+
+export function UserListDrawer({
+  open,
+  onClose,
+  title,
+  depsKey,
+  fetchPage,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  /** Changes when the data source changes (e.g. mode/handle or post id), to
+   *  trigger a fresh reload. */
+  depsKey: string;
+  fetchPage: FetchUserPage;
+}) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const direction = isMobile ? "bottom" : "right";
+
+  const [q, setQ] = useState("");
+  const [items, setItems] = useState<UserSummary[]>([]);
+  const [total, setTotal] = useState(0);
+  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
+
+  // reqRef tags the current query "session"; a newer reload bumps it so any
+  // in-flight reload/append for an older query is ignored on arrival.
+  const reqRef = useRef(0);
+  const busyRef = useRef(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  // Latest fetchPage, read via ref so its (unstable) identity isn't an effect
+  // dep — the reload keys on `depsKey` instead.
+  const fetchRef = useRef(fetchPage);
+  fetchRef.current = fetchPage;
+
+  // (Re)load page 0 when the drawer opens or the source/query changes.
+  // Debounced so typing in search doesn't spam the backend.
+  useEffect(() => {
+    if (!open) return;
+    const t = window.setTimeout(() => {
+      const token = ++reqRef.current;
+      busyRef.current = true;
+      setItems([]);
+      setStatus("loading");
+      fetchRef
+        .current({ q, limit: PAGE, offset: 0 })
+        .then((res) => {
+          if (reqRef.current !== token) return;
+          setItems(res.users);
+          setTotal(res.total);
+          setStatus("idle");
+        })
+        .catch(() => {
+          if (reqRef.current === token) setStatus("error");
+        })
+        .finally(() => {
+          if (reqRef.current === token) busyRef.current = false;
+        });
+    }, 250);
+    return () => window.clearTimeout(t);
+  }, [open, depsKey, q]);
+
+  function loadMore() {
+    if (busyRef.current || items.length >= total) return;
+    const token = reqRef.current; // same session — don't bump
+    const offset = items.length;
+    busyRef.current = true;
+    setStatus("loading");
+    fetchRef
+      .current({ q, limit: PAGE, offset })
+      .then((res) => {
+        if (reqRef.current !== token) return;
+        setItems((prev) => [...prev, ...res.users]);
+        setTotal(res.total);
+        setStatus("idle");
+      })
+      .catch(() => {
+        if (reqRef.current === token) setStatus("error");
+      })
+      .finally(() => {
+        if (reqRef.current === token) busyRef.current = false;
+      });
+  }
+
+  // TanStack Virtual returns non-memoizable functions; the React Compiler
+  // simply skips memoizing this component, which is fine here.
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ROW,
+    overscan: 8,
+  });
+
+  const empty = status !== "loading" && items.length === 0;
+
+  return (
+    <Drawer
+      open={open}
+      direction={direction}
+      onOpenChange={(o) => {
+        if (!o) onClose();
+      }}
+    >
+      <DrawerContent
+        direction={direction}
+        className={cn(
+          "bg-card flex flex-col",
+          isMobile ? "h-[85vh]" : "h-full w-[88vw] max-w-sm",
+        )}
+      >
+        <DrawerHeader className="border-b border-border text-left">
+          <DrawerTitle className="text-base">{title}</DrawerTitle>
+          <div className="relative mt-2">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <input
+              type="search"
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="Search"
+              autoComplete="off"
+              className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            />
+          </div>
+        </DrawerHeader>
+
+        <div
+          ref={scrollRef}
+          onScroll={(e) => {
+            const el = e.currentTarget;
+            if (el.scrollHeight - el.scrollTop - el.clientHeight < 240) {
+              loadMore();
+            }
+          }}
+          className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
+        >
+          {status === "error" ? (
+            <Message>Couldn&apos;t load. Please try again.</Message>
+          ) : empty ? (
+            <Message>{q.trim() ? "No matches." : "Nothing here yet."}</Message>
+          ) : (
+            <div
+              style={{
+                height: virtualizer.getTotalSize(),
+                position: "relative",
+                width: "100%",
+              }}
+            >
+              {virtualizer.getVirtualItems().map((vi) => {
+                const u = items[vi.index];
+                if (!u) return null;
+                return (
+                  <div
+                    key={vi.key}
+                    style={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      height: vi.size,
+                      transform: `translateY(${vi.start}px)`,
+                    }}
+                  >
+                    <Row user={u} onNavigate={onClose} />
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {status === "loading" ? (
+            <div className="flex justify-center py-4">
+              <Loader2 className="size-5 animate-spin text-muted-foreground" />
+            </div>
+          ) : null}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+function Row({
+  user,
+  onNavigate,
+}: {
+  user: UserSummary;
+  onNavigate: () => void;
+}) {
+  return (
+    <Link
+      href={`/u/${user.handle}`}
+      onClick={onNavigate}
+      className="flex h-16 items-center gap-3 px-4 transition-colors hover:bg-muted/50"
+    >
+      <RowAvatar src={user.avatar_url} name={user.name} />
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-semibold text-foreground">
+          {user.name}
+        </p>
+        <p className="truncate text-sm text-muted-foreground">@{user.handle}</p>
+      </div>
+    </Link>
+  );
+}
+
+function RowAvatar({ src, name }: { src: string | null; name: string }) {
+  if (src) {
+    return (
+      <Image
+        src={src}
+        alt={name}
+        width={40}
+        height={40}
+        className="size-10 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
+        unoptimized
+      />
+    );
+  }
+  const initials =
+    name
+      .split(/\s+/)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?";
+  return (
+    <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary ring-1 ring-foreground/10">
+      {initials}
+    </div>
+  );
+}
+
+function Message({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="px-4 py-10 text-center text-sm text-muted-foreground">
+      {children}
+    </p>
+  );
+}

lib/social.ts

@@ -77,6 +77,18 @@ export type Post = {
   original_author_name?: string | null;
   original_author_handle?: string | null;
   original_author_avatar_url?: string | null;
+  /** Effective like total = denormalized count + pending (un-flushed)
+   *  delta. Always present on hydrated reads (defaults to 0). */
+  likes_count?: number;
+  /** Whether the calling viewer has liked this post. Always false / absent
+   *  for anonymous viewers. */
+  viewer_has_liked?: boolean;
+};
+
+/** Result of a like / unlike toggle: the new viewer state + effective total. */
+export type LikeResult = {
+  liked: boolean;
+  likes_count: number;
 };
 
 export type Bookmark = {
@@ -198,6 +210,22 @@ export const posts = {
   unreshare(id: string) {
     return call<void>(`/posts/${id}/reshare`, { method: "DELETE" });
   },
+  /** Like a post (idempotent). Returns the new viewer state + effective
+   *  total (DB count + pending Redis delta). Auth-required. */
+  like(id: string) {
+    return call<LikeResult>(`/posts/${id}/like`, { method: "POST" });
+  },
+  /** Unlike a post (idempotent). Same shape as `like`. */
+  unlike(id: string) {
+    return call<LikeResult>(`/posts/${id}/like`, { method: "DELETE" });
+  },
+  /** One page of users who liked the post (newest first), optional
+   *  name/handle search. `total` is the full matching count. Public. */
+  likers(id: string, opts: FollowListParams = {}) {
+    return call<FollowList>(
+      `/posts/${id}/likes?${followListQuery(opts)}`,
+    );
+  },
   /** Report a post. category from PostReportCategory; reason optional.
    *  Auth-required (401 for anonymous callers). Returns nothing (204). */
   report(id: string, category: PostReportCategory, reason: string) {
@@ -417,6 +445,10 @@ export type AppNotification = {
   actor_name?: string | null;
   actor_handle?: string | null;
   actor_avatar_url?: string | null;
+  /** For aggregated `post_like` rows: the liked post + how many likers the
+   *  row represents (renders "X and N-1 others liked your post"). */
+  post_id?: string | null;
+  actor_count?: number;
 };
 
 export const notifications = {