From 7e48b7481360d33b5359764c602c01c735de7cab Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Tue, 6 May 2025 12:59:49 -0700
Subject: [PATCH] Put file editing behind an experiment (#98)

---
 src/components/preview_panel/FileEditor.tsx |  3 +++
 src/hooks/useSettings.ts                    |  1 +
 src/lib/schemas.ts                          |  1 +
 src/pages/settings.tsx                      | 29 +++++++++++++++++++--
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/preview_panel/FileEditor.tsx b/src/components/preview_panel/FileEditor.tsx
index 675fe44..b81fc13 100644
--- a/src/components/preview_panel/FileEditor.tsx
+++ b/src/components/preview_panel/FileEditor.tsx
@@ -5,6 +5,7 @@ import { useTheme } from "@/contexts/ThemeContext";
 import { ChevronRight, Circle } from "lucide-react";
 import "@/components/chat/monaco";
 import { IpcClient } from "@/ipc/ipc_client";
+import { useSettings } from "@/hooks/useSettings";
 
 interface FileEditorProps {
   appId: number | null;
@@ -54,6 +55,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({ path, hasUnsavedChanges }) => {
 export const FileEditor = ({ appId, filePath }: FileEditorProps) => {
   const { content, loading, error } = useLoadAppFile(appId, filePath);
   const { theme } = useTheme();
+  const { settings } = useSettings();
   const [value, setValue] = useState<string | undefined>(undefined);
   const [displayUnsavedChanges, setDisplayUnsavedChanges] = useState(false);
 
@@ -197,6 +199,7 @@ export const FileEditor = ({ appId, filePath }: FileEditorProps) => {
             fontFamily: "monospace",
             fontSize: 13,
             lineNumbers: "on",
+            readOnly: !settings?.experiments?.enableFileEditing,
           }}
         />
       </div>
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index e82d16f..1571705 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -101,6 +101,7 @@ export function useSettings() {
     loading,
     error,
     updateSettings,
+
     isProviderSetup,
     isAnyProviderSetup: () => {
       // Technically we should check for ollama and lmstudio being setup, but
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index 9e16bec..21d56f2 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -98,6 +98,7 @@ export type Supabase = z.infer<typeof SupabaseSchema>;
 export const ExperimentsSchema = z.object({
   // Deprecated
   enableSupabaseIntegration: z.boolean().describe("DEPRECATED").optional(),
+  enableFileEditing: z.boolean().optional(),
 });
 export type Experiments = z.infer<typeof ExperimentsSchema>;
 
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 3163137..4fd25cb 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -13,13 +13,14 @@ import { ArrowLeft } from "lucide-react";
 import { useRouter } from "@tanstack/react-router";
 import { GitHubIntegration } from "@/components/GitHubIntegration";
 import { SupabaseIntegration } from "@/components/SupabaseIntegration";
+import { Switch } from "@/components/ui/switch";
 
 export default function SettingsPage() {
   const { theme, setTheme } = useTheme();
   const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
   const [isResetting, setIsResetting] = useState(false);
   const appVersion = useAppVersion();
-  const { settings } = useSettings();
+  const { settings, updateSettings } = useSettings();
   const router = useRouter();
 
   const handleResetEverything = async () => {
@@ -153,7 +154,31 @@ export default function SettingsPage() {
               Experiments
             </h2>
             <div className="space-y-4">
-              There are no experiments currently available.
+              {/* Enable File Editing Experiment */}
+              <div className="flex items-center justify-between">
+                <label
+                  htmlFor="enable-file-editing"
+                  className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                >
+                  Enable File Editing
+                </label>
+                <Switch
+                  id="enable-file-editing"
+                  checked={!!settings?.experiments?.enableFileEditing}
+                  onCheckedChange={(checked) => {
+                    updateSettings({
+                      experiments: {
+                        ...settings?.experiments,
+                        enableFileEditing: checked,
+                      },
+                    });
+                  }}
+                />
+              </div>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                File editing is not reliable and requires you to manually commit
+                changes and update Supabase edge functions.
+              </p>
             </div>
           </div>