old4ever/local-cal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: apply Biome formatting after mobile drawer implementation

Browse Source
This commit is contained in:
Dmytro Stanchiev
2026-05-25 09:28:01 -04:00
parent 2088aa0c4d
commit 4ddcc44f84
2 changed files with 530 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/event-dialog.tsx
View File

@@ -16,7 +16,6 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import {
Drawer,
DrawerContent,
@@ -35,6 +34,7 @@ import {
validateEventFormValues,
} from "@/lib/event-form";
import { parseRecurrenceRule, validateRecurrence } from "@/lib/recurrence";
import { cn } from "@/lib/utils";
const STEP_FIELDS: Record<1 | 2 | 3, (keyof EventFormValues)[]> = {
1: ["title", "url"],
@@ -63,7 +63,11 @@ export const EventDialog = ({
}: EventDialogProps) => {
const isMobile = useIsMobile();
const isAiDraft = dialogSource === "ai" && !editingId;
const titleText = editingId ? "Edit Event" : isAiDraft ? "Review AI Draft" : "New Event";
const titleText = editingId
? "Edit Event"
: isAiDraft
? "Review AI Draft"
: "New Event";
const descriptionText = editingId
? "Update the event details below. Title and start date are required."
: isAiDraft
@@ -115,12 +119,21 @@ export const EventDialog = ({
for (const [fieldName, messages] of Object.entries(fieldErrors)) {
const firstMessage = messages?.[0];
if (firstMessage) {
setError(fieldName as keyof EventFormValues, { message: firstMessage });
setError(fieldName as keyof EventFormValues, {
message: firstMessage,
});
const ownerStep = (
Object.entries(STEP_FIELDS) as [string, (keyof EventFormValues)[]][]
).find(([, fields]) => fields.includes(fieldName as keyof EventFormValues))?.[0];
const ownerStepNum = ownerStep ? (Number(ownerStep) as 1 | 2 | 3) : null;
if (ownerStepNum !== null && (firstErrorStep === null || ownerStepNum < firstErrorStep)) {
).find(([, fields]) =>
fields.includes(fieldName as keyof EventFormValues),
)?.[0];
const ownerStepNum = ownerStep
? (Number(ownerStep) as 1 | 2 | 3)
: null;
if (
ownerStepNum !== null &&
(firstErrorStep === null || ownerStepNum < firstErrorStep)
) {
firstErrorStep = ownerStepNum;
}
}
@@ -130,7 +143,9 @@ export const EventDialog = ({
}
if (values.recurrenceRule) {
const recurrenceValidation = validateRecurrence(parseRecurrenceRule(values.recurrenceRule));
const recurrenceValidation = validateRecurrence(
parseRecurrenceRule(values.recurrenceRule),
);
if (!recurrenceValidation.isValid) {
setError("recurrenceRule", {
message:
@@ -155,25 +170,37 @@ export const EventDialog = ({
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="max-w-2xl rounded-[10px] bg-card p-0 shadow-xl">
<DialogHeader className="px-6 py-5 shadow-[inset_0_-1px_0_0_var(--color-border)]">
<DialogTitle className="text-[28px] tracking-[-0.06em]">{titleText}</DialogTitle>
<DialogTitle className="text-[28px] tracking-[-0.06em]">
{titleText}
</DialogTitle>
<DialogDescription>{descriptionText}</DialogDescription>
</DialogHeader>
<form className="grid gap-6 px-6 py-5" onSubmit={handleSave}>
{isAiDraft && <AiDraftBanner />}
<section className="grid gap-3">
<p className="font-mono text-[11px] uppercase text-muted-foreground">Event details</p>
<p className="font-mono text-[11px] uppercase text-muted-foreground">
Event details
</p>
<DetailsStep {...stepProps} isAiDraft={false} />
</section>
<section className="grid gap-3">
<p className="font-mono text-[11px] uppercase text-muted-foreground">Schedule</p>
<p className="font-mono text-[11px] uppercase text-muted-foreground">
Schedule
</p>
<ScheduleStep {...stepProps} isAiDraft={false} />
</section>
<section className="grid gap-3">
<p className="font-mono text-[11px] uppercase text-muted-foreground">Recurrence</p>
<p className="font-mono text-[11px] uppercase text-muted-foreground">
Recurrence
</p>
<RecurrenceStep {...stepProps} isAiDraft={false} />
</section>
<DialogFooter>
<Button type="button" variant="ghost" onClick={() => handleOpenChange(false)}>
<Button
type="button"
variant="ghost"
onClick={() => handleOpenChange(false)}
>
Cancel
</Button>
<Button type="submit">{saveLabel}</Button>
@@ -263,8 +290,8 @@ interface StepProps {
function AiDraftBanner() {
return (
<div className="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs leading-relaxed text-primary">
This draft was generated from natural language. Double-check dates, times, location,
recurrence, and links before saving.
This draft was generated from natural language. Double-check dates, times,
location, recurrence, and links before saving.
</div>
);
}
@@ -287,7 +314,9 @@ function DetailsStep({
className="font-medium"
{...register("title")}
/>
{errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>}
{errors.title && (
<p className="text-xs text-destructive">{errors.title.message}</p>
)}
</div>
<div className="space-y-1.5">
<Label htmlFor="event-description">Description / notes</Label>
@@ -298,7 +327,11 @@ function DetailsStep({
{...register("description")}
/>
</div>
<div className={isMobile ? "grid grid-cols-1 gap-3" : "grid grid-cols-2 gap-3"}>
<div
className={
isMobile ? "grid grid-cols-1 gap-3" : "grid grid-cols-2 gap-3"
}
>
<div className="space-y-1.5">
<Label htmlFor="event-location">Location</Label>
<Controller
@@ -316,7 +349,9 @@ function DetailsStep({
<div className="space-y-1.5">
<Label htmlFor="event-url">URL</Label>
<Input id="event-url" placeholder="URL" {...register("url")} />
{errors.url && <p className="text-xs text-destructive">{errors.url.message}</p>}
{errors.url && (
<p className="text-xs text-destructive">{errors.url.message}</p>
)}
</div>
</div>
</div>
@@ -344,7 +379,8 @@ function ScheduleStep({
if (!start) return;
const base = parseISO(start);
if (!isValid(base)) return;
const next = minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
const next =
minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60);
const pad = (v: number) => String(v).padStart(2, "0");
const result = allDay
? `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}`
@@ -367,7 +403,10 @@ function ScheduleStep({
/>
)}
/>
<Label htmlFor="event-all-day" className="cursor-pointer text-sm font-normal">
<Label
htmlFor="event-all-day"
className="cursor-pointer text-sm font-normal"
>
All day
</Label>
</div>
@@ -413,8 +452,12 @@ function ScheduleStep({
/>
)}
/>
{errors.start && <p className="text-xs text-destructive">{errors.start.message}</p>}
{errors.end && <p className="text-xs text-destructive">{errors.end.message}</p>}
{errors.start && (
<p className="text-xs text-destructive">{errors.start.message}</p>
)}
{errors.end && (
<p className="text-xs text-destructive">{errors.end.message}</p>
)}
</div>
</div>
);
@@ -434,11 +477,17 @@ function RecurrenceStep({
name="recurrenceRule"
control={control}
render={({ field }) => (
<RecurrencePicker value={field.value} onChange={field.onChange} start={start} />
<RecurrencePicker
value={field.value}
onChange={field.onChange}
start={start}
/>
)}
/>
{errors.recurrenceRule && (
<p className="text-xs text-destructive">{errors.recurrenceRule.message}</p>
<p className="text-xs text-destructive">
{errors.recurrenceRule.message}
</p>
)}
</div>
);

21
src/components/ui/drawer.tsx
View File

@@ -5,19 +5,27 @@ import { Drawer as DrawerPrimitive } from "vaul";
import { cn } from "@/lib/utils";
function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
function Drawer({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
}
function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
function DrawerTrigger({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
}
function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
function DrawerPortal({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
}
function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
function DrawerClose({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
}
@@ -90,7 +98,10 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
);
}
function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
function DrawerTitle({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
return (
<DrawerPrimitive.Title
data-slot="drawer-title"