From 8c31ab39987be6178d6a561da8112ac369971410 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Thu, 10 Jul 2025 14:36:14 -0600
Subject: [PATCH 1/3] all messages anchor links poc

---
 .../src/components/audit/AuditListItem.vue    | 43 +++++++++++++++++--
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditListItem.vue b/src/Frontend/src/components/audit/AuditListItem.vue
index c44e1ffa6..3afe014d3 100644
--- a/src/Frontend/src/components/audit/AuditListItem.vue
+++ b/src/Frontend/src/components/audit/AuditListItem.vue
@@ -13,18 +13,51 @@ const props = defineProps<{
   message: Message;
 }>();
 
-function navigateToMessage(message: Message) {
+function getMessageUrl(message: Message) {
+  const path = message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id);
+
+  // Build the complete URL with hash routing and query parameters
+  const query = router.currentRoute.value.query;
+  const queryParams = new URLSearchParams();
+
+  // Add existing query parameters
+  Object.entries(query).forEach(([key, value]) => {
+    if (value !== null && value !== undefined) {
+      queryParams.append(key, String(value));
+    }
+  });
+
+  // Add the back parameter
+  queryParams.set("back", route.path);
+
+  const queryString = queryParams.toString();
+  return `#${path}${queryString ? `?${queryString}` : ""}`;
+}
+
+function navigateToMessage(message: Message, event?: MouseEvent) {
+  // Allow browser's native tab/window opening behavior
+  if (event && (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1)) {
+    return;
+  }
+
+  // For normal left-clicks, prevent default anchor behavior and use Vue Router
+  // This maintains SPA navigation and preserves the "back" query parameter
+  if (event) {
+    event.preventDefault();
+  }
+
   const query = router.currentRoute.value.query;
+  const path = message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id);
 
   router.push({
-    path: message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id),
+    path,
     query: { ...query, ...{ back: route.path } },
   });
 }
 </script>
 
 <template>
-  <div class="item" @click="navigateToMessage(props.message)">
+  <a class="item" :href="getMessageUrl(props.message)" @click="navigateToMessage(props.message, $event)">
     <div class="status">
       <MessageStatusIcon :message="props.message" />
     </div>
@@ -34,7 +67,7 @@ function navigateToMessage(message: Message) {
     <div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</div>
     <div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</div>
     <div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</div>
-  </div>
+  </a>
 </template>
 
 <style scoped>
@@ -49,6 +82,8 @@ function navigateToMessage(message: Message) {
   grid-template-areas:
     "status message-type message-type message-type time-sent"
     "status message-id processing-time critical-time delivery-time";
+  text-decoration: none;
+  color: inherit;
 }
 .item:not(:first-child) {
   border-top-color: #eee;

From 2401cb55d261c710b0678fb260ef63cf7606bff8 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Thu, 10 Jul 2025 18:26:06 -0600
Subject: [PATCH 2/3] add message type to the tab title

---
 src/Frontend/src/components/messages/MessageView.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Frontend/src/components/messages/MessageView.vue b/src/Frontend/src/components/messages/MessageView.vue
index 2af6bb6c9..6844628dc 100644
--- a/src/Frontend/src/components/messages/MessageView.vue
+++ b/src/Frontend/src/components/messages/MessageView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch, watchEffect } from "vue";
 import { RouteLocationAsPathGeneric, RouterLink, useRoute } from "vue-router";
 import NoData from "../NoData.vue";
 import TimeSince from "../TimeSince.vue";
@@ -98,6 +98,16 @@ onMounted(() => {
     backLink.value = { path: back.toString(), query: otherArgs };
   }
 });
+
+// Update document title to include message status and type for easier tab identification
+watchEffect(() => {
+  if (state.value.data.message_type) {
+    const statusEmoji = isError.value ? "❌" : "✅";
+    document.title = `${statusEmoji} ${state.value.data.message_type} - ServicePulse`;
+  } else {
+    document.title = "ServicePulse";
+  }
+});
 </script>
 
 <template>

From 0a56dee52afea0784e15cc2e7c6433817434a715 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Thu, 10 Jul 2025 18:34:27 -0600
Subject: [PATCH 3/3] using routerlink instead of anchor directly

