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/shared/SettingsSidebarLayout.tsx

@@ -12,6 +12,8 @@ interface SettingsSidebarLayoutProps {
   children: React.ReactNode;
   /** Additional className for the outer container */
   className?: string;
+  /** Background style for the sidebar container */
+  variant?: 'sidebar' | 'background';
 }
 
 /**
@@ -32,13 +34,50 @@ export const SettingsSidebarLayout: React.FC<SettingsSidebarLayoutProps> = ({
   footer,
   children,
   className,
+  variant = 'sidebar',
 }) => {
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
 
-  // Desktop app: transparent for blur effect
-  // VS Code: bg-background (same as page content)
-  // Web/mobile: bg-sidebar
-  const bgClass = isVSCode ? 'bg-background' : 'bg-sidebar';
+  const scrollRef = React.useRef<HTMLElement | null>(null);
+  const [showTopShadow, setShowTopShadow] = React.useState(false);
+  const [showBottomShadow, setShowBottomShadow] = React.useState(false);
+
+  const bgClass = variant === 'background'
+    ? 'bg-background'
+    : (isVSCode ? 'bg-background' : 'bg-sidebar');
+
+  const bgVar = bgClass === 'bg-background'
+    ? 'var(--surface-background)'
+    : 'var(--surface-muted)';
+  
+  const updateScrollShadows = React.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) {
+      setShowTopShadow(false);
+      setShowBottomShadow(false);
+      return;
+    }
+    const canScroll = el.scrollHeight > el.clientHeight + 1;
+    if (!canScroll) {
+      setShowTopShadow(false);
+      setShowBottomShadow(false);
+      return;
+    }
+    setShowTopShadow(el.scrollTop > 1);
+    setShowBottomShadow(el.scrollTop + el.clientHeight < el.scrollHeight - 1);
+  }, []);
+
+  React.useEffect(() => {
+    updateScrollShadows();
+  }, [children, updateScrollShadows]);
+
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => updateScrollShadows();
+    el.addEventListener('scroll', onScroll, { passive: true });
+    return () => el.removeEventListener('scroll', onScroll);
+  }, [updateScrollShadows]);
 
   return (
     <div
@@ -50,12 +89,28 @@ export const SettingsSidebarLayout: React.FC<SettingsSidebarLayoutProps> = ({
     >
       {header}
 
-      <ScrollableOverlay
-        outerClassName="flex-1 min-h-0"
-        className="space-y-1 px-3 py-2 overflow-x-hidden"
-      >
-        {children}
-      </ScrollableOverlay>
+      <div className="relative flex flex-1 min-h-0 flex-col">
+        <ScrollableOverlay
+          ref={scrollRef as unknown as React.Ref<HTMLElement>}
+          outerClassName="flex-1 min-h-0"
+          className="space-y-0.5 px-3 py-2 overflow-x-hidden"
+        >
+          {children}
+        </ScrollableOverlay>
+
+        {showTopShadow && (
+          <div
+            className="pointer-events-none absolute inset-x-0 top-0 h-4"
+            style={{ background: `linear-gradient(to bottom, ${bgVar} 0%, transparent 100%)` }}
+          />
+        )}
+        {showBottomShadow && (
+          <div
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-6"
+            style={{ background: `linear-gradient(to top, ${bgVar} 0%, transparent 100%)` }}
+          />
+        )}
+      </div>
 
       {footer}
     </div>