Filesystem Sync (#142)

src-web/components/CreateWorkspaceDialog.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { useCommands } from '../hooks/useCommands';
+import { Button } from './core/Button';
+import { PlainInput } from './core/PlainInput';
+import { VStack } from './core/Stacks';
+import { MarkdownEditor } from './MarkdownEditor';
+import { SelectFile } from './SelectFile';
+
+interface Props {
+  hide: () => void;
+}
+
+export function CreateWorkspaceDialog({ hide }: Props) {
+  const [name, setName] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+  const [settingSyncDir, setSettingSyncDir] = useState<string | null>(null);
+  const { createWorkspace } = useCommands();
+
+  return (
+    <VStack
+      as="form"
+      space={3}
+      alignItems="start"
+      className="pb-3 max-h-[50vh]"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        await createWorkspace.mutateAsync({ name, description, settingSyncDir });
+        hide();
+      }}
+    >
+      <PlainInput 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">Create Workspace</Button>
+    </VStack>
+  );
+}