add button to delete messages that failed to send

public/index.html

@@ -208,7 +208,6 @@
                                             </div>
                                         </a>
                                     </div>
-
                                 </div>
                             </div>
 
@@ -218,6 +217,7 @@
 
                                     <!-- state label -->
                                     <div class="my-auto space-x-1">
+                                        <span v-if="chatItem.lxmf_message.state === 'failed'" @click="deleteChatItem(chatItem)" class="text-gray-500 underline">delete?</span>
                                         <span>{{ chatItem.lxmf_message.state }}</span>
                                         <span v-if="chatItem.lxmf_message.state === 'sending'">{{ chatItem.lxmf_message.progress }}%</span>
                                     </div>
@@ -744,6 +744,26 @@
                     // do nothing if failed to load messages
                 }
             },
+            async deleteChatItem(chatItem) {
+                try {
+
+                    // make sure it's an lxmf message
+                    if(chatItem.type !== "lxmf_message"){
+                        return;
+                    }
+
+                    // delete lxmf message from server
+                    await window.axios.delete(`/api/v1/lxmf-messages/${chatItem.lxmf_message.id}`);
+
+                    // remove lxmf message from chat items
+                    this.chatItems = this.chatItems.filter((item) => {
+                        return item.lxmf_message?.id !== chatItem.lxmf_message.id;
+                    });
+
+                } catch(e) {
+                    // do nothing if failed to delete message
+                }
+            },
             addNewLine: function() {
                 this.newMessageText += "\n";
             },

web.py

@@ -188,6 +188,26 @@ class ReticulumWebChat:
                 "lxmf_messages": lxmf_messages,
             })
 
+        # serve lxmf messages
+        @routes.delete("/api/v1/lxmf-messages/{id}")
+        async def index(request):
+
+            # get path params
+            id = request.match_info.get("id", None)
+
+            # source_hash is required
+            if id is None:
+                return web.json_response({
+                    "message": "id is required",
+                }, status=422)
+
+            # delete lxmf messages from db where id matches
+            database.LxmfMessage.delete_by_id(id)
+
+            return web.json_response({
+                "message": "ok",
+            })
+
         asyncio.get_event_loop().add_signal_handler(signal.SIGINT, lambda: exit(-1))
         asyncio.get_event_loop().add_signal_handler(signal.SIGTERM, lambda: exit(-1))