Progress check-in.

package.json

@@ -67,14 +67,14 @@
     "@dicebear/core": "^9.2.3",
     "@fontsource/inter": "^5.2.8",
     "@hello-pangea/dnd": "^17.0.0",
-    "@prisma/adapter-pg": "^6.18.0",
-    "@prisma/client": "^6.18.0",
-    "@prisma/extension-read-replicas": "^0.4.1",
+    "@prisma/adapter-pg": "^7.1.0",
+    "@prisma/client": "^7.1.0",
+    "@prisma/extension-read-replicas": "^0.5.0",
     "@react-spring/web": "^10.0.3",
     "@svgr/cli": "^8.1.0",
-    "@tanstack/react-query": "^5.90.11",
-    "@umami/react-zen": "^0.211.0",
-    "@umami/redis-client": "^0.29.0",
+    "@tanstack/react-query": "^5.90.12",
+    "@umami/react-zen": "^0.216.0",
+    "@umami/redis-client": "^0.30.0",
     "bcryptjs": "^3.0.2",
     "chalk": "^5.6.2",
     "chart.js": "^4.5.1",
@@ -97,7 +97,7 @@
     "is-docker": "^3.0.0",
     "is-localhost-ip": "^2.0.0",
     "isbot": "^5.1.31",
-    "jsonwebtoken": "^9.0.2",
+    "jsonwebtoken": "^9.0.3",
     "jszip": "^3.10.1",
     "kafkajs": "^2.1.0",
     "lucide-react": "^0.543.0",
@@ -107,7 +107,7 @@
     "npm-run-all": "^4.1.5",
     "papaparse": "^5.5.3",
     "pg": "^8.16.3",
-    "prisma": "^6.18.0",
+    "prisma": "^7.1.0",
     "pure-rand": "^7.0.1",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
@@ -121,7 +121,7 @@
     "serialize-error": "^12.0.0",
     "thenby": "^1.3.4",
     "ua-parser-js": "^2.0.6",
-    "uuid": "^11.1.0",
+    "uuid": "^13.0.0",
     "zod": "^4.1.13",
     "zustand": "^5.0.9"
   },

prisma/schema.prisma

