xamxam/docs/repertoire-mobile-propositions.md

Répertoire — Mobile Responsive Propositions

Date: 2026-06-22 Context: Adapting the interactive 6-column filter model to mobile viewports

Current Architecture

• repertoire.php — page wrapper, loads HTMX + popover JS
• repertoire-index.php — 6-column filter index (also served as HTMX partial on filter toggles)
• repertoire.css — all styling, 3 breakpoints: 1024px → 3 cols, 600px → 1 col

Desktop interactive model:

1. 6-column filter grid — years, AP, orientations, finality, students, keywords. Each entry is a <button> with hx-get swapping #repertoire-index via HTMX.
2. Hover-to-preview on student names — hx-get on mouseenter, renders <div id="student-popover"> positioned via JS.
3. Pure CSS hamburger menu in global header, separate from this page.

Problems on Mobile

1. Column overload — Six vertically-stacked scrollable lists, each with independent overflow-y: auto, create deeply nested scrolling. Hostile UX — scroll hijacking, content below hard to discover.

2. Hover-based preview impossible on touch — mouseenter/mouseleave has no equivalent on touch devices. Student links navigate to /tfe?id=… on tap, but preview popover never fires.

3. HTMX navigation cost — Each filter tap triggers full HTTP round-trip + grid re-render. On mobile networks, latency is perceptible. pushState doubles the fetch on back-navigation.

4. Touch targets — Filter entries use padding: var(--space-3xs) 0 (~5px vertical). Tapping "Design et Politique du Multiple" without mis-hitting neighbors is error-prone.

5. No filter state visibility — Once scrolled past the first 2-3 sections, selected filter states are invisible (buried in scroll regions).

6. Header search bar competition — header-search-wrap renders above main, competing for vertical space with the full-height column layout.

---

Proposition A — Accordion + Active Filters Bar (minimal JS)

Each of the 6 filter columns becomes a collapsible accordion section. A persistent "active filters" bar shows selected filters as removable chips. Students column becomes a tap-to-open drawer (replaces hover).

Implementation:

• <details> + <summary> on each section heading for no-JS baseline. Enhanced with a tiny JS toggle for smooth animation if desired.
• On mobile, only one accordion section open at a time. On desktop, all remain open (unchanged).
• Extract selected filters into a horizontal chip bar above the accordion — each chip fires the same HTMX toggle URL to de-select.
• Replace hover popover with a click-to-open bottom sheet: tap a student name → slide-up panel shows thesis cards.
• Years column optionally becomes a horizontal pill bar (scannable horizontally).

Pros: Progressive enhancement, works without JS (details/summary), low structural change to PHP partial. Cons: Opening/closing accordions to scan filters is slower than the all-visible desktop model.

---

Proposition B — Tab Bar with Filter View Switcher

The 6 filter dimensions become horizontal tabs (scrollable on small screens). Tapping a tab shows only that dimension's list full-width. A "Résultats" badge in the header shows match count.

Implementation:

• <nav role="tablist"> across the top, horizontally scrollable (CSS scroll-snap).
• Each tab panel renders one <section> at full width. Single filter column, no nested scroll — the list scrolls with the page.
• Students tab replaces hover popover with inline cards: tap a name → inline expand to show thesis previews.
• Selected filter count shown as a badge on each tab.
• Active filter chips in a persistent bar.

Pros: Single scroll context, excellent for scanning one dimension at a time, familiar mobile pattern. Cons: Significant PHP restructuring — each tab panel excludes the other 5 columns. Needs JS for tab switching (or HTMX per tab). Separates filters from each other visually.

---

Proposition C — Drawer/Panel Pattern (most native-feeling)

Results-first view with a filter drawer. A "Filtres" button opens a side panel / bottom sheet containing all filter columns. Applying filters updates results and closes the drawer.

Implementation:

• Mobile: fixed "Filtres (N)" button at the top. Tap → sliding bottom sheet with all 6 filter columns in a single scrollable panel.
• Tapping an entry applies the filter via HTMX, optionally closes the sheet (or stays open for multi-filtering).
• Count badge shows active filter count.
• Desktop: unchanged — 6-column grid remains.
• Students: scrollable list in main content area below filter button, tap-to-expand cards.
• Popover JS deleted entirely.

Pros: Extensively tested pattern (maps apps, e-commerce). Closest to native mobile filter UX. Desktop unchanged. Single scroll container — no nested scrolling. Cons: Needs new drawer/sheet component. Results-first approach changes the page's purpose — currently the page is the filters, not a results view.

---

Proposition D — Hybrid: Filter Bar + Scrollable Carousel Sections

Keep the 6-column structure but transform into a horizontally scrollable carousel on mobile. Sections sit in a horizontal scroll container with snap points.

Implementation:

• @media (max-width: 640px): .repertoire-index grid becomes flex row with overflow-x: auto; scroll-snap-type: x mandatory.
• Each .repertoire-col becomes scroll-snap-align: start; min-width: 85vw.
• Heading acts as sticky within each snap panel.
• Students column moves to full-width below the carousel.
• Navigation dots or scroll hint at the bottom.
• Popover becomes long-press or tap-and-hold on students.

Pros: Preserves "browse everything" mental model. Low structural change — just CSS. Sections independently scannable. Cons: Horizontal carousels have discoverability issues. Popover still needs touch replacement. Horizontal+vertical scroll nesting creates gesture conflicts.

---

Recommended Approach

Proposition A (Accordion + Chip Bar) is the most pragmatic starting point:

1. Least structural PHP changes
2. Eliminates nested scrolling (the #1 problem)
3. Provides clear filter-state visibility via chips
4. Degrades gracefully (details/summary works without JS)
5. Same HTMX endpoints work — only container shape changes

Phased Implementation

1. Phase 1: Accordion sections + active filter chip bar (mobile only via CSS media query). Desktop unchanged.
2. Phase 2: Replace student hover popover with tap-to-open bottom sheet (touch-aware JS, keep hover for desktop).
3. Phase 3: Polish — touch target sizing (min 44px), filtered count badges, scroll-position memory on HTMX swap.