chore: code refactor

2026-06-13 02:24:42 +05:30
parent cc5633c37a
commit 439664a97d
151 changed files with 1387 additions and 1138 deletions
@@ -0,0 +1,144 @@
+"use client";
+
+/**
+ * CommentMenu — the kebab (⋮) overflow menu on a comment: Pin / Report /
+ * Delete (each shown only when permitted). Rendered in a portal with a
+ * transparent full-screen backdrop that swallows the dismiss click, so it
+ * can't reach (and accidentally close) the surrounding vaul comments drawer.
+ */
+
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Flag, MoreVertical, Pin, PinOff, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function CommentMenu({
+  canPin,
+  isPinned,
+  canDelete,
+  canReport,
+  onPin,
+  onDelete,
+  onReport,
+}: {
+  canPin: boolean;
+  isPinned: boolean;
+  canDelete: boolean;
+  canReport: boolean;
+  onPin: () => void;
+  onDelete: () => void;
+  onReport: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<{ top: number; right: number } | null>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  // Nothing actionable → no kebab at all.
+  if (!canPin && !canDelete && !canReport) return null;
+
+  function openMenu() {
+    const r = btnRef.current?.getBoundingClientRect();
+    if (r) setPos({ top: r.bottom + 4, right: window.innerWidth - r.right });
+    setOpen(true);
+  }
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={openMenu}
+        aria-label="Comment options"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="-mr-1 -mt-0.5 size-7 shrink-0 inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+      >
+        <MoreVertical className="size-4" />
+      </button>
+      {open && pos && typeof document !== "undefined"
+        ? createPortal(
+            <>
+              <div
+                className="fixed inset-0 z-[100]"
+                aria-hidden
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setOpen(false);
+                }}
+              />
+              <div
+                role="menu"
+                style={{ position: "fixed", top: pos.top, right: pos.right }}
+                className="z-[101] min-w-40 rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95"
+              >
+                {canPin ? (
+                  <MenuItem
+                    icon={isPinned ? <PinOff className="size-4" /> : <Pin className="size-4" />}
+                    onClick={() => {
+                      setOpen(false);
+                      onPin();
+                    }}
+                  >
+                    {isPinned ? "Unpin" : "Pin"}
+                  </MenuItem>
+                ) : null}
+                {canReport ? (
+                  <MenuItem
+                    icon={<Flag className="size-4" />}
+                    onClick={() => {
+                      setOpen(false);
+                      onReport();
+                    }}
+                  >
+                    Report
+                  </MenuItem>
+                ) : null}
+                {canDelete ? (
+                  <MenuItem
+                    icon={<Trash2 className="size-4" />}
+                    danger
+                    onClick={() => {
+                      setOpen(false);
+                      onDelete();
+                    }}
+                  >
+                    Delete
+                  </MenuItem>
+                ) : null}
+              </div>
+            </>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}
+
+function MenuItem({
+  icon,
+  children,
+  onClick,
+  danger = false,
+}: {
+  icon: React.ReactNode;
+  children: React.ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors",
+        danger
+          ? "text-destructive hover:bg-destructive/10"
+          : "text-foreground hover:bg-muted",
+      )}
+    >
+      <span className="shrink-0">{icon}</span>
+      {children}
+    </button>
+  );
+}