PrimeReact setup

packages/webui/package.json

@@ -12,17 +12,18 @@
     "@effect/schema": "^0.68.17",
     "@tanstack/react-query": "4",
     "@thilawyn/thilalib": "^0.1.5",
+    "@todo-tests/common": "workspace:*",
     "@trpc/client": "^10.45.2",
     "@trpc/react-query": "^10.45.2",
     "effect": "^3.4.7",
     "mobx": "^6.13.0",
     "mobx-react-lite": "^4.0.7",
+    "primereact": "^10.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@todo-tests/common": "workspace:*",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",

packages/webui/src/App.tsx

@@ -1,3 +1,5 @@
+import { PrimeReactProvider } from "primereact/api"
+import "primereact/resources/themes/lara-light-cyan/theme.css"
 import "./index.css"
 import { VTodosSubscription } from "./todo/VTodosSubscription"
 import { TRPCClientProvider } from "./trpc/TRPCClientProvider"
@@ -6,10 +8,12 @@ import { TRPCClientProvider } from "./trpc/TRPCClientProvider"
 export function App() {
 
     return (
-        <TRPCClientProvider>
-            {/* <Index /> */}
-            <VTodosSubscription />
-        </TRPCClientProvider>
+        <PrimeReactProvider>
+            <TRPCClientProvider>
+                {/* <Index /> */}
+                <VTodosSubscription />
+            </TRPCClientProvider>
+        </PrimeReactProvider>
     )
 
 }

packages/webui/src/todo/VTodo.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react-lite"
+import { Card } from "primereact/card"
 import { Todo } from "../data"
 
 
@@ -10,9 +11,9 @@ export interface VTodoProps {
 export const VTodo = observer(({ todo }: VTodoProps) => {
 
     return (
-        <div className="flex flex-col px-6 pt-10 pb-8 bg-white ring-1 shadow-xl ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
-            <p className="text-sm">{todo.content}</p>
-        </div>
+        <Card>
+            <p>{todo.content}</p>
+        </Card>
     )
 
 })

packages/webui/src/todo/VTodos.tsx

@@ -14,7 +14,7 @@ export interface VTodosProps {
  * Shows a vertical list of todos
  */
 export const VTodos = observer(({ todos }: VTodosProps) => (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-stretch gap-1">
         {todos.map(todo => (
             <VTodo
                 key={Option.match(todo.id, {

packages/webui/src/todo/VTodosSubscription.tsx

@@ -1,12 +1,12 @@
 import { Schema as S } from "@effect/schema"
 import { JsonifiableTodo } from "@todo-tests/common/data"
-import { Option, flow, identity } from "effect"
+import { flow } from "effect"
 import { IObservableArray, observable } from "mobx"
 import { observer } from "mobx-react-lite"
 import { useState } from "react"
 import { Todo } from "../data"
 import { trpc } from "../trpc/trpc"
-import { VTodo } from "./VTodo"
+import { VTodos } from "./VTodos"
 
 
 const decodeTodos = flow(
@@ -28,25 +28,12 @@ export const VTodosSubscription = observer(() => {
     const [todos, setTodos] = useState<IObservableArray<Todo>>(observable.array())
 
     trpc.todos.changes.useSubscription(undefined, {
-        onData(data) {
+        onData: data => {
             setTodos(decodeTodos(data))
         }
     })
 
 
-    return (
-        <div className="flex flex-col gap-1">
-            {todos.map(todo => (
-                <VTodo
-                    key={Option.match(todo.id, {
-                        onSome: identity,
-                        onNone: () => todo.order,
-                    })}
-
-                    todo={todo}
-                />
-            ))}
-        </div>
-    )
+    return <VTodos todos={todos} />
 
 })