feat(web): redesign responsive settings navigation (#1027)

web/src/lib/locales/en.ts

@@ -545,10 +545,18 @@ export default {
   'language.chinese': '简体中文',
 
   // Settings page
+  'common.back': 'Back',
   'settings.title': 'Settings',
+  'settings.hub.description': 'Choose a category to adjust HAPI to your workflow.',
+  'settings.hub.voice.summary': 'Voice, language, and behavior',
+  'settings.general.title': 'General',
+  'settings.general.description': 'Language and general application preferences.',
   'settings.language.title': 'Language',
   'settings.language.label': 'Language',
   'settings.display.title': 'Display',
+  'settings.display.description': 'Appearance, typography, and session list preferences.',
+  'settings.display.typography': 'Typography',
+  'settings.display.sessions': 'Session list',
   'settings.display.appearance': 'Appearance',
   'settings.display.appearance.system': 'Follow System',
   'settings.display.appearance.dark': 'Dark',
@@ -558,6 +566,7 @@ export default {
   'settings.display.themeColors.description': 'Applies to the current appearance. Switch appearance to customize each one separately.',
   'settings.display.themeColors.reset': 'Reset',
   'settings.display.themeColors.resetAll': 'Reset all',
+  'settings.display.themeColors.expand': 'Customize',
   'settings.display.themeColors.key.background': 'Background',
   'settings.display.themeColors.key.surface': 'Cards & surfaces',
   'settings.display.themeColors.key.text': 'Text',
@@ -577,6 +586,10 @@ export default {
   'settings.display.sessionListStatus.detailed': 'Detailed',
   'settings.display.sessionListStatus.detailedDescription': 'Shows why a session stopped: permission, input, background work, new activity, or a scheduled message (clock icon).',
   'settings.chat.title': 'Chat',
+  'settings.chat.description': 'Message input, tool cards, and conversation colors.',
+  'settings.chat.input': 'Input',
+  'settings.chat.tools': 'Tool cards',
+  'settings.chat.colors': 'Conversation colors',
   'settings.chat.enterBehavior': 'Enter Key',
   'settings.chat.enterBehavior.send': 'Send message',
   'settings.chat.enterBehavior.newline': 'Insert newline',
@@ -591,6 +604,8 @@ export default {
   'settings.chat.surfaceColor.softYellow': 'Soft yellow',
   'settings.chat.surfaceColor.custom': 'Custom color',
   'settings.voice.title': 'Voice Assistant',
+  'settings.voice.description': 'Voice connection, language, and everyday behavior.',
+  'settings.voice.voices.description': 'Choose the voice used by the selected backend.',
   'settings.voice.sounds.title': 'How It Sounds',
   'settings.voice.responds.title': 'How It Responds',
   'settings.voice.connection.title': 'Connection & provider',
@@ -671,11 +686,14 @@ export default {
   'settings.voice.tuning.selectBackend': 'Per-backend sliders appear when a voice backend is selected.',
   'settings.voice.preview.elevenlabsOnly': 'Voice preview is only available for ElevenLabs',
   'settings.voice.preview.unavailable': 'Preview unavailable without an ElevenLabs API key',
+  'settings.voice.preview.play': 'Preview voice',
+  'settings.voice.preview.stop': 'Stop preview',
   'settings.voice.staticCatalogHint': 'Open the list to see voice character notes. Audio preview is ElevenLabs only.',
   'settings.voice.session.label': 'Session behavior',
   'settings.voice.proactive': 'Start voice session with summary',
   'settings.voice.proactive.description': 'When on, starting a voice session opens with a spoken summary of current agent activity. When off, the assistant greets you and waits for you to speak.',
   'settings.about.title': 'About',
+  'settings.about.description': 'HAPI links and version information.',
   'settings.about.website': 'Website',
   'settings.about.appVersion': 'App Version',
   'settings.about.protocolVersion': 'Protocol Version',