allow deleting chat

dist/index.js

@@ -403,6 +403,14 @@
         () => this.primaryChannelInput.value == this.primaryChannel.value
       );
     }
+    // general
+    deleteSelf = () => {
+      Object.values(storageKeys).forEach((storageKey) => {
+        localStorage.removeItem(storageKey(this.id));
+      });
+      chats.remove(this);
+      chatIds.remove(this.id);
+    };
     // handlers
     onmessage = async (data) => {
       if (data.messageChannel && data.messageChannel != this.primaryChannel.value)
@@ -729,7 +737,6 @@
     newChatPrimaryChannel: "Primary channel",
     newChatNamePlaceholder: "my-channel",
     addChat: "Add",
-    removeChat: "Remove chat",
     // messages
     showChatOptions: "show chat options",
     configureChatTitle: "Configure Chat",
@@ -741,6 +748,7 @@
     removeSecondaryChannel: "Remove secondary channel",
     encryptionKey: "Encryption key",
     encryptionKeyPlaceholder: "n10d2482dg283hg",
+    removeChat: "Remove chat",
     noChatSelected: "No chat selected",
     composerPlaceholder: "Type a message...",
     sendMessage: "Send",
@@ -759,6 +767,10 @@
     function closeModal() {
       isPresented.value = false;
     }
+    function deleteChat() {
+      chat.deleteSelf();
+      closeModal();
+    }
     const secondaryChannelConverter = (secondaryChannel) => {
       function remove() {
         chat.removeSecondaryChannel(secondaryChannel);
@@ -830,7 +842,7 @@
         placeholder: translation.encryptionKeyPlaceholder,
         "bind:value": chat.encryptionKey
       }
-    )))), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteChat }, translation.removeChat, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete"))), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
   // src/Views/messageComposer.tsx

src/Model/chatModel.ts

@@ -86,11 +86,20 @@ export class Chat {
     );
     this.cannotUndoChannel = React.createProxyState(
       [this.primaryChannelInput, this.primaryChannel],
-      () =>
-        this.primaryChannelInput.value == this.primaryChannel.value
+      () => this.primaryChannelInput.value == this.primaryChannel.value
     );
   }
 
+  // general
+  deleteSelf = () => {
+    Object.values(storageKeys).forEach((storageKey) => {
+      localStorage.removeItem(storageKey(this.id));
+    });
+
+    chats.remove(this);
+    chatIds.remove(this.id);
+  }
+
   // handlers
   onmessage = async (data: Message): Promise<void> => {
     if (data.messageChannel && data.messageChannel != this.primaryChannel.value)
@@ -201,12 +210,3 @@ export function createChatWithName(name: string): void {
 
   UDN.subscribe(name);
 }
-
-export function removeChat(chat: Chat): void {
-  Object.values(storageKeys).forEach((cb) => {
-    localStorage.removeItem(cb(chat.id));
-  });
-
-  chats.remove(chat);
-  chatIds.remove(chat.id);
-}

src/Views/chatOptionModal.tsx

@@ -8,6 +8,11 @@ export function ChatOptionModal(chat: Chat, isPresented: React.State<boolean>) {
     isPresented.value = false;
   }
 
+  function deleteChat() {
+    chat.deleteSelf()
+    closeModal();
+  }
+
   const secondaryChannelConverter: React.ListItemConverter<string> = (
     secondaryChannel
   ) => {
@@ -108,8 +113,15 @@ export function ChatOptionModal(chat: Chat, isPresented: React.State<boolean>) {
               ></input>
             </div>
           </label>
+
+          <hr></hr>
+
+          <button class="danger" on:click={deleteChat}>
+            {translation.removeChat}
+            <span class="icon">delete</span>
+          </button>
         </main>
-        <button class="danger" on:click={closeModal}>
+        <button on:click={closeModal}>
           {translation.close}
           <span class="icon">close</span>
         </button>

src/translations.ts

@@ -34,7 +34,6 @@ const englishTranslations = {
   newChatPrimaryChannel: "Primary channel",
   newChatNamePlaceholder: "my-channel",
   addChat: "Add",
-  removeChat: "Remove chat",
 
   // messages
   showChatOptions: "show chat options",
@@ -51,6 +50,8 @@ const englishTranslations = {
   encryptionKey: "Encryption key",
   encryptionKeyPlaceholder: "n10d2482dg283hg",
 
+  removeChat: "Remove chat",
+
   noChatSelected: "No chat selected",
 
   composerPlaceholder: "Type a message...",