Add base project

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

@@ -21,8 +21,8 @@ export function AddTodo(props: {}) {
 
   return (
     <AddTodoForm
-      onAdd={(todoName) => {
-        createTodo(todoName);
+      onAdd={(todoName, project) => {
+        createTodo(todoName, project);
       }}
       onClose={() => setCollapsed(CollapsedState.collapsed)}
     />

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

@@ -1,30 +1,43 @@
 import { FC, useState } from "react";
 
 export const AddTodoForm: FC<{
-  onAdd: (todoName: string) => void;
+  onAdd: (todoName: string, project: string) => void;
   onClose: () => void;
 }> = ({ onAdd, onClose }) => {
   const [todoName, setTodoName] = useState("");
+  const [project, setProject] = useState("");
 
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
-        onAdd(todoName);
+        onAdd(todoName, project);
         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 w-full"
-            autoFocus
-            value={todoName}
-            tabIndex={1}
-            onChange={(e) => setTodoName(e.target.value)}
-          />
+        <div className="flex flex-col md:flex-row gap-4">
+          <div className="todo-input-form md:flex-grow py-2 px-4 bg-gray-800 border border-gray-500 rounded-lg">
+            <input
+              type="text"
+              placeholder="Todo name"
+              className="text-sm w-full"
+              autoFocus
+              value={todoName}
+              tabIndex={1}
+              onChange={(e) => setTodoName(e.target.value)}
+            />
+          </div>
+          <div className="todo-project py-2 px-4 bg-gray-700 border border-gray-500 rounded-lg ">
+            <input
+              type="text"
+              placeholder="Project name"
+              className="text-sm w-full placeholder-gray-400"
+              value={project}
+              tabIndex={2}
+              onChange={(e) => setProject(e.target.value)}
+            />
+          </div>
         </div>
         <div className="space-x-2">
           <button

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

@@ -5,13 +5,19 @@ import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
 interface TodoItemProps {
   todo: Todo;
   updateTodo: (todo: Todo) => void;
+  displayProject: boolean;
 }
 
 export const TodoItem: FC<TodoItemProps> = (props) => (
   <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>
+      <div className="flex flex-row flex-grow gap-2 pr-6">
+        <div className="flex-grow w-full break-all">{props.todo.title}</div>
+        {props.displayProject && props.todo.project && (
+          <div className="text-gray-500  text-right">{props.todo.project}</div>
+        )}
+      </div>
     </div>
   </div>
 );

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

@@ -18,6 +18,7 @@ export const TodoList = (props: { todos: Todo[]; hideDone: boolean }) => {
                 updateTodo={(todo) => {
                   updateTodoState(todo.id, todo.status);
                 }}
+                displayProject={false}
               />
             </li>
           ))}

src/client/src/core/entities/todo.tsx

@@ -10,6 +10,7 @@ export interface Todo {
   id: string;
   title: string;
   status: StatusState;
+  project?: string;
 }
 
 export const asTodo = (item: Todo): Todo => {

src/client/src/presentation/contexts/SocketContext.tsx

@@ -12,7 +12,7 @@ interface SocketContextProps {
   inboxTodos: Todo[];
   getTodos: () => void;
   getInboxTodos: () => void;
-  createTodo: (todoName: string) => void;
+  createTodo: (todoName: string, project: string) => void;
   updateTodo: (todoId: string, todoStatus: StatusState) => void;
 }
 
@@ -22,7 +22,7 @@ export const SocketContext = createContext<SocketContextProps>({
   inboxTodos: [],
   getTodos: () => {},
   getInboxTodos: () => {},
-  createTodo: (todoName) => {},
+  createTodo: (todoName, project) => {},
   updateTodo: (todoId, todoStatus) => {},
 });
 
@@ -72,8 +72,8 @@ export const SocketProvider: FC = (props) => {
         getInboxTodos: () => {
           conn.invoke("GetInboxTodos").catch(console.error);
         },
-        createTodo: (todoName) => {
-          conn.invoke("CreateTodo", todoName).catch(console.error);
+        createTodo: (todoName, project) => {
+          conn.invoke("CreateTodo", todoName, project).catch(console.error);
         },
         updateTodo: (todoId, todoStatus) => {
           conn.invoke("UpdateTodo", todoId, todoStatus).catch(console.error);

src/client/src/presentation/hooks/socketHooks.tsx

@@ -19,8 +19,8 @@ export const useCreateTodo = () => {
   const socketContext = useContext(SocketContext);
 
   return {
-    createTodo: (todoName: string) => {
-      socketContext.createTodo(todoName);
+    createTodo: (todoName: string, project: string) => {
+      socketContext.createTodo(todoName, project);
     },
   };
 };