Add event location and online meeting details (#70)

Author: felixgollnhuber

prisma/migrations/20260427143000_add_event_location_details/migration.sql

@@ -0,0 +1,4 @@
+ALTER TABLE "Event"
+ADD COLUMN "location" TEXT,
+ADD COLUMN "isOnlineMeeting" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN "meetingLink" TEXT;

prisma/schema.prisma

@@ -21,6 +21,9 @@ model Event {
   slug                   String             @unique
   title                  String
   type                   EventType          @default(TIME_GRID)
+  location               String?
+  isOnlineMeeting        Boolean            @default(false)
+  meetingLink            String?
   timezone               String
   slotMinutes            Int                @default(30)
   meetingDurationMinutes Int                @default(60)

src/app/api/events/[slug]/ics/route.test.ts

@@ -16,6 +16,9 @@ describe("GET /api/events/[slug]/ics", () => {
       snapshot: {
         slug: "team-sync",
         title: "Team Sync",
+        location: "Office 3.2",
+        isOnlineMeeting: true,
+        meetingLink: "https://meet.example.com/team-sync",
         eventType: "time_grid",
         timezone: "Europe/Vienna",
         status: "CLOSED",
@@ -52,6 +55,9 @@ describe("GET /api/events/[slug]/ics", () => {
     const body = await response.text();
     expect(body).toContain("BEGIN:VCALENDAR");
     expect(body).toContain("SUMMARY:Team Sync");
+    expect(body).toContain("LOCATION:Online meeting");
+    expect(body).not.toContain("Office 3.2");
+    expect(body).toContain("Meeting link: https://meet.example.com/team-sync");
     expect(body).toContain("DTSTART;TZID=Europe/Vienna:20260402T090000");
     expect(body).toContain("URL:http://localhost:3000/e/team-sync");
   });

src/app/api/events/[slug]/ics/route.ts

@@ -32,6 +32,9 @@ export async function GET(request: Request, { params }: Context) {
   const body = buildEventCalendarFile({
     slug: event.snapshot.slug,
     title: event.snapshot.title,
+    location: event.snapshot.location,
+    isOnlineMeeting: event.snapshot.isOnlineMeeting,
+    meetingLink: event.snapshot.meetingLink,
     timezone: event.snapshot.timezone,
     slotStart: event.snapshot.finalizedSlot.slotStart,
     slotEnd: event.snapshot.finalizedSlot.slotEnd,

src/app/api/events/route.test.ts

@@ -22,6 +22,7 @@ describe("POST /api/events", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     getClientIp.mockReturnValue("127.0.0.1");
+    enforceRateLimit.mockImplementation(() => undefined);
     createEvent.mockResolvedValue({
       slug: "sprint-planning",
       manageKey: "manage-key-123",
@@ -53,6 +54,7 @@ describe("POST /api/events", () => {
     expect(createEvent).toHaveBeenCalledWith({
       eventType: "time_grid",
       title: "Sprint Planning",
+      isOnlineMeeting: false,
       timezone: "Europe/Vienna",
       dates: ["2026-03-30"],
       dayStartMinutes: 540,
@@ -89,6 +91,7 @@ describe("POST /api/events", () => {
     expect(createEvent).toHaveBeenCalledWith({
       eventType: "full_day",
       title: "Offsite Days",
+      isOnlineMeeting: false,
       timezone: "Europe/Vienna",
       dates: ["2026-03-30", "2026-03-31"],
       dayStartMinutes: 540,
@@ -130,4 +133,43 @@ describe("POST /api/events", () => {
       error: "Too many event creation attempts. Please wait a few minutes and try again.",
     });
   });
+
+  it("passes online meeting details through without a location", async () => {
+    const { POST } = await import("./route");
+    const response = await POST(
+      new Request("https://tempoll.example.com/api/events", {
+        method: "POST",
+        body: JSON.stringify({
+          title: "Hybrid Planning",
+          location: "Office 3.2",
+          isOnlineMeeting: true,
+          meetingLink: "https://meet.example.com/hybrid-planning",
+          timezone: "Europe/Vienna",
+          dates: ["2026-03-30"],
+          dayStartMinutes: 540,
+          dayEndMinutes: 600,
+          slotMinutes: 30,
+          meetingDurationMinutes: 60,
+        }),
+        headers: {
+          "Accept-Language": "en-US",
+          "Content-Type": "application/json",
+        },
+      }),
+    );
+
+    expect(createEvent).toHaveBeenCalledWith({
+      eventType: "time_grid",
+      title: "Hybrid Planning",
+      isOnlineMeeting: true,
+      meetingLink: "https://meet.example.com/hybrid-planning",
+      timezone: "Europe/Vienna",
+      dates: ["2026-03-30"],
+      dayStartMinutes: 540,
+      dayEndMinutes: 600,
+      slotMinutes: 30,
+      meetingDurationMinutes: 60,
+    });
+    expect(response.status).toBe(201);
+  });
 });

src/components/create-event-form.test.tsx

@@ -58,6 +58,12 @@ describe("CreateEventForm", () => {
     renderCreateEventForm("de");
 
     expect(screen.getByLabelText("Event-Titel")).toBeInTheDocument();
+    expect(screen.getByLabelText("Ort")).toHaveAttribute(
+      "placeholder",
+      "Büro, Café, Raumname...",
+    );
+    expect(screen.getByRole("radiogroup", { name: "Event-Format" })).toBeInTheDocument();
+    expect(screen.getByRole("radio", { name: "Online-Meeting" })).toBeInTheDocument();
     expect(screen.getByLabelText("Organizer-E-Mail-Benachrichtigungen")).toHaveAttribute(
       "placeholder",
       "name@beispiel.de",
@@ -354,6 +360,78 @@ describe("CreateEventForm", () => {
     expect(payload.notificationEmail).toBe("owner@example.com");
   });
 
+  it("submits optional location for in-person events", async () => {
+    const user = userEvent.setup();
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        manageKey: "manage-key-123",
+      }),
+    });
+    global.fetch = fetchMock as typeof fetch;
+
+    renderCreateEventForm();
+
+    await user.type(screen.getByLabelText("Event title"), "Planning");
+    await user.type(screen.getByLabelText("Location"), "Office 3.2");
+    await user.click(screen.getByRole("button", { name: "Create event" }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    const [, requestInit] = fetchMock.mock.calls[0] as [string, RequestInit];
+    const payload = JSON.parse(String(requestInit.body)) as {
+      location?: string;
+      isOnlineMeeting?: boolean;
+    };
+
+    expect(payload).toMatchObject({
+      location: "Office 3.2",
+      isOnlineMeeting: false,
+    });
+  });
+
+  it("submits online meeting details without a location", async () => {
+    const user = userEvent.setup();
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        manageKey: "manage-key-123",
+      }),
+    });
+    global.fetch = fetchMock as typeof fetch;
+
+    renderCreateEventForm();
+
+    await user.type(screen.getByLabelText("Event title"), "Hybrid planning");
+    await user.type(screen.getByLabelText("Location"), "Office 3.2");
+    await user.click(screen.getByRole("radio", { name: "Online meeting" }));
+    expect(screen.queryByLabelText("Location")).not.toBeInTheDocument();
+    await user.type(
+      screen.getByLabelText("Meeting link"),
+      "https://meet.example.com/hybrid-planning",
+    );
+    await user.click(screen.getByRole("button", { name: "Create event" }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+    });
+
+    const [, requestInit] = fetchMock.mock.calls[0] as [string, RequestInit];
+    const payload = JSON.parse(String(requestInit.body)) as {
+      location?: string;
+      isOnlineMeeting?: boolean;
+      meetingLink?: string;
+    };
+
+    expect(payload).not.toHaveProperty("location");
+    expect(payload).toMatchObject({
+      isOnlineMeeting: true,
+      meetingLink: "https://meet.example.com/hybrid-planning",
+    });
+  });
+
   it("shows an unavailable note instead of the email field when alerts are disabled", () => {
     renderCreateEventForm("en", {
       notificationsConfigured: false,

src/components/create-event-form.tsx

@@ -8,8 +8,11 @@ import {
   ChevronDownIcon,
   CheckIcon,
   Clock3Icon,
+  LinkIcon,
   Loader2Icon,
+  MapPinIcon,
   SparklesIcon,
+  VideoIcon,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition } from "react";
@@ -52,6 +55,9 @@ type CreateEventFormProps = {
 const eventFieldOrder = [
   "eventType",
   "title",
+  "location",
+  "isOnlineMeeting",
+  "meetingLink",
   "notificationEmail",
   "timezone",
   "dates",
@@ -68,6 +74,9 @@ type EventFormErrors = Partial<Record<EventField, string>>;
 const eventFieldIds: Record<EventField, string> = {
   eventType: "event-type",
   title: "title",
+  location: "location",
+  isOnlineMeeting: "event-format",
+  meetingLink: "meeting-link",
   notificationEmail: "notification-email",
   timezone: "timezone-trigger",
   dates: "date-range-trigger",
@@ -190,6 +199,9 @@ export function CreateEventForm({
   const [initialDateRange] = useState(() => getDefaultDateRange("time_grid", startOfToday()));
   const [eventType, setEventType] = useState<EventType>("time_grid");
   const [title, setTitle] = useState("");
+  const [location, setLocation] = useState("");
+  const [isOnlineMeeting, setIsOnlineMeeting] = useState(false);
+  const [meetingLink, setMeetingLink] = useState("");
   const [notificationEmail, setNotificationEmail] = useState("");
   const [dateRange, setDateRange] = useState<DateRange | undefined>(initialDateRange);
   const [draftDateRange, setDraftDateRange] = useState<DateRange | undefined>(initialDateRange);
@@ -367,6 +379,9 @@ export function CreateEventForm({
     const parsed = createEventCreateSchema(messages).safeParse({
       eventType,
       title,
+      location: isOnlineMeeting ? undefined : location,
+      isOnlineMeeting,
+      meetingLink: isOnlineMeeting ? meetingLink : undefined,
       notificationEmail: notificationsConfigured ? notificationEmail : undefined,
       timezone,
       dates: selectedDates,
@@ -448,6 +463,120 @@ export function CreateEventForm({
               ) : null}
             </div>
 
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label id={eventFieldIds.isOnlineMeeting}>
+                  {messages.createEvent.eventFormatLabel}
+                </Label>
+                <div
+                  role="radiogroup"
+                  aria-labelledby={eventFieldIds.isOnlineMeeting}
+                  className="grid grid-cols-1 gap-2 sm:grid-cols-2"
+                >
+                  <button
+                    type="button"
+                    role="radio"
+                    aria-checked={!isOnlineMeeting}
+                    className={cn(
+                      "flex h-10 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                      !isOnlineMeeting
+                        ? "border-primary bg-primary/10 text-foreground"
+                        : "border-input bg-background text-muted-foreground",
+                    )}
+                    onClick={() => {
+                      setIsOnlineMeeting(false);
+                      setMeetingLink("");
+                      clearErrors("isOnlineMeeting", "meetingLink");
+                    }}
+                  >
+                    <MapPinIcon className="size-4" aria-hidden="true" />
+                    {messages.createEvent.inPersonLabel}
+                  </button>
+                  <button
+                    type="button"
+                    role="radio"
+                    aria-checked={isOnlineMeeting}
+                    className={cn(
+                      "flex h-10 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                      isOnlineMeeting
+                        ? "border-primary bg-primary/10 text-foreground"
+                        : "border-input bg-background text-muted-foreground",
+                    )}
+                    onClick={() => {
+                      setIsOnlineMeeting(true);
+                      setLocation("");
+                      clearErrors("isOnlineMeeting", "location");
+                    }}
+                  >
+                    <VideoIcon className="size-4" aria-hidden="true" />
+                    {messages.createEvent.onlineMeetingLabel}
+                  </button>
+                </div>
+              </div>
+
+              {isOnlineMeeting ? (
+                <div className="space-y-2">
+                  <Label htmlFor={eventFieldIds.meetingLink}>
+                    {messages.createEvent.meetingLinkLabel}
+                  </Label>
+                  <div className="relative">
+                    <LinkIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      id={eventFieldIds.meetingLink}
+                      type="url"
+                      inputMode="url"
+                      value={meetingLink}
+                      placeholder={messages.createEvent.meetingLinkPlaceholder}
+                      aria-invalid={fieldErrors.meetingLink ? true : undefined}
+                      aria-describedby={fieldErrors.meetingLink ? "meeting-link-error" : undefined}
+                      className={cn(
+                        "pl-9",
+                        fieldErrors.meetingLink &&
+                          "border-destructive focus-visible:ring-destructive/20",
+                      )}
+                      onChange={(event) => {
+                        setMeetingLink(event.target.value);
+                        clearErrors("meetingLink");
+                      }}
+                    />
+                  </div>
+                  {fieldErrors.meetingLink ? (
+                    <p id="meeting-link-error" className="text-sm text-destructive">
+                      {fieldErrors.meetingLink}
+                    </p>
+                  ) : null}
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <Label htmlFor={eventFieldIds.location}>{messages.createEvent.locationLabel}</Label>
+                  <div className="relative">
+                    <MapPinIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      id={eventFieldIds.location}
+                      value={location}
+                      placeholder={messages.createEvent.locationPlaceholder}
+                      aria-invalid={fieldErrors.location ? true : undefined}
+                      aria-describedby={fieldErrors.location ? "location-error" : undefined}
+                      className={cn(
+                        "pl-9",
+                        fieldErrors.location &&
+                          "border-destructive focus-visible:ring-destructive/20",
+                      )}
+                      onChange={(event) => {
+                        setLocation(event.target.value);
+                        clearErrors("location");
+                      }}
+                    />
+                  </div>
+                  {fieldErrors.location ? (
+                    <p id="location-error" className="text-sm text-destructive">
+                      {fieldErrors.location}
+                    </p>
+                  ) : null}
+                </div>
+              )}
+            </div>
+
             <div className="space-y-2">
               <Label id={eventFieldIds.eventType}>{messages.createEvent.eventTypeLabel}</Label>
               <div

src/components/event-heatmap.tsx

@@ -21,6 +21,7 @@ import {
   useState,
 } from "react";
 
+import { EventMetaDetails } from "@/components/event-meta-details";
 import {
   buildFinalizedSlot,
   buildProjectedBoard,
@@ -912,6 +913,7 @@ export function EventHeatmap({
                         timezone: viewerTimezoneOption?.label ?? viewerTimezone,
                       })}
                     </CardDescription>
+                    <EventMetaDetails snapshot={snapshot} className="mt-2" />
                   </div>
                 ) : null}
               </div>