hello early page

atproto-notifications/src/components/Buttons.css

···
-button {
+button,
+a.button {
   border-radius: 0.5rem;
   border: 1px solid transparent;
+  color: inherit;
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
···
   border-right-color: hsla(0, 0%, 0%, 0.3);
   box-shadow: 0 42px 42px -42px inset #221828;
 }
-button:hover {
+button:hover,
+a.button:hover {
   border-color: #646cff;
 }
 button:focus,
-button:focus-visible {
+button:focus-visible,
+a.button:focus,
+a.button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 

atproto-notifications/src/components/Fetch.tsx

···
   );
 }
 
-async function postJson(url, body, credentials) {
+export async function postJson(url, body, credentials) {
   const opts = {
     method: 'POST',
     headers: {'Content-Type': 'applicaiton/json'},

atproto-notifications/src/components/SecretPassword.jsx

···
           }}
           ok={() => (
             <>
-              <p>That will do.</p>
+              <p style={{ color: "#9f0" }}>Secret password accepted.</p>
               <p>
-                <button onClick={() => window.location.reload()}>
-                  Enter
-                </button>
+                {/* an <a> tag, not a <Link>, on purpose so we relaod for our role */}
+                <a className="button" href="/early">
+                  Continue
+                </a>
               </p>
             </>
           )}
···
           {' '}
           {begun && (
             <button type="submit" className="subtle">
-              open sesame
+              unlock
             </button>
           )}
         </p>

atproto-notifications/src/components/setup/WithNotificationPermission.tsx

···
   if (currentPermission !== 'granted') {
     return (
       <>
-        <h3>Step 2: Allow notifications</h3>
+        <h3>Final step: Allow notifications</h3>
         <p>To show notifications we need permission:</p>
         <p>
           <button

atproto-notifications/src/main.tsx

···
 import { App } from './App';
 import { Feed } from './pages/Feed';
 import { Admin } from './pages/Admin';
+import { Early } from './pages/Early';
 
 createRoot(document.getElementById('root')!).render(
   // <StrictMode>
···
         <Routes>
           <Route index element={<Feed />} />
           <Route path="/admin" element={<Admin />} />
+          <Route path="/early" element={<Early />} />
         </Routes>
       </App>
     </BrowserRouter>

atproto-notifications/src/pages/Early.css

···
+.early {
+  max-width: 36rem;
+  text-align: left;
+  margin: 0 auto;
+}

atproto-notifications/src/pages/Early.tsx

···
+import { useCallback, useState } from 'react';
+import { postJson } from '../components/Fetch';
+import './Early.css';
+
+export function Early({ }) {
+  const [pushCount, setPushCount] = useState(0);
+  const [pushStatus, setPushStatus] = useState(null);
+
+  const localTest = useCallback(() => {
+    new Notification("Hello world!", { body: "This notification never left your browser" });
+  });
+
+  const pushTest = useCallback(async () => {
+    setPushStatus(n => n + 1);
+    setPushStatus('pending');
+    const host = import.meta.env.VITE_NOTIFICATIONS_HOST;
+    const url = new URL('/push-test', host);
+    try {
+      await postJson(url, JSON.stringify(null), true);
+      setPushStatus(null);
+    } catch (e) {
+      console.error('failed push test request', e);
+      setPushStatus('failed');
+    }
+  });
+
+  return (
+    <div className="early">
+      <h2>Hello!</h2>
+      <p>Welcome to the early preview for the spacedust notifications demo, and since you're here early: thanks so much for supporting microcosm!</p>
+      <p>A few things to keep in mind:</p>
+      <ol>
+        <li>This is a demo, not a polished product</li>
+        <li>It has a lot of moving pieces, so things not always work</li>
+        <li>Many features can easily be added! Some others can't! Make a request and let's see :)</li>
+        <li>It's not a long-term committed part of microcosm <em>(yet)</em></li>
+      </ol>
+      <p>Sadly, it doesn't really work on mobile. On iOS you can hit "share" and "add to home screen" to get things eventually mostly set up, but push delivery will stop after a few minutes. Android people might have better luck?</p>
+      <h3>Hello hello</h3>
+      <p>With that out of the way, let's cover some basics.</p>
+      <p>
+        To see a test notification, <button onClick={localTest}>click on this</button>. This is a local-only test.
+      </p>
+      <p>
+        <button
+          disabled={pushStatus === 'pending'}
+          onClick={pushTest}
+        >
+          Click here {pushCount > 0 && <>({pushCount})</>}
+        </button>
+        {' '}
+        to see another. This one goes over Web Push.
+      </p>
+      {pushStatus === 'failed' && <p>uh oh, something went wrong requesting a web push</p>}
+    </div>
+  );
+}

lexicons/index.js

···
 export default {
+  'blue.microcosm': {
+    name: 'microcosm',
+    clients: [
+      {},
+    ],
+    known_sources: {
+      'test.notification:hello': 'Hello spacedust!',
+    },
+  },
   'app.bsky': {
     name: 'Bluesky',
     clients: [

server/api.js

···
   return gotIt(res);
 };
 
+const handlePushTest = async (db, user, res, push) => {
+  const subscription = db.getSubBySession(user.session);
+  const payload = JSON.stringify({
+    subject: user.did,
+    source: 'blue.microcosm.test.notification:hello',
+    source_record: `at://${user.did}/blue.microcosm.test.notification/test`,
+    timestamp: +new Date(),
+  });
+  await push(db, subscription, payload);
+  return okBye(res);
+};
+
 const handleLogout = async (db, user, req, res, appSecret, updateSubs) => {
   try {
     db.deleteSub(user.session);
···
   const { secret_password } = JSON.parse(body);
   const { did } = user;
   const role = 'early';
-  console.log('going with', {did, role, secret_password});
   const updated = db.setRole({ did, role, secret_password });
-  console.log('updated?', updated);
   if (updated) {
     return okBye(res);
   } else {
···
   }
 }
 
-export const server = (secrets, jwks, allowedOrigin, whoamiHost, db, updateSubs, adminDid) => {
+export const server = (secrets, jwks, allowedOrigin, whoamiHost, db, updateSubs, push, adminDid) => {
   const handler = (req, res) => {
     // don't love this but whatever
     const { pathname, searchParams } = new URL(`http://localhost${req.url}`);
···
     if (method === 'POST' && pathname === '/subscribe') {
       if (!user || user.role === 'public') return forbidden(res);
       return handleSubscribe(db, user, req, res, updateSubs);
+    }
+    if (method === 'POST' && pathname === '/push-test') {
+      if (!user || user.role === 'public') return forbidden(res);
+      return handlePushTest(db, user, res, push);
     }
 
     // admin required (just 404 for non-admin)

server/db.js

···
   #stmt_insert_push_sub;
   #stmt_get_all_sub_dids;
   #stmt_get_push_subs;
+  #stmt_get_push_sub;
   #stmt_update_push_sub;
   #stmt_delete_push_sub;
   #stmt_get_push_info;
···
                 as 'since_last_push'
          from push_subs
         where account_did = ?`);
+
+    this.#stmt_get_push_sub = db.prepare(
+      `select session,
+              subscription,
+              (julianday(CURRENT_TIMESTAMP) - julianday(last_push)) * 24 * 60 * 60
+                as 'since_last_push'
+         from push_subs
+        where session = ?`);
 
     this.#stmt_update_push_sub = db.prepare(
       `update push_subs
···
 
   getSubsByDid(did) {
     return this.#stmt_get_push_subs.all(did);
+  }
+
+  getSubBySession(session) {
+    return this.#stmt_get_push_sub.get(session);
   }
 
   updateLastPush(session) {

server/index.js

···
   const db = new DB(dbFilename, initDb);
 
   const spacedustHost = env.SPACEDUST_HOST ?? 'wss://spacedust.microcosm.blue';
-  const updateSubs = connectSpacedust(db, spacedustHost);
+  const { updateSubs, push } = connectSpacedust(db, spacedustHost);
 
   const host = env.HOST ?? 'localhost';
   const port = parseInt(env.PORT ?? 8000, 10);
 
   const allowedOrigin = env.ALLOWED_ORIGIN ?? 'http://127.0.0.1:5173';
 
-  server(secrets, jwks, allowedOrigin, whoamiHost, db, updateSubs, adminDid).listen(
+  server(secrets, jwks, allowedOrigin, whoamiHost, db, updateSubs, push, adminDid).listen(
     port,
     host,
     () => console.log(`listening at http://${host}:${port} with allowed origin: ${allowedOrigin}`),

server/notifications.js

···
     restart();
   };
 
-  return updateSubs;
+  return { updateSubs, push };
 };