From 6857f1226ccb4310cf1b6f3f3ba2083c2d0699ff Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 18 May 2026 17:18:59 -0400
Subject: [PATCH] =?UTF-8?q?refactor(idaa):=20compact=20filter=20bar=20?=
 =?UTF-8?q?=E2=80=94=20sr-only=20labels,=20+/-=20stepper=20for=20max=20res?=
 =?UTF-8?q?ults?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Group labels (Location, Type, Sort, Max) moved to sr-only — visually hidden,
  accessible to screen readers. Chips are self-descriptive without them.
- Max results chips replaced with a [−] 150 [+] stepper that steps through
  predefined values [25, 50, 100, 150] (+ 200/500 for trusted_access). Minus/plus
  buttons disable at the ends of the list. limit_steps and limit_idx computed as
  $derived in script so onclick closures have access without @const gymnastics.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ae_idaa_comp__event_obj_qry.svelte        | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
index d8ae3ec7..71ba2ee3 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
@@ -37,6 +37,14 @@ import Help_tech from '$lib/app_components/e_app_help_tech.svelte';
 
 let ae_promises: key_val = $state({});
 
+// Predefined limit steps for the +/- stepper. Trusted staff get larger options
+// since they often query with disabled/hidden meetings included.
+let limit_steps = $derived($ae_loc.trusted_access ? [25, 50, 100, 150, 200, 500] : [25, 50, 100, 150]);
+let limit_idx = $derived.by(() => {
+    const idx = limit_steps.indexOf($idaa_loc.recovery_meetings.qry__limit);
+    return idx >= 0 ? idx : limit_steps.length - 1;
+});
+
 // *** Functions and Logic
 /**
  * Reactive Search Trigger
@@ -184,7 +192,7 @@ function set_sort_mode(mode: string) {
 
             <!-- Location: independent toggles (a meeting can be both virtual and in-person) -->
             <div class="flex flex-row flex-wrap items-center gap-1">
-                <span class="text-xs opacity-50">Location:</span>
+                <span class="sr-only">Location:</span>
                 <button
                     type="button"
                     onclick={() => { $idaa_loc.recovery_meetings.qry__virtual = !$idaa_loc.recovery_meetings.qry__virtual; }}
@@ -211,7 +219,7 @@ function set_sort_mode(mode: string) {
 
             <!-- Type: mutually exclusive; clicking the active chip deselects (goes back to All) -->
             <div class="flex flex-row flex-wrap items-center gap-1">
-                <span class="text-xs opacity-50">Type:</span>
+                <span class="sr-only">Type:</span>
                 {#each [
                     ['', 'All', 'Show all meeting types'],
                     ['IDAA', 'IDAA', 'Open to IDAA members only'],
@@ -253,12 +261,12 @@ function set_sort_mode(mode: string) {
 
     <div
         class="ae_group ae_row flex w-full max-w-full flex-row flex-wrap items-center justify-center gap-2 p-1">
-        <!-- Sort + Limit chips -->
+        <!-- Sort chips + Max results stepper -->
         <span class="flex flex-row flex-wrap items-center justify-center gap-x-4 gap-y-1">
 
             <!-- Sort: mutually exclusive chips -->
             <div class="flex flex-row flex-wrap items-center gap-1">
-                <span class="text-xs opacity-50">Sort:</span>
+                <span class="sr-only">Sort:</span>
                 {#each [
                     ['updated_on', 'Last Updated', 'fa-clock'],
                     ['name_asc',   'Name A–Z',     'fa-sort-alpha-down'],
@@ -279,39 +287,32 @@ function set_sort_mode(mode: string) {
                 {/each}
             </div>
 
-            <!-- Limit: mutually exclusive chips; 200/500 for trusted staff only -->
-            <div class="flex flex-row flex-wrap items-center gap-1">
-                <span class="text-xs opacity-50">Max:</span>
-                {#each [25, 50, 100, 150] as n}
-                    {@const active = $idaa_loc.recovery_meetings.qry__limit === n}
-                    <button
-                        type="button"
-                        onclick={() => { $idaa_loc.recovery_meetings.qry__limit = n; }}
-                        aria-pressed={active}
-                        title="Show up to {n} results"
-                        class="novi_btn btn btn-sm transition-all
-                            {active
-                                ? 'preset-filled-tertiary-400-600'
-                                : 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
-                        {n}
-                    </button>
-                {/each}
-                {#if $ae_loc.trusted_access}
-                    {#each [200, 500] as n}
-                        {@const active = $idaa_loc.recovery_meetings.qry__limit === n}
-                        <button
-                            type="button"
-                            onclick={() => { $idaa_loc.recovery_meetings.qry__limit = n; }}
-                            aria-pressed={active}
-                            title="Show up to {n} results"
-                            class="novi_btn btn btn-sm transition-all
-                                {active
-                                    ? 'preset-filled-tertiary-400-600'
-                                    : 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
-                            {n}
-                        </button>
-                    {/each}
-                {/if}
+            <!-- Max results: +/- stepper through predefined steps -->
+            <div class="flex flex-row items-center gap-1">
+                <span class="sr-only">Max results:</span>
+                <button
+                    type="button"
+                    onclick={() => { if (limit_idx > 0) $idaa_loc.recovery_meetings.qry__limit = limit_steps[limit_idx - 1]; }}
+                    disabled={limit_idx <= 0}
+                    title="Show fewer results"
+                    class="novi_btn btn btn-sm preset-outlined-surface-300-700 transition-all
+                        {limit_idx <= 0 ? 'opacity-30 cursor-not-allowed' : 'opacity-60 hover:opacity-100'}">
+                    <span class="fas fa-minus"></span>
+                </button>
+                <span
+                    class="min-w-10 text-center text-sm font-semibold tabular-nums"
+                    title="Max results shown">
+                    {$idaa_loc.recovery_meetings.qry__limit}
+                </span>
+                <button
+                    type="button"
+                    onclick={() => { if (limit_idx < limit_steps.length - 1) $idaa_loc.recovery_meetings.qry__limit = limit_steps[limit_idx + 1]; }}
+                    disabled={limit_idx >= limit_steps.length - 1}
+                    title="Show more results"
+                    class="novi_btn btn btn-sm preset-outlined-surface-300-700 transition-all
+                        {limit_idx >= limit_steps.length - 1 ? 'opacity-30 cursor-not-allowed' : 'opacity-60 hover:opacity-100'}">
+                    <span class="fas fa-plus"></span>
+                </button>
             </div>
 
         </span>