Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IDAA: inline Tailwind utilities — remove @apply style block (23 svelte-check warnings)

Browse Source 
ae_idaa_comp__event_obj_id_edit.svelte: the component <style> block used
@reference + @apply for ~10 local classes (.section-card, .field-label,
.toggle-chip, .day-chip, etc.). svelte-check's CSS language service does
not understand Tailwind v4 @reference/@apply directives and emitted 23
'Unknown at rule' warnings.

Fix: all local class usages inlined as Tailwind utility strings directly
on each element (~80 template sites). The <style> block is removed.
Conditional classes on toggle-chip/day-chip converted to ternary expressions.

svelte-check now reports 0 errors and 0 warnings across all files.
This commit is contained in:
Scott Idem
2026-03-16 13:52:26 -04:00
parent 1291b225c6
commit b44e77ad62
3 changed files with 130 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
documentation/TODO__Agents.md
View File

@@ -75,6 +75,7 @@ lead record look like in the DB?
- **Input Field Audit:** Several input fields are missing `name`/`id` attributes or `data-testid`. Known examples: badge override fields in `ae_comp__badge_obj_view.svelte`; template name input in `ae_comp__badge_template_form.svelte`. Matters for: accessibility, autofill, label associations, and test targeting. (For tests, use `getByLabel()` rather than `input[value*=...]` which only checks the HTML attribute, not the Svelte-bound DOM property.) - **Input Field Audit:** Several input fields are missing `name`/`id` attributes or `data-testid`. Known examples: badge override fields in `ae_comp__badge_obj_view.svelte`; template name input in `ae_comp__badge_template_form.svelte`. Matters for: accessibility, autofill, label associations, and test targeting. (For tests, use `getByLabel()` rather than `input[value*=...]` which only checks the HTML attribute, not the Svelte-bound DOM property.)
## ✅ Completed (2026-03) ## ✅ Completed (2026-03)
- [x] **[Launcher]** Hosted file download button `require_auth` prop — added `require_auth?: boolean` (default `true`) to `ae_comp__hosted_files_download_button.svelte`; all existing consumers unchanged. Launcher `launcher_file_cont.svelte` passes `require_auth={false}` so unauthenticated kiosk users can open/download files without being blocked. (2026-03-16)
- [x] **[Security]** `PUBLIC_AE_API_SECRET_KEY` audit complete. Key is `PUBLIC_*` by design (always in client bundle). Highest-risk anonymous path uses limited-permission `PUBLIC_AE_BOOTSTRAP_KEY`. Full server-side migration not justified given JWT + account_id auth layers. Current state acceptable. (2026-03-11) - [x] **[Security]** `PUBLIC_AE_API_SECRET_KEY` audit complete. Key is `PUBLIC_*` by design (always in client bundle). Highest-risk anonymous path uses limited-permission `PUBLIC_AE_BOOTSTRAP_KEY`. Full server-side migration not justified given JWT + account_id auth layers. Current state acceptable. (2026-03-11)
- [x] **[UX]** Session Expired banner — `ae_auth_error` store wired to API helpers; root layout sets `flag_expired` on 401/403; non-blocking dismissible banner rendered. (2026-03-12) - [x] **[UX]** Session Expired banner — `ae_auth_error` store wired to API helpers; root layout sets `flag_expired` on 401/403; non-blocking dismissible banner rendered. (2026-03-12)
- [x] **[UX]** Access Denied UI standardized — `element_access_denied.svelte` created; `/core` layout, `/events/settings`, and `/events/badges/review` updated to use it. (2026-03-12) - [x] **[UX]** Access Denied UI standardized — `element_access_denied.svelte` created; `/core` layout, `/events/settings`, and `/events/badges/review` updated to use it. (2026-03-12)

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "osit-aether-app-svelte", "name": "osit-aether-app-svelte",
"version": "3.00.03", "version": "3.00.04",
"description": "One Sky IT's Aether App created with Svelte, SvelteKit, Tailwind CSS, Lucide, Font Awesome, and Skeleton UI. -Scott Idem", "description": "One Sky IT's Aether App created with Svelte, SvelteKit, Tailwind CSS, Lucide, Font Awesome, and Skeleton UI. -Scott Idem",
"homepage": "https://oneskyit.com/", "homepage": "https://oneskyit.com/",
"private": true, "private": true,

331
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
View File

