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>
           ))}