admin page

atproto-notifications/src/App.tsx

···
 import { useCallback, useState, useEffect } from 'react';
+import { Outlet } from 'react-router';
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { GetJson } from './components/fetch';
 import { WhoAmI } from './components/WhoAmI';
-import { Feed } from './components/Feed';
 import { WithFeatureChecks } from './components/setup/WithFeatureChecks';
 import { WithServiceWorker } from './components/setup/WithServiceWorker';
 import { WithServerHello } from './components/setup/WithServerHello';
-import { UserContext } from './context';
 import { WithNotificationPermission } from './components/setup/WithNotificationPermission';
 import { WithPushSubscription } from './components/setup/WithPushSubscription';
 import { urlBase64ToUint8Array } from './utils';
···
         <WithServiceWorker>
           <WithNotificationPermission>
             <WithPushSubscription>
-              <Feed />
+              {children}
             </WithPushSubscription>
           </WithNotificationPermission>
         </WithServiceWorker>

atproto-notifications/src/components/Feed.tsx atproto-notifications/src/pages/Feed.tsx

···
 import { useEffect, useState } from 'react';
 import { getNotifications, getSecondary } from '../db';
-import { ButtonGroup } from './Buttons';
-import { Notification } from './Notification';
+import { ButtonGroup } from '../components/Buttons';
+import { Notification } from '../components/Notification';
 import psl from 'psl';
 import lexicons from 'lexicons';
 

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

···
+import { Link } from 'react-router';
 import { Handle } from '../User';
 import './Chrome.css';
 
···
   return (
     <>
       <header id="app-header">
-        <h1>spacedust notifications&nbsp;<span className="demo">demo!</span></h1>
+        <h1>
+          <Link to="/" className="inherit-font">
+            spacedust notifications&nbsp;<span className="demo">demo!</span>
+          </Link>
+        </h1>
         {user && (
           <div className="current-user">
             <p>
···
                 <Handle did={user.did} />
                 {user.role !== 'public' && (
                   <span className="chrome-role-tag">
-                    {user.role}
+                    {user.role === 'admin' ? (
+                      <Link to="/admin" className="inherit-font">{user.role}</Link>
+                    ) : (
+                      <>{user.role}</>
+                    )}
                   </span>
                 )}
               </span>

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

···
 import { useCallback, useEffect, useState } from 'react';
-import { UserContext, PushServerContext } from '../../context';
+import { RoleContext, PushServerContext } from '../../context';
 import { WhoAmI } from '../WhoAmI';
 import { SecretPassword } from '../SecretPassword';
 import { GetJson, PostJson } from '../Fetch';
···
                 ok={({ did, role, webPushPublicKey }) => (
                   <Chrome user={{ did, role }} onLogout={handleLogout}>
                     <PushServerContext.Provider value={webPushPublicKey}>
-                      {childrenFor(did, role, children)}
+                      <RoleContext.Provider value={role}>
+                        {childrenFor(did, role, children)}
+                      </RoleContext.Provider>
                     </PushServerContext.Provider>
                   </Chrome>
                 )}
···
           return (
             <Chrome user={{ did, role }} onLogout={handleLogout}>
               <PushServerContext.Provider value={webPushPublicKey}>
-                {childrenFor(did, role, children)}
+                <RoleContext.Provider value={role}>
+                  {childrenFor(did, role, children)}
+                </RoleContext.Provider>
               </PushServerContext.Provider>
             </Chrome>
           );

atproto-notifications/src/context.ts

···
 import { createContext } from 'react';
 
-export const UserContext = createContext('light');
+export const RoleContext = createContext('public');
 export const PushServerContext = createContext(null);

atproto-notifications/src/index.css

···
   color: #535bf2;
 }
 
+a.inherit-font {
+  font: inherit;
+  color: inherit;
+}
+
 body {
   margin: 0;
   min-width: 320px;

atproto-notifications/src/main.tsx

···
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from "react-router";
-import './index.css'
-import { App } from './App.tsx'
+import './index.css';
+import { App } from './App';
+import { Feed } from './pages/Feed';
+import { Admin } from './pages/Admin';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App>
-      <BrowserRouter>
+    <BrowserRouter>
+      <App>
         <Routes>
-          {/*<Route index element={<Home />} />*/}
-          {/*<Route path="/status" element={<Status />} />*/}
+          <Route index element={<Feed />} />
+          <Route path="/admin" element={<Admin />} />
         </Routes>
-      </BrowserRouter>
-    </App>
+      </App>
+    </BrowserRouter>
   </StrictMode>,
 );
 

atproto-notifications/src/pages/Admin.tsx

···
+import { useContext } from 'react';
+import { RoleContext } from '../context';
+
+export function Admin({}) {
+  const role = useContext(RoleContext);
+  if (role !== 'admin') {
+    return <p>sorry, this page is admin-only</p>
+  }
+
+  return 'sup';
+}