feat: implement '/chats'

frontend/src/app/workspace/chats/page.tsx

@@ -1,17 +1,64 @@
 "use client";
 
+import Link from "next/link";
+import { useMemo, useState } from "react";
+
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   WorkspaceBody,
   WorkspaceContainer,
   WorkspaceHeader,
 } from "@/components/workspace/workspace-container";
+import { useThreads } from "@/core/threads/hooks";
+import { pathOfThread, titleOfThread } from "@/core/threads/utils";
+import { formatTimeAgo } from "@/core/utils/datetime";
 
 export default function ChatsPage() {
+  const { data: threads } = useThreads();
+  const [search, setSearch] = useState("");
+  const filteredThreads = useMemo(() => {
+    return threads?.filter((thread) => {
+      return titleOfThread(thread).toLowerCase().includes(search.toLowerCase());
+    });
+  }, [threads, search]);
   return (
     <WorkspaceContainer>
       <WorkspaceHeader></WorkspaceHeader>
       <WorkspaceBody>
-        <div className="flex size-full justify-center"></div>
+        <div className="flex size-full flex-col">
+          <header className="flex shrink-0 items-center justify-center pt-8">
+            <Input
+              type="search"
+              className="h-12 w-full max-w-(--container-width-md) text-xl"
+              placeholder="Search chats"
+              autoFocus
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </header>
+          <main className="min-h-0 flex-1">
+            <ScrollArea className="size-full py-4">
+              <div className="mx-auto flex size-full max-w-(--container-width-md) flex-col">
+                {filteredThreads?.map((thread) => (
+                  <Link
+                    key={thread.thread_id}
+                    href={pathOfThread(thread.thread_id)}
+                  >
+                    <div className="flex flex-col gap-2 border-b p-4">
+                      <div>
+                        <div>{titleOfThread(thread)}</div>
+                      </div>
+                      <div className="text-muted-foreground text-sm">
+                        {formatTimeAgo(thread.updated_at)}
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </ScrollArea>
+          </main>
+        </div>
       </WorkspaceBody>
     </WorkspaceContainer>
   );