feat: reorganize files and implement ui and sidebar

components/sidebar.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import * as React from 'react'
+import { Sidebar as SidebarIcon } from 'lucide-react'
+import { type Session } from '@auth/nextjs/types'
+import { signOut } from '@auth/nextjs/client'
+
+import { type Chat } from '@/lib/types'
+import { Button } from '@/components/ui/button'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+} from '@/components/ui/sheet'
+import { SidebarItem } from '@/components/sidebar-item'
+import { ThemeToggle } from '@/components/theme-toggle'
+
+export interface SidebarProps {
+  session?: Session
+  chats: Chat[]
+}
+
+export async function Sidebar({ session, chats }: SidebarProps) {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" className="w-9 h-9 p-0">
+          <SidebarIcon className="w-6 h-6" />
+          <span className="sr-only">Toggle Sidebar</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent
+        position="left"
+        className="w-[300px] gap-0 top-2 px-4 rounded-r-lg bottom-2 h-auto flex flex-col"
+      >
+        <SheetHeader>
+          <SheetTitle>Chat History</SheetTitle>
+        </SheetHeader>
+        <div className="flex-1">
+          {chats?.length ? (
+            <div className="space-y-2 -mx-2 py-4">
+              {chats.map(chat => (
+                <SidebarItem
+                  key={chat.id}
+                  title={chat.title}
+                  userId={session?.user?.email ?? ''}
+                  href={`/chat/${chat.id}`}
+                  id={chat.id}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="text-center p-8">
+              <p className="text-sm text-muted-foreground">
+                {session?.user ? <>No chat history</> : <>Login for history</>}
+              </p>
+            </div>
+          )}
+        </div>
+        <div className="flex items-center">
+          <ThemeToggle />
+          {session?.user && (
+            <Button
+              variant="ghost"
+              onClick={() => signOut()}
+              className="ml-auto"
+            >
+              Logout
+            </Button>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}