better formatted time and ability to view messages in large mode

ui/desktop/apps/Dashboard/Dashboard.js

@@ -1,7 +1,7 @@
 class Dashboard extends Shadow {
 
     COL = {
-        time:    17,
+        time:    14,
         fname:   6,
         lname:   6,
         email:   20,
@@ -18,6 +18,34 @@ class Dashboard extends Shadow {
             .overflowY("hidden");
     }
 
+    spawnModal(msg) {
+        let div = document.createElement("div")
+        div.classList.add("modal")
+        div.innerText = msg
+        div.style.left = "50vw"
+        div.style.top = "50vh"
+        div.style.padding = "5em"
+        div.style.position = "fixed"
+        div.style.backgroundColor = "var(--accent)"
+        div.style.color = "var(--main)"
+        div.style.transform = "translate(-50%, -50%)"
+        document.body.appendChild(div)
+
+        let p = document.createElement("p")
+        p.innerText = "X"
+        p.color = "red"
+        p.style.position = "absolute"
+        p.style.top = "1em"
+        p.style.right = "2em"
+        p.style.cursor = "pointer"
+        p.onClick((finished) => {
+            if(finished) {
+                p.parentElement.remove()
+            }
+        })
+        div.appendChild(p)
+    }
+
     render() {
         VStack(() => {
 
@@ -43,7 +71,7 @@ class Dashboard extends Shadow {
                 p("Last").width(this.COL.lname, pct).fontWeight("bold").whiteSpace("nowrap");
                 p("Email").width(this.COL.email, pct).fontWeight("bold").whiteSpace("nowrap");
                 p("Phone").width(this.COL.phone, pct).fontWeight("bold").whiteSpace("nowrap");
-                p("Message").width(this.COL.message, pct).fontWeight("bold").whiteSpace("nowrap");
+                p("Message").width(this.COL.message, pct).fontWeight("bold").whiteSpace("nowrap")
                 p("County").width(this.COL.county, pct).fontWeight("bold").whiteSpace("nowrap");
             })
             .width(95, pct)
@@ -51,13 +79,32 @@ class Dashboard extends Shadow {
             .gap(8);
 
             global.currentNetwork.data.contact.forEach((entry) => {
+
                 HStack(() => {
-                    this.cell("time", entry.time);
+                    this.cell("time", entry.time.replace(/:\d{6}(?=am|pm)/i, '')
+                        .replace('-', '   ')
+                        .replace(/(\d{1,2}:\d{2})(am|pm)/i, (_, time, meridiem) => {
+                        const [h, m] = time.split(':');
+                        return `${h.padStart(2, '0')}:${m}${meridiem.toLowerCase()}`;
+                        }));
                     this.cell("fname", entry.fname);
                     this.cell("lname", entry.lname);
                     this.cell("email", entry.email);
                     this.cell("phone", entry.phone);
-                    this.cell("message", entry.message);
+                    this.cell("message", entry.message)
+                        .cursor("pointer")
+                        .onHover(function (hovering) {
+                            if(hovering) {
+                                this.style.outline = "1px solid black"
+                            } else {
+                                this.style.outline = ""
+                            }
+                        })
+                        .onClick((done) => {
+                            if(done) {
+                                this.spawnModal(entry.message)
+                            }
+                        })
                     this.cell("county", entry.county ?? "Not Specified");
                 })
                 .width(95, pct)
@@ -85,7 +132,12 @@ class Dashboard extends Shadow {
 
             global.currentNetwork.data.join.forEach((entry) => {
                 HStack(() => {
-                    this.cell("time", entry.time);
+                    this.cell("time", entry.time.replace(/:\d{6}(?=am|pm)/i, '')
+                        .replace('-', '   ')
+                        .replace(/(\d{1,2}:\d{2})(am|pm)/i, (_, time, meridiem) => {
+                        const [h, m] = time.split(':');
+                        return `${h.padStart(2, '0')}:${m}${meridiem.toLowerCase()}`;
+                        }));                    
                     this.cell("fname", entry.fname);
                     this.cell("lname", entry.lname);
                     this.cell("email", entry.email);