From 2cb55f362136e9366535fe3d26adeec0687223ce Mon Sep 17 00:00:00 2001
From: Yaron <yaronleo11@gmail.com>
Date: Tue, 30 Jul 2024 21:33:32 +0300
Subject: [PATCH 1/2] Added editMessage function

---
 src/lib/assets/controlIcons/editIcon.svg | 13 +++++++
 src/lib/components/Message.svelte        | 17 ++++++++--
 src/lib/index.svelte.ts                  | 21 ++++++++----
 src/routes/+page.svelte                  | 43 ++++++++++++++++++++++--
 4 files changed, 81 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/assets/controlIcons/editIcon.svg

diff --git a/src/lib/assets/controlIcons/editIcon.svg b/src/lib/assets/controlIcons/editIcon.svg
new file mode 100644
index 0000000..1ceee1b
--- /dev/null
+++ b/src/lib/assets/controlIcons/editIcon.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="0.85em" height="0.85em" viewBox="0 0 528.899 528.899"
+	 xml:space="preserve">
+<g>
+	<path d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981
+		c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
+		C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
+		L27.473,390.597L0.3,512.69z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/lib/components/Message.svelte b/src/lib/components/Message.svelte
index 08def85..305e22f 100644
--- a/src/lib/components/Message.svelte
+++ b/src/lib/components/Message.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
     import { base } from '$app/paths'
-    import { type Message } from '$lib/index.svelte'
+    import { type IMessage } from '$lib/index.svelte'
     import Markdown from 'svelte-exmarkdown'
     import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 
+    import edit from '$lib/assets/controlIcons/editIcon.svg?raw'
+
     let {
         value,
         ondelete,
+        onedit,
         isLast,
     }: {
-        value: Message
-        ondelete: (message: Message) => void
+        value: IMessage
+        ondelete: (message: IMessage) => void
         isLast: boolean
     } = $props()
 
@@ -61,5 +64,13 @@
                 ></svg
             >
         </button>
+
+        <button
+            class="cursor-pointer w-4 h-4 stroke-current"
+            onclick={() => onedit(value)}
+            title="Edit a note"
+        >
+            {@html edit}
+        </button>
     </div>
 </div>
diff --git a/src/lib/index.svelte.ts b/src/lib/index.svelte.ts
index e7054a0..6108e6d 100644
--- a/src/lib/index.svelte.ts
+++ b/src/lib/index.svelte.ts
@@ -32,7 +32,7 @@ export type MessageData = {
     }
 }
 
