feat: add user centric features

2026-05-30 23:44:08 +05:30
parent 7bd2952caa
commit dcdd2383c6
63 changed files with 16783 additions and 1735 deletions
@@ -0,0 +1,109 @@
+"use client";
+
+/**
+ * PostActionsFooter — the icon-button row at the bottom of a post card.
+ *
+ *   Left cluster:   Like · Comment · Reshare
+ *   Right cluster:  Save to Collection (folder-plus)
+ *
+ * Like / Comment / Reshare are placeholders for now — they fire a
+ * "coming soon" toast on click. Save to Collection mounts the existing
+ * CollectionsDrawer in `existingPostId` mode so the post is attached
+ * directly without creating a duplicate.
+ *
+ * Auth gating is handled per-action via `useAuthGate` — anonymous users
+ * see the in-place auth modal before the underlying action runs.
+ */
+
+import { useState } from "react";
+import { FolderPlus, Heart, MessageCircle, Repeat2 } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { useAuthGate } from "@/components/auth/auth-gate";
+import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import { CollectionsDrawer } from "@/components/selection-toolbar/collections-drawer";
+
+export function PostActionsFooter({ postID }: { postID: string }) {
+  const { requireAuth } = useAuthGate();
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const [collectionsOpen, setCollectionsOpen] = useState(false);
+
+  async function withAuth(fn: () => void | Promise<void>) {
+    if (!(await requireAuth())) return;
+    await fn();
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between px-2">
+        <div className="flex items-center gap-1">
+          <ActionButton
+            label="Like"
+            onClick={() =>
+              withAuth(() => {
+                toast("Likes are coming soon", { duration: 2000 });
+              })
+            }
+            icon={<Heart className="size-5" />}
+          />
+          <ActionButton
+            label="Comment"
+            onClick={() =>
+              withAuth(() => {
+                toast("Comments are coming soon", { duration: 2000 });
+              })
+            }
+            icon={<MessageCircle className="size-5" />}
+          />
+          <ActionButton
+            label="Reshare"
+            onClick={() =>
+              withAuth(() => {
+                toast("Resharing is coming soon", { duration: 2000 });
+              })
+            }
+            icon={<Repeat2 className="size-5" />}
+          />
+        </div>
+        <ActionButton
+          label="Save to collection"
+          onClick={() => withAuth(() => setCollectionsOpen(true))}
+          icon={<FolderPlus className="size-5" />}
+        />
+      </div>
+
+      <CollectionsDrawer
+        open={collectionsOpen}
+        onClose={() => setCollectionsOpen(false)}
+        isMobile={isMobile}
+        existingPostId={postID}
+      />
+    </>
+  );
+}
+
+function ActionButton({
+  label,
+  onClick,
+  icon,
+}: {
+  label: string;
+  onClick: () => void;
+  icon: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      title={label}
+      className={cn(
+        "size-10 inline-flex items-center justify-center rounded-full",
+        "text-muted-foreground hover:text-foreground hover:bg-muted",
+        "transition-colors",
+      )}
+    >
+      {icon}
+    </button>
+  );
+}