From 6cc595ee9c9693e7e8e4c242cbcf5cebcdc323d9 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Fri, 6 Mar 2026 21:24:16 -0500 Subject: [PATCH] Saving more notes. --- documentation/AE__UI_Component_Patterns.md | 384 ++++++++++++++++++ .../location/[event_location_id]/+page.svelte | 2 +- .../[event_location_id]/location_view.svelte | 4 +- .../(pres_mgmt)/pres_mgmt/+page.svelte | 6 +- .../presenter/[presenter_id]/+page.svelte | 8 +- ...ae_comp__event_presenter_form_agree.svelte | 4 +- .../ae_comp__event_presenter_obj_li.svelte | 13 +- ..._comp__event_session_poc_form_agree.svelte | 4 +- 8 files changed, 400 insertions(+), 25 deletions(-) create mode 100644 documentation/AE__UI_Component_Patterns.md diff --git a/documentation/AE__UI_Component_Patterns.md b/documentation/AE__UI_Component_Patterns.md new file mode 100644 index 00000000..538f4deb --- /dev/null +++ b/documentation/AE__UI_Component_Patterns.md @@ -0,0 +1,384 @@ +# Aether UI — Component Style Patterns +> **Version:** 1.0 (2026-03-06) +> **Author:** One Sky IT / Scott Idem +> **Scope:** All Aether SvelteKit frontend components +> **Related:** `GUIDE__AE_UI_Style_Guidelines.md` (color rules, token definitions, a11y) + +This document is a recipe book. Copy these patterns directly. Deviate only when a component's specific purpose genuinely requires it — and document why in a comment. + +--- + +## 1. Hero Card +*Used for: session identity, presenter identity, location identity — the top-of-page "Is this the right one?" card.* + +```svelte +
+
+ +

{name}

+ + +
+ + + + Mon, Jan 1 – 2:00 PM + + + + + Room 201 + +
+
+
+``` + +**Skeleton loading variant:** +```svelte + +
+
+``` + +--- + +## 2. Standard Content Card +*Used for: description text, notes, secondary info panels.* + +```svelte +
+ + Description +

{description}

