chore(desktop): release v0.18.8

The inner cards (Nachrichten-Ton / Klingelton / Audio-Gerät / Hotkeys /
…) looked like they had a stark white outline. The cause: --color-line
is a semi-transparent white token, and applying the `/60` alpha modifier
in `border-line/60` overrides the original alpha — so the inner border
ended up brighter than the outer Section's normal `border-line`.

Drop the border entirely. Background tint + caps heading is enough
grouping signal in a tab-pattern panel.

apps/desktop/package.json

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

apps/desktop/src/components/MessageBubble.tsx

@@ -416,7 +416,14 @@ export function MessageBubble({
               </button>
             )}
             {message.plaintext === null ? (
-              <span className="italic text-fg-muted opacity-60">
+              <span
+                className={
+                  'italic ' +
+                  // Mine = blue/accent bubble → use accent-fg with reduced opacity
+                  // (still meets 4.5:1). Peer = surface-2 grey → muted-fg works.
+                  (mine ? 'text-accent-fg/80' : 'text-fg-muted')
+                }
+              >
                 {t('app:chats.unreadable', {
                   defaultValue: 'Nachricht nicht lesbar',
                 })}

apps/desktop/src/pages/SettingsPage.tsx

@@ -8,6 +8,18 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Avatar } from '../components/Avatar';
+import {
+  AtIcon,
+  BellIcon,
+  LockIcon,
+  MicIcon,
+  MonitorShareIcon,
+  MusicIcon,
+  ShieldIcon,
+  SignOutIcon,
+  SunIcon,
+  UsersIcon,
+} from '../components/icons';
 import { MicTestSection } from '../components/MicTestSection';
 import { NotificationSoundSettings } from '../components/NotificationSoundSettings';
 import { RingtoneSettings } from '../components/RingtoneSettings';
@@ -99,30 +111,113 @@ export function SettingsPage() {
     void patchProfile({ locale });
   }
 
+  // Tab pattern (macOS / Discord / GitHub style): the sidebar selects ONE
+  // section and only that section renders. activeTab is the single source of
+  // truth — no IntersectionObserver to drift, no smooth-scroll, no anchor-link
+  // 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 },
+    { id: 'notifications', label: t('app:settings.nav_notifications', { defaultValue: 'Benachrichtigungen' }), Icon: BellIcon },
+    { id: 'voice',         label: t('app:settings.nav_voice',         { defaultValue: 'Sprache & Anrufe' }),    Icon: MicIcon },
+    { id: 'screen-share',  label: t('app:settings.nav_screen_share',  { defaultValue: 'Bildschirmfreigabe' }), Icon: MonitorShareIcon },
+    { id: 'soundboard',    label: t('app:settings.nav_soundboard',    { defaultValue: 'Soundboard' }),          Icon: MusicIcon },
+    { id: 'security',      label: t('app:settings.nav_security',      { defaultValue: 'Sicherheit' }),          Icon: LockIcon },
+    { id: 'account',       label: t('app:settings.nav_account',       { defaultValue: 'Konto' }),               Icon: SignOutIcon },
+  ];
+
+  const [activeTab, setActiveTab] = useState<TabId>('profile');
+
   return (
     <div className="min-h-full bg-surface-3 text-fg">
-      <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-8">
-      <header className="mb-2">
+      <div className="mx-auto grid max-w-6xl gap-8 px-6 py-8 lg:grid-cols-[14rem_minmax(0,1fr)]">
+        {/* 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')} role="tablist" aria-orientation="vertical">
+              {tabs.map(({ id, label, Icon }) => {
+                const active = activeTab === id;
+                return (
+                  <button
+                    key={id}
+                    type="button"
+                    role="tab"
+                    aria-selected={active}
+                    aria-controls={'settings-panel-' + id}
+                    onClick={() => setActiveTab(id)}
+                    className={
+                      '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')
+                    }
+                  >
+                    <Icon
+                      className={
+                        'h-4 w-4 shrink-0 ' + (active ? 'text-accent' : 'text-fg-muted')
+                      }
+                    />
+                    <span className="truncate">{label}</span>
+                  </button>
+                );
+              })}
+            </nav>
+          </div>
+        </aside>
+
+        {/* Content panel — only the active tab renders */}
+        <main className="min-w-0">
+          {/* Mobile-only header + tab selector (sidebar is hidden below lg) */}
+          <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>
 
-      {/* Account */}
-      <Section title={t('app:settings.section_account')}>
+          <div
+            id={'settings-panel-' + activeTab}
+            role="tabpanel"
+            aria-labelledby={'settings-tab-' + activeTab}
+          >
+            {activeTab === 'profile' && (
+              <Section
+                title={t('app:settings.section_account')}
+                description={t('app:settings.section_account_hint', {
+                  defaultValue: 'Dein öffentliches Profil und wie andere dich sehen.',
+                })}
+              >
                 <ProfileVisualsControls patchProfile={patchProfile} busy={busy} />
                 <Row label={t('auth:signed_in.username')} value={profile?.username ?? '—'} />
                 <DisplayNameControls patchProfile={patchProfile} busy={busy} />
-        <Row label={t('auth:signed_in.email')} value={profile?.userId ?? '—'} mono />
+                <Row icon={<AtIcon className="h-3.5 w-3.5" />} label={t('auth:signed_in.email')} value={profile?.userId ?? '—'} mono />
               </Section>
+            )}
 
-      {/* Startup */}
-      <Section title={t('app:settings.section_startup', { defaultValue: 'Start' })}>
-        <AutoStartControls />
-      </Section>
-
-      {/* Appearance */}
-      <Section title={t('app:settings.section_appearance')}>
+            {activeTab === 'appearance' && (
+              <Section
+                title={t('app:settings.section_appearance')}
+                description={t('app:settings.section_appearance_hint', {
+                  defaultValue: 'Theme, Sprache und Verhalten beim Systemstart.',
+                })}
+              >
                 <ThemeRow />
                 <SettingRow label={t('app:settings.language')}>
                   <div className="inline-flex rounded-lg border border-line bg-surface-3 p-1">
@@ -147,10 +242,19 @@ export function SettingsPage() {
                     })}
                   </div>
                 </SettingRow>
+                <SubGroup>
+                  <AutoStartControls />
+                </SubGroup>
               </Section>
+            )}
 
