MessageLogger: Nicer context menu

src/plugins/messageLogger/index.tsx

@@ -51,11 +51,28 @@ const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) =
 
     if (!deleted && !editHistory?.length) return;
 
+    toggle: {
+        if (!deleted) break toggle;
+
+        const domElement = document.getElementById(`chat-messages-${channel_id}-${id}`);
+        if (!domElement) break toggle;
+
+        children.push((
+            <Menu.MenuItem
+                id={TOGGLE_DELETE_STYLE_ID}
+                key={TOGGLE_DELETE_STYLE_ID}
+                label="Toggle Deleted Highlight"
+                action={() => domElement.classList.toggle("messagelogger-deleted")}
+            />
+        ));
+    }
+
     children.push((
         <Menu.MenuItem
             id={REMOVE_HISTORY_ID}
             key={REMOVE_HISTORY_ID}
             label="Remove Message History"
+            color="danger"
             action={() => {
                 if (deleted) {
                     FluxDispatcher.dispatch({
@@ -70,20 +87,6 @@ const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) =
             }}
         />
     ));
-
-    if (!deleted) return;
-
-    const domElement = document.getElementById(`chat-messages-${channel_id}-${id}`);
-    if (!domElement) return;
-
-    children.push((
-        <Menu.MenuItem
-            id={TOGGLE_DELETE_STYLE_ID}
-            key={TOGGLE_DELETE_STYLE_ID}
-            label="Toggle Deleted Highlight"
-            action={() => domElement.classList.toggle("messagelogger-deleted")}
-        />
-    ));
 };
 
 export default definePlugin({

src/webpack/common/types/menu.d.ts

@@ -38,6 +38,7 @@ export interface Menu {
         label: string;
         action?(e: MouseEvent): void;
 
+        color?: string;
         render?: ComponentType;
         onChildrenScroll?: Function;
         childRowHeight?: number;