feat(titlebar): expose hide-title-bar toggle on macOS

src/lib/components/Sidebar.svelte

@@ -2430,6 +2430,12 @@
     height: calc(100vh - 104px); /* Only 104px NowPlayingBar, no title bar */
   }
 
+  /* macOS hidden mode: pad sidebar top so search clears the traffic lights
+     that the OS still draws via TitleBarStyle::Overlay. */
+  :global(html.macos) .sidebar.no-titlebar {
+    padding-top: 36px;
+  }
+
   .content {
     flex: 1;
     overflow: hidden;

src/lib/components/views/SettingsView.svelte

@@ -4711,9 +4711,21 @@
         />
       </div>
     {/if}
-    <!-- Title bar mode: Linux-only. macOS stays pinned at 'qbz' since the
-         other modes ('system', 'plasma', 'hidden') describe Linux WM
-         behaviors that don't apply on Darwin. -->
+    <!-- macOS: only the 'qbz' ↔ 'hidden' axis is meaningful. 'system' /
+         'plasma' describe Linux WM behaviors that don't apply on Darwin,
+         so we expose a single Toggle instead of the full mode dropdown. -->
+    {#if platform === 'macos'}
+    <div class="setting-row">
+      <div class="setting-info">
+        <span class="setting-label">{$t('settings.appearance.hideTitleBar')}</span>
+        <span class="setting-desc">{$t('settings.appearance.hideTitleBarDesc')}</span>
+      </div>
+      <Toggle
+        enabled={titlebarMode === 'hidden'}
+        onchange={(v) => setMode(v ? 'hidden' : 'qbz')}
+      />
+    </div>
+    {/if}
     {#if platform !== 'macos'}
     <div class="setting-row">
       <div class="setting-info">

src/routes/+page.svelte

@@ -184,6 +184,7 @@
   import { loadAwardFavorites } from '$lib/stores/awardFavoritesStore';
   import { resolveAwardIdByName } from '$lib/stores/awardCatalogStore';
   import { getDefaultFavoritesTab } from '$lib/utils/favorites';
+  import { platform } from '$lib/utils/platform';
   import { formatTrackTitle } from '$lib/utils/trackTitle';
   import type { FavoritesPreferences, ResolvedMusician } from '$lib/types';
 
@@ -5724,6 +5725,14 @@
     class:match-chrome={matchSystemChrome && showTitleBar && windowTransparent}
     style="--chrome-radius: {chromeRadiusPx}px;"
   >
+    <!-- macOS: when the user hides the qbz strip (mode='hidden'), the OS
+         still draws traffic lights via TitleBarStyle::Overlay on top of
+         the sidebar. This invisible band gives the window something to
+         drag and reserves the same vertical real estate the strip would
+         have. -->
+    {#if !showTitleBar && platform === 'macos'}
+      <div class="macos-drag-region" data-tauri-drag-region></div>
+    {/if}
     <!-- Custom Title Bar (CSD) -->
     {#if showTitleBar}
       <TitleBar
@@ -7163,6 +7172,29 @@
     height: calc(100vh - var(--player-bar-height, 104px));
   }
 
+  /* macOS hidden mode: pad main content to clear native overlay traffic
+     lights. Only fires when the qbz strip isn't mounted. */
+  :global(html.macos) .app.no-titlebar .main-content {
+    padding-top: 16px;
+    height: calc(100vh - 104px - 16px);
+  }
+
+  :global(html.macos) .app.no-titlebar .main-content :global(.home-view) {
+    margin-top: -16px;
+  }
+
+  /* macOS hidden mode: invisible drag region for window movement, mirrors
+     the band the qbz strip would otherwise occupy. */
+  :global(html.macos) .macos-drag-region {
+    height: 28px;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    -webkit-app-region: drag;
+  }
+
   .view-error {
     display: flex;
     flex-direction: column;