Feature/Edit Note make Fullscreen (sillsdev#850)

* Remake edit notes popup into a fullscreen editor.

- Added CheckIcon and DeleteIcon for saving and deleting notes
- Added a route in /notes/+page.svelte to the edit route

* Allow navigation from modal to full-screen editor in NoteDialog

Fixed issue with adding new note

* Removed vite.config.js.timestamp files and made small changes to /notes/edit/+page.js

* Fixing Adding Notes and Back Navigation for Edits

Modify NoteDialog.svelte and note.ts to handle create notes better; implement history.back in /note/edit/[noteid]/+page.svelte

* Necessary Final Adjustments and Cleanup

Cleanup in /notes/edit/[noteid]/+page.svelte and+page.js, and static folder

* Developed temporary fix on Add Notes Feature

Temporary fix to navigate directly to adding a new note and see an 'Add Note' title; requires additional fixes

* 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

* Cleanup and Fix textSelectionToolBar

Removes unnecessary code and comments, and makes it so the textselection only leads to creating a new note

* Remove async from functions

* Focus textarea when new note page starts

* Fix errors from rebase

- Remove double-import, likely added by sloppy merging
- Remove NoteDialog content fragment to work with Modal's children
  snippet
- Comment out cancel button that makes use of editing variable
- Make tabMenuActive a $state variable

* Convert ${base} to getRoute in goto statements

Fix the references in notes infrastructure to `goto` that do not use
hash-based routing.

* Fix navbar use in notes editor to use snippets

The notes editor in `src/routes/notes/edit/[noteid]/+page.svelte` and
`src/routes/notes/new/+page.svelte` used the old slots configuration
inside the Navbar element. This is incompatible with the current
implementation of Navbar. This commit fixes these pages to use snippets instead.

* Add the verse reference to fullscreen note editor

This change adds the verse reference for a note to the fullscreen
editor.
This prevents the user from being confused about what note is being changed.

* Fix missing function error on `#/notes` page.

Notes `+page.svelte` did not properly assign the `menuaction` property
to the CardMenu.

Prettier fixes to `CheckIcon` and `DeleteIcon`.
Resolve sveltecheck complaints in `notes/edit/+page.svelte` and
`notes/new/+page.svelte` concerning `textarea`.

* Adopt standard sveltekit error handling in `/note`

Accept coderabbit's suggestion and use correct svelte error handling
methods, as per https://svelte.dev/docs/kit/errors.

Also add fallback for reference text.

* Fix incorrect font for notedialog heading.

The heading text of the NoteDialog previously did not use the correct
font face. It also did not set the font size.
This commit tells it to use the body font face and size.

* Remove `notes/new/` page, move creation to `edit`.

The `notes/new/` and `notes/edit` pages were almost entirely duplicates
of each other.
This change refactors `notes/edit` to allow using the noteid `new`
to create a note.
The `createNote` function has been moved appropriately and the
`deleteNote` function updated to only delete existing notes.

This commit also removes `notes/new` as obsolete.

* Corect too-wide center text in notes navbar.

This commit makes the divider and reference text disappear on mobile
devices, using tailwind's `hidden` and `sm:` features.
The notes reference will still appear on tablets and desktop devices,
but it will not collide anymore on mobile.

* Remove commented-out code from NoteDialog

* Fix: Replace `goto` with `gotoRoute` in notes page

* Remove unused dependencies in NoteDialog

Remove unused imports (`goto`, `base`, `addNote`, `editNote`,
`getRoute`) from NoteDialog.
Replace `goto` and `getRoute` with `gotoRoute`.

* Remove old TODO in NoteDialog.

* Replace goto and getRoute in TextSelectionToolbar.

Use gotoRoute instead.

* Fix formatting

---------

Co-authored-by: Reilly Krause <reikwork@gmail.com>
Co-authored-by: Chris Hubbard <chris@thehubbards.org>

Author: 3 people

src/lib/components/CollectionSelector.svelte

@@ -25,7 +25,7 @@ Book Collection Selector component.
     const modalId = 'collectionSelector';
     let modal;
     let tabMenu;
-    let tabMenuActive = LAYOUT_SINGLE;
+    let tabMenuActive = $state(LAYOUT_SINGLE);
 
     // values of selectedLayouts before user makes changes
     const restoreDocSets = JSON.stringify($selectedLayouts);

src/lib/components/IconCard.svelte

@@ -52,7 +52,7 @@ TODO:
                 {reference}
             </a>
         </div>
-        <div class="self-center justify-self-end"><CardMenu menuaction {actions} /></div>
+        <div class="self-center justify-self-end"><CardMenu {menuaction} {actions} /></div>
 
         <div
             class="annotation-item-text col-start-2 col-end-3 justify-self-start"

src/lib/components/NoteDialog.svelte

@@ -1,78 +1,56 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-    import { addNote, editNote } from '$lib/data/notes';
     import { bodyFontSize, currentFont, selectedVerses, t } from '$lib/data/stores';
     import { EditIcon } from '$lib/icons';
+    import { gotoRoute } from '$lib/navigate';
     import Modal from './Modal.svelte';
 
     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() {
+    function onEditNote() {
         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
-            });
+            gotoRoute(`/notes/edit/${note.date}`);
         }
     }
 </script>
 
 <Modal bind:this={modal} {id} onclose={reset}>
     <div class="flex flex-col justify-evenly">
