feat(idaa): replace filter checkboxes/radios with toggle pill chips + update docs
- ae_idaa_comp__event_obj_qry.svelte: replace Location checkboxes and Type radio inputs with styled pill-chip buttons. Location chips (Virtual / In-Person) are independent toggles; Type chips (All / IDAA / Caduceus / Family Recovery) are mutually exclusive — clicking the active chip deselects back to All. Chips fire the reactive search $effect directly via store updates; no explicit trigger needed. Remote First dev toggle preserved in edit mode, now inline with filter chips. - CLIENT__IDAA_and_customized_mods.md: update Recovery Meetings filter/sort docs, add My Meetings / favorites section, correct idaa_loc and idaa_sess store schemas, bump Last Verified date. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -160,97 +160,74 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filter chips: Location + Type -->
|
||||
<div
|
||||
class="border-surface-300-700 flex w-full max-w-xl flex-row flex-wrap items-center justify-start gap-2 border-b p-1">
|
||||
<span class="form-check-label d-inline-block text-xs">
|
||||
Location?
|
||||
</span>
|
||||
<!-- <div class="ae_row ae_flex_justify_around ae_width_md"> -->
|
||||
<label
|
||||
class="legend form-check-label d-inline-block inline w-auto flex-row items-center justify-center gap-1 text-sm font-semibold">
|
||||
<span> Virtual </span>
|
||||
<input
|
||||
name="qry_virtual"
|
||||
type="checkbox"
|
||||
bind:checked={$idaa_loc.recovery_meetings.qry__virtual}
|
||||
class="checkbox form-check-input d-inline-block inline" />
|
||||
</label>
|
||||
<label
|
||||
class="legend form-check-label d-inline-block inline w-auto flex-row items-center justify-center gap-1 text-sm font-semibold">
|
||||
In-person
|
||||
<input
|
||||
name="qry_physical"
|
||||
type="checkbox"
|
||||
bind:checked={$idaa_loc.recovery_meetings.qry__physical}
|
||||
class="checkbox form-check-input d-inline-block inline" />
|
||||
</label>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
class="border-surface-300-700 flex w-full max-w-xl flex-row flex-wrap items-center justify-start gap-x-4 gap-y-1 border-b p-1">
|
||||
|
||||
<div
|
||||
class="border-surface-300-700 flex w-full max-w-xl flex-row flex-wrap items-center justify-start gap-2 border-b p-1">
|
||||
<span class="form-check-label d-inline-block text-xs"> Type? </span>
|
||||
<!-- 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>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { $idaa_loc.recovery_meetings.qry__virtual = !$idaa_loc.recovery_meetings.qry__virtual; }}
|
||||
aria-pressed={$idaa_loc.recovery_meetings.qry__virtual}
|
||||
title="Show virtual / online meetings"
|
||||
class="novi_btn btn btn-sm transition-all
|
||||
{$idaa_loc.recovery_meetings.qry__virtual
|
||||
? 'preset-filled-tertiary-400-600'
|
||||
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
|
||||
<span class="fas fa-laptop mr-1"></span>Virtual
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { $idaa_loc.recovery_meetings.qry__physical = !$idaa_loc.recovery_meetings.qry__physical; }}
|
||||
aria-pressed={$idaa_loc.recovery_meetings.qry__physical}
|
||||
title="Show in-person / face-to-face meetings"
|
||||
class="novi_btn btn btn-sm transition-all
|
||||
{$idaa_loc.recovery_meetings.qry__physical
|
||||
? 'preset-filled-tertiary-400-600'
|
||||
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
|
||||
<span class="fas fa-home mr-1"></span>In-Person
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- <div class="ae_row ae_flex_justify_around ae_width_100"> -->
|
||||
<label
|
||||
class="legend form-check-label d-inline-block inline w-auto flex-row items-center justify-center gap-1 text-sm font-semibold">
|
||||
<span> All </span>
|
||||
<input
|
||||
name="qry_type"
|
||||
type="radio"
|
||||
value=""
|
||||
bind:group={$idaa_loc.recovery_meetings.qry__type}
|
||||
class="radio form-check-input d-inline-block inline"
|
||||
title="Show all meeting types" />
|
||||
</label>
|
||||
<label
|
||||
class="legend form-check-label d-inline-block inline w-auto flex-row items-center justify-center gap-1 text-sm font-semibold">
|
||||
IDAA
|
||||
<input
|
||||
name="qry_type"
|
||||
type="radio"
|
||||
value="IDAA"
|
||||
bind:group={$idaa_loc.recovery_meetings.qry__type}
|
||||
class="radio form-check-input d-inline-block inline"
|
||||
title="Open to IDAA members only" />
|
||||
</label>
|
||||
<label
|
||||
class="legend form-check-label d-inline-block inline w-auto flex-row items-center justify-center gap-1 text-sm font-semibold">
|
||||
Caduceus
|
||||
<input
|
||||
name="qry_type"
|
||||
type="radio"
|
||||
value="Caduceus"
|
||||
bind:group={$idaa_loc.recovery_meetings.qry__type}
|
||||
class="radio form-check-input d-inline-block inline"
|
||||
title="Open to all healthcare workers including those who do not qualify for IDAA" />
|
||||
</label>
|
||||
<label
|
||||
class="legend form-check-label d-inline-block inline w-auto flex-row items-center justify-center gap-1 text-sm font-semibold">
|
||||
Family Recovery
|
||||
<input
|
||||
name="qry_type"
|
||||
type="radio"
|
||||
value="Family Recovery"
|
||||
bind:group={$idaa_loc.recovery_meetings.qry__type}
|
||||
class="radio form-check-input d-inline-block inline"
|
||||
title="Open to spouses, parents, and children of medical professionals who have substance use disorder." />
|
||||
</label>
|
||||
|
||||
<span class="ml-auto"></span>
|
||||
<!-- 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>
|
||||
{#each [
|
||||
['', 'All', 'Show all meeting types'],
|
||||
['IDAA', 'IDAA', 'Open to IDAA members only'],
|
||||
['Caduceus', 'Caduceus', 'Open to all healthcare workers including those who do not qualify for IDAA'],
|
||||
['Family Recovery', 'Family Recovery', 'Open to spouses, parents, and children of medical professionals in recovery']
|
||||
] as [val, label, tip]}
|
||||
{@const active = val === '' ? !$idaa_loc.recovery_meetings.qry__type : $idaa_loc.recovery_meetings.qry__type === val}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$idaa_loc.recovery_meetings.qry__type =
|
||||
(val !== '' && $idaa_loc.recovery_meetings.qry__type === val) ? '' : val;
|
||||
}}
|
||||
aria-pressed={active}
|
||||
title={tip}
|
||||
class="novi_btn btn btn-sm transition-all
|
||||
{active
|
||||
? 'preset-filled-secondary-400-600'
|
||||
: 'preset-outlined-surface-300-700 opacity-60 hover:opacity-100'}">
|
||||
{label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if $ae_loc.edit_mode}
|
||||
<label
|
||||
class="legend form-check-label d-inline-block inline w-auto flex-row items-center justify-center gap-1 text-sm font-semibold"
|
||||
title="When enabled, search results are fetched directly from the server first. When disabled, local results are shown instantly while revalidating in the background.">
|
||||
<span class="text-xs"> Remote First? </span>
|
||||
class="flex flex-row items-center gap-1 text-xs opacity-60 cursor-pointer"
|
||||
title="When enabled, search results are fetched directly from the server first. Disable for instant local results with background revalidation.">
|
||||
<input
|
||||
name="qry_remote_first"
|
||||
type="checkbox"
|
||||
bind:checked={
|
||||
$idaa_loc.recovery_meetings.qry__remote_first
|
||||
}
|
||||
class="checkbox form-check-input d-inline-block inline" />
|
||||
bind:checked={$idaa_loc.recovery_meetings.qry__remote_first}
|
||||
class="checkbox form-check-input d-inline-block" />
|
||||
Remote First
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user