v0.1.12

frontend/src/lib/components/navigation/ClientTopbar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Settings } from 'lucide-svelte';
 
+  import ThemeToggle from '$lib/components/ThemeToggle.svelte';
   import WorkspaceSearchTrigger from '$lib/components/navigation/WorkspaceSearchTrigger.svelte';
   import type { AppSession } from '$lib/session';
   import type { Crumb } from '$lib/navigation/client-navigation';
@@ -36,6 +37,9 @@
 
 <header class="topbar">
   <div class="topbar-start">
+    <a class="topbar-brand" href="/" aria-label="Hunter Premium Produce home">
+      <img src="/logo-hsf.png" alt="Hunter Premium Produce" />
+    </a>
     <div class="topbar-copy">
       <nav class="breadcrumbs" aria-label="Breadcrumb">
         {#each breadcrumbs as crumb, index}
@@ -60,6 +64,8 @@
   {/if}
 
   <div class="topbar-actions">
+    <ThemeToggle />
+
     <div class="menu-wrap user-menu-wrap">
       <button aria-expanded={userMenuOpen} class="user-trigger" type="button" onclick={onToggleUserMenu}>
         <span class="user-avatar-wrap">
@@ -127,8 +133,22 @@
   .topbar-start {
     min-width: 0;
     display: flex;
-    align-items: flex-start;
-    gap: 0.82rem;
+    align-items: center;
+    gap: 0.9rem;
+  }
+
+  .topbar-brand {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-right: 0.9rem;
+    border-right: 1px solid var(--color-border);
+  }
+
+  .topbar-brand img {
+    height: 2rem;
+    width: auto;
+    display: block;
   }
 
   .topbar-copy h1 {
@@ -163,7 +183,7 @@
   }
 
   .breadcrumb-sep {
-    color: #b9c5be;
+    color: var(--color-text-muted);
     font-size: 0.78rem;
   }
 
@@ -176,7 +196,7 @@
   :global(.topbar-search) {
     width: 100%;
     min-height: 2.75rem;
-    background: color-mix(in srgb, var(--panel-soft) 68%, white);
+    background: color-mix(in srgb, var(--panel-soft) 60%, var(--color-bg-surface));
   }
 
   .topbar-actions {
@@ -205,10 +225,10 @@
     align-items: center;
     gap: 0.72rem;
     padding: 0.56rem 0.76rem;
-    border: 1px solid var(--line);
+    border: 1px solid var(--color-border);
     border-radius: 0.96rem;
     background: var(--panel-soft);
-    color: #304038;
+    color: var(--color-text-primary);
     text-align: left;
     cursor: pointer;
   }
@@ -225,8 +245,8 @@
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
-    background: var(--green-deep);
-    color: #fff;
+    background: var(--color-brand);
+    color: var(--color-on-brand);
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 0.02em;
@@ -240,16 +260,16 @@
     width: 0.55rem;
     height: 0.55rem;
     border-radius: 999px;
-    border: 1.5px solid var(--panel-soft);
-    background: #b4c0ba;
+    border: 1.5px solid var(--color-bg-surface);
+    background: var(--color-text-muted);
   }
 
   .user-status-dot.live {
-    background: #4ade80;
+    background: var(--color-success);
   }
 
   .user-status-dot.idle {
-    background: #c08b3d;
+    background: var(--color-warning);
   }
 
   .user-menu-avatar {
@@ -260,8 +280,8 @@
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
-    background: var(--green-deep);
-    color: #fff;
+    background: var(--color-brand);
+    color: var(--color-on-brand);
     font-size: 0.9rem;
     font-weight: 700;
     letter-spacing: 0.02em;
@@ -329,8 +349,8 @@
   .chevron {
     width: 0.54rem;
     height: 0.54rem;
-    border-right: 2px solid #7a8c82;
-    border-bottom: 2px solid #7a8c82;
+    border-right: 2px solid var(--color-text-muted);
+    border-bottom: 2px solid var(--color-text-muted);
     transform: rotate(45deg);
     transition: transform 140ms ease;
   }
@@ -350,16 +370,15 @@
     padding: 0.4rem;
     border: 1px solid var(--color-border);
     border-radius: 0.96rem;
-    background: rgba(255, 255, 255, 0.98);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-    backdrop-filter: blur(10px);
+    background: var(--color-bg-elevated);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }
 
   .menu-panel a,
   .menu-panel button {
     padding: 0.72rem 0.78rem;
     border-radius: 0.78rem;
-    color: #304038;
+    color: var(--color-text-primary);
     text-align: left;
     background: transparent;
     border: none;
@@ -397,6 +416,14 @@
       padding: 0.72rem 1rem;
     }
 
+    .topbar-brand {
+      padding-right: 0.6rem;
+    }
+
+    .topbar-brand img {
+      height: 1.6rem;
+    }
+
     .user-trigger {
       min-width: auto;
       width: 100%;