---
 .../src/components/audit/AuditListItem.vue    | 67 ++++++-------------
 1 file changed, 21 insertions(+), 46 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditListItem.vue b/src/Frontend/src/components/audit/AuditListItem.vue
index 3afe014d3..255441767 100644
--- a/src/Frontend/src/components/audit/AuditListItem.vue
+++ b/src/Frontend/src/components/audit/AuditListItem.vue
@@ -13,61 +13,29 @@ const props = defineProps<{
   message: Message;
 }>();
 
-function getMessageUrl(message: Message) {
+function getMessageRoute(message: Message) {
   const path = message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id);
 
-  // Build the complete URL with hash routing and query parameters
   const query = router.currentRoute.value.query;
-  const queryParams = new URLSearchParams();
-
-  // Add existing query parameters
-  Object.entries(query).forEach(([key, value]) => {
-    if (value !== null && value !== undefined) {
-      queryParams.append(key, String(value));
-    }
-  });
-
-  // Add the back parameter
-  queryParams.set("back", route.path);
-
-  const queryString = queryParams.toString();
-  return `#${path}${queryString ? `?${queryString}` : ""}`;
-}
-
-function navigateToMessage(message: Message, event?: MouseEvent) {
-  // Allow browser's native tab/window opening behavior
-  if (event && (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1)) {
-    return;
-  }
-
-  // For normal left-clicks, prevent default anchor behavior and use Vue Router
-  // This maintains SPA navigation and preserves the "back" query parameter
-  if (event) {
-    event.preventDefault();
-  }
-
-  const query = router.currentRoute.value.query;
-  const path = message.status === MessageStatus.Successful || message.status === MessageStatus.ResolvedSuccessfully ? routeLinks.messages.successMessage.link(message.message_id, message.id) : routeLinks.messages.failedMessage.link(message.id);
-
-  router.push({
+  return {
     path,
-    query: { ...query, ...{ back: route.path } },
-  });
+    query: { ...query, back: route.path },
+  };
 }
 </script>
 
 <template>
-  <a class="item" :href="getMessageUrl(props.message)" @click="navigateToMessage(props.message, $event)">
-    <div class="status">
+  <RouterLink :to="getMessageRoute(props.message)" class="item">
+    <span class="status">
       <MessageStatusIcon :message="props.message" />
-    </div>
-    <div class="message-id">{{ props.message.message_id }}</div>
-    <div class="message-type">{{ props.message.message_type }}</div>
-    <div class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(props.message.time_sent).toLocaleString() }}</div>
-    <div class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</div>
-    <div class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</div>
-    <div class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</div>
-  </a>
+    </span>
+    <span class="message-id">{{ props.message.message_id }}</span>
+    <span class="message-type">{{ props.message.message_type }}</span>
+    <span class="time-sent"><span class="label-name">Time Sent:</span>{{ new Date(props.message.time_sent).toLocaleString() }}</span>
+    <span class="critical-time"><span class="label-name">Critical Time:</span>{{ formatDotNetTimespan(props.message.critical_time) }}</span>
+    <span class="processing-time"><span class="label-name">Processing Time:</span>{{ formatDotNetTimespan(props.message.processing_time) }}</span>
+    <span class="delivery-time"><span class="label-name">Delivery Time:</span>{{ formatDotNetTimespan(props.message.delivery_time) }}</span>
+  </RouterLink>
 </template>
 
 <style scoped>
@@ -99,25 +67,32 @@ function navigateToMessage(message: Message, event?: MouseEvent) {
 }
 .status {
   grid-area: status;
+  display: block;
 }
 .message-id {
   grid-area: message-id;
+  display: block;
 }
 .time-sent {
   grid-area: time-sent;
+  display: block;
 }
 .message-type {
   grid-area: message-type;
   font-weight: bold;
   overflow-wrap: break-word;
+  display: block;
 }
 .processing-time {
   grid-area: processing-time;
+  display: block;
 }
 .critical-time {
   grid-area: critical-time;
+  display: block;
 }
 .delivery-time {
   grid-area: delivery-time;
+  display: block;
 }
 </style>