test(e2e): theme + font-size persistence across renderer reload

- ThemeSwitcher: testids on the dropdown trigger and each option;
  expose the live value via data-theme-active for locale-independent
  assertions
- FontSizeSwitcher: same — data-font-size-active on the trigger,
  testid per option
- New settings-interface-persistence.e2e.ts: pick a non-default theme
  (light) and font size (18px), reload the renderer, reopen the
  Interface panel, assert both values re-hydrated from the Zustand
  persist store backed by WebKit localStorage in the pinned profile

Author: qnixsynapse

e2e/specs/settings-interface-persistence.e2e.ts

@@ -0,0 +1,66 @@
+import { browser, expect } from '@wdio/globals'
+import { byTestId, waitForApp } from '../helpers/app'
+import { openSettings, reloadRenderer } from '../helpers/settings'
+
+/**
+ * Settings → Interface theme + font-size persistence. Both stores use
+ * Zustand `persist` against localStorage, which on Linux lives inside
+ * the WebKit data dir under our pinned XDG profile — so reloading the
+ * renderer should re-hydrate the user-selected values.
+ *
+ * We read the active value off `data-theme-active` / `data-font-size-active`
+ * on the dropdown trigger (added in ThemeSwitcher / FontSizeSwitcher)
+ * rather than visible text so the assertions stay independent of i18n.
+ */
+
+describe('Settings: Interface persistence', () => {
+  before(async () => {
+    await waitForApp()
+  })
+
+  it('persists theme and font-size selection across renderer reload', async () => {
+    await openSettings('interface')
+
+    // Theme: pick a value distinct from the default ("auto").
+    const themeTrigger = await byTestId('theme-switcher-trigger')
+    await themeTrigger.click()
+    const themeLight = await byTestId('theme-option-light', 5_000)
+    await themeLight.click()
+
+    await browser.waitUntil(
+      async () =>
+        (await (await byTestId('theme-switcher-trigger')).getAttribute(
+          'data-theme-active'
+        )) === 'light',
+      { timeout: 5_000, timeoutMsg: 'theme did not switch to light' }
+    )
+
+    // Font size: pick a value distinct from the default ("16px").
+    const fontTrigger = await byTestId('font-size-switcher-trigger')
+    await fontTrigger.click()
+    const fontLarge = await byTestId('font-size-option-18px', 5_000)
+    await fontLarge.click()
+
+    await browser.waitUntil(
+      async () =>
+        (await (await byTestId('font-size-switcher-trigger')).getAttribute(
+          'data-font-size-active'
+        )) === '18px',
+      { timeout: 5_000, timeoutMsg: 'font size did not switch to 18px' }
+    )
+
+    // Reload the renderer, return to the panel, assert both persisted.
+    await reloadRenderer()
+    await openSettings('interface')
+
+    const themeAfter = await (await byTestId(
+      'theme-switcher-trigger'
+    )).getAttribute('data-theme-active')
+    const fontAfter = await (await byTestId(
+      'font-size-switcher-trigger'
+    )).getAttribute('data-font-size-active')
+
+    expect(themeAfter).toBe('light')
+    expect(fontAfter).toBe('18px')
+  })
+})

web-app/src/containers/FontSizeSwitcher.tsx

@@ -49,7 +49,14 @@ export function FontSizeSwitcher({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="w-full justify-between" title={t('common:adjustFontSize')}>
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full justify-between"
+          title={t('common:adjustFontSize')}
+          data-testid="font-size-switcher-trigger"
+          data-font-size-active={fontSize}
+        >
           {fontSizeOptions.find(
             (item: { value: string; label: string }) => item.value === fontSize
           )?.label || t('common:medium')}
@@ -60,6 +67,7 @@ export function FontSizeSwitcher({
         {fontSizeOptions.map((item: { value: string; label: string }) => (
           <DropdownMenuItem
             key={item.value}
+            data-testid={`font-size-option-${item.value}`}
             className={cn(
               'cursor-pointer my-0.5',
               fontSize === item.value && 'bg-secondary-foreground/8'

web-app/src/containers/ThemeSwitcher.tsx

@@ -56,7 +56,14 @@ export function ThemeSwitcher({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="w-full justify-between" title={t('common:editTheme')}>
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full justify-between"
+          title={t('common:editTheme')}
+          data-testid="theme-switcher-trigger"
+          data-theme-active={activeTheme}
+        >
           {themeOptions.find(
             (item: { value: string; label: string }) => item.value === activeTheme
           )?.label || t('common:auto')}
@@ -67,6 +74,7 @@ export function ThemeSwitcher({
         {themeOptions.map((item) => (
           <DropdownMenuItem
             key={item.value}
+            data-testid={`theme-option-${item.value}`}
             className={cn(
               'cursor-pointer my-0.5',
               activeTheme === item.value && 'bg-secondary-foreground/8'