Update Todo work

packages/webui/package.json

@@ -10,6 +10,10 @@
   },
   "dependencies": {
     "@effect/schema": "^0.68.17",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.16.1",
+    "@mui/material": "^5.16.1",
     "@tanstack/react-query": "4",
     "@tanstack/react-router": "^1.44.2",
     "@thilawyn/thilalib": "^0.1.5",

packages/webui/src/routes/index.lazy.tsx

@@ -31,6 +31,7 @@ export const Index = observer(() => {
         }
     })
 
+
     return (
         <div className="flex flex-col gap-1 items-stretch">
             {todos.map(todo => (

packages/webui/src/todo/VTodo.tsx

@@ -1,6 +1,15 @@
+import { Schema as S } from "@effect/schema"
+import { ArrowUpward } from "@mui/icons-material"
+import { JsonifiableTodo } from "@todo-tests/common/data"
 import { observer } from "mobx-react-lite"
-import { Card } from "primereact/card"
+import { Button } from "primereact/button"
 import { Todo } from "../data"
+import { trpc } from "../trpc/trpc"
+
+
+const encodeTodo = S.encodeSync(
+    JsonifiableTodo.pipe(S.compose(Todo))
+)
 
 
 export interface VTodoProps {
@@ -10,10 +19,24 @@ export interface VTodoProps {
 
 export const VTodo = observer(({ todo }: VTodoProps) => {
 
+    const updateTodo = trpc.todos.update.useMutation()
+
+
     return (
-        <Card>
+        <div className="flex flex-row justify-between content-center p-4 rounded-lg border-2 border-black">
             <p>{todo.content}</p>
-        </Card>
+
+            <div className="flex flex-row gap-1 content-center">
+                <Button
+                    severity="secondary"
+                    rounded
+                    size="small"
+                    icon={<ArrowUpward />}
+
+                    onClick={() => updateTodo.mutate(encodeTodo(todo))}
+                />
+            </div>
+        </div>
     )
 
 })