fix: update login button and sidebar

components/header.tsx

@@ -21,7 +21,7 @@ export async function Header() {
             <SidebarList session={session} />
           </Suspense>
         </Sidebar>
-        <div className="hidden items-center md:flex">
+        <div className="flex items-center">
           <IconSeparator className="h-6 w-6 text-muted-foreground/50" />
           <UserMenu session={session} />
         </div>
@@ -33,15 +33,15 @@ export async function Header() {
           rel="noopener noreferrer"
           className={cn(buttonVariants({ variant: 'outline' }))}
         >
-          <IconGitHub className="mr-2 h-4 w-4" />
+          <IconGitHub />
-          <span>GitHub</span>
+          <span className="hidden md:flex ml-2">GitHub</span>
         </a>
         <a
           href="https://github.com/vercel/nextjs-ai-chatbot/"
           target="_blank"
           className={cn(buttonVariants())}
         >
-          <IconVercel className="mr-2 h-4 w-4" />
+          <IconVercel className="mr-2" />
           <span className="hidden sm:block">Deploy to Vercel</span>
           <span className="sm:hidden">Deploy</span>
         </a>

components/login-button.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import * as React from 'react'
+import { signIn } from '@auth/nextjs/client'
+
+import { cn } from '@/lib/utils'
+import { Button, type ButtonProps } from '@/components/ui/button'
+import { IconGitHub, IconSpinner } from '@/components/ui/icons'
+
+interface LoginButtonProps extends ButtonProps {
+  text?: string
+}
+
+export function LoginButton({
+  className,
+  text = 'Login with GitHub',
+  ...props
+}: LoginButtonProps) {
+  const [isLoading, setIsLoading] = React.useState(false)
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        setIsLoading(true)
+        signIn('github')
+      }}
+      disabled={isLoading}
+      className={cn(className)}
+      {...props}
+    >
+      {isLoading ? (
+        <IconSpinner className="mr-2 animate-spin" />
+      ) : (
+        <IconGitHub className="mr-2" />
+      )}
+      {text}
+    </Button>
+  )
+}

components/sidebar-list.tsx

@@ -1,13 +1,30 @@
 import { getChats } from '@/app/actions'
 import { Session } from '@auth/core/types'
-import { SidebarItem } from './sidebar-item'
+
+import { SidebarItem } from '@/components/sidebar-item'
+import { LoginButton } from '@/components/login-button'
 
 export interface SidebarListProps {
   session?: Session
 }
 
-export async function SidebarList(props: SidebarListProps) {
+export async function SidebarList({ session }: SidebarListProps) {
-  const chats = await getChats(props.session?.user?.email)
+  if (!session?.user?.email) {
+    return (
+      <div className="flex-1 p-6 flex text-sm items-center flex-col space-y-4">
+        <div className="space-y-1 text-center">
+          <p className="font-medium">You are not logged in!</p>
+          <p className="text-muted-foreground">
+            Please login for chat history.
+          </p>
+        </div>
+        <LoginButton />
+      </div>
+    )
+  }
+
+  const chats = await getChats(session.user.email)
+
   return (
     <div className="flex-1 overflow-auto">
       {chats?.length ? (
@@ -16,7 +33,7 @@ export async function SidebarList(props: SidebarListProps) {
             <SidebarItem
               key={chat.id}
               title={chat.title}
-              userId={props?.session?.user?.email ?? ''}
+              userId={session?.user?.email ?? ''}
               href={`/chat/${chat.id}`}
               id={chat.id}
             />
@@ -24,13 +41,7 @@ export async function SidebarList(props: SidebarListProps) {
         </div>
       ) : (
         <div className="p-8 text-center">
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-muted-foreground">No chat history</p>
-            {props?.session?.user ? (
-              <>No chat history</>
-            ) : (
-              <>Login for history</>
-            )}
-          </p>
         </div>
       )}
     </div>

components/ui/sheet.tsx

@@ -85,13 +85,7 @@ const SheetHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
+  <div className={cn('flex flex-col space-y-2', className)} {...props} />
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className
-    )}
-    {...props}
-  />
 )
 SheetHeader.displayName = 'SheetHeader'
 

components/user-menu.tsx

@@ -1,37 +1,24 @@
 'use client'
 
 import * as React from 'react'
-import { signIn } from '@auth/nextjs/client'
 import { type Session } from '@auth/nextjs/types'
 
-import { Button } from '@/components/ui/button'
+import { LoginButton } from '@/components/login-button'
-import { IconSpinner } from '@/components/ui/icons'
 
 export interface UserMenuProps {
   session?: Session
 }
 
 export function UserMenu({ session }: UserMenuProps) {
-  const [isLoading, setIsLoading] = React.useState(false)
-
   if (!session?.user) {
     return (
-      <Button
+      <LoginButton variant="ghost" className="[&_svg]:hidden" text="Login" />
-        variant="ghost"
-        size="sm"
-        onClick={() => {
-          setIsLoading(true)
-          signIn('github')
-        }}
-        disabled={isLoading}
-      >
-        {isLoading && <IconSpinner className="mr-2 animate-spin" />}
-        Login
-      </Button>
     )
   }
 
   return (
-    <p className="px-2 text-sm font-medium">Logged in as {session.user.name}</p>
+    <p className="px-2 text-sm font-medium truncate w-[100px] sm:w-auto">
+      {session.user.name}
+    </p>
   )
 }