Casadesign - DRAFT DO NOT MERGE#7051
Draft
giacoelho wants to merge 45 commits into
Draft
Conversation
Introduce Tailwind v4 alongside the existing Bootstrap stack so the UI can be modernized page-by-page without breaking current views. - Add tailwindcss + @tailwindcss/cli (v4), build:tailwind[:dev] npm scripts, and a `tw` process in Procfile.dev. Output lands in app/assets/builds, which Sprockets already serves via the manifest's link_directory. - Add app/assets/stylesheets/tailwind.css: CSS-first design system (Inter font + an indigo "brand" palette) — the visual direction for the redesign. - New Tailwind-only layout casa_auth.html.erb (split brand panel + form), used by both the user and all-casa sign-in controllers. - Redesign devise/sessions/new.html.erb in a clean, modern Stripe/Airbnb style and wire up remember-me properly. Scoped to sign-in only; every other page keeps the Bootstrap `application` layout untouched. First step of an incremental migration. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Approved font direction: swap the design-system typeface and the auth layout's webfont link from Inter to Figtree (warmer humanist sans). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- design.md: living design-system doc (Tailwind v4 approach, Figtree type scale, color tokens, icon-tile pattern, component + empty-state specs, app-shell spec, migration checklist). Codifies the icon-tile treatment (icons on a soft colored background) for stat/status icons and reserves initial-avatars for people only. - CLAUDE.md: point to design.md and record the casadesign commit/push-per-checkpoint workflow. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
New Tailwind-only layout: left sidebar with Pundit-guarded nav mirroring the existing routes, plus a top bar (notifications, profile menu, sign out). Coexists with the Bootstrap `application` layout — redesigned authenticated pages opt in via `layout "casa_app"`. Icons via Bootstrap Icons CDN + Figtree (per design.md). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Supervisors now land on a real dashboard (DashboardController#show renders it in the casa_app shell) instead of the Bootstrap volunteers table: - SupervisorDashboard service builds per-volunteer follow-up status + summary stats from the supervisor's assigned volunteers. - View: KPI cards, a "Needs your attention" list (icon-tile treatment per design feedback — replaces the ringed avatars), and a roster with color-coded contact-status pills. - Empty states handled: no volunteers -> welcome + CTAs; nobody behind -> all caught up. The full volunteer management table remains at /volunteers. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Feedback from design review:
- Avatar initials strip honorific prefixes (Mrs./Mr./…) and use first + last name
only, via a shared `avatar_initials` helper (removed the duplicate in the service).
- Top-bar profile menu is triggered by the avatar alone; the name lives in the
dropdown, not the trigger.
- Page header is the page name ("Dashboard") + <title>, not a greeting.
Accessibility (WCAG AA targets):
- Skip-to-content link, landmark labels, aria-labels on icon-only controls,
aria-current on the active nav item, table scope + sr-only caption, visible
focus rings, contrast bumps (slate-400 -> 500/600), role=status/alert on flash.
Responsive:
- Sidebar becomes an off-canvas drawer below lg with an accessible toggle
(button + aria-expanded, Escape/backdrop to close) and a responsive grid/padding.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Names now render as first + last only (no Mr./Mrs./...) wherever a person is shown in the redesign — the shell sidebar/profile menu and the supervisor dashboard (names and aria-labels), plus the avatar initials. - New `NamePresentation.strip_honorific` + a `display_person(user)` view helper. - Presentation-only: the stored `display_name` is left untouched. (An attempted `User#display_name` override was reverted — a security spec requires display_name to round-trip raw input unchanged, e.g. dangerous strings.) - Documented in design.md + CLAUDE.md so it's applied on every page going forward. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The bottom-of-sidebar user block (avatar + name + role) duplicated the identity already shown by the top-right avatar account menu, and was non-interactive. Drop it; the top-right menu is the single source for identity + account actions. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The "CV" placeholder brand mark wasn't a value-add at 36px (the org name already identifies the chapter) and using the real org logo there would add image/variant infrastructure for little gain. Show the org name alone in the sidebar header; the full logo stays for contexts with room (sign-in, court reports). design.md updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Bring the rest of the auth flow in line with the redesigned sign-in: - Forgot password (passwords/new), reset password (passwords/edit), and accept-invitation (invitations/edit) rebuilt in Tailwind, matching the sign-in's inputs/buttons/error styling. CASA's email-or-phone reset is preserved. - Users::PasswordsController uses `layout "casa_auth"`; the invitation-accept action renders in casa_auth (admin invite `new`/`create` untouched). - casa_auth `<title>` is now driven by `content_for(:page_title)`; each page sets its own title (Sign in / Reset your password / Choose a new password / Accept your invitation). Verified all three render 200 in the new layout (accept-invitation via a valid token). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Apply the honorific-free naming rule to the existing Bootstrap UI, not just the redesign: - 37 `.display_name` person-name sites across ~20 legacy views now render via the `formatted_name` helper (org names, form-value symbols, and the checkbox-id slug line were intentionally excluded). - The 4 DataTables (volunteer, supervisor, case-contact, reimbursement) strip honorifics on their Ruby name outputs (display_name + supervisor_name); SQL select/order strings are untouched. - Added a `formatted_name(name)` string helper alongside `display_person`, both backed by `NamePresentation`. Verified /supervisors, /volunteers, /casa_cases render 200 with zero honorifics; datatable classes load clean; standardrb + rendering green. Docs updated. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The header helper text becomes a short single sentence with no em-dash; the org name already appears in the sidebar header, so it's no longer repeated here. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
giacoelho
requested review from
FireLemons,
compwron and
elasticspoon
as code owners
github-actions
Bot
added
dependencies
DashboardController#show now renders the casadesign supervisor dashboard (SupervisorDashboard + casa_app layout) for supervisors, but the request spec still asserted the old redirect to the volunteers overview and was failing on the branch. Assert the dashboard renders and lists an assigned volunteer instead. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…app shell First page-by-page migration off the legacy Bootstrap UI, following design.md. The notifications page is linked straight from the new shell (top-bar bell + account menu), so it was the most visible remaining Bootstrap seam. - Render NotificationsController#index in the casa_app layout. - Restyle the index, NotificationComponent, and patch-notes partial onto the design system: card list, leading icon tiles, unread dot, and a cold-start empty state. Switch Font Awesome (fas fa-*) to Bootstrap Icons (bi-*), which is the icon set actually loaded on Tailwind pages. - Move the specs off Bootstrap-class selectors onto semantic data-* hooks (data-notification-list-item, data-read / data-unread-dot) without weakening behavior coverage. All notification/patch-note ordering, counts, and empty states remain asserted. Verified: component, view, request (renders the full casa_app layout), and system specs all pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… backlog - design.md: reframe as the permanent source of truth to refer to for all UI work. Add a "Design decisions (rationale)" log capturing the why behind the system (Tailwind-alongside-Bootstrap, layout opt-in, indigo/slate, Figtree, bi-* icons, icon-tile-vs-avatar, org-name-only sidebar, presentation-only honorific stripping, triage dashboards, empty-state taxonomy, a11y bar, build/output), a repeatable "Migrating a page" playbook, and a migration status that points at the backlog. - design-todo.md: new prioritized, phased backlog (the "what's left") for the page-by-page migration off Bootstrap, plus cross-cutting infra and known pre-existing debt. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Second app-shell leaf page (linked from the account menu). Rebuilds the whole edit-profile screen on the design system while preserving every behavior. - Render UsersController in the casa_app layout. - Rewrite edit.html.erb into cards: details, account, security, communication preferences, plus the volunteer languages table — using the documented input, button, and checkbox patterns. - Replace the Bootstrap collapse accordions (Change Password / Change Email) with a small `disclosure` Stimulus controller (real <button> trigger, toggles a hidden panel, syncs aria-expanded) instead of relying on Bootstrap JS. - Add a reusable Tailwind `shared/_form_errors` partial (the legacy `shared/_error_messages` stays for Bootstrap pages); it keeps the `@custom_error_header` hook so "... this password change ..." still renders. - Preserve all field labels, ids, and JS-hook classes (toggle-email/sms-notifications, save-preference, password-new/-confirmation, submit-password, current_password_email, toggle-sms-notification-event) so require_communication_preference.js and password_confirmation.js keep working. Verified: users request spec + the full edit system spec pass (79 examples); erb-lint, standardrb, and StandardJS clean; JS bundle builds. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…rofile done Add the two components introduced by the edit-profile migration (the Tailwind form-error summary and the disclosure/collapsible-panel pattern) to design.md, and tick edit profile in both the design.md status and design-todo.md. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…rd subtitle - Add a role badge (current_role as a brand-tinted pill) to the casa_app account menu header, under name + email — the one place identity metadata lives, and a parity with the role line the legacy header used to show. Industry-standard placement for a multi-role internal tool (keeps the sidebar/top-bar chrome clean). - Supervisor dashboard subtitle -> "Track volunteer progress at a glance." - Document the role badge in design.md. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The person-badge icon added no signal, so remove it. Colour the pill by role using the design system's non-semantic accent tints — Volunteer = sky (blue), Supervisor = violet (purple), Casa Admin = amber — so roles read apart at a glance; unknown roles fall back to slate. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…pt WCAG AA
- Drop the shouty `uppercase` transform from all design-system labels (account
details, dashboard + languages table headers, patch-note category, auth "or"
divider); render them sentence case. Sentence-case isolated copy ("My
languages", "Learning hours this year").
- Bump muted label text from slate-400 (fails AA) to slate-500/600 for contrast.
- Redesign the form-error summary (shared/_form_errors): a role="alert" card with
a leading icon and a tidy bulleted list instead of the plain block; keeps the
heading text + #error_explanation so specs and behavior are unchanged.
- design.md: add Sentence case + Accessibility (WCAG 2.1 AA) as standing
conventions, and fix the muted-text token. design-todo: track the app-wide
interactive-label sentence-case pass and a slate-400 contrast audit.
Interactive button/field labels shared across pages (Update Profile, Change
Password, field labels) are spec-coupled across users/volunteers/all-casa-admin
and a shared example, so they're deferred to a holistic pass (tracked).
Verified: 109 examples across the touched pages pass; erb-lint clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Per design feedback: one sentence, no bullets, dashboard-style icon tile. - shared/_form_errors now renders "Unable to save: <messages via to_sentence>" inside a rose danger icon tile (bg-rose-100 text-rose-600, bi-exclamation- triangle) matching the dashboard, dropping the old heading + bulleted list. - Update edit_spec assertions from the Rails "N errors prohibited this X from being saved:" text to "Unable to save". - design.md: refresh the Form errors component note. Verified: 79 users edit + request examples pass; erb-lint clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Volunteers with 2+ active cases now land on a triage dashboard instead of the Bootstrap cases index; the single-active-case fast-path to "log a contact" is unchanged. - VolunteerDashboard service + dashboard/volunteer.html.erb: KPIs (active cases, cases needing a contact in 14+ days, hours logged 30d), a "needs your attention" list, and a "your cases" table with status pills + "log a contact" CTAs. Per-case last-contact is batched into one query. - Shell parity: render org announcement banners in the casa_app shell (layouts/_casa_banner), and make the dismiss controller also add Tailwind's `hidden` class so the banner hides in both layouts. - Specs: volunteer dashboard now renders (not redirects) in the request spec; re-point the legacy sidebar-dropdown navigation in the case_contacts and other_duties system specs to visit paths directly, since those dropdowns aren't in the new shell. Verified: affected request + system specs pass in deterministic order; erb-lint, standardrb, StandardJS clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Admins now land on an org triage dashboard instead of redirecting to the supervisors page. - AdminDashboard service + dashboard/admin.html.erb: chapter KPIs (active volunteers, active cases, unassigned cases, cases needing a contact) and a "needs your attention" list of unassigned active cases each with an "assign a volunteer" CTA; a cold-start state for brand-new chapters. Queries are aggregate/batched (active cases + one grouped contact lookup + counts) to stay cheap at org scale — no per-case/per-volunteer queries. - dashboard request spec: admin renders the dashboard (not a redirect). Verified: dashboard request spec + the admin visit-root system specs (banners/new, casa_cases/new, court_dates/edit) pass; erb-lint + standardrb clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The last row butted against the card's rounded bottom corner (unlike the top, which the header border defines). Add pb-2 to the card so the final row clears the corner, keeping every row a uniform height rather than singling out the last one. Documented the table-in-card pattern in design.md. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…orners Same treatment as the dashboard tables. The notifications list has no header, so its first and last rows both butt against the card's rounded corners — add py-2 (both sides) so they clear. Generalized the table-in-card note in design.md. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…wind skin Phase 3 groundwork. Rather than reimplement the server-side DataTables (search, sort, paginate, filters, state save, column toggles), skin them: add a DataTables Tailwind layer to tailwind.css that restyles the generated chrome (search box, page-length select, info text, pagination) and the table shell. Because tailwind.css only loads on the casadesign shell, the skin can't touch the legacy Bootstrap tables. Documented the decision + a Data tables component note in design.md, and the per-page plan in design-todo: cases index first (ERB-rendered rows, most tractable); server-side tables additionally need the dashboard.js columns.render output moved from Bootstrap markup + lni icons to Tailwind + bi-*. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
First Phase 3 datatable page. The cases index (volunteer "My Cases" + admin / supervisor roster) now renders on the casa_app shell. - Rebuild the view + table in Tailwind; the DataTables skin styles the search/pagination chrome. Render in casa_app with @active_nav = "cases". - Replace the Bootstrap dropdown filters + column-picker modal with `dropdown` popovers (new Stimulus controller: toggle + close on outside-click/Escape), preserving every JS hook (.casa-case-filters, .status-options, #visibleColumns, .toggle-visibility, data-value/data-column) so dashboard.js filtering + column toggles keep working. The column picker stays outside .casa-case-filters so the filter-redraw handler doesn't bind to it. - Skin: pad the DataTables controls to line up with px-4 cells. - Action-button + column-header labels stay Title Case (spec-coupled across the new-case / case-group / bulk-court-date flows) — sentence-casing those belongs to the tracked interactive-label pass. Verified: casa_cases/index (filters + links), dashboard/show (volunteer + admin), casa_cases request spec, additional_index, casa_cases/new, case_groups all pass. bulk_court_dates/new is a pre-existing flake (fails on the clean branch too). erb-lint + StandardJS clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ataTables) Reverses the "theme jQuery DataTables" approach — theming couldn't match the dashboard tables or meet WCAG (its generated chrome fights the design system). The cases index is now a hand-built Tailwind table matching the dashboard, with server-side filtering + Pagy pagination. - Controller: server-side filters (status [default active], assignment, transition-aged, prefix) + Pagy; drop the client-side DataTables path. - View: bespoke table (readable headers, empty-state row, card + inset), a clear filter bar of selects that submit on change (new auto-submit Stimulus controller), and a reusable shared/_pagination partial (Pagy -> "Showing X-Y of Z" + page controls; WCAG nav/aria-current/rel). Consistent action buttons. - Remove the now-dead DataTables Tailwind skin and the dropdown controller (its popover filters are replaced by selects). - Rewrite the coupled specs (index + additional_index) for server-side filtering. - design.md / design-todo: reverse the decision; document bespoke tables + pagination as the pattern. Dropped for v1 (follow-ups): column-visibility picker, sortable headers. Action / header labels stay Title Case (spec-coupled). Verified: cases index / additional_index / request specs, dashboard/show, and the new-case + case-group nav flows all pass; erb-lint, standardrb, StandardJS clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ransition Review feedback on the cases index: - Filter selects: `appearance-none` + a positioned `bi-chevron-down` so the dropdown chevron has proper right padding (was the cramped native arrow). - Row action: the stranded far-right "Edit" text link is now a compact right-aligned pencil icon button (aria-labelled), matching the dashboard roster. - Transition Aged Youth: drop the whimsical 🦋/🐛 emoji (butterfly = aged, caterpillar = not) for a clean indicator — a violet "Yes" pill / muted "No". Scoped to the new UI; the shared decorator keeps the emoji on unmigrated legacy pages. Documented in design.md. - Blank hearing-type / judge cells show a muted em-dash instead of empty. Verified: cases index / additional_index / dashboard-show specs pass; erb-lint clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
An icon-only pencil wasn't clear enough. Restore a visible "Edit" label as a
compact bordered button; keep the per-row aria-label ("Edit <case number>") so
the accessible name stays unique and descriptive (WCAG 2.4.4 / 2.5.3).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The cases index carried "Hearing Type" and "Judge" columns, but migration 20230729213608 (2023) removed hearing_type_id/judge_id from casa_cases and moved that data onto court dates — so those two columns had rendered blank for every case since. Drop them and show a single, meaningful "Next court date" instead: - CasaCaseDecorator#formatted_next_court_date picks the earliest upcoming court date from the case's (preloaded) court_dates and formats it (:full); blanks render a muted em-dash. - Controller preloads :court_dates (dropping the dead :hearing_type/:judge eager-load) — instrumented the request to confirm a single court_dates query for the whole page (no N+1). - Sentence-cased the (now index-owned) column headers. - Decorator unit specs cover upcoming/none/past-only; additional_index_spec updated. design.md + design-todo.md: record the finding, add a stakeholder question (is next court date the right roster column, or the upcoming hearing's type/judge?), and flag the vestigial CasaCase#hearing_type/#judge associations for eventual removal (still referenced by supervisors/index + legacy pages). Verified: casa_cases index / additional_index / request + decorator specs (97 examples) pass; erb-lint clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The Edit action had been rebuilt as a *secondary* button (bordered white + shadow) — too much emphasis for a control that repeats on every row and competes with the brand-coloured case-number link. Make it tertiary/ghost: no border, fill, or shadow; neutral slate-600 ink (>= AA under visible text, unlike the slate-400 icon-only variant); leading pencil icon; subtle slate-100 hover wash. Give the trailing actions cell an extra end gutter (pr-6) so the control clears the card edge without skewing the button's own padding. Documented the Tertiary (ghost) variant in design.md. Verified: casa_cases index / additional_index specs pass; erb-lint clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Three peer buttons (one primary + two secondary) diluted the primary CTA and crowded the header. Keep "New Case" as the standalone primary and move the two lower-frequency, admin/supervisor-only actions — Case Groups and New Bulk Court Date — into a "More" overflow menu. The menu is a native <details>/<summary> disclosure (matching the header account menu), enhanced by a new `dropdown` Stimulus controller that closes it on outside-click and Escape (returning focus to the summary) and degrades to the native toggle without JS. Retrofit the account menu onto the same controller so the shell is consistent at the better behaviour. - dropdown_controller.js (new) + manifest registration - design.md: correct the stale Dropdown/popover note (there was no live dropdown controller) — document the native-<details> + controller pattern - bulk_court_dates/new_spec (:js): open the More menu before clicking the action Verified: casa_cases index / additional_index pass; the :js bulk-court-date flow passes (its intermittent failure is the pre-existing time-travel flake, not this change); erb-lint + standardjs clean.
…charts Replace the jQuery + Chart.js canvas charts on /health with bespoke, server-rendered SVG that meets the data-viz standards from this branch: - Every series carries a distinct line style (solid / dashed / dotted / dash-dot) and marker shape on top of a validated categorical palette, so it reads in grayscale, print, and full CVD, not by color alone. The legend keys the line style + marker, not a color swatch. - The bubble chart becomes an accessible heatmap table (day x hour, sequential single hue, the count in every cell). - Each line chart has a table-view twin (real table, scope headers), the SVGs carry role="img" + title/desc, and every value is reachable without color. - Stat tiles summarise the range with correct totals (sums for additive metrics, a distinct count for unique loggers, footnoted); sections fall back to an empty state when a metric has no data (a genuine zero shows 0, missing shows No data). - Sentence case, responsive, WCAG AA contrast. Mechanics: - HealthController#index computes the series / heatmap server-side; the spec-tested JSON data endpoints are untouched. - New HealthHelper renders the SVG / tiles / tables / empty states. - New minimal "metrics" layout loads Tailwind (the page is unauthenticated, so it cannot use the casa_app shell that needs current_user). - Retire app/javascript/src/display_app_metric.js and its two requires; nothing else used Chart.js. Verified: health request spec passes in defined order (8 examples); the random-order failure is the pre-existing CaseContact time-travel flake (design-todo Phase 0), not this change. standardrb + erb-lint clean. Follow-ups (design-todo): functional date-range filter, a Stimulus hover / crosshair layer, a validated dark-mode palette, and dropping the now-unused chart.js / chartjs-adapter-luxon from package.json.
Finish the metrics page: - Date-range filter: a preset row (last 3 / 6 / 12 months) above the charts, driven server-side by a ?range= param (clamped to the allowed set, default 12), so it stays no-JS and rescopes every section (charts, tiles, footer totals, heatmap). The active preset is marked aria-current. - Hover: a new chart-hover Stimulus controller draws a crosshair that snaps to the nearest month plus one tooltip listing every series at that point (value leads, name and colour key follow), with a highlight dot per line. Tooltip text is set with textContent and every value also lives in the table twin, so hover is enhancement, not the only path. Mechanics: - HealthController#index reads @range and passes it to the now-parameterised data methods. - HealthHelper#metric_line_chart wraps the SVG with the controller and a JSON config value; metric_range_filter renders the preset links. - A dedicated lightweight metrics.js entry loads Stimulus plus only the hover controller (no jQuery or Chart.js), added to the esbuild entryPoints; the metrics layout includes it. Verified: health request spec 10 examples in defined order (adds filter presets + range clamp); the Stimulus controller connects on the live page, injecting the crosshair and per-series dots. standardrb, erb-lint, and standardjs clean.
These were only used by the retired display_app_metric.js (the old Chart.js health charts, now bespoke server-rendered SVG). Nothing else imports them: esbuild rebuilds cleanly and the JS suite passes (197 tests). luxon was present only as the chartjs-adapter-luxon peer.
The account menu and the cases "More" menu are both native <details> enhanced by the dropdown controller, but opening one did not close the other, so they could be open at once and overlap. The outside-click handler only closed the other on a mouse click; opening a second menu by keyboard left both open. Close every other open dropdown when one opens, via the native toggle event, so exactly one is open regardless of how it was opened (mouse or keyboard). Verified with a real-browser system spec (open More, then the account menu, and the More menu closes); cases index specs pass (7 examples); standardjs clean.
Make the cases index sortable by clicking a column header. Server-side via ?sort= / ?direction= (default case number ascending, columns whitelisted), so it composes with the existing filters and Pagy and survives a reload. - Case number, Status (active), and Transition aged youth (birth date) sort on plain columns; Next court date and Assigned to use correlated subqueries (the earliest upcoming court date; the first active volunteer's name), NULLS LAST. - A reusable TableHelper#sortable_header renders each header as a link with aria-sort and a double-caret indicator whose active half is brand-coloured (up = ascending, down = descending), 4px from the label. Actions stay unsorted. - Secondary sort by case number keeps pagination stable. Verified: cases index / additional_index specs (10 examples, incl. clicking a header to reverse, ignoring a bogus param, and rendering every sortable column against Postgres); casa_cases request spec (74 examples); standardrb + erb-lint clean.
Add a search field to the filter bar: it matches the case number or an active assigned volunteer's name (case-insensitive substring), server-side via ?search=, composing with the selects, sort, and Pagy. Submits on Enter or blur (reusing the filter bar's auto-submit); a clear (x) link removes the term. - filter_casa_cases matches case_number ILIKE OR an EXISTS subquery over active case_assignments joined to users.display_name; the term is escaped with sanitize_sql_like and bound. - The field leads the filter bar (leading magnifier, native search-clear hidden so there is one clear control); a "Showing N cases matching ..." line appears when a term is active. Live as-you-type search is logged as a follow-up in design-todo. Verified: cases index / additional_index specs (11 examples, incl. matching by case number and by volunteer name); casa_cases request spec (74); standardrb + erb-lint clean.
Make the cases index work well on phones (verified at 400 / 768 / 1280 with a headless browser; the page never overflows the viewport): - Below md the table becomes stacked cards: case number as the title/link with the Edit action, then a two-column labelled grid (next court date, status, transition aged youth, assigned to). At md+ it stays the full sortable table. - The filter bar is a two-column grid on mobile: the search spans both columns (so it always equals two filters plus the gap, measured 453 vs 454) and the four selects sit 2-up filling the row; it reverts to the inline row at lg. - WCAG: the search placeholder moves slate-400 -> slate-500 (2.56:1 -> 4.76:1) and the leftover slate-400 table text (em-dash, "No") moves to slate-500. Every other text pair on the page already measured >= 4.5:1. design-todo: record the column-visibility picker as intentionally not planned (only six columns; a responsive layout is the better mobile investment) and add a per-page responsive pass. Verified: cases index / additional_index specs (11 examples); erb-lint clean.
Verified at 400 / 768 / 1280 (the page never overflows the viewport): - Stat tiles are a 2-up grid on mobile (200px each), inline row at sm+. - The heatmap keeps its contained horizontal scroll (a 24-hour by 7-day grid is inherently wide, and such 2D content is exempt from WCAG 1.4.10 reflow), but its day-label column is now sticky so the days stay visible while scrolling the hours. - The SVG charts already scaled fluidly and the filter and legend already wrapped. Verified: health request spec (10 examples, defined order); standardrb clean.
The KPI grids and lists already responded; the two roster / cases tables scrolled on phones. Give them the same mobile-card treatment as the cases index: below md the table becomes a stacked list inside the section card, at md+ the full table. - Supervisor roster: each volunteer becomes a card (avatar + name / email + view, then the status pill, case count, and recent activity). - Volunteer cases: each case becomes a card (case number + status pill, then last contact and the Log contact action). - Admin dashboard already had no table (KPI cards + a list), so it needed no change. Verified with a headless browser: both fit at 400 / 768 / 1280 with no page overflow; status pills and text all measure >= 4.5:1 (WCAG AA at every breakpoint). Dashboard specs pass (11 examples).
… auth) Responsive sweep of the remaining migrated pages (notifications, edit profile, and the casa_auth pages: sign-in, forgot/reset password, accept invitation) confirmed every one fits at true phone, tablet, and desktop widths (375/414/768/1024/1280). Measured with a CDP device-metrics override, which bypasses headless Chrome's 500px minimum-window clamp, so media queries evaluate at real phone width rather than a clamped 500px. The health heatmap keeps its horizontal scroll plus sticky day-of-week axis, the correct pattern for a density matrix (card-stacking would destroy the visualization). Contrast checks surfaced three AA failures on migrated text, now fixed: - notification and patch-note timestamps: slate-400 to slate-500 (2.56:1 to 4.76:1) - input placeholders on sign-in, forgot/reset password, accept invitation, and edit profile: slate-400 to slate-500 - auth aside footer fine print: white/60 to white/80 (4.63:1 over the gradient)
… docs design.md: document the responsive dual-layout table pattern (full table in `hidden md:block` plus a stacked-card list below `md`), the density- matrix exception (the health heatmap keeps horizontal scroll with a sticky axis rather than card-stacking), and a true-width verification step in the migration playbook (measure with a CDP device-metrics override, not `--window-size`, which headless Chrome clamps to ~500px). design-todo.md: mark the responsive pass complete across every migrated page, with the pages, widths, method, and the three contrast fixes.
Promotes the throwaway sweep script to a tracked, self-launching tool so the migration playbook's verification step is actually followable. It spawns headless Chrome, drives it over the DevTools Protocol with Emulation.setDeviceMetricsOverride (which forces the real viewport width, unlike `--window-size`, clamped to ~500px), and reports page fit plus the widest element whose rendered right edge overruns the viewport at each width. Point the design.md and design-todo.md references at it. Usage: bin/measure-responsive.mjs [w,w,...] <file.html> [file.html ...]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This is a work in progress. Will flag when it is ready to merge.