feat: redesign settings pages to match canonical flat UI patterns (#493)

* refactor(settings): new IA shell + projects section + skills catalog discoverability

* chore(settings): split providers list by scope; show user before project

* fix: navigation flow in mobile Settings

* feat: redesign settings pages to use modern elevated surface patterns

* feat: replace helper text with tooltips in settings

* ui: redesign update dialog and fix external link routing

- Restructures UpdateDialog to focus on changelog readability with a wider max-w-4xl canvas
- Highlights @username contributor mentions with theme primary color
- Strips excessive vertical padding and right-aligns compact action buttons
- Disables streamdown's internal link safety dialog in favor of direct Tauri shell routing

* feat: refactor Git identities into dedicated Git settings page

* feat: unify sidebar background styling across VS Code and web/mobile

* fix: adjust button styling and layout for mobile settings pages

* feat: add MCP settings page and sidebar

* feat: hide models in provider view (thanks to @nguyenngothuong)

* feat: add "Add new provider" option to model selector dropdown

* fix: local evroc logo + provider dropdown icons

* fix: increase width of provider menu

* fix: dark theme background color for better contrast

* feat: update @opencode-ai/sdk dependency to v1.2.10

* fix: restore session sorting to only use updated time

* fix: added settings for sessions deletion dialog

* fix: adjust padding on settings pages for better layout

* fix: standardize select dropdown height across UI

* fix: agent selector UI and notification settings

* fix: remove redundant helper text from settings pages

* fix: update UI layout for description fields

* fix: remove border-none and shadow-none from textarea classes

* fix: enable context menu on sidebar items

* feat: refactor UI controls and layout patterns across settings pages

* fix: use headerless blocks when page title already provides context

* fix: remove subtask option from command settings

* fix: refactor mcp page settings

* fix: reduce spacing in skills configuration pages

* feat: refactor voice settings

* feat: refactor settings sidebar sections

packages/ui/src/lib/router/parseRoute.ts

@@ -1,4 +1,3 @@
-import type { SidebarSection } from '@/constants/sidebar';
 import type { MainTab } from '@/stores/useUIStore';
 import {
   type RouteState,
@@ -17,7 +16,7 @@ export function parseRoute(searchParams?: URLSearchParams): RouteState {
   return {
     sessionId: parseSessionId(params),
     tab: parseTab(params),
-    settingsSection: parseSettingsSection(params),
+    settingsPath: parseSettingsPath(params),
     diffFile: parseDiffFile(params),
   };
 }
@@ -68,10 +67,10 @@ function parseTab(params: URLSearchParams): MainTab | null {
 }
 
 /**
- * Parse settings section from URL parameters.
- * Returns null if missing or invalid.
+ * Parse settings target from URL parameters.
+ * Returns null if missing/empty.
  */
-function parseSettingsSection(params: URLSearchParams): SidebarSection | null {
+function parseSettingsPath(params: URLSearchParams): string | null {
   const value = params.get(ROUTE_PARAMS.SETTINGS);
   if (!value) {
     return null;
@@ -79,17 +78,21 @@ function parseSettingsSection(params: URLSearchParams): SidebarSection | null {
 
   const normalized = value.toLowerCase().trim();
 
-  // Check if it's a valid section
-  if ((VALID_SETTINGS_SECTIONS as readonly string[]).includes(normalized)) {
-    return normalized as SidebarSection;
+  if (normalized.length === 0) {
+    return null;
   }
 
   // Handle common aliases
   if (normalized === 'openchamber' || normalized === 'general' || normalized === 'preferences') {
-    return 'settings';
+    return 'home';
   }
 
-  return null;
+  // Keep legacy section ids as-is (mapping happens at apply time).
+  if ((VALID_SETTINGS_SECTIONS as readonly string[]).includes(normalized)) {
+    return normalized;
+  }
+
+  return normalized;
 }
 
 /**

packages/ui/src/lib/router/serializeRoute.ts

@@ -1,4 +1,3 @@
-import type { SidebarSection } from '@/constants/sidebar';
 import type { MainTab } from '@/stores/useUIStore';
 import { ROUTE_PARAMS } from './types';
 
@@ -9,7 +8,7 @@ export interface AppRouteState {
   sessionId: string | null;
   tab: MainTab;
   isSettingsOpen: boolean;
-  settingsSection: SidebarSection;
+  settingsPath: string;
   diffFile: string | null;
 }
 
@@ -32,8 +31,8 @@ export function serializeRoute(state: AppRouteState): URLSearchParams {
 
   // Settings takes precedence - if open, include settings section
   if (state.isSettingsOpen) {
-    const settingsSection = state.settingsSection === 'sessions' ? 'settings' : state.settingsSection;
-    params.set(ROUTE_PARAMS.SETTINGS, settingsSection);
+    const settingsPath = state.settingsPath.trim().length > 0 ? state.settingsPath : 'home';
+    params.set(ROUTE_PARAMS.SETTINGS, settingsPath);
     // Don't include tab when settings is open (it's a full-screen overlay)
     return params;
   }

packages/ui/src/lib/router/types.ts

@@ -11,7 +11,7 @@ export interface RouteState {
   /** Main tab to display (chat, git, diff, terminal, files) */
   tab: MainTab | null;
   /** Settings section - when non-null, settings dialog should be open */
-  settingsSection: SidebarSection | null;
+  settingsPath: string | null;
   /** File path for diff view */
   diffFile: string | null;
 }
@@ -40,6 +40,7 @@ export const VALID_SETTINGS_SECTIONS: readonly SidebarSection[] = [
   'commands',
   'skills',
   'providers',
+  'usage',
   'git-identities',
 ] as const;