Move typography into unified settings drawer and expose settings on desktop

src/components/TopBar.tsx

@@ -142,22 +142,6 @@ export const TopBar: React.FC<TopBarProps> = ({
 
         {/* 3. Desktop-Only Controls (Cleaned & streamlined) */}
         <div className="hidden xl:flex items-center gap-3">
-          {/* Typography Mode */}
-          <div className="flex items-center bg-neutral-800/90 rounded p-0.5 border border-neutral-700/80">
-            {(['mixed', 'handwritten', 'typed'] as FontMode[]).map((mode) => (
-              <button
-                key={mode}
-                onClick={() => onUpdateSettings({ fontMode: mode })}
-                className={`px-2 py-0.5 rounded capitalize transition ${
-                  settings.fontMode === mode
-                    ? 'bg-neutral-600 text-white font-medium shadow-xs'
-                    : 'text-neutral-400 hover:text-neutral-200'
-                }`}
-              >
-                {mode}
-              </button>
-            ))}
-          </div>
 
           {/* Board Selector */}
           <div className="flex items-center gap-1.5">
@@ -269,14 +253,14 @@ export const TopBar: React.FC<TopBarProps> = ({
           </button>
         </div>
 
-        {/* 4. Mobile Settings Trigger (always accessible on mobile & tablet) */}
+        {/* 4. Settings Trigger (Desktop & Mobile) */}
         <button
           onClick={() => setMobileMenuOpen(true)}
-          className="xl:hidden p-1.5 rounded bg-neutral-800 hover:bg-neutral-700 text-neutral-300 border border-neutral-700 transition flex items-center gap-1"
-          title="Open Desk Settings"
+          className="p-1 sm:px-2.5 sm:py-1 rounded bg-neutral-800 hover:bg-neutral-700 text-neutral-300 border border-neutral-700 transition flex items-center gap-1.5 shrink-0"
+          title="Open Desk Settings & Visual Controls"
         >
-          <SlidersHorizontal size={14} />
-          <span className="text-[11px] hidden sm:inline">Settings</span>
+          <SlidersHorizontal size={13} className="text-amber-400" />
+          <span className="text-xs hidden sm:inline">Settings</span>
         </button>
       </header>