data-entry-app/frontend/src/lib/components/navigation/ClientTopbar.svelte

<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';

  let {
    breadcrumbs,
    title,
    sessionHydrated,
    session,
    userInitials,
    userMenuOpen,
    canUseWorkspaceSearch,
    canOpenSettings,
    onOpenPalette,
    onToggleUserMenu,
    onOpenSettings,
    onSignOut
  }: {
    breadcrumbs: Crumb[];
    title: string;
    sessionHydrated: boolean;
    session: AppSession | null;
    userInitials: string;
    userMenuOpen: boolean;
    canUseWorkspaceSearch: boolean;
    canOpenSettings: boolean;
    onOpenPalette: () => void;
    onToggleUserMenu: () => void;
    onOpenSettings: () => void;
    onSignOut: () => void;
  } = $props();
</script>

<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}
          {#if index > 0}<span class="breadcrumb-sep" aria-hidden="true">/</span>{/if}
          {#if crumb.href && index < breadcrumbs.length - 1}
            <a href={crumb.href}>{crumb.label}</a>
          {:else}
            <span aria-current={index === breadcrumbs.length - 1 ? 'page' : undefined}>{crumb.label}</span>
          {/if}
        {/each}
      </nav>
      <h1>{title}</h1>
    </div>
  </div>

  {#if canUseWorkspaceSearch}
    <div class="topbar-middle">
      <WorkspaceSearchTrigger className="topbar-search" onClick={onOpenPalette} />
    </div>
  {:else}
    <div class="topbar-middle"></div>
  {/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">
          <span class="user-avatar">{session ? userInitials : '?'}</span>
          <span class={`user-status-dot ${session ? 'live' : 'idle'}`}></span>
        </span>
        <span class="user-trigger-copy">
          <span class="workspace-label">{sessionHydrated ? (session ? 'Signed in' : 'Signed out') : 'Checking session'}</span>
          <strong>{sessionHydrated ? (session ? session.name || 'Client account' : 'Sign in required') : 'Restoring workspace access'}</strong>
        </span>
        <span class:open={userMenuOpen} class="chevron"></span>
      </button>

      {#if userMenuOpen}
        <div class="menu-panel user-menu-panel">
          <div class="user-menu-summary">
            <span class="user-menu-avatar">{session ? userInitials : '?'}</span>
            <div class="user-menu-summary-text">
              <strong>
                {sessionHydrated
                  ? session
                    ? session.name || 'Client account'
                    : 'Client session inactive'
                  : 'Checking saved client session'}
              </strong>
              <span>
                {sessionHydrated
                  ? session
                    ? session.email
                    : 'Return to the dashboard page to sign in.'
                  : 'Waiting for the browser session check to complete.'}
              </span>
            </div>
          </div>
          {#if canOpenSettings}
            <button type="button" class="menu-settings-btn" onclick={onOpenSettings}>
              <Settings size={15} strokeWidth={1.75} />
              Settings
            </button>
          {/if}
          {#if session}
            <button type="button" onclick={onSignOut}>Log out</button>
          {:else if !sessionHydrated}
            <button type="button" disabled>Checking session...</button>
          {:else}
            <a href="/">Go to sign-in</a>
          {/if}
        </div>
      {/if}
    </div>
  </div>
</header>

<style>
  .topbar {
    display: grid;
    grid-template-columns: 1fr minmax(20rem, 36rem) 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 1.2rem;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
  }

  .topbar-start {
    min-width: 0;
    display: flex;
    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 {
    margin: 0.12rem 0 0;
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.32rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 500;
  }

  .breadcrumbs a {
    color: var(--muted);
    transition: color 140ms ease;
  }

  .breadcrumbs a:hover {
    color: var(--green-deep);
  }

  .breadcrumbs span[aria-current='page'] {
    color: var(--text);
    font-weight: 600;
  }

  .breadcrumb-sep {
    color: var(--color-text-muted);
    font-size: 0.78rem;
  }

  .topbar-middle {
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  :global(.topbar-search) {
    width: 100%;
    min-height: 2.75rem;
    background: color-mix(in srgb, var(--panel-soft) 60%, var(--color-bg-surface));
  }

  .topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.68rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .workspace-label {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .menu-wrap {
    position: relative;
  }

  .user-trigger {
    min-width: 14rem;
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    padding: 0.56rem 0.76rem;
    border: 1px solid var(--color-border);
    border-radius: 0.96rem;
    background: var(--panel-soft);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
  }

  .user-avatar-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    user-select: none;
  }

  .user-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-bg-surface);
    background: var(--color-text-muted);
  }

  .user-status-dot.live {
    background: var(--color-success);
  }

  .user-status-dot.idle {
    background: var(--color-warning);
  }

  .user-menu-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    user-select: none;
  }

  .user-menu-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.78rem;
    border-radius: 0.82rem;
    background: var(--panel-soft);
  }

  .user-menu-summary-text {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
  }

  .user-menu-summary-text strong {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-menu-summary-text span {
    color: var(--muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-trigger-copy {
    min-width: 0;
    display: grid;
    flex: 1;
  }

  .user-trigger-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
  }

  .user-menu-wrap {
    min-width: 0;
  }

  .user-menu-panel {
    min-width: 16rem;
  }

  .menu-settings-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .chevron {
    width: 0.54rem;
    height: 0.54rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    transition: transform 140ms ease;
  }

  .chevron.open {
    transform: rotate(-135deg);
  }

  .menu-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 20;
    min-width: 13rem;
    display: grid;
    gap: 0.18rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 0.96rem;
    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: var(--color-text-primary);
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .menu-panel a:hover,
  .menu-panel button:hover {
    background: var(--panel-soft);
  }

  @media (max-width: 1180px) {
    .topbar {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        'start actions'
        'middle middle';
    }

    .topbar-start {
      grid-area: start;
    }

    .topbar-middle {
      grid-area: middle;
    }

    .topbar-actions {
      grid-area: actions;
    }
  }

  @media (max-width: 700px) {
    .topbar {
      padding: 0.72rem 1rem;
    }

    .topbar-brand {
      padding-right: 0.6rem;
    }

    .topbar-brand img {
      height: 1.6rem;
    }

    .user-trigger {
      min-width: auto;
      width: 100%;
    }
  }
</style>