Create new path for adding notes

A new path called 'routes/notes/new' is created to handle the functionality of adding a new note properly so that it does not get saved in the database until the save button is selected

Author: Mast3Rei

src/lib/components/NoteDialog.svelte

@@ -17,26 +17,22 @@
     let title: string;
     let text: string;
 
-    // $: heading = editingProp ? $t[title] ?? '' : note?.reference ?? '';
     $: heading = editing ? note?.reference ?? '' : $t[title] ?? '';
 
-    export async function showModal() {
+    export async function showNote() {
         if (note !== undefined) {
             text = note.text;
             editing = true;
             title = 'Annotation_Note_Edit';
             modal.showModal();
         } else {
-            // editingProp = true;
             editing = false;
-            await createNote();
-            goto(`${base}/notes/edit/${note.date}`);
+            goto(`${base}/notes/new`);
         }
     }
 
     function reset() {
         text = '';
-        // editingProp = false;
         selectedVerses.reset();
     }
 
@@ -59,7 +55,6 @@
         }
         goto(`${base}/notes/edit/${note.date}`);
     }
-
 </script>
 
 <Modal bind:this={modal} {id} on:close={reset} useLabel={false}>

src/routes/+layout.svelte

@@ -37,7 +37,7 @@
                         break;
                     case MODAL_NOTE:
                         noteDialog.note = data;
-                        noteDialog.showModal();
+                        noteDialog.showNote();
                         break;
                     case MODAL_TEXT_APPERANCE:
                         textAppearanceSelector.showModal();

src/routes/notes/+page.svelte

@@ -4,7 +4,7 @@
     import { NoteIcon } from '$lib/icons';
     import ShareIcon from '$lib/icons/ShareIcon.svelte';
     import Navbar from '$lib/components/Navbar.svelte';
-    import { t, monoIconColor, refs, modal, MODAL_NOTE, bodyFontSize } from '$lib/data/stores';
+    import { t, monoIconColor, refs, bodyFontSize } from '$lib/data/stores';
     import { formatDate } from '$lib/scripts/dateUtils';
     import { removeNote, type NoteItem } from '$lib/data/notes';
     import { SORT_DATE, SORT_REFERENCE, toSorted } from '$lib/data/annotation-sort';
@@ -20,7 +20,6 @@
                 goto(`${base}/`);
                 break;
             case $t['Annotation_Menu_Edit']:
-                // modal.open(MODAL_NOTE, note);
                 goto(`/notes/edit/${note.date}`);
                 break;
             case $t['Annotation_Menu_Share']:

src/routes/notes/edit/[noteid]/+page.svelte

@@ -12,12 +12,17 @@
         editing = value;
     });
     
-    $: title = editing ? 'Annotation_Note_Edit' : 'Annotation_Note_Add';
+    const title = 'Annotation_Note_Edit';
 
     function goBack() {
         history.back();
     }
 
+    function onBackNavigate(event) {
+        event.preventDefault();
+        goBack();
+    }
+
     async function deleteNote() {
         await removeNote(note.date);
         goBack();
@@ -32,11 +37,6 @@
         }
         goBack();
     }
-
-    function onBackNavigate(event) {
-        event.preventDefault();
-        goBack();
-    }
 </script>
 
 <div class="fullscreen-editor">

src/routes/notes/new/+page.svelte

@@ -0,0 +1,61 @@
+<script>
+    import Navbar from '$lib/components/Navbar.svelte';
+    import { t, selectedVerses } from '$lib/data/stores';
+    import { DeleteIcon, CheckIcon } from '$lib/icons';
+    import { addNote } from '$lib/data/notes';
+
+    let note = '';
+    let text = note.text;
+    const title = 'Annotation_Note_Add';
+
+    function goBack() {
+        history.back();
+    }
+    
+    function onBackNavigate(event) {
+        event.preventDefault();
+        goBack();
+    }
+
+    async function createNote() {
+        await addNote({
+            docSet: $selectedVerses[0].docSet,
+            collection: $selectedVerses[0].collection,
+            book: $selectedVerses[0].book,
+            chapter: $selectedVerses[0].chapter,
+            verse: $selectedVerses[0].verse,
+            text,
+            reference: $selectedVerses[0].reference
+        });
+        goBack();
+    }
+
+    async function deleteNote() {
+        goBack();
+    }
+</script>
+
+<div class="fullscreen-editor">
+    <Navbar on:backNavigation={onBackNavigate}>
+        <label for="sidebar" slot="center" >
+            <div class="btn btn-ghost normal-case text-xl" >{$t[title]}</div>
+        </label>
+
+        <div slot="right-buttons">
+            <button on:click={deleteNote} class="dy-btn dy-btn-ghost dy-btn-circle"><DeleteIcon color="white" /></button>
+            <button on:click={createNote} class="dy-btn dy-btn-ghost p-1"><CheckIcon color="white" /></button>
+        </div>
+    </Navbar>
+
+    <div class="flex justify-center mt-7 h-full max-w-screen-md mx-auto">
+        <textarea bind:value={text} class="dy-textarea dy-textarea-bordered w-full h-5/6 shadow-md" />
+    </div>
+</div>
+
+<style>
+    .fullscreen-editor{
+        width: 100%;
+        height: 100%;
+        position: fixed;
+    }
+</style>