what is this, almost useable?

atproto-notifications/package-lock.json

···
         "lexicons": "file:../lexicons",
         "psl": "^1.15.0",
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-time-ago": "^7.3.3"
       },
       "devDependencies": {
         "@eslint/js": "^9.29.0",
···
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/javascript-time-ago": {
+      "version": "2.5.11",
+      "resolved": "https://registry.npmjs.org/javascript-time-ago/-/javascript-time-ago-2.5.11.tgz",
+      "integrity": "sha512-Zeyf5R7oM1fSMW9zsU3YgAYwE0bimEeF54Udn2ixGd8PUwu+z1Yc5t4Y8YScJDMHD6uCx6giLt3VJR5K4CMwbg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "relative-time-format": "^1.1.6"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
···
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
···
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
···
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
···
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
···
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
···
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
···
       "peerDependencies": {
         "react": "^19.1.0"
       }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
     },
     "node_modules/react-refresh": {
       "version": "0.17.0",
···
       "engines": {
         "node": ">=0.10.0"
       }
+    },
+    "node_modules/react-time-ago": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/react-time-ago/-/react-time-ago-7.3.3.tgz",
+      "integrity": "sha512-5kh2Kuu/UhHzcZrGvf3GUrF2d+IXjkIXif5MR2iDWIfSqQuBW27/ejN/tmzJBRyPiryYTgbDIG6AZFJ4RW3yfw==",
+      "license": "MIT",
+      "dependencies": {
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.8.1",
+        "raf": "^3.4.1"
+      },
+      "peerDependencies": {
+        "javascript-time-ago": "^2.3.7",
+        "react": ">=0.16.8",
+        "react-dom": ">=0.16.8"
+      }
+    },
+    "node_modules/relative-time-format": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/relative-time-format/-/relative-time-format-1.1.6.tgz",
+      "integrity": "sha512-aCv3juQw4hT1/P/OrVltKWLlp15eW1GRcwP1XdxHrPdZE9MtgqFpegjnTjLhi2m2WI9MT/hQQtE+tjEWG1hgkQ==",
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/resolve-from": {
       "version": "4.0.0",

atproto-notifications/package.json

···
     "lexicons": "file:../lexicons",
     "psl": "^1.15.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-time-ago": "^7.3.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",

atproto-notifications/src/components/Notification.css

···
   padding: 0.75rem;
   border: 0.5px solid hsla(0, 0%, 50%, 0.3);
   border-width: 0.5px 0;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
 }
 a.notification {
-  display: block;
   font: inherit;
   color: inherit;
 }
···
 .handle {
   color: skyblue;
 }
+
+.notification-when {
+  font-size: 0.8rem;
+  opacity: 0.667;
+}

atproto-notifications/src/components/Notification.tsx

···
+import ReactTimeAgo from 'react-time-ago';
 import psl from 'psl';
 import lexicons from 'lexicons';
 import { resolveDid } from '../atproto/resolve';
···
 
 import './Notification.css';
 
-export function Notification({ app, group, source, source_record, source_did, subject }) {
+export function Notification({ app, group, source, source_record, source_did, subject, timestamp }) {
 
   // TODO: clean up / move this to lexicons package?
   let title = source;
···
 
   const contents = (
     <>
-      {icon && (
-        <img className="app-icon" src={icon} title={appName ?? app} alt="" />
-      )}
-      {title} from
-      {' '}
-      {source_did ? (
-        <Fetch
-          using={resolveDid}
-          args={[source_did]}
-          ok={handle => <span className="handle">@{handle}</span>}
-        />
-      ) : (
-        source_record
+      <div className="notification-info">
+        {icon && (
+          <img className="app-icon" src={icon} title={appName ?? app} alt="" />
+        )}
+        {title} from
+        {' '}
+        {source_did ? (
+          <Fetch
+            using={resolveDid}
+            args={[source_did]}
+            ok={handle => <span className="handle">@{handle}</span>}
+          />
+        ) : (
+          source_record
+        )}
+      </div>
+      {timestamp && (
+        <div className="notification-when">
+          <ReactTimeAgo date={new Date(timestamp)} locale="en-US"/>
+        </div>
       )}
     </>
   );

atproto-notifications/src/main.tsx

···
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);
+
+import TimeAgo from 'javascript-time-ago'
+import en from 'javascript-time-ago/locale/en'
+TimeAgo.addDefaultLocale(en)

atproto-notifications/src/service-worker.ts

···
 self.addEventListener('notificationclick', handleNotificationClick);
 
 async function handlePush(ev) {
-  const { subject, source, source_record } = ev.data.json();
+  const { subject, source, source_record, timestamp } = ev.data.json();
   let group;
   let app;
   let appPrefix;
···
 
   try {
     await insertNotification({
+      timestamp,
       subject,
       source_record,
       source_did,

server/index.js

···
 const cookieSig = require('cookie-signature');
 const webpush = require('web-push');
 
+// kind of silly but right now there's no way to tell spacedust that we want an alive connection
+// but don't want the notification firehose (everything filtered out)
+// so... the final filter is an absolute on this fake did, effectively filtering all notifs.
+// (this is only used when there are no subscribers registered)
 const DUMMY_DID = 'did:plc:zzzzzzzzzzzzzzzzzzzzzzzz';
 
 const CORS_PERMISSIVE = req => ({
···
     return;
   }
   const { link: { subject, source, source_record } } = data;
+  const timestamp = +new Date();
 
   let did;
   if (subject.startsWith('did:')) did = subject;
···
 
   const expiredSubs = [];
   const now = new Date();
+  const payload = JSON.stringify({ subject, source, source_record, timestamp });
+  console.log('pl', payload);
   for (const sub of subs.get(did) ?? []) {
     try {
       if (now - sub.t < 1500) {
···
         continue;
       }
       sub.t = now;
-      await webpush.sendNotification(sub, JSON.stringify({ subject, source, source_record }));
+      await webpush.sendNotification(sub, payload);
     } catch (err) {
       if (400 <= err.statusCode && err.statusCode < 500) {
         expiredSubs.push(sub);