Feature/Edit Note make Fullscreen and Delete Button #522

src/lib/components/NoteDialog.svelte

@@ -3,80 +3,51 @@
 <script lang="ts">
     import Modal from './Modal.svelte';
     import { EditIcon } from '$lib/icons';
-    import { t, selectedVerses, bodyFontSize, currentFont } from '$lib/data/stores';
-    import { editNote, addNote } from '$lib/data/notes';
+    import { selectedVerses, bodyFontSize, currentFont } from '$lib/data/stores';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
 
     export let note = undefined;
-    export let editing = false;
 
     let id = 'note';
     let modal;
-    let title: string;
     let text: string;
 
-    $: heading = editing ? $t[title] ?? '' : note?.reference ?? '';
+    $: heading = note?.reference ?? '';
 
     export function showModal() {
         if (note !== undefined) {
             text = note.text;
-            title = 'Annotation_Note_Edit';
+            modal.showModal();
         } else {
-            editing = true;
-            title = 'Annotation_Note_Add';
+            console.log('No note available!');
         }
-        modal.showModal();
     }
 
     function reset() {
         text = '';
-        editing = false;
         selectedVerses.reset();
     }
 
-    async function modifyNote() {
-        if (note !== undefined) {
-            await editNote({
-                note: note,
-                newText: text
-            });
-        } else {
-            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
-            });
-        }
+    function onEditNote() {
+        if (note !== undefined) goto(`${base}/notes/edit/${note.date}`);
     }
 </script>
 
 <Modal bind:this={modal} {id} on:close={reset} useLabel={false}>
     <svelte:fragment slot="content">
         <div id="container" class="flex flex-col justify-evenly">
-            <div class="w-full flex justify-between">
-                <div
-                    class="annotation-item-title w-full pb-3"
-                    style:font-weight={editing ? 'normal' : 'bold'}
-                >
+            <div class="w-full flex justify-between items-center">
+                <div class="annotation-item-title w-full pb-3 font-bold">
                     {heading}
                 </div>
