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/src/lib/components/Header.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages/frontend/src/lib')

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>
-- 
cgit v1.2.3