Tweak workspace settings dialog and Markdown editor

src-web/components/SyncToFilesystemSetting.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Checkbox } from './core/Checkbox';
+import { VStack } from './core/Stacks';
+import { SelectFile } from './SelectFile';
+
+export interface SyncToFilesystemSettingProps {
+  onChange: (args: { value: string | null; enabled: boolean }) => void;
+  value: string | null;
+}
+
+export function SyncToFilesystemSetting({ onChange, value }: SyncToFilesystemSettingProps) {
+  const [useSyncDir, setUseSyncDir] = useState<boolean>(!!value);
+
+  return (
+    <VStack space={1.5} className="w-full">
+      <Checkbox
+        checked={useSyncDir}
+        onChange={(enabled) => {
+          setUseSyncDir(enabled);
+          if (!enabled) {
+            // Set value to null when disabling
+            onChange({ value: null, enabled });
+          } else {
+            onChange({ value, enabled });
+          }
+        }}
+        title="Sync to a filesystem directory"
+      />
+      {useSyncDir && (
+        <>
+          <SelectFile
+            directory
+            size="xs"
+            noun="Directory"
+            filePath={value}
+            onChange={({ filePath }) => {
+              if (filePath == null) setUseSyncDir(false);
+              onChange({ value: filePath, enabled: useSyncDir });
+            }}
+          />
+        </>
+      )}
+    </VStack>
+  );
+}