From 2403daa3f7a5343f03c4649eb46b9a0f057cd87b Mon Sep 17 00:00:00 2001
From: Ryan Kegel <ryan.kegel@gmail.com>
Date: Wed, 25 Feb 2026 21:06:57 -0500
Subject: [PATCH] feat: add detailed specifications for Daily chore scheduler
 refactor phase 2

---
 .../feat-calendar-schedule-refactor-02.md     | 167 ++++++++++++++++++
 1 file changed, 167 insertions(+)
 create mode 100644 .github/specs/feat-calendar-chore/feat-calendar-schedule-refactor-02.md

diff --git a/.github/specs/feat-calendar-chore/feat-calendar-schedule-refactor-02.md b/.github/specs/feat-calendar-chore/feat-calendar-schedule-refactor-02.md
new file mode 100644
index 0000000..865b761
--- /dev/null
+++ b/.github/specs/feat-calendar-chore/feat-calendar-schedule-refactor-02.md
@@ -0,0 +1,167 @@
+# 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
+
+- [ ]