web: move the section jumps to their own strip and grow the Theme menu

The six section links leave the top bar for a thin shelf under it, each a
bordered pill at the page's normal text size, so the bar itself stays a
row of actions and the jumps still read as buttons.

The Theme menu gains the workspace's colour groups — the landing palette
now takes its hue from the accent tokens — an Auto mode that follows the
OS scheme live, and a dropdown in place of the three font chips.

docker/frontend/src/ui/TopBar.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useI18n, LANGS } from '../i18n/I18nProvider';
-import { ACCENTS, FONT_SETS, useTheme } from '../theme/ThemeProvider';
+import { ACCENTS, FONT_SETS, useTheme, type FontSetId } from '../theme/ThemeProvider';
 import { Avatar } from './Avatar';
 import type { User } from '../api';
 
@@ -88,6 +88,7 @@ export function TopBar({
             <div className="chip-row">
               <button type="button" className={`chip${mode === 'light' ? ' on' : ''}`} onClick={() => setMode('light')}>Light</button>
               <button type="button" className={`chip${mode === 'dark' ? ' on' : ''}`} onClick={() => setMode('dark')}>Dark</button>
+              <button type="button" className={`chip${mode === 'auto' ? ' on' : ''}`} data-key="theme-auto" onClick={() => setMode('auto')}>Auto</button>
             </div>
             <div className="chip-row" style={{ marginTop: 8 }}>
               {ACCENTS.map((entry) => (
@@ -101,20 +102,19 @@ export function TopBar({
                 </button>
               ))}
             </div>
-            <div className="chip-row" style={{ marginTop: 8 }}>
+            {/* A dropdown keeps the group compact — the labels are long and the
+                current choice is the only one that needs to be visible. */}
+            <select
+              className="chip font-select"
+              data-key="fonts"
+              title={FONT_SETS.find((f) => f.id === fonts)?.note}
+              value={fonts}
+              onChange={(e) => setFonts(e.target.value as FontSetId)}
+            >
               {FONT_SETS.map((entry) => (
-                <button
-                  key={entry.id}
-                  type="button"
-                  data-key={`fonts-${entry.id}`}
-                  title={entry.note}
-                  className={`chip${fonts === entry.id ? ' on' : ''}`}
-                  onClick={() => setFonts(entry.id)}
-                >
-                  {entry.label}
-                </button>
+                <option key={entry.id} value={entry.id} title={entry.note}>{entry.label}</option>
               ))}
-            </div>
+            </select>
           </div>
         ) : null}
       </div>