-        <div class="w-full flex justify-between">
-            <div class="w-full pb-3" style:font-weight={editing ? 'normal' : 'bold'}>
-                {heading}
+        <div class="w-full flex justify-between items-center">
+            <div class="w-full pb-3" style:font-weight="bold">
+                <p style:font-family={$currentFont} style:font-size="{$bodyFontSize}px">
+                    {heading}
+                </p>
             </div>
-            {#if !editing}
-                <button
-                    onclick={() => {
-                        editing = true;
-                    }}
-                >
-                    <EditIcon />
-                </button>
-            {/if}
+
+            <button class="dy-btn dy-btn-ghost dy-btn-circle" onclick={onEditNote}>
+                <EditIcon />
+            </button>
         </div>
-        <div style:word-wrap="break-word">
-            {#if editing}
-                <textarea bind:value={text} class="dy-textarea w-full"></textarea>
-            {: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">
@@ -84,13 +62,5 @@
                 {/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 onclick={modifyNote} class="dy-btn dy-btn-sm dy-btn-ghost"
-                    >{$t['Button_OK']}</button
-                >
-            </div>
-        {/if}
     </div>
 </Modal>

src/lib/components/TextSelectionToolbar.svelte

@@ -18,17 +18,7 @@ TODO:
     import config from '$lib/data/config';
     import { addHighlights, removeHighlights } from '$lib/data/highlights';
     import { shareText } from '$lib/data/share';
-    import {
-        audioActive,
-        modal,
-        MODAL_NOTE,
-        refs,
-        s,
-        selectedVerses,
-        t,
-        theme,
-        themeColors
-    } from '$lib/data/stores';
+    import { audioActive, refs, s, selectedVerses, theme, themeColors } from '$lib/data/stores';
     import {
         AudioIcon,
         BookmarkIcon,
@@ -39,6 +29,7 @@ TODO:
         ShareIcon
     } from '$lib/icons';
     import { ImageIcon } from '$lib/icons/image';
+    import { gotoRoute } from '$lib/navigate';
     import { createEventDispatcher } from 'svelte';
 
     const isAudioPlayable = config?.mainFeatures['text-select-play-audio'];
@@ -226,7 +217,10 @@ 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={() => gotoRoute(`/notes/edit/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,19 @@
+<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,9 @@
+<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

@@ -11,8 +11,10 @@ import CalendarMonthIcon from './CalendarMonthIcon.svelte';
 import VerseByVerseIcon from './CalendarMonthIcon.svelte';
 import CheckboxIcon from './CheckboxIcon.svelte';
 import CheckboxOutlineIcon from './CheckboxOutlineIcon.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';
@@ -47,8 +49,10 @@ export {
     CalendarMonthIcon,
     CheckboxIcon,
     CheckboxOutlineIcon,
+    CheckIcon,
     ChevronIcon,
     CopyContentIcon,
+    DeleteIcon,
     DeleteSweepIcon,
     DropdownIcon,
     EditIcon,

src/routes/notes/+page.svelte

@@ -20,7 +20,7 @@
                 gotoRoute(`/`);
                 break;
             case $t['Annotation_Menu_Edit']:
-                modal.open(MODAL_NOTE, note);
+                gotoRoute(`/notes/edit/${note.date}`);
                 break;
             case $t['Annotation_Menu_Share']:
                 await shareAnnotation(note);

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

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