-export type Message = {
+export interface IMessage {
     data: MessageData
 
     id: Id
@@ -49,11 +49,11 @@ export function createMessage(text: string): MessageData {
 }
 
 class Messages {
-    inner: { [id: Id]: Message } = $state({})
+    inner: { [id: Id]: IMessage } = $state({})
 
     constructor(private id_provider: IdProvider = NANOID_PROVIDER) {}
 
-    get(id: Id): Message | null {
+    get(id: Id): IMessage | null {
         return this.inner[id] ?? null
     }
 
@@ -90,6 +90,13 @@ class Messages {
         delete this.inner[id]
     }
 
+    edit(id: Id, newContent: string) {
+        const message = this.inner[id]
+        if (!message) return
+
+        message.data.content = newContent
+    }
+
     get length(): number {
         return Object.keys(this.inner).length
     }
@@ -108,11 +115,11 @@ class Messages {
         return this.inner[id].children.size === 0
     }
 
-    chatFrom(id: Id, count: number = 20): Message[] {
+    chatFrom(id: Id, count: number = 20): IMessage[] {
         const out = []
         let iter_id: Id | null = id
         while (count-- > 0) {
-            const message: Message = this.inner[iter_id!]
+            const message: IMessage = this.inner[iter_id!]
             if (!message) break
             iter_id = message.parent
             out.push(message)
@@ -125,7 +132,7 @@ class Messages {
         let iter_id: Id | null = id
 
         while (iter_id) {
-            const message: Message = this.inner[iter_id!]
+            const message: IMessage = this.inner[iter_id!]
             if (!message) break
             if (message.children.size !== 1) break
             const firstChild = message.children.values().next().value
@@ -135,7 +142,7 @@ class Messages {
         return iter_id!
     }
 
-    lastCreatedAt(): Message | null {
+    lastCreatedAt(): IMessage | null {
         const msgs = Object.values(this.inner)
 
         if (msgs.length < 1) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2746422..b5a4a4c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
     import Message from '$lib/components/Message.svelte'
-    import { createMessage, messages, type Id } from '$lib/index.svelte'
+    import {
+        createMessage,
+        messages,
+        type Id,
+        type IMessage,
+    } from '$lib/index.svelte'
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
     import { browser } from '$app/environment'
@@ -30,11 +35,17 @@
     let currentChat = $derived(messages.chatFrom(leafId!, 15).toReversed())
     let lastId = $derived(messages.untilBranchOrLeaf(leafId!))
 
+    let currEditableMessageId: Id | null = $state(null)
     let textInput = $state('')
     // TODO: Make a multiline chat input that grows dynamically
     let textInputElement: HTMLInputElement | null = $state(null)
 
     function appendMessage() {
+        if (currEditableMessageId) {
+            onEditMessage()
+            return
+        }
+
         let message = createMessage(textInput)
         leafId = messages.add(leafId, message)
 
@@ -49,7 +60,7 @@
         setTimeout(() => textInputElement!.focus(), 0)
     }
 
-    function deleteMessage(value: Message) {
+    function deleteMessage(value: IMessage) {
         if (messages.isLeaf(value.id)) {
             let id = value.parent ?? messages.lastCreatedAt()!.id
             goto(`${base}/#${id}`)
@@ -57,6 +68,30 @@
         messages.delete(value.id)
         localStorage.setItem('notes', JSON.stringify(messages.export()))
     }
+
+    function onEditMessage() {
+        if (currEditableMessageId) {
+            messages.edit(currEditableMessageId, textInput)
+            currEditableMessageId = null
+            textInput = ''
+        }
+    }
+
+    function focusOnMessage(value: IMessage) {
+        textInput = value.data.content
+        currEditableMessageId = value.id
+
+        textInputElement?.focus()
+    }
+
+    function onEditMessageByKeyDown(e: KeyboardEvent) {
+        if (e.key === 'ArrowUp') {
+            const lastMessage = messages.get(lastId)
+            if (lastMessage) {
+                focusOnMessage(lastMessage)
+            }
+        }
+    }
 </script>
 
 <!-- TODO: Fullsize note editor on a separate page or in a bottom sheet -->
@@ -67,6 +102,7 @@
                 <Message
                     value={message}
                     ondelete={deleteMessage}
+                    onedit={focusOnMessage}
                     isLast={message.id === lastId}
                 />
             {/each}
@@ -93,7 +129,7 @@
     </div>
 
     <footer
-        class="dark:text-white bg-slate-100 dark:bg-slate-700 border-t border-gray-300 dark:border-slate-600 p-4 absolute left-0 bottom-0 w-full"
+        class={`dark:text-white ${currEditableMessageId ? 'bg-orange-100' : 'bg-slate-100'} dark:bg-slate-700 border-t border-gray-300 dark:border-slate-600 p-4 absolute left-0 bottom-0 w-full`}
     >
         <form
             class="flex items-center container mx-auto"
@@ -101,6 +137,7 @@
         >
             <input
                 type="text"
+                onkeydown={onEditMessageByKeyDown}
                 bind:this={textInputElement}
                 bind:value={textInput}
                 placeholder="Type a message..."

From 7c195fb23b0dbff149e68745e9df3ca20da59553 Mon Sep 17 00:00:00 2001
From: Yaron <yaronleo11@gmail.com>
Date: Wed, 31 Jul 2024 01:26:30 +0300
Subject: [PATCH 2/2] fixed some issues

---
 src/lib/assets/controlIcons/editIcon.svg | 14 +------
 src/lib/components/Message.svelte        |  6 +--
 src/lib/index.svelte.ts                  | 19 ++++-----
 src/routes/+page.svelte                  | 49 +++++++++++++++---------
 4 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/src/lib/assets/controlIcons/editIcon.svg b/src/lib/assets/controlIcons/editIcon.svg
index 1ceee1b..e244c6b 100644
--- a/src/lib/assets/controlIcons/editIcon.svg
+++ b/src/lib/assets/controlIcons/editIcon.svg
@@ -1,13 +1,3 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 width="0.85em" height="0.85em" viewBox="0 0 528.899 528.899"
-	 xml:space="preserve">
-<g>
-	<path d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981
-		c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
-		C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
-		L27.473,390.597L0.3,512.69z"/>
-</g>
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width=".85em" height=".85em" viewBox="0 0 528.899 528.899" xml:space="preserve">
+	<path d="m328.883 89.125 107.59 107.589-272.34 272.34L56.604 361.465l272.279-272.34zm189.23-25.948-47.981-47.981c-18.543-18.543-48.653-18.543-67.259 0l-45.961 45.961 107.59 107.59 53.611-53.611c14.382-14.383 14.382-37.577 0-51.959zM.3 512.69c-1.958 8.812 5.998 16.708 14.811 14.565l119.891-29.069L27.473 390.597.3 512.69z"/>
 </svg>
\ No newline at end of file
diff --git a/src/lib/components/Message.svelte b/src/lib/components/Message.svelte
index 305e22f..a2ebaf0 100644
--- a/src/lib/components/Message.svelte
+++ b/src/lib/components/Message.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths'
-    import { type IMessage } from '$lib/index.svelte'
+    import { type Message } from '$lib/index.svelte'
     import Markdown from 'svelte-exmarkdown'
     import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 
@@ -12,8 +12,8 @@
         onedit,
         isLast,
     }: {
-        value: IMessage
-        ondelete: (message: IMessage) => void
+        value: Message
+        ondelete: (message: Message) => void
         isLast: boolean
     } = $props()
 
diff --git a/src/lib/index.svelte.ts b/src/lib/index.svelte.ts
index 6108e6d..ba79fa3 100644
--- a/src/lib/index.svelte.ts
+++ b/src/lib/index.svelte.ts
@@ -32,7 +32,7 @@ export type MessageData = {
     }
 }
 
-export interface IMessage {
+export type Message = {
     data: MessageData
 
     id: Id
@@ -49,11 +49,11 @@ export function createMessage(text: string): MessageData {
 }
 
 class Messages {
-    inner: { [id: Id]: IMessage } = $state({})
+    inner: { [id: Id]: Message } = $state({})
 
     constructor(private id_provider: IdProvider = NANOID_PROVIDER) {}
 
-    get(id: Id): IMessage | null {
+    get(id: Id): Message | null {
         return this.inner[id] ?? null
     }
 
@@ -90,10 +90,7 @@ class Messages {
         delete this.inner[id]
     }
 
-    edit(id: Id, newContent: string) {
-        const message = this.inner[id]
-        if (!message) return
-
+    edit(message: Message, newContent: string) {
         message.data.content = newContent
     }
 
@@ -115,11 +112,11 @@ class Messages {
         return this.inner[id].children.size === 0
     }
 
-    chatFrom(id: Id, count: number = 20): IMessage[] {
+    chatFrom(id: Id, count: number = 20): Message[] {
         const out = []
         let iter_id: Id | null = id
         while (count-- > 0) {
-            const message: IMessage = this.inner[iter_id!]
+            const message: Message = this.inner[iter_id!]
             if (!message) break
             iter_id = message.parent
             out.push(message)
@@ -132,7 +129,7 @@ class Messages {
         let iter_id: Id | null = id
 
         while (iter_id) {
-            const message: IMessage = this.inner[iter_id!]
+            const message: Message = this.inner[iter_id!]
             if (!message) break
             if (message.children.size !== 1) break
             const firstChild = message.children.values().next().value
@@ -142,7 +139,7 @@ class Messages {
         return iter_id!
     }
 
-    lastCreatedAt(): IMessage | null {
+    lastCreatedAt(): Message | null {
         const msgs = Object.values(this.inner)
 
         if (msgs.length < 1) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b5a4a4c..b7fe36b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import Message from '$lib/components/Message.svelte'
+    import MessageComponent from '$lib/components/Message.svelte'
     import {
         createMessage,
         messages,
         type Id,
-        type IMessage,
+        type Message,
     } from '$lib/index.svelte'
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
@@ -35,13 +35,17 @@
     let currentChat = $derived(messages.chatFrom(leafId!, 15).toReversed())
     let lastId = $derived(messages.untilBranchOrLeaf(leafId!))
 
-    let currEditableMessageId: Id | null = $state(null)
+    let currentEditingMessage: Message | null = $state(null)
     let textInput = $state('')
     // TODO: Make a multiline chat input that grows dynamically
     let textInputElement: HTMLInputElement | null = $state(null)
 
+    function saveMessagesOnLocalStorage() {
+        localStorage.setItem('notes', JSON.stringify(messages.export()))
+    }
+
     function appendMessage() {
-        if (currEditableMessageId) {
+        if (currentEditingMessage) {
             onEditMessage()
             return
         }
@@ -51,7 +55,7 @@
 
         textInput = ''
 
-        localStorage.setItem('notes', JSON.stringify(messages.export()))
+        saveMessagesOnLocalStorage()
 
         let url = $page.url
         url.hash = leafId
@@ -60,7 +64,7 @@
         setTimeout(() => textInputElement!.focus(), 0)
     }
 
-    function deleteMessage(value: IMessage) {
+    function deleteMessage(value: Message) {
         if (messages.isLeaf(value.id)) {
             let id = value.parent ?? messages.lastCreatedAt()!.id
             goto(`${base}/#${id}`)
@@ -70,25 +74,30 @@
     }
 
     function onEditMessage() {
-        if (currEditableMessageId) {
-            messages.edit(currEditableMessageId, textInput)
-            currEditableMessageId = null
-            textInput = ''
-        }
+        if (!currentEditingMessage) return
+
+        messages.edit(currentEditingMessage, textInput)
+
+        saveMessagesOnLocalStorage()
+
+        currentEditingMessage = null
+        textInput = ''
+
+        setTimeout(() => textInputElement?.focus(), 0)
     }
 
-    function focusOnMessage(value: IMessage) {
+    function startEditing(value: Message) {
         textInput = value.data.content
-        currEditableMessageId = value.id
+        currentEditingMessage = value
 
         textInputElement?.focus()
     }
 
-    function onEditMessageByKeyDown(e: KeyboardEvent) {
+    function startEditByShortcut(e: KeyboardEvent) {
         if (e.key === 'ArrowUp') {
             const lastMessage = messages.get(lastId)
             if (lastMessage) {
-                focusOnMessage(lastMessage)
+                startEditing(lastMessage)
             }
         }
     }
@@ -99,10 +108,10 @@
     <div class="h-screen flex flex-col justify-end overflow-y-auto p-4 pb-36">
         {#if currentChat}
             {#each currentChat as message}
-                <Message
+                <MessageComponent
                     value={message}
                     ondelete={deleteMessage}
-                    onedit={focusOnMessage}
+                    onedit={startEditing}
                     isLast={message.id === lastId}
                 />
             {/each}
@@ -129,7 +138,9 @@
     </div>
 
     <footer
-        class={`dark:text-white ${currEditableMessageId ? 'bg-orange-100' : 'bg-slate-100'} dark:bg-slate-700 border-t border-gray-300 dark:border-slate-600 p-4 absolute left-0 bottom-0 w-full`}
+        class:bg-orange-100={currentEditingMessage}
+        class:bg-slate-100={!currentEditingMessage}
+        class="dark:text-white dark:bg-slate-700 border-t border-gray-300 dark:border-slate-600 p-4 absolute left-0 bottom-0 w-full"
     >
         <form
             class="flex items-center container mx-auto"
@@ -137,7 +148,7 @@
         >
             <input
                 type="text"
-                onkeydown={onEditMessageByKeyDown}
+                onkeydown={startEditByShortcut}
                 bind:this={textInputElement}
                 bind:value={textInput}
                 placeholder="Type a message..."