Clean up filesystem sync setting

src-tauri/Cargo.toml

@@ -24,6 +24,9 @@ crate-type = ["staticlib", "cdylib", "lib"]
 [profile.release]
 strip = true  # Automatically strip symbols from the binary.
 
+[features]
+cargo-clippy = []
+
 [build-dependencies]
 tauri-build = { version = "2.0.4", features = [] }
 

src-tauri/src/lib.rs

@@ -1764,7 +1764,7 @@ pub fn run() {
                     .level(if is_dev() { log::LevelFilter::Debug } else { log::LevelFilter::Info })
                     .build(),
             )
-            .plugin(tauri_plugin_single_instance::init(|app, args, _cwd| {
+            .plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
                 // When trying to open a new app instance (common operation on Linux),
                 // focus the first existing window we find instead of opening a new one
                 // TODO: Keep track of the last focused window and always focus that one

src-web/components/CreateWorkspaceDialog.tsx

@@ -6,7 +6,6 @@ import { getWorkspaceMeta } from '../lib/store';
 import { Button } from './core/Button';
 import { PlainInput } from './core/PlainInput';
 import { VStack } from './core/Stacks';
-import type { SyncToFilesystemSettingProps } from './SyncToFilesystemSetting';
 import { SyncToFilesystemSetting } from './SyncToFilesystemSetting';
 
 interface Props {
@@ -15,9 +14,7 @@ interface Props {
 
 export function CreateWorkspaceDialog({ hide }: Props) {
   const [name, setName] = useState<string>('');
-  const [settingSyncDir, setSettingSyncDir] = useState<
-    Parameters<SyncToFilesystemSettingProps['onChange']>[0]
-  >({ value: null, enabled: false });
+  const [settingSyncDir, setSettingSyncDir] = useState<string | null>(null);
 
   return (
     <VStack
@@ -27,15 +24,14 @@ export function CreateWorkspaceDialog({ hide }: Props) {
       className="pb-3 max-h-[50vh]"
       onSubmit={async (e) => {
         e.preventDefault();
-        const { enabled, value } = settingSyncDir ?? {};
-        if (enabled && !value) return;
+        if (!settingSyncDir) return;
         const workspace = await upsertWorkspace.mutateAsync({ name });
         if (workspace == null) return;
 
         // Do getWorkspaceMeta instead of naively creating one because it might have
         // been created already when the store refreshes the workspace meta after
         const workspaceMeta = await getWorkspaceMeta(workspace.id);
-        upsertWorkspaceMeta.mutate({ ...workspaceMeta, settingSyncDir: value });
+        upsertWorkspaceMeta.mutate({ ...workspaceMeta, settingSyncDir });
 
         // Navigate to workspace
         await router.navigate({
@@ -46,19 +42,14 @@ export function CreateWorkspaceDialog({ hide }: Props) {
         hide();
       }}
     >
-      <PlainInput require label="Workspace Name" defaultValue={name} onChange={setName} />
+      <PlainInput require label="Name" defaultValue={name} onChange={setName} />
 
       <SyncToFilesystemSetting
         onChange={setSettingSyncDir}
-        value={settingSyncDir.value}
+        value={settingSyncDir}
         allowNonEmptyDirectory // Will do initial import when the workspace is created
       />
-      <Button
-        type="submit"
-        color="primary"
-        className="ml-auto mt-3"
-        disabled={settingSyncDir.enabled && !settingSyncDir.value}
-      >
+      <Button type="submit" color="primary" className="ml-auto mt-3">
         Create Workspace
       </Button>
     </VStack>

src-web/components/SyncToFilesystemSetting.tsx

@@ -1,11 +1,11 @@
 import { readDir } from '@tauri-apps/plugin-fs';
 import { useState } from 'react';
-import { Checkbox } from './core/Checkbox';
+import { Banner } from './core/Banner';
 import { VStack } from './core/Stacks';
 import { SelectFile } from './SelectFile';
 
 export interface SyncToFilesystemSettingProps {
-  onChange: (args: { value: string | null; enabled: boolean }) => void;
+  onChange: (filePath: string | null) => void;
   value: string | null;
   allowNonEmptyDirectory?: boolean;
 }
@@ -15,47 +15,37 @@ export function SyncToFilesystemSetting({
   value,
   allowNonEmptyDirectory,
 }: SyncToFilesystemSettingProps) {
-  const [useSyncDir, setUseSyncDir] = useState<boolean>(!!value);
   const [error, setError] = useState<string | null>(null);
 
   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"
-      />
-      {error && <div className="text-danger">{error}</div>}
-      {useSyncDir && (
+    <details open={value != null}>
+      <summary>Sync to filesystem</summary>
+      <VStack className="my-2" space={3}>
+        <Banner color="info">
+          When enabled, workspace data syncs to the chosen folder as text files, ideal for backup
+          and Git collaboration.
+        </Banner>
+        {error && <div className="text-danger">{error}</div>}
+
         <SelectFile
           directory
+          color="primary"
           size="xs"
           noun="Directory"
           filePath={value}
           onChange={async ({ filePath }) => {
-            setError(null);
-            if (filePath == null) {
-              setUseSyncDir(false);
-            } else {
+            if (filePath != null) {
               const files = await readDir(filePath);
               if (files.length > 0 && !allowNonEmptyDirectory) {
-                setError('Directory must be empty');
+                setError('The directory must be empty');
                 return;
               }
             }
 
-            onChange({ value: filePath, enabled: useSyncDir });
+            onChange(filePath);
           }}
         />
-      )}
-    </VStack>
+      </VStack>
+    </details>
   );
 }

src-web/components/WorkspaceSettingsDialog.tsx

@@ -41,7 +41,7 @@ export function WorkspaceSettingsDialog({ workspaceId, hide }: Props) {
   return (
     <VStack space={3} alignItems="start" className="pb-3 h-full">
       <Input
-        label="Workspace Name"
+        label="Name"
         defaultValue={workspace.name}
         onChange={(name) => upsertWorkspace.mutate({ ...workspace, name })}
         stateKey={`name.${workspace.id}`}
@@ -60,9 +60,9 @@ export function WorkspaceSettingsDialog({ workspaceId, hide }: Props) {
       <VStack space={6} className="mt-3 w-full" alignItems="start">
         <SyncToFilesystemSetting
           value={workspaceMeta.settingSyncDir}
-          onChange={({ value: settingSyncDir }) => {
-            upsertWorkspaceMeta.mutate({ ...workspaceMeta, settingSyncDir });
-          }}
+          onChange={(settingSyncDir) =>
+            upsertWorkspaceMeta.mutate({ ...workspaceMeta, settingSyncDir })
+          }
         />
         <Separator />
         <Button

src-web/tailwind.config.cjs

@@ -10,7 +10,15 @@ const sizes = {
 /** @type {import("tailwindcss").Config} */
 module.exports = {
   darkMode: ['class', '[data-resolved-appearance="dark"]'],
-  content: ['./index.html', './**/*.{html,js,jsx,ts,tsx}'],
+  content: [
+    './*.{html,ts,tsx}',
+    './commands/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './hooks/**/*.{ts,tsx}',
+    './init/**/*.{ts,tsx}',
+    './lib/**/*.{ts,tsx}',
+    './routes/**/*.{ts,tsx}',
+  ],
   theme: {
     extend: {
       opacity: {