From a1c87bebf3c16e48c287d547753afceeaf760da0 Mon Sep 17 00:00:00 2001
From: Sudo-Ivan <ivan@quad4.io>
Date: Sat, 3 Jan 2026 18:42:59 -0600
Subject: [PATCH] fix(App): refine notification logic for incoming messages;
 enhance button formatting in changelog modal; improve icon color handling in
 user icon component

---
 meshchatx/src/frontend/components/App.vue     |  2 +-
 .../frontend/components/ChangelogModal.vue    | 16 +++++++--
 .../src/frontend/components/LxmfUserIcon.vue  | 16 +++++++--
 .../components/MaterialDesignIcon.vue         | 18 ++++++----
 .../frontend/components/about/AboutPage.vue   |  6 +++-
 .../components/debug/DebugLogsPage.vue        | 36 +++++++++++++------
 .../components/profile/ProfileIconPage.vue    | 20 ++++++-----
 7 files changed, 83 insertions(+), 31 deletions(-)

diff --git a/meshchatx/src/frontend/components/App.vue b/meshchatx/src/frontend/components/App.vue
index 21bd422..bb2bcb7 100644
--- a/meshchatx/src/frontend/components/App.vue
+++ b/meshchatx/src/frontend/components/App.vue
@@ -735,7 +735,7 @@ export default {
 
                     // show notification for new messages if window is not focussed
                     // only for incoming messages
-                    if (!document.hasFocus() && json.lxmf_message?.is_incoming) {
+                    if (!document.hasFocus() && json.lxmf_message?.is_incoming === true) {
                         NotificationUtils.showNewMessageNotification(
                             json.remote_identity_name,
                             json.lxmf_message?.content
diff --git a/meshchatx/src/frontend/components/ChangelogModal.vue b/meshchatx/src/frontend/components/ChangelogModal.vue
index 619abb2..2d3ccf6 100644
--- a/meshchatx/src/frontend/components/ChangelogModal.vue
+++ b/meshchatx/src/frontend/components/ChangelogModal.vue
@@ -50,7 +50,13 @@
                 <div v-else-if="error" class="flex flex-col items-center justify-center h-full text-center space-y-4">
                     <v-icon icon="mdi-alert-circle-outline" size="64" color="red"></v-icon>
                     <div class="text-red-500 font-bold text-lg">{{ error }}</div>
-                    <v-btn color="blue" variant="flat" class="font-bold uppercase px-6" rounded="lg" @click="fetchChangelog">
+                    <v-btn
+                        color="blue"
+                        variant="flat"
+                        class="font-bold uppercase px-6"
+                        rounded="lg"
+                        @click="fetchChangelog"
+                    >
                         Retry
                     </v-btn>
                 </div>
@@ -131,7 +137,13 @@
                 <div v-else-if="error" class="flex flex-col items-center justify-center py-20 text-center space-y-4">
                     <v-icon icon="mdi-alert-circle-outline" size="64" color="red"></v-icon>
                     <div class="text-red-500 font-bold text-lg">{{ error }}</div>
-                    <v-btn color="blue" variant="flat" class="font-bold uppercase px-6" rounded="lg" @click="fetchChangelog">
+                    <v-btn
+                        color="blue"
+                        variant="flat"
+                        class="font-bold uppercase px-6"
+                        rounded="lg"
+                        @click="fetchChangelog"
+                    >
                         Retry
                     </v-btn>
                 </div>
diff --git a/meshchatx/src/frontend/components/LxmfUserIcon.vue b/meshchatx/src/frontend/components/LxmfUserIcon.vue
index 32a2ac2..30d1435 100644
--- a/meshchatx/src/frontend/components/LxmfUserIcon.vue
+++ b/meshchatx/src/frontend/components/LxmfUserIcon.vue
@@ -9,10 +9,10 @@
     <div
         v-else-if="iconName"
         class="p-[15%] rounded-full shrink-0 flex items-center justify-center"
-        :style="{ 'background-color': iconBackgroundColour }"
+        :style="{ 'background-color': finalBackgroundColor }"
         :class="iconClass || 'size-6'"
     >
-        <MaterialDesignIcon :icon-name="iconName" class="w-full h-full" :style="{ color: iconForegroundColour }" />
+        <MaterialDesignIcon :icon-name="iconName" class="w-full h-full" :style="{ color: finalForegroundColor }" />
     </div>
     <div
         v-else
@@ -52,5 +52,17 @@ export default {
             default: "",
         },
     },
+    computed: {
+        finalForegroundColor() {
+            return this.iconForegroundColour && this.iconForegroundColour !== ""
+                ? this.iconForegroundColour
+                : "#6b7280";
+        },
+        finalBackgroundColor() {
+            return this.iconBackgroundColour && this.iconBackgroundColour !== ""
+                ? this.iconBackgroundColour
+                : "#e5e7eb";
+        },
+    },
 };
 </script>
diff --git a/meshchatx/src/frontend/components/MaterialDesignIcon.vue b/meshchatx/src/frontend/components/MaterialDesignIcon.vue
index 3d9279d..aecdc35 100644
--- a/meshchatx/src/frontend/components/MaterialDesignIcon.vue
+++ b/meshchatx/src/frontend/components/MaterialDesignIcon.vue
@@ -29,7 +29,7 @@ export default {
     computed: {
         mdiIconName() {
             if (!this.iconName) return "mdiAccountOutline";
-            
+
             // if already starts with mdi and is camelCase, return as is
             if (this.iconName.startsWith("mdi") && /[A-Z]/.test(this.iconName)) {
                 return this.iconName;
@@ -41,7 +41,7 @@ export default {
                 "mdi" +
                 this.iconName
                     .split("-")
-                    .filter(word => word.length > 0)
+                    .filter((word) => word.length > 0)
                     .map((word) => {
                         // capitalise first letter of each part
                         return word.charAt(0).toUpperCase() + word.slice(1);
@@ -50,12 +50,18 @@ export default {
             );
         },
         iconPath() {
-            if (!mdi) return "";
-            
-            const path = mdi[this.mdiIconName];
+            if (!mdi || Object.keys(mdi).length === 0) {
+                console.error("MDI library not loaded or empty");
+                return "";
+            }
+
+            const name = this.mdiIconName;
+            const path = mdi[name];
+
             if (path) return path;
-            
+
             // fallback logic
+            console.warn(`Icon not found: ${name} (original: ${this.iconName})`);
             return mdi["mdiHelpCircleOutline"] || mdi["mdiProgressQuestion"] || "";
         },
     },
diff --git a/meshchatx/src/frontend/components/about/AboutPage.vue b/meshchatx/src/frontend/components/about/AboutPage.vue
index ab8ec20..16846f8 100644
--- a/meshchatx/src/frontend/components/about/AboutPage.vue
+++ b/meshchatx/src/frontend/components/about/AboutPage.vue
@@ -265,7 +265,11 @@
                                     {{ $t("about.backend_dependencies") }}
                                 </div>
                                 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
-                                    <div v-for="(version, name) in appInfo.dependencies" :key="name" class="flex flex-col">
+                                    <div
+                                        v-for="(version, name) in appInfo.dependencies"
+                                        :key="name"
+                                        class="flex flex-col"
+                                    >
                                         <span class="text-[10px] font-black text-blue-500/70 uppercase">{{
                                             name.replace("_", " ")
                                         }}</span>
diff --git a/meshchatx/src/frontend/components/debug/DebugLogsPage.vue b/meshchatx/src/frontend/components/debug/DebugLogsPage.vue
index 8382ba6..bc63f7b 100644
--- a/meshchatx/src/frontend/components/debug/DebugLogsPage.vue
+++ b/meshchatx/src/frontend/components/debug/DebugLogsPage.vue
@@ -21,7 +21,9 @@
                     </div>
                 </div>
 
-                <div class="flex flex-wrap gap-3 items-center bg-white/50 dark:bg-zinc-800/50 p-3 rounded-lg border border-gray-200 dark:border-zinc-700">
+                <div
+                    class="flex flex-wrap gap-3 items-center bg-white/50 dark:bg-zinc-800/50 p-3 rounded-lg border border-gray-200 dark:border-zinc-700"
+                >
                     <div class="relative flex-1 min-w-[200px]">
                         <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                             <MaterialDesignIcon icon-name="magnify" class="w-4 h-4 text-gray-400" />
@@ -34,7 +36,7 @@
                             @input="debouncedSearch"
                         />
                     </div>
-                    
+
                     <select
                         v-model="level"
                         class="block pl-3 pr-10 py-2 text-base border-gray-300 dark:border-zinc-600 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md bg-white dark:bg-zinc-900 text-gray-900 dark:text-white"
@@ -61,15 +63,17 @@
             </div>
 
             <div class="flex-1 overflow-hidden glass-card max-w-6xl mx-auto w-full p-0 flex flex-col rounded-sm">
-                <div class="flex-1 overflow-auto p-4 font-mono text-[10px] sm:text-xs leading-relaxed select-text bg-white dark:bg-zinc-950">
+                <div
+                    class="flex-1 overflow-auto p-4 font-mono text-[10px] sm:text-xs leading-relaxed select-text bg-white dark:bg-zinc-950"
+                >
                     <div v-if="logs.length === 0" class="text-gray-500 italic text-center py-10">
-                        {{ loading ? 'Loading logs...' : 'No logs found matching your criteria.' }}
+                        {{ loading ? "Loading logs..." : "No logs found matching your criteria." }}
                     </div>
                     <div
                         v-for="(log, index) in logs"
                         :key="index"
                         class="border-b border-gray-100 dark:border-zinc-900 py-1 flex gap-3 hover:bg-gray-50 dark:hover:bg-zinc-900/50"
-                        :class="{'bg-red-50/30 dark:bg-red-900/10': log.is_anomaly}"
+                        :class="{ 'bg-red-50/30 dark:bg-red-900/10': log.is_anomaly }"
                     >
                         <span class="text-gray-400 shrink-0">{{ formatTime(log.timestamp) }}</span>
                         <span :class="levelClass(log.level)" class="w-12 shrink-0 font-bold uppercase">{{
@@ -80,16 +84,21 @@
                         >
                         <span class="text-gray-800 dark:text-gray-200 break-words flex-1">
                             {{ log.message }}
-                            <span v-if="log.is_anomaly" class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded-full text-[8px] font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 uppercase">
+                            <span
+                                v-if="log.is_anomaly"
+                                class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded-full text-[8px] font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 uppercase"
+                            >
                                 <MaterialDesignIcon icon-name="alert-circle" class="w-2.5 h-2.5 mr-1" />
-                                {{ log.anomaly_type || 'anomaly' }}
+                                {{ log.anomaly_type || "anomaly" }}
                             </span>
                         </span>
                     </div>
                 </div>
-                
+
                 <!-- Pagination -->
-                <div class="px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-900/50">
+                <div
+                    class="px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-900/50"
+                >
                     <div class="flex-1 flex justify-between sm:hidden">
                         <button
                             class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
@@ -226,7 +235,7 @@ export default {
         formatTime(timestamp) {
             try {
                 // If timestamp is a number (Unix timestamp from Python), multiply by 1000 for JS
-                const ts = typeof timestamp === 'number' ? timestamp * 1000 : timestamp;
+                const ts = typeof timestamp === "number" ? timestamp * 1000 : timestamp;
                 const date = new Date(ts);
                 return date.toLocaleString();
             } catch {
@@ -242,7 +251,12 @@ export default {
             return "text-gray-400";
         },
         async copyLogs() {
-            const logText = this.logs.map((l) => `${this.formatTime(l.timestamp)} [${l.level}] [${l.module}] ${l.message}${l.is_anomaly ? ' [ANOMALY:' + l.anomaly_type + ']' : ''}`).join("\n");
+            const logText = this.logs
+                .map(
+                    (l) =>
+                        `${this.formatTime(l.timestamp)} [${l.level}] [${l.module}] ${l.message}${l.is_anomaly ? " [ANOMALY:" + l.anomaly_type + "]" : ""}`
+                )
+                .join("\n");
             try {
                 await navigator.clipboard.writeText(logText);
                 ToastUtils.success("Logs on this page copied to clipboard");
diff --git a/meshchatx/src/frontend/components/profile/ProfileIconPage.vue b/meshchatx/src/frontend/components/profile/ProfileIconPage.vue
index e79bd9b..b163afe 100644
--- a/meshchatx/src/frontend/components/profile/ProfileIconPage.vue
+++ b/meshchatx/src/frontend/components/profile/ProfileIconPage.vue
@@ -3,9 +3,7 @@
         <div class="overflow-y-auto">
             <div class="max-w-4xl mx-auto p-4 space-y-6">
                 <!-- Header with Preview -->
-                <div
-                    class="bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-200 dark:border-zinc-800"
-                >
+                <div class="bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-200 dark:border-zinc-800">
                     <div class="p-6 border-b border-gray-200 dark:border-zinc-800">
                         <div class="flex items-center justify-between">
                             <div>
@@ -66,9 +64,7 @@
                 </div>
 
                 <!-- Color Selection -->
-                <div
-                    class="bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-200 dark:border-zinc-800"
-                >
+                <div class="bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-200 dark:border-zinc-800">
                     <div class="p-4 border-b border-gray-200 dark:border-zinc-800">
                         <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Colors</h3>
                     </div>
@@ -147,9 +143,17 @@
                                 @click="onIconClick(mdiIconName)"
                             >
                                 <LxmfUserIcon
+                                    :key="
+                                        mdiIconName +
+                                        (iconName === mdiIconName ? iconForegroundColour + iconBackgroundColour : '')
+                                    "
                                     :icon-name="mdiIconName"
-                                    :icon-foreground-colour="iconForegroundColour"
-                                    :icon-background-colour="iconBackgroundColour"
+                                    :icon-foreground-colour="
+                                        iconName === mdiIconName ? iconForegroundColour : '#6b7280'
+                                    "
+                                    :icon-background-colour="
+                                        iconName === mdiIconName ? iconBackgroundColour : '#e5e7eb'
+                                    "
                                     icon-class="size-8"
                                 />
                                 <div