From ef035e2b7d68bdb02ff900fd5fea1cd1598e19e7 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Tue, 19 Aug 2025 05:33:36 -0400
Subject: [PATCH] add labels to action button sections

---
 src/app/page.tsx | 60 ++++++++++++++++++++++++++----------------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 058f192..050db97 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -232,32 +232,32 @@ export default function HomePage() {
         <div className='max-w-fit m-auto'> Drag & Drop *.ics here</div>
       </div>
       {/* AI Toolbar */}
-      {session?.user ? (
-        <div className="flex flex-row gap-4 mb-4 items-start">
-          <div className='w-full'>
-            <Textarea
-              className="wrap-anywhere min-h-12"
-              placeholder='Describe event for AI to create'
-              value={aiPrompt}
-              onChange={e => setAiPrompt(e.target.value)}
-            />
+      {status === "loading" ? <div className='mb-4 p-4 text-center animate-pulse bg-muted'>Loading...</div> : <div>
+        {session?.user ? (
+          <div className="flex flex-row gap-4 mb-4 items-start">
+            <div className='w-full'>
+              <Textarea
+                className="wrap-anywhere min-h-12"
+                placeholder='Describe event for AI to create'
+                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 className='flex flex-row gap-2 pt-1.5'>
-            <Button onClick={handleAiCreate} disabled={aiLoading}>
-              {aiLoading ? 'Thinking...' : 'AI Create'}
-            </Button>
+        ) : (
+          <div className="mb-4 p-4 border border-dashed rounded-lg text-center">
+            <div className="text-sm text-muted-foreground">
+              Sign in to unlock AI natural language event creation
+            </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>
-      )}
+        )}
+      </div>}
+
 
       {/* 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 */}
+      <p className='text-muted-foreground text-sm pb-2 pl-1'>Event Actions</p>
       <div className="flex flex-wrap gap-2 mb-4">
         <Button onClick={() => setDialogOpen(true)}>Add Event</Button>
         <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="secondary" onClick={handleAiSummarize} disabled={aiLoading}>
-          {aiLoading ? 'Summarizing...' : 'AI Summarize'}
-        </Button>
       </div>
 
       {/* Event List */}