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,39 +225,36 @@ 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 */}
-      {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 +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,88 +73,82 @@ 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>
+      <div className="space-y-2">
+        <Select value={rec.freq} onValueChange={(value) => update({ freq: value as Recurrence["freq"] })}>
+          <SelectTrigger id="frequency">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="NONE">Does not repeat</SelectItem>
+            <SelectItem value="DAILY">Daily</SelectItem>
+            <SelectItem value="WEEKLY">Weekly</SelectItem>
+            <SelectItem value="MONTHLY">Monthly</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
 
-      {/* <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 />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="NONE">Does not repeat</SelectItem>
-              <SelectItem value="DAILY">Daily</SelectItem>
-              <SelectItem value="WEEKLY">Weekly</SelectItem>
-              <SelectItem value="MONTHLY">Monthly</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
+      {rec.freq !== "NONE" && (
+        <>
+          <div className="space-y-2">
+            <Label htmlFor="interval">
+              Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"}
+              {rec.interval > 1 ? "s" : ""})
+            </Label>
+            <Input
+              id="interval"
+              type="number"
+              min={1}
+              value={rec.interval}
+              onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
+              className="w-24"
+            />
+          </div>
 
-        {rec.freq !== "NONE" && (
-          <>
+          {rec.freq === "WEEKLY" && (
             <div className="space-y-2">
-              <Label htmlFor="interval">
-                Interval (every {rec.interval} {rec.freq === "DAILY" ? "day" : rec.freq === "WEEKLY" ? "week" : "month"}
-                {rec.interval > 1 ? "s" : ""})
-              </Label>
+              <Label>Days of the week</Label>
+              <div className="flex flex-wrap gap-4">
+                {["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
+                  <div key={day} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={day}
+                      checked={rec.byDay?.includes(day) || false}
+                      onCheckedChange={() => toggleDay(day)}
+                    />
+                    <Label htmlFor={day} className="text-sm font-normal">
+                      {dayLabels[day as keyof typeof dayLabels]}
+                    </Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="count">End after (occurrences)</Label>
               <Input
-                id="interval"
+                id="count"
                 type="number"
-                min={1}
-                value={rec.interval}
-                onChange={(e) => update({ interval: Number.parseInt(e.target.value, 10) || 1 })}
-                className="w-24"
+                placeholder="e.g. 10"
+                value={rec.count || ""}
+                onChange={(e) => update({ count: e.target.value ? Number.parseInt(e.target.value, 10) : undefined })}
               />
             </div>
-
-            {rec.freq === "WEEKLY" && (
-              <div className="space-y-2">
-                <Label>Days of the week</Label>
-                <div className="flex flex-wrap gap-4">
-                  {["MO", "TU", "WE", "TH", "FR", "SA", "SU"].map((day) => (
-                    <div key={day} className="flex items-center space-x-2">
-                      <Checkbox
-                        id={day}
-                        checked={rec.byDay?.includes(day) || false}
-                        onCheckedChange={() => toggleDay(day)}
-                      />
-                      <Label htmlFor={day} className="text-sm font-normal">
-                        {dayLabels[day as keyof typeof dayLabels]}
-                      </Label>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="count">End after (occurrences)</Label>
-                <Input
-                  id="count"
-                  type="number"
-                  placeholder="e.g. 10"
-                  value={rec.count || ""}
-                  onChange={(e) => update({ count: e.target.value ? Number.parseInt(e.target.value, 10) : undefined })}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="until">End by date</Label>
-                <Input
-                  id="until"
-                  type="date"
-                  value={rec.until || ""}
-                  onChange={(e) => update({ until: e.target.value || undefined })}
-                />
-              </div>
+            <div className="space-y-2">
+              <Label htmlFor="until">End by date</Label>
+              <Input
+                id="until"
+                type="date"
+                value={rec.until || ""}
+                onChange={(e) => update({ until: e.target.value || undefined })}
+              />
             </div>
-          </>
-        )}
-      </CardContent>
-    </Card>
+          </div>
+        </>
+      )}
+    </div>
   )
 }

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">
-          {session.user.name || session.user.email}
-        </span>
-        <Button onClick={handleSignOut} variant="ghost" size="sm">
+        <Button onClick={handleSignOut} variant="ghost" size="default">
           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>