packages/example/package.json

@@ -37,6 +37,7 @@
     "@effect/platform-browser": "^0.52.1",
     "@radix-ui/themes": "^3.1.6",
     "@typed/id": "^0.17.1",
+    "lucide-react": "^0.471.1",
     "mobx": "^6.13.5"
   }
 }

packages/example/src/todos/views/VTodo.tsx

@@ -1,6 +1,7 @@
 import { Todo } from "@/domain"
-import { Box, Card, Flex, Heading, TextArea } from "@radix-ui/themes"
+import { Box, Card, Flex, IconButton, TextArea } from "@radix-ui/themes"
 import { Effect } from "effect"
+import { Delete } from "lucide-react"
 import { useState } from "react"
 import { Reffuse } from "../reffuse"
 import { TodosState } from "../services"
@@ -21,8 +22,6 @@ export function VTodo({ index, todo }: VTodoProps) {
         <Box>
             <Card>
                 <Flex direction="column" align="stretch" gap="1">
-                    <Heading>#{todo.id}</Heading>
-
                     <TextArea
                         value={todo.content}
                         onChange={e => TodosState.TodosState.pipe(
@@ -34,6 +33,21 @@ export function VTodo({ index, todo }: VTodoProps) {
                         )}
                         disabled={!editorMode}
                     />
+
+                    <Flex direction="row" justify="between" align="center">
+                        <Box></Box>
+
+                        <Flex direction="row" align="center" gap="1">
+                            <IconButton
+                                onClick={() => TodosState.TodosState.pipe(
+                                    Effect.flatMap(state => state.remove(index)),
+                                    runSync,
+                                )}
+                            >
+                                <Delete />
+                            </IconButton>
+                        </Flex>
+                    </Flex>
                 </Flex>
             </Card>
         </Box>

packages/example/src/todos/views/VTodos.tsx

@@ -1,4 +1,4 @@
-import { Flex } from "@radix-ui/themes"
+import { Box, Flex } from "@radix-ui/themes"
 import { Chunk, Effect, Stream } from "effect"
 import { Reffuse } from "../reffuse"
 import { TodosState } from "../services"
@@ -20,15 +20,15 @@ export function VTodos() {
 
 
     return (
-        <Flex direction="column" align="stretch" gap="3">
+        <Flex direction="column" align="center" gap="3">
-            <VNewTodo />
+            <Box width="500px">
+                <VNewTodo />
+            </Box>
 
             {Chunk.map(todos, (todo, index) => (
-                <VTodo
+                <Box key={todo.id} width="500px">
-                    key={todo.id}
+                    <VTodo index={index} todo={todo} />
-                    index={index}
+                </Box>
-                    todo={todo}
-                />
             ))}
         </Flex>
     )