Ryan Kegel
2403daa3f7
4.3 KiB
Feature: Daily chore scheduler refactor phase 2
Overview
Parent Feature: .github/feat-calenar-chore/feat-calendar-chore.md
Goal: UI refactor of the 'Every X Days' portion of the chore scheduler so that it is not so complicated and mobile friendly
User Story:
- As a parent, I will be able to select an assigned chore and configure it to occur on 'Every X Days' as before, except I will be presented with a much easier to use interface.
Rules:
- Follow instructions from .github/copilot-instructions.md
Design:
- Do not modify 'Specific Days' pattern or UI. However, reuse code if necessary
Architecture:
- Shared Logic & Previewer Architecture The "Brain" remains centralized, but the output is now focused on the immediate next event to reduce cognitive clutter.
State Variables:
interval: Integer (Default: 1, Min: 1). "Frequency"
anchorDate: Date Object (Default: Today). "Start Date"
deadlineTime: String or Null (Default: null). "Deadline"
The "Next 1" Previewer Logic:
Input: anchorDate + interval.
Calculation: Result = anchorDate + (interval days).
Formatting: Returns a human-readable string (e.g., "Next occurrence: Friday, Oct 24").
Calendar Constraints:
Disable Past Dates: Any date prior to "Today" is disabled (greyed out and non-clickable) to prevent scheduling chores in the past.
- Mobile Specification: Bottom Sheet Calendar Design & Calendar Details Interface: A full-width monthly grid inside a slide-up panel.
Touch Targets: Each day cell is a minimum of 44x44 pixels to meet accessibility standards.
Month Navigation: Uses large left/right chevron buttons at the top of the sheet.
Visual Indicators:
Current Selection: A solid primary-colored circle.
Today’s Date: A subtle outline or "dot" indicator.
Disabled Dates: 30% opacity with a "forbidden" cursor state if touched.
Architecture Gesture Control: The Bottom Sheet can be dismissed by swiping down on the "handle" at the top or tapping the dimmed backdrop.
Performance: The calendar should lazy-load months to ensure the sheet slides up instantly without lag.
The Flow When the user taps the "Starting on" row...
Then the sheet slides up. The current anchorDate is pre-selected and centered.
When the user taps a new date...
Then the sheet slides down immediately (Auto-confirm).
When the sheet closes...
Then the main UI updates the Next 1 Previewer text.
- PC (Desktop) Specification: Tethered Popover Calendar Design & Calendar Details Interface: A compact monthly grid (approx. 250px–300px wide) that floats near the input.
Month Navigation: Small chevrons in the header. Includes a "Today" button to quickly jump back to the current month.
Day Headers: Single-letter abbreviations (S, M, T, W, T, F, S) to save space.
Hover States: As the mouse moves over valid dates, a light background highlight follows the cursor to provide immediate feedback.
Architecture Tethering: The popover is anchored to the bottom-left of the input field. If the browser window is too small, it intelligently repositions to the top-left.
Keyboard Support: * Arrow Keys: Move selection between days.
Enter: Confirm selection and close.
Esc: Close without saving changes.
Focus Management: When the popover opens, focus shifts to the calendar grid. When it closes, focus returns to the "Starting on" input.
The Flow When the user clicks the "Starting on" field...
Then the popover appears. No backdrop dimming is used.
When the user clicks a date...
Then the popover disappears.
When the user clicks anywhere outside the popover...
Then the popover closes (Cancel intent).
- Reusable Time Picker Reference Referenced from the 'Specific Days' design. TimePickerPopover.vue
Logic: 15-minute intervals (00, 15, 30, 45).
Mobile: Implemented via a Bottom Sheet with three scrollable columns.
PC: Implemented via a Tethered Popover with three clickable columns.