Add setting to disable auto-expand of preview panel (#2352)

src/__tests__/readSettings.test.ts

@@ -53,6 +53,7 @@ describe("readSettings", () => {
       );
       expect(scrubSettings(result)).toMatchInlineSnapshot(`
         {
+          "autoExpandPreviewPanel": true,
           "enableAutoFixProblems": false,
           "enableAutoUpdate": true,
           "enableNativeGit": true,
@@ -308,6 +309,7 @@ describe("readSettings", () => {
 
       expect(scrubSettings(result)).toMatchInlineSnapshot(`
         {
+          "autoExpandPreviewPanel": true,
           "enableAutoFixProblems": false,
           "enableAutoUpdate": true,
           "enableNativeGit": true,

src/components/AutoExpandPreviewSwitch.tsx

+import { useSettings } from "@/hooks/useSettings";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+export function AutoExpandPreviewSwitch() {
+  const { settings, updateSettings } = useSettings();
+  const isEnabled = settings?.autoExpandPreviewPanel;
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        id="auto-expand-preview"
+        checked={isEnabled}
+        onCheckedChange={(checked) => {
+          updateSettings({
+            autoExpandPreviewPanel: checked,
+          });
+        }}
+      />
+      <Label htmlFor="auto-expand-preview">Auto-expand preview panel</Label>
+    </div>
+  );
+}

src/components/chat/ChatInput.tsx

@@ -256,7 +256,9 @@ export function ChatInput({ chatId }: { chatId?: number }) {
       setError((err as Error)?.message || "An error occurred while approving");
     } finally {
       setIsApproving(false);
+      if (settings?.autoExpandPreviewPanel) {
         setIsPreviewOpen(true);
+      }
       refreshVersions();
       if (settings?.enableAutoFixProblems) {
         checkProblems();

src/hooks/useStreamChat.ts

@@ -176,7 +176,9 @@ export function useStreamChat({
               pendingStreamChatIds.delete(chatId);
 
               if (response.updatedFiles) {
+                if (settings?.autoExpandPreviewPanel) {
                   setIsPreviewOpen(true);
+                }
                 refreshAppIframe();
                 if (settings?.enableAutoFixProblems) {
                   checkProblems();

src/lib/schemas.ts

@@ -302,6 +302,7 @@ export const UserSettingsSchema = z
     previewDeviceMode: DeviceModeSchema.optional(),
 
     enableAutoFixProblems: z.boolean().optional(),
+    autoExpandPreviewPanel: z.boolean().optional(),
     enableNativeGit: z.boolean().optional(),
     enableAutoUpdate: z.boolean(),
     releaseChannel: ReleaseChannelSchema,

src/main/settings.ts

@@ -40,6 +40,7 @@ const DEFAULT_SETTINGS: UserSettings = {
   lastKnownPerformance: undefined,
   // Enabled by default in 0.33.0-beta.1
   enableNativeGit: true,
+  autoExpandPreviewPanel: true,
 };
 
 const SETTINGS_FILE = "user-settings.json";

src/pages/settings.tsx

@@ -20,6 +20,7 @@ import { SupabaseIntegration } from "@/components/SupabaseIntegration";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { AutoFixProblemsSwitch } from "@/components/AutoFixProblemsSwitch";
+import { AutoExpandPreviewSwitch } from "@/components/AutoExpandPreviewSwitch";
 import { AutoUpdateSwitch } from "@/components/AutoUpdateSwitch";
 import { ReleaseChannelSelector } from "@/components/ReleaseChannelSelector";
 import { NeonIntegration } from "@/components/NeonIntegration";
@@ -329,6 +330,13 @@ export function WorkflowSettings() {
           This will automatically fix TypeScript errors.
         </div>
       </div>
+
+      <div className="space-y-1 mt-4">
+        <AutoExpandPreviewSwitch />
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          Automatically expand the preview panel when code changes are made.
+        </div>
+      </div>
     </div>
   );
 }