feat(space): add option to open an existing space from filesystem (#11)

- get rid of `@tauri-apps/plugin-dialog` node pkg and add `open_directory_dialog` invoke command

.changeset/rude-plants-invent.md

@@ -0,0 +1,5 @@
+---
+"zaku": patch
+---
+
+Add option to open existing space from filesystem

package.json

@@ -59,7 +59,6 @@
         "@codemirror/view": "6.29.0",
         "@lezer/highlight": "1.2.0",
         "@tauri-apps/api": "2.0.0-rc.1",
-        "@tauri-apps/plugin-dialog": "2.0.0-rc.0",
         "@tauri-apps/plugin-http": "2.0.0-rc.1",
         "bits-ui": "0.21.12",
         "clsx": "2.1.1",

src-tauri/src/core/commands/dialog.rs

@@ -0,0 +1,36 @@
+use serde::{Deserialize, Serialize};
+use tauri::AppHandle;
+use tauri_plugin_dialog::DialogExt;
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct OpenDirectoryDialogOptions {
+    pub title: Option<String>,
+}
+
+#[tauri::command]
+pub async fn open_directory_dialog<R: tauri::Runtime>(
+    options: Option<OpenDirectoryDialogOptions>,
+    app_handle: AppHandle<R>,
+) -> Result<Option<String>, String> {
+    let mut dialog_builder = app_handle.dialog().file();
+
+    match options {
+        Some(OpenDirectoryDialogOptions {
+            title: Some(ref title),
+        }) => {
+            dialog_builder = dialog_builder.set_title(title);
+        }
+        _ => {}
+    }
+
+    let directory_path = dialog_builder.blocking_pick_folder();
+
+    match directory_path {
+        Some(path) => {
+            return Ok(Some(path.to_string_lossy().to_string()));
+        }
+        None => {
+            return Ok(None);
+        }
+    }
+}

src-tauri/src/core/commands/mod.rs

@@ -1,2 +1,3 @@
+pub mod dialog;
 pub mod space;
 pub mod window;

src-tauri/src/main.rs

@@ -26,7 +26,8 @@ fn main() {
             commands::space::get_active_space,
             commands::space::set_active_space,
             commands::space::delete_active_space,
-            commands::window::show_main_window
+            commands::window::show_main_window,
+            commands::dialog::open_directory_dialog
         ]);
 
     app.run(tauri::generate_context!())

src/lib/commands/index.ts

@@ -0,0 +1,11 @@
+import { invoke } from "@tauri-apps/api/core";
+
+export type OpenDirectoryDialog = {
+    title?: string;
+};
+
+export async function openDirectoryDialog(options?: OpenDirectoryDialog) {
+    const path: string | null = await invoke("open_directory_dialog", { options });
+
+    return path;
+}

src/routes/+page.svelte

@@ -11,20 +11,18 @@
     } from "$lib/components/primitives/dialog";
     import { Label } from "$lib/components/primitives/label";
     import { Input } from "$lib/components/primitives/input";
-    import { open } from "@tauri-apps/plugin-dialog";
     import { tick } from "svelte";
     import { Struct } from "$lib/utils/struct";
     import { goto } from "$app/navigation";
-    import { createSpace } from "$lib/store";
+    import { activeSpace, createSpace } from "$lib/store";
+    import { openDirectoryDialog } from "$lib/commands";
 
     let spaceName: string = "";
     let spacePath: string = "";
 
-    async function handleBrowse() {
-        const selected = await open({
-            directory: true,
-            multiple: false,
-        });
+    async function handleCreateSpaceBrowse() {
+        const selected = await openDirectoryDialog({ title: "Create a new Space" });
+
         if (selected !== null) {
             spacePath = selected;
 
@@ -57,6 +55,20 @@
             console.error(err);
         }
     }
+
+    async function handleOpenExistingSpace() {
+        try {
+            const selectedPath = await openDirectoryDialog({ title: "Open an existing Space" });
+
+            if (selectedPath !== null) {
+                await activeSpace.set(selectedPath);
+                await goto("/space");
+            }
+        } catch (err) {
+            // TODO - show error toast
+            console.error(err);
+        }
+    }
 </script>
 
 <div class="flex size-full flex-col items-center justify-center gap-2">
@@ -72,7 +84,7 @@
             <DialogHeader>
                 <DialogTitle>Create a new Space</DialogTitle>
                 <DialogDescription>
-                    Make changes to your profile here. Click save when you're done.
+                    Separate your projects, work and more. Choose a name and where to save it.
                 </DialogDescription>
             </DialogHeader>
             <div class="flex w-full flex-col gap-4 py-4">
@@ -86,12 +98,12 @@
                         <button
                             id="space-path-container"
                             class="scrollbar-hidden flex h-6 w-full select-text items-center overflow-y-hidden overflow-x-scroll whitespace-nowrap text-nowrap rounded-md rounded-r-none border border-r-0 border-input bg-transparent px-3 py-1 text-small shadow-sm"
-                            on:click={handleBrowse}
+                            on:click={handleCreateSpaceBrowse}
                         >
                             {spacePath}
                         </button>
                         <Button
-                            on:click={handleBrowse}
+                            on:click={handleCreateSpaceBrowse}
                             class="col-span-1 h-6 w-[80px] rounded-l-none"
                             variant="outline"
                         >
@@ -105,7 +117,13 @@
             </DialogFooter>
         </DialogContent>
     </Dialog>
-    <Button disabled variant="link" class="text-foreground">+ Open Existing Space</Button>
+    <Button
+        variant="link"
+        class="text-xs text-foreground hover:no-underline"
+        on:click={handleOpenExistingSpace}
+    >
+        + Open Existing Space
+    </Button>
 </div>
 
 <style lang="postcss">