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

app/(chat)/layout.tsx

@@ -0,0 +1,17 @@
+import { SidebarDesktop } from '@/components/sidebar-desktop'
+
+interface ChatLayoutProps {
+  children: React.ReactNode
+}
+
+export default async function ChatLayout({ children }: ChatLayoutProps) {
+  return (
+    <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
+      {/* @ts-ignore */}
+      <SidebarDesktop />
+      <div className="group w-full overflow-auto pl-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
+        {children}
+      </div>
+    </div>
+  )
+}

app/actions.ts

@@ -75,7 +75,7 @@ export async function clearChats() {
 
   const chats: string[] = await kv.zrange(`user:chat:${session.user.id}`, 0, -1)
   if (!chats.length) {
-  return redirect('/')
+    return redirect('/')
   }
   const pipeline = kv.pipeline()
 
@@ -100,15 +100,23 @@ export async function getSharedChat(id: string) {
   return chat
 }
 
-export async function shareChat(chat: Chat) {
+export async function shareChat(id: string) {
   const session = await auth()
 
-  if (!session?.user?.id || session.user.id !== chat.userId) {
+  if (!session?.user?.id) {
     return {
       error: 'Unauthorized'
     }
   }
 
+  const chat = await kv.hgetall<Chat>(`chat:${id}`)
+
+  if (!chat || chat.userId !== session.user.id) {
+    return {
+      error: 'Something went wrong'
+    }
+  }
+
   const payload = {
     ...chat,
     sharePath: `/share/${chat.id}`

app/layout.tsx

@@ -44,8 +44,14 @@ export default function RootLayout({ children }: RootLayoutProps) {
         )}
       >
         <Toaster />
-        <Providers attribute="class" defaultTheme="system" enableSystem>
+        <Providers
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
           <div className="flex flex-col min-h-screen">
+            {/* @ts-ignore */}
             <Header />
             <main className="flex flex-col flex-1 bg-muted/50">{children}</main>
           </div>