feat: add comments

components/social/post-actions-footer.tsx

@@ -22,7 +22,7 @@
  */
 
 import { useRef, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2, Pin } from "lucide-react";
 import {
   HiHeart,
   HiOutlineArrowPath,
@@ -33,12 +33,18 @@ import {
 } from "react-icons/hi2";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-import { posts as postsApi, SocialError, type Post } from "@/lib/social";
+import {
+  posts as postsApi,
+  SocialError,
+  type Comment,
+  type Post,
+} from "@/lib/social";
 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 { PostCommentsDrawer } from "@/components/social/post-comments-drawer";
 import { useSharePost } from "./share-post-provider";
 
 // All icons come from the Heroicons v2 outline family (react-icons
@@ -68,6 +74,13 @@ export function PostActionsFooter({ post }: { post: Post }) {
   const [likeCount, setLikeCount] = useState<number>(post.likes_count ?? 0);
   const [likesOpen, setLikesOpen] = useState(false);
   const likeBusy = useRef(false);
+  // Comments drawer + the post's pinned comment (shown below the action row
+  // even when the drawer is closed). Seeded from the hydrated post; kept in
+  // sync as the author pins/unpins inside the drawer.
+  const [commentsOpen, setCommentsOpen] = useState(false);
+  const [pinned, setPinned] = useState<Comment | null>(
+    post.pinned_comment ?? null,
+  );
 
   const isOwner = !!user && user.id === post.user_id;
   // Owners and resharers both see Send — the post is "on their account"
@@ -161,11 +174,7 @@ export function PostActionsFooter({ post }: { post: Post }) {
           ) : null}
           <ActionButton
             label="Comment"
-            onClick={() =>
-              withAuth(() => {
-                toast("Comments are coming soon", { duration: 2000 });
-              })
-            }
+            onClick={() => setCommentsOpen(true)}
             icon={<HiOutlineChatBubbleOvalLeft className={ICON_CLASS} />}
           />
           {/* Reshare for posts not yet on your account, Send for posts
@@ -209,6 +218,22 @@ export function PostActionsFooter({ post }: { post: Post }) {
         />
       </div>
 
+      {/* Pinned comment — stays visible under the action row even with the
+          comments drawer closed. Tapping it opens the thread. */}
+      {pinned ? (
+        <button
+          type="button"
+          onClick={() => setCommentsOpen(true)}
+          className="mx-2 mt-1 flex w-[calc(100%-1rem)] items-center gap-1.5 rounded-lg bg-muted/50 px-3 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-muted"
+        >
+          <Pin className="size-3.5 shrink-0 text-primary" />
+          <span className="font-medium text-foreground shrink-0">
+            @{pinned.author_handle}
+          </span>
+          <span className="truncate">{pinned.body}</span>
+        </button>
+      ) : null}
+
       <CollectionsDrawer
         open={collectionsOpen}
         onClose={() => setCollectionsOpen(false)}
@@ -220,6 +245,12 @@ export function PostActionsFooter({ post }: { post: Post }) {
         postId={post.id}
         onClose={() => setLikesOpen(false)}
       />
+      <PostCommentsDrawer
+        open={commentsOpen}
+        post={post}
+        onClose={() => setCommentsOpen(false)}
+        onPinnedChange={setPinned}
+      />
       {/* SharePostSheet is mounted globally by SharePostProvider, so
           no per-card instance lives here. The provider's
           openShareSheet swaps the active post under the hood. */}