Merge branch 'main' of github.com:learn-anything/learn-anything

web/app/routes/_layout/_pages/_protected/tasks/index.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, Link } from "@tanstack/react-router"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { LaIcon } from "@/components/custom/la-icon"
 import { isToday, isFuture } from "date-fns"
@@ -8,12 +8,59 @@ import { TaskForm } from "./-form"
 import { TaskList } from "./-list"
 import { Task } from "~/lib/schema/task"
 import { z } from "zod"
+import { cn } from "~/lib/utils"
 // import { getFeatureFlag } from "~/actions"
 
 const taskSearchSchema = z.object({
   filter: z.enum(["today", "upcoming"]).optional(),
 })
 
+const TaskTabs: React.FC<{ filter?: string }> = ({ filter }) => {
+  return (
+    <div className="mb-4 flex items-center justify-center gap-2">
+      <Link
+        to="/tasks"
+        className={cn(
+          "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors",
+          filter === undefined
+            ? "bg-accent text-accent-foreground"
+            : "text-muted-foreground hover:bg-accent/50",
+        )}
+      >
+        <LaIcon name="ListTodo" className="size-4" />
+        All Tasks
+      </Link>
+      <Link
+        to="/tasks"
+        search={{ filter: "today" }}
+        className={cn(
+          "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors",
+          filter === "today"
+            ? "bg-accent text-accent-foreground"
+            : "text-muted-foreground hover:bg-accent/50",
+        )}
+      >
+        <LaIcon name="BookOpenCheck" className="size-4" />
+        Today
+      </Link>
+
+      <Link
+        to="/tasks"
+        search={{ filter: "upcoming" }}
+        className={cn(
+          "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors",
+          filter === "upcoming"
+            ? "bg-accent text-accent-foreground"
+            : "text-muted-foreground hover:bg-accent/50",
+        )}
+      >
+        <LaIcon name="History" className="size-4" />
+        Upcoming
+      </Link>
+    </div>
+  )
+}
+
 export const Route = createFileRoute("/_layout/_pages/_protected/tasks/")({
   // beforeLoad: async ({ context }) => {
   //   if (!context.user.id) {
@@ -66,7 +113,8 @@ function TaskComponent() {
 
   return (
     <div className="flex flex-col space-y-4 p-4">
-      <div className="flex flex-row items-center gap-1">
+      <TaskTabs filter={filter} />
+      {/* <div className="flex flex-row items-center gap-1">
         <LaIcon
           name={
             filter === "today"
@@ -84,7 +132,7 @@ function TaskComponent() {
               ? "Upcoming Tasks"
               : "All Tasks"}
         </h1>
-      </div>
+      </div> */}
       <TaskForm />
       <TaskList
         tasks={