+
+``` + +**Variant — inner secondary panel:** +```svelte +
+ +
+``` + +--- + +## 3. Table Row +*Used for: session search results tables, any `` list.* + +```svelte + + + + {obj.name} + + + +``` + +- `opacity-50` for hidden/archived records +- `preset-tonal-warning` for disabled (not enabled) records — amber background +- `transition-colors duration-200` on both `` and `` + +--- + +## 4. List Item Card +*Used for: presentation list items, session details lists, any vertical card stack.* + +```svelte + +``` + +**Rules:** +- Background goes on `
  • `, NOT on `
      ` +- `
        ` gets only spacing: `space-y-4` — never a background color +- The `
          ` container in components should have `overflow-x-auto`, not `overflow-x-scroll` + +--- + +## 5. Info Chips + +### Time / Date chip (Primary — Teal) +```svelte + + + Monday, March 6 – 2:00 PM + +``` + +### Location / Room chip (Tertiary — Indigo) +```svelte + + + Main Hall B + +``` + +### Code / Tag badge +```svelte + + {code} + +``` + +### Status badge (edit mode only) +```svelte +{#if $ae_loc.edit_mode} + code: {obj.code} +{/if} +``` + +### Success count badge +```svelte + + + {fileCount}× + +``` + +--- + +## 6. Empty State Panel +*Used for: "No results found", "No sessions match your search", "Nothing to show yet".* + +```svelte +
          +
          + + No sessions found +

          + Use the search bar above to find your session. +

          +
          + + +
          + Search by any of: +
            +
          • + + Session name +
            • +
          +
          +
          +``` + +--- + +## 7. Warning / Error Inline Banners +*Used for: disabled records, agreement-required gates.* + +```svelte + +
          +

          + + Location Disabled +

          +

          This location is currently disabled.

          +
          + + +
          +

          + + Presenter Disabled +

          +

          This presenter is currently disabled.

          +
          +``` + +--- + +## 8. File Upload Zone (`Comp_event_files_upload`) + +The `class_li` prop styles the outer upload drop zone container: + +```svelte + + {#snippet label()} + +
          + + Upload presenter files +
          +
          + Supported: pptx, key, mp4, pdf, docx, xlsx, txt +
          +           + {/snippet} +           +``` + +**Note:** The label sub-description text uses `opacity-60 italic` — never `text-gray-600 dark:text-gray-400`. + +--- + +## 9. Section Component Wrapper +*Used for: `ae_comp__event_*_obj_li.svelte` outer `
          ` elements.* + +```svelte +
          +``` + +**Rules:** +- `overflow-x-auto` — never `overflow-x-scroll` +- **Never include debug breakpoint borders** — remove before committing: + ``` + sm:border-l-red-400 md:border-l-yellow-400 lg:border-l-gray-100 + sm:dark:border-l-red-600 md:dark:border-l-yellow-600 lg:dark:border-l-gray-700 + border-dashed border-y-transparent border-r-transparent + ``` + +--- + +## 10. Agreement / Consent Form Layout +*Used for: `ae_comp__event_presenter_form_agree.svelte`, `ae_comp__event_session_poc_form_agree.svelte`.* + +```svelte + +
          + +
          + + +

          + {presenter_name} ({email}) + agrees to the following terms and conditions: +

          +``` + +--- + +## 11. Modal Usage (Flowbite-Svelte) + +```svelte + + + + {#snippet footer()} + + {/snippet} + + + + +``` + +**Rule:** Never set `bg-*` or `text-*` color classes on ``. Let the Flowbite component + active theme handle it. Only structural layout classes (`shadow-md`, `relative`, `flex`, etc.) belong on the `class` prop if needed. + +--- + +## 12. Muted / Secondary Text + +Replace all `text-gray-*` patterns with opacity wrappers on inherited text color: + +```svelte + +Secondary label +Hint or placeholder text +Section eyebrow + + +Secondary label +Hint text +``` + +--- + +## 13. QR Code (Async Toggle) + +```svelte + +{#if $lq__obj && typeof $store.qr_url?.[$lq__obj.id] === 'string'} +
          + +
          +{/if} +``` + +--- + +## 14. POC / Host Button Pattern + +```svelte +
          + Host: + +
          +``` + +--- + +## 15. Icon Usage Rules + +| Context | Pattern | +|---|---| +| Decorative / visual only | `` | +| Icon with visible adjacent text | `aria-hidden="true"` on icon, text provides meaning | +| Icon-only button (no visible text) | `aria-label="Description"` on the ` 
          {$lq__event_location_obj.description}
          {:else} diff --git a/src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/+page.svelte b/src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/+page.svelte index 649fe7d2..262157ea 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/+page.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/+page.svelte @@ -591,20 +591,20 @@ {#snippet label()}
          - + Upload global event files only!
          Global event files only
          Recommended: PowerPoint (pptx) or Keynote (key)
          {#snippet label()}
          - + Upload presenter (speaker) specific files
          Presentation related files only diff --git a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte index b47a77e0..aed93870 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte @@ -176,7 +176,7 @@
          {/if} -
          +
          -

          +

          {$lq__event_presenter_obj.full_name} ({$lq__event_presenter_obj.email}) diff --git a/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_li.svelte b/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_li.svelte index 2776e63f..f60e626d 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_li.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_li.svelte @@ -85,16 +85,7 @@

          -
            +
              {#each $lq__event_presenter_obj_li ?? [] as event_presenter_obj (event_presenter_obj.event_presenter_id)} diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte index a9d4fada..38b16ccf 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte @@ -155,7 +155,7 @@

          {/if} -
          +
          -

          +

          {$lq__event_session_obj.poc_person_full_name} ({$lq__event_session_obj.poc_person_primary_email}) agrees to the following terms and conditions for the presentation: