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/components/sections/mcp/McpPage.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
 import { ButtonLarge } from '@/components/ui/button-large';
+import { ButtonSmall } from '@/components/ui/button-small';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { toast } from '@/components/ui';
@@ -20,12 +22,10 @@ import {
   RiEyeOffLine,
   RiFolderLine,
   RiPlugLine,
-  RiSaveLine,
   RiUser3Line,
 } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
-import { ButtonSmall } from '@/components/ui/button-small';
 import {
   Dialog,
   DialogContent,
@@ -109,21 +109,18 @@ const CommandTextarea: React.FC<CommandTextareaProps> = ({ value, onChange }) =>
 
   return (
     <div className="space-y-2">
-      <div className="flex items-center justify-between gap-2">
-        <p className="typography-micro text-muted-foreground">
-          One argument per line. Blank lines are ignored.
-        </p>
-        <Button
+      <div className="flex items-center justify-end gap-2">
+        <ButtonSmall
           variant="ghost"
-          size="sm"
-          className="h-6 gap-1 px-2 typography-micro text-muted-foreground"
+          size="xs"
+          className="!font-normal gap-1 text-muted-foreground"
           onClick={handlePasteFromClipboard}
           type="button"
           title="Paste full command from clipboard and auto-split"
         >
           <RiClipboardLine className="h-3 w-3" />
           Paste command
-        </Button>
+        </ButtonSmall>
       </div>
 
       <Textarea
@@ -255,17 +252,17 @@ const EnvEditor: React.FC<EnvEditorProps> = ({ value, onChange }) => {
           <span className="typography-micro text-muted-foreground w-32 shrink-0">Key</span>
           <span className="typography-micro text-muted-foreground">Value</span>
         </div>
-        <Button
+        <ButtonSmall
           variant="ghost"
-          size="sm"
-          className="h-6 gap-1 px-2 typography-micro text-muted-foreground"
+          size="xs"
+          className="!font-normal gap-1 text-muted-foreground"
           onClick={handlePasteDotEnv}
           type="button"
           title="Paste KEY=VALUE lines from clipboard"
         >
           <RiClipboardLine className="h-3 w-3" />
           Paste .env
-        </Button>
+        </ButtonSmall>
       </div>
 
       {/* Rows */}
@@ -302,28 +299,27 @@ const EnvEditor: React.FC<EnvEditorProps> = ({ value, onChange }) => {
               </button>
             </div>
             {/* Remove */}
-            <Button
-              size="icon"
+            <ButtonSmall
               variant="ghost"
-              className="h-8 w-7 shrink-0 text-muted-foreground hover:text-destructive"
+              className="h-7 w-7 px-0 shrink-0 text-muted-foreground hover:text-[var(--status-error)]"
               onClick={() => removeRow(idx)}
             >
               <RiDeleteBinLine className="h-3.5 w-3.5" />
-            </Button>
+            </ButtonSmall>
           </div>
         ))}
       </div>
 
-      <Button
+      <ButtonSmall
         variant="outline"
-        size="sm"
-        className="gap-1.5 h-7 typography-meta"
+        size="xs"
+        className="!font-normal gap-1.5"
         onClick={addRow}
         type="button"
       >
         <RiAddLine className="h-3.5 w-3.5" />
         Add variable
-      </Button>
+      </ButtonSmall>
 
       {hasSensitiveValues && (
         <p className="typography-micro text-muted-foreground/60">
@@ -345,16 +341,14 @@ const STATUS_LABEL: Record<string, string> = {
 };
 
 const StatusBadge: React.FC<{ status: string | undefined; enabled: boolean }> = ({ status, enabled }) => {
-  if (!enabled) {
-    return <span className="typography-micro text-muted-foreground/50">Disabled</span>;
-  }
+  if (!enabled) return null;
   if (!status) return null;
 
   const colorMap: Record<string, string> = {
-    connected: 'text-green-600 dark:text-green-400',
-    failed: 'text-destructive',
-    needs_auth: 'text-yellow-600 dark:text-yellow-400',
-    needs_client_registration: 'text-yellow-600 dark:text-yellow-400',
+    connected: 'text-[var(--status-success)]',
+    failed: 'text-[var(--status-error)]',
+    needs_auth: 'text-[var(--status-warning)]',
+    needs_client_registration: 'text-[var(--status-warning)]',
   };
 
   return (
@@ -523,195 +517,200 @@ export const McpPage: React.FC = () => {
 
   return (
     <ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
-      <div className="mx-auto max-w-2xl space-y-5 p-6">
+      <div className="mx-auto w-full max-w-3xl p-3 sm:p-6 sm:pt-8">
 
-        {/* ── Header card: name + status + enabled + connect ── */}
-        <div className="rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)] px-4 py-3 space-y-3">
-
-          {/* Row 1: name + connect button */}
-          <div className="flex items-center justify-between gap-3 min-w-0">
-            <div className="min-w-0">
-              {isNewServer ? (
-                <Input
-                  value={draftName}
-                  onChange={(e) => setDraftName(e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-'))}
-                  placeholder="my-mcp-server"
-                  className="font-mono text-base h-8 w-64"
-                  autoFocus
-                />
-              ) : (
-                <h1 className="typography-ui-header font-semibold truncate">{selectedMcpName}</h1>
-              )}
-              {isNewServer && (
-                <p className="typography-micro text-muted-foreground mt-0.5">
-                  Lowercase, numbers, hyphens and underscores only
-                </p>
+        {/* Header */}
+        <div className="mb-4">
+          <div className="min-w-0">
+            {isNewServer ? (
+              <h2 className="typography-ui-header font-semibold text-foreground truncate">New MCP Server</h2>
+            ) : (
+              <div className="flex items-center gap-2 min-w-0">
+                <h2 className="typography-ui-header font-semibold text-foreground truncate">{selectedMcpName}</h2>
+                <StatusBadge status={runtimeStatus?.status} enabled={enabled} />
+              </div>
+            )}
+            <div className="flex items-center gap-2 mt-0.5">
+              <p className="typography-meta text-muted-foreground truncate">
+                {isNewServer ? 'Configure a new MCP server' : `${mcpType === 'local' ? 'Local · stdio' : 'Remote · SSE'} transport`}
+              </p>
+              {!isNewServer && (
+                <ButtonSmall
+                  variant={isConnected ? 'outline' : 'default'}
+                  size="xs"
+                  className="!font-normal"
+                  onClick={handleToggleConnect}
+                  disabled={isConnecting || !enabled}
+                >
+                  {isConnecting ? 'Working...' : isConnected ? 'Disconnect' : 'Connect'}
+                </ButtonSmall>
               )}
             </div>
-
-            {isNewServer && (
-              <Select value={draftScope} onValueChange={(value) => setDraftScope(value as McpScope)}>
-                <SelectTrigger className="!h-8 w-auto gap-1.5">
-                  {draftScope === 'user' ? (
-                    <RiUser3Line className="h-4 w-4" />
-                  ) : (
-                    <RiFolderLine className="h-4 w-4" />
-                  )}
-                  <span className="capitalize">{draftScope}</span>
-                </SelectTrigger>
-                <SelectContent align="end">
-                  <SelectItem value="user" className="pr-2 [&>span:first-child]:hidden">
-                    <div className="flex flex-col gap-0.5">
-                      <div className="flex items-center gap-2">
-                        <RiUser3Line className="h-4 w-4" />
-                        <span>User</span>
-                      </div>
-                      <span className="typography-micro text-muted-foreground ml-6">Available in all projects</span>
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="project" className="pr-2 [&>span:first-child]:hidden">
-                    <div className="flex flex-col gap-0.5">
-                      <div className="flex items-center gap-2">
-                        <RiFolderLine className="h-4 w-4" />
-                        <span>Project</span>
-                      </div>
-                      <span className="typography-micro text-muted-foreground ml-6">Only in current project</span>
-                    </div>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            )}
-
-            {!isNewServer && (
-              <Button
-                size="sm"
-                variant={isConnected ? 'outline' : 'default'}
-                onClick={handleToggleConnect}
-                disabled={isConnecting || !enabled}
-                className="h-7 shrink-0"
-              >
-                {isConnecting ? 'Working…' : isConnected ? 'Disconnect' : 'Connect'}
-              </Button>
-            )}
           </div>
-
-          {/* Row 2: status + type badge + enabled toggle */}
-          <div className="flex items-center justify-between gap-3">
-            <div className="flex items-center gap-2">
-              <StatusBadge status={runtimeStatus?.status} enabled={enabled} />
-              <span className="typography-micro text-muted-foreground/40">·</span>
-              <span className="typography-micro text-muted-foreground bg-muted px-1.5 py-0.5 rounded border border-border/50">
-                {mcpType === 'local' ? 'stdio' : 'remote'}
-              </span>
-            </div>
-
-            {/* Enabled toggle */}
-            <div className="flex items-center gap-2">
-              <span className={cn('typography-micro', enabled ? 'text-foreground' : 'text-muted-foreground/60')}>
-                {enabled ? 'Enabled' : 'Disabled'}
-              </span>
-              <button
-                type="button"
-                role="switch"
-                aria-checked={enabled}
-                onClick={() => setEnabled(!enabled)}
-                className={cn(
-                  'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-                  enabled ? 'bg-primary' : 'bg-muted',
-                )}
-              >
-                <span className={cn(
-                  'pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform',
-                  enabled ? 'translate-x-4' : 'translate-x-0',
-                )} />
-              </button>
-            </div>
-          </div>
-
-          {/* Row 3: type selector — always visible so user can switch type */}
-          <div className="flex gap-1 pt-1 border-t border-[var(--interactive-border)]">
-              <ButtonSmall
-                variant={mcpType === 'local' ? 'default' : 'outline'}
-                onClick={() => setMcpType('local')}
-                className={cn(mcpType !== 'local' && 'text-foreground')}
-              >
-                Local · stdio
-              </ButtonSmall>
-              <ButtonSmall
-                variant={mcpType === 'remote' ? 'default' : 'outline'}
-                onClick={() => setMcpType('remote')}
-                className={cn(mcpType !== 'remote' && 'text-foreground')}
-              >
-                Remote · SSE
-              </ButtonSmall>
-            </div>
         </div>
 
-        {/* ── Connection ── */}
-        <div className="space-y-2">
-          {mcpType === 'local' ? (
-            <>
-              <label className="typography-ui-label font-medium text-foreground">
-                Command
-              </label>
+        {/* Server Identity */}
+        <div className="mb-8">
+          <div className="mb-1 px-1">
+            <h3 className="typography-ui-header font-medium text-foreground">Server</h3>
+          </div>
+
+          <section className="px-2 pb-2 pt-0 space-y-0">
+
+            {isNewServer && (
+              <div className="flex flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-8">
+                <div className="flex min-w-0 flex-col sm:w-56 shrink-0">
+                  <span className="typography-ui-label text-foreground">Server Name</span>
+                </div>
+                <div className="flex min-w-0 flex-1 items-center gap-2 sm:w-fit sm:flex-initial">
+                  <Input
+                    value={draftName}
+                    onChange={(e) => setDraftName(e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-'))}
+                    placeholder="my-mcp-server"
+                    className="h-7 w-48 font-mono px-2"
+                    autoFocus
+                  />
+                  <Select value={draftScope} onValueChange={(value) => setDraftScope(value as McpScope)}>
+                    <SelectTrigger className="!h-7 !w-7 !min-w-0 !px-0 !py-0 justify-center [&>svg:last-child]:hidden" title={draftScope === 'user' ? 'User scope' : 'Project scope'}>
+                      {draftScope === 'user' ? <RiUser3Line className="h-3.5 w-3.5" /> : <RiFolderLine className="h-3.5 w-3.5" />}
+                    </SelectTrigger>
+                    <SelectContent align="end">
+                      <SelectItem value="user">
+                        <div className="flex items-center gap-2">
+                          <RiUser3Line className="h-3.5 w-3.5" />
+                          <span>User</span>
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="project">
+                        <div className="flex items-center gap-2">
+                          <RiFolderLine className="h-3.5 w-3.5" />
+                          <span>Project</span>
+                        </div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            )}
+
+            <div
+              className="group flex cursor-pointer items-center gap-2 py-1.5"
+              role="button"
+              tabIndex={0}
+              aria-pressed={enabled}
+              onClick={() => setEnabled(!enabled)}
+              onKeyDown={(event) => {
+                if (event.key === ' ' || event.key === 'Enter') {
+                  event.preventDefault();
+                  setEnabled(!enabled);
+                }
+              }}
+            >
+              <Checkbox
+                checked={enabled}
+                onChange={setEnabled}
+                ariaLabel="Enable server"
+              />
+              <span className="typography-ui-label text-foreground">Enable Server</span>
+            </div>
+
+            <div className="pb-1.5 pt-0.5">
+              <div className="flex min-w-0 flex-col gap-1.5">
+                <span className="typography-ui-label text-foreground">Transport Mode</span>
+                <div className="flex flex-wrap items-center gap-1">
+                  <ButtonSmall
+                    variant="outline"
+                    size="xs"
+                    onClick={() => setMcpType('local')}
+                    className={cn(
+                      '!font-normal',
+                      mcpType === 'local'
+                        ? 'border-[var(--primary-base)] text-[var(--primary-base)] bg-[var(--primary-base)]/10 hover:text-[var(--primary-base)]'
+                        : 'text-foreground'
+                    )}
+                  >
+                    Local · stdio
+                  </ButtonSmall>
+                  <ButtonSmall
+                    variant="outline"
+                    size="xs"
+                    onClick={() => setMcpType('remote')}
+                    className={cn(
+                      '!font-normal',
+                      mcpType === 'remote'
+                        ? 'border-[var(--primary-base)] text-[var(--primary-base)] bg-[var(--primary-base)]/10 hover:text-[var(--primary-base)]'
+                        : 'text-foreground'
+                    )}
+                  >
+                    Remote · SSE
+                  </ButtonSmall>
+                </div>
+              </div>
+            </div>
+
+          </section>
+        </div>
+
+        {/* Connection */}
+        <div className="mb-8">
+          <div className="mb-1 px-1">
+            <h3 className="typography-ui-header font-medium text-foreground">
+              {mcpType === 'local' ? 'Command' : 'Server URL'}
+            </h3>
+          </div>
+
+          <section className="px-2 pb-2 pt-0">
+            {mcpType === 'local' ? (
               <CommandTextarea value={command} onChange={setCommand} />
-            </>
-          ) : (
-            <>
-              <label className="typography-ui-label font-medium text-foreground">
-                Server URL
-              </label>
+            ) : (
               <Input
                 value={url}
                 onChange={(e) => setUrl(e.target.value)}
                 placeholder="https://mcp.example.com/mcp"
                 className="font-mono typography-meta"
               />
-              <p className="typography-micro text-muted-foreground">
-                SSE endpoint URL of the remote MCP server
-              </p>
-            </>
-          )}
+            )}
+          </section>
         </div>
 
-        {/* ── Environment Variables ── */}
-        <div className="space-y-2">
-          <div className="flex items-baseline justify-between">
-            <label className="typography-ui-label font-medium text-foreground">
+        {/* Environment Variables */}
+        <div className="mb-2">
+          <div className="mb-1 px-1">
+            <h3 className="typography-ui-header font-medium text-foreground">
               Environment Variables
               {envEntries.length > 0 && (
                 <span className="ml-1.5 typography-micro text-muted-foreground font-normal">
                   ({envEntries.length})
                 </span>
               )}
-            </label>
+            </h3>
           </div>
-          <EnvEditor value={envEntries} onChange={setEnvEntries} />
+
+          <section className="px-2 pb-2 pt-0">
+            <EnvEditor value={envEntries} onChange={setEnvEntries} />
+          </section>
         </div>
 
-        {/* ── Actions ── */}
-        <div className="flex items-center justify-between border-t border-[var(--interactive-border)] pt-4 gap-4">
-          {!isNewServer ? (
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={() => setShowDeleteConfirm(true)}
-              className="h-7 gap-1.5 typography-meta text-destructive hover:text-destructive hover:bg-destructive/10"
-            >
-              <RiDeleteBinLine className="h-3.5 w-3.5" />
-              Delete
-            </Button>
-          ) : <div />}
-
-          <Button
-            size="sm"
+        {/* Actions */}
+        <div className="flex items-center gap-2 px-2 py-1">
+          <ButtonSmall
             onClick={handleSave}
             disabled={isSaving || (!isDirty && !isNewServer)}
-            className="h-7 gap-1.5 typography-meta"
+            size="xs"
+            className="!font-normal"
           >
-            <RiSaveLine className="h-3.5 w-3.5" />
-            {isSaving ? 'Saving…' : isNewServer ? 'Create' : 'Save changes'}
-          </Button>
+            {isSaving ? 'Saving...' : isNewServer ? 'Create' : 'Save Changes'}
+          </ButtonSmall>
+          {!isNewServer && (
+            <ButtonSmall
+              variant="ghost"
+              size="xs"
+              className="!font-normal text-[var(--status-error)] hover:text-[var(--status-error)]"
+              onClick={() => setShowDeleteConfirm(true)}
+            >
+              Delete
+            </ButtonSmall>
+          )}
         </div>
       </div>