Add cookie editing and inherited request settings

apps/yaak-client/components/SyncToFilesystemSetting.tsx

@@ -4,20 +4,79 @@ import { useState } from "react";
 import { openWorkspaceFromSyncDir } from "../commands/openWorkspaceFromSyncDir";
 import { Button } from "./core/Button";
 import { Checkbox } from "./core/Checkbox";
+import { SettingRowBoolean, SettingRowDirectory } from "./core/SettingRow";
 import { SelectFile } from "./SelectFile";
 
 export interface SyncToFilesystemSettingProps {
+  layout?: "form" | "settings";
   onChange: (args: { filePath: string | null; initGit?: boolean }) => void;
   onCreateNewWorkspace: () => void;
   value: { filePath: string | null; initGit?: boolean };
 }
 
 export function SyncToFilesystemSetting({
+  layout = "form",
   onChange,
   onCreateNewWorkspace,
   value,
 }: SyncToFilesystemSettingProps) {
   const [syncDir, setSyncDir] = useState<string | null>(null);
+
+  const handleFilePathChange = async (filePath: string | null) => {
+    if (filePath != null) {
+      const files = await readDir(filePath);
+      if (files.length > 0) {
+        setSyncDir(filePath);
+        return;
+      }
+    }
+
+    setSyncDir(null);
+    onChange({ ...value, filePath });
+  };
+
+  if (layout === "settings") {
+    return (
+      <VStack className="w-full" space={0}>
+        {syncDir && (
+          <Banner color="notice" className="mb-3 flex flex-col gap-1.5">
+            <p>Directory is not empty. Do you want to open it instead?</p>
+            <div>
+              <Button
+                variant="border"
+                color="notice"
+                size="xs"
+                type="button"
+                onClick={() => {
+                  openWorkspaceFromSyncDir.mutate(syncDir);
+                  onCreateNewWorkspace();
+                }}
+              >
+                Open Workspace
+              </Button>
+            </div>
+          </Banner>
+        )}
+
+        <SettingRowDirectory
+          title="Local directory sync"
+          description="Sync data to a folder for backup and Git integration."
+          filePath={value.filePath}
+          onChange={handleFilePathChange}
+        />
+
+        {value.filePath && typeof value.initGit === "boolean" && (
+          <SettingRowBoolean
+            checked={value.initGit}
+            title="Initialize Git Repo"
+            description="Create a Git repository in the selected sync directory."
+            onChange={(initGit) => onChange({ ...value, initGit })}
+          />
+        )}
+      </VStack>
+    );
+  }
+
   return (
     <VStack className="w-full my-2" space={3}>
       {syncDir && (
@@ -47,18 +106,7 @@ export function SyncToFilesystemSetting({
         noun="Directory"
         help="Sync data to a folder for backup and Git integration."
         filePath={value.filePath}
-        onChange={async ({ filePath }) => {
-          if (filePath != null) {
-            const files = await readDir(filePath);
-            if (files.length > 0) {
-              setSyncDir(filePath);
-              return;
-            }
-          }
-
-          setSyncDir(null);
-          onChange({ ...value, filePath });
-        }}
+        onChange={async ({ filePath }) => handleFilePathChange(filePath)}
       />
 
       {value.filePath && typeof value.initGit === "boolean" && (