@@ -6,7 +6,6 @@ generator client {
 
 datasource db {
   provider     = "postgresql"
-  url          = env("DATABASE_URL")
   relationMode = "prisma"
 }
 

src/app/(main)/boards/BoardProvider.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { Loading } from '@umami/react-zen';
+import { createContext, type ReactNode } from 'react';
+import { useBoardQuery } from '@/components/hooks/queries/useBoardQuery';
+import type { Board } from '@/generated/prisma/client';
+
+export const BoardContext = createContext<Board>(null);
+
+export function BoardProvider({ boardId, children }: { boardId: string; children: ReactNode }) {
+  const { data: board, isFetching, isLoading } = useBoardQuery(boardId);
+
+  if (isFetching && isLoading) {
+    return <Loading placement="absolute" />;
+  }
+
+  if (!board) {
+    return null;
+  }
+
+  return <BoardContext.Provider value={board}>{children}</BoardContext.Provider>;
+}

src/app/(main)/boards/[boardId]/BoardBody.tsx

@@ -0,0 +1,3 @@
+export function BoardBody() {
+  return <h1>i am bored.</h1>;
+}

src/app/(main)/boards/[boardId]/BoardHeader.tsx

@@ -1,11 +1,11 @@
-import { Button, Column, Grid, InlineEditField, Row } from '@umami/react-zen';
+import { Button, Column, Grid, Heading, Row, TextField } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 
 export function BoardHeader() {
   const { formatMessage, labels } = useMessages();
   const defaultName = formatMessage(labels.untitled);
-  const name = 'My Board';
-  const description = 'This is my board';
+  const name = '';
+  const description = '';
 
   const handleNameChange = (name: string) => {
     //updateReport({ name: name || defaultName });
@@ -15,29 +15,50 @@ export function BoardHeader() {
     //updateReport({ description });
   };
 
+  return <h1>asdgfviybiyu8oaero8g9873qrgb875qh0g8</h1>;
+
   return (
-    <Grid columns="1fr 1fr">
+    <Grid
+      columns={{ xs: '1fr', md: '1fr 1fr' }}
+      paddingY="4"
+      marginBottom="6"
+      border="bottom"
+      gapX="6"
+    >
+      asdfasdfds
       <Column>
         <Row>
-          <InlineEditField
+          <TextField
+            variant="quiet"
             name="name"
             value={name}
+            defaultValue={name}
             placeholder={defaultName}
-            onCommit={handleNameChange}
-          />
+            onChange={handleNameChange}
+            autoComplete="off"
+            style={{ fontSize: '2rem', fontWeight: 700, width: '100%' }}
+          >
+            <Heading size="4">{name}</Heading>
+          </TextField>
         </Row>
         <Row>
-          <InlineEditField
+          <TextField
+            variant="quiet"
             name="description"
             value={description}
+            defaultValue={description}
             placeholder={`+ ${formatMessage(labels.addDescription)}`}
-            onCommit={handleDescriptionChange}
-          />
+            autoComplete="off"
+            onChange={handleDescriptionChange}
+            style={{ width: '100%' }}
+          >
+            {description}
+          </TextField>
         </Row>
       </Column>
-      <Row justifyContent="flex-end">
+      <Column justifyContent="center" alignItems="flex-end">
         <Button variant="primary">{formatMessage(labels.save)}</Button>
-      </Row>
+      </Column>
     </Grid>
   );
 }

src/app/(main)/boards/[boardId]/BoardPage.tsx

@@ -1,17 +1,17 @@
 'use client';
 import { Column } from '@umami/react-zen';
 import { BoardHeader } from '@/app/(main)/boards/[boardId]/BoardHeader';
+import { BoardProvider } from '@/app/(main)/boards/BoardProvider';
 import { PageBody } from '@/components/common/PageBody';
-import { useMessages } from '@/components/hooks';
-
-export function BoardPage() {
-  const { formatMessage, labels } = useMessages();
 
+export function BoardPage({ boardId }: { boardId: string }) {
   return (
-    <PageBody>
-      <Column margin="2">
-        <BoardHeader />
-      </Column>
-    </PageBody>
+    <BoardProvider boardId={boardId}>
+      <PageBody>
+        <Column>
+          <BoardHeader />
+        </Column>
+      </PageBody>
+    </BoardProvider>
   );
 }

src/components/boards/Board.tsx

@@ -1,9 +0,0 @@
-import { Column } from '@umami/react-zen';
-
-export interface BoardProps {
-  children?: React.ReactNode;
-}
-
-export function Board({ children }: BoardProps) {
-  return <Column>{children}</Column>;
-}

src/components/hooks/context/useBoard.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { BoardContext } from '@/app/(main)/boards/BoardProvider';
+
+export function useBoard() {
+  return useContext(BoardContext);
+}

src/components/hooks/index.ts

@@ -1,6 +1,7 @@
 'use client';
 
 // Context hooks
+export * from './context/useBoard';
 export * from './context/useLink';
 export * from './context/usePixel';
 export * from './context/useTeam';
@@ -9,6 +10,7 @@ export * from './context/useWebsite';
 
 // Query hooks
 export * from './queries/useActiveUsersQuery';
+export * from './queries/useBoardQuery';
 export * from './queries/useBoardsQuery';
 export * from './queries/useDateRangeQuery';
 export * from './queries/useDeleteQuery';

src/components/hooks/queries/useBoardQuery.ts

@@ -0,0 +1,17 @@
+import { keepPreviousData } from '@tanstack/react-query';
+import type { ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useModified } from '../useModified';
+
+export function useBoardQuery(boardId: string, options?: ReactQueryOptions) {
+  const { get, useQuery } = useApi();
+  const { modified } = useModified(`board:${boardId}`);
+
+  return useQuery({
+    queryKey: ['boards', { boardId, modified }],
+    queryFn: () => get(`/boards/${boardId}`),
+    enabled: !!boardId && boardId !== 'create',
+    placeholderData: keepPreviousData,
+    ...options,
+  });
+}