Added hide

src/client/.idea/prettier.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="PrettierConfiguration">
     <option name="myRunOnSave" value="true" />
+    <option name="myRunOnReformat" value="true" />
   </component>
 </project>

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

src/client/src/pages/index.tsx

@@ -4,7 +4,46 @@ import { ProjectsHeading } from "@src/components/common/headings/projectsHeading
 import { groupByProjects } from "@src/core/actions/utility/groupByProjects";
 import { todosApi } from "@src/infrastructure/apis/todosApi";
 import { AddTodo } from "@src/components/todos/addTodo";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+
+function Inbox(props: { groupedTodos: any }) {
+  const [folded, setFolded] = useState(false);
+
+  return (
+    <div className="space-y-2">
+      <PageHeading
+        title="Inbox"
+        onClick={() => setFolded((folded) => !folded)}
+      />
+      <TodoList
+        todos={props.groupedTodos["inbox"]}
+        hideDone
+        project={""}
+        hideProject={false}
+        folded={folded}
+      />
+    </div>
+  );
+}
+
+function ProjectItem(props: { title: string; groupedTodos: any }) {
+  const [folded, setFolded] = useState(false);
+  return (
+    <div className="space-y-2">
+      <ProjectsHeading
+        title={props.title}
+        onClick={() => setFolded((folded) => !folded)}
+      />
+      <TodoList
+        todos={props.groupedTodos[props.title]}
+        hideDone
+        project={props.title}
+        hideProject
+        folded={folded}
+      />
+    </div>
+  );
+}
 
 const HomePage = () => {
   const { data, isLoading } = todosApi.useGetActiveTodosQuery();
@@ -32,28 +71,14 @@ const HomePage = () => {
   return (
     <main className="py-8 px-14 space-y-6">
       <section className="space-y-8 mx-auto max-w-4xl">
-        {groupedTodos["inbox"] && (
-          <div className="space-y-2">
-            <PageHeading title="Inbox" />
-            <TodoList
-              todos={groupedTodos["inbox"]}
-              hideDone
-              project={""}
-              hideProject={false}
-            />
-          </div>
-        )}
+        {groupedTodos["inbox"] && <Inbox groupedTodos={groupedTodos} />}
         {sections &&
           sections.map((section) => (
-            <div key={section} className="space-y-2">
-              <ProjectsHeading title={section} />
-              <TodoList
-                todos={groupedTodos[section]}
-                hideDone
-                project={section}
-                hideProject
-              />
-            </div>
+            <ProjectItem
+              key={section}
+              title={section}
+              groupedTodos={groupedTodos}
+            />
           ))}
         {onlyActiveTodos && onlyActiveTodos.length === 0 && (
           <div className="space-y-4">