Refined the design a bit

src/client/src/components/todos/addTodo.tsx

@@ -2,9 +2,11 @@ import { useState } from "react";
 import { CollapsedAddTodo } from "@src/components/todos/collapsed/collapsedAddTodo";
 import { AddTodoForm } from "@src/components/todos/collapsed/addTodoForm";
 import { CollapsedState } from "@src/components/todos/collapsed/collapsedState";
-import {HubConnection} from "@microsoft/signalr";
+import { useCreateTodo } from "@src/presentation/hooks/socketHooks";
+
+export function AddTodo(props: {}) {
+  const { createTodo } = useCreateTodo();
 
-export function AddTodo(props: {conn: HubConnection}) {
   const [collapsed, setCollapsed] = useState<CollapsedState>(
     CollapsedState.collapsed
   );
@@ -20,7 +22,7 @@ export function AddTodo(props: {conn: HubConnection}) {
   return (
     <AddTodoForm
       onAdd={(todoName) => {
-        props.conn.invoke("CreateTodo", todoName).catch(console.error)
+        createTodo(todoName);
       }}
       onClose={() => setCollapsed(CollapsedState.collapsed)}
     />

src/client/src/components/todos/collapsed/addTodoForm.tsx

@@ -7,29 +7,44 @@ export const AddTodoForm: FC<{
   const [todoName, setTodoName] = useState("");
 
   return (
-    <div className="p-2 space-y-1">
-      <div className="todo-input-form py-2 px-4 bg-gray-900 border border-gray-600">
-        <input
-          type="text"
-          placeholder="Todo name"
-          className="text-sm"
-          value={todoName}
-          onChange={(e) => setTodoName(e.target.value)}
-        />
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onAdd(todoName);
+        setTodoName("");
+      }}
+    >
+      <div className="py-2 space-y-3">
+        <div className="todo-input-form py-2 px-4 bg-gray-800 border border-gray-500 rounded-lg">
+          <input
+            type="text"
+            placeholder="Todo name"
+            className="text-sm"
+            autoFocus
+            value={todoName}
+            tabIndex={1}
+            onChange={(e) => setTodoName(e.target.value)}
+          />
+        </div>
+        <div className="space-x-2">
+          <button
+            type="submit"
+            tabIndex={2}
+            disabled={!todoName}
+            className="base-button dark:bg-accent-500 disabled:bg-accent-800 active:bg-accent-400"
+          >
+            Add todo
+          </button>
+          <button
+            tabIndex={3}
+            type="button"
+            className="base-button"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+        </div>
       </div>
-      <div className="space-x-2">
-        <button
-          disabled={!todoName}
-          onClick={() => {
-            onAdd(todoName);
-            setTodoName("");
-          }}
-          className="disabled:text-gray-800 transition"
-        >
-          Add todo
-        </button>
-        <button onClick={onClose}>Cancel</button>
-      </div>
-    </div>
+    </form>
   );
 };

src/client/src/components/todos/collapsed/collapsedAddTodo.tsx

@@ -1,5 +1,12 @@
 import { FC } from "react";
 
 export const CollapsedAddTodo: FC<{ onClick: () => void }> = ({ onClick }) => {
-  return <div onClick={onClick}>Add todo</div>;
+  return (
+    <div
+      className="cursor-pointer select-none dark:text-gray-400"
+      onClick={onClick}
+    >
+      Add todo
+    </div>
+  );
 };

src/client/src/components/todos/todoCheckmark.tsx

@@ -11,7 +11,7 @@ export const TodoCheckmark: FC<TodoCheckmarkProps> = (props) => (
     onClick={() =>
       props.updateTodo({ ...props.todo, status: !props.todo.status })
     }
-    className={`h-5 w-5 rounded-full border dark:border-gray-700  ${
+    className={`h-5 w-5 rounded-full border dark:border-gray-500  ${
       props.todo.status === StatusState.done
         ? "dark:bg-gray-700"
         : "hover:dark:bg-gray-600"

src/client/src/components/todos/todoItem.tsx

@@ -8,7 +8,7 @@ interface TodoItemProps {
 }
 
 export const TodoItem: FC<TodoItemProps> = (props) => (
-  <div className="py-3 border-b border-gray-300 dark:border-gray-700">
+  <div className="py-3 border-b border-gray-300 dark:border-gray-600">
     <div className="flex items-center space-x-4">
       <TodoCheckmark {...props} />
       <span className="pb-1">{props.todo.title}</span>

src/client/src/components/todos/todoList.tsx

@@ -1,24 +1,28 @@
 import { Todo } from "@src/core/entities/todo";
 import { TodoItem } from "@src/components/todos/todoItem";
 import { AddTodo } from "@src/components/todos/addTodo";
-import { HubConnection } from "@microsoft/signalr";
+import { useUpdateTodoState } from "@src/presentation/hooks/socketHooks";
 
-export const TodoList = (props: { todos: Todo[]; conn: HubConnection }) => (
-  <>
-    <ul id="inbox">
-      {props.todos.map((t, i) => (
-        <li key={i}>
-          <TodoItem
-            todo={t}
-            updateTodo={(todo) => {
-              props.conn
-                .invoke("UpdateTodo", todo.id, todo.status)
-                .catch(console.error);
-            }}
-          />
-        </li>
-      ))}
-    </ul>
-    <AddTodo conn={props.conn} />
-  </>
-);
+export const TodoList = (props: { todos: Todo[]; hideDone: boolean }) => {
+  const { updateTodoState } = useUpdateTodoState();
+
+  return (
+    <>
+      <ul id="inbox">
+        {props.todos
+          .filter((t) => t.status == false)
+          .map((t, i) => (
+            <li key={i}>
+              <TodoItem
+                todo={t}
+                updateTodo={(todo) => {
+                  updateTodoState(todo.id, todo.status);
+                }}
+              />
+            </li>
+          ))}
+      </ul>
+      <AddTodo />
+    </>
+  );
+};