Merge pull request #21 from BuilderIO/ai_main_f031f053e868

Update from the Builder.io agent

Author: steve8708

templates/calendar/client/components/calendar/CommandPalette.tsx

@@ -0,0 +1,183 @@
+import { useState, useMemo } from "react";
+import { format, parseISO, parse, isValid } from "date-fns";
+import {
+  Calendar,
+  CalendarDays,
+  CalendarRange,
+  Clock,
+  Plus,
+  Zap,
+  ArrowRight,
+} from "lucide-react";
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+import type { CalendarEvent } from "@shared/api";
+
+type ViewMode = "month" | "week" | "day";
+
+interface CommandPaletteProps {
+  open: boolean;
+  onClose: () => void;
+  events: CalendarEvent[];
+  onGoToDate: (date: Date) => void;
+  onEventClick: (event: CalendarEvent) => void;
+  onCreateEvent: () => void;
+  onViewChange: (view: ViewMode) => void;
+  onToday: () => void;
+}
+
+const DATE_FORMATS = [
+  "MM/dd/yyyy",
+  "MM/dd",
+  "MMMM d",
+  "MMM d",
+  "yyyy-MM-dd",
+  "M/d",
+  "MMMM d, yyyy",
+];
+
+export function CommandPalette({
+  open,
+  onClose,
+  events,
+  onGoToDate,
+  onEventClick,
+  onCreateEvent,
+  onViewChange,
+  onToday,
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState("");
+
+  const parsedDate = useMemo(() => {
+    if (!query.trim()) return null;
+    for (const fmt of DATE_FORMATS) {
+      try {
+        const d = parse(query.trim(), fmt, new Date());
+        if (isValid(d) && d.getFullYear() > 1970) return d;
+      } catch {
+        // continue
+      }
+    }
+    return null;
+  }, [query]);
+
+  const matchingEvents = useMemo(() => {
+    if (!query.trim()) return [];
+    const q = query.toLowerCase();
+    return events
+      .filter((e) => e.title.toLowerCase().includes(q))
+      .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
+      .slice(0, 6);
+  }, [query, events]);
+
+  function run(fn: () => void) {
+    fn();
+    setQuery("");
+    onClose();
+  }
+
+  function handleOpenChange(open: boolean) {
+    if (!open) {
+      setQuery("");
+      onClose();
+    }
+  }
+
+  return (
+    <CommandDialog open={open} onOpenChange={handleOpenChange}>
+      <CommandInput
+        placeholder="Search events, go to date, or run a command…"
+        value={query}
+        onValueChange={setQuery}
+      />
+      <CommandList>
+        <CommandEmpty>
+          No results. Try typing a date like "Jan 15" or an event name.
+        </CommandEmpty>
+
+        {parsedDate && (
+          <CommandGroup heading="Jump to">
+            <CommandItem onSelect={() => run(() => onGoToDate(parsedDate))}>
+              <Calendar className="mr-2 h-4 w-4" />
+              Go to {format(parsedDate, "MMMM d, yyyy")}
+              <CommandShortcut>
+                <ArrowRight className="h-3 w-3" />
+              </CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        )}
+
+        {matchingEvents.length > 0 && (
+          <CommandGroup heading="Events">
+            {matchingEvents.map((event) => (
+              <CommandItem
+                key={event.id}
+                onSelect={() => run(() => onEventClick(event))}
+              >
+                <span
+                  className={cn(
+                    "mr-2 h-2 w-2 shrink-0 rounded-full",
+                    event.color
+                      ? ""
+                      : event.source === "google"
+                        ? "bg-emerald-500"
+                        : "bg-primary",
+                  )}
+                  style={event.color ? { background: event.color } : undefined}
+                />
+                <span className="flex-1 truncate">{event.title}</span>
+                <span className="ml-2 text-xs text-muted-foreground">
+                  {format(parseISO(event.start), "MMM d")}
+                </span>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+
+        <CommandSeparator />
+
+        <CommandGroup heading="Actions">
+          <CommandItem onSelect={() => run(onCreateEvent)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create new event
+            <CommandShortcut>C</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={() => run(onToday)}>
+            <Zap className="mr-2 h-4 w-4" />
+            Go to today
+            <CommandShortcut>T</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+
+        <CommandSeparator />
+
+        <CommandGroup heading="Views">
+          <CommandItem onSelect={() => run(() => onViewChange("month"))}>
+            <CalendarDays className="mr-2 h-4 w-4" />
+            Month view
+            <CommandShortcut>M</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={() => run(() => onViewChange("week"))}>
+            <CalendarRange className="mr-2 h-4 w-4" />
+            Week view
+            <CommandShortcut>W</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={() => run(() => onViewChange("day"))}>
+            <Clock className="mr-2 h-4 w-4" />
+            Day view
+            <CommandShortcut>D</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+}

templates/calendar/client/components/calendar/CreateEventDialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { format } from "date-fns";
 import {
   Dialog,
@@ -38,6 +38,20 @@ export function CreateEventDialog({
   const [allDay, setAllDay] = useState(false);
 
   const createEvent = useCreateEvent();
+  const formRef = useRef<HTMLFormElement>(null);
+
+  // ⌘+Enter to submit
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        formRef.current?.requestSubmit();
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
 
   function resetForm() {
     setTitle("");
@@ -91,7 +105,7 @@ export function CreateEventDialog({
           <DialogTitle>New Event</DialogTitle>
         </DialogHeader>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form ref={formRef} onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">
             <Label htmlFor="event-title">Title</Label>
             <Input
@@ -162,12 +176,19 @@ export function CreateEventDialog({
             />
           </div>
 
-          <DialogFooter>
-            <Button type="button" variant="ghost" onClick={onClose}>
+          <DialogFooter className="items-center gap-2">
+            <p className="mr-auto text-xs text-muted-foreground/60">
+              Press{" "}
+              <kbd className="rounded border border-border bg-muted px-1 font-mono text-[10px]">
+                ⌘↵
+              </kbd>{" "}
+              to save
+            </p>
+            <Button type="button" variant="ghost" size="sm" onClick={onClose}>
               Cancel
             </Button>
-            <Button type="submit" disabled={createEvent.isPending}>
-              {createEvent.isPending ? "Creating..." : "Create Event"}
+            <Button type="submit" size="sm" disabled={createEvent.isPending}>
+              {createEvent.isPending ? "Creating…" : "Create Event"}
             </Button>
           </DialogFooter>
         </form>