refactor: migrate session usage to better-auth API

src/app/api/ai-event/route.ts

@@ -1,8 +1,11 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/auth";
+import { headers } from "next/headers";
 
 export async function POST(request: Request) {
-	const session = await auth();
+	const session = await auth.api.getSession({
+		headers: await headers(),
+	});
 	
 	if (!session?.user) {
 		return NextResponse.json(

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { nanoid } from 'nanoid'
-import { useSession } from 'next-auth/react'
+import { useSession } from '@/lib/auth-client'
 import { toast } from 'sonner'
 
 import { saveEvent as addEvent, deleteEvent, getEvents as getAllEvents, clearEvents, updateEvent } from '@/lib/events-db'
@@ -44,7 +44,7 @@ export default function HomePage() {
     })()
   }, [])
 
-  const { data: session, status } = useSession()
+  const { data: session, isPending } = useSession()
 
   const resetForm = () => {
     setTitle('')
@@ -256,8 +256,8 @@ export default function HomePage() {
       onImport={handleImport}
     >
       <AIToolbar
-        session={session}
+        isAuthenticated={!!session?.user}
-        status={status}
+        isPending={isPending}
         aiPrompt={aiPrompt}
         setAiPrompt={setAiPrompt}
         aiLoading={aiLoading}

src/components/ai-toolbar.tsx

@@ -1,11 +1,10 @@
 import { Button } from '@/components/ui/button'
 import { Textarea } from '@/components/ui/textarea'
 import { Card } from '@/components/ui/card'
-import { Session } from 'next-auth'
 
 interface AIToolbarProps {
-  session: Session | null
+  isAuthenticated: boolean
-  status: 'loading' | 'authenticated' | 'unauthenticated'
+  isPending: boolean
   aiPrompt: string
   setAiPrompt: (prompt: string) => void
   aiLoading: boolean
@@ -16,8 +15,8 @@ interface AIToolbarProps {
 }
 
 export const AIToolbar = ({
-  session,
+  isAuthenticated,
-  status,
+  isPending,
   aiPrompt,
   setAiPrompt,
   aiLoading,
@@ -28,17 +27,15 @@ export const AIToolbar = ({
 }: AIToolbarProps) => {
   return (
     <>
-      {/* AI Toolbar */}
+      {isPending ? (
-      {status === "loading" ? (
         <div className='mb-4 p-4 text-center animate-pulse bg-muted'>Loading...</div>
       ) : (
         <div>
-          {session?.user ? (
+          {isAuthenticated ? (
             <div className="flex flex-col sm:flex-row gap-4 mb-4 items-start">
               <div className='w-full'>
                 <Textarea
                   className="wrap-anywhere field-sizing-content resize-none w-full min-h-[2.5rem] max-h-64 overflow-y-auto sm:overflow-y-visible px-3 py-2 scroll-p-8 placeholder:italic"
-                  // Band-aid for scrollbar clipping out of the box
                   style={{ clipPath: "inset(0 round 1rem)" }}
                   placeholder='Describe event for AI to create'
                   value={aiPrompt}