Dashboard UI overhaul: modern design with system stats, SVG icons, Inter font, theme toggle, loading states, and log modal

2026-02-19 02:29:25 +08:00
parent ae1b88732d
commit f3db7d3654
13 changed files with 854 additions and 188 deletions
@@ -7,21 +7,29 @@
  import Terminal from "./routes/Terminal.svelte";

  let page = $state("dashboard");
+  let dark = $state(false);
+
+  function toggleTheme() {
+    dark = !dark;
+    document.documentElement.classList.toggle("dark", dark);
+  }
 </script>

-<div class="flex h-screen bg-white text-gray-900">
-  <Sidebar bind:page />
-  <main class="flex-1 overflow-auto p-6">
-    {#if page === "dashboard"}
-      <Dashboard />
-    {:else if page === "docker"}
-      <Docker />
-    {:else if page === "gitea"}
-      <Gitea />
-    {:else if page === "files"}
-      <Files />
-    {:else if page === "terminal"}
-      <Terminal />
-    {/if}
+<div class="flex h-screen overflow-hidden bg-surface-50 {dark ? 'dark bg-surface-900' : ''}">
+  <Sidebar bind:page {dark} {toggleTheme} />
+  <main class="flex-1 overflow-auto">
+    <div class="max-w-[1400px] mx-auto p-6 lg:p-8">
+      {#if page === "dashboard"}
+        <Dashboard />
+      {:else if page === "docker"}
+        <Docker />
+      {:else if page === "gitea"}
+        <Gitea />
+      {:else if page === "files"}
+        <Files />
+      {:else if page === "terminal"}
+        <Terminal />
+      {/if}
+    </div>
  </main>
 </div>