fix(ui): move theme checkmark when theme changes in Appearance menu

The checkmark in the Appearance theme menu was rendered server-side
(if user.Theme == opt.Name), so it never moved after switching themes
in the browser.

- Always render the check for every theme option, hidden by default,
  using a new themeCheckClass(name, current) helper that returns the
  hidden class unless the option is the active theme.
- Give each theme button a data-theme attribute and add
  updateThemeIndicators() to web/src/theme.ts, which reads the applied
  theme from the body class (theme-<name>) and toggles the hidden class
  on each check accordingly.
- Call updateThemeIndicators() from changeTheme (before the async save
  and on failure), initializeTheme, and loadUserTheme so the menu stays
  in sync with the applied theme.
- Add unit test for themeCheckClass (templates/utils_test.go) and
  regenerate templ output.
This commit is contained in:
2026-08-10 13:43:32 -04:00
parent ab465d8e0e
commit 8d65e03555
5 changed files with 203 additions and 129 deletions
+11
View File
@@ -31,6 +31,17 @@ func navItemClass(current, target string) string {
return base + "text-content-muted hover:text-content hover:bg-surface-hover"
}
// themeCheckClass returns the class suffix for a theme option's checkmark
// wrapper: empty for the active theme (visible), " hidden" otherwise. The
// check element is always rendered so updateThemeIndicators() can move it
// client-side when the user picks a different theme.
func themeCheckClass(name, current string) string {
if name == current {
return ""
}
return " hidden"
}
func ContainsString(slice []string, item string) bool {
for _, s := range slice {
if s == item {