Add editing chat name from menu

src/app.scss

@@ -231,16 +231,16 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
 
 .menu-list {
   a:hover {
-    .delete-button {
+    .delete-button, .edit-button {
       display: block !important;
       background-color: initial;
     }
   }
-  .delete-button {
+  .delete-button, .edit-button {
     opacity: .8;
   }
   
-  .delete-button:hover {
+  .delete-button:hover, .edit-button {
     opacity: 1;
   }
 }
@@ -321,6 +321,17 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
   z-index: 200;
 }
 
+.chat-menu-item .edit-button {
+  position: absolute;
+  right: 2em;
+  z-index: 200;
+}
+
+.chat-name-editor {
+  margin: .5em;
+  padding:.1em;
+}
+
 /* Overrides for main layout  */
 
 .side-bar-column {

src/lib/ChatMenuItem.svelte

@@ -1,19 +1,52 @@
 <script lang="ts">
   import { replace } from 'svelte-spa-router'
   import type { Chat } from './Types.svelte'
-  import { apiKeyStorage, deleteChat, pinMainMenu } from './Storage.svelte'
+  import { apiKeyStorage, deleteChat, pinMainMenu, saveChatStore } from './Storage.svelte'
   import Fa from 'svelte-fa/src/fa.svelte'
-  import { faTrash, faCircleCheck } from '@fortawesome/free-solid-svg-icons/index'
+  import { faTrash, faCircleCheck, faPencil } from '@fortawesome/free-solid-svg-icons/index'
   import { faMessage } from '@fortawesome/free-regular-svg-icons/index'
+  import { onMount } from 'svelte'
 
   export let chat:Chat
   export let activeChatId:number|undefined
   export let prevChat:Chat|undefined
   export let nextChat:Chat|undefined
 
+  let editing:boolean = false
+  let original:string
+
   let waitingForConfirm:any = 0
 
-  function delChat () {
+  onMount(async () => {
+    if (!chat.name) {
+      chat.name = `Chat ${chat.id}`
+    }
+  })
+
+  const keydown = (event:KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation()
+      event.preventDefault()
+      chat.name = original
+      editing = false
+    }
+    if (event.key === 'Tab' || event.key === 'Enter') {
+      event.stopPropagation()
+      event.preventDefault()
+      update()
+    }
+  }
+
+  const update = () => {
+    editing = false
+    if (!chat.name) {
+      chat.name = original
+      return
+    }
+    saveChatStore()
+  }
+
+  const delChat = () => {
     if (!waitingForConfirm) {
       // wait a second for another click to avoid accidental deletes
       waitingForConfirm = setTimeout(() => { waitingForConfirm = 0 }, 1000)
@@ -35,15 +68,33 @@
     }
   }
 
+  const edit = () => {
+    original = chat.name
+    editing = true
+    setTimeout(() => {
+      const el = document.getElementById(`chat-menu-item-${chat.id}`)
+      el && el.focus()
+    }, 0)
+  }
+
 </script>
 
 <li>
-  <a class="chat-menu-item" href={`#/chat/${chat.id}`} on:click={() => { $pinMainMenu = false }} class:is-waiting={waitingForConfirm} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}>
+  {#if editing}
+    <div id="chat-menu-item-{chat.id}" class="chat-name-editor" on:keydown={keydown} contenteditable bind:innerText={chat.name} on:blur={update} />
+  {:else}
+  <a 
+    href={`#/chat/${chat.id}`}
+    class="chat-menu-item"
+    class:is-waiting={waitingForConfirm} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}
+    on:click={() => { $pinMainMenu = false }} >
     {#if waitingForConfirm}
     <a class="is-pulled-right is-hidden px-1 py-0 has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faCircleCheck} /></a>
     {:else}
+    <a class="is-pulled-right is-hidden px-1 py-0 has-text-weight-bold edit-button" href={'$'} on:click|preventDefault={() => edit()}><Fa icon={faPencil} /></a>
     <a class="is-pulled-right is-hidden px-1 py-0 has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faTrash} /></a>
     {/if}
     <span class="chat-item-name"><Fa class="mr-2 chat-icon" size="xs" icon="{faMessage}"/>{chat.name || `Chat ${chat.id}`}</span>
   </a>
+  {/if}
 </li>