From 3f629a8469fe483243671e1ca15582a111e96541 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Mon, 1 Jun 2026 15:08:35 +0900
Subject: Add Phosphor icons; replace sidebar text with hamburger button

- Add phosphor-svelte ^3.1.0 to frontend deps.
- Wire phosphor-svelte/vite (sveltePhosphorOptimize) as a fallback so
  stray named imports still tree-shake correctly. Per-icon imports like
  'phosphor-svelte/lib/ListIcon' remain the preferred pattern; see the
  comment in vite.config.ts.
- Replace the 'Sidebar' text in Header.svelte with a Phosphor List icon
  styled as a square daisyUI button (btn btn-square btn-sm btn-neutral)
  with aria-label preserved for screen readers.
---
 bun.lock                                           |  3 +++
 packages/frontend/package.json                     |  1 +
 packages/frontend/src/lib/components/Header.svelte |  5 +++--
 packages/frontend/vite.config.ts                   | 10 +++++++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/bun.lock b/bun.lock
index 2573c18..b6c5e6a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -48,6 +48,7 @@
         "highlight.js": "^11.11.1",
         "marked": "^18.0.4",
         "marked-highlight": "^2.2.4",
+        "phosphor-svelte": "^3.1.0",
         "svelte": "^5.0.0",
       },
       "devDependencies": {
@@ -746,6 +747,8 @@
 
     "pend": ["pend@1.2.0", "", {}, "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg=="],
 
+    "phosphor-svelte": ["phosphor-svelte@3.1.0", "", { "dependencies": { "estree-walker": "^3.0.3", "magic-string": "^0.30.13" }, "peerDependencies": { "svelte": "^5.0.0 || ^5.0.0-next.96", "vite": ">=5" }, "optionalPeers": ["vite"] }, "sha512-nldtxx+XCgNREvrb7O5xgDsefytXpSkPTx8Rnu3f2qQCUZLDV1rLxYSd2Jcwckuo9lZB1qKMqGR17P4UDC0PrA=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 1d11524..c4966e5 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -37,6 +37,7 @@
 		"highlight.js": "^11.11.1",
 		"marked": "^18.0.4",
 		"marked-highlight": "^2.2.4",
+		"phosphor-svelte": "^3.1.0",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
diff --git a/packages/frontend/src/lib/components/Header.svelte b/packages/frontend/src/lib/components/Header.svelte
index 3066e81..72a6ebf 100644
--- a/packages/frontend/src/lib/components/Header.svelte
+++ b/packages/frontend/src/lib/components/Header.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import ListIcon from "phosphor-svelte/lib/ListIcon";
 import { router } from "../router.svelte.js";
 import { wsClient } from "../ws.svelte.js";
 
@@ -16,11 +17,11 @@ const { onToggleSidebar }: { onToggleSidebar: () => void } = $props();
 		</span>
 		<button
 			type="button"
-			class="btn btn-ghost btn-sm"
+			class="btn btn-square btn-sm btn-neutral"
 			onclick={onToggleSidebar}
 			aria-label="Toggle sidebar"
 		>
-			Sidebar
+			<ListIcon size={20} weight="bold" aria-hidden="true" />
 		</button>
 	</div>
 </header>
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
index ee55efa..84d1b0c 100644
--- a/packages/frontend/vite.config.ts
+++ b/packages/frontend/vite.config.ts
@@ -1,10 +1,18 @@
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import tailwindcss from "@tailwindcss/vite";
+// Fallback only. ALWAYS prefer per-icon imports like:
+//   import ListIcon from "phosphor-svelte/lib/ListIcon";
+// Named imports from "phosphor-svelte" pull in the full barrel and slow Vite
+// compilation. This plugin rewrites any stray named imports into per-icon
+// default imports at build/dev time, so we don't get crippled if an agent
+// forgets the correct pattern. Treat it as a safety net, not a license to
+// use named imports.
+import { sveltePhosphorOptimize } from "phosphor-svelte/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
 	base: "./",
-	plugins: [tailwindcss(), svelte()],
+	plugins: [tailwindcss(), sveltePhosphorOptimize(), svelte()],
 	server: {
 		port: 5173,
 		allowedHosts: true,
-- 
cgit v1.2.3