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',

web/src/lib/locales/zh-CN.ts

@@ -549,10 +549,18 @@ export default {
   'language.chinese': '简体中文',
 
   // Settings page
+  'common.back': '返回',
   'settings.title': '设置',
+  'settings.hub.description': '选择一个分类，按你的工作方式调整 HAPI。',
+  'settings.hub.voice.summary': '声音、语言和行为',
+  'settings.general.title': '通用',
+  'settings.general.description': '语言和通用应用偏好。',
   'settings.language.title': '语言',
   'settings.language.label': '语言',
   'settings.display.title': '显示',
+  'settings.display.description': '外观、字体和会话列表偏好。',
+  'settings.display.typography': '字体',
+  'settings.display.sessions': '会话列表',
   'settings.display.appearance': '外观',
   'settings.display.appearance.system': '跟随系统',
   'settings.display.appearance.dark': '深色',
@@ -562,6 +570,7 @@ export default {
   'settings.display.themeColors.description': '应用于当前外观。切换外观可分别自定义每种配色。',
   'settings.display.themeColors.reset': '重置',
   'settings.display.themeColors.resetAll': '全部重置',
+  'settings.display.themeColors.expand': '自定义',
   'settings.display.themeColors.key.background': '背景',
   'settings.display.themeColors.key.surface': '卡片与表面',
   'settings.display.themeColors.key.text': '文字',
@@ -581,6 +590,10 @@ export default {
   'settings.display.sessionListStatus.detailed': '详细',
   'settings.display.sessionListStatus.detailedDescription': '显示会话停止的原因：权限、输入、后台任务、新活动或定时消息（时钟图标）。',
   'settings.chat.title': '聊天',
+  'settings.chat.description': '消息输入、工具卡片和对话颜色。',
+  'settings.chat.input': '输入',
+  'settings.chat.tools': '工具卡片',
+  'settings.chat.colors': '对话颜色',
   'settings.chat.enterBehavior': '回车键行为',
   'settings.chat.enterBehavior.send': '发送消息',
   'settings.chat.enterBehavior.newline': '插入换行',
@@ -595,6 +608,8 @@ export default {
   'settings.chat.surfaceColor.softYellow': '柔和黄',
   'settings.chat.surfaceColor.custom': '自定义颜色',
   'settings.voice.title': '语音助手',
+  'settings.voice.description': '语音连接、语言和常用行为。',
+  'settings.voice.voices.description': '选择当前后端使用的声音。',
   'settings.voice.sounds.title': '声音效果',
   'settings.voice.responds.title': '对话风格',
   'settings.voice.connection.title': '连接与提供商',
@@ -675,11 +690,14 @@ export default {
   'settings.voice.tuning.selectBackend': '选择语音后端后显示对应滑块。',
   'settings.voice.preview.elevenlabsOnly': '仅 ElevenLabs 支持试听',
   'settings.voice.preview.unavailable': '未配置 ElevenLabs API 密钥时无法试听',
+  'settings.voice.preview.play': '预览声音',
+  'settings.voice.preview.stop': '停止预览',
   'settings.voice.staticCatalogHint': '展开列表可查看声音特点说明；仅 ElevenLabs 支持试听。',
   'settings.voice.session.label': '会话行为',
   'settings.voice.proactive': '以摘要开始语音会话',
   'settings.voice.proactive.description': '开启后，启动语音会话时将朗读当前代理活动的摘要。关闭后，助手向您打招呼并等待您先开口。',
   'settings.about.title': '关于',
+  'settings.about.description': 'HAPI 链接和版本信息。',
   'settings.about.website': '官方网站',
   'settings.about.appVersion': '应用版本',
   'settings.about.protocolVersion': '协议版本',