docs: add implementation plan for mobile event modal guided drawer
This commit is contained in:
997
docs/superpowers/plans/2025-05-24-mobile-event-modal.md
Normal file
997
docs/superpowers/plans/2025-05-24-mobile-event-modal.md
Normal file
@@ -0,0 +1,997 @@
|
|||||||
|
# Mobile Event Edit Modal Implementation Plan
|
||||||
|
|
||||||
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||||
|
|
||||||
|
**Goal:** Replace the mobile-unusable centred `Dialog` on `EventDialog` with a shadcn `Drawer` (Vaul) that guides the user through three steps — Details, Schedule, Recurrence — while preserving the desktop `Dialog` unchanged.
|
||||||
|
|
||||||
|
**Architecture:** `useIsMobile` drives a conditional render: desktop gets the existing `Dialog`, mobile gets a new `Drawer` that renders one of three step components (`DetailsStep`, `ScheduleStep`, `RecurrenceStep`) at a time. Step state lives in a small inline hook. The single `useForm` instance is shared across all steps so data is never lost.
|
||||||
|
|
||||||
|
**Tech Stack:** Next.js 15, React 19, React Hook Form 7, shadcn/ui (Vaul `Drawer`), Bun test runner, Biome
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## File Map
|
||||||
|
|
||||||
|
| File | Action | Responsibility |
|
||||||
|
|------|--------|----------------|
|
||||||
|
| `src/components/ui/drawer.tsx` | **Create** | shadcn Drawer primitives wrapping Vaul |
|
||||||
|
| `src/components/event-dialog.tsx` | **Modify** | add step hook, `DetailsStep`, `ScheduleStep`, `RecurrenceStep`, Drawer branch |
|
||||||
|
| `src/components/ui/dialog.tsx` | **Modify** | remove `isMobile` forks from `DialogContent` and `DialogFooter` |
|
||||||
|
| `tests/event-dialog.test.tsx` | **Modify** | add tests for step sections, progress bars, AI banner, step footer labels |
|
||||||
|
| `tests/mobile-hook-adoption.test.ts` | **Modify** | add `drawer.tsx` to the hook-driven files list |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 1: Install Vaul and add `drawer.tsx`
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Create: `src/components/ui/drawer.tsx`
|
||||||
|
- Modify: `package.json`, `bun.lock`
|
||||||
|
|
||||||
|
- [ ] **Step 1: Install Vaul**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun add vaul
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: `vaul` appears in `dependencies` in `package.json`.
|
||||||
|
|
||||||
|
- [ ] **Step 2: Create `src/components/ui/drawer.tsx`**
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Drawer as DrawerPrimitive } from "vaul";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
function Drawer({
|
||||||
|
shouldScaleBackground = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<DrawerPrimitive.Root
|
||||||
|
shouldScaleBackground={shouldScaleBackground}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
|
||||||
|
return <DrawerPrimitive.Trigger {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
|
||||||
|
return <DrawerPrimitive.Portal {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerClose({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
|
||||||
|
return <DrawerPrimitive.Close {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<DrawerPrimitive.Overlay
|
||||||
|
className={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-[2px]", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<DrawerPortal>
|
||||||
|
<DrawerOverlay />
|
||||||
|
<DrawerPrimitive.Content
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-[22px] bg-card shadow-xl outline-none",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="mx-auto mt-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" />
|
||||||
|
{children}
|
||||||
|
</DrawerPrimitive.Content>
|
||||||
|
</DrawerPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("flex flex-col gap-1.5 px-4 pb-3 pt-2 border-b border-border", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"sticky bottom-0 grid grid-cols-[0.8fr_1.2fr] gap-3 bg-gradient-to-t from-card via-card/95 to-transparent px-4 pb-6 pt-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<DrawerPrimitive.Title
|
||||||
|
className={cn("text-[22px] font-semibold leading-none tracking-[-0.06em]", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawerDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<DrawerPrimitive.Description
|
||||||
|
className={cn("text-sm text-muted-foreground leading-snug", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Drawer,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerDescription,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerOverlay,
|
||||||
|
DrawerPortal,
|
||||||
|
DrawerTitle,
|
||||||
|
DrawerTrigger,
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 3: Verify the file compiles with no import errors**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /path/to/project && bun run build 2>&1 | grep -i "drawer" | head -20
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: no errors mentioning `drawer.tsx`.
|
||||||
|
|
||||||
|
- [ ] **Step 4: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add src/components/ui/drawer.tsx package.json bun.lock
|
||||||
|
git commit -m "feat: add shadcn Drawer component (Vaul)"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 2: Write failing tests for the Drawer branch
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `tests/event-dialog.test.tsx`
|
||||||
|
- Modify: `tests/mobile-hook-adoption.test.ts`
|
||||||
|
|
||||||
|
- [ ] **Step 1: Add source-level assertions to `tests/event-dialog.test.tsx`**
|
||||||
|
|
||||||
|
Replace the entire file with:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { describe, expect, test } from "bun:test";
|
||||||
|
import { readFileSync } from "node:fs";
|
||||||
|
import { getEventFormValuesFromEvent } from "@/lib/event-form";
|
||||||
|
|
||||||
|
describe("EventDialog public modes", () => {
|
||||||
|
test("accepts AI-prefilled editable initial values through its public props", () => {
|
||||||
|
const initialValues = getEventFormValuesFromEvent({
|
||||||
|
title: "AI Draft",
|
||||||
|
start: "2026-04-09T10:00:00.000Z",
|
||||||
|
recurrenceRule: "FREQ=WEEKLY;INTERVAL=1;BYDAY=TH",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(initialValues.title).toBe("AI Draft");
|
||||||
|
expect(initialValues.start).toBe("2026-04-09T10:00:00.000Z");
|
||||||
|
expect(initialValues.recurrenceRule).toBe("FREQ=WEEKLY;INTERVAL=1;BYDAY=TH");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("dialog content uses console surface classes instead of generic border and shadow", () => {
|
||||||
|
const source = readFileSync("src/components/ui/dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
expect(source).toContain("rounded-[10px]");
|
||||||
|
expect(source).toContain("shadow-xl");
|
||||||
|
expect(source).not.toContain("rounded-lg border p-6 shadow-lg");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("dialog source uses console section labels and grouped field regions", () => {
|
||||||
|
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
expect(source).toContain("Event details");
|
||||||
|
expect(source).toContain("Schedule");
|
||||||
|
expect(source).toContain("Recurrence");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("event-dialog imports Drawer for mobile branch", () => {
|
||||||
|
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
expect(source).toContain("from \"@/components/ui/drawer\"");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("event-dialog renders three step components", () => {
|
||||||
|
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
expect(source).toContain("DetailsStep");
|
||||||
|
expect(source).toContain("ScheduleStep");
|
||||||
|
expect(source).toContain("RecurrenceStep");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("event-dialog includes step progress bars", () => {
|
||||||
|
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
// Three progress bar divs rendered inside a grid-cols-3 container
|
||||||
|
expect(source).toContain("grid-cols-3");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("event-dialog includes step counter badge", () => {
|
||||||
|
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
// Step badge like "1 / 3"
|
||||||
|
expect(source).toContain("/ 3");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("drawer footer shows Cancel on step 1 and Back on steps 2 and 3", () => {
|
||||||
|
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
expect(source).toContain("Cancel");
|
||||||
|
expect(source).toContain("Back");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("drawer footer shows Save only on step 3", () => {
|
||||||
|
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
expect(source).toContain("Save");
|
||||||
|
expect(source).toContain("Next");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("event-dialog resets step to 1 on close", () => {
|
||||||
|
const source = readFileSync("src/components/event-dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
expect(source).toContain("setStep(1)");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("dialog.tsx no longer forks on isMobile in DialogContent", () => {
|
||||||
|
const source = readFileSync("src/components/ui/dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
// isMobile should not be used to conditionally apply max-w inside DialogContent
|
||||||
|
expect(source).not.toContain("isMobile ? undefined : \"max-w-lg\"");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("dialog.tsx no longer forks on isMobile in DialogFooter", () => {
|
||||||
|
const source = readFileSync("src/components/ui/dialog.tsx", "utf8");
|
||||||
|
|
||||||
|
// DialogFooter should not branch on isMobile
|
||||||
|
expect(source).not.toContain("isMobile\n\t\t\t\t? \"flex flex-col-reverse gap-2\"");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: Add `drawer.tsx` to hook-driven file list in `tests/mobile-hook-adoption.test.ts`**
|
||||||
|
|
||||||
|
In `tests/mobile-hook-adoption.test.ts`, add `"src/components/ui/drawer.tsx"` to the `HOOK_DRIVEN_FILES` array. The drawer itself does not call `useIsMobile` (the caller decides the branch), so only add it to `HOOK_DRIVEN_FILES` — not to `DIRECT_HOOK_FILES`. The test checks that it contains no Tailwind breakpoint prefixes.
|
||||||
|
|
||||||
|
Replace the `HOOK_DRIVEN_FILES` array:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const HOOK_DRIVEN_FILES = [
|
||||||
|
"src/app/page.tsx",
|
||||||
|
"src/app/demo/combined-date-picker/page.tsx",
|
||||||
|
"src/components/ai-toolbar.tsx",
|
||||||
|
"src/components/event-dialog.tsx",
|
||||||
|
"src/components/settings-panel.tsx",
|
||||||
|
"src/components/ui/calendar.tsx",
|
||||||
|
"src/components/ui/date-picker.tsx",
|
||||||
|
"src/components/ui/dialog.tsx",
|
||||||
|
"src/components/ui/drawer.tsx",
|
||||||
|
"src/components/ui/input-group.tsx",
|
||||||
|
"src/components/ui/textarea.tsx",
|
||||||
|
"src/lib/ui-shell-contract.ts",
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 3: Run the new tests and confirm they fail for the right reasons**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun test tests/event-dialog.test.tsx 2>&1
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: the four new tests (`imports Drawer`, `renders three step components`, `grid-cols-3`, `/ 3`, `setStep(1)`, `no longer forks`) FAIL because the implementation does not exist yet. The first three existing tests should still PASS.
|
||||||
|
|
||||||
|
- [ ] **Step 4: Commit the failing tests**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add tests/event-dialog.test.tsx tests/mobile-hook-adoption.test.ts
|
||||||
|
git commit -m "test: add failing tests for Drawer mobile branch in EventDialog"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 3: Extract step sub-components inside `event-dialog.tsx`
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/components/event-dialog.tsx`
|
||||||
|
|
||||||
|
These are pure presentational helpers declared at the bottom of the same file. They receive form state as props and render one section's fields.
|
||||||
|
|
||||||
|
- [ ] **Step 1: Add the `StepProps` interface and `DetailsStep` at the bottom of `event-dialog.tsx`**
|
||||||
|
|
||||||
|
Below the closing `};` of `EventDialog`, add:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
interface StepProps {
|
||||||
|
control: ReturnType<typeof useForm<EventFormValues>>["control"];
|
||||||
|
register: ReturnType<typeof useForm<EventFormValues>>["register"];
|
||||||
|
errors: ReturnType<typeof useForm<EventFormValues>>["formState"]["errors"];
|
||||||
|
watch: ReturnType<typeof useForm<EventFormValues>>["watch"];
|
||||||
|
setValue: ReturnType<typeof useForm<EventFormValues>>["setValue"];
|
||||||
|
isAiDraft: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
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.
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function DetailsStep({ control, register, errors, isAiDraft }: Omit<StepProps, "watch" | "setValue">) {
|
||||||
|
const isMobile = useIsMobile();
|
||||||
|
return (
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{isAiDraft && <AiDraftBanner />}
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label htmlFor="event-title">Title</Label>
|
||||||
|
<Input
|
||||||
|
id="event-title"
|
||||||
|
placeholder="Event title"
|
||||||
|
className="font-medium"
|
||||||
|
{...register("title")}
|
||||||
|
/>
|
||||||
|
{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>
|
||||||
|
<Textarea
|
||||||
|
id="event-description"
|
||||||
|
className="field-sizing-content min-h-[60px] max-h-40 resize-none placeholder:text-muted-foreground/50"
|
||||||
|
placeholder="Add a description..."
|
||||||
|
{...register("description")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<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
|
||||||
|
name="location"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<LocationAutocomplete
|
||||||
|
id="event-location"
|
||||||
|
onChange={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Note: `DetailsStep` keeps the `isMobile` grid split for location/URL since that layout distinction is within the step body, not the container choice.
|
||||||
|
|
||||||
|
- [ ] **Step 2: Add `ScheduleStep` below `DetailsStep`**
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
function ScheduleStep({ control, errors, watch, setValue, isAiDraft }: Omit<StepProps, "register">) {
|
||||||
|
const allDay = watch("allDay");
|
||||||
|
const start = watch("start");
|
||||||
|
|
||||||
|
const DURATIONS = [
|
||||||
|
{ label: "+15 min", minutes: 15 },
|
||||||
|
{ label: "+30 min", minutes: 30 },
|
||||||
|
{ label: "+1 hour", minutes: 60 },
|
||||||
|
{ label: "+3 hours", minutes: 180 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleApplyDuration = (minutes: number) => {
|
||||||
|
if (!start) return;
|
||||||
|
const base = parseISO(start);
|
||||||
|
if (!isValid(base)) return;
|
||||||
|
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())}`
|
||||||
|
: `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}T${pad(next.getHours())}:${pad(next.getMinutes())}:00`;
|
||||||
|
setValue("end", result, { shouldDirty: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{isAiDraft && <AiDraftBanner />}
|
||||||
|
<div className="flex items-center gap-2 py-1">
|
||||||
|
<Controller
|
||||||
|
name="allDay"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Checkbox
|
||||||
|
id="event-all-day"
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={(checked) => field.onChange(checked === true)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="event-all-day" className="cursor-pointer text-sm font-normal">
|
||||||
|
All day
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Controller
|
||||||
|
name="start"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<DateTimePicker
|
||||||
|
value={field.value}
|
||||||
|
onChange={field.onChange}
|
||||||
|
allDay={allDay}
|
||||||
|
placeholder="Start date"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{!allDay && (
|
||||||
|
<div className="flex gap-1 pl-0.5">
|
||||||
|
{DURATIONS.map(({ label, minutes }) => (
|
||||||
|
<Button
|
||||||
|
key={label}
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
disabled={!start}
|
||||||
|
onClick={() => handleApplyDuration(minutes)}
|
||||||
|
className="px-2 py-1 text-xs text-muted-foreground"
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Controller
|
||||||
|
name="end"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<DateTimePicker
|
||||||
|
value={field.value}
|
||||||
|
onChange={field.onChange}
|
||||||
|
allDay={allDay}
|
||||||
|
placeholder="End date"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 3: Add `RecurrenceStep` below `ScheduleStep`**
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
function RecurrenceStep({ control, errors, watch, isAiDraft }: Omit<StepProps, "register" | "setValue">) {
|
||||||
|
const start = watch("start");
|
||||||
|
return (
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{isAiDraft && <AiDraftBanner />}
|
||||||
|
<Controller
|
||||||
|
name="recurrenceRule"
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<RecurrencePicker
|
||||||
|
value={field.value}
|
||||||
|
onChange={field.onChange}
|
||||||
|
start={start}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.recurrenceRule && (
|
||||||
|
<p className="text-xs text-destructive">{errors.recurrenceRule.message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 4: Run tests — step component tests should start passing**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun test tests/event-dialog.test.tsx 2>&1
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: `renders three step components` and `dialog source uses console section labels` PASS. Tests for `imports Drawer`, `grid-cols-3`, `/ 3`, `setStep(1)`, footer labels, and `isMobile` fork removal still FAIL.
|
||||||
|
|
||||||
|
- [ ] **Step 5: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add src/components/event-dialog.tsx
|
||||||
|
git commit -m "refactor: extract DetailsStep, ScheduleStep, RecurrenceStep into EventDialog"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 4: Add the Drawer branch to `EventDialog`
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/components/event-dialog.tsx`
|
||||||
|
|
||||||
|
- [ ] **Step 1: Add Drawer imports at the top of `event-dialog.tsx`**
|
||||||
|
|
||||||
|
After the existing `Dialog` imports block, add:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerDescription,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerTitle,
|
||||||
|
} from "@/components/ui/drawer";
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: Add step state inside `EventDialog`, just after the `useForm` call**
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const [step, setStep] = React.useState<1 | 2 | 3>(1);
|
||||||
|
const advanceStep = () => setStep((s) => Math.min(s + 1, 3) as 1 | 2 | 3);
|
||||||
|
const retreatStep = () => setStep((s) => Math.max(s - 1, 1) as 1 | 2 | 3);
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 3: Update `handleOpenChange` to reset step**
|
||||||
|
|
||||||
|
Replace the existing `handleOpenChange` function:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const handleOpenChange = (nextOpen: boolean) => {
|
||||||
|
if (!nextOpen) {
|
||||||
|
reset(getDefaultEventFormValues());
|
||||||
|
setStep(1);
|
||||||
|
onReset();
|
||||||
|
}
|
||||||
|
onOpenChange(nextOpen);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 4: Add per-step field name sets for partial validation**
|
||||||
|
|
||||||
|
After the `handleOpenChange` function, add:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const STEP_FIELDS: Record<1 | 2 | 3, (keyof EventFormValues)[]> = {
|
||||||
|
1: ["title", "url"],
|
||||||
|
2: ["start", "end"],
|
||||||
|
3: ["recurrenceRule"],
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNext = async () => {
|
||||||
|
const valid = await trigger(STEP_FIELDS[step]);
|
||||||
|
if (valid) advanceStep();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = handleSubmit((values) => {
|
||||||
|
const result = validateEventFormValues(values);
|
||||||
|
if (!result.success) {
|
||||||
|
const fieldErrors = result.error.flatten().fieldErrors;
|
||||||
|
let firstErrorStep: 1 | 2 | 3 | null = null;
|
||||||
|
for (const [fieldName, messages] of Object.entries(fieldErrors)) {
|
||||||
|
const firstMessage = messages?.[0];
|
||||||
|
if (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)) {
|
||||||
|
firstErrorStep = ownerStepNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (firstErrorStep !== null) setStep(firstErrorStep);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (values.recurrenceRule) {
|
||||||
|
const recurrenceValidation = validateRecurrence(
|
||||||
|
parseRecurrenceRule(values.recurrenceRule),
|
||||||
|
);
|
||||||
|
if (!recurrenceValidation.isValid) {
|
||||||
|
setError("recurrenceRule", {
|
||||||
|
message:
|
||||||
|
recurrenceValidation.errors.rule ||
|
||||||
|
recurrenceValidation.errors.count ||
|
||||||
|
recurrenceValidation.errors.until ||
|
||||||
|
"Invalid recurrence.",
|
||||||
|
});
|
||||||
|
setStep(3);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onSave(result.data);
|
||||||
|
reset(getDefaultEventFormValues());
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Also add `trigger` to the destructuring from `useForm`:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
handleSubmit,
|
||||||
|
register,
|
||||||
|
reset,
|
||||||
|
setError,
|
||||||
|
setValue,
|
||||||
|
trigger,
|
||||||
|
watch,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm<EventFormValues>({
|
||||||
|
defaultValues: getDefaultEventFormValues(),
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 5: Replace the `return` statement with a conditional render**
|
||||||
|
|
||||||
|
Replace the entire `return (...)` block (from `return (` through the closing `);`) with:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const stepProps = { control, register, errors, watch, setValue, isAiDraft };
|
||||||
|
|
||||||
|
const progressBars = (
|
||||||
|
<div className="grid grid-cols-3 gap-1.5 px-4 pt-2 pb-3">
|
||||||
|
{([1, 2, 3] as const).map((n) => (
|
||||||
|
<div
|
||||||
|
key={n}
|
||||||
|
className={cn(
|
||||||
|
"h-[3px] rounded-full transition-colors duration-200",
|
||||||
|
n <= step ? "bg-foreground" : "bg-muted",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const stepTitles: Record<1 | 2 | 3, string> = {
|
||||||
|
1: "Event Details",
|
||||||
|
2: "Schedule",
|
||||||
|
3: "Recurrence",
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isMobile) {
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
<DialogDescription>{descriptionText}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<form className="grid gap-6 px-6 py-5" onSubmit={onSubmit}>
|
||||||
|
{isAiDraft && (
|
||||||
|
<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.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<section className="grid gap-3">
|
||||||
|
<p className="font-mono text-[11px] uppercase text-muted-foreground">
|
||||||
|
Event details
|
||||||
|
</p>
|
||||||
|
<DetailsStep {...stepProps} />
|
||||||
|
</section>
|
||||||
|
<section className="grid gap-3">
|
||||||
|
<p className="font-mono text-[11px] uppercase text-muted-foreground">
|
||||||
|
Schedule
|
||||||
|
</p>
|
||||||
|
<ScheduleStep {...stepProps} />
|
||||||
|
</section>
|
||||||
|
<section className="grid gap-3">
|
||||||
|
<p className="font-mono text-[11px] uppercase text-muted-foreground">
|
||||||
|
Recurrence
|
||||||
|
</p>
|
||||||
|
<RecurrenceStep {...stepProps} />
|
||||||
|
</section>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="button" variant="ghost" onClick={() => handleOpenChange(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit">{saveLabel}</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer open={open} onOpenChange={handleOpenChange}>
|
||||||
|
<DrawerContent>
|
||||||
|
<DrawerHeader>
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<DrawerTitle>{stepTitles[step]}</DrawerTitle>
|
||||||
|
<DrawerDescription className="mt-1">
|
||||||
|
{step === 1 && "Title and start date are required."}
|
||||||
|
{step === 2 && "Set your event's date and time."}
|
||||||
|
{step === 3 && "Optionally repeat this event."}
|
||||||
|
</DrawerDescription>
|
||||||
|
</div>
|
||||||
|
<span className="shrink-0 rounded-full bg-muted px-2.5 py-1 text-xs text-muted-foreground">
|
||||||
|
{step} / 3
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</DrawerHeader>
|
||||||
|
{progressBars}
|
||||||
|
<form onSubmit={handleSave}>
|
||||||
|
<div className="overflow-y-auto px-4 pb-4 max-h-[55dvh]">
|
||||||
|
{step === 1 && <DetailsStep {...stepProps} />}
|
||||||
|
{step === 2 && <ScheduleStep {...stepProps} />}
|
||||||
|
{step === 3 && <RecurrenceStep {...stepProps} />}
|
||||||
|
</div>
|
||||||
|
<DrawerFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={step === 1 ? () => handleOpenChange(false) : retreatStep}
|
||||||
|
>
|
||||||
|
{step === 1 ? "Cancel" : "Back"}
|
||||||
|
</Button>
|
||||||
|
{step < 3 ? (
|
||||||
|
<Button type="button" onClick={handleNext}>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button type="submit">{saveLabel}</Button>
|
||||||
|
)}
|
||||||
|
</DrawerFooter>
|
||||||
|
</form>
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
Also add `cn` to the imports from `@/lib/utils` if not already present:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
```
|
||||||
|
|
||||||
|
And remove the now-redundant `handleApplyDuration` and `DURATIONS` from the top of `EventDialog` (they moved into `ScheduleStep`). Also remove the `onSubmit` function — it has been superseded by `handleSave`. Remove `allDay` and `start` from the top-level `watch` calls (they live in `ScheduleStep` now).
|
||||||
|
|
||||||
|
- [ ] **Step 6: Run tests — expect most new tests to pass**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun test tests/event-dialog.test.tsx 2>&1
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: all tests except the two `isMobile` fork removal tests PASS (those require the next task).
|
||||||
|
|
||||||
|
- [ ] **Step 7: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add src/components/event-dialog.tsx
|
||||||
|
git commit -m "feat: add mobile Drawer branch with guided steps to EventDialog"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 5: Clean up `dialog.tsx` — remove `isMobile` forks
|
||||||
|
|
||||||
|
**Files:**
|
||||||
|
- Modify: `src/components/ui/dialog.tsx`
|
||||||
|
|
||||||
|
- [ ] **Step 1: Remove `isMobile` from `DialogContent`**
|
||||||
|
|
||||||
|
In `src/components/ui/dialog.tsx`, `DialogContent` currently does:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const isMobile = useIsMobile();
|
||||||
|
// ...
|
||||||
|
className={cn(
|
||||||
|
"...",
|
||||||
|
isMobile ? undefined : "max-w-lg",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
```
|
||||||
|
|
||||||
|
Replace the entire `DialogContent` function with a version that always applies `max-w-lg` and removes the `useIsMobile` call:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
function DialogContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
showCloseButton = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||||
|
showCloseButton?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
data-slot="dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5 rounded-[10px] p-6 shadow-xl duration-200 max-w-lg",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{showCloseButton && (
|
||||||
|
<DialogPrimitive.Close
|
||||||
|
data-slot="dialog-close"
|
||||||
|
className="focus:ring-ring/30 data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-[6px] p-1 opacity-70 transition-[background-color,opacity] hover:opacity-100 focus:ring-[3px] focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||||
|
>
|
||||||
|
<XIcon />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 2: Remove `isMobile` from `DialogFooter`**
|
||||||
|
|
||||||
|
Replace the `DialogFooter` function with a version that always uses the desktop layout (the mobile layout is now inside `DrawerFooter`):
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="dialog-footer"
|
||||||
|
className={cn("flex flex-row justify-end gap-2", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 3: Remove unused `useIsMobile` import from `dialog.tsx`**
|
||||||
|
|
||||||
|
Delete the import line:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { useIsMobile } from "@/hooks/use-mobile";
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] **Step 4: Run tests — all should pass**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun test tests/event-dialog.test.tsx 2>&1
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: all 13 tests PASS.
|
||||||
|
|
||||||
|
- [ ] **Step 5: Run the full test suite and confirm no regressions**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun test 2>&1 | tail -10
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: same number of passing tests as before (99), same pre-existing failures — no new failures introduced.
|
||||||
|
|
||||||
|
- [ ] **Step 6: Commit**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add src/components/ui/dialog.tsx
|
||||||
|
git commit -m "refactor: remove isMobile forks from DialogContent and DialogFooter"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Task 6: Final verification
|
||||||
|
|
||||||
|
**Files:** none
|
||||||
|
|
||||||
|
- [ ] **Step 1: Run the full test suite**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun test 2>&1 | tail -15
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: 99 + 10 new = ~109 passing, same 17 pre-existing failures, 0 new failures.
|
||||||
|
|
||||||
|
- [ ] **Step 2: Run Biome lint**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun run lint 2>&1 | tail -20
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: no new errors in `src/components/ui/drawer.tsx` or `src/components/event-dialog.tsx`.
|
||||||
|
|
||||||
|
- [ ] **Step 3: Confirm no Tailwind breakpoint prefixes in drawer.tsx**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
bun test tests/mobile-hook-adoption.test.ts 2>&1
|
||||||
|
```
|
||||||
|
|
||||||
|
Expected: all 3 tests in `mobile hook adoption` PASS.
|
||||||
|
|
||||||
|
- [ ] **Step 4: Final commit if any lint auto-fixes were applied**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add -A && git diff --cached --stat
|
||||||
|
# Only commit if there are changes
|
||||||
|
git commit -m "chore: apply Biome lint fixes after mobile drawer implementation"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Self-Review Against Spec
|
||||||
|
|
||||||
|
| Spec requirement | Task covering it |
|
||||||
|
|-----------------|-----------------|
|
||||||
|
| Desktop: `Dialog` unchanged | Task 4, `!isMobile` branch |
|
||||||
|
| Mobile: Vaul `Drawer` | Tasks 1 + 4 |
|
||||||
|
| Three steps: Details / Schedule / Recurrence | Task 3 |
|
||||||
|
| Step footer: Cancel→Next / Back→Next / Back→Save | Task 4, `DrawerFooter` |
|
||||||
|
| "Next" validates only current step fields | Task 4, `handleNext` + `STEP_FIELDS` |
|
||||||
|
| "Save" validates all, jumps to first error step | Task 4, `handleSave` |
|
||||||
|
| Progress bars (grid-cols-3) | Task 4, `progressBars` |
|
||||||
|
| Step badge "x / 3" | Task 4, `DrawerHeader` |
|
||||||
|
| AI banner per-step (not once) | Tasks 3 + 4, `AiDraftBanner` in each step |
|
||||||
|
| Error jump to lowest error step | Task 4, `handleSave` loop |
|
||||||
|
| Step resets to 1 on close | Task 4, `handleOpenChange` |
|
||||||
|
| Remove `isMobile` from `DialogContent` | Task 5 |
|
||||||
|
| Remove `isMobile` from `DialogFooter` | Task 5 |
|
||||||
|
| `drawer.tsx` in hook-driven file list | Task 2 |
|
||||||
|
| Shared `useForm` instance | Task 4 — single `useForm` at `EventDialog` level |
|
||||||
Reference in New Issue
Block a user