From 333d23d704823d93dd2b7b5312877c0d235d6021 Mon Sep 17 00:00:00 2001
From: jokob-sk <jokob.sk@gmail.com>
Date: Mon, 6 Oct 2025 09:23:23 +1100
Subject: [PATCH] FE: device name in tab title #1162

Signed-off-by: jokob-sk <jokob.sk@gmail.com>
---
 front/deviceDetails.php | 34 +++++++++++-------
 front/js/modal.js       | 80 +++++++++++++++++++++++++++++++++--------
 2 files changed, 87 insertions(+), 27 deletions(-)

diff --git a/front/deviceDetails.php b/front/deviceDetails.php
index 2b775997..0bad701e 100755
--- a/front/deviceDetails.php
+++ b/front/deviceDetails.php
@@ -512,21 +512,29 @@ function updateDevicePageName(mac) {
   }
 
   // Page title - Name
-  if (mac == "new") {
-    $('#pageTitle').html(
-      `<i title="${getString("Gen_create_new_device")}" class="fa fa-square-plus"></i> ` + getString("Gen_create_new_device")
-    );
-    $('#devicePageInfoPlc .inner').html(
-      `<i class="fa fa-circle-info"></i> ` + getString("Gen_create_new_device_info")
-    );
-    $('#devicePageInfoPlc').show();
-  } else if (!owner || (name.toString()).indexOf(owner) !== -1) {
-    $('#pageTitle').html(name);
-    $('#devicePageInfoPlc').hide();
+  let pageTitleText;
+
+  if (mac === "new") {
+      pageTitleText = getString("Gen_create_new_device");
+      $('#pageTitle').html(
+          `<i title="${pageTitleText}" class="fa fa-square-plus"></i> ` + pageTitleText
+      );
+      $('#devicePageInfoPlc .inner').html(
+          `<i class="fa fa-circle-info"></i> ` + getString("Gen_create_new_device_info")
+      );
+      $('#devicePageInfoPlc').show();
+  } else if (!owner || name.toString().includes(owner)) {
+      pageTitleText = name;
+      $('#pageTitle').html(pageTitleText);
+      $('#devicePageInfoPlc').hide();
   } else {
-    $('#pageTitle').html(name + ' (' + owner + ')');
-    $('#devicePageInfoPlc').hide();
+      pageTitleText = `${name} (${owner})`;
+      $('#pageTitle').html(pageTitleText);
+      $('#devicePageInfoPlc').hide();
   }
+
+  // Prepend to the <title> tag
+  $('title').html(pageTitleText + ' - ' + $('title').html());
 }
 
 
diff --git a/front/js/modal.js b/front/js/modal.js
index 2fb79e71..54073067 100755
--- a/front/js/modal.js
+++ b/front/js/modal.js
@@ -497,26 +497,78 @@ function checkNotification() {
   });
 }
 
-// Handling unread notifications favicon + bell floating number bublbe
+/**
+ * Handles unread notification indicators:
+ * - Updates the floating bell count bubble.
+ * - Changes the favicon to indicate unread notifications.
+ * - Updates the page title with a numeric prefix like "(3)".
+ *
+ * The function expects that the favicon element has the ID `#favicon`
+ * and that the bell count element has the ID `#unread-notifications-bell-count`.
+ *
+ * @param {number} count - The number of unread notifications.
+ *
+ * @example
+ * handleUnreadNotifications(3);
+ * // → shows "(3)" in the title, notification icon, and bell bubble
+ *
+ * handleUnreadNotifications(0);
+ * // → restores original favicon and hides bubble
+ */
 function handleUnreadNotifications(count) {
-  $('#unread-notifications-bell-count').html(count);
+  const $countBubble = $('#unread-notifications-bell-count');
+  const $favicon = $('#favicon');
+
+  // Capture current title — ideally cache the original globally if calling repeatedly
+  const originalTitle = document.title;
+
+  // Update notification bubble and favicon
+  $countBubble.html(count);
   if (count > 0) {
-    $('#unread-notifications-bell-count').show();
-    // Change the favicon to show there are notifications
-    $('#favicon').attr('href', 'img/NetAlertX_logo_notification.png');
-    // Update the title to include the count
-    document.title = `(${count}) ` + originalTitle;
+    $countBubble.show();
+    $favicon.attr('href', 'img/NetAlertX_logo_notification.png');
   } else {
-    $('#unread-notifications-bell-count').hide();
-    // Change the favicon back to the original
-    $('#favicon').attr('href', 'img/NetAlertX_logo.png');
-    // Revert the title to the original title
-    document.title = originalTitle;
+    $countBubble.hide();
+    $favicon.attr('href', 'img/NetAlertX_logo.png');
   }
+
+  // Update the document title with "(count)" prefix
+  document.title = addOrUpdateNumberBrackets(originalTitle, count);
 }
 
-// Store the original title of the document
-var originalTitle = document.title;
+/**
+ * Adds, updates, or removes a numeric prefix in parentheses before a given string.
+ *
+ * Behavior:
+ * - If `count` is 0 → removes any existing "(...)" prefix.
+ * - If string already starts with "(...)" → replaces it with the new count.
+ * - Otherwise → adds "(count)" as a prefix before the input text.
+ *
+ * Examples:
+ *   addOrUpdateNumberBrackets("Device", 3)       → "(3) Device"
+ *   addOrUpdateNumberBrackets("(1) Device", 4)   → "(4) Device"
+ *   addOrUpdateNumberBrackets("(5) Device", 0)   → "Device"
+ *
+ * @param {string} input - The input string (e.g., a device name).
+ * @param {number} count - The number to place inside the parentheses.
+ * @returns {string} The updated string with the correct "(count)" prefix.
+ */
+function addOrUpdateNumberBrackets(input, count) {
+  let result = input.trim();
+
+  if (count === 0) {
+    // Remove any existing "(...)" prefix
+    result = result.replace(/^\(.*?\)\s*/, '');
+  } else if (/^\(.*?\)/.test(result)) {
+    // Replace existing "(...)" prefix
+    result = result.replace(/^\(.*?\)/, `(${count})`);
+  } else {
+    // Add new "(count)" prefix
+    result = `(${count}) ${result}`;
+  }
+
+  return result.trim();
+}
 
 
 // Start checking for notifications periodically