src/ui/Message.svelte

@@ -17,6 +17,8 @@
     const u = entry.authorSession != null ? session.user(entry.authorSession) : undefined;
     if (u) menu.show(e, userMenu(u));
   }
+  // Full date and time, shown at the right edge while the pointer is on the message
+  const full = $derived(time.toLocaleString([], { dateStyle: 'medium', timeStyle: 'medium' }));
   const hhmm = $derived(time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
 </script>
 
@@ -27,6 +29,7 @@
   </div>
 {:else}
   <article class="msg" class:grouped>
+    <time class="stamp" datetime={time.toISOString()}>{full}</time>
     <div class="gutter">
       {#if grouped}
         <span class="time hover">{hhmm}</span>
@@ -64,7 +67,10 @@
 {/if}
 
 <style>
-  .msg { display: flex; gap: 14px; padding: 2px 16px; margin-top: 14px; }
+  .msg { position: relative; display: flex; gap: 14px; padding: 2px 16px; margin-top: 14px; }
+  /* Over the end of the line, with its own background so it stays readable on long messages */
+  .stamp { position: absolute; top: 2px; right: 12px; padding: 1px 6px; line-height: 18px; background: var(--bg-1); border: 1px solid var(--line); visibility: hidden; pointer-events: none; }
+  .msg:hover .stamp { visibility: visible; }
   .msg.grouped { margin-top: 0; }
   .msg:hover { background: rgb(255 255 255 / 0.02); }
   .gutter { width: 38px; flex: none; display: flex; justify-content: center; }

test/e2e/app.e2e.ts

@@ -226,6 +226,16 @@ try {
   assert.equal(await page.evaluate(() => (window as any).pwned), undefined);
   assert.equal(await page.locator('.msg b', { hasText: 'bold' }).count(), 1);
   assert.equal(await page.locator('img[src^="https://evil"]').count(), 0);
+  // The full date appears at the right edge while the pointer is on a message
+  const anyMsg = page.locator('.chat .msg').last();
+  const stamp = anyMsg.locator('.stamp');
+  assert.equal(await stamp.evaluate(el => getComputedStyle(el).visibility), 'hidden');
+  await anyMsg.hover();
+  assert.equal(await stamp.evaluate(el => getComputedStyle(el).visibility), 'visible');
+  assert.match(await stamp.innerText(), /\d{4}.*\d{1,2}:\d{2}:\d{2}/);
+  const gap = await anyMsg.evaluate(el => el.getBoundingClientRect().right - el.querySelector('.stamp')!.getBoundingClientRect().right);
+  assert.ok(gap >= 0 && gap < 20, `stamp at the right edge: ${gap}`);
+  await page.mouse.move(5, 5);
   console.log('ok: incoming text rendered and sanitized');
 
   // Right-click menus for text: composer editing, links, messages, authors