fix: ui fixes

components/ui/avatar.tsx

@@ -0,0 +1,49 @@
+import { cn } from "@/lib/utils";
+
+function initials(name: string): string {
+  return (
+    name
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?"
+  );
+}
+
+/** Small round avatar — the user's image, or their initials as a fallback. */
+export function Avatar({
+  src,
+  name,
+  className,
+}: {
+  src: string | null;
+  name: string;
+  className?: string;
+}) {
+  if (src) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element -- arbitrary R2/CDN
+      // hosts; next/image optimization isn't worth it for tiny admin avatars.
+      <img
+        src={src}
+        alt={name}
+        className={cn(
+          "size-9 shrink-0 rounded-full object-cover ring-1 ring-border",
+          className,
+        )}
+      />
+    );
+  }
+  return (
+    <div
+      className={cn(
+        "flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-1 ring-border",
+        className,
+      )}
+    >
+      {initials(name)}
+    </div>
+  );
+}

components/ui/menu.tsx

@@ -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}
+    </>
+  );
+}