@kyro-cms/admin 0.3.1 → 0.3.4

package/src/components/SessionsManager.tsx

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from "react";
+import { apiGet, apiDelete } from "../lib/api";
+import { Shield, Monitor, Trash2, Clock, AlertTriangle, Info, LogOut, Globe, Activity, RefreshCcw, Smartphone, Laptop } from "./ui/icons";
+import { PageHeader } from "./ui/PageHeader";
+import { Badge } from "./ui/Badge";
+
+interface Session {
+  id: string;
+  sessionName: string;
+  currentSession: boolean;
+  deviceInfo?: {
+    userAgent?: string;
+    ip?: string;
+    platform?: string;
+    browser?: string;
+    device?: string;
+  };
+  createdAt: number;
+  lastActivityAt: number;
+}
+
+function timeAgo(ts: number): string {
+  const diff = Date.now() - ts;
+  const mins = Math.floor(diff / 60000);
+  const hrs = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+  if (mins < 1) return "Just now";
+  if (mins < 60) return `${mins}m ago`;
+  if (hrs < 24) return `${hrs}h ago`;
+  if (days < 7) return `${days}d ago`;
+  return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+export function SessionsManager() {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [revokingId, setRevokingId] = useState<string | null>(null);
+  const [revokingAll, setRevokingAll] = useState(false);
+
+  useEffect(() => {
+    apiGet<{ sessions: Session[] }>("/api/auth/sessions")
+      .then((r) => { 
+        setSessions(Array.isArray(r.sessions) ? r.sessions : []); 
+        setError(""); 
+      })
+      .catch(() => setError("Failed to load sessions"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const revoke = async (id: string) => {
+    setRevokingId(id);
+    try {
+      await apiDelete(`/api/auth/sessions/${id}`);
+      setSessions((p) => p.filter((s) => s.id !== id));
+    } catch { 
+      setError("Failed to revoke session"); 
+    } finally { 
+      setRevokingId(null); 
+    }
+  };
+
+  const revokeAll = async () => {
+    setRevokingAll(true);
+    try {
+      await apiDelete("/api/auth/sessions");
+      setSessions((p) => p.filter((s) => s.currentSession));
+    } catch { 
+      setError("Failed to revoke sessions"); 
+    } finally { 
+      setRevokingAll(false); 
+    }
+  };
+
+  const otherCount = sessions.filter((s) => !s.currentSession).length;
+
+  return (
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
+      <PageHeader
+        title="Active Sessions"
+        description="Monitor and manage your cryptographic access across all devices."
+        icon={Monitor}
+        actions={otherCount > 0 ? [
+          {
+            label: `Revoke ${otherCount} Sessions`,
+            onClick: () => { if (confirm(`Revoke all ${otherCount} other sessions?`)) revokeAll(); },
+            icon: LogOut,
+            variant: "outline",
+            className: "text-red-500 hover:text-red-600 hover:bg-red-500/5 border-red-500/20"
+          }
+        ] : undefined}
+      />
+
+      <div className="flex flex-col gap-8 surface-tile p-8">
+        {/* Security & Summary Row */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          <div className="lg:col-span-2 p-5 rounded-2xl bg-amber-500/5 border border-amber-500/10 flex items-center gap-4">
+            <div className="p-2.5 bg-amber-500/10 rounded-xl shrink-0">
+              <Shield className="w-4 h-4 text-amber-500" />
+            </div>
+            <div>
+              <h4 className="text-[10px] font-bold uppercase tracking-widest text-amber-600 mb-0.5">Security Protocol</h4>
+              <p className="text-[11px] text-amber-900/60 leading-relaxed font-medium">
+                Active sessions authorize access to your identity. Revoke any unfamiliar devices immediately.
+              </p>
+            </div>
+          </div>
+          <div className="p-5 rounded-2xl bg-[var(--kyro-bg-secondary)]/50 border border-[var(--kyro-border)] flex items-center gap-4">
+            <div className="p-2.5 bg-[var(--kyro-primary)]/5 rounded-xl">
+              <Activity className="w-4 h-4 text-[var(--kyro-primary)]" />
+            </div>
+            <div>
+              <div className="text-[9px] font-bold opacity-40 uppercase tracking-widest mb-0.5">Total Load</div>
+              <div className="text-sm font-bold tracking-tight">{sessions.length} Active Nodes</div>
+            </div>
+          </div>
+        </div>
+
+        {error && (
+          <div className="p-4 bg-red-500/10 border border-red-500/20 flex items-center gap-4 rounded-xl animate-pulse">
+            <AlertTriangle className="w-4 h-4 text-red-500" />
+            <span className="text-[11px] font-bold text-red-600 uppercase tracking-widest">{error}</span>
+          </div>
+        )}
+
+        <section className="space-y-6">
+          <div className="flex items-center justify-between gap-4 pb-4 border-b border-[var(--kyro-border)]/50">
+            <div className="flex items-center gap-2 px-1">
+              <div className="w-0.5 h-3 bg-[var(--kyro-primary)] rounded-full" />
+              <h2 className="text-[10px] font-bold tracking-[0.2em] opacity-40 uppercase">Authenticated Hosts</h2>
+            </div>
+          </div>
+
+          {loading ? (
+            <div className="p-12 text-center rounded-3xl border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30">
+              <RefreshCcw className="w-8 h-8 mx-auto mb-3 text-[var(--kyro-primary)] animate-spin-slow opacity-40" />
+              <p className="text-[10px] font-bold uppercase tracking-widest opacity-30">Analyzing session matrix...</p>
+            </div>
+          ) : sessions.length === 0 ? (
+            <div className="p-12 text-center rounded-3xl border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30">
+              <Monitor className="w-10 h-10 mx-auto mb-3 text-[var(--kyro-text-secondary)] opacity-20" />
+              <h3 className="text-lg font-bold mb-1">No active sessions</h3>
+              <p className="text-xs text-[var(--kyro-text-secondary)] opacity-50">Identity manifest is currently clear.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {sessions.map((s) => (
+                <div
+                  key={s.id}
+                  className={`group relative overflow-hidden bg-[var(--kyro-bg-secondary)]/30 border border-[var(--kyro-border)] rounded-2xl p-5 hover:border-[var(--kyro-primary)]/50 transition-all duration-300 ${s.currentSession ? "ring-1 ring-[var(--kyro-primary)]/20 bg-[var(--kyro-primary)]/[0.02]" : ""}`}
+                >
+                  <div className="flex items-start justify-between gap-4 relative z-10">
+                    <div className="flex items-center gap-3">
+                      <div className={`p-2.5 rounded-xl transition-colors shadow-sm ${s.currentSession ? "bg-[var(--kyro-primary)] text-white" : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] border border-[var(--kyro-border)]"}`}>
+                        {s.deviceInfo?.platform?.toLowerCase().includes("android") || s.deviceInfo?.platform?.toLowerCase().includes("ios") 
+                          ? <Smartphone className="w-4 h-4" /> 
+                          : <Laptop className="w-4 h-4" />}
+                      </div>
+                      <div>
+                        <div className="flex items-center gap-2 mb-1">
+                          <h3 className="font-bold text-sm leading-none">
+                            {s.sessionName || s.deviceInfo?.device || "Authorized Host"}
+                          </h3>
+                          {s.currentSession && (
+                            <Badge variant="success" className="text-[7px] font-bold uppercase tracking-tighter px-1 py-0 animate-pulse">Live</Badge>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-3 text-[9px] font-bold opacity-30 uppercase tracking-widest">
+                          <span className="flex items-center gap-1">
+                            <Globe className="w-2.5 h-2.5" />
+                            {s.deviceInfo?.ip || "Unknown"}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {!s.currentSession && (
+                      <button
+                        type="button"
+                        onClick={() => { if (confirm("Revoke this session?")) revoke(s.id); }}
+                        disabled={revokingId === s.id}
+                        className="p-2 bg-red-500/5 text-red-500/30 rounded-lg hover:bg-red-500/10 hover:text-red-500 transition-all border border-transparent hover:border-red-500/20"
+                      >
+                        {revokingId === s.id
+                          ? <RefreshCcw className="w-3.5 h-3.5 animate-spin" />
+                          : <LogOut className="w-3.5 h-3.5" />}
+                      </button>
+                    )}
+                  </div>
+
+                  <div className="mt-4 pt-4 border-t border-[var(--kyro-border)]/50 grid grid-cols-2 gap-3">
+                    <div className="space-y-0.5">
+                      <span className="text-[8px] font-bold uppercase opacity-30 tracking-tighter">Environment</span>
+                      <div className="text-[10px] font-bold truncate opacity-70">
+                        {s.deviceInfo?.browser || "System Browser"}
+                      </div>
+                    </div>
+                    <div className="space-y-0.5">
+                      <span className="text-[8px] font-bold uppercase opacity-30 tracking-tighter">Last Seen</span>
+                      <div className="text-[10px] font-bold opacity-70">{timeAgo(s.lastActivityAt)}</div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}

package/src/components/Sidebar.astro

@@ -1,13 +1,28 @@
 ---
 import "../styles/main.css";
-import { nonAuthCollections } from "@/lib/config";
-
-interface User {
-  id: string;
-  email: string;
-  role: string;
-  tenantId?: string;
-}
+import { nonAuthCollections } from "../lib/config";
+import { adminPath } from "../lib/paths";
+import { getSiteSettings } from "../lib/globals";
+import {
+  Home,
+  Database,
+  Settings,
+  Users,
+  Shield,
+  FileText,
+  Clock,
+  Blocks,
+  Key,
+  Webhook,
+  Grid,
+  User,
+  LogOut,
+  Sun,
+  Moon,
+  Menu,
+  Dot,
+} from "./ui/icons";
+import { UserMenu } from "./UserMenu";
 
 interface NavItem {
   href: string;
@@ -15,24 +30,39 @@ interface NavItem {
   icon: string;
 }
 
+const siteSettings = await getSiteSettings();
+const siteName = siteSettings?.siteName || "KYRO.";
+const siteLogo = siteSettings?.siteLogo;
+const logoWidth = siteSettings?.logo?.width;
+const logoHeight = siteSettings?.logo?.height;
+const logoAlt = siteSettings?.logo?.altText || siteName;
+
 interface Props {
   title: string;
-  user?: User;
 }
 
-const { title, user } = Astro.props;
+const { title } = Astro.props;
 const currentPath = Astro.url.pathname;
 
-const collectionItems: NavItem[] = nonAuthCollections.map((col) => ({
-  href: `/${col.slug}`,
-  label: col.label || col.slug,
-  icon: "collection",
-}));
+const collectionItems: NavItem[] = nonAuthCollections
+  .filter((col) => col.slug !== "media") //removed here cos it's been added manually in the navSections.
+  .map((col) => ({
+    href: `${adminPath}/${col.slug}`,
+    label: col.label || col.slug,
+    icon: "collection",
+  }));
 
 const navSections: { label: string; items: NavItem[] }[] = [
   {
     label: "Home",
-    items: [{ href: "/", label: "Dashboard", icon: "home" }],
+    items: [
+      { href: adminPath, label: "Dashboard", icon: "home" },
+      {
+        href: adminPath + "/media",
+        label: "Media Library",
+        icon: "media",
+      },
+    ],
   },
   {
     label: "Collections",
@@ -41,51 +71,48 @@ const navSections: { label: string; items: NavItem[] }[] = [
   {
     label: "Settings",
     items: [
-      { href: "/settings", label: "General Settings", icon: "settings" },
-      { href: "/users", label: "Users", icon: "users" },
-      { href: "/roles", label: "Roles", icon: "roles" },
-      { href: "/audit", label: "Audit Logs", icon: "audit" },
-    ],
-  },
-  {
-    label: "Developer",
-    items: [
-      { href: "/admin/keys", label: "API Keys", icon: "keys" },
-      { href: "/admin/webhooks", label: "Webhooks", icon: "webhooks" },
+      { href: adminPath + "/users", label: "Users", icon: "users" },
+      { href: adminPath + "/plugins", label: "Plugins", icon: "plugins" },
+      {
+        href: adminPath + "/settings",
+        label: "Settings",
+        icon: "settings",
+      },
     ],
   },
 ];
 
-const icons: Record<string, string> = {
-  home: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
-  collection: "M12 12m-5 0a5 5 0 1 1 10 0 5 5 0 1 1-10 0",
-  settings:
-    "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37M15 12a3 3 0 11-6 0 3 3 0 016 0z",
-  users:
-    "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z",
-  roles:
-    "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",
-  audit:
-    "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
-  keys: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z",
-  webhooks:
-    "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1",
-  user: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
-  logout:
-    "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1",
-  sun: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.364 17.636l-.707.707M17.636 17.636l-.707-.707M6.364 6.364l-.707-.707M15 12a3 3 0 11-6 0 3 3 0 016 0z",
-  moon: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z",
+const icons: Record<string, any> = {
+  home: Home,
+  media: Grid,
+  collection: Dot,
+  menu: Menu,
+  settings: Settings,
+  users: Users,
+  shield: Shield,
+  audit: FileText,
+  plugins: Blocks,
+  keys: Key,
+  webhooks: Webhook,
+  marketplace: Grid,
+  user: User,
+  logout: LogOut,
+  sessions: Clock,
+  sun: Sun,
+  moon: Moon,
 };
 
 function isActive(item: NavItem): boolean {
-  if (item.href === "/") return title === "Dashboard";
-  if (item.href.startsWith("/settings"))
-    return currentPath.startsWith("/settings");
-  if (item.href === "/users") return title === "Users";
-  if (item.href === "/roles") return title === "Roles";
-  if (item.href === "/audit") return title === "Audit Logs";
-  if (item.href === "/admin/keys") return title === "API Keys";
-  if (item.href === "/admin/webhooks") return title === "Webhooks";
+  if (item.href === adminPath) return title === "Dashboard";
+  if (item.href.startsWith(adminPath + "/settings"))
+    return currentPath.startsWith(adminPath + "/settings");
+  if (item.href === adminPath + "/users") return title === "Users";
+  if (item.href === adminPath + "/roles") return title === "Permissions";
+  if (item.href === adminPath + "/audit") return title === "Audit Logs";
+  if (item.href === adminPath + "/keys") return title === "API Keys";
+  if (item.href === adminPath + "/webhooks") return title === "Webhooks";
+  if (item.href === adminPath + "/plugins") return title === "Plugins";
+  if (item.href === adminPath + "/marketplace") return title === "Marketplace";
   // Collections: match /collection-name and /collection-name/* paths
   if (currentPath === item.href || currentPath.startsWith(item.href + "/"))
     return true;
@@ -96,59 +123,116 @@ function isActive(item: NavItem): boolean {
 <aside
   class="surface-tile w-[320px] flex flex-col flex-shrink-0 overflow-hidden"
 >
-  <div class="px-4 py-8">
-    <span
-      class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]"
-      >KYRO.</span
-    >
+  <div class="px-8 py-8 flex items-center gap-3">
+    {
+      siteLogo ? (
+        <img
+          src={siteLogo.url}
+          alt={logoAlt}
+          style={{
+            width: logoWidth ? `${logoWidth}px` : "auto",
+            height: logoHeight ? `${logoHeight}px` : "32px",
+            objectFit: "contain",
+          }}
+          class="rounded-lg"
+        />
+      ) : (
+        <span class="text-2xl font-black tracking-tighter text-[var(--kyro-text-primary)] ">
+          {siteName}
+        </span>
+      )
+    }
   </div>
 
-  <nav class="flex-1 px-4 overflow-y-auto">
+  <nav class="flex-1 px-4 overflow-y-auto" id="sidebar-nav">
     <div class="space-y-4">
       {
         navSections.map((section) => (
-          <div class="space-y-1">
+          <div class="space-y-2" data-section={section.label}>
             <div class="pt-4 pb-2">
-              <p class="px-6 text-[9px] font-black text-[var(--kyro-text-secondary)] uppercase tracking-[0.2em] opacity-40">
+              <p class="px-6 text-[10px] font-medium text-[var(--kyro-text-secondary)]  tracking-[0.2em] opacity-40">
                 {section.label}
               </p>
             </div>
-            {section.items.map((item) => (
-              <a
-                href={item.href}
-                class={`flex items-center gap-4 px-6 py-2 rounded-2xl transition-all font-semibold ${
-                  item.icon === "collection"
-                    ? currentPath === item.href ||
-                      currentPath.startsWith(item.href + "/")
-                      ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]"
-                      : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
-                    : isActive(item)
-                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-lg"
-                      : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
-                }`}
-              >
-                <svg
-                  class="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
+            {section.items.map((item) => {
+              const slug = item.href.split("/").pop();
+              const type = item.href.includes("/settings")
+                ? "global"
+                : "collection";
+              return (
+                <a
+                  href={item.href}
+                  data-nav-item
+                  data-slug={slug}
+                  data-type={type}
+                  class={`flex items-center gap-4 px-6 py-2 rounded-2xl transition-all font-medium text-[13px] ${
+                    item.icon === "collection"
+                      ? currentPath === item.href ||
+                        currentPath.startsWith(item.href + "/")
+                        ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]"
+                        : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
+                      : isActive(item)
+                        ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-lg"
+                        : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
+                  }`}
                 >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2.5"
-                    d={icons[item.icon]}
-                  />
-                </svg>
-                <span>{item.label}</span>
-              </a>
-            ))}
+                  {(() => {
+                    const Icon = icons[item.icon] || Database;
+                    return <Icon className="w-4 h-4" strokeWidth={2.5} />;
+                  })()}
+                  <span>{item.label}</span>
+                </a>
+              );
+            })}
           </div>
         ))
       }
     </div>
   </nav>
 
+  <script>
+    // Handle frontend RBAC pruning in the sidebar
+    window.addEventListener("kyro:auth-ready", (event: any) => {
+      const { permissions } = event.detail;
+      if (!permissions) return;
+
+      const navItems = document.querySelectorAll("[data-nav-item]");
+      navItems.forEach((item: any) => {
+        const slug = item.getAttribute("data-slug");
+        const type = item.getAttribute("data-type");
+
+        let hasAccess = true;
+
+        if (type === "collection" && permissions.collections) {
+          const colPerms = permissions.collections[slug];
+          if (colPerms && colPerms.read === false) {
+            hasAccess = false;
+          }
+        } else if (type === "global" && permissions.globals) {
+          const globalPerms = permissions.globals[slug];
+          if (globalPerms && globalPerms.read === false) {
+            hasAccess = false;
+          }
+        }
+
+        if (!hasAccess) {
+          item.style.display = "none";
+        }
+      });
+
+      // Hide empty sections
+      const sections = document.querySelectorAll("[data-section]");
+      sections.forEach((section: any) => {
+        const visibleItems = section.querySelectorAll(
+          '[data-nav-item]:not([style*="display: none"])',
+        );
+        if (visibleItems.length === 0) {
+          section.style.display = "none";
+        }
+      });
+    });
+  </script>
+
   <div class="px-6 py-4 mt-auto">
     <div
       class="flex items-center justify-between p-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-2xl"
@@ -161,76 +245,20 @@ function isActive(item: NavItem): boolean {
           class="p-2 rounded-lg transition-all active:scale-95"
           title="Light Mode"
         >
-          <svg
-            class="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2.5"
-              d={icons.sun}></path>
-          </svg>
+          <Sun className="w-4 h-4" strokeWidth={2.5} />
         </button>
         <button
           id="theme-dark-btn"
           class="p-2 rounded-lg transition-all active:scale-95"
           title="Dark Mode"
         >
-          <svg
-            class="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2.5"
-              d={icons.moon}></path>
-          </svg>
+          <Moon className="w-4 h-4" strokeWidth={2.5} />
         </button>
       </div>
 
       <div class="flex items-center gap-2">
-        <a
-          href={user ? `/users/${user.id}` : "#"}
-          class="flex justify-center p-2.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded-xl transition-all shadow-sm active:scale-95"
-          title="Account"
-        >
-          <svg
-            class="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2.5"
-              d={icons.user}></path>
-          </svg>
-        </a>
-        <button
-          id="logout-btn"
-          class="flex justify-center p-2.5 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all shadow-sm active:scale-95 font-semibold"
-          title="Logout"
-        >
-          <svg
-            class="w-4 h-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2.5"
-              d={icons.logout}></path>
-          </svg>
-        </button>
+        <UserMenu client:load adminPath={adminPath} />
+        <button id="logout-btn" class="hidden"></button>
       </div>
     </div>
   </div>