fix d&d cta position

src/app/layout.tsx

@@ -3,7 +3,7 @@ import { Geist } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "next-themes";
 import { ModeToggle } from "@/components/mode-toggle";
-import SignIn from "./components/sign-in";
+import SignIn from "@/components/sign-in";
 import AuthSessionProvider from "@/components/SessionProvider";
 import Link from "next/link"
 

src/app/page.tsx

@@ -225,13 +225,11 @@ export default function HomePage() {
 
   return (
     <div onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}
-      className={`p-4 min-h-[80vh] relative rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
+      className={`p-4 min-h-[80vh] rounded border-2 border-dashed transition ${isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-700'
         }`}
     >
-      <div className='absolute bottom-0 w-full pb-4 text-gray-400'>
-        <div className='max-w-fit m-auto'> Drag & Drop *.ics here</div>
-      </div>
       {/* AI Toolbar */}
+      {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'>
@@ -250,14 +248,13 @@ export default function HomePage() {
           </div>
         ) : (
           <div className="mb-4 p-4 border border-dashed rounded-lg text-center">
-          <div className="text-sm text-muted-foreground mb-2">
+            <div className="text-sm text-muted-foreground">
-            Sign in to unlock AI-powered calendar features
+              Sign in to unlock AI natural language event creation
             </div>
-          <Button variant="outline" size="sm" asChild>
-            <a href="/auth/signin">Sign In</a>
-          </Button>
           </div>
         )}
+      </div>}
+
 
       {/* Summary Panel */}
       {
@@ -271,7 +268,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 +287,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 */}
@@ -322,6 +325,7 @@ export default function HomePage() {
         ))}
       </ul>
 
+
       {/* Add/Edit Dialog */}
       <Dialog open={dialogOpen} onOpenChange={val => { if (!val) resetForm(); setDialogOpen(val) }}>
         <DialogContent>
@@ -355,6 +359,9 @@ export default function HomePage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+      <div className='mt-auto w-full pb-4 text-gray-400'>
+        <div className='max-w-fit m-auto'> Drag & Drop *.ics here</div>
+      </div>
     </div >
   )
 }

src/components/recurrence-picker.tsx

@@ -73,14 +73,9 @@ export function RecurrencePicker({ value, onChange }: Props) {
   }
 
   return (
-    <Card className="w-full">
+    <div className="">
-
+      <Label htmlFor="frequency" className="pt-4 pb-2 pl-1">Repeats</Label>
-      {/* <CardHeader className="pb-4">
-        <CardTitle className="text-base">Recurrence Settings</CardTitle>
-      </CardHeader> */}
-      <CardContent className="space-y-4">
       <div className="space-y-2">
-          <Label htmlFor="frequency">Repeats</Label>
         <Select value={rec.freq} onValueChange={(value) => update({ freq: value as Recurrence["freq"] })}>
           <SelectTrigger id="frequency">
             <SelectValue />
@@ -154,7 +149,6 @@ export function RecurrencePicker({ value, onChange }: Props) {
           </div>
         </>
       )}
-      </CardContent>
+    </div>
-    </Card>
   )
 }

src/components/sign-in.tsx

@@ -21,10 +21,7 @@ export default function SignIn() {
   if (session?.user) {
     return (
       <div className="flex items-center gap-4">
-        <span className="text-sm text-muted-foreground hidden sm:inline">
+        <Button onClick={handleSignOut} variant="ghost" size="default">
-          {session.user.name || session.user.email}
-        </span>
-        <Button onClick={handleSignOut} variant="ghost" size="sm">
           Sign Out
         </Button>
       </div>
@@ -35,7 +32,7 @@ export default function SignIn() {
     <Button
       onClick={() => router.push("/auth/signin")}
       variant="outline"
-      size="sm"
+      size="default"
     >
       Sign In
     </Button>