fix: ui fixes

2026-06-16 15:49:23 +05:30
parent 41367a8b27
commit 5342123fba
8 changed files with 388 additions and 34 deletions
@@ -0,0 +1,98 @@
+"use client";
+
+import * as React from "react";
+import { MoreVertical } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type MenuItem = {
+  label: string;
+  onClick: () => void;
+  destructive?: boolean;
+};
+
+/**
+ * A kebab (⋯) trigger with a small dropdown of actions — keeps secondary /
+ * destructive row actions hidden until opened. The menu is fixed-positioned
+ * from the trigger so the table's overflow container can't clip it; it closes
+ * on outside-click, Escape, or scroll.
+ */
+export function RowMenu({ items }: { items: MenuItem[] }) {
+  const [open, setOpen] = React.useState(false);
+  const [pos, setPos] = React.useState<{ top: number; right: number } | null>(
+    null,
+  );
+  const btnRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    function onDown(e: MouseEvent) {
+      const t = e.target as Node;
+      if (btnRef.current?.contains(t) || menuRef.current?.contains(t)) return;
+      setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    function onScroll() {
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [open]);
+
+  function toggle() {
+    if (!open && btnRef.current) {
+      const r = btnRef.current.getBoundingClientRect();
+      setPos({ top: r.bottom + 4, right: window.innerWidth - r.right });
+    }
+    setOpen((v) => !v);
+  }
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={toggle}
+        aria-label="Actions"
+        aria-haspopup="menu"
+        className="inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <MoreVertical className="size-4" />
+      </button>
+      {open && pos ? (
+        <div
+          ref={menuRef}
+          role="menu"
+          style={{ position: "fixed", top: pos.top, right: pos.right, zIndex: 50 }}
+          className="w-44 rounded-lg border border-border bg-card py-1 text-left shadow-lg"
+        >
+          {items.map((it, i) => (
+            <button
+              key={i}
+              type="button"
+              role="menuitem"
+              onClick={() => {
+                setOpen(false);
+                it.onClick();
+              }}
+              className={cn(
+                "block w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted",
+                it.destructive ? "text-destructive" : "text-foreground",
+              )}
+            >
+              {it.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+}