From e49d98f692bb0c0bf6563c57ab3187e74635dbb5 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Thu, 15 Oct 2026 10:05:08 +0900
Subject: feat(home): navbar header actions — raised primary 'New workspace'
 button, secondary actions as text links, Phosphor icons when compact
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.css                                   | 113 ++++++++++++++++++++++++++
 src/features/workspaces/ui/HomeHeader.svelte  |  69 ++++++++--------
 src/features/workspaces/ui/HomeHeader.test.ts |   5 +-
 3 files changed, 152 insertions(+), 35 deletions(-)

(limited to 'src')

diff --git a/src/app.css b/src/app.css
index 438dbb5..3f3f8ae 100644
--- a/src/app.css
+++ b/src/app.css
@@ -66,6 +66,119 @@
   }
 }
 
+/* Navbar buttons — the navbar's (`.app-navbar`) raised button, in the
+   same depth language as the rest of the UI: at rest they're RAISED (a
+   gradient a step lighter than the bar, a light highlight inside the top edge,
+   a thin dark edge + small drop below, light primary-blue text), and when
+   PRESSED they flip to the inset well (dark inner shadow) — pushed into the
+   bar. `.navbar-btn-primary` is the main action: the same button, tinted with
+   the theme's primary colour. `.navbar-btn-icon` is the square icon-only form.
+   Self-contained (not DaisyUI .btn) so nothing fights the gradients; colours
+   all come from the theme. */
+@layer components {
+  .navbar-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    height: 2rem;
+    padding-inline: 0.75rem;
+    border-radius: var(--radius-field);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    /* The theme's primary, lifted toward white: crisp on the grey gradient
+       (plain primary read dim, and an engraved text-shadow muddied it at this
+       size — the shadow stays on the big titles only). */
+    color: color-mix(in srgb, var(--color-primary) 75%, white);
+    border: 1px solid rgb(0 0 0 / 0.55);
+    background-image: linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--color-base-100) 72%, var(--color-base-content)),
+      color-mix(in srgb, var(--color-base-100) 90%, var(--color-base-content))
+    );
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.12),
+      0 1px 2px rgb(0 0 0 / 0.45);
+    transition:
+      filter 120ms ease-out,
+      box-shadow 120ms ease-out;
+  }
+  .navbar-btn:hover {
+    filter: brightness(1.12);
+  }
+  .navbar-btn:active,
+  .navbar-btn[aria-expanded="true"] {
+    /* Pressed → the inset well: pushed into the bar. */
+    filter: none;
+    background-image: none;
+    background-color: color-mix(in srgb, var(--color-base-100) 82%, black);
+    box-shadow:
+      inset 0 1px 5px rgb(0 0 0 / 0.7),
+      0 1px 0 color-mix(in srgb, var(--color-base-content) 10%, transparent);
+  }
+  .navbar-btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+  .navbar-btn-icon {
+    width: 2rem;
+    padding-inline: 0;
+  }
+  /* Secondary navbar actions: visually just text — no background, border or
+     shadow. The light primary-blue colour (same as the buttons' text) and the
+     spacing mark them as clickable; hover brightens + underlines, press dims. */
+  .navbar-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    height: 2rem;
+    min-width: 2rem; /* icon-only (compact) links keep a comfortable tap target */
+    padding-inline: 0.375rem;
+    border-radius: var(--radius-field);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background: none;
+    border: 0;
+    color: color-mix(in srgb, var(--color-primary) 75%, white);
+    text-underline-offset: 4px;
+    transition: color 120ms ease-out;
+  }
+  .navbar-link:hover {
+    color: color-mix(in srgb, var(--color-primary) 45%, white);
+    text-decoration: underline;
+  }
+  .navbar-link:active {
+    color: var(--color-primary);
+  }
+  .navbar-link:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+  .navbar-btn-primary {
+    color: var(--color-primary-content);
+    background-image: linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--color-primary) 82%, white),
+      color-mix(in srgb, var(--color-primary) 88%, black)
+    );
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.35),
+      0 1px 2px rgb(0 0 0 / 0.45);
+  }
+  .navbar-btn-primary:active {
+    background-color: color-mix(in srgb, var(--color-primary) 80%, black);
+  }
+}
+
 /* Raised — the INVERSE of `.inset-well`, for things that pop OUT of the page
    (the home page's workspace tiles). Where the well has a dark shadow INSIDE
    under its top edge and a light catch-line OUTSIDE below it, a raised surface
diff --git a/src/features/workspaces/ui/HomeHeader.svelte b/src/features/workspaces/ui/HomeHeader.svelte
index 8090489..5329b2d 100644
--- a/src/features/workspaces/ui/HomeHeader.svelte
+++ b/src/features/workspaces/ui/HomeHeader.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+  import ArchiveIcon from "phosphor-svelte/lib/ArchiveIcon";
+  import DotsThreeIcon from "phosphor-svelte/lib/DotsThreeIcon";
+  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
+  import PuzzlePieceIcon from "phosphor-svelte/lib/PuzzlePieceIcon";
   import { isValidSlug } from "../logic/route";
 
   /** The create outcome the page reports back to the popover. */