-                {#if !editing}
-                    <button
-                        on:click={() => {
-                            editing = true;
-                        }}
-                    >
-                        <EditIcon />
-                    </button>
-                {/if}
+                <button class="dy-btn dy-btn-ghost dy-btn-circle" on:click={onEditNote}>
+                    <EditIcon />
+                </button>
             </div>
-            <div style:word-wrap="break-word">
-                {#if editing}
-                    <textarea bind:value={text} class="dy-textarea w-full" />
-                {:else if text !== undefined}
+
+            <div style:word-wrap="break-word" class="mt-2">
+                {#if text !== undefined}
                     {#each text.split(/\r?\n/) as line}
                         {#if line}
                             <p style:font-family={$currentFont} style:font-size="{$bodyFontSize}px">
@@ -88,14 +59,6 @@
                     {/each}
                 {/if}
             </div>
-            {#if editing}
-                <div class="w-full flex mt-4 justify-between">
-                    <button class="dy-btn dy-btn-sm dy-btn-ghost">{$t['Button_Cancel']}</button>
-                    <button on:click={modifyNote} class="dy-btn dy-btn-sm dy-btn-ghost"
-                        >{$t['Button_OK']}</button
-                    >
-                </div>
-            {/if}
         </div>
     </svelte:fragment>
 </Modal>

src/lib/components/TextSelectionToolbar.svelte

@@ -25,11 +25,8 @@ TODO:
     import { ImageIcon } from '$lib/icons/image';
     import config from '$lib/data/config';
     import {
-        t,
         s,
         refs,
-        modal,
-        MODAL_NOTE,
         selectedVerses,
         theme,
         themeColors,
@@ -40,6 +37,8 @@ TODO:
     import { shareText } from '$lib/data/share';
     import { play, seekToVerse } from '$lib/data/audio';
     import { getBook, logShareContent } from '$lib/data/analytics';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
     const isAudioPlayable = config?.mainFeatures['text-select-play-audio'];
     const isRepeatableAudio = config?.mainFeatures['audio-repeat-selection-button'];
     const isTextOnImageEnabled = config?.mainFeatures['text-on-image'];
@@ -225,7 +224,7 @@ TODO:
                     </button>
                 {/if}
                 {#if isNotesEnabled}
-                    <button class="dy-btn-sm dy-btn-ghost" on:click={() => modal.open(MODAL_NOTE)}>
+                    <button class="dy-btn-sm dy-btn-ghost" on:click={() => goto(`${base}/notes/new`)}>
                         <NoteIcon color={barIconColor} />
                     </button>
                 {/if}

src/lib/data/notes.ts

@@ -68,6 +68,7 @@ export async function addNote(item: {
     const nextItem = { ...item, date: date, bookIndex: bookIndex };
     await notes.add('notes', nextItem);
     notifyUpdated();
+    return nextItem;
 }
 
 export async function findNote(item: {

src/lib/icons/CheckIcon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    // Check from https://fonts.google.com/icons
+    // 'FILL' 0,
+    // 'wght' 400,
+    // 'GRAD' 0,
+    // 'opsz' 24
+    export let color = 'black';
+    export let size = '24';
+</script>
+
+<svg fill={color} xmlns="http://www.w3.org/2000/svg" height={size} width={size} viewBox="0 -960 960 960">
+    <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
+</svg>

src/lib/icons/DeleteIcon.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    // Delete SVG vector icon from https://www.svgrepo.com/svg/453328/delete
+    export let color = 'black';
+    export let size = '24';
+</script>
+
+<svg fill={color} xmlns="http://www.w3.org/2000/svg" height={size} width={size} viewBox="0 0 24 24"
+    ><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" /></svg>

src/lib/icons/index.js

@@ -6,8 +6,10 @@ import ArrowForwardIcon from './ArrowForwardIcon.svelte';
 import BibleIcon from './BibleIcon.svelte';
 import BookmarkIcon from './BookmarkIcon.svelte';
 import BookmarkOutlineIcon from './BookmarkOutlineIcon.svelte';
+import CheckIcon from './CheckIcon.svelte';
 import ChevronIcon from './ChevronIcon.svelte';
 import CopyContentIcon from './CopyContentIcon.svelte';
+import DeleteIcon from './DeleteIcon.svelte';
 import DeleteSweepIcon from './DeleteSweepIcon.svelte';
 import DropdownIcon from './DropdownIcon.svelte';
 import EditIcon from './EditIcon.svelte';
@@ -40,8 +42,10 @@ export {
     BibleIcon,
     BookmarkIcon,
     BookmarkOutlineIcon,
+    CheckIcon,
     ChevronIcon,
     CopyContentIcon,
+    DeleteIcon,
     DeleteSweepIcon,
     DropdownIcon,
     EditIcon,

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,7 @@
                 goto(`${base}/`);
                 break;
             case $t['Annotation_Menu_Edit']:
-                modal.open(MODAL_NOTE, note);
+                goto(`/notes/edit/${note.date}`);
                 break;
             case $t['Annotation_Menu_Share']:
                 await shareAnnotation(note);

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

@@ -0,0 +1,26 @@
+import { getNotes } from '$lib/data/notes';
+
+export async function load({ params }) {
+    const { noteid } = params;
+    const date = parseInt(noteid, 10);
+
+    if (isNaN(date)) {
+        console.error(`Invalid noteid: ${noteid}`);
+        return {
+            status: 400,
+            error: new Error('Invalid note ID')
+        };
+    }
+
+    const allNotes = await getNotes();
+    const note = allNotes.find((item) => item.date === date);
+
+    if (!note) {
+        return {
+            status: 400,
+            error: new Error('Note not found')
+        };
+    }
+
+    return { note };
+}

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

@@ -0,0 +1,60 @@
+<script>
+    import Navbar from '$lib/components/Navbar.svelte';
+    import { t } from '$lib/data/stores';
+    import { DeleteIcon, CheckIcon } from '$lib/icons';
+    import { editNote, removeNote } from '$lib/data/notes';
+
+    export let data;
+    let note = data.note;
+    let text = note.text;
+    const title = 'Annotation_Note_Edit';
+
+    function goBack() {
+        history.back();
+    }
+
+    function onBackNavigate(event) {
+        event.preventDefault();
+        goBack();
+    }
+
+    async function deleteNote() {
+        await removeNote(note.date);
+        goBack();
+    }
+
+    async function modifyNote() {
+        if (note !== undefined) {
+            await editNote({
+                note: note,
+                newText: text
+            });
+        }
+        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={modifyNote} 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>

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

@@ -0,0 +1,74 @@
+<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';
+    import { onMount } from 'svelte';
+
+    let 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();
+    }
+
+    let textarea;
+    onMount(() => {
+        textarea.focus();
+    });
+</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}
+            bind:this={textarea}
+            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>