Add description

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

@@ -4,7 +4,7 @@ import { PrimaryButton } from "@src/components/common/buttons/primaryButton";
 import { TodoShortForm } from "@src/components/todos/collapsed/todoShortForm";
 
 export const AddTodoForm: FC<{
-  onAdd: (todoName: string, project: string) => void;
+  onAdd: (todoName: string, project: string, description: string) => void;
   onClose: () => void;
   project: string;
 }> = ({ onAdd, onClose, ...props }) => {
@@ -16,7 +16,7 @@ export const AddTodoForm: FC<{
     <form
       onSubmit={(e) => {
         e.preventDefault();
-        onAdd(todoName, project);
+        onAdd(todoName, project, todoDescription);
         setTodoName("");
         setTodoDescription("");
       }}

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

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

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

@@ -29,7 +29,12 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
               {props.todo.title}
             </a>
           </Link>
-          <div>
+          <div className="flex flex-row justify-between items-end">
+            <div>
+              {props.todo.description && (
+                  <div className="h-3 w-3 bg-gray-200 dark:bg-gray-900"/>
+              )}
+            </div>
             {props.displayProject && props.todo.project && (
               <div className="text-gray-500 text-xs text-right whitespace-nowrap place-self-end">
                 {props.todo.project}