Ryan Kegel
2403daa3f7
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Failing after 57s
168 lines
4.3 KiB
Markdown
168 lines
4.3 KiB
Markdown
# 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:**
|
||
|
||
1. 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.
|
||
|
||
2. 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.
|
||
|
||
3. 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).
|
||
|
||
4. 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.
|
||
|
||
## Clear Action: Both versions must include a "Clear" button to set the deadline to null (Anytime).
|
||
|
||
## Data Model Changes
|
||
|
||
### Backend Models
|
||
|
||
### Frontend Models
|
||
|
||
---
|
||
|
||
## Frontend Design
|
||
|
||
## Backend Implementation
|
||
|
||
---
|
||
|
||
## Backend Tests
|
||
|
||
- [ ]
|
||
|
||
---
|
||
|
||
## Frontend Implementation
|
||
|
||
- [ ]
|
||
|
||
---
|
||
|
||
## Frontend Tests
|
||
|
||
---
|
||
|
||
## Future Considerations
|
||
|
||
---
|
||
|
||
## Acceptance Criteria (Definition of Done)
|
||
|
||
### Backend
|
||
|
||
- [ ]
|
||
|
||
### Frontend
|
||
|
||
- [ ]
|