diff --git a/app/ui/components/schedule/time-slot.tsx b/src/features/event/grid/time-slot.tsx
similarity index 81%
rename from app/ui/components/schedule/time-slot.tsx
rename to src/features/event/grid/time-slot.tsx
index 10c75ebf..7fbde783 100644
--- a/app/ui/components/schedule/time-slot.tsx
+++ b/src/features/event/grid/time-slot.tsx
@@ -1,7 +1,8 @@
"use client";
import React, { memo } from "react";
-import { cn } from "@/app/_lib/classname";
+
+import { cn } from "@/lib/utils/classname";
interface TimeSlotProps {
slotIso: string;
@@ -39,10 +40,10 @@ function TimeSlot({
data-slot-iso={slotIso}
draggable={false}
className={cn(
- "relative bg-white dark:bg-violet",
- isHovered && "ring-1 ring-blue ring-inset dark:ring-red",
+ "bg-background relative",
+ isHovered && "ring-accent ring-1 ring-inset",
disableSelect
- ? "pointer-events-none cursor-not-allowed bg-[#FFFFFF] dark:bg-[#343249]"
+ ? "bg-panel pointer-events-none cursor-not-allowed"
: "cursor-cell",
cellClasses,
)}
diff --git a/app/ui/components/schedule/timeblocks/base-timeblock.tsx b/src/features/event/grid/timeblocks/base.tsx
similarity index 100%
rename from app/ui/components/schedule/timeblocks/base-timeblock.tsx
rename to src/features/event/grid/timeblocks/base.tsx
diff --git a/app/ui/components/schedule/timeblocks/interactive-timeblock.tsx b/src/features/event/grid/timeblocks/interactive.tsx
similarity index 81%
rename from app/ui/components/schedule/timeblocks/interactive-timeblock.tsx
rename to src/features/event/grid/timeblocks/interactive.tsx
index 489af76a..da405a18 100644
--- a/app/ui/components/schedule/timeblocks/interactive-timeblock.tsx
+++ b/src/features/event/grid/timeblocks/interactive.tsx
@@ -1,10 +1,9 @@
-import { AvailabilitySet } from "@/app/_lib/availability/types";
-
-import useScheduleDrag from "@/app/_lib/use-schedule-drag";
-import BaseTimeBlock from "./base-timeblock";
-
import { toZonedTime } from "date-fns-tz";
-import TimeSlot from "../time-slot";
+
+import { AvailabilitySet } from "@/core/availability/types";
+import useScheduleDrag from "@/features/event/grid/lib/use-schedule-drag";
+import TimeSlot from "@/features/event/grid/time-slot";
+import BaseTimeBlock from "@/features/event/grid/timeblocks/base";
interface InteractiveTimeBlockProps {
timeColWidth: number;
@@ -75,10 +74,16 @@ export default function InteractiveTimeBlock({
dragHandlers.hoveredSlot === slotIso &&
dragHandlers.draggedSlots.size === 0;
- if (isHovered || isToggling) {
- cellClasses.push("bg-blue-200 dark:bg-red-200");
+ if (isSelected && (isHovered || isToggling)) {
+ cellClasses.push(
+ "bg-[color-mix(in_srgb,var(--color-accent),var(--color-white)_30%)]",
+ );
+ } else if (isHovered || isToggling) {
+ cellClasses.push(
+ "bg-[color-mix(in_srgb,var(--color-background),var(--color-accent)_40%)]",
+ );
} else if (isSelected) {
- cellClasses.push("dark:bg-red bg-blue");
+ cellClasses.push("bg-accent");
}
return (
diff --git a/app/ui/components/schedule/timeblocks/preview-timeblock.tsx b/src/features/event/grid/timeblocks/preview.tsx
similarity index 93%
rename from app/ui/components/schedule/timeblocks/preview-timeblock.tsx
rename to src/features/event/grid/timeblocks/preview.tsx
index ac74b5b7..fbf50e18 100644
--- a/app/ui/components/schedule/timeblocks/preview-timeblock.tsx
+++ b/src/features/event/grid/timeblocks/preview.tsx
@@ -1,7 +1,7 @@
-import BaseTimeBlock from "./base-timeblock";
-
import { toZonedTime } from "date-fns-tz";
-import TimeSlot from "../time-slot";
+
+import TimeSlot from "@/features/event/grid/time-slot";
+import BaseTimeBlock from "@/features/event/grid/timeblocks/base";
interface PreviewTimeBlockProps {
timeColWidth: number;
diff --git a/app/ui/components/schedule/timeblocks/results-timeblock.tsx b/src/features/event/grid/timeblocks/results.tsx
similarity index 79%
rename from app/ui/components/schedule/timeblocks/results-timeblock.tsx
rename to src/features/event/grid/timeblocks/results.tsx
index db7df40d..4b984d37 100644
--- a/app/ui/components/schedule/timeblocks/results-timeblock.tsx
+++ b/src/features/event/grid/timeblocks/results.tsx
@@ -1,9 +1,8 @@
-import { ResultsAvailabilityMap } from "@/app/_lib/availability/types";
+import { format, formatInTimeZone, toZonedTime } from "date-fns-tz";
-import BaseTimeBlock from "./base-timeblock";
-
-import { formatInTimeZone, toZonedTime } from "date-fns-tz";
-import TimeSlot from "../time-slot";
+import { ResultsAvailabilityMap } from "@/core/availability/types";
+import TimeSlot from "@/features/event/grid/time-slot";
+import BaseTimeBlock from "@/features/event/grid/timeblocks/base";
interface ResultsTimeBlockProps {
timeColWidth: number;
@@ -42,9 +41,11 @@ export default function ResultsTimeBlock({
visibleDaysCount={numVisibleDays}
>
{timeslots.map((timeslot, timeslotIdx) => {
+ const timeslotIso = format(timeslot, "yyyy-MM-dd'T'HH:mm:ss");
+
const localSlot = toZonedTime(timeslot, userTimezone);
const localSlotIso = formatInTimeZone(
- localSlot,
+ timeslot,
userTimezone,
"yyyy-MM-dd'T'HH:mm:ss",
);
@@ -72,11 +73,11 @@ export default function ResultsTimeBlock({
}
const matchCount =
- availabilities[localSlotIso]?.length > 0
- ? availabilities[localSlotIso].length
+ availabilities[timeslotIso]?.length > 0
+ ? availabilities[timeslotIso].length
: 0;
const opacity = matchCount / numParticipants || 0;
- const isHovered = hoveredSlot === localSlotIso;
+ const isHovered = hoveredSlot === timeslotIso;
// background colors
const opacityPercent = Math.round(opacity * 100);
@@ -84,7 +85,7 @@ export default function ResultsTimeBlock({
"--opacity-percent": `${opacityPercent}%`,
};
cellClasses.push(
- `bg-[color-mix(in_srgb,var(--color-blue)_var(--opacity-percent),var(--color-white))] dark:bg-[color-mix(in_srgb,var(--color-red)_var(--opacity-percent),var(--color-violet))]`,
+ "bg-[color-mix(in_srgb,var(--color-accent)_var(--opacity-percent),var(--color-background))]",
);
return (
@@ -96,7 +97,7 @@ export default function ResultsTimeBlock({
gridColumn={gridColumn}
gridRow={gridRow}
onPointerEnter={() => {
- onHoverSlot?.(localSlotIso);
+ onHoverSlot?.(timeslotIso);
}}
dynamicStyle={dynamicStyle}
/>
diff --git a/app/ui/components/event-info-drawer.tsx b/src/features/event/info-drawer.tsx
similarity index 55%
rename from app/ui/components/event-info-drawer.tsx
rename to src/features/event/info-drawer.tsx
index 566d98f8..12be9c2b 100644
--- a/app/ui/components/event-info-drawer.tsx
+++ b/src/features/event/info-drawer.tsx
@@ -2,9 +2,37 @@
import * as Dialog from "@radix-ui/react-dialog";
import { InfoCircledIcon } from "@radix-ui/react-icons";
+import { format } from "date-fns/format";
+import { parse } from "date-fns/parse";
-import { EventRange } from "@/app/_lib/schedule/types";
-import { formatLabel } from "@/app/_lib/timezone-file-generator";
+import { EventRange } from "@/core/event/types";
+
+function formatLabel(tz: string): string {
+ try {
+ const now = new Date();
+ const offset =
+ new Intl.DateTimeFormat("en-US", {
+ timeZone: tz,
+ hour12: false,
+ hour: "2-digit",
+ minute: "2-digit",
+ timeZoneName: "shortOffset",
+ })
+ .formatToParts(now)
+ .find((p) => p.type === "timeZoneName")?.value || "";
+
+ // Try to normalize to GMT+/-HH:MM
+ const match = offset.match(/GMT([+-]\d{1,2})(?::(\d{2}))?/);
+ const hours = match?.[1] ?? "0";
+ const minutes = match?.[2] ?? "00";
+ const fullOffset = `GMT${hours}:${minutes}`;
+
+ const city = tz.split("/").slice(-1)[0].replaceAll("_", " ");
+ return `${city} (${fullOffset})`;
+ } catch {
+ return tz;
+ }
+}
export default function EventInfoDrawer({
eventRange,
@@ -14,7 +42,7 @@ export default function EventInfoDrawer({
return (
-
@@ -22,7 +50,7 @@ export default function EventInfoDrawer({
original event's timezone{" "}
which is{" "}
-
+
{formatLabel(eventRange.timezone)}
@@ -54,8 +82,8 @@ export function EventInfo({ eventRange }: { eventRange: EventRange }) {
{eventRange.type === "specific" ? (
- {prettyDate(new Date(eventRange.dateRange.from!), "date")} –{" "}
- {prettyDate(new Date(eventRange.dateRange.to!), "date")}
+ {formatDate(eventRange.dateRange.from, "EEE, MMMM d")} {" - "}
+ {formatDate(eventRange.dateRange.to, "EEE, MMMM d")}
) : (
@@ -69,13 +97,7 @@ export function EventInfo({ eventRange }: { eventRange: EventRange }) {
{eventRange.timeRange.from === 0 && eventRange.timeRange.to === 24
? "Anytime"
- : `${prettyDate(
- new Date(new Date().setHours(eventRange.timeRange.from, 0)),
- "time",
- )} - ${prettyDate(
- new Date(new Date().setHours(eventRange.timeRange.to, 0)),
- "time",
- )}`}
+ : `${formatTime(eventRange.timeRange.from, "hh:mm a")} - ${formatTime(eventRange.timeRange.to, "hh:mm a")}`}
{eventRange.duration > 0 && (
@@ -98,19 +120,19 @@ function InfoRow({
return (
{label}
-
{children}
+
{children}
);
}
-function prettyDate(date: Date, type?: "date" | "time") {
- return new Intl.DateTimeFormat("en-US", {
- weekday: type === "date" ? "short" : undefined,
- month: type === "date" ? "long" : undefined,
- day: type === "date" ? "numeric" : undefined,
- year: undefined,
- hour: type === "time" ? "numeric" : undefined,
- minute: type === "time" ? "numeric" : undefined,
- hour12: true,
- }).format(date);
+// Helper functions to format date and time
+function formatDate(date: string, fmt: string): string {
+ const parsedDate = parse(date, "yyyy-MM-dd", new Date());
+ return format(parsedDate, fmt);
+}
+
+function formatTime(hour: number, fmt: string): string {
+ const date = new Date();
+ date.setHours(hour, 0, 0, 0);
+ return format(date, fmt);
}
diff --git a/src/features/toast/base.tsx b/src/features/toast/base.tsx
new file mode 100644
index 00000000..69d3f42c
--- /dev/null
+++ b/src/features/toast/base.tsx
@@ -0,0 +1,69 @@
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as Toast from "@radix-ui/react-toast";
+
+import { cn } from "@/lib/utils/classname";
+
+export default function BaseToast({
+ open,
+ onOpenChange,
+ title,
+ message,
+ icon,
+ toastStyle,
+}: {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ title: string;
+ message: string;
+ icon: React.ReactNode;
+ toastStyle: string;
+}) {
+ return (
+
+ {icon}
+
+
+
{title}
+
+ {message}
+
+