@@ -78,68 +82,65 @@
     </span>
   </div>
 
-  <div class="flex items-center gap-2" class:gap-1={compact}>
+  <!-- Navbar actions (app.css): "New workspace" is the one raised button
+       (`.navbar-btn`, primary-tinted); the secondary actions are plain text
+       links (`.navbar-link`) — the light-blue colour + spacing say clickable
+       without button chrome. Compact: labels collapse to Phosphor icons. -->
+  <div class="flex items-center gap-1" class:gap-3={!compact}>
     <!-- New workspace -->
     <button
       type="button"
-      class="btn btn-primary btn-sm"
-      class:btn-circle={compact}
+      class="navbar-btn navbar-btn-primary"
+      class:navbar-btn-icon={compact}
       aria-label="New workspace"
       title="New workspace"
       onclick={() => (popoverOpen ? closePopover() : openPopover())}
     >
-      {#if compact}
-        <span aria-hidden="true" class="text-lg leading-none">+</span>
-      {:else}
-        New workspace
-      {/if}
+      <PlusIcon size={16} weight="bold" aria-hidden="true" />
+      {#if !compact}<span>New workspace</span>{/if}
     </button>
 
     {#if withPlugins}
       <button
         type="button"
-        class="btn btn-outline btn-sm"
-        class:btn-circle={compact}
+        class="navbar-link"
         aria-label="Plugins"
         title="Open the plugin manager (load/unload plugins globally)"
         onclick={onOpenPlugins}
       >
-        {#if compact}
-          <span aria-hidden="true">⚡</span>
-        {:else}
-          Plugins
-        {/if}
+        {#if compact}<PuzzlePieceIcon size={18} aria-hidden="true" />{:else}<span>Plugins</span>{/if}
       </button>
     {/if}
 
+    <!-- Archived workspaces -->
+    <button
+      type="button"
+      class="navbar-link"
+      aria-label="Archived workspaces"
+      title="View archived workspaces"
+      onclick={onOpenArchived}
+    >
+      {#if compact}<ArchiveIcon size={18} aria-hidden="true" />{:else}<span>Archived</span>{/if}
+    </button>
+
     {#if withSort}
+      <!-- Overflow last, like a navbar's trailing menu. -->
       <div class="dropdown dropdown-end">
-        <button type="button" class="btn btn-ghost btn-sm" aria-label="More actions" title="More">
-          ⋯
+        <button
+          type="button"
+          class="navbar-link"
+          aria-label="More actions"
+          title="More"
+        >
+          <DotsThreeIcon size={20} weight="bold" aria-hidden="true" />
         </button>
-        <ul class="dropdown-content menu z-50 w-52 rounded-box border border-base-content/15 bg-base-100 p-2 shadow-xl">
+        <ul class="dropdown-content menu z-50 mt-1 w-52 rounded-box border border-base-content/15 bg-base-100 p-2 shadow-xl">
           <li>
             <button type="button" onclick={onSort}>Reset arrangement by recent activity</button>
           </li>
         </ul>
       </div>
     {/if}
-
-    <!-- Archived workspaces -->
-    <button
-      type="button"
-      class="btn btn-ghost btn-sm"
-      class:btn-circle={compact}
-      aria-label="Archived workspaces"
-      title="View archived workspaces"
-      onclick={onOpenArchived}
-    >
-      {#if compact}
-        <span aria-hidden="true">🗄</span>
-      {:else}
-        Archived
-      {/if}
-    </button>
   </div>
 </header>
 
diff --git a/src/features/workspaces/ui/HomeHeader.test.ts b/src/features/workspaces/ui/HomeHeader.test.ts
index 40b060f..4db8b04 100644
--- a/src/features/workspaces/ui/HomeHeader.test.ts
+++ b/src/features/workspaces/ui/HomeHeader.test.ts
@@ -86,6 +86,9 @@ describe("HomeHeader", () => {
   it("compact mode collapses the primary button to an icon", () => {
     const p = props();
     render(HomeHeader, { props: { ...p, compact: true } });
-    expect(screen.getByRole("button", { name: "New workspace" })).toHaveTextContent("+");
+    const button = screen.getByRole("button", { name: "New workspace" });
+    expect(button).toHaveClass("navbar-btn-icon");
+    expect(button).toHaveTextContent(""); // icon only — the label collapses
+    expect(button.querySelector("svg")).not.toBeNull();
   });
 });
-- 
cgit v1.2.3