Collapse the lesson-type filter behind a Show Only button

The filter took a row of the booking calendar before a student had asked for it. The view toggle and a new "Show Only" button now share one control row, and the lesson-type list is revealed between that row and the calendar. The list stays open across re-renders once revealed, and collapsing it leaves the filter applied — the button keeps its active styling and carries the number of ticked types, so a collapsed filter is never invisible. Closes #119 Co-Authored-By: Claude Opus 5 <[email protected]>
2026-07-28 12:47:24 -03:00
parent add6605141
commit 9d11cc3b01
5 changed files with 95 additions and 37 deletions
@@ -20,7 +20,7 @@ Students register for a private lesson by choosing an offering, picking a time (
 | `created_at`   | DATETIME         | Insertion time                                             |

 ## Registration Flow
-1. Student opens the page with the `[us_booking]` shortcode and browses open slots as a weekly calendar (the default, anchored to the week of the earliest open slot) or an agenda list (view toggle with previous/next-week navigation; times shown in 12-hour AM/PM form). A **lesson-type filter** above the calendar narrows the open times to those bookable as the chosen types (see **Lesson-Type Filter**).
+1. Student opens the page with the `[us_booking]` shortcode and browses open slots as a weekly calendar (the default, anchored to the week of the earliest open slot) or an agenda list (view toggle with previous/next-week navigation; times shown in 12-hour AM/PM form). A **Show Only** button beside the view toggle opens a lesson-type filter that narrows the open times to those bookable as the chosen types (see **Lesson-Type Filter**).
 2. Student picks a slot and an **offering** (a 30 or 60-minute private-lesson type). When the slot is tied to an offering the form shows it locked (the student sees exactly what they are booking); otherwise the form presents the instructor's active private-lesson offerings whose duration fits the slot, narrowed to the filtered types. When exactly one type remains it is pre-selected (its intake questions load immediately). Every booking requires an offering — a generic slot with no fitting offering cannot be booked online.
 3. For a `weekly` reservation, the same weekday/time is held for the rest of the offering's term.
 4. Student answers the offering's questions (`GET /offerings/{id}/questions`).
@@ -34,18 +34,23 @@ Students register for a private lesson by choosing an offering, picking a time (
 ## Lesson-Type Filter
 Not every open slot can be booked as every private-lesson type — a slot tied to
 an offering takes that offering only, and a generic slot only takes types whose
-length fits. The booking calendar therefore carries a lesson-type filter above
-the view toggle: a checkbox per active private-lesson type (from
+length fits. The booking calendar therefore carries a lesson-type filter,
+collapsed behind a **Show Only** button that sits in the calendar's control row
+beside the List/Week toggle. Opening it reveals the type list between that row
+and the calendar: a checkbox per active private-lesson type (from
 `GET /offerings?kind=private_lesson`, fetched once per page load), showing the
 instructor's name alongside the title when the catalog spans more than one
-instructor. The filter is hidden when there is only one bookable type.
+instructor. The button carries the number of ticked types and stays highlighted
+while the filter is on, so a collapsed filter is never invisible. Both button and
+list are hidden when there is only one bookable type.

 Ticking one or more types narrows the calendar to the slots bookable as one of
-them; no ticks means no filter. Picking a filtered slot narrows the registration
-form's **Lesson type** picker the same way, and when exactly one type remains it
-is pre-selected and its intake questions load immediately. Changing the filter
-re-anchors the week view on the earliest matching slot, so the student never
-lands on an empty week. **Show all types** clears the filter.
+them; no ticks means no filter, and collapsing the list leaves the filter
+applied. Picking a filtered slot narrows the registration form's **Lesson type**
+picker the same way, and when exactly one type remains it is pre-selected and its
+intake questions load immediately. Changing the filter re-anchors the week view
+on the earliest matching slot, so the student never lands on an empty week.
+**Show all types** clears the filter.

 Bookability is decided client-side by `offeringFitsSlot()` in
 `assets/js/booking.js` — the mirror of the rule `POST /bookings` enforces (same