Improve sidebar, new chat, and share dialog (#190)

components/sidebar.tsx

@@ -2,35 +2,20 @@
 
 import * as React from 'react'
 
-import { Button } from '@/components/ui/button'
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger
-} from '@/components/ui/sheet'
-import { IconSidebar } from '@/components/ui/icons'
+import { useSidebar } from '@/lib/hooks/use-sidebar'
+import { cn } from '@/lib/utils'
 
-export interface SidebarProps {
-  children?: React.ReactNode
-}
+export interface SidebarProps extends React.ComponentProps<'div'> {}
+
+export function Sidebar({ className, children }: SidebarProps) {
+  const { isSidebarOpen, isLoading } = useSidebar()
 
-export function Sidebar({ children }: SidebarProps) {
   return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="ghost" className="-ml-2 h-9 w-9 p-0">
-          <IconSidebar className="h-6 w-6" />
-          <span className="sr-only">Toggle Sidebar</span>
-        </Button>
-      </SheetTrigger>
-      <SheetContent className="inset-y-0 flex h-auto w-[300px] flex-col p-0">
-        <SheetHeader className="p-4">
-          <SheetTitle className="text-sm">Chat History</SheetTitle>
-        </SheetHeader>
-        {children}
-      </SheetContent>
-    </Sheet>
+    <div
+      data-state={isSidebarOpen && !isLoading ? 'open' : 'closed'}
+      className={cn(className, 'h-full flex-col dark:bg-zinc-950')}
+    >
+      {children}
+    </div>
   )
 }