feat: done tasks hidden until clicked to reveal

Author: vuvincent

apps/desktop-v2/app/auth/page.tsx

@@ -18,7 +18,7 @@ const AuthPage = () => {
       }
       router.replace(homeRoute);
     })();
-  }, []);
+  }, [router]);
 
   return (
     <main className="flex flex-col items-center justify-center h-screen max-h-screen bg-dark-teal-gradient">

apps/desktop-v2/app/page.tsx

@@ -1,15 +1,12 @@
 "use client";
 
 import { withAuth } from "@/hocs/withAuth";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 import {
   SupernovaTaskComponent,
   createBlankTask,
 } from "../components/supernova-task";
-import Mousetrap from "mousetrap";
 import { TaskBuilderDialog } from "../components/task-builder-dialog";
-import { ISupernovaTask } from "@supernova/types";
-import { GearIcon } from "@radix-ui/react-icons";
+import { ChevronDownIcon, GearIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
 import { settingsRoute } from "./settings/meta";
 import { SupernovaCommandCenter } from "../components/command-center";
@@ -18,6 +15,8 @@ import { Kbd } from "../components/kbd";
 import { CreateTaskPlaceholder } from "@/components/create-task-placeholder";
 import { SupernovaGlobeLogoImage } from "@/components/icons";
 import useSupernovaTasksUI from "@/hooks/useSupernovaTasksUI";
+import * as Accordion from "@radix-ui/react-accordion";
+import React from "react";
 
 function Home() {
   // get today's date in this format: Tue, 26th Aug
@@ -27,8 +26,9 @@ function Home() {
     month: "short",
   });
   const {
+    accordionValue,
+    setAccordionValue,
     taskFetchState,
-    setTasks,
     taskBuilderIsOpen,
     setTaskBuilderIsOpen,
     chosenTaskIndex,
@@ -42,6 +42,8 @@ function Home() {
     taskListRef,
     commands,
     handleClickTask,
+    doneTasks,
+    undoneTasks,
   } = useSupernovaTasksUI();
 
   return (
@@ -113,7 +115,7 @@ function Home() {
               </p>
             </div>
           )}
-          {memoizedTasksView.map((task, index) => (
+          {undoneTasks.map((task, undoneIndex) => (
             <SupernovaTaskComponent
               key={task.id}
               task={task}
@@ -122,7 +124,7 @@ function Home() {
                 memoizedTasksView[chosenTaskIndex].id === task.id
               }
               onClickCheck={handleCheckTask(task.id)}
-              onClick={handleClickTask(index)}
+              onClick={handleClickTask(undoneIndex)}
             />
           ))}
         </div>
@@ -131,11 +133,45 @@ function Home() {
           <div className="text-red-600 text-[16px]">{taskFetchState.error}</div>
         </div>
       )}
+
       <CreateTaskPlaceholder
         onClick={() => {
           openTaskBuilder();
         }}
       />
+      <Accordion.Root
+        className="w-full max-w-xl"
+        type="single"
+        value={accordionValue}
+        onValueChange={setAccordionValue}
+        collapsible
+      >
+        <Accordion.AccordionItem value="supernova-dones">
+          <Accordion.AccordionTrigger className="flex items-center justify-between w-full hover:bg-gray-100 rounded px-1">
+            <p className="text-xs text-teal-800">Dones ({doneTasks.length})</p>{" "}
+            <ChevronDownIcon className="text-teal-800" />
+          </Accordion.AccordionTrigger>
+          <Accordion.AccordionContent className="py-2">
+            <div
+              className="flex flex-col items-center w-full max-h-full gap-2 overflow-clip"
+              ref={taskListRef}
+            >
+              {doneTasks.map((task, doneIndex) => (
+                <SupernovaTaskComponent
+                  key={task.id}
+                  task={task}
+                  focused={
+                    chosenTaskIndex !== -1 &&
+                    memoizedTasksView[chosenTaskIndex].id === task.id
+                  }
+                  onClickCheck={handleCheckTask(task.id)}
+                  onClick={handleClickTask(undoneTasks.length + doneIndex)}
+                />
+              ))}
+            </div>
+          </Accordion.AccordionContent>
+        </Accordion.AccordionItem>
+      </Accordion.Root>
     </main>
   );
 }

apps/desktop-v2/hooks/useSupernovaTasksUI.tsx

@@ -29,6 +29,14 @@ export default function useSupernovaTasksUI() {
 
   const [taskBuilderIsOpen, setTaskBuilderIsOpen] = useState<boolean>(false);
   const [refetchTasks, setRefetchTasks] = useState<boolean>(false); // refetch the tasks from the backend for consistency and sorting
+  const [accordionValue, setAccordionValue] = useState<string | undefined>(
+    undefined
+  );
+  const doneAccordionOpened = accordionValue === "supernova-dones";
+
+  const undoneTasks = memoizedTasksView.filter((task) => !task.isComplete);
+  const doneTasks = memoizedTasksView.filter((task) => task.isComplete);
+
   const anyModalOpen = useMemo(() => {
     return taskBuilderIsOpen || showAreYouSureDialog;
   }, [showAreYouSureDialog, taskBuilderIsOpen]);
@@ -252,7 +260,7 @@ export default function useSupernovaTasksUI() {
       },
       {
         label: "Mark done/undone",
-        shortcut: "d",
+        shortcut: ["d", "e"],
         cb: () => {
           if (chosenTaskIndex !== -1) {
             handleCheckTask(tasks[chosenTaskIndex].id)(
@@ -297,6 +305,11 @@ export default function useSupernovaTasksUI() {
     });
     // go down
     Mousetrap.bind(["j", "down"], () => {
+      // if modal isn't opened and it's at the last undone task,
+      // then don't go down more (will go into the done tasks)
+      if (chosenTaskIndex === undoneTasks.length - 1 && !doneAccordionOpened) {
+        return;
+      }
       if (chosenTaskIndex < tasks.length - 1) {
         setChosenTaskIndex(chosenTaskIndex + 1);
       }
@@ -330,12 +343,14 @@ export default function useSupernovaTasksUI() {
   }, [
     chosenTaskIndex,
     commands,
+    doneAccordionOpened,
     handleCheckTask,
     handleDeleteTask,
     setChosenTaskIndex,
     showAreYouSureDialog,
     taskBuilderIsOpen,
     tasks,
+    undoneTasks.length,
   ]);
 
   // fetch the task in the beginning
@@ -405,5 +420,10 @@ export default function useSupernovaTasksUI() {
     handleSubmitAreYouSure,
     taskListRef,
     memoizedTasksView,
+    accordionValue,
+    setAccordionValue,
+    doneAccordionOpened,
+    undoneTasks,
+    doneTasks,
   };
 }

apps/desktop-v2/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",