Refactor root admin dashboard UI

2026-03-07 17:36:45 +01:00
parent ead75769ef
commit 8606f6e315
25 changed files with 2345 additions and 685 deletions
@@ -27,59 +27,76 @@ export function AppSidebar({
  items,
  footer,
 }: AppSidebarProps) {
+  const portfolioItem = items.find((item) => item.href === "/root/portfolio");
+  const systemOrder = ["/root", "/root/media", "/root/maintenance", "/root/ui-kit"];
+  const systemItems = items
+    .filter((item) => item.href !== "/root/portfolio")
+    .sort((left, right) => systemOrder.indexOf(left.href) - systemOrder.indexOf(right.href));
+
+  function renderItem(item: SidebarItem, nested = false) {
+    const Icon = item.icon;
+
+    return (
+      <div key={item.label} className="space-y-1">
+        <Link
+          href={item.href}
+          className={cn(
+            "flex items-center gap-2 rounded-nested px-3 py-2 text-sm transition-colors",
+            item.active
+              ? "bg-sidebar-primary text-sidebar-primary-foreground"
+              : "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            nested ? "text-sidebar-foreground/72" : undefined,
+          )}
+        >
+          <Icon className="h-4 w-4" />
+          <span>{item.label}</span>
+        </Link>
+
+        {item.children?.length ? (
+          <div className="ml-3 space-y-1 border-l border-sidebar-border pl-3">
+            {item.children.map((child) => renderItem(child, true))}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
  return (
-    <AppCard className="sticky top-6 overflow-hidden bg-sidebar text-sidebar-foreground shadow-sidebar">
-      <CardHeader className="pb-4">
-        <CardTitle className="text-base font-semibold">{title}</CardTitle>
-        <p className="text-sm text-sidebar-foreground/72">{description}</p>
-      </CardHeader>
-      <CardContent className="space-y-1 px-3 pb-3 pt-0">
-        {items.map((item) => {
-          const Icon = item.icon;
+    <div className="sticky top-6 space-y-4">
+      <AppCard className="overflow-hidden bg-sidebar text-sidebar-foreground shadow-sidebar">
+        <CardHeader className="pb-4">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-sidebar-foreground/56">
+            Root Access
+          </p>
+          <CardTitle className="text-base font-semibold">{title}</CardTitle>
+          <p className="text-sm leading-6 text-sidebar-foreground/72">{description}</p>
+        </CardHeader>
+        {footer ? <div className="border-t border-sidebar-border px-4 py-3">{footer}</div> : null}
+      </AppCard>

-          return (
-            <div key={item.label} className="space-y-1">
-              <Link
-                href={item.href}
-                className={cn(
-                  "flex items-center gap-2 rounded-nested px-3 py-2 text-sm transition-colors",
-                  item.active
-                    ? "bg-sidebar-primary text-sidebar-primary-foreground"
-                    : "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                )}
-              >
-                <Icon className="h-4 w-4" />
-                <span>{item.label}</span>
-              </Link>
+      <AppCard className="overflow-hidden bg-sidebar text-sidebar-foreground shadow-sidebar">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-semibold uppercase tracking-[0.2em] text-sidebar-foreground/72">
+            Overview
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-1 px-3 pb-3 pt-0">
+          {systemItems.map((item) => renderItem(item))}
+        </CardContent>
+      </AppCard>

-              {item.children?.length ? (
-                <div className="ml-3 space-y-1 border-l border-sidebar-border pl-3">
-                  {item.children.map((child) => {
-                    const ChildIcon = child.icon;
-
-                    return (
-                      <Link
-                        key={child.label}
-                        href={child.href}
-                        className={cn(
-                          "flex items-center gap-2 rounded-nested px-3 py-2 text-sm transition-colors",
-                          child.active
-                            ? "bg-sidebar-primary text-sidebar-primary-foreground"
-                            : "text-sidebar-foreground/72 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                        )}
-                      >
-                        <ChildIcon className="h-4 w-4" />
-                        <span>{child.label}</span>
-                      </Link>
-                    );
-                  })}
-                </div>
-              ) : null}
-            </div>
-          );
-        })}
-      </CardContent>
-      {footer ? <div className="border-t border-sidebar-border px-4 py-3">{footer}</div> : null}
-    </AppCard>
+      {portfolioItem ? (
+        <AppCard className="overflow-hidden bg-sidebar text-sidebar-foreground shadow-sidebar">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-semibold uppercase tracking-[0.2em] text-sidebar-foreground/72">
+              Portfolio
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-1 px-3 pb-3 pt-0">
+            {renderItem(portfolioItem)}
+          </CardContent>
+        </AppCard>
+      ) : null}
+    </div>
  );
 }