-      {/* Privacy */}
-      <Section title={t('app:settings.section_privacy')}>
+            {activeTab === 'privacy' && (
+              <Section
+                title={t('app:settings.section_privacy')}
+                description={t('app:settings.section_privacy_hint', {
+                  defaultValue: 'Wer dich kontaktieren darf und was Friends von dir sehen.',
+                })}
+              >
                 <Toggle
                   label={t('app:settings.show_read_receipts')}
                   hint={t('app:settings.show_read_receipts_hint')}
@@ -166,73 +270,108 @@ export function SettingsPage() {
                   onChange={(v) => void patchProfile({ allowDmsFromStrangers: v })}
                 />
               </Section>
+            )}
 
-      {/* Notification sound (new messages) */}
+            {activeTab === 'notifications' && (
               <Section
                 title={t('app:settings.section_notifications', { defaultValue: 'Benachrichtigungen' })}
+                description={t('app:settings.section_notifications_hint', {
+                  defaultValue: 'Töne für eingehende Nachrichten und Anrufe.',
+                })}
               >
+                <SubSection title={t('app:settings.subsection_message_sound', { defaultValue: 'Nachrichten-Ton' })}>
                   <NotificationSoundSettings disabled={busy} />
-      </Section>
-
-      {/* Ringtone (incoming custom) */}
-      <Section title={t('app:settings.section_ringtone', { defaultValue: 'Klingelton' })}>
+                </SubSection>
+                <SubSection title={t('app:settings.subsection_ringtone', { defaultValue: 'Klingelton bei Anruf' })}>
                   <RingtoneSettings disabled={busy} />
+                </SubSection>
               </Section>
+            )}
 
-      {/* Soundboard */}
-      <Section title={t('app:settings.section_soundboard', { defaultValue: 'Soundboard' })}>
-        <SoundboardSettings />
-      </Section>
-
-      {/* Voice / Push-to-Talk + Audio Quality + E2EE */}
-      <Section title={t('app:settings.section_voice', { defaultValue: 'Sprache' })}>
+            {activeTab === 'voice' && (
+              <Section
+                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.',
+                })}
+              >
+                <SubSection title={t('app:settings.subsection_audio_device', { defaultValue: 'Audio-Gerät' })}>
                   <AudioDeviceControls />
