refactor(ProjectsPage.tsx): Revamp project management interface with enhanced dialogs and improved data handling

Author: abdotop

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: optional(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

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>
+  )
+}