feat(app): move tab layout to general settings

packages/app/e2e/regression/tab-navigate-mousedown.spec.ts

@@ -432,7 +432,7 @@ for (const profile of [
   })
 }
 
-test("dedicated experimental settings control vertical tab details", async ({ page }) => {
+test("general settings control vertical tab details", async ({ page }) => {
   await mockServer(page)
   await page.addInitScript(
     ({ server, sessionA }) => {
@@ -452,12 +452,9 @@ test("dedicated experimental settings control vertical tab details", async ({ pa
   await expect(settings).toBeVisible()
   await expect(settings.getByRole("tablist").getByText("OpenCode Desktop", { exact: true })).toHaveCount(0)
   await expect(settings.getByRole("tablist").getByText(/^v\d+\./)).toHaveCount(0)
-  await settings.getByRole("tab", { name: "Appearance" }).click()
-  await expect(settings.getByRole("heading", { name: "Appearance", exact: true })).toBeVisible()
-  await expect(settings.locator('[data-action="settings-tab-layout"]')).toHaveCount(0)
+  await settings.getByRole("tab", { name: "Preferences" }).click()
+  await expect(settings.getByRole("heading", { name: "Preferences", exact: true })).toBeVisible()
   await expect(settings.getByRole("switch", { name: "Show project names", exact: true })).toHaveCount(0)
-  await settings.getByRole("tab", { name: "Experimental", exact: true }).click()
-  await expect(settings.getByRole("heading", { name: "Experimental", level: 2, exact: true })).toBeVisible()
 
   const layout = settings.locator('[data-action="settings-tab-layout"]')
   await expect(layout).toContainText("Horizontal")
@@ -469,6 +466,8 @@ test("dedicated experimental settings control vertical tab details", async ({ pa
   await expect(page.locator('[data-slot="titlebar-tabs"]')).toHaveCount(0)
   const projectNames = page.locator('[data-slot="vertical-tabs-sidebar"] [data-slot="tab-project"]')
   await expect(projectNames).toHaveCount(0)
+  await settings.getByRole("tab", { name: "Experimental", exact: true }).click()
+  await expect(settings.getByRole("heading", { name: "Experimental", level: 2, exact: true })).toBeVisible()
   const projectNameSwitch = settings.getByRole("switch", { name: "Show project names", exact: true })
   await settings.locator('[data-action="settings-show-project-name"] [data-slot="switch-control"]').click()
   await expect(projectNameSwitch).toBeChecked()

packages/app/src/settings/experimental/experimental.tsx

@@ -1,5 +1,4 @@
 import { Component, Show } from "solid-js"
-import { Select } from "@opencode/ui/select"
 import { Switch } from "@opencode/ui/switch"
 import { useLanguage } from "@/runtime/i18n/language"
 import { usePlatform } from "@/runtime/platform/platform"
@@ -8,8 +7,6 @@ import { useSettings } from "@/settings/model"
 import { SettingsRow } from "@/settings/row"
 import "@/settings/settings.css"
 
-const tabLayoutOptions: ("horizontal" | "vertical")[] = ["horizontal", "vertical"]
-
 export const SettingsExperimental: Component = () => {
   const language = useLanguage()
   const settings = useSettings()
@@ -31,24 +28,6 @@ export const SettingsExperimental: Component = () => {
       <div class="settings-tab-body">
         <div class="settings-section">
           <SettingsList>
-            <SettingsRow
-              title={language.t("settings.appearance.row.tabs.title")}
-              description={language.t("settings.appearance.row.tabs.description")}
-            >
-              <Select
-                data-action="settings-tab-layout"
-                options={tabLayoutOptions}
-                current={tabLayoutOptions.find((option) => option === settings.appearance.tabLayout())}
-                placement="bottom-end"
-                gutter={6}
-                label={(option) =>
-                  option === "horizontal"
-                    ? language.t("settings.appearance.row.tabs.horizontal")
-                    : language.t("settings.appearance.row.tabs.vertical")
-                }
-                onSelect={(option) => option && settings.appearance.setTabLayout(option)}
-              />
-            </SettingsRow>
             <Show when={platform.browserPane}>
               <SettingsRow
                 title={language.t("settings.general.row.browserPane.title")}

packages/app/src/settings/general/general.tsx

@@ -27,6 +27,7 @@ import {
 import "@/settings/settings.css"
 
 const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
+const tabLayoutOptions: ("horizontal" | "vertical")[] = ["horizontal", "vertical"]
 const fontSettings = {
   ui: {
     action: "settings-ui-font",
@@ -294,6 +295,31 @@ const LanguageSetting = () => {
   )
 }
 
+const TabLayoutSetting = () => {
+  const language = useLanguage()
+  const settings = useSettings()
+  return (
+    <SettingsRow
+      title={language.t("settings.appearance.row.tabs.title")}
+      description={language.t("settings.appearance.row.tabs.description")}
+    >
+      <Select
+        data-action="settings-tab-layout"
+        options={tabLayoutOptions}
+        current={tabLayoutOptions.find((option) => option === settings.appearance.tabLayout())}
+        placement="bottom-end"
+        gutter={6}
+        label={(option) =>
+          option === "horizontal"
+            ? language.t("settings.appearance.row.tabs.horizontal")
+            : language.t("settings.appearance.row.tabs.vertical")
+        }
+        onSelect={(option) => option && settings.appearance.setTabLayout(option)}
+      />
+    </SettingsRow>
+  )
+}
+
 export const SettingsGeneral: Component = () => {
   const language = useLanguage()
   const platform = usePlatform()
@@ -320,6 +346,7 @@ export const SettingsGeneral: Component = () => {
       <h3 class="settings-section-title">{language.t("settings.general.section.general")}</h3>
       <SettingsList>
         <LanguageSetting />
+        <TabLayoutSetting />
 
         <WorkspaceDestinationSetting />
         <AutoApprovePermissionsSetting />

packages/app/src/settings/search-catalog.ts

@@ -23,6 +23,12 @@ export const clientSettings: Entry<SettingsRootTab>[] = [
   { tab: "experimental", label: "settings.tab.experimental" },
   { tab: "about", label: "settings.tab.about", keywords: "version license credits" },
   { tab: "general", label: "settings.general.row.language.title", target: "settings-language" },
+  {
+    tab: "general",
+    label: "settings.appearance.row.tabs.title",
+    target: "settings-tab-layout",
+    keywords: "vertical horizontal tabs",
+  },
   {
     tab: "general",
     label: "settings.workspaces.default.title",
@@ -172,12 +178,6 @@ export const clientSettings: Entry<SettingsRootTab>[] = [
     target: "settings-experimental-browser",
     available: "browser",
   },
-  {
-    tab: "experimental",
-    label: "settings.appearance.row.tabs.title",
-    target: "settings-tab-layout",
-    keywords: "vertical horizontal tabs",
-  },
   { tab: "experimental", label: "settings.appearance.row.projectName.title", target: "settings-show-project-name" },
   {
     tab: "experimental",

packages/app/src/settings/search-results.test.ts

@@ -73,6 +73,7 @@ describe("settings search index", () => {
         .map((item) => item.page),
     ).toEqual(["Desktop notifications", "Sound effects"])
     expect(rankSettings("terminal placement", items, root)[0].page).toBe("Preferences / General")
+    expect(rankSettings("vertical tabs", items, root)[0].page).toBe("Preferences / General")
     expect(items.some((item) => item.view.target === "settings-project-startup")).toBe(false)
   })