[WIP] Encryption for secure values (#183)

src-web/components/WorkspaceSettingsDialog.tsx

@@ -5,23 +5,21 @@ import { router } from '../lib/router';
 import { Banner } from './core/Banner';
 import { Button } from './core/Button';
 import { InlineCode } from './core/InlineCode';
-import { Input } from './core/Input';
+import { PlainInput } from './core/PlainInput';
 import { Separator } from './core/Separator';
 import { VStack } from './core/Stacks';
 import { MarkdownEditor } from './MarkdownEditor';
 import { SyncToFilesystemSetting } from './SyncToFilesystemSetting';
+import { WorkspaceEncryptionSetting } from './WorkspaceEncryptionSetting';
 
 interface Props {
   workspaceId: string | null;
   hide: () => void;
-  openSyncMenu?: boolean;
 }
 
-export function WorkspaceSettingsDialog({ workspaceId, hide, openSyncMenu }: Props) {
+export function WorkspaceSettingsDialog({ workspaceId, hide }: Props) {
   const workspace = useAtomValue(workspacesAtom).find((w) => w.id === workspaceId);
-  const workspaceMeta = useAtomValue(workspaceMetasAtom).find(
-    (wm) => wm.workspaceId === workspaceId,
-  );
+  const workspaceMeta = useAtomValue(workspaceMetasAtom).find((m) => m.workspaceId === workspaceId);
 
   if (workspace == null) {
     return (
@@ -39,48 +37,50 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, openSyncMenu }: Pro
     );
 
   return (
-    <VStack space={3} alignItems="start" className="pb-3 h-full">
-      <Input
+    <VStack space={4} alignItems="start" className="pb-3 h-full">
+      <PlainInput
         required
+        hideLabel
+        placeholder="Workspace Name"
         label="Name"
         defaultValue={workspace.name}
+        className="!text-base font-sans"
         onChange={(name) => patchModel(workspace, { name })}
-        stateKey={`name.${workspace.id}`}
       />
 
       <MarkdownEditor
         name="workspace-description"
         placeholder="Workspace description"
-        className="min-h-[10rem] max-h-[25rem] border border-border px-2"
+        className="min-h-[3rem] max-h-[25rem] border border-border px-2"
         defaultValue={workspace.description}
         stateKey={`description.${workspace.id}`}
         onChange={(description) => patchModel(workspace, { description })}
         heightMode="auto"
       />
 
-      <VStack space={6} className="mt-3 w-full" alignItems="start">
-        <SyncToFilesystemSetting
-          value={{ filePath: workspaceMeta.settingSyncDir }}
-          forceOpen={openSyncMenu}
-          onCreateNewWorkspace={hide}
-          onChange={({ filePath }) => patchModel(workspaceMeta, { settingSyncDir: filePath })}
-        />
-        <Separator />
-        <Button
-          onClick={async () => {
-            const didDelete = await deleteModelWithConfirm(workspace);
-            if (didDelete) {
-              hide(); // Only hide if actually deleted workspace
-              await router.navigate({ to: '/workspaces' });
-            }
-          }}
-          color="danger"
-          variant="border"
-          size="xs"
-        >
-          Delete Workspace
-        </Button>
-      </VStack>
+      <SyncToFilesystemSetting
+        value={{ filePath: workspaceMeta.settingSyncDir }}
+        onCreateNewWorkspace={hide}
+        onChange={({ filePath }) => patchModel(workspaceMeta, { settingSyncDir: filePath })}
+      />
+      <WorkspaceEncryptionSetting size="xs" />
+
+      <Separator className="my-4" />
+
+      <Button
+        onClick={async () => {
+          const didDelete = await deleteModelWithConfirm(workspace);
+          if (didDelete) {
+            hide(); // Only hide if actually deleted workspace
+            await router.navigate({ to: '/' });
+          }
+        }}
+        color="danger"
+        variant="border"
+        size="xs"
+      >
+        Delete Workspace
+      </Button>
     </VStack>
   );
 }