refactor: move app directories

frontend/src/routes/__root.tsx

@@ -0,0 +1,24 @@
+import { AppSidebar } from "@/components/app-sidebar";
+import { SiteHeader } from "@/components/site-header";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+const RootLayout = () => (
+  <div className="[--header-height:calc(--spacing(14))]">
+    <SidebarProvider className="flex flex-col">
+      <SiteHeader />
+      <div className="flex flex-1">
+        <AppSidebar />
+        <SidebarInset>
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <Outlet />
+            <TanStackRouterDevtools />
+          </div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  </div>
+);
+
+export const Route = createRootRoute({ component: RootLayout });

frontend/src/routes/conversation.$sessionId.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { getConversationHistory } from "@/services/get-conversation-history";
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { SendHorizontalIcon } from "lucide-react";
+
+export const Route = createFileRoute("/conversation/$sessionId")({
+  component: RouteComponent,
+  loader: async ({ params }) => {
+    const data = await getConversationHistory(params.sessionId);
+    if (!data) {
+      throw notFound();
+    }
+    return data;
+  },
+});
+
+function RouteComponent() {
+  const historyData = Route.useLoaderData();
+  const { sessionId } = Route.useParams();
+
+  return (
+    <div className="flex justify-center p-3 h-full">
+      <div className="flex flex-col w-xl gap-3">
+        <Card className="flex-1 flex flex-col">
+          <CardHeader>
+            <CardTitle>{historyData.title}</CardTitle>
+            <Separator orientation="horizontal" />
+          </CardHeader>
+          <CardContent className="flex-1 max-h-full">
+            <div className="flex flex-col rounded-sm bg-neutral-50 h-full max-h-full border border-neutral-200 shadow-2xs overflow-y-auto">
+              {/* <div className="w-[150px] h-[3500px] bg-amber-400"></div> */}
+            </div>
+          </CardContent>
+        </Card>
+        <div className="flex gap-3">
+          <Input className="flex-1" placeholder="Start typing..." />
+          <Button size="icon">
+            <SendHorizontalIcon />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/routes/index.tsx

@@ -0,0 +1,16 @@
+import ConversationsHistory from "@/components/conversations-history";
+import CreateConversation from "@/components/create-conversation";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+  component: Index,
+});
+
+function Index() {
+  return (
+    <div className="flex flex-col gap-3 p-2">
+      <CreateConversation />
+      <ConversationsHistory />
+    </div>
+  );
+}