feat: read and display tasks

app/tasks/_components/tasks.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Task } from '@/db/types';
+import { cn } from '@/lib/utils';
+import { useState } from 'react';
+
+type TasksProps = {
+  tasks: Task[];
+};
+
+export default function Tasks({ tasks }: TasksProps) {
+  const [task, setTask] = useState({ selected: '' });
+  return (
+    <ScrollArea className="h-screen">
+      <div className="flex flex-col gap-2 p-4 pt-0">
+        {tasks.map((item) => (
+          <button
+            key={item.id}
+            className={cn(
+              'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
+              task.selected === item.id && 'bg-muted',
+            )}
+            onClick={() =>
+              setTask({
+                ...task,
+                selected: item.id,
+              })
+            }
+          >
+            <div className="flex w-full flex-col gap-1">
+              <div className="flex items-center">
+                <div className="flex items-center gap-2">
+                  <div className="font-semibold">{item.title}</div>
+                  {/* {!item.read && (
+                    <span className="flex h-2 w-2 rounded-full bg-blue-600" />
+                  )} */}
+                </div>
+                {/* <div
+                  className={cn(
+                    'ml-auto text-xs',
+                    mail.selected === item.id
+                      ? 'text-foreground'
+                      : 'text-muted-foreground',
+                  )}
+                >
+                  {formatDistanceToNow(new Date(item.date), {
+                    addSuffix: true,
+                  })}
+                </div> */}
+              </div>
+              {/* <div className="text-xs font-medium">{item.}</div> */}
+            </div>
+            <div className="line-clamp-2 text-xs text-muted-foreground">
+              {item.description?.substring(0, 300)}
+            </div>
+            {/* {item.labels.length ? (
+              <div className="flex items-center gap-2">
+                {item.labels.map((label) => (
+                  <Badge key={label} variant={getBadgeVariantFromLabel(label)}>
+                    {label}
+                  </Badge>
+                ))}
+              </div>
+            ) : null} */}
+          </button>
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}

app/tasks/page.tsx

@@ -1,3 +1,7 @@
-export default function Tasks() {
-  return <div>Tasks</div>;
+import { getAllTasks } from '@/db/queries';
+import Tasks from './_components/tasks';
+
+export default async function TasksPage() {
+  const tasks = await getAllTasks('fox', 50, 0);
+  return <Tasks tasks={tasks} />;
 }

components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

components/ui/shell/main.tsx

@@ -5,7 +5,5 @@ import type { PropsWithChildren } from 'react';
 type HeaderBarProps = PropsWithChildren<{}>;
 
 export const Main = ({ children }: HeaderBarProps) => {
-  return (
-    <div className="[grid-area:main] grid place-content-center">{children}</div>
-  );
+  return <div className="[grid-area:main] grid pt-20">{children}</div>;
 };

db/queries.ts

@@ -0,0 +1,18 @@
+'use server';
+
+import { eq } from 'drizzle-orm';
+import { db } from './drizzle';
+import { tasks } from './schema';
+
+export const getAllTasks = async (
+  userId: string,
+  limit: number,
+  offset: number,
+) => {
+  return await db
+    .select()
+    .from(tasks)
+    .limit(limit)
+    .offset(offset)
+    .where(eq(tasks.userId, userId));
+};

db/seed.ts

@@ -27,11 +27,11 @@ async function seedUsers() {
 async function seedProjects() {
   await db.insert(projects).values([
     {
-      id: 'my-project',
-      name: 'My Project',
-      description: 'This is a project',
+      id: 'swolo',
+      name: 'Project management app',
+      description: 'Project management and note-taking app wit GTD principles.',
       userId: 'fox',
-      key: 'my-project',
+      key: 'swolo',
     },
   ]);
 }
@@ -40,13 +40,58 @@ async function seedTasks() {
   await db.insert(tasks).values([
     {
       id: createId(),
-      title: 'My Task',
-      description: 'This is a task',
+      title: 'Implement synching',
+      description: 'Sync data from the cloud to the local desktop.',
       status: 'todo',
       userId: 'fox',
-      projectId: 'my-project',
+      projectId: 'swolo',
       key: 'my-task',
     },
+    {
+      id: createId(),
+      title: 'Design app layout',
+      description: 'Create wireframes and mockups for the app.',
+      status: 'in-progress',
+      userId: 'fox',
+      projectId: 'swolo',
+      key: 'design-layout',
+    },
+    {
+      id: createId(),
+      title: 'Develop authentication module',
+      description: 'Implement user login and registration functionality.',
+      status: 'todo',
+      userId: 'fox',
+      projectId: 'swolo',
+      key: 'auth-module',
+    },
+    {
+      id: createId(),
+      title: 'Set up database',
+      description: 'Configure the database schema and connections.',
+      status: 'todo',
+      userId: 'fox',
+      projectId: 'swolo',
+      key: 'setup-database',
+    },
+    {
+      id: createId(),
+      title: 'Create API endpoints',
+      description: 'Develop RESTful API endpoints for the app.',
+      status: 'todo',
+      userId: 'fox',
+      projectId: 'swolo',
+      key: 'create-api',
+    },
+    {
+      id: createId(),
+      title: 'Implement frontend',
+      description: 'Build the frontend using React.',
+      status: 'todo',
+      userId: 'fox',
+      projectId: 'swolo',
+      key: 'implement-frontend',
+    },
   ]);
 }
 

db/types.ts

@@ -0,0 +1,3 @@
+import { tasks } from './schema';
+
+export type Task = typeof tasks.$inferSelect;

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",