## UI Design Proposal

I want the chore scheduler to have a feature to enable and disable a chore. If the user wants to stop a chore from being scheduled on certain days, the chore will be disabled. Otherwise it will be enabled

## Source

frontend\vue-app\src\components\shared\ScheduleModal.vue

## Ideas

I propose a toggle button that looks like the following:
![alt text](image.png)
This slider could go into the red rectangles in the dialogs below.
Since there are 2 types of schedulers, we will have this toggle on both.
For mobile the toggles should be 44px in dimension.

## Questions

Does near the top of the dialog work well for UI/UX, or should the toggle be somewhere else? Or should the dialogs be reworked somehow?

If we go with toggle, instead of green, should we use a color that works with our current palette? (blue)

## Every X Days

![alt text](image-1.png)

## Specific Days

![alt text](image-2.png)

### E2E Tests — `frontend/vue-app/tests/`

- [ ] **toggle persists across modal reopen**: Open schedule modal, toggle to paused, save; reopen the same modal, verify toggle is still in paused state
- [ ] **paused schedule does not show chore for child**: Pause a schedule, switch to child view, verify the chore does not appear as active