Convert Settings tabs to a left sidebar, fix two latent Tabs bugs

Switched Settings' tab bar from horizontal-at-top to a vertical sidebar
(orientation="vertical"), which surfaced two real bugs in the
previously-unused ui/tabs.tsx component - nobody had wired it into the
app until now, so neither had ever been exercised:

1. The component's orientation-conditional classes
   (group-data-vertical/tabs:flex-col etc.) depend on Tailwind variants
   named `data-vertical`/`data-horizontal`, but this project's Tailwind
   v4 config never defined them - only `dark` was registered as a
   custom variant. Without them, those classes silently matched
   nothing, so "vertical" orientation looked identical to horizontal.
   Fixed by adding the two missing @custom-variant rules to index.css,
   mapping them to [data-orientation=vertical/horizontal].

2. Switching tabs left both the outgoing and incoming panel visible at
   once. Base UI's Tabs.Panel marks the outgoing panel `inert` and
   keeps it mounted to support an exit transition, but the component
   shipped no CSS to actually hide it once no transition is defined -
   so it just sat there, fully visible, forever. Fixed by hiding any
   panel carrying the `inert` attribute.

Verified end-to-end in a live browser session (with window.api mocked
in place of the Electron bridge, since Settings only renders inside
Electron): confirmed the sidebar actually stacks vertically via
computed flex-direction, and clicked through all 6 tabs confirming
each one's content is fully isolated with no bleed-through.

Author: voidstackloop

frontend/src/components/ui/tabs.tsx

@@ -71,7 +71,11 @@ function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
     <TabsPrimitive.Panel
       data-slot="tabs-content"
-      className={cn("flex-1 text-sm outline-none", className)}
+      // The outgoing panel during a tab switch is marked `inert` (and stays
+      // mounted) rather than removed outright, since base-ui's Panel is
+      // built to support an exit transition — without one defined here, it
+      // would otherwise sit fully visible on top of the incoming panel.
+      className={cn("flex-1 text-sm outline-none [&[inert]]:hidden", className)}
       {...props}
     />
   )

frontend/src/index.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
+@custom-variant data-vertical (&[data-orientation="vertical"]);
+@custom-variant data-horizontal (&[data-orientation="horizontal"]);
 
 :root {
   --radius: 0.625rem;

frontend/src/pages/Settings.tsx

@@ -581,14 +581,19 @@ export default function Settings() {
 
     return (
         <ScrollArea className="h-full">
-            <div className="mx-auto max-w-2xl p-6 pb-16 2xl:max-w-3xl">
+            <div className="mx-auto max-w-4xl p-6 pb-16 2xl:max-w-5xl">
                 <div className="mb-6 flex items-center gap-2">
                     <Settings2 className="size-5 text-muted-foreground" />
                     <h1 className="text-lg font-semibold tracking-tight">{t.settings}</h1>
                 </div>
 
-                <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as SettingsTab)}>
-                    <TabsList className="mb-6 h-auto flex-wrap">
+                <Tabs
+                    value={activeTab}
+                    onValueChange={(v) => setActiveTab(v as SettingsTab)}
+                    orientation="vertical"
+                    className="items-start gap-8"
+                >
+                    <TabsList variant="line" className="w-48 shrink-0">
                         <TabsTrigger value="general">{t.settingsTabGeneral}</TabsTrigger>
                         <TabsTrigger value="models">{t.settingsTabModels}</TabsTrigger>
                         <TabsTrigger value="integrations">{t.settingsTabIntegrations}</TabsTrigger>
@@ -597,7 +602,7 @@ export default function Settings() {
                         <TabsTrigger value="data">{t.settingsTabData}</TabsTrigger>
                     </TabsList>
 
-                    <TabsContent value="general" className="flex flex-col gap-8">
+                    <TabsContent value="general" className="min-w-0 flex-1 flex flex-col gap-8">
                     <div>
                         <SettingsSection title={t.ollamaServer}>
                             <SettingsRow
@@ -780,7 +785,7 @@ export default function Settings() {
                     </div>
                     </TabsContent>
 
-                    <TabsContent value="models" className="flex flex-col gap-8">
+                    <TabsContent value="models" className="min-w-0 flex-1 flex flex-col gap-8">
                     <div>
                         {specs && (
                             <SettingsSection title={t.yourSystem}>
@@ -1047,7 +1052,7 @@ export default function Settings() {
                     </div>
                     </TabsContent>
 
-                    <TabsContent value="integrations" className="flex flex-col gap-8">
+                    <TabsContent value="integrations" className="min-w-0 flex-1 flex flex-col gap-8">
                     <div>
                         <SettingsSection title={t.cloudProviders} description={t.keysEncryptedNote}>
                             <SettingsRow label="ChatGPT (OpenAI)" stacked>
@@ -1242,7 +1247,7 @@ export default function Settings() {
                     </div>
                     </TabsContent>
 
-                    <TabsContent value="voice" className="flex flex-col gap-8">
+                    <TabsContent value="voice" className="min-w-0 flex-1 flex flex-col gap-8">
                     <div>
                         {settings && (
                             <SettingsSection title={t.ttsSection}>
@@ -1297,7 +1302,7 @@ export default function Settings() {
                     </div>
                     </TabsContent>
 
-                    <TabsContent value="chat" className="flex flex-col gap-8">
+                    <TabsContent value="chat" className="min-w-0 flex-1 flex flex-col gap-8">
                     <div>
                         {settings && (
                             <>
@@ -1622,7 +1627,7 @@ export default function Settings() {
                     </div>
                     </TabsContent>
 
-                    <TabsContent value="data" className="flex flex-col gap-8">
+                    <TabsContent value="data" className="min-w-0 flex-1 flex flex-col gap-8">
                     <div>
                         <SettingsSection title={t.dataManagement}>
                             <SettingsRow label={t.exportAllConversations} description={t.exportAllDescription}>