Tweak workspace settings dialog and Markdown editor

src-web/components/CreateWorkspaceDialog.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import {createWorkspace} from "../lib/commands";
+import { createWorkspace } from '../lib/commands';
 import { Button } from './core/Button';
 import { PlainInput } from './core/PlainInput';
 import { VStack } from './core/Stacks';
-import { MarkdownEditor } from './MarkdownEditor';
-import { SelectFile } from './SelectFile';
+import type { SyncToFilesystemSettingProps } from './SyncToFilesystemSetting';
+import { SyncToFilesystemSetting } from './SyncToFilesystemSetting';
 
 interface Props {
   hide: () => void;
@@ -12,8 +12,9 @@ interface Props {
 
 export function CreateWorkspaceDialog({ hide }: Props) {
   const [name, setName] = useState<string>('');
-  const [description, setDescription] = useState<string>('');
-  const [settingSyncDir, setSettingSyncDir] = useState<string | null>(null);
+  const [settingSyncDir, setSettingSyncDir] = useState<
+    Parameters<SyncToFilesystemSettingProps['onChange']>[0]
+  >({ value: null, enabled: false });
 
   return (
     <VStack
@@ -23,31 +24,23 @@ export function CreateWorkspaceDialog({ hide }: Props) {
       className="pb-3 max-h-[50vh]"
       onSubmit={async (e) => {
         e.preventDefault();
-        await createWorkspace.mutateAsync({ name, description, settingSyncDir });
+        const { enabled, value } = settingSyncDir ?? {};
+        if (enabled && !value) return;
+        await createWorkspace.mutateAsync({ name, settingSyncDir: value });
         hide();
       }}
     >
       <PlainInput require label="Workspace Name" defaultValue={name} onChange={setName} />
 
-      <MarkdownEditor
-        name="workspace-description"
-        placeholder="Workspace description"
-        className="min-h-[10rem] max-h-[25rem] border border-border px-2"
-        defaultValue={description}
-        stateKey={null}
-        onChange={setDescription}
-        heightMode="auto"
-      />
-
-      <div>
-        <SelectFile
-          directory
-          noun="Sync Directory"
-          filePath={settingSyncDir}
-          onChange={({ filePath }) => setSettingSyncDir(filePath)}
-        />
-      </div>
-      <Button type="submit" color="primary" className="ml-auto">Create Workspace</Button>
+      <SyncToFilesystemSetting onChange={setSettingSyncDir} value={settingSyncDir.value} />
+      <Button
+        type="submit"
+        color="primary"
+        className="ml-auto mt-3"
+        disabled={settingSyncDir.enabled && !settingSyncDir.value}
+      >
+        Create Workspace
+      </Button>
     </VStack>
   );
 }