chore(desktop): release v0.18.7

The previous build used IntersectionObserver to highlight whichever
section was in view. With nine sections of unequal heights and smooth-
scroll firing observer callbacks mid-scroll, the active highlight
drifted (clicking 'Konto' showed 'Soundboard' as active because the
last section never crossed the observer's 20%-30% band).

Switched to a tab pattern (macOS System Settings / Discord / GitHub
style): the sidebar selects ONE section, only that section renders.
`useState<TabId>` is the single source of truth; no observer, no
scrolling between sections, no anchor links to clash with HashRouter.
Mobile fallback (<lg) gets a `<select>` dropdown above the panel.

Drops the now-unused `id` prop from Section and removes the
IntersectionObserver effect.

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chat-app/desktop",
-  "version": "0.18.5",
+  "version": "0.18.7",
   "private": true,
   "description": "Electron desktop client (Windows / macOS / Linux)",
   "type": "module",

apps/desktop/src/pages/SettingsPage.tsx

@@ -111,10 +111,15 @@ export function SettingsPage() {
     void patchProfile({ locale });
   }
 
-  // Single-page layout with a sticky sidebar of anchor links on wide screens.
+  // Tab pattern (macOS / Discord / GitHub style): the sidebar selects ONE
-  // Each Section gets a stable `id` so links scroll to it; an IntersectionObserver
+  // section and only that section renders. activeTab is the single source of
-  // highlights whichever section is currently in view (active link).
+  // truth — no IntersectionObserver to drift, no smooth-scroll, no anchor-link
-  const sections = [
+  // routing conflict with HashRouter.
+  type TabId =
+    | 'profile' | 'appearance' | 'privacy' | 'notifications'
+    | 'voice' | 'screen-share' | 'soundboard' | 'security' | 'account';
+
+  const tabs: Array<{ id: TabId; label: string; Icon: typeof UsersIcon }> = [
     { id: 'profile',       label: t('app:settings.nav_profile',       { defaultValue: 'Profil' }),               Icon: UsersIcon },
     { id: 'appearance',    label: t('app:settings.nav_appearance',    { defaultValue: 'Erscheinungsbild' }),    Icon: SunIcon },
     { id: 'privacy',       label: t('app:settings.nav_privacy',       { defaultValue: 'Privatsphäre' }),        Icon: ShieldIcon },
@@ -126,44 +131,30 @@ export function SettingsPage() {
     { id: 'account',       label: t('app:settings.nav_account',       { defaultValue: 'Konto' }),               Icon: SignOutIcon },
   ];
 
-  const [activeId, setActiveId] = useState<string>(sections[0]!.id);
+  const [activeTab, setActiveTab] = useState<TabId>('profile');
-  useEffect(() => {
-    if (typeof IntersectionObserver === 'undefined') return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const visible = entries
-          .filter((e) => e.isIntersecting)
-          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
-        if (visible?.target.id) setActiveId(visible.target.id);
-      },
-      { rootMargin: '-20% 0px -70% 0px', threshold: [0, 0.5, 1] },
-    );
-    sections.forEach((s) => {
-      const el = document.getElementById(s.id);
-      if (el) observer.observe(el);
-    });
-    return () => observer.disconnect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   return (
     <div className="min-h-full bg-surface-3 text-fg">
       <div className="mx-auto grid max-w-6xl gap-8 px-6 py-8 lg:grid-cols-[14rem_minmax(0,1fr)]">
-        {/* Sidebar — sticky anchor nav, hidden on narrow screens */}
+        {/* Sidebar */}
         <aside className="hidden lg:block">
           <div className="sticky top-8 space-y-1">
             <h1 className="mb-4 px-3 font-display text-2xl font-semibold tracking-tight text-fg">
               {t('app:settings.title')}
             </h1>
-            <nav aria-label={t('app:settings.title')}>
+            <nav aria-label={t('app:settings.title')} role="tablist" aria-orientation="vertical">
-              {sections.map(({ id, label, Icon }) => {
+              {tabs.map(({ id, label, Icon }) => {
-                const active = activeId === id;
+                const active = activeTab === id;
                 return (
-                  <a
+                  <button
                     key={id}
-                    href={'#' + id}
+                    type="button"
+                    role="tab"
+                    aria-selected={active}
+                    aria-controls={'settings-panel-' + id}
+                    onClick={() => setActiveTab(id)}
                     className={
-                      'flex cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
+                      'flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
                       (active
                         ? 'bg-accent/15 text-fg'
                         : 'text-fg-muted hover:bg-surface-2 hover:text-fg')
@@ -175,24 +166,39 @@ export function SettingsPage() {
                       }
                     />
                     <span className="truncate">{label}</span>
-                  </a>
+                  </button>
                 );
               })}
             </nav>
           </div>
         </aside>
 
-        {/* Content column */}
+        {/* Content panel — only the active tab renders */}
-        <main className="space-y-8">
+        <main className="min-w-0">
-          {/* Mobile-only header (sidebar replaces it on lg+) */}
+          {/* Mobile-only header + tab selector (sidebar is hidden below lg) */}
-          <header className="lg:hidden">
+          <div className="mb-6 space-y-3 lg:hidden">
             <h1 className="font-display text-2xl font-semibold tracking-tight text-fg">
               {t('app:settings.title')}
             </h1>
-          </header>
+            <select
+              value={activeTab}
+              onChange={(e) => setActiveTab(e.target.value as TabId)}
+              className="w-full cursor-pointer rounded-lg border border-line bg-surface-2 px-3 py-2 text-sm font-medium text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+              aria-label={t('app:settings.title')}
+            >
+              {tabs.map(({ id, label }) => (
+                <option key={id} value={id}>{label}</option>
+              ))}
+            </select>
+          </div>
 
+          <div
+            id={'settings-panel-' + activeTab}
+            role="tabpanel"
+            aria-labelledby={'settings-tab-' + activeTab}
+          >
+            {activeTab === 'profile' && (
               <Section
-            id="profile"
                 title={t('app:settings.section_account')}
                 description={t('app:settings.section_account_hint', {
                   defaultValue: 'Dein öffentliches Profil und wie andere dich sehen.',
@@ -203,9 +209,10 @@ export function SettingsPage() {
                 <DisplayNameControls patchProfile={patchProfile} busy={busy} />
                 <Row icon={<AtIcon className="h-3.5 w-3.5" />} label={t('auth:signed_in.email')} value={profile?.userId ?? '—'} mono />
               </Section>
+            )}
 
+            {activeTab === 'appearance' && (
               <Section
-            id="appearance"
                 title={t('app:settings.section_appearance')}
                 description={t('app:settings.section_appearance_hint', {
                   defaultValue: 'Theme, Sprache und Verhalten beim Systemstart.',
@@ -239,9 +246,10 @@ export function SettingsPage() {
                   <AutoStartControls />
                 </SubGroup>
               </Section>
+            )}
 
+            {activeTab === 'privacy' && (
               <Section
-            id="privacy"
                 title={t('app:settings.section_privacy')}
                 description={t('app:settings.section_privacy_hint', {
                   defaultValue: 'Wer dich kontaktieren darf und was Friends von dir sehen.',
@@ -262,9 +270,10 @@ export function SettingsPage() {
                   onChange={(v) => void patchProfile({ allowDmsFromStrangers: v })}
                 />
               </Section>
+            )}
 
+            {activeTab === 'notifications' && (
               <Section
-            id="notifications"
                 title={t('app:settings.section_notifications', { defaultValue: 'Benachrichtigungen' })}
                 description={t('app:settings.section_notifications_hint', {
                   defaultValue: 'Töne für eingehende Nachrichten und Anrufe.',
@@ -277,9 +286,10 @@ export function SettingsPage() {
                   <RingtoneSettings disabled={busy} />
                 </SubSection>
               </Section>
+            )}
 
+            {activeTab === 'voice' && (
               <Section
-            id="voice"
                 title={t('app:settings.section_voice', { defaultValue: 'Sprache & Anrufe' })}
                 description={t('app:settings.section_voice_hint', {
                   defaultValue: 'Mikrofon, Audio-Qualität und Hotkeys für Anrufe.',
@@ -307,9 +317,10 @@ export function SettingsPage() {
                   <CallE2EEControls />
                 </SubSection>
               </Section>
+            )}
 
+            {activeTab === 'screen-share' && (
               <Section
-            id="screen-share"
                 title={t('app:settings.section_screen_share', { defaultValue: 'Bildschirmfreigabe' })}
                 description={t('app:settings.section_screen_share_hint', {
                   defaultValue: 'Auflösung und Bitrate beim Teilen deines Bildschirms.',
@@ -317,9 +328,10 @@ export function SettingsPage() {
               >
                 <ScreenShareControls />
               </Section>
+            )}
 
+            {activeTab === 'soundboard' && (
               <Section
-            id="soundboard"
                 title={t('app:settings.section_soundboard', { defaultValue: 'Soundboard' })}
                 description={t('app:settings.section_soundboard_hint', {
                   defaultValue: 'Eigene Sounds für Anrufe — verwaltet & abspielbar mit Hotkey.',
@@ -327,9 +339,10 @@ export function SettingsPage() {
               >
                 <SoundboardSettings />
               </Section>
+            )}
 
+            {activeTab === 'security' && (
               <Section
-            id="security"
                 title={t('app:settings.section_security', { defaultValue: 'Sicherheit' })}
                 description={t('app:settings.section_security_hint', {
                   defaultValue: 'PIN, Recovery-Code und Schlüssel-Reparatur.',
@@ -337,9 +350,10 @@ export function SettingsPage() {
               >
                 {profile?.userId && <SecurityCenter userId={profile.userId} />}
               </Section>
+            )}
 
+            {activeTab === 'account' && (
               <Section
-            id="account"
                 title={t('app:settings.section_account_mgmt', { defaultValue: 'Konto verwalten' })}
                 description={t('app:settings.section_account_mgmt_hint', {
                   defaultValue: 'Abmelden oder Konto-Aktionen.',
@@ -355,6 +369,8 @@ export function SettingsPage() {
                   {t('app:settings.sign_out')}
                 </button>
               </Section>
+            )}
+          </div>
         </main>
       </div>
     </div>
@@ -1262,13 +1278,11 @@ function formatBitrate(kbps: number): string {
 }
 
 function Section({
-  id,
   title,
   description,
   children,
   tone,
 }: {
-  id: string;
   title: string;
   description?: string;
   children: React.ReactNode;
@@ -1276,11 +1290,8 @@ function Section({
 }) {
   return (
     <section
-      id={id}
-      // scroll-mt offsets the anchor target so the section heading isn't flush
-      // against the viewport top after a sidebar-link jump
       className={
-        'scroll-mt-8 rounded-2xl border bg-surface-2 p-6 ' +
+        'rounded-2xl border bg-surface-2 p-6 ' +
         (tone === 'danger' ? 'border-rose-500/30' : 'border-line')
       }
     >