@@ -748,16 +748,16 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
SECTION 1 — Meeting Information SECTION 1 — Meeting Information
Fields: name, description, type Fields: name, description, type
============================================================ --> ============================================================ -->
<div class="section-card" id="section__general_information"> <div class="p-3 space-y-3 rounded-md bg-surface-100-900 border border-surface-200-800" id="section__general_information">
<h3 class="section-heading"> <h3 class="text-lg font-semibold text-surface-600-400 flex items-center gap-2 pb-1 border-b border-surface-200-800">
<span class="fas fa-info-circle"></span> <span class="fas fa-info-circle"></span>
Meeting Information Meeting Information
</h3> </h3>
<!-- Name --> <!-- Name -->
<label class="field-label" for="name"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="name">
Name of Recovery Meeting Name of Recovery Meeting
<span class="field-required">*</span> <span class="text-error-500 ml-0.5">*</span>
<input <input
type="text" type="text"
id="name" id="name"
@@ -767,12 +767,12 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.name ?? ''} value={$lq__event_obj?.name ?? ''}
placeholder="Name of Recovery Meeting" placeholder="Name of Recovery Meeting"
autocomplete="off" autocomplete="off"
class="field-input w-full" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-full"
/> />
</label> </label>
<!-- Description (rich text) --> <!-- Description (rich text) -->
<label class="field-label" for="description"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="description">
Short Description Short Description
<AE_Comp_Editor_TipTap <AE_Comp_Editor_TipTap
bind:content={description_new_html} bind:content={description_new_html}
@@ -783,13 +783,13 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
<!-- Type --> <!-- Type -->
<div class="space-y-1"> <div class="space-y-1">
<label class="field-label" for="type"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="type">
Type of Recovery Meeting Type of Recovery Meeting
<select <select
id="type" id="type"
name="type" name="type"
value={$lq__event_obj?.type} value={$lq__event_obj?.type}
class="field-select w-52" class="select p-1 preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
> >
<option value="IDAA">IDAA</option> <option value="IDAA">IDAA</option>
<option value="Caduceus">Caduceus</option> <option value="Caduceus">Caduceus</option>
@@ -811,20 +811,19 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
Virtual platform fields shown when virtual=true OR more__virtual_fields=true. Virtual platform fields shown when virtual=true OR more__virtual_fields=true.
attend_text is always shown (applies to both physical and virtual). attend_text is always shown (applies to both physical and virtual).
============================================================ --> ============================================================ -->
<div class="section-card" id="section__how_to_attend"> <div class="p-3 space-y-3 rounded-md bg-surface-100-900 border border-surface-200-800" id="section__how_to_attend">
<h3 class="section-heading"> <h3 class="text-lg font-semibold text-surface-600-400 flex items-center gap-2 pb-1 border-b border-surface-200-800">
<span class="fas fa-map-marker-alt"></span> <span class="fas fa-map-marker-alt"></span>
How to Attend How to Attend
</h3> </h3>
<!-- Physical / Virtual toggles --> <!-- Physical / Virtual toggles -->
<fieldset> <fieldset>
<legend class="field-label mb-1">Is this meeting in-person, virtual, or both?</legend> <legend class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300 mb-1">Is this meeting in-person, virtual, or both?</legend>
<div class="flex flex-row flex-wrap gap-2"> <div class="flex flex-row flex-wrap gap-2">
<label <label
for="physical" for="physical"
class="toggle-chip" class="flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer text-sm font-semibold preset-tonal-surface border border-surface-300-700 hover:preset-filled-surface-200-800 transition-all {$idaa_slct.event_obj.physical ? 'preset-filled-success-200-800 border-success-400' : ''}"
class:toggle-chip--on={$idaa_slct.event_obj.physical}
> >
<span class="fas fa-home"></span> <span class="fas fa-home"></span>
Face-to-Face / In Person Face-to-Face / In Person
@@ -838,8 +837,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
</label> </label>
<label <label
for="virtual" for="virtual"
class="toggle-chip" class="flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer text-sm font-semibold preset-tonal-surface border border-surface-300-700 hover:preset-filled-surface-200-800 transition-all {$idaa_slct.event_obj.virtual ? 'preset-filled-success-200-800 border-success-400' : ''}"
class:toggle-chip--on={$idaa_slct.event_obj.virtual}
> >
<span class="fas fa-laptop"></span> <span class="fas fa-laptop"></span>
Virtual / Online Virtual / Online
@@ -871,10 +869,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
{/if} {/if}
<div <div
class="subsection space-y-3" class="pl-3 border-l-2 border-surface-300-700 space-y-3"
class:hidden={!$idaa_slct.event_obj?.physical && !$idaa_slct.event_obj?.more__location_fields} class:hidden={!$idaa_slct.event_obj?.physical && !$idaa_slct.event_obj?.more__location_fields}
> >
<h4 class="subsection-heading"> <h4 class="text-sm font-semibold text-surface-600-400 flex items-center gap-1.5">
<span class="fas fa-home"></span> Physical Location <span class="fas fa-home"></span> Physical Location
</h4> </h4>
@@ -882,7 +880,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
<input type="hidden" name="address_location_id" value={$lq__event_obj?.address_location_id} /> <input type="hidden" name="address_location_id" value={$lq__event_obj?.address_location_id} />
<div class="flex flex-row flex-wrap gap-3"> <div class="flex flex-row flex-wrap gap-3">
<label class="field-label" for="address_name"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_name">
Location Name Location Name
<input <input
type="text" type="text"
@@ -893,11 +891,11 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.name value={$lq__event_obj?.location_address_json?.name
?? $lq__event_obj?.address_name ?? $lq__event_obj?.address_name
?? ''} ?? ''}
class="field-input w-72" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-72"
/> />
</label> </label>
<label class="field-label" for="address_line_1"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_line_1">
Address Line 1 Address Line 1
<input <input
type="text" type="text"
@@ -908,11 +906,11 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.line_1 value={$lq__event_obj?.location_address_json?.line_1
?? $lq__event_obj?.address_line_1 ?? $lq__event_obj?.address_line_1
?? ''} ?? ''}
class="field-input w-72" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-72"
/> />
</label> </label>
<label class="field-label" for="address_line_2"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_line_2">
Address Line 2 Address Line 2
<input <input
type="text" type="text"
@@ -923,11 +921,11 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.line_2 value={$lq__event_obj?.location_address_json?.line_2
?? $lq__event_obj?.address_line_2 ?? $lq__event_obj?.address_line_2
?? ''} ?? ''}
class="field-input w-72" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-72"
/> />
</label> </label>
<label class="field-label" for="address_line_3"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_line_3">
Address Line 3 Address Line 3
<input <input
type="text" type="text"
@@ -938,11 +936,11 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.line_3 value={$lq__event_obj?.location_address_json?.line_3
?? $lq__event_obj?.address_line_3 ?? $lq__event_obj?.address_line_3
?? ''} ?? ''}
class="field-input w-72" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-72"
/> />
</label> </label>
<label class="field-label" for="address_city"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_city">
City City
<input <input
type="text" type="text"
@@ -953,11 +951,11 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.city value={$lq__event_obj?.location_address_json?.city
?? $lq__event_obj?.address_city ?? $lq__event_obj?.address_city
?? ''} ?? ''}
class="field-input w-44" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-44"
/> />
</label> </label>
<label class="field-label" for="address_country_subdivision_code"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_country_subdivision_code">
State / Province State / Province
{#if lu_country_subdivision_list?.length} {#if lu_country_subdivision_list?.length}
<select <select
@@ -966,7 +964,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.country_subdivision_code value={$lq__event_obj?.location_address_json?.country_subdivision_code
?? $lq__event_obj?.address_country_subdivision_code ?? $lq__event_obj?.address_country_subdivision_code
?? ''} ?? ''}
class="field-select w-56" class="select p-1 preset-tonal-surface hover:preset-filled-surface-100-900 w-56"
> >
<option value="">-- None --</option> <option value="">-- None --</option>
{#each lu_country_subdivision_list as sub, i (i)} {#each lu_country_subdivision_list as sub, i (i)}
@@ -983,12 +981,12 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.country_subdivision_code value={$lq__event_obj?.location_address_json?.country_subdivision_code
?? $lq__event_obj?.address_country_subdivision_code ?? $lq__event_obj?.address_country_subdivision_code
?? ''} ?? ''}
class="field-input w-44" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-44"
/> />
{/if} {/if}
</label> </label>
<label class="field-label" for="address_postal_code"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_postal_code">
Postal / Zip Code Postal / Zip Code
<input <input
type="text" type="text"
@@ -999,11 +997,11 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.postal_code value={$lq__event_obj?.location_address_json?.postal_code
?? $lq__event_obj?.address_postal_code ?? $lq__event_obj?.address_postal_code
?? ''} ?? ''}
class="field-input w-36" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-36"
/> />
</label> </label>
<label class="field-label" for="address_country_alpha_2_code"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="address_country_alpha_2_code">
Country Country
{#if lu_country_list?.length} {#if lu_country_list?.length}
<select <select
@@ -1012,7 +1010,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.country_alpha_2_code value={$lq__event_obj?.location_address_json?.country_alpha_2_code
?? $lq__event_obj?.address_country_alpha_2_code ?? $lq__event_obj?.address_country_alpha_2_code
?? ''} ?? ''}
class="field-select w-64" class="select p-1 preset-tonal-surface hover:preset-filled-surface-100-900 w-64"
> >
<option value="">-- None --</option> <option value="">-- None --</option>
{#each lu_country_list as country (country.alpha_2_code)} {#each lu_country_list as country (country.alpha_2_code)}
@@ -1029,14 +1027,14 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
value={$lq__event_obj?.location_address_json?.country_alpha_2_code value={$lq__event_obj?.location_address_json?.country_alpha_2_code
?? $lq__event_obj?.address_country_alpha_2_code ?? $lq__event_obj?.address_country_alpha_2_code
?? ''} ?? ''}
class="field-input w-36" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-36"
/> />
{/if} {/if}
</label> </label>
</div> </div>
<!-- Additional location notes (rich text) --> <!-- Additional location notes (rich text) -->
<label class="field-label" for="location_text"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="location_text">
Additional Location Information Additional Location Information
<AE_Comp_Editor_TipTap <AE_Comp_Editor_TipTap
bind:content={location_text_new_html} bind:content={location_text_new_html}
@@ -1063,10 +1061,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
{/if} {/if}
<div <div
class="subsection space-y-3" class="pl-3 border-l-2 border-surface-300-700 space-y-3"
class:hidden={!$idaa_slct.event_obj.virtual && !$idaa_slct.event_obj?.more__virtual_fields} class:hidden={!$idaa_slct.event_obj.virtual && !$idaa_slct.event_obj?.more__virtual_fields}
> >
<h4 class="subsection-heading"> <h4 class="text-sm font-semibold text-surface-600-400 flex items-center gap-1.5">
<span class="fas fa-laptop"></span> Virtual / Online <span class="fas fa-laptop"></span> Virtual / Online
</h4> </h4>
@@ -1125,9 +1123,9 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
to {} afterward, leaving attend_json.zoom undefined. The bind:value bindings to {} afterward, leaving attend_json.zoom undefined. The bind:value bindings
below crash with a TypeError if zoom is undefined — the guard prevents that. --> below crash with a TypeError if zoom is undefined — the guard prevents that. -->
{#if $idaa_sess.recovery_meetings.attend_platform === 'Zoom' && $idaa_slct.event_obj.attend_json?.zoom} {#if $idaa_sess.recovery_meetings.attend_platform === 'Zoom' && $idaa_slct.event_obj.attend_json?.zoom}
<div class="platform-fields flex flex-row flex-wrap gap-3"> <div class="p-2 rounded bg-surface-50-950 border border-surface-200-800 flex flex-row flex-wrap gap-3">
<label class="field-label" for="attend_url_code"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_url_code">
Zoom Meeting ID <span class="field-required">*</span> Zoom Meeting ID <span class="text-error-500 ml-0.5">*</span>
<input <input
type="number" type="number"
id="attend_url_code" id="attend_url_code"
@@ -1142,10 +1140,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
$idaa_trig = 'update_zoom_full_url'; $idaa_trig = 'update_zoom_full_url';
} }
}} }}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
<label class="field-label" for="attend_url_passcode"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_url_passcode">
Zoom Passcode Zoom Passcode
<input <input
type="text" type="text"
@@ -1161,12 +1159,12 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
$idaa_slct.event_obj.attend_url_passcode = ''; $idaa_slct.event_obj.attend_url_passcode = '';
} }
}} }}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
<label class="field-label" for="attend_url_passcode_enc"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_url_passcode_enc">
Zoom Encrypted Passcode Zoom Encrypted Passcode
<span class="field-hint">Found in the Zoom invite URL after <code>?pwd=</code></span> <span class="block text-xs font-normal text-surface-500 -mt-0.5">Found in the Zoom invite URL after <code>?pwd=</code></span>
<input <input
type="text" type="text"
id="attend_url_passcode_enc" id="attend_url_passcode_enc"
@@ -1179,12 +1177,12 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
$idaa_trig = 'update_zoom_full_url'; $idaa_trig = 'update_zoom_full_url';
} }
}} }}
class="field-input w-72" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-72"
/> />
</label> </label>
<label class="field-label" for="attend_domain"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_domain">
Zoom Domain / Vanity URL Zoom Domain / Vanity URL
<span class="field-hint">Default: zoom.us — change only if using a custom domain</span> <span class="block text-xs font-normal text-surface-500 -mt-0.5">Default: zoom.us — change only if using a custom domain</span>
<input <input
type="text" type="text"
id="attend_domain" id="attend_domain"
@@ -1199,12 +1197,12 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
: 'zoom.us'; : 'zoom.us';
$idaa_trig = 'update_zoom_full_url'; $idaa_trig = 'update_zoom_full_url';
}} }}
class="field-input w-56" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-56"
/> />
</label> </label>
<label class="field-label w-full" for="zoom_attend_url"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300 w-full" for="zoom_attend_url">
Generated Zoom Meeting URL Generated Zoom Meeting URL
<span class="field-hint">Auto-generated from the fields above — do not edit directly</span> <span class="block text-xs font-normal text-surface-500 -mt-0.5">Auto-generated from the fields above — do not edit directly</span>
<input <input
type="url" type="url"
id="zoom_attend_url" id="zoom_attend_url"
@@ -1212,7 +1210,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="url" autocomplete="url"
readonly readonly
bind:value={$idaa_slct.event_obj.attend_json.zoom.full_url} bind:value={$idaa_slct.event_obj.attend_json.zoom.full_url}
class="field-input w-full font-mono text-sm" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-full font-mono text-sm"
placeholder="https://zoom.us/j/..." placeholder="https://zoom.us/j/..."
/> />
</label> </label>
@@ -1220,8 +1218,8 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
<!-- Jitsi fields --> <!-- Jitsi fields -->
{:else if $idaa_sess.recovery_meetings.attend_platform === 'Jitsi'} {:else if $idaa_sess.recovery_meetings.attend_platform === 'Jitsi'}
<div class="platform-fields flex flex-row flex-wrap gap-3"> <div class="p-2 rounded bg-surface-50-950 border border-surface-200-800 flex flex-row flex-wrap gap-3">
<label class="field-label" for="attend_url_code"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_url_code">
Jitsi Meeting Name / Code Jitsi Meeting Name / Code
<input <input
type="text" type="text"
@@ -1230,10 +1228,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="off" autocomplete="off"
placeholder="Meeting room name" placeholder="Meeting room name"
bind:value={$idaa_slct.event_obj.attend_json.jitsi.name} bind:value={$idaa_slct.event_obj.attend_json.jitsi.name}
class="field-input w-72" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-72"
/> />
</label> </label>
<label class="field-label" for="attend_url_passcode"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_url_passcode">
Jitsi Passcode Jitsi Passcode
<input <input
type="text" type="text"
@@ -1242,10 +1240,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="off" autocomplete="off"
placeholder="Optional passcode" placeholder="Optional passcode"
bind:value={$idaa_slct.event_obj.attend_json.jitsi.passcode} bind:value={$idaa_slct.event_obj.attend_json.jitsi.passcode}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
<label class="field-label w-full" for="attend_url"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300 w-full" for="attend_url">
Jitsi Meeting URL Jitsi Meeting URL
<input <input
type="url" type="url"
@@ -1254,15 +1252,15 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="url" autocomplete="url"
placeholder="https://meet.jit.si/..." placeholder="https://meet.jit.si/..."
bind:value={$idaa_slct.event_obj.attend_json.jitsi.full_url} bind:value={$idaa_slct.event_obj.attend_json.jitsi.full_url}
class="field-input w-full font-mono text-sm" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-full font-mono text-sm"
/> />
</label> </label>
</div> </div>
<!-- Other / Generic virtual platform fields --> <!-- Other / Generic virtual platform fields -->
{:else} {:else}
<div class="platform-fields flex flex-row flex-wrap gap-3"> <div class="p-2 rounded bg-surface-50-950 border border-surface-200-800 flex flex-row flex-wrap gap-3">
<label class="field-label w-full" for="attend_url"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300 w-full" for="attend_url">
Meeting URL Meeting URL
<input <input
type="url" type="url"
@@ -1271,10 +1269,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="url" autocomplete="url"
placeholder="URL to join the meeting" placeholder="URL to join the meeting"
value={$lq__event_obj?.attend_url ?? ''} value={$lq__event_obj?.attend_url ?? ''}
class="field-input w-full font-mono text-sm" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-full font-mono text-sm"
/> />
</label> </label>
<label class="field-label" for="attend_url_passcode"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_url_passcode">
URL Passcode URL Passcode
<input <input
type="text" type="text"
@@ -1283,10 +1281,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="off" autocomplete="off"
placeholder="Passcode to join at URL" placeholder="Passcode to join at URL"
value={$lq__event_obj?.attend_url_passcode ?? ''} value={$lq__event_obj?.attend_url_passcode ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
<label class="field-label" for="attend_phone"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_phone">
Dial-In Phone Number Dial-In Phone Number
<input <input
type="tel" type="tel"
@@ -1295,10 +1293,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="tel" autocomplete="tel"
placeholder="Phone number for dial-in" placeholder="Phone number for dial-in"
value={$lq__event_obj?.attend_phone ?? ''} value={$lq__event_obj?.attend_phone ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
<label class="field-label" for="attend_phone_passcode"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_phone_passcode">
Dial-In Passcode Dial-In Passcode
<input <input
type="text" type="text"
@@ -1307,7 +1305,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="off" autocomplete="off"
placeholder="Passcode for dial-in" placeholder="Passcode for dial-in"
value={$lq__event_obj?.attend_phone_passcode ?? ''} value={$lq__event_obj?.attend_phone_passcode ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
</div> </div>
@@ -1315,9 +1313,9 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
</div> </div>
<!-- ── Additional attendance notes (applies to any meeting type) ── --> <!-- ── Additional attendance notes (applies to any meeting type) ── -->
<label class="field-label" for="attend_text"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="attend_text">
Additional Attendance Information Additional Attendance Information
<span class="field-hint">Any extra instructions for joining — shown to all members regardless of meeting type</span> <span class="block text-xs font-normal text-surface-500 -mt-0.5">Any extra instructions for joining — shown to all members regardless of meeting type</span>
<AE_Comp_Editor_TipTap <AE_Comp_Editor_TipTap
bind:content={attend_text_new_html} bind:content={attend_text_new_html}
class_li="field-richtext" class_li="field-richtext"
@@ -1334,20 +1332,20 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
recurring_text is auto-generated with *gen* prefix if left blank. recurring_text is auto-generated with *gen* prefix if left blank.
Members only see custom recurring_text (no *gen*); admins see both. Members only see custom recurring_text (no *gen*); admins see both.
============================================================ --> ============================================================ -->
<div class="section-card" id="section__schedule"> <div class="p-3 space-y-3 rounded-md bg-surface-100-900 border border-surface-200-800" id="section__schedule">
<h3 class="section-heading"> <h3 class="text-lg font-semibold text-surface-600-400 flex items-center gap-2 pb-1 border-b border-surface-200-800">
<span class="fas fa-calendar-alt"></span> <span class="fas fa-calendar-alt"></span>
Schedule Schedule
</h3> </h3>
<!-- Recurring pattern --> <!-- Recurring pattern -->
<label class="field-label" for="recurring_pattern"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="recurring_pattern">
Repeats Repeats
<select <select
id="recurring_pattern" id="recurring_pattern"
name="recurring_pattern" name="recurring_pattern"
value={$lq__event_obj?.recurring_pattern} value={$lq__event_obj?.recurring_pattern}
class="field-select w-48" class="select p-1 preset-tonal-surface hover:preset-filled-surface-100-900 w-48"
> >
<option value="weekly">Weekly</option> <option value="weekly">Weekly</option>
<option value="every other week">Every Other Week</option> <option value="every other week">Every Other Week</option>
@@ -1359,7 +1357,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
<!-- Days of week — toggle chips so selected days are immediately visible, <!-- Days of week — toggle chips so selected days are immediately visible,
matching how they appear as inline text in the list and detail views --> matching how they appear as inline text in the list and detail views -->
<fieldset> <fieldset>
<legend class="field-label mb-1">Days of Week</legend> <legend class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300 mb-1">Days of Week</legend>
<div class="flex flex-row flex-wrap gap-2"> <div class="flex flex-row flex-wrap gap-2">
{#each [ {#each [
{ name: 'weekday_sunday', label: 'Sun' }, { name: 'weekday_sunday', label: 'Sun' },
@@ -1372,8 +1370,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
] as day (day.name)} ] as day (day.name)}
<label <label
for={day.name} for={day.name}
class="day-chip" class="flex items-center justify-center w-12 py-2 rounded-lg cursor-pointer text-sm font-semibold preset-tonal-surface border border-surface-300-700 hover:preset-filled-surface-200-800 transition-all {$idaa_slct.event_obj[day.name] ? 'preset-filled-primary-200-800 border-primary-400' : ''}"
class:day-chip--on={$idaa_slct.event_obj[day.name]}
> >
{day.label} {day.label}
<input <input
@@ -1391,15 +1388,15 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
<!-- Timezone + Start / End time — grouped together since they form a single <!-- Timezone + Start / End time — grouped together since they form a single
logical "when does this meeting happen" unit displayed together in the view --> logical "when does this meeting happen" unit displayed together in the view -->
<div class="flex flex-row flex-wrap gap-3 items-end"> <div class="flex flex-row flex-wrap gap-3 items-end">
<label class="field-label" for="timezone"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="timezone">
Timezone <span class="field-required">*</span> Timezone <span class="text-error-500 ml-0.5">*</span>
{#if $ae_loc?.lu_time_zone_list?.length} {#if $ae_loc?.lu_time_zone_list?.length}
<select <select
id="timezone" id="timezone"
name="timezone" name="timezone"
required required
value={$lq__event_obj?.timezone ?? $ae_loc?.current_timezone} value={$lq__event_obj?.timezone ?? $ae_loc?.current_timezone}
class="field-select w-56" class="select p-1 preset-tonal-surface hover:preset-filled-surface-100-900 w-56"
> >
<option value="" class:hidden={!$ae_loc.trusted_access}>-- None --</option> <option value="" class:hidden={!$ae_loc.trusted_access}>-- None --</option>
{#each $ae_loc.lu_time_zone_list as tz (tz.name)} {#each $ae_loc.lu_time_zone_list as tz (tz.name)}
@@ -1413,30 +1410,30 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
name="timezone" name="timezone"
required required
value={$lq__event_obj?.timezone ?? $ae_loc?.current_timezone ?? ''} value={$lq__event_obj?.timezone ?? $ae_loc?.current_timezone ?? ''}
class="field-input w-44" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-44"
/> />
{/if} {/if}
</label> </label>
<label class="field-label" for="recurring_start_time"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="recurring_start_time">
Start Time Start Time
<input <input
type="time" type="time"
id="recurring_start_time" id="recurring_start_time"
name="recurring_start_time" name="recurring_start_time"
value={$lq__event_obj?.recurring_start_time} value={$lq__event_obj?.recurring_start_time}
class="field-input w-36" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-36"
/> />
</label> </label>
<label class="field-label" for="recurring_end_time"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="recurring_end_time">
End Time End Time
<input <input
type="time" type="time"
id="recurring_end_time" id="recurring_end_time"
name="recurring_end_time" name="recurring_end_time"
value={$lq__event_obj?.recurring_end_time} value={$lq__event_obj?.recurring_end_time}
class="field-input w-36" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-36"
/> />
</label> </label>
</div> </div>
@@ -1448,10 +1445,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
The "Add More Details?" button promotes the auto-generated text to The "Add More Details?" button promotes the auto-generated text to
a custom editable value by stripping the *gen* prefix. --> a custom editable value by stripping the *gen* prefix. -->
{#if $ae_loc.administrator_access || ($lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))))} {#if $ae_loc.administrator_access || ($lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))))}
<div class="subsection space-y-2"> <div class="pl-3 border-l-2 border-surface-300-700 space-y-2">
<label class="field-label" for="recurring_text"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="recurring_text">
Additional Schedule Details Additional Schedule Details
<span class="field-hint">Optional — use only if the options above don't fully describe the schedule. This text is shown directly to members.</span> <span class="block text-xs font-normal text-surface-500 -mt-0.5">Optional — use only if the options above don't fully describe the schedule. This text is shown directly to members.</span>
<AE_Comp_Editor_TipTap <AE_Comp_Editor_TipTap
bind:content={recurring_text_new_html} bind:content={recurring_text_new_html}
class_li="field-richtext" class_li="field-richtext"
@@ -1500,8 +1497,8 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
Contact 1 name/email are locked by default for members to prevent accidental Contact 1 name/email are locked by default for members to prevent accidental
override of the meeting owner's identity. override of the meeting owner's identity.
============================================================ --> ============================================================ -->
<div class="section-card" id="section__contacts"> <div class="p-3 space-y-3 rounded-md bg-surface-100-900 border border-surface-200-800" id="section__contacts">
<h3 class="section-heading"> <h3 class="text-lg font-semibold text-surface-600-400 flex items-center gap-2 pb-1 border-b border-surface-200-800">
<span class="fas fa-address-book"></span> <span class="fas fa-address-book"></span>
Contacts Contacts
</h3> </h3>
@@ -1509,9 +1506,9 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
<!-- Meeting Owner (external_person_id = Novi UUID of owner) --> <!-- Meeting Owner (external_person_id = Novi UUID of owner) -->
<!-- Trusted+ can reassign ownership; members see it as read-only context. --> <!-- Trusted+ can reassign ownership; members see it as read-only context. -->
{#if $ae_loc.trusted_access} {#if $ae_loc.trusted_access}
<label class="field-label" for="external_person_id"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="external_person_id">
Meeting Owner — Novi UUID Meeting Owner — Novi UUID
<span class="field-hint">The Novi UUID of the IDAA member who owns this meeting. Determines who may edit it.</span> <span class="block text-xs font-normal text-surface-500 -mt-0.5">The Novi UUID of the IDAA member who owns this meeting. Determines who may edit it.</span>
<input <input
type="text" type="text"
id="external_person_id" id="external_person_id"
@@ -1519,14 +1516,14 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="off" autocomplete="off"
placeholder="Novi UUID" placeholder="Novi UUID"
value={$lq__event_obj?.external_person_id ?? $idaa_loc.novi_uuid ?? ''} value={$lq__event_obj?.external_person_id ?? $idaa_loc.novi_uuid ?? ''}
class="field-input w-72 font-mono text-sm" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-72 font-mono text-sm"
/> />
</label> </label>
{:else} {:else}
<!-- Hidden input passes the owner UUID through form submission unchanged --> <!-- Hidden input passes the owner UUID through form submission unchanged -->
<input type="hidden" name="external_person_id" value={$lq__event_obj?.external_person_id ?? $idaa_loc.novi_uuid ?? ''} /> <input type="hidden" name="external_person_id" value={$lq__event_obj?.external_person_id ?? $idaa_loc.novi_uuid ?? ''} />
<div class="space-y-1"> <div class="space-y-1">
<p class="field-label">Meeting Owner</p> <p class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300">Meeting Owner</p>
<div class="flex items-center gap-2 text-sm text-surface-600-400"> <div class="flex items-center gap-2 text-sm text-surface-600-400">
<span class="fas fa-lock text-xs"></span> <span class="fas fa-lock text-xs"></span>
{#if $lq__event_obj?.external_person_full_name} {#if $lq__event_obj?.external_person_full_name}
@@ -1547,9 +1544,9 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
locked readonly for members. This is intentional: the primary contact locked readonly for members. This is intentional: the primary contact
for a meeting is nearly always the owner. Members unlock via confirm for a meeting is nearly always the owner. Members unlock via confirm
if they truly need different contact details. --> if they truly need different contact details. -->
<div class="subsection space-y-3"> <div class="pl-3 border-l-2 border-surface-300-700 space-y-3">
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-2 flex-wrap">
<h4 class="subsection-heading"> <h4 class="text-sm font-semibold text-surface-600-400 flex items-center gap-1.5">
<span class="fas fa-user"></span> Contact 1 (Primary) <span class="fas fa-user"></span> Contact 1 (Primary)
</h4> </h4>
{#if !$ae_loc.trusted_access && contact_1_locked} {#if !$ae_loc.trusted_access && contact_1_locked}
@@ -1576,7 +1573,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
</div> </div>
<div class="flex flex-row flex-wrap gap-3"> <div class="flex flex-row flex-wrap gap-3">
<label class="field-label" for="contact_1_full_name"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_1_full_name">
Full Name Full Name
<input <input
type="text" type="text"
@@ -1586,11 +1583,11 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
placeholder="Full name" placeholder="Full name"
readonly={!$ae_loc.trusted_access && contact_1_locked} readonly={!$ae_loc.trusted_access && contact_1_locked}
value={$lq__event_obj?.contact_li_json?.[0]?.full_name ?? $idaa_loc.novi_full_name ?? ''} value={$lq__event_obj?.contact_li_json?.[0]?.full_name ?? $idaa_loc.novi_full_name ?? ''}
class="field-input w-64" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-64"
class:opacity-60={!$ae_loc.trusted_access && contact_1_locked} class:opacity-60={!$ae_loc.trusted_access && contact_1_locked}
/> />
</label> </label>
<label class="field-label" for="contact_1_email"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_1_email">
Email Email
<input <input
type="email" type="email"
@@ -1600,14 +1597,14 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
placeholder="Email address" placeholder="Email address"
readonly={!$ae_loc.trusted_access && contact_1_locked} readonly={!$ae_loc.trusted_access && contact_1_locked}
value={$lq__event_obj?.contact_li_json?.[0]?.email ?? $idaa_loc.novi_email ?? ''} value={$lq__event_obj?.contact_li_json?.[0]?.email ?? $idaa_loc.novi_email ?? ''}
class="field-input w-64" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-64"
class:opacity-60={!$ae_loc.trusted_access && contact_1_locked} class:opacity-60={!$ae_loc.trusted_access && contact_1_locked}
/> />
</label> </label>
</div> </div>
<div class="flex flex-row flex-wrap gap-3"> <div class="flex flex-row flex-wrap gap-3">
<label class="field-label" for="contact_1_phone_mobile"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_1_phone_mobile">
Mobile Phone Mobile Phone
<input <input
type="tel" type="tel"
@@ -1616,10 +1613,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="tel" autocomplete="tel"
placeholder="Mobile / Cell" placeholder="Mobile / Cell"
value={$lq__event_obj?.contact_li_json?.[0]?.phone_mobile ?? ''} value={$lq__event_obj?.contact_li_json?.[0]?.phone_mobile ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
<label class="field-label" for="contact_1_phone_home"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_1_phone_home">
Home Phone Home Phone
<input <input
type="tel" type="tel"
@@ -1628,10 +1625,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="tel" autocomplete="tel"
placeholder="Home phone" placeholder="Home phone"
value={$lq__event_obj?.contact_li_json?.[0]?.phone_home ?? ''} value={$lq__event_obj?.contact_li_json?.[0]?.phone_home ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
<label class="field-label" for="contact_1_phone_office"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_1_phone_office">
Office Phone Office Phone
<input <input
type="tel" type="tel"
@@ -1640,28 +1637,28 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="tel" autocomplete="tel"
placeholder="Office phone" placeholder="Office phone"
value={$lq__event_obj?.contact_li_json?.[0]?.phone_office ?? ''} value={$lq__event_obj?.contact_li_json?.[0]?.phone_office ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
</div> </div>
</div> </div>
<!-- ── Contact 2 (Optional secondary) ────────────────────── --> <!-- ── Contact 2 (Optional secondary) ────────────────────── -->
<div class="subsection space-y-3"> <div class="pl-3 border-l-2 border-surface-300-700 space-y-3">
<button <button
type="button" type="button"
class="flex flex-row items-center gap-2 text-left w-full" class="flex flex-row items-center gap-2 text-left w-full"
onclick={() => (show_contact_2 = !show_contact_2)} onclick={() => (show_contact_2 = !show_contact_2)}
> >
<span class="fas fa-{show_contact_2 ? 'caret-down' : 'caret-right'} text-xs opacity-60"></span> <span class="fas fa-{show_contact_2 ? 'caret-down' : 'caret-right'} text-xs opacity-60"></span>
<h4 class="subsection-heading mb-0!"> <h4 class="text-sm font-semibold text-surface-600-400 flex items-center gap-1.5 mb-0!">
<span class="fas fa-user-plus"></span> Contact 2 (Optional) <span class="fas fa-user-plus"></span> Contact 2 (Optional)
</h4> </h4>
</button> </button>
{#if show_contact_2} {#if show_contact_2}
<div class="flex flex-row flex-wrap gap-3"> <div class="flex flex-row flex-wrap gap-3">
<label class="field-label" for="contact_2_full_name"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_2_full_name">
Full Name Full Name
<input <input
type="text" type="text"
@@ -1670,10 +1667,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="name" autocomplete="name"
placeholder="Full name" placeholder="Full name"
value={$lq__event_obj?.contact_li_json?.[1]?.full_name ?? ''} value={$lq__event_obj?.contact_li_json?.[1]?.full_name ?? ''}
class="field-input w-64" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-64"
/> />
</label> </label>
<label class="field-label" for="contact_2_email"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_2_email">
Email Email
<input <input
type="email" type="email"
@@ -1682,13 +1679,13 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="email" autocomplete="email"
placeholder="Email address" placeholder="Email address"
value={$lq__event_obj?.contact_li_json?.[1]?.email ?? ''} value={$lq__event_obj?.contact_li_json?.[1]?.email ?? ''}
class="field-input w-64" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-64"
/> />
</label> </label>
</div> </div>
<div class="flex flex-row flex-wrap gap-3"> <div class="flex flex-row flex-wrap gap-3">
<label class="field-label" for="contact_2_phone_mobile"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_2_phone_mobile">
Mobile Phone Mobile Phone
<input <input
type="tel" type="tel"
@@ -1697,10 +1694,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="tel" autocomplete="tel"
placeholder="Mobile / Cell" placeholder="Mobile / Cell"
value={$lq__event_obj?.contact_li_json?.[1]?.phone_mobile ?? ''} value={$lq__event_obj?.contact_li_json?.[1]?.phone_mobile ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
<label class="field-label" for="contact_2_phone_home"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_2_phone_home">
Home Phone Home Phone
<input <input
type="tel" type="tel"
@@ -1709,10 +1706,10 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="tel" autocomplete="tel"
placeholder="Home phone" placeholder="Home phone"
value={$lq__event_obj?.contact_li_json?.[1]?.phone_home ?? ''} value={$lq__event_obj?.contact_li_json?.[1]?.phone_home ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
<label class="field-label" for="contact_2_phone_office"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="contact_2_phone_office">
Office Phone Office Phone
<input <input
type="tel" type="tel"
@@ -1721,7 +1718,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
autocomplete="tel" autocomplete="tel"
placeholder="Office phone" placeholder="Office phone"
value={$lq__event_obj?.contact_li_json?.[1]?.phone_office ?? ''} value={$lq__event_obj?.contact_li_json?.[1]?.phone_office ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
</div> </div>
@@ -1743,14 +1740,14 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
Fields: status, hide, priority, sort, group, enable, notes Fields: status, hide, priority, sort, group, enable, notes
============================================================ --> ============================================================ -->
{#if $ae_loc.trusted_access} {#if $ae_loc.trusted_access}
<div class="section-card section-card--admin" id="section__admin_options"> <div class="p-3 space-y-3 rounded-md bg-surface-100-900 border border-surface-200-800 border-error-400" id="section__admin_options">
<button <button
type="button" type="button"
class="flex flex-row items-center gap-2 text-left w-full" class="flex flex-row items-center gap-2 text-left w-full"
onclick={() => (show_admin_options = !show_admin_options)} onclick={() => (show_admin_options = !show_admin_options)}
> >
<span class="fas fa-{show_admin_options ? 'caret-down' : 'caret-right'} text-xs opacity-60"></span> <span class="fas fa-{show_admin_options ? 'caret-down' : 'caret-right'} text-xs opacity-60"></span>
<h3 class="section-heading mb-0!"> <h3 class="text-lg font-semibold text-surface-600-400 flex items-center gap-2 pb-1 border-b border-surface-200-800 mb-0!">
<span class="fas fa-cogs"></span> <span class="fas fa-cogs"></span>
Admin Options Admin Options
</h3> </h3>
@@ -1758,7 +1755,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
{#if show_admin_options} {#if show_admin_options}
<!-- Status --> <!-- Status -->
<label class="field-label" for="status"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="status">
Status Status
<input <input
type="text" type="text"
@@ -1766,7 +1763,7 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
name="status" name="status"
placeholder="e.g. active, pending, closed" placeholder="e.g. active, pending, closed"
value={$lq__event_obj?.status ?? ''} value={$lq__event_obj?.status ?? ''}
class="field-input w-52" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-52"
/> />
</label> </label>
@@ -1806,36 +1803,36 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
<!-- Sort + Group --> <!-- Sort + Group -->
<div class="flex flex-row flex-wrap gap-3"> <div class="flex flex-row flex-wrap gap-3">
<label class="field-label" for="sort"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="sort">
Sort Order Sort Order
<span class="field-hint">Lower numbers appear first</span> <span class="block text-xs font-normal text-surface-500 -mt-0.5">Lower numbers appear first</span>
<input <input
type="number" type="number"
id="sort" id="sort"
name="sort" name="sort"
placeholder="0" placeholder="0"
value={$lq__event_obj?.sort ?? ''} value={$lq__event_obj?.sort ?? ''}
class="field-input w-28" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-28"
/> />
</label> </label>
<label class="field-label" for="group"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="group">
Group Group
<span class="field-hint">Optional grouping label</span> <span class="block text-xs font-normal text-surface-500 -mt-0.5">Optional grouping label</span>
<input <input
type="text" type="text"
id="group" id="group"
name="group" name="group"
placeholder="e.g. North America" placeholder="e.g. North America"
value={$lq__event_obj?.group ?? ''} value={$lq__event_obj?.group ?? ''}
class="field-input w-48" class="input preset-tonal-surface hover:preset-filled-surface-100-900 w-48"
/> />
</label> </label>
</div> </div>
<!-- Notes — internal, not visible to members --> <!-- Notes — internal, not visible to members -->
<label class="field-label" for="notes"> <label class="flex flex-col gap-1 text-sm font-semibold text-surface-700-300" for="notes">
Admin Notes Admin Notes
<span class="field-hint">Internal only — not visible to members</span> <span class="block text-xs font-normal text-surface-500 -mt-0.5">Internal only — not visible to members</span>
<AE_Comp_Editor_TipTap <AE_Comp_Editor_TipTap
bind:content={notes_new_html} bind:content={notes_new_html}
class_li="field-richtext" class_li="field-richtext"
@@ -1939,76 +1936,4 @@ Copy and paste link: <a href="${link_base_url}?event_id=${event_do.event_id}">${
</form> </form>
</section> </section>
<style>
/* @reference tells Tailwind v4 where to resolve @apply utilities in component styles */
@reference "../../../../app.css";
.section-card {
@apply p-3 space-y-3 rounded-md;
@apply bg-surface-100-900 border border-surface-200-800;
}
.section-card--admin {
@apply border-error-400;
}
.section-heading {
@apply text-lg font-semibold text-surface-600-400 flex items-center gap-2 pb-1 border-b border-surface-200-800;
}
.field-label {
@apply flex flex-col gap-1 text-sm font-semibold text-surface-700-300;
}
.field-required {
@apply text-error-500 ml-0.5;
}
.field-input {
@apply input preset-tonal-surface hover:preset-filled-surface-100-900;
}
.field-select {
@apply select p-1 preset-tonal-surface hover:preset-filled-surface-100-900;
}
.field-hint {
@apply block text-xs font-normal text-surface-500 -mt-0.5;
}
.subsection {
@apply pl-3 border-l-2 border-surface-300-700;
}
.subsection-heading {
@apply text-sm font-semibold text-surface-600-400 flex items-center gap-1.5;
}
.platform-fields {
@apply p-2 rounded bg-surface-50-950 border border-surface-200-800;
}
/* Toggle chip — used for physical/virtual checkboxes */
.toggle-chip {
@apply flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer;
@apply text-sm font-semibold;
@apply preset-tonal-surface border border-surface-300-700;
@apply hover:preset-filled-surface-200-800 transition-all;
}
.toggle-chip--on {
@apply preset-filled-success-200-800 border-success-400;
}
/* Day-of-week chip — compact version of toggle-chip for the 7-day row */
.day-chip {
@apply flex items-center justify-center w-12 py-2 rounded-lg cursor-pointer;
@apply text-sm font-semibold;
@apply preset-tonal-surface border border-surface-300-700;
@apply hover:preset-filled-surface-200-800 transition-all;
}
.day-chip--on {
@apply preset-filled-primary-200-800 border-primary-400;
}
</style>