-        <div className="mt-3 border-t border-line pt-3">
+                </SubSection>
+                <SubSection title={t('app:settings.subsection_audio_quality', { defaultValue: 'Audio-Qualität' })}>
                   <AudioQualityControls />
-        </div>
-        <div className="mt-3 border-t border-line pt-3">
+                </SubSection>
+                <SubSection title={t('app:settings.subsection_ptt', { defaultValue: 'Push-to-Talk' })}>
                   <PttControls />
-        </div>
-        <div className="mt-3 border-t border-line pt-3">
+                </SubSection>
+                <SubSection title={t('app:settings.subsection_hotkeys', { defaultValue: 'Hotkeys' })}>
+                  <div className="space-y-2">
                     <VoiceHotkeyControls kind="mute" />
-        </div>
-        <div className="mt-3 border-t border-line pt-3">
                     <VoiceHotkeyControls kind="deafen" />
-        </div>
-        <div className="mt-3 border-t border-line pt-3">
                     <VoiceHotkeyControls kind="hangup" />
-        </div>
-        <div className="mt-3 border-t border-line pt-3">
                     <VoiceHotkeyControls kind="screenShare" />
-        </div>
-        <div className="mt-3 border-t border-line pt-3">
                     <VoiceHotkeyControls kind="video" />
                   </div>
-        <div className="mt-3 border-t border-line pt-3">
+                </SubSection>
+                <SubSection title={t('app:settings.subsection_call_e2ee', { defaultValue: 'Anruf-Verschlüsselung' })}>
                   <CallE2EEControls />
-        </div>
+                </SubSection>
               </Section>
+            )}
 
-      {/* Screen-share quality */}
-      <Section title={t('app:settings.section_screen_share', { defaultValue: 'Bildschirmfreigabe' })}>
+            {activeTab === 'screen-share' && (
+              <Section
+                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.',
+                })}
+              >
                 <ScreenShareControls />
               </Section>
+            )}
 
-      {/* Security */}
-      <Section title={t('app:settings.section_security', { defaultValue: 'Sicherheit' })}>
+            {activeTab === 'soundboard' && (
+              <Section
+                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.',
+                })}
+              >
+                <SoundboardSettings />
+              </Section>
+            )}
+
+            {activeTab === 'security' && (
+              <Section
+                title={t('app:settings.section_security', { defaultValue: 'Sicherheit' })}
+                description={t('app:settings.section_security_hint', {
+                  defaultValue: 'PIN, Recovery-Code und Schlüssel-Reparatur.',
+                })}
+              >
                 {profile?.userId && <SecurityCenter userId={profile.userId} />}
               </Section>
+            )}
 
-      {/* Danger zone */}
-      <Section title={t('app:settings.danger_zone')}>
+            {activeTab === 'account' && (
+              <Section
+                title={t('app:settings.section_account_mgmt', { defaultValue: 'Konto verwalten' })}
+                description={t('app:settings.section_account_mgmt_hint', {
+                  defaultValue: 'Abmelden oder Konto-Aktionen.',
+                })}
+                tone="danger"
+              >
                 <button
                   type="button"
                   onClick={() => void signOut()}
-          className="cursor-pointer rounded-lg border border-rose-500/40 bg-rose-500/10 px-4 py-2.5 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/50 dark:text-rose-300"
+                  className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-rose-500/40 bg-rose-500/10 px-4 py-2.5 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/50 dark:text-rose-300"
                 >
+                  <SignOutIcon className="h-4 w-4" />
                   {t('app:settings.sign_out')}
                 </button>
               </Section>
+            )}
+          </div>
+        </main>
       </div>
     </div>
   );
@@ -1138,21 +1277,80 @@ function formatBitrate(kbps: number): string {
   return kbps + ' kbps';
 }
 
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
+function Section({
+  title,
+  description,
+  children,
+  tone,
+}: {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  tone?: 'default' | 'danger';
+}) {
   return (
-    <section className="rounded-2xl border border-line bg-surface-2 p-5">
-      <h2 className="mb-4 text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
+    <section
+      className={
+        'rounded-2xl border bg-surface-2 p-6 ' +
+        (tone === 'danger' ? 'border-rose-500/30' : 'border-line')
+      }
+    >
+      <header className="mb-5 border-b border-line pb-4">
+        <h2 className={'font-display text-lg font-semibold ' + (tone === 'danger' ? 'text-rose-500 dark:text-rose-300' : 'text-fg')}>
           {title}
         </h2>
-      <div className="space-y-3">{children}</div>
+        {description && (
+          <p className="mt-1 text-xs text-fg-muted">{description}</p>
+        )}
+      </header>
+      <div className="space-y-4">{children}</div>
     </section>
   );
 }
 
-function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+// Sub-heading inside a Section — used to chunk dense sections like Voice into
+// smaller named groups (Audio-Gerät / Qualität / PTT / Hotkeys / E2EE).
+// No border: `--color-line` is already a semi-transparent token, and applying
+// the `/60` opacity modifier brightens it (Tailwind overrides the original
+// alpha) which made the sub-cards look harsher than the outer Section. Plain
+// background tint + caps heading carry the grouping signal on their own.
+function SubSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-2 rounded-xl bg-surface-3/50 p-4">
+      <h3 className="text-[11px] font-semibold uppercase tracking-[0.1em] text-fg-muted">
+        {title}
+      </h3>
+      <div className="space-y-3">{children}</div>
+    </div>
+  );
+}
+
+// Lighter wrapper for a single related extra control inside a Section that
+// doesn't warrant its own SubSection card (e.g., autostart toggle inside
+// Appearance).
+function SubGroup({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="space-y-3 border-t border-line pt-4">{children}</div>
+  );
+}
+
+function Row({
+  label,
+  value,
+  mono,
+  icon,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+  icon?: React.ReactNode;
+}) {
   return (
     <div className="flex items-center justify-between gap-4">
-      <dt className="text-sm text-fg-muted">{label}</dt>
+      <dt className="flex items-center gap-1.5 text-sm text-fg-muted">
+        {icon}
+        {label}
+      </dt>
       <dd
         className={
           'max-w-[60%] truncate text-right text-sm text-fg ' +

packages/shared/src/chat/messages.ts

@@ -91,7 +91,11 @@ export interface SendMessageParams {
   conversationId: string;
   plaintext: string;
   senderUserId: string;
-  senderDeviceId: string;
+  // Optional now: post-conv-keys this is pure telemetry. The 0.18 builds
+  // started passing a localStorage UUID that doesn't exist in the devices
+  // table; messages.sender_device_id RLS then 403'd every insert. Senders
+  // pass null (or an actually-registered device id, if they have one).
+  senderDeviceId?: string | null;
   senderPrivateKey: Uint8Array;
   replyToId?: string;
   // Optional encrypted attachments — their handles are already materialised
@@ -124,7 +128,12 @@ export async function sendEncryptedMessage(params: SendMessageParams): Promise<C
   const insertPayload: Record<string, unknown> = {
     conversation_id: params.conversationId,
     sender_id: params.senderUserId,
-    sender_device_id: params.senderDeviceId,
+    // ALWAYS null until we re-introduce a real per-install devices row.
+    // Desktop callers currently pass a localStorage UUID (ensureInstallId)
+    // which doesn't exist in the devices table; the messages_insert_member
+    // RLS policy then 403s because the id can't be proven to belong to the
+    // caller. NULL satisfies the policy ("sender_device_id IS NULL OR …").
+    sender_device_id: null,
     ciphertext: bytesToPgHex(cipher.ciphertext),
     nonce: bytesToPgHex(cipher.nonce),
     key_version: handle.keyVersion,
@@ -174,7 +183,7 @@ export interface EditMessageParams {
 // Re-encrypts the message body with the conv-key and updates the row.
 // Server-side trigger enforces 24h window + sender-only rule.
 export async function editEncryptedMessage(
-  params: EditMessageParams & { senderUserId: string; senderDeviceId: string },
+  params: EditMessageParams & { senderUserId: string; senderDeviceId?: string | null },
 ): Promise<void> {
   const ownCtx: OwnUserCtx = {
     userId: params.senderUserId,