Don't leak the existence of /admin

web/pages/admin.tsx

@@ -5,6 +5,7 @@ import { html } from 'gridjs'
 import dayjs from 'dayjs'
 import { useUsers } from '../hooks/use-users'
 import { useUser } from '../hooks/use-user'
+import Error from 'next/error'
 
 function avatarHtml(avatarUrl: string) {
   return `<img
@@ -14,24 +15,12 @@ function avatarHtml(avatarUrl: string) {
 />`
 }
 
-export default function Admin() {
-  const user = useUser()
+function UsersTable() {
   let users = useUsers()
-
-  const adminIds = [
-    'igi2zGXsfxYPgB0DJTXVJVmwCOr2', // Austin
-    '5LZ4LgYuySdL1huCWe7bti02ghx2', // James
-    'tlmGNz9kjXc2EteizMORes4qvWl2', // Stephen
-  ]
-  if (!adminIds.includes(user?.id || '')) {
-    return <Page>Nice try. No access for you.</Page>
-  }
-
   // Sort users by createdTime descending, by default
   users = users.sort((a, b) => b.createdTime - a.createdTime)
 
   return (
-    <Page wide>
     <Grid
       data={users}
       columns={[
@@ -52,7 +41,12 @@ export default function Admin() {
         {
           id: 'createdTime',
           name: 'Created Time',
-            formatter: (cell) => dayjs(cell as number).format('MMM D, h:mma'),
+          formatter: (cell) =>
+            html(
+              `<span class="whitespace-nowrap">${dayjs(cell as number).format(
+                'MMM D, h:mma'
+              )}</span>`
+            ),
         },
         {
           id: 'balance',
@@ -75,6 +69,22 @@ export default function Admin() {
         limit: 25,
       }}
     />
-    </Page>
+  )
+}
+
+export default function Admin() {
+  const user = useUser()
+  const adminIds = [
+    'igi2zGXsfxYPgB0DJTXVJVmwCOr2', // Austin
+    '5LZ4LgYuySdL1huCWe7bti02ghx2', // James
+    'tlmGNz9kjXc2EteizMORes4qvWl2', // Stephen
+  ]
+  const isAdmin = adminIds.includes(user?.id || '')
+  return isAdmin ? (
+    <Page wide>
+      <UsersTable />
+    </Page>
+  ) : (
+    <Error statusCode={404} title='Who is this "admin" you speak of...' />
   )
 }