fix: ui fixes

app/(dashboard)/feedback/page.tsx

@@ -8,6 +8,7 @@ import { ListShell, EmptyRow } from "@/components/list-shell";
 import { Table, THead, TR, TH, TD } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
 import { Modal } from "@/components/ui/modal";
+import { useConfirm } from "@/components/confirm";
 import { Textarea } from "@/components/ui/input";
 import { cn, fmtDate } from "@/lib/utils";
 
@@ -21,8 +22,43 @@ export default function FeedbackPage() {
     [status],
   );
   const list = usePagedList<AdminFeedback>(fetcher, [status]);
+  const confirm = useConfirm();
   const [reply, setReply] = useState<AdminFeedback | null>(null);
 
+  async function run(action: Promise<unknown>, successMsg: string) {
+    try {
+      await action;
+      toast.success(successMsg);
+      list.refresh();
+    } catch (err) {
+      toast.error(err instanceof AdminError ? err.message : "Action failed.");
+    }
+  }
+
+  async function acknowledge(f: AdminFeedback) {
+    if (
+      await confirm({
+        title: "Acknowledge this feedback?",
+        message: "The author will be emailed that we've seen it and started work.",
+        confirmLabel: "Acknowledge",
+      })
+    ) {
+      run(api.acknowledgeFeedback(f.id), "Feedback acknowledged.");
+    }
+  }
+
+  async function resolve(f: AdminFeedback) {
+    if (
+      await confirm({
+        title: "Mark resolved?",
+        message: "The author will be emailed a thank-you. This can't be undone.",
+        confirmLabel: "Mark resolved",
+      })
+    ) {
+      run(api.resolveFeedback(f.id), "Feedback resolved.");
+    }
+  }
+
   return (
     <ListShell
       title="Feedback"
@@ -94,9 +130,29 @@ export default function FeedbackPage() {
                 </TD>
                 <TD className="whitespace-nowrap">{fmtDate(f.created_at)}</TD>
                 <TD className="text-right">
-                  <Button size="sm" variant="outline" onClick={() => setReply(f)}>
+                  <div className="flex flex-wrap justify-end gap-2">
-                    {f.replied_at ? "Reply again" : "Reply"}
+                    {!f.resolved_at && !f.acknowledged_at ? (
-                  </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => acknowledge(f)}
+                      >
+                        Acknowledge
+                      </Button>
+                    ) : null}
+                    {!f.resolved_at ? (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => resolve(f)}
+                      >
+                        Resolve
+                      </Button>
+                    ) : null}
+                    <Button size="sm" variant="outline" onClick={() => setReply(f)}>
+                      {f.replied_at ? "Reply again" : "Reply"}
+                    </Button>
+                  </div>
                 </TD>
               </TR>
             ))
@@ -117,8 +173,19 @@ export default function FeedbackPage() {
 }
 
 function StatusBadge({ f }: { f: AdminFeedback }) {
-  const label = f.replied_at ? "Replied" : f.resolved_at ? "Resolved" : "Open";
+  const label = f.replied_at
-  const tone = f.resolved_at || f.replied_at ? "text-primary" : "text-muted-foreground";
+    ? "Replied"
+    : f.resolved_at
+      ? "Resolved"
+      : f.acknowledged_at
+        ? "Acknowledged"
+        : "Open";
+  const tone =
+    f.replied_at || f.resolved_at
+      ? "text-primary"
+      : f.acknowledged_at
+        ? "text-amber-600"
+        : "text-muted-foreground";
   return <span className={cn("text-sm", tone)}>{label}</span>;
 }
 

app/(dashboard)/layout.tsx

@@ -6,6 +6,7 @@ import { usePathname, useRouter } from "next/navigation";
 import {
   Flag,
   FolderClosed,
+  LayoutDashboard,
   LayoutGrid,
   LogOut,
   MessageSquare,
@@ -17,6 +18,7 @@ import { Button } from "@/components/ui/button";
 import { ConfirmProvider } from "@/components/confirm";
 
 const NAV = [
+  { href: "/", label: "Overview", icon: LayoutDashboard },
   { href: "/users", label: "Users", icon: Users },
   { href: "/posts", label: "Posts", icon: LayoutGrid },
   { href: "/collections", label: "Collections", icon: FolderClosed },

app/(dashboard)/page.tsx

@@ -1,6 +1,107 @@
-import { redirect } from "next/navigation";
+"use client";
 
-// The dashboard root just lands on Users.
+import { useEffect, useState } from "react";
-export default function DashboardIndex() {
+import { api, AdminError, type Stats } from "@/lib/api";
-  redirect("/users");
+
+export default function OverviewPage() {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    api
+      .stats()
+      .then((s) => {
+        if (!cancelled) setStats(s);
+      })
+      .catch((e) => {
+        if (!cancelled)
+          setError(e instanceof AdminError ? e.message : "Could not load stats.");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-2xl font-semibold text-foreground">Overview</h1>
+
+      {error ? (
+        <p className="text-sm text-destructive">{error}</p>
+      ) : !stats ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : (
+        <>
+          <section className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+            <StatCard label="Users" value={stats.users} delta={`+${stats.users_last_7_days} / 7d`} />
+            <StatCard label="Posts" value={stats.posts} delta={`+${stats.posts_last_7_days} / 7d`} />
+            <StatCard
+              label="Collections"
+              value={stats.collections}
+              delta={`${stats.public_collections} public`}
+            />
+            <StatCard label="Bookmarks" value={stats.bookmarks} />
+            <StatCard label="Reshares" value={stats.reshares} />
+            <StatCard
+              label="Feedback"
+              value={stats.feedback}
+              delta={`+${stats.feedback_last_7_days} / 7d`}
+            />
+          </section>
+
+          <section className="space-y-3">
+            <h2 className="text-lg font-semibold text-foreground">
+              Feedback by category
+            </h2>
+            {stats.feedback_by_category.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No feedback yet.</p>
+            ) : (
+              <div className="max-w-md divide-y divide-border rounded-xl border border-border bg-card">
+                {stats.feedback_by_category.map((c) => (
+                  <div
+                    key={c.category}
+                    className="flex items-center justify-between px-4 py-2.5 text-sm"
+                  >
+                    <span className="capitalize text-foreground">
+                      {c.category.replace(/_/g, " ")}
+                    </span>
+                    <span className="font-medium text-muted-foreground">
+                      {c.count}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        </>
+      )}
+    </div>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  delta,
+}: {
+  label: string;
+  value: number;
+  delta?: string;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-card p-4">
+      <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      <div className="mt-1 flex items-baseline gap-2">
+        <span className="text-2xl font-semibold text-foreground">
+          {value.toLocaleString()}
+        </span>
+        {delta ? (
+          <span className="text-xs font-medium text-primary">{delta}</span>
+        ) : null}
+      </div>
+    </div>
+  );
 }

app/(dashboard)/users/page.tsx

@@ -8,6 +8,8 @@ import { ListShell, EmptyRow } from "@/components/list-shell";
 import { Table, THead, TR, TH, TD } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
 import { Modal } from "@/components/ui/modal";
+import { RowMenu, type MenuItem } from "@/components/ui/menu";
+import { Avatar } from "@/components/ui/avatar";
 import { useConfirm } from "@/components/confirm";
 import { Input, Textarea } from "@/components/ui/input";
 import { fmtDate } from "@/lib/utils";
@@ -44,6 +46,21 @@ export default function UsersPage() {
     }
   }
 
+  function menuItems(u: AdminUser): MenuItem[] {
+    const items: MenuItem[] = [
+      { label: "Send notification", onClick: () => setNotify(u) },
+    ];
+    // No ban option for fellow admins (avoid locking each other out).
+    if (u.role !== "admin") {
+      items.push({
+        label: u.banned_at ? "Unban account" : "Ban account",
+        onClick: () => toggleBan(u),
+        destructive: !u.banned_at,
+      });
+    }
+    return items;
+  }
+
   return (
     <ListShell
       title="Users"
@@ -57,7 +74,7 @@ export default function UsersPage() {
           <TR>
             <TH>User</TH>
             <TH>Email</TH>
-            <TH>Role</TH>
+            <TH>Posts</TH>
             <TH>Joined</TH>
             <TH className="text-right">Actions</TH>
           </TR>
@@ -69,36 +86,30 @@ export default function UsersPage() {
             list.items.map((u) => (
               <TR key={u.id}>
                 <TD>
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-3">
-                    <span className="font-medium">{u.name}</span>
+                    <Avatar src={u.avatar_url} name={u.name} />
-                    {u.banned_at ? (
+                    <div className="min-w-0">
-                      <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive">
+                      <div className="flex items-center gap-2">
-                        Suspended
+                        <span className="font-medium">{u.name}</span>
-                      </span>
+                        {u.banned_at ? (
-                    ) : null}
+                          <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive">
+                            Suspended
+                          </span>
+                        ) : null}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        @{u.handle}
+                      </div>
+                    </div>
                   </div>
-                  <div className="text-xs text-muted-foreground">@{u.handle}</div>
                 </TD>
                 <TD>
                   {u.email ?? <span className="text-muted-foreground">—</span>}
                 </TD>
-                <TD className="capitalize">{u.role}</TD>
+                <TD>{u.post_count}</TD>
                 <TD className="whitespace-nowrap">{fmtDate(u.created_at)}</TD>
                 <TD className="text-right">
-                  <div className="flex flex-wrap justify-end gap-2">
+                  <RowMenu items={menuItems(u)} />
-                    <Button size="sm" variant="outline" onClick={() => setNotify(u)}>
-                      Notify
-                    </Button>
-                    {u.role !== "admin" ? (
-                      <Button
-                        size="sm"
-                        variant={u.banned_at ? "outline" : "destructive"}
-                        onClick={() => toggleBan(u)}
-                      >
-                        {u.banned_at ? "Unban" : "Ban"}
-                      </Button>
-                    ) : null}
-                  </div>
                 </TD>
               </TR>
             ))

app/login/page.tsx

@@ -22,7 +22,7 @@ export default function LoginPage() {
   // state against the admin origin.
   async function gateAdmin(user: Me) {
     if (user.role === "admin") {
-      router.replace("/users");
+      router.replace("/");
       return;
     }
     await api.logout().catch(() => {});

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

lib/api.ts

@@ -78,6 +78,20 @@ export type Me = {
   role: string;
 };
 
+export type Stats = {
+  users: number;
+  users_last_7_days: number;
+  posts: number;
+  posts_last_7_days: number;
+  collections: number;
+  public_collections: number;
+  bookmarks: number;
+  reshares: number;
+  feedback: number;
+  feedback_last_7_days: number;
+  feedback_by_category: { category: string; count: number }[];
+};
+
 export type AdminUser = {
   id: string;
   email: string | null;
@@ -88,6 +102,7 @@ export type AdminUser = {
   plan: string;
   email_verified_at: string | null;
   banned_at: string | null;
+  post_count: number;
   created_at: string;
 };
 
@@ -124,6 +139,7 @@ export type AdminFeedback = {
   message: string;
   contact_email: string | null;
   created_at: string;
+  acknowledged_at: string | null;
   resolved_at: string | null;
   replied_at: string | null;
   reply_message: string | null;
@@ -207,6 +223,10 @@ export const api = {
   },
 
   // Admin resources
+  async stats(): Promise<Stats> {
+    const { data } = await call<Stats>("/admin/stats");
+    return data;
+  },
   users(q: string, limit: number, offset: number) {
     return listed<AdminUser>(`/admin/users${qs({ q, limit, offset })}`);
   },
@@ -255,6 +275,12 @@ export const api = {
       body: JSON.stringify({ message }),
     });
   },
+  acknowledgeFeedback(id: string) {
+    return call(`/admin/feedback/${id}/acknowledge`, { method: "POST" });
+  },
+  resolveFeedback(id: string) {
+    return call(`/admin/feedback/${id}/resolve`, { method: "POST" });
+  },
   reports(type: ReportType, q: string, limit: number, offset: number) {
     return listed<AdminReport>(`/admin/reports${qs({ type, q, limit, offset })}`);
   },