fix(app): move project icon toggle to experimental settings

packages/app/e2e/regression/settings-project-icon.spec.ts

@@ -0,0 +1,47 @@
+import { expect, test } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+test.use({ viewport: { width: 1280, height: 720 }, contextOptions: { reducedMotion: "reduce" } })
+
+test("project icon is configured in Experimental and persists across reloads", async ({ page }) => {
+  const directory = "/tmp/settings-project-icon"
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: "proj_settings_project_icon",
+      canonical: directory,
+      name: "Settings project icon",
+      vcs: "git",
+      time: { created: 1700000000000, updated: 1700000000000 },
+    },
+    provider: { all: [], connected: [], default: {} },
+    sessions: [],
+    pageMessages: () => ({ items: [] }),
+  })
+  await page.goto("/")
+  await page.getByRole("button", { name: "Settings", exact: true }).click()
+  const settings = page.getByTestId("settings-screen")
+  await expect(settings).toBeFocused()
+  await expect(settings.getByRole("tab", { name: "Preferences", exact: true })).toHaveAttribute("aria-selected", "true")
+  await expect(settings.locator('[data-action="settings-show-project-icon"]')).toHaveCount(0)
+
+  await settings.getByRole("tab", { name: "Experimental", exact: true }).click()
+  const toggle = settings.getByRole("switch", { name: "Project icon", exact: true })
+  await expect(toggle).not.toBeChecked()
+  await settings.locator('[data-action="settings-show-project-icon"] [data-slot="switch-control"]').click()
+  await expect(toggle).toBeChecked()
+  await expect(toggle).toBeFocused()
+
+  await page.reload()
+  await expect(settings).toBeFocused()
+  await settings.getByRole("tab", { name: "Experimental", exact: true }).click()
+  await expect(toggle).toBeChecked()
+  await toggle.press("Space")
+  await expect(toggle).not.toBeChecked()
+  await expect(toggle).toBeFocused()
+
+  await settings.getByRole("tab", { name: "Preferences", exact: true }).click()
+  await expect(settings.locator('[data-action="settings-show-project-icon"]')).toHaveCount(0)
+  await settings.getByRole("tab", { name: "Experimental", exact: true }).click()
+  await expect(toggle).not.toBeChecked()
+})

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

@@ -1,4 +1,4 @@
-import { Component } from "solid-js"
+import { Component, Show } from "solid-js"
 import { Select } from "@opencode-ai/ui/select"
 import { Switch } from "@opencode-ai/ui/switch"
 import { useLanguage } from "@/runtime/i18n/language"
@@ -61,6 +61,22 @@ export const SettingsExperimental: Component = () => {
                 </Switch>
               </div>
             </SettingsRow>
+            <Show when={import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
+              <SettingsRow
+                title={language.t("settings.general.row.showProjectIcon.title")}
+                description={language.t("settings.general.row.showProjectIcon.description")}
+              >
+                <div data-action="settings-show-project-icon">
+                  <Switch
+                    checked={settings.general.showProjectIcon()}
+                    onChange={settings.general.setShowProjectIcon}
+                    hideLabel
+                  >
+                    {language.t("settings.general.row.showProjectIcon.title")}
+                  </Switch>
+                </div>
+              </SettingsRow>
+            </Show>
           </SettingsList>
         </div>
       </div>

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

@@ -348,20 +348,6 @@ export const SettingsGeneral: Component<{
           </div>
         </SettingsRow>
 
-        <Show when={import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
-          <SettingsRow
-            title={language.t("settings.general.row.showProjectIcon.title")}
-            description={language.t("settings.general.row.showProjectIcon.description")}
-          >
-            <div data-action="settings-show-project-icon">
-              <Switch
-                checked={settings.general.showProjectIcon()}
-                onChange={(checked) => settings.general.setShowProjectIcon(checked)}
-              />
-            </div>
-          </SettingsRow>
-        </Show>
-
         <Show when={mobile() && import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
           <SettingsRow
             title={language.t("settings.general.row.mobileTitlebarBottom.title")}