fix(ux): Implement normal file saving and note settings

Author: RedCrafter07

app/src/lib/components/NoteSettings.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { PageManager } from "$lib/canvas/PageManager.svelte";
+  import type { Note } from "$lib/types/bindings/Note";
+  import type { Tab } from "$lib/types/tabs";
+  import Input from "./Input.svelte";
+  import Overlay from "./Overlay.svelte";
+
+  const {
+    closeCb,
+    visible,
+    data,
+  }: {
+    closeCb: () => void;
+    visible: boolean;
+    data?: { page: PageManager; tab?: Tab };
+  } = $props();
+</script>
+
+<Overlay {closeCb} title="Note settings" minHeight={false} {visible}>
+  <p>The values here save automatically!</p>
+  <Input
+    label="Note title"
+    value={data?.page.meta.title}
+    id="title"
+    onBlur={(e) => {
+      if (data) data.page.meta.title = e.currentTarget.value;
+    }}
+  />
+  <Input
+    label="Tags"
+    value={data?.page.meta.tags.join(",")}
+    onBlur={(e) => {
+      if (data) data.page.meta.tags = e.currentTarget.value.split(",");
+    }}
+    id="tags"
+  />
+  More options coming soon!
+</Overlay>

app/src/lib/components/Toolbar.svelte

@@ -16,8 +16,12 @@
   let {
     // tool,
     updateTool,
-  }: { tool: ToolSettings; updateTool: (newTool: ToolSettings) => void } =
-    $props();
+    openSettings,
+  }: {
+    tool: ToolSettings;
+    updateTool: (newTool: ToolSettings) => void;
+    openSettings: () => void;
+  } = $props();
 </script>
 
 <div class="right-4 h-full absolute pointer-events-none flex z-20">
@@ -74,7 +78,9 @@
       class={[
         "aspect-square p-2 rounded-xl active:scale-90 transition-all hover:bg-overlay/20",
       ]}
-      onclick={() => {}}
+      onclick={() => {
+        openSettings();
+      }}
     >
       <IconSettings />
     </button>

app/src/routes/edit/+page.svelte

@@ -7,15 +7,18 @@
   import { save } from "@tauri-apps/plugin-dialog";
   import { tabManager } from "$lib/tabs/tabs.svelte";
   import { goto } from "$app/navigation";
+  import NoteSettings from "$lib/components/NoteSettings.svelte";
 
   let tool: ToolSettings = $state(penDefaults);
+  let settingsOpen = $state(false);
 
-  const tab = $derived(tabManager.currentPage);
-  const pageManager = $derived(tab.page);
-  const canvasManager = $derived(tab.canvas);
+  const currentTab = $derived(tabManager.currentTab);
+  const data = $derived(tabManager.currentPage);
+  const pageManager = $derived(data.page);
+  const canvasManager = $derived(data.canvas);
 
   $effect(() => {
-    if (!tab) goto("/");
+    if (!data) goto("/");
   });
 
   function updateTool(newTool: ToolSettings) {
@@ -24,12 +27,17 @@
 
   const hotkeys = async (e: KeyboardEvent) => {
     if (!e.ctrlKey) return;
-    if (e.key === "s") {
+    if (e.key === "s" && currentTab.path) {
       // TODO: Save to user directory
-      alert(
-        "This feature is being implemented; please consider using Ctrl+Shift+S instead!",
-      );
-    } else if (e.key === "S" || (e.key === "s" && e.shiftKey)) {
+      await invoke("write", {
+        path: currentTab.path,
+        note: JSON.stringify(pageManager.export(canvasManager.export()!)),
+      });
+    } else if (
+      e.key === "S" ||
+      (e.key === "s" && e.shiftKey) ||
+      (e.key === "s" && currentTab.path === null)
+    ) {
       // Open file save dialog
 
       const path = await save({
@@ -39,6 +47,8 @@
 
       if (!path) return;
 
+      currentTab.path = path;
+
       await invoke("write", {
         path,
         note: JSON.stringify(pageManager.export(canvasManager.export()!)),
@@ -52,9 +62,23 @@
       document.removeEventListener("keydown", hotkeys);
     };
   });
+
+  function openSettings() {
+    settingsOpen = true;
+  }
+  function closeSettings() {
+    settingsOpen = false;
+  }
 </script>
 
 <div class="w-full h-screen relative touch-none">
-  <Toolbar {tool} {updateTool} />
+  <NoteSettings
+    data={{
+      page: pageManager,
+    }}
+    closeCb={closeSettings}
+    visible={settingsOpen}
+  />
+  <Toolbar {tool} {updateTool} {openSettings} />
   <Canvas {tool} {pageManager} {canvasManager} />
 </div>