Huxpro / Huxpro/BusyWeek

Port Pretext's exact-height accordion to day sections

Open
#8 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
12
Forks
5
PR merge metrics
No merged PRs in 30d

Description

## Summary

Port the [Pretext Accordion demo](https://chenglou.me/pretext/accordion/) into BusyWeek as collapsible day sections whose expanded heights are calculated ahead of rendering.

The reference demo animates from `0` to an exact measured text height without reading the rendered body height and without a CSS `max-height` approximation. BusyWeek already owns the measured height of every Todo, so a day can use the same idea at the group level.

## Proposed interaction

- Tapping a day header toggles that day between expanded and collapsed.
- Today starts expanded.
- Match the reference accordion initially: opening one day closes the previously open day.
- Animate the disclosure glyph and the exact day-body height together.
- Todos retain their own variable-height insertion/removal transitions inside an expanded day.
- Keep the user's visible scroll anchor stable when a section above the viewport opens or closes.

## Layout model

For each day, derive the expanded body height from application state:

- measured/predicted Todo row heights
- row dividers and internal spacing
- empty-day content, if rendered
- completed-item visibility
- current text width/font configuration

Do not use:

- DOM/native element height reads as the primary source
- a large sentinel `max-height`
- clipped scale transforms that distort text

Recompute the target when a Todo is created, edited, moved, completed, deleted, hidden, or remeasured after a width/font change.

## Acceptance criteria

- [ ] Day headers are accessible expand/collapse controls with an explicit expanded state.
- [ ] Collapsed and expanded heights animate between exact values on Web and Lynx native.
- [ ] No text clipping or blank tail space occurs for arbitrary multiline Todos.
- [ ] Later day cards move continuously while the active section changes height.
- [ ] Opening/closing a section does not reset Todo state or remount active content unnecessarily.
- [ ] Editing, moving, deleting, or hiding completed Todos updates an open panel's target height.
- [ ] Scroll position remains anchored when an off-screen/above-screen section changes.
- [ ] Rapid repeated taps and interrupted transitions settle on the correct final state.
- [ ] Reduced-motion mode applies the final height without the spatial animation.
- [ ] Tests cover exact height derivation, state interruption, multiline rows, and completed-item filtering.

## Reference

The original demo uses `prepare()` + `layout()` to compute every panel's exact line count and height, then transitions the body to that number:

- Demo: https://chenglou.me/pretext/accordion/
- Source: https://github.com/chenglou/pretext/blob/main/pages/demos/accordion.ts

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the referenced Pretext accordion demo and its pages/demos/accordion.ts source, then locate BusyWeek's existing Todo measurement and day-section rendering entry points. Done means exact-height animated sections work on Web and Lynx, preserve scroll and Todo state, handle interruptions and reduced motion, and have tests for the listed height and filtering cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.