disable button to clear messages when chat empty

dist/index.js

@@ -363,6 +363,7 @@
     cannotAddSecondaryChannel;
     cannotSetChannel;
     cannotUndoChannel;
+    cannotClearMessages;
     // init
     constructor(id = UUID()) {
       this.id = id;
@@ -403,6 +404,10 @@
         [this.primaryChannelInput, this.primaryChannel],
         () => this.primaryChannelInput.value == this.primaryChannel.value
       );
+      this.cannotClearMessages = createProxyState(
+        [this.messages],
+        () => this.messages.value.size == 0
+      );
     }
     // general
     deleteSelf = () => {
@@ -952,7 +957,16 @@
         "bind:value": chat.encryptionKey,
         "set:type": inputType
       }
-    ))), /* @__PURE__ */ createElement("label", { class: "inline margin-0" }, /* @__PURE__ */ createElement("input", { type: "checkbox", "bind:checked": shouldShowKey }), translation.showKey)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { class: "danger", "on:click": chat.clearMessages }, translation.clearChatMessages, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete_sweep")), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteChat }, translation.removeChat, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("button", { "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    ))), /* @__PURE__ */ createElement("label", { class: "inline margin-0" }, /* @__PURE__ */ createElement("input", { type: "checkbox", "bind:checked": shouldShowKey }), translation.showKey)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "danger",
+        "on:click": chat.clearMessages,
+        "toggle:disabled": chat.cannotClearMessages
+      },
+      translation.clearChatMessages,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "delete_sweep")
+    ), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteChat }, translation.removeChat, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")))), /* @__PURE__ */ createElement("button", { "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
   // src/Views/messageComposer.tsx

src/Model/chatModel.ts

@@ -1,6 +1,13 @@
 import * as React from "bloatless-react";
 
-import { UDN, chatIds, chats, isConnected, senderName, updateMailbox } from "../Model/model";
+import {
+  UDN,
+  chatIds,
+  chats,
+  isConnected,
+  senderName,
+  updateMailbox,
+} from "../Model/model";
 import { decryptString, encryptString } from "../cryptUtility";
 
 import { Message } from "udn-frontend";
@@ -34,6 +41,7 @@ export class Chat {
   cannotAddSecondaryChannel: React.State<boolean>;
   cannotSetChannel: React.State<boolean>;
   cannotUndoChannel: React.State<boolean>;
+  cannotClearMessages: React.State<boolean>;
 
   // init
   constructor(id: string = React.UUID()) {
@@ -90,6 +98,10 @@ export class Chat {
       [this.primaryChannelInput, this.primaryChannel],
       () => this.primaryChannelInput.value == this.primaryChannel.value
     );
+    this.cannotClearMessages = React.createProxyState(
+      [this.messages],
+      () => this.messages.value.size == 0
+    );
   }
 
   // general

src/Views/chatOptionModal.tsx

@@ -130,7 +130,11 @@ export function ChatOptionModal(chat: Chat, isPresented: React.State<boolean>) {
           <hr></hr>
 
           <div class="flex-column gap">
-            <button class="danger" on:click={chat.clearMessages}>
+            <button
+              class="danger"
+              on:click={chat.clearMessages}
+              toggle:disabled={chat.cannotClearMessages}
+            >
               {translation.clearChatMessages}
               <span class="icon">delete_sweep</span>
             </button>