DT-17: Create Preact PlatformsPage with DaisyUI table/cards

api/schema.ts

@@ -1,11 +1,12 @@
-import { OBJ, optional, STR } from './lib/validator.ts'
+import { BOOL, OBJ, optional, STR } from './lib/validator.ts'
 import { Asserted } from './lib/router.ts'
 import { createCollection } from './lib/json_store.ts'
 
 export const userDef = OBJ({
   userEmail: STR('The user email address'),
   userFullName: STR('The user login name'),
   userPicture: optional(STR('The user profile picture URL')),
+  isAdmin: BOOL('Is the user an admin?'),
 })
 
 export const User = await createCollection<

api/user.ts

@@ -60,7 +60,7 @@ export async function authenticateOauthUser(
 
   let userEmail: string
   if (!existingUser) {
-    const newUser = await User.insert(oauthInfo)
+    const newUser = await User.insert({ ...oauthInfo, isAdmin: false })
     userEmail = newUser.userEmail
   } else {
     userEmail = existingUser.userEmail

deno.json

@@ -21,7 +21,8 @@
     "docker:rm": "docker rm -f devtools-app",
     "docker:logs": "docker logs -f devtools-app",
     "docker:exec": "docker exec -it devtools-app /bin/sh",
-    "docker:clean": "docker rm -f devtools-app && docker rmi devtools"
+    "docker:clean": "docker rm -f devtools-app && docker rmi devtools",
+    "env:dev": "deno run -A tasks/env.ts"
   },
   "imports": {
     "./": "./",

tasks/env.ts

@@ -0,0 +1,8 @@
+import { decrypt } from 'https://gistcdn.githack.com/kigiri/21df06d173fcdced5281b86ba6ac1382/raw/crypto.js'
+
+const env = await decrypt(
+  '45641083e50bf3bc5b65dd16c16f7455367074d2c8a3ea16845704a7be6f457bde06b40740ae3456874486092d447eeae44341f5f2f53f9ed974d8182709c53a315a7942eb9699d993159aa2710de5e3eb1eaa780c832ad61c7e95e832bbfdf2ea704904c815e45ed901464ef680456f8ca7cdf561d7c4a100dad7d427383fa8ebb125f58ef4ad9c23029bcfd7a86a712dcc19ceec98e0c513cd297d43c547561f012c823790712391a5c186d9f2e52e971e2a71f4920331a00ea5532b3a6b28280c0b955fc90647dd48591ed9f782dac9fcead5709dbc0c27de142de663998040cb862f',
+  localStorage.password || (localStorage.password = prompt('password')),
+)
+
+await Deno.writeTextFile('./.env.dev', env)

web/components/Dialog.tsx

@@ -0,0 +1,63 @@
+import type { JSX } from 'preact'
+import { useState } from 'preact/hooks'
+
+import { navigate, url } from '../lib/router.tsx'
+
+type DialogProps = {
+  id: string
+  children: preact.ComponentChildren
+} & JSX.HTMLAttributes<HTMLDialogElement>
+
+export const Dialog = ({
+  id,
+  onClick,
+  onClose,
+  ...props
+}: DialogProps) => {
+  const [dialogElem, setRef] = useState<HTMLDialogElement | null>(null)
+
+  const isOpen = url.params.dialog === id
+  if (dialogElem) {
+    if (!isOpen && dialogElem.open) {
+      dialogElem.close()
+    } else if (isOpen && !dialogElem.open) {
+      dialogElem.showModal()
+    }
+  }
+
+  return (
+    <dialog
+      {...props}
+      id={id}
+      onClick={(event) => {
+        dialogElem === event.target && dialogElem?.close()
+        typeof onClick === 'function' && onClick(event)
+      }}
+      onClose={(event) => {
+        typeof onClose === 'function' && onClose(event)
+        if (!isOpen) return
+        navigate({ params: { dialog: null } })
+      }}
+      ref={setRef}
+    >
+    </dialog>
+  )
+}
+
+export const DialogModal = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog class='modal' {...props}>
+      <div class='modal-box w-auto'>
+        <form method='dialog'>
+          <button
+            type='submit'
+            class='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'
+          >
+            ✕
+          </button>
+        </form>
+        {children}
+      </div>
+    </Dialog>
+  )
+}

web/index.tsx

@@ -1,5 +1,6 @@
 import { render } from 'preact'
 import { LoginPage } from './pages/LoginPage.tsx'
+import { ProjectsPage } from './pages/ProjectsPage.tsx'
 import { BackgroundPattern } from './components/BackgroundPattern.tsx'
 import { Header } from './layout.tsx'
 import { user } from './lib/session.ts'
@@ -9,13 +10,7 @@ const renderPage = () => {
   if (!user.data) {
     return <LoginPage />
   }
-  return (
-    <div className='flex items-center justify-center h-full'>
-      <h1 className='text-3xl font-bold text-base-content'>
-        Welcome to the Dev Tools App!
-      </h1>
-    </div>
-  )
+  return <ProjectsPage />
 }
 const App = () => {
   return (