basic rendering of discord hammertime tags

3 files changed, 54 insertions, 1 deletions

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 2297060..e458f89 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -46,7 +46,7 @@ function App(): React.JSX.Element {
     return () => {
       window.electron.ipcRenderer.removeListener('new-discord-message', listener)
     }
-  }, [])
+  }, [maxMessages])
 
   return (
     <div
diff --git a/src/renderer/src/assets/base.css b/src/renderer/src/assets/base.css
index 636c03c..e5b2be7 100644
--- a/src/renderer/src/assets/base.css
+++ b/src/renderer/src/assets/base.css
@@ -475,3 +475,36 @@ a:hover{ text-decoration:underline; }
   display: block;
   border-radius: var(--radius);
 }
+
+/* ================= Hammertime Timestamps ================= */
+.hammertime-timestamp {
+  margin-top: 2px;
+  background: var(--channel);
+  color: var(--text-muted);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.85em;
+  font-weight: 500;
+  display: inline-block;
+  cursor: help;
+  border: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.hammertime-timestamp:hover {
+  background: var(--text-muted);
+  color: var(--background);
+  border-color: var(--accent-blue);
+}
+
+.hammertime-timestamp.relative {
+  background: var(--accent-blue);
+  color: white;
+}
+
+.hammertime-timestamp.relative:hover {
+  opacity: 0.8;
+  background: var(--accent-blue);
+  color: white;
+}
diff --git a/src/renderer/src/components/Message.tsx b/src/renderer/src/components/Message.tsx
index 2dcda4e..d46bdd5 100644
--- a/src/renderer/src/components/Message.tsx
+++ b/src/renderer/src/components/Message.tsx
@@ -10,6 +10,19 @@ interface MessageProps {
 const fallbackAvatar = 'https://cdn.discordapp.com/embed/avatars/0.png'
 const avatarBaseUrl = 'https://cdn.discordapp.com/avatars/'
 
+const hammerTimeToDateString = (hammerTime: string): string => {
+  const match = hammerTime.match(/<t:(\d+)(?::[tTdDfFR])?>/)
+  if (!match) {
+    return 'Unknown Timestamp'
+  }
+  const timestamp = parseInt(match[1], 10)
+  if (isNaN(timestamp)) {
+    return 'Unknown Timestamp'
+  }
+  const date = new Date(timestamp * 1000)
+  return date.toLocaleString()
+}
+
 interface ParsedContent {
   html: string
   imageUrls: string[]
@@ -39,6 +52,13 @@ const processRenderedContent = (
   // Roles are a placeholder for now cause can't find a good way to get the names of them
   parsedContent = parsedContent.replace(/<@&?(\d+)>/g, '<span class="mention">@RoleMention</span>')
   parsedContent = parsedContent.replace(/@everyone/g, '<span class="mention">@everyone</span>')
+  parsedContent = parsedContent.replace(/<t:\d+(?::[tTdDfFR])?>/g, (match) => {
+    return (
+      '<span class="hammertime-timestamp ">' +
+      hammerTimeToDateString(match) +
+      ' (your local time) </span>'
+    )
+  })
   // Replace Discord emote syntax <:name:id> and <a:name:id> with img tags FIRST
   parsedContent = parsedContent.replace(/<(a?):([^:]+):(\d+)>/g, (_, animated, name, id) => {
     // Validate that we have a proper ID