refactor: migrate platform detection to Tauri OS plugin utility

src/lib/components/AboutModal.svelte

@@ -6,6 +6,7 @@
   import { getName, getVersion } from '@tauri-apps/api/app';
   import { onMount } from 'svelte';
   import QobuzLegalNotice from '$lib/components/QobuzLegalNotice.svelte';
+  import { platform } from '$lib/utils/platform';
 
   interface Props {
     isOpen: boolean;
@@ -37,9 +38,7 @@
     }
   });
 
-  // Detect platform for Easter eggs
-  const isMac = typeof navigator !== 'undefined' && /Mac/.test(navigator.platform);
-  const platformLabel = isMac ? 'macOS (Tauri 2.0)' : 'Linux (Tauri 2.0)';
+  const platformLabel = platform === 'macos' ? 'macOS (Tauri 2.0)' : 'Linux (Tauri 2.0)';
 
   function handleOpenUrl(url: string) {
     openUrl(url).catch(err => console.error('Failed to open URL:', err));
@@ -193,7 +192,7 @@
             <img src="/mexico-flag.svg" alt="México" class="inline-icon flag" />
           </p>
           <p class="signature-detail">
-            {$t('about.signatureDetail')} <img src="/Tux.svg" alt="Tux" class="inline-icon tux" class:mac-tux={isMac} />
+            {$t('about.signatureDetail')} <img src="/Tux.svg" alt="Tux" class="inline-icon tux" class:mac-tux={platform === 'macos'} />
           </p>
         </div>
       </div>

src/lib/stores/titleBarStore.ts

@@ -9,14 +9,12 @@
  */
 
 import { invoke } from '@tauri-apps/api/core';
+import { platform } from '$lib/utils/platform';
 
 const STORAGE_KEY_HIDE = 'qbz-hide-titlebar';
 const STORAGE_KEY_SYSTEM = 'qbz-use-system-titlebar';
 const STORAGE_KEY_WINDOW_CONTROLS = 'qbz-show-window-controls';
 
-// Platform detection (cached once — never changes at runtime)
-const isMacOS = typeof document !== 'undefined' && document.documentElement.classList.contains('macos');
-
 // State
 let hideTitleBar = false;
 let useSystemTitleBar = false;
@@ -91,7 +89,7 @@ export function getUseSystemTitleBar(): boolean {
  */
 export function shouldShowTitleBar(): boolean {
   // macOS always uses native decorations — no custom title bar
-  if (isMacOS) return false;
+  if (platform === 'macos') return false;
   return !hideTitleBar && !useSystemTitleBar;
 }
 
@@ -100,7 +98,7 @@ export function shouldShowTitleBar(): boolean {
  * Returns 0 if title bar is hidden or system title bar is active, 40 otherwise
  */
 export function getTitleBarHeight(): number {
-  if (isMacOS) return 0;
+  if (platform === 'macos') return 0;
   return (hideTitleBar || useSystemTitleBar) ? 0 : 40;
 }
 

src/lib/utils/keyboard.ts

@@ -2,6 +2,8 @@
  * Keyboard utilities for keybindings system
  */
 
+import { platform } from '$lib/utils/platform';
+
 /** Display mappings for special keys */
 const KEY_DISPLAY_MAP: Record<string, string> = {
   ArrowLeft: '←',
@@ -78,21 +80,17 @@ export function parseShortcut(shortcut: string): {
  * @example formatShortcutDisplay('Ctrl+ArrowRight') // '⌘ →' on macOS, 'Ctrl + →' on others
  */
 export function formatShortcutDisplay(shortcut: string): string {
-  const isMac =
-    typeof navigator !== 'undefined' &&
-    navigator.platform.toLowerCase().includes('mac');
-
   const { ctrl, alt, shift, key } = parseShortcut(shortcut);
   const parts: string[] = [];
 
-  if (ctrl) parts.push(isMac ? '⌘' : 'Ctrl');
-  if (alt) parts.push(isMac ? '⌥' : 'Alt');
-  if (shift) parts.push(isMac ? '⇧' : 'Shift');
+  if (ctrl) parts.push(platform === 'macos' ? '⌘' : 'Ctrl');
+  if (alt) parts.push(platform === 'macos' ? '⌥' : 'Alt');
+  if (shift) parts.push(platform === 'macos' ? '⇧' : 'Shift');
 
   const displayKey = KEY_DISPLAY_MAP[key] || key.toUpperCase();
   parts.push(displayKey);
 
-  return parts.join(isMac ? ' ' : ' + ');
+  return parts.join(platform === 'macos' ? ' ' : ' + ');
 }
 
 /**

src/routes/+page.svelte

@@ -154,6 +154,7 @@
   import { loadAlbumFavorites } from '$lib/stores/albumFavoritesStore';
   import { loadArtistFavorites } from '$lib/stores/artistFavoritesStore';
   import { getDefaultFavoritesTab } from '$lib/utils/favorites';
+  import { platform } from '$lib/utils/platform';
   import type { FavoritesPreferences, ResolvedMusician } from '$lib/types';
 
   // Navigation state management
@@ -479,7 +480,6 @@
   // Title Bar State (from titleBarStore subscription)
   let showTitleBar = $state(shouldShowTitleBar());
   let showWindowControls = $state(getShowWindowControls());
-  const isMacOS = typeof document !== 'undefined' && document.documentElement.classList.contains('macos');
 
   // Search Bar Location State
   let searchBarLocationPref = $state(getSearchBarLocation());
@@ -4883,7 +4883,7 @@
 {:else}
   <div class="app" class:no-titlebar={!showTitleBar} class:floating={isWindowFloating}>
     <!-- macOS: drag region for window movement (overlay title bar has no native drag area) -->
-    {#if !showTitleBar && isMacOS}
+    {#if !showTitleBar && platform === 'macos'}
       <div class="macos-drag-region" data-tauri-drag-region></div>
     {/if}
     <!-- Custom Title Bar (CSD) -->