disable button to clear messages when chat empty

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>