feat: top navigator

Author: vuvincent

apps/desktop-v2/app/page.tsx

@@ -34,6 +34,7 @@ import useShortcuts from "@/hooks/useShortcuts";
 import { SupernovaCommand } from "@/types/command";
 import useFetchTasks from "@/hooks/useFetchTasks";
 import useViewingDateUI from "@/hooks/useViewingDate";
+import TopNavigator from "@/components/top-navigator";
 
 function Home() {
   const { tasks, setTasks, taskFetchState, triggerRefetchTasks } =
@@ -119,7 +120,8 @@ function Home() {
             chosenTaskIndex !== -1 ? memoizedTasksView[chosenTaskIndex] : null,
         }}
       />
-      <div className="flex items-center justify-end w-full">
+      <div className="flex items-center justify-between w-full">
+        <TopNavigator />
         <Link href={settingsRoute}>
           <GearIcon width={20} height={20} />
         </Link>

apps/desktop-v2/app/view/inbox/page.tsx

@@ -11,6 +11,7 @@ import {
   createBlankTask,
 } from "@/components/supernova-task";
 import { TaskBuilderDialog } from "@/components/task-builder-dialog";
+import TopNavigator from "@/components/top-navigator";
 import { withAuth } from "@/hocs/withAuth";
 import useFetchTasks from "@/hooks/useFetchTasks";
 import useShortcuts from "@/hooks/useShortcuts";
@@ -98,7 +99,8 @@ function Inbox() {
             chosenTaskIndex !== -1 ? memoizedTasksView[chosenTaskIndex] : null,
         }}
       />
-      <div className="flex items-center justify-end w-full">
+      <div className="flex items-center justify-between w-full">
+        <TopNavigator />
         <Link href={settingsRoute}>
           <GearIcon width={20} height={20} />
         </Link>

apps/desktop-v2/components/icons.tsx

@@ -85,3 +85,21 @@ export const CalendarYellowIcon = (props: ImageProps) => (
     {...props}
   />
 );
+
+export const hexagonPath = "/icons/hexagon.svg";
+
+export const HexagonIcon = (props: ImageProps) => (
+  <Image
+    src={hexagonPath}
+    width={13}
+    height={13}
+    alt="Hexagon icon"
+    {...props}
+  />
+);
+
+export const inboxPath = "/icons/inbox.svg";
+
+export const InboxIcon = (props: ImageProps) => (
+  <Image src={inboxPath} width={13} height={13} alt="Inbox icon" {...props} />
+);

apps/desktop-v2/components/top-navigator.tsx

@@ -0,0 +1,49 @@
+import { HexagonIcon, InboxIcon } from "./icons";
+import { inboxRoute } from "@/app/view/inbox/meta";
+import { homeRoute } from "@/app/meta";
+import { Button } from "./button";
+import Link from "next/link";
+import { twMerge } from "tailwind-merge";
+
+export default function TopNavigator() {
+  const navItems: {
+    label: string;
+    icon: React.ReactNode;
+    route: string;
+  }[] = [
+    {
+      label: "Inbox",
+      icon: <InboxIcon />,
+      route: inboxRoute,
+    },
+    {
+      label: "Today",
+      icon: <HexagonIcon />,
+      route: homeRoute,
+    },
+  ];
+
+  const activeRoute = navItems.find(
+    (item) => item.route === window.location.pathname
+  )?.route;
+
+  return (
+    <div className="flex items-center gap-3">
+      {navItems.map((item) => (
+        <Link href={item.route} key={item.route}>
+          <Button key={item.route} bgVariant="ghost" className="gap-1">
+            {item.icon}
+            <p
+              className={twMerge(
+                "text-xs",
+                activeRoute === item.route && "underline"
+              )}
+            >
+              {item.label}
+            </p>
+          </Button>
+        </Link>
+      ))}
+    </div>
+  );
+}