feat(web): add appearance setting (follow system / dark / light)

[metowolf]

Summary

• Add user-facing appearance preference (Follow System / Dark / Light) to the settings page
• Persist preference to localStorage, taking priority over automatic system/Telegram detection in the existing theme pipeline
• Include i18n support for both English and Chinese locales
• Add unit tests for the new Appearance setting

Test plan

• All 17 existing + new tests pass (bun run test)
• Verify appearance dropdown renders correctly on the settings page
• Verify selecting Dark/Light applies immediately and persists across page reloads
• Verify "Follow System" removes the override and falls back to system/Telegram detection

[github-actions]

Findings

• [Minor] Cross-tab appearance change does not update theme — storage handler updates state only, so data-theme and useTheme subscribers stay stale until another event fires, evidence web/src/hooks/useTheme.ts:133
  Suggested fix:

  const onStorage = (event: StorageEvent) => {
      if (event.key !== APPEARANCE_KEY) return
      setAppearanceState(parseAppearance(event.newValue))
      updateScheme()
  }

Summary

• One minor sync bug; otherwise ok. Residual risk: cross-tab theme mismatch.

Testing

• Not run (automation)

[github-actions]

Findings

• [Minor] Cross-tab appearance change does not update theme — storage handler updates state only, so data-theme and useTheme subscribers stay stale until another event fires, evidence web/src/hooks/useTheme.ts:133
  Suggested fix:

  const onStorage = (event: StorageEvent) => {
      if (event.key !== APPEARANCE_KEY) return
      setAppearanceState(parseAppearance(event.newValue))
      updateScheme()
  }

Summary

• One minor sync bug; otherwise ok. Residual risk: cross-tab theme mismatch.

Testing

• Not run (automation)

[github-actions]

Findings

• [Minor] Cross-tab appearance change does not update theme — storage handler updates state only, so data-theme and useTheme subscribers stay stale until another event fires, evidence web/src/hooks/useTheme.ts:133
  Suggested fix:

  const onStorage = (event: StorageEvent) => {
      if (event.key !== APPEARANCE_KEY) return
      setAppearanceState(parseAppearance(event.newValue))
      updateScheme()
  }

Summary

• One minor sync bug; otherwise ok. Residual risk: cross-tab theme mismatch.

Testing

• Not run (automation)

[tiann]

@tiann review again

[github-actions]

Reviewed again. One remaining issue:

• Cross-tab appearance sync still only works while the settings page is mounted. The storage listener is inside useAppearance() at web/src/hooks/useTheme.ts:127, but that hook is only consumed by the settings route at web/src/routes/settings/index.tsx:85. On any other page, no listener updates currentScheme / data-theme, so changing appearance in another tab leaves the current tab stale until reload or another theme event. I’d move the storage listener into the global theme initialization/store path instead.

Testing: not run here; bun is not installed in this runner.

---

HAPI Bot

[metowolf]

[tiann]

@tiann review

[github-actions]

Reviewed again. I don't see a remaining concrete issue in this patch set.

• The previous cross-tab sync bug looks addressed: initializeTheme() now installs a global storage listener, so pages outside settings also re-run updateScheme() when hapi-appearance changes in another tab: web/src/hooks/useTheme.ts:158.
• The settings page label still stays in sync because useAppearance() keeps its own storage listener and updates the local appearance state: web/src/hooks/useTheme.ts:127.
• The new setting is wired into the UI in web/src/routes/settings/index.tsx:241.

Testing: not run here because bun is not installed in this runner.

---

HAPI Bot