Conversation
There was a problem hiding this comment.
Pull request overview
Refactors large, page-local logic into shared utilities/hooks and decomposes several screens into smaller, reusable section components, while updating docs to match the new organization.
Changes:
- Extracted shared pure utilities (schedule, analytics, marker math, zoom/pan clamping) and reusable hooks (schedule generation, team form, zoom/pan, call-tracking state).
- Decomposed dispatch call-tracking UI and event/venue pages into smaller components (sections/widgets/controls).
- Updated architecture/components documentation to reflect the new structure.
Reviewed changes
Copilot reviewed 33 out of 33 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/zoomPanUtils.ts | New shared zoom/pan clamp helpers. |
| src/lib/uploadUtils.ts | New shared Firebase Storage upload-with-retry helper. |
| src/lib/scheduleUtils.ts | New shared schedule time parsing/formatting + posting-time generation. |
| src/lib/markerUtils.ts | New shared marker hit-testing and pixel→percent conversion utilities. |
| src/lib/liteEventAdapters.ts | New adapters for converting lite drafts ↔ full Event shape. |
| src/lib/analyticsUtils.ts | New extracted analytics helpers for summary charts (window/series/team pie). |
| src/hooks/useZoomPan.ts | New reusable zoom/pan hook using shared clamp utils. |
| src/hooks/useTeamForm.ts | New reusable hook for team modal/form state. |
| src/hooks/useScheduleGeneration.ts | New reusable hook for generating posting times from inputs. |
| src/hooks/useCallTrackingState.ts | New reusable hook for call-tracking notes/log/pending UI state. |
| src/components/venue-management/PendingMarkerDialog.tsx | Extracted pending marker naming UI into a component. |
| src/components/venue-management/MarkerPlacementInstruction.tsx | Extracted marker placement instruction overlay. |
| src/components/venue-management/MarkerModeToggleButton.tsx | Extracted “add markers” mode toggle button. |
| src/components/venue-management/LayerControlBar.tsx | Extracted bottom layer/map control bar for venue editor. |
| src/components/venue-management/EquipmentManagementSection.tsx | Extracted equipment CRUD UI for venue editor. |
| src/components/ui/portal-dropdown.tsx | New shared portal-based dropdown anchored to an element. |
| src/components/ui/map-zoom-controls.tsx | New shared zoom/reset button cluster for map viewers. |
| src/components/ui/map-pan-surface.tsx | New shared pan/wheel event surface wrapper. |
| src/components/event-create/TeamStaffingSection.tsx | Extracted team staffing tab section from event create page. |
| src/components/event-create/SupervisorStaffingSection.tsx | Extracted supervisor staffing tab section from event create page. |
| src/components/event-create/PostsEquipmentSection.tsx | Extracted posts + equipment selection sections for event create. |
| src/components/event-create/PostingScheduleSection.tsx | Extracted posting schedule UI for event create. |
| src/components/event-create/MetadataSection.tsx | Extracted event metadata (name/date) section. |
| src/components/dispatch/teamwidget.tsx | Extracted TeamWidget wrapper for normal/condensed team cards. |
| src/components/dispatch/calltrackingdetails.tsx | Extracted expanded call details (notes/log) row UI. |
| src/components/dispatch/calltracking.tsx | Updated call tracking table to use extracted hook + details component. |
| src/app/lite/create/page.tsx | Replaced page-local schedule/team-form logic with shared utils/hooks. |
| src/app/(main)/venues/management/page.client.tsx | Updated venue management page to use extracted sections + shared map utils/hooks. |
| src/app/(main)/events/[eventId]/summary/page.tsx | Replaced page-local analytics helpers with shared analytics utils. |
| src/app/(main)/events/[eventId]/dispatch/page.tsx | Updated dispatch page to use extracted lite adapters + TeamWidget; removed inlined helpers. |
| src/app/(main)/events/[eventId]/create/page.tsx | Decomposed event create page into section components and shared map controls/hooks. |
| docs/COMPONENTS.md | Documentation updates for new component organization and shared UI primitives. |
| docs/ARCHITECTURE.md | Documentation updates to reflect new folders and decomposition guidance. |
| import React from 'react'; | ||
| import { Button, ButtonGroup } from '@heroui/react'; | ||
| import { RotateCcw, ZoomIn, ZoomOut } from 'lucide-react'; |
There was a problem hiding this comment.
Most components that render HeroUI primitives in this repo are explicitly marked as client components (e.g. src/components/dispatch/teamcard.tsx:2). Consider adding 'use client' at the top of this shared UI component so it’s consistently treated as client-side when reused across the app.
| <ScrollShadow className="space-y-2 pr-2 max-h-[calc(100vh-430px)] scrollbar-hide"> | ||
| {equipment.map((item, idx) => ( | ||
| <Card | ||
| key={idx} |
There was a problem hiding this comment.
The equipment list uses the array index as the React key (key={idx}), which can cause incorrect item reuse when removing/editing entries (especially with the in-place edit UI). Since Equipment includes an id, prefer using item.id as the key to keep identity stable.
| key={idx} | |
| key={item.id} |
| import React from 'react'; | ||
| import { Textarea } from '@heroui/react'; | ||
|
|
There was a problem hiding this comment.
This component imports HeroUI (@heroui/react) and is used in interactive dispatch UI, but it isn’t marked with 'use client'. Most interactive components in this repo include the directive (e.g. src/components/dispatch/teamcard.tsx:2); consider adding it here for consistency and to avoid accidental server-component usage issues.
| import React from 'react'; | ||
| import { Button, Card, Input, ScrollShadow } from '@heroui/react'; | ||
| import { Edit2, Plus, Trash2 } from 'lucide-react'; | ||
| import type { Equipment } from '@/app/types'; |
There was a problem hiding this comment.
This extracted section uses HeroUI components and interactive callbacks, but it isn’t marked with 'use client'. For consistency with the rest of the codebase’s component conventions, consider adding 'use client' at the top of the file.
Summary
Extracts shared pure utilities for scheduling, analytics, markers, and zoom math. Extracts reusable hooks for schedule generation, team form handling, and zoom/pan. Decomposes dispatch internals into focused modules (adapters, widgets, call tracking state/details). Decomposes event create and venue management pages into focused section components. Adds shared map controls to reduce repeated zoom/pan UI logic. Fixes create-page hasVenue typing issue. Updates architecture/component docs to reflect the new organization. Reduces monolithic file complexity and improves maintainability.
Checklist
Related issues
Closes #9