Add chat renaming support, fix #8

src/app.scss

@@ -22,11 +22,17 @@ a.is-disabled {
 }
 
 /* Show the edit button on hover of the user message */
-.usermessage:hover > .message-body > .editbutton {
+.usermessage:hover .editbutton {
   /* TODO: add when ready: display: block !important; */
   text-decoration: none !important;
 }
 
+/* Show the edit button on hover of the chat name */
+.chatname:hover .editbutton {
+  display: inline !important;
+  text-decoration: none !important;
+}
+
 $footer-padding: 3rem 1.5rem;
 
 @import "/node_modules/bulma/bulma.sass";

src/lib/Chat.svelte

@@ -106,9 +106,21 @@
 </script>
 
 <nav class="level is-mobile">
-  <div class="level-left">
+  <div class="level-left chatname">
     <div class="level-item">
-      <p class="subtitle is-5">Chat {chatId}</p>
+      <p class="subtitle is-5">
+        {chat.name}
+        <a
+          href={"#"}
+          class="greyscale ml-2 is-hidden editbutton"
+          on:click|preventDefault={() => {
+            chat.name = prompt("Enter a new name for this chat", chat.name);
+            chatsStorage.set($chatsStorage);
+          }}
+        >
+          ✏️
+        </a>
+      </p>
     </div>
   </div>
 

src/lib/Sidebar.svelte

@@ -22,7 +22,7 @@
                 class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId === chat.id
                   ? 'has-background-light'
                   : ''}"
-                on:click|preventDefault={() => (activeChatId = chat.id)}>Chat {chat.id}</a
+                on:click|preventDefault={() => (activeChatId = chat.id)}>{chat.name}</a
               >
             </li>
           {/each}

src/lib/Storage.svelte

@@ -15,6 +15,7 @@
     // Add a new chat
     chats.push({
       id: chatId,
+      name: `Chat ${chatId}`,
       messages: [],
     });
     chatsStorage.set(chats);

src/lib/Types.svelte

@@ -1,6 +1,7 @@
 <script context="module" lang="ts">
   export type Chat = {
     id: number;
+    name: string;
     messages: Message[];
   };