Added hide

src/client/src/components/common/headings/pageHeading.tsx

@@ -2,8 +2,14 @@ import { FC } from "react";
 
 interface PageHeadingProps {
   title: string;
+  onClick?: () => void;
 }
 
-export const PageHeading: FC<PageHeadingProps> = ({ title }) => (
-  <h3 className="font-bold text-xl tracking-wide">{title}</h3>
+export const PageHeading: FC<PageHeadingProps> = ({ title, onClick }) => (
+  <h3
+    className="font-bold text-xl tracking-wide hover:underline"
+    onClick={onClick}
+  >
+    {title}
+  </h3>
 );

src/client/src/components/common/headings/projectsHeading.tsx

@@ -1,3 +1,8 @@
-export const ProjectsHeading = (props: { title: string }) => (
-  <h5 className="text-sm font-bold">{props.title}</h5>
+export const ProjectsHeading = (props: {
+  title: string;
+  onClick: () => void;
+}) => (
+  <h5 className="text-sm font-bold hover:underline" onClick={props.onClick}>
+    {props.title}
+  </h5>
 );

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

@@ -2,13 +2,14 @@ import { Todo } from "@src/core/entities/todo";
 import { TodoItem } from "@src/components/todos/todoItem";
 import { AddTodo } from "@src/components/todos/addTodo";
 import { useUpdateTodo } from "@src/presentation/hooks/socketHooks";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 export const TodoList = (props: {
   todos: Todo[];
   hideDone: boolean;
   hideProject: boolean;
   project: string;
+  folded: boolean;
 }) => {
   const { updateTodo } = useUpdateTodo();
 
@@ -25,20 +26,23 @@ export const TodoList = (props: {
 
   return (
     <>
-      <ul id="inbox">
-        {todos.map((t, i) => (
-          <li key={i}>
-            <TodoItem
-              todo={t}
-              updateTodo={(todo) => {
-                updateTodo(todo);
-              }}
-              displayProject={!props.hideProject}
-            />
-          </li>
-        ))}
-      </ul>
-      <AddTodo project={props.project} />
+      {props.folded && <div>...</div>}
+      <div className={`space-y-2 ${props.folded ? "hidden" : "block"}`}>
+        <ul id="inbox">
+          {todos.map((t, i) => (
+            <li key={i}>
+              <TodoItem
+                todo={t}
+                updateTodo={(todo) => {
+                  updateTodo(todo);
+                }}
+                displayProject={!props.hideProject}
+              />
+            </li>
+          ))}
+        </ul>
+        <AddTodo project={props.project} />
+      </div>
     </>
   );
 };