Neo: footer theme and sounds switchers show only their icon (#5935)

The footer read "Auto" and "Sounds: Full" next to their icons. The icon
already shows the current theme (Eclipse, Sun, Moon) and sound level
(Volume2, Volume1, VolumeX), and the menus name every option, so the
triggers are now icon-only buttons (36 px, 44 px hit area).

Each keeps an accessible name and a hover tooltip with the current value:
"Sounds: Full" as before, and "Theme: Auto" from new theme_level_* keys in
all five languages. Joining t('theme') and the value would read wrong in
French, which writes "Thème : automatique". The language switcher keeps its
label: its icon does not say which language is on.

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

neo/packages/app/components/nav/menu-footer.js

@@ -13,9 +13,9 @@ export const MENU_FOOTER_CLASSES = 'flex w-full items-center border-t border-bor
 // Settings use the historical misspelling; keep this key aligned with settings/layout.js.
 const AVAILABLE_LANGS_SETTING_KEY = 'avaliable_langs';
 const FOOTER_THEME_ITEMS = [
-    { id: 'auto', titleKey: 'theme_footer_auto', icon: 'Eclipse' },
-    { id: 'light', titleKey: 'theme_footer_light', icon: 'Sun' },
-    { id: 'dark', titleKey: 'theme_footer_dark', icon: 'Moon' },
+    { id: 'auto', titleKey: 'theme_footer_auto', labelKey: 'theme_level_auto', icon: 'Eclipse' },
+    { id: 'light', titleKey: 'theme_footer_light', labelKey: 'theme_level_light', icon: 'Sun' },
+    { id: 'dark', titleKey: 'theme_footer_dark', labelKey: 'theme_level_dark', icon: 'Moon' },
 ];
 
 const linkVariantToNeoStyle = {
@@ -87,16 +87,17 @@ function FooterThemeSwitcher({ visualProps }) {
         }))
     ), [currentThemeName, t]);
     const currentThemeItem = FOOTER_THEME_ITEMS.find((theme) => theme.id === currentThemeName) ?? FOOTER_THEME_ITEMS[0];
-    const themeLabel = t(currentThemeItem.titleKey);
+    const themeLabel = t(currentThemeItem.labelKey);
 
+    // Icon only: the icon shows the current theme, and the menu names each one.
     return (
         <DropdownMenu
             items={items}
             onSelect={(item) => setThemeName(item.id)}
             buttonProps={{
-                label: themeLabel,
                 image: currentThemeItem.icon,
                 accessibilityLabel: themeLabel,
+                tooltip: themeLabel,
                 style: visualProps.style,
                 controlSize: visualProps.controlSize,
                 className: visualProps.className,
@@ -123,14 +124,15 @@ function FooterSoundsLevel({ visualProps }) {
     const current = SOUND_LEVEL_ITEMS.find((option) => option.id === level) ?? SOUND_LEVEL_ITEMS[0];
     const label = t(current.labelKey);
 
+    // Icon only, like the theme switcher: the icon shows the level, and the menu names each one.
     return (
         <DropdownMenu
             items={items}
             onSelect={(item) => setLevel(item.id)}
             buttonProps={{
-                label,
                 image: current.icon,
                 accessibilityLabel: label,
+                tooltip: label,
                 style: visualProps.style,
                 controlSize: visualProps.controlSize,
                 className: visualProps.className,

neo/packages/app/default/translations/de.json

@@ -43,6 +43,9 @@
     "theme_footer_auto": "Auto",
     "theme_footer_light": "Hell",
     "theme_footer_dark": "Dunkel",
+    "theme_level_auto": "Design: automatisch",
+    "theme_level_light": "Design: hell",
+    "theme_level_dark": "Design: dunkel",
     "Sounds": "Töne",
     "sounds_full": "Laut",
     "sounds_quiet": "Leise",

neo/packages/app/default/translations/en.json

@@ -43,6 +43,9 @@
     "theme_footer_auto": "Auto",
     "theme_footer_light": "Light",
     "theme_footer_dark": "Dark",
+    "theme_level_auto": "Theme: Auto",
+    "theme_level_light": "Theme: Light",
+    "theme_level_dark": "Theme: Dark",
     "Sounds": "Sounds",
     "sounds_full": "Full",
     "sounds_quiet": "Quiet",

neo/packages/app/default/translations/es.json

@@ -43,6 +43,9 @@
     "theme_footer_auto": "Auto",
     "theme_footer_light": "Claro",
     "theme_footer_dark": "Oscuro",
+    "theme_level_auto": "Tema: automático",
+    "theme_level_light": "Tema: claro",
+    "theme_level_dark": "Tema: oscuro",
     "Sounds": "Sonidos",
     "sounds_full": "Alto",
     "sounds_quiet": "Bajo",

neo/packages/app/default/translations/fr.json

@@ -43,6 +43,9 @@
     "theme_footer_auto": "Auto",
     "theme_footer_light": "Clair",
     "theme_footer_dark": "Sombre",
+    "theme_level_auto": "Thème : automatique",
+    "theme_level_light": "Thème : clair",
+    "theme_level_dark": "Thème : sombre",
     "Sounds": "Sons",
     "sounds_full": "Fort",
     "sounds_quiet": "Doux",

neo/packages/app/default/translations/ru.json

@@ -43,6 +43,9 @@
     "theme_footer_auto": "Авто",
     "theme_footer_light": "Светлая",
     "theme_footer_dark": "Тёмная",
+    "theme_level_auto": "Тема: авто",
+    "theme_level_light": "Тема: светлая",
+    "theme_level_dark": "Тема: тёмная",
     "Sounds": "Звуки",
     "sounds_full": "Громко",
     "sounds_quiet": "Тихо",