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.
---
 packages/frontend/package.json                     |  1 +
 packages/frontend/src/lib/components/Header.svelte |  5 +++--
 packages/frontend/vite.config.ts                   | 10 +++++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

(limited to 'packages')

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