add labels to action button sections

This commit is contained in:
2025-08-19 05:33:36 -04:00
parent 1a30b729e6
commit ef035e2b7d

View File

@@ -232,32 +232,32 @@ export default function HomePage() {
<div className='max-w-fit m-auto'> Drag & Drop *.ics here</div> <div className='max-w-fit m-auto'> Drag & Drop *.ics here</div>
</div> </div>
{/* AI Toolbar */} {/* AI Toolbar */}
{session?.user ? ( {status === "loading" ? <div className='mb-4 p-4 text-center animate-pulse bg-muted'>Loading...</div> : <div>
<div className="flex flex-row gap-4 mb-4 items-start"> {session?.user ? (
<div className='w-full'> <div className="flex flex-row gap-4 mb-4 items-start">
<Textarea <div className='w-full'>
className="wrap-anywhere min-h-12" <Textarea
placeholder='Describe event for AI to create' className="wrap-anywhere min-h-12"
value={aiPrompt} placeholder='Describe event for AI to create'
onChange={e => setAiPrompt(e.target.value)} value={aiPrompt}
/> onChange={e => setAiPrompt(e.target.value)}
/>
</div>
<div className='flex flex-row gap-2 pt-1.5'>
<Button onClick={handleAiCreate} disabled={aiLoading}>
{aiLoading ? 'Thinking...' : 'AI Create'}
</Button>
</div>
</div> </div>
<div className='flex flex-row gap-2 pt-1.5'> ) : (
<Button onClick={handleAiCreate} disabled={aiLoading}> <div className="mb-4 p-4 border border-dashed rounded-lg text-center">
{aiLoading ? 'Thinking...' : 'AI Create'} <div className="text-sm text-muted-foreground">
</Button> Sign in to unlock AI natural language event creation
</div>
</div> </div>
</div> )}
) : ( </div>}
<div className="mb-4 p-4 border border-dashed rounded-lg text-center">
<div className="text-sm text-muted-foreground mb-2">
Sign in to unlock AI-powered calendar features
</div>
<Button variant="outline" size="sm" asChild>
<a href="/auth/signin">Sign In</a>
</Button>
</div>
)}
{/* Summary Panel */} {/* Summary Panel */}
{ {
@@ -271,7 +271,16 @@ export default function HomePage() {
) )
} }
{/* AI Actions Toolbar */}
<p className='text-muted-foreground text-sm pb-2 pl-1'>AI actions</p>
<div className="gap-2 mb-4">
<Button variant="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
{aiLoading ? 'Summarizing...' : 'AI Summarize'}
</Button>
</div>
{/* Control Toolbar */} {/* Control Toolbar */}
<p className='text-muted-foreground text-sm pb-2 pl-1'>Event Actions</p>
<div className="flex flex-wrap gap-2 mb-4"> <div className="flex flex-wrap gap-2 mb-4">
<Button onClick={() => setDialogOpen(true)}>Add Event</Button> <Button onClick={() => setDialogOpen(true)}>Add Event</Button>
<IcsFilePicker onFileSelect={handleImport} variant='secondary'>Import .ics</IcsFilePicker> <IcsFilePicker onFileSelect={handleImport} variant='secondary'>Import .ics</IcsFilePicker>
@@ -281,9 +290,6 @@ export default function HomePage() {
<Button variant="destructive" onClick={handleClearAll}>Clear All</Button> <Button variant="destructive" onClick={handleClearAll}>Clear All</Button>
</> </>
)} )}
<Button variant="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
{aiLoading ? 'Summarizing...' : 'AI Summarize'}
</Button>
</div> </div>
{/* Event List */} {/* Event List */}