Function TopBar

apps/desktop/src/renderer/src/components/TopBar.tsx:20–166

()

  'inline-flex h-9 items-center rounded-[var(--radius-sm)] px-[var(--space-2_5)] text-[var(--text-sm)] leading-none whitespace-nowrap transition-colors duration-[var(--duration-faster)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]';

export function TopBar() {
  const t = useT();
  const setView = useCodesignStore((s) => s.setView);
  const view = useCodesignStore((s) => s.view);
  const previousView = useCodesignStore((s) => s.previousView);
  const currentDesignId = useCodesignStore((s) => s.currentDesignId);
  const designs = useCodesignStore((s) => s.designs);
  const currentDesign = designs.find((d) => d.id === currentDesignId);
  const hubTab = useCodesignStore((s) => s.hubTab);
  const setHubTab = useCodesignStore((s) => s.setHubTab);
  const unreadErrorCount = useCodesignStore((s) => s.unreadErrorCount);
  const refreshDiagnosticEvents = useCodesignStore((s) => s.refreshDiagnosticEvents);
  const openSettingsTab = useCodesignStore((s) => s.openSettingsTab);

  // Pull-based: refresh the diagnostic counter on mount so a page reload
  // surfaces errors recorded while the window was closed. No polling.
  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect
  useEffect(() => {
    void refreshDiagnosticEvents();
  }, []);

  return (
    <header
      className="h-[var(--size-titlebar-height)] shrink-0 flex items-center gap-[var(--space-3)] pr-[var(--space-5)] select-none"
      style={{
        ...dragStyle,
        paddingLeft: 'var(--size-titlebar-pad-left)',
        borderBottom: '1px solid oklch(0.22 0.025 50 / 0.08)',
        background: 'var(--color-background)',
      }}
    >
      <div className="flex items-center gap-[var(--space-6)] min-w-0 h-full">
        <div className="shrink-0">
          <Wordmark badge={`v${__APP_VERSION__}`} size="titlebar" />
        </div>

        {view === 'settings' ? (
          <div className="flex items-center gap-[var(--space-2)] min-w-0">
            <span style={{ color: 'oklch(0.22 0.025 50 / 0.2)' }}>/</span>
            <button
              type="button"
              onClick={() => setView(previousView === 'settings' ? 'hub' : previousView)}
              aria-label={t('topbar.closeSettings')}
              className={`${topbarButtonClass} gap-[6px] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]`}
              style={{
                ...noDragStyle,
              }}
            >
              <ArrowLeft className="w-4 h-4 shrink-0" aria-hidden />
              <span className="truncate">{t('topbar.settingsLabel')}</span>
            </button>
          </div>
        ) : view === 'hub' ? (
          <nav
            className="flex h-full min-w-max items-center gap-[var(--space-1)]"
            aria-label={t('hub.tabs.all')}
          >
            {HUB_TABS.map((tab) => {