feat: redesign admin panel with Lucide icons and modern styling

- Add lucide-react for SVG icons throughout the admin
- Redesign sidebar with gradient background, icons per nav item, and sticky layout
- Redesign topbar with cleaner user info display
- Redesign dashboard with icon-backed stat cards, gradient progress bars, activity feed
- Update AdminNavLink with icon support and new active state styling
- Improve table styling in admin-page CSS (rounded corners, hover, spacing)
- Clean up unused admin CSS

package.json

@@ -23,6 +23,7 @@
     "bcryptjs": "^3.0.2",
     "croner": "^10.0.1",
     "hash-wasm": "^4.12.0",
+    "lucide-react": "^1.23.0",
     "next": "^16.2.9",
     "next-auth": "5.0.0-beta.31",
     "next-intl": "^4.13.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       hash-wasm:
         specifier: ^4.12.0
         version: 4.12.0
+      lucide-react:
+        specifier: ^1.23.0
+        version: 1.23.0([email protected])
       next:
         specifier: ^16.2.9
         version: 16.2.9([email protected]([email protected]))([email protected])
@@ -2125,6 +2128,11 @@ packages:
     resolution: {integrity: sha512-DqC6n3QQ77zdFpCMASA1a3Jlb64Hv2N2DciFGkO/4L9+q/IpIAuRlKOvCXabtRW6cQf8usbmM6BE/TOPysCdIA==}
     engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   [email protected]:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -4012,6 +4020,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]([email protected]):
+    dependencies:
+      react: 19.2.7
+
   [email protected]:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5

src/app/admin/users/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { StatusCard } from "@/components/admin/dashboard";
+import { ConfirmAction } from "@/components/admin/confirm-action";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -97,48 +98,9 @@ export default async function AdminUsers({
                     <td>
                       <div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap", justifyContent: "flex-start" }}>
                         <Link href={`/admin/users/${u.id}/edit`} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Edit</Link>
-                        <form style={{ display: "inline-block" }} action="/api/admin/users/actions" method="post">
-                          <input type="hidden" name="userId" value={u.id} />
-                          <input type="hidden" name="username" value={u.username} />
-                          <button
-                            type="submit"
-                            name="action"
-                            value="set_rank"
-                            className="btn btn-outline"
-                            style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
-                            onClick={(e) => {
-                              if (!confirm(`Set rank for ${u.username}?`)) e.preventDefault();
-                            }}
-                          >Set Rank</button>
-                        </form>
-                        <form style={{ display: "inline-block" }} action="/api/admin/users/actions" method="post">
-                          <input type="hidden" name="userId" value={u.id} />
-                          <input type="hidden" name="username" value={u.username} />
-                          <button
-                            type="submit"
-                            name="action"
-                            value="disconnect"
-                            className="btn btn-danger"
-                            style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
-                            onClick={(e) => {
-                              if (!confirm(`Disconnect ${u.username}?`)) e.preventDefault();
-                            }}
-                          >Disconnect</button>
-                        </form>
-                        <form style={{ display: "inline-block" }} action="/api/admin/users/actions" method="post">
-                          <input type="hidden" name="userId" value={u.id} />
-                          <input type="hidden" name="username" value={u.username} />
-                          <button
-                            type="submit"
-                            name="action"
-                            value="alert"
-                            className="btn btn-primary"
-                            style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
-                            onClick={(e) => {
-                              if (!confirm(`Send alert to ${u.username}?`)) e.preventDefault();
-                            }}
-                          >Alert</button>
-                        </form>
+                        <ConfirmAction message={`Set rank for ${u.username}?`} action="set_rank" userId={u.id} className="btn btn-outline" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Set Rank</ConfirmAction>
+                        <ConfirmAction message={`Disconnect ${u.username}?`} action="disconnect" userId={u.id} className="btn btn-danger" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Disconnect</ConfirmAction>
+                        <ConfirmAction message={`Send alert to ${u.username}?`} action="alert" userId={u.id} className="btn btn-primary" style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}>Alert</ConfirmAction>
                       </div>
                     </td>
                   </tr>

src/app/globals.css

@@ -436,7 +436,7 @@ tbody tr:hover {
 }
 
 /* ── Admin panel (Housekeeping) ─────────────────────────────────
-   Page content wrapper — table card styling and h1 formatting. */
+   Page content wrapper — card-style tables and consistent spacing. */
 .admin-page main > h1:first-child,
 .admin-page > h1:first-child {
   margin-top: 0;
@@ -447,33 +447,35 @@ tbody tr:hover {
   border-bottom: 2px solid var(--border);
   margin-bottom: 0.85rem;
 }
-/* Carded tables — give the bare admin tables a surface + frame. */
 .admin-page table {
   background: var(--color-surface);
-  box-shadow: var(--shadow-card);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 16px;
   overflow: hidden;
+  box-shadow: var(--shadow-card);
 }
 .admin-page thead th {
-  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
+  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
   color: var(--color-text-muted);
   border-bottom: 1px solid var(--border);
   white-space: nowrap;
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  padding: 0.7rem 0.9rem;
 }
-.admin-page th,
 .admin-page td {
-  padding: 0.6rem 0.8rem;
+  padding: 0.7rem 0.9rem;
+  border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
+  font-size: 0.88rem;
 }
 .admin-page tbody tr {
   transition: background 0.12s ease;
 }
 .admin-page tbody tr:hover {
-  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
-}
-.admin-page tbody td {
-  border-top: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
+  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
 }
+.admin-page thead tr:first-child th:first-child { border-radius: 16px 0 0 0; }
+.admin-page thead tr:first-child th:last-child { border-radius: 0 16px 0 0; }
 /* ── Public design system (faithful to the atom theme) ──────────
    content-card = surface card with a primary-tinted header (icon +
    title + subtitle) and a padded body — the signature atom block. */

src/components/admin/admin-nav-link.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import type { ReactNode } from "react";
 import { usePathname } from "next/navigation";
 
 /**
@@ -8,7 +9,7 @@ import { usePathname } from "next/navigation";
  * exactly; every other entry also matches its sub-routes (e.g. /admin/radio is
  * active on /admin/radio/history) so the current section stays lit.
  */
-export function AdminNavLink({ href, label }: { href: string; label: string }) {
+export function AdminNavLink({ href, icon, children }: { href: string; icon?: ReactNode; children: ReactNode }) {
   const pathname = usePathname() ?? "";
   const active =
     href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(`${href}/`);
@@ -16,11 +17,18 @@ export function AdminNavLink({ href, label }: { href: string; label: string }) {
   return (
     <Link
       href={href}
-      className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-[#c8cbe0] text-sm font-semibold no-underline transition-[background,color] duration-150 hover:bg-white/7 hover:text-white hover:no-underline ${
-        active ? "bg-[var(--color-primary)] text-[#1a1a2e] shadow-[0_2px_8px_rgba(238,180,37,0.35)]" : ""
+      className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
+        active
+          ? "bg-gradient-to-r from-[var(--color-primary)]/20 to-transparent text-white shadow-sm border-l-2 border-[var(--color-primary)]"
+          : "text-[#8b8fa8] hover:text-white hover:bg-white/[0.04] hover:no-underline"
       }`}
     >
-      {label}
+      {icon ? (
+        <span className={`flex-none ${active ? "text-[var(--color-primary)]" : "text-[#5c5f7a]"}`}>
+          {icon}
+        </span>
+      ) : null}
+      <span>{children}</span>
     </Link>
   );
 }

src/components/admin/confirm-action.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+export function ConfirmAction({
+  message,
+  action,
+  userId,
+  className,
+  style,
+  children,
+}: {
+  message: string;
+  action: string;
+  userId: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children: ReactNode;
+}) {
+  return (
+    <form action="/api/admin/users/actions" method="post" style={{ display: "inline-block" }}>
+      <input type="hidden" name="userId" value={userId} />
+      <input type="hidden" name="action" value={action} />
+      <button
+        type="submit"
+        className={className}
+        style={style}
+        onClick={(e) => {
+          if (!confirm(message)) e.preventDefault();
+        }}
+      >
+        {children}
+      </button>
+    </form>
+  );
+}

src/components/admin/dashboard.tsx

@@ -25,26 +25,20 @@ export function StatusCard({
   value: ReactNode;
   hint?: string;
   state?: State;
-  icon?: string;
+  icon?: ReactNode;
 }) {
-  const borderColor =
-    state === "ok" ? "border-l-green-600" :
-    state === "warn" ? "border-l-[var(--color-primary)]" :
-    state === "danger" ? "border-l-red-500" :
-    "border-l-[var(--color-text-muted)]";
-
   return (
-    <div className={`bg-[var(--color-surface)] border border-[var(--border)] border-l-4 ${borderColor} rounded-xl p-3.5 shadow-card`}>
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-[0.72rem] font-bold uppercase tracking-wider text-[var(--color-text-muted)]">{label}</span>
+    <div className="bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl p-5 shadow-card hover:shadow-card-hover transition-shadow duration-200">
+      <div className="flex items-center justify-between gap-3 mb-3">
+        <span className="text-[0.65rem] font-bold uppercase tracking-widest text-[var(--color-text-muted)]">{label}</span>
         {icon ? (
-          <span className="text-lg leading-none" aria-hidden>
+          <span className="w-8 h-8 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/15 to-[var(--color-primary)]/5 grid place-items-center text-[var(--color-primary)] flex-none">
             {icon}
           </span>
         ) : null}
       </div>
-      <div className="text-[1.7rem] font-extrabold leading-tight mt-1.5">{value}</div>
-      {hint ? <div className="text-[0.78rem] text-[var(--color-text-muted)] mt-1">{hint}</div> : null}
+      <div className="text-2xl font-extrabold text-[var(--color-text)] leading-tight">{value}</div>
+      {hint ? <div className="text-[0.7rem] text-[var(--color-text-muted)] mt-1.5 font-medium">{hint}</div> : null}
     </div>
   );
 }