From e9527cdcd5e5eb6061d379023cd595b967c7c8d6 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 6 Mar 2026 22:00:12 -0500
Subject: [PATCH] Saving wrap up notes for the night.

---
 documentation/AE__UI_Component_Patterns.md | 30 ++++++++++++++++++++++
 documentation/TODO__Agents.md              | 15 +++++++++++
 2 files changed, 45 insertions(+)

diff --git a/documentation/AE__UI_Component_Patterns.md b/documentation/AE__UI_Component_Patterns.md
index 538f4deb..21aab3e0 100644
--- a/documentation/AE__UI_Component_Patterns.md
+++ b/documentation/AE__UI_Component_Patterns.md
@@ -382,3 +382,33 @@ Replace all `text-gray-*` patterns with opacity wrappers on inherited text color
 | Icon used as bullet point | `aria-hidden="true"` on icon |
 
 **Never use `<i>` tags.** Always `<span class="fas ...">`.
+
+---
+
+## 16. Native `<select>` Dark Mode
+
+Browser-native `<select>` and `<option>` elements **cannot be reliably styled** with Tailwind `dark:` utilities — the browser controls `<option>` rendering and ignores most CSS overrides. This causes the "light on light hover" bug in dark mode.
+
+**Fix — add `color-scheme` directive to force OS-level dark styling:**
+
+```svelte
+<script>
+    import { ae_loc } from '$lib/ae_core/ae_stores';
+</script>
+
+<!-- Forces browser to render the select widget in dark/light OS mode matching your theme -->
+<select
+    class="select text-xs p-1"
+    style:color-scheme={$ae_loc.dark_mode ? 'dark' : 'light'}
+>
+    {#each options as opt}
+        <option value={opt.value}>{opt.label}</option>
+    {/each}
+</select>
+```
+
+**Why this works:** `color-scheme: dark` instructs the browser to use its native dark-mode widget rendering (dark `<select>`, dark `<option>` backgrounds). It's the only cross-browser mechanism that affects `<option>` hover colors.
+
+**Alternative — replace with custom Skeleton/Flowbite component** if you need full styling control (e.g., color-coded options, icons). Native `<select>` is acceptable for simple purpose dropdowns with the `color-scheme` fix above.
+
+**Store reference:** `$ae_loc.dark_mode` — boolean, set by the theme engine in `ae_stores.ts`.
diff --git a/documentation/TODO__Agents.md b/documentation/TODO__Agents.md
index dc66ba83..1ce33635 100644
--- a/documentation/TODO__Agents.md
+++ b/documentation/TODO__Agents.md
@@ -9,6 +9,18 @@
 
 ## 🚧 Upcoming High Priority
 
+### [Launcher] Active bugs & features (identified 2026-03-06)
+
+- **Location select → session auto-load bug:** Starting from bare `/events/[id]/launcher` (no location in URL), selecting a location in the menu doesn't reliably trigger session loading. Root cause: double-load race — `onchange` in `menu_location_list.svelte` calls `handle_load_ae_obj_li__event_session()` directly AND then `goto()` which fires `[event_location_id]/+page.ts` which also calls `load_ae_obj_li__event_session()`. Also: `slct_event_location_id` prop is **not** `$bindable()` but template uses `bind:value={slct_event_location_id}` (compiler warning). Fix: remove the direct `await handle_load_ae_obj_li__event_session()` call from `onchange` and rely solely on the `goto()` → `+page.ts` flow. Validate that `menu_session_list.svelte` liveQuery correctly watches `$events_slct.event_location_id`.
+
+- **Font size cycler (Launcher sidebar):** Staff onsite may not have access to the system menu, so the launcher sidebar needs its own font size cycler. Add `font_size_step: number` to `$events_loc.launcher` store. Add a cycle button in `launcher_menu.svelte` alongside the "All Files"/"All Sessions" show/hide buttons. Three steps: compact (`text-xs`) → default (`text-sm`) → large (`text-base`). Apply the class to the launcher sidebar root container `<div>`.
+
+- **Session Search button visible on search page:** The "Session Search" menu button remains visible even when already on the session search page — should be hidden to avoid confusion. Find the render location (likely a launcher layout nav), add a `page.route.id` or `page.url.pathname` check to suppress it on the search page.
+
+### [UI] Dark mode fix (identified 2026-03-06)
+
+- **Dark mode select option hover (Manage Files):** In dark mode, the Event File Purpose `<select>` in the Manage Files area shows light-on-light text on hover (`<option>` elements use browser-native styling that ignores Tailwind dark mode). Browser-native `<option>` cannot be reliably styled cross-platform with CSS. Options: (1) use `color-scheme: dark` on the `<select>` element when in dark mode, or (2) replace with a custom Flowbite/Skeleton select. File to find: search for `event_file_purpose` in event file management components.
+
 ### [Badges] Remaining badge work before first live event
 - **QR code on badge front:** `ae_comp__badge_obj_view.svelte` — display QR on the printed
   face when template has `show_qr` (or equivalent) toggled on. Use same QR generation as
@@ -29,6 +41,9 @@ 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.)
 
 ## ✅ Completed Recently
+- [x] **[UI]** **Firefly Theme:** Created `AE_Firefly` dark/light theme. Primary=teal (~184°), Secondary=amber (~90°), Tertiary=indigo (~277°), Surface=moonlit slate. Files: `src/ae-firefly.css`, `src/app.css`, `src/lib/elements/e_app_theme.svelte`, `src/lib/ae_core/ae_stores.ts`. Set as app default in stores. (2026-03-06, branch `ae_app_3x_llm`)
+- [x] **[UI]** **Pres Mgmt Visual Redesign:** Full redesign of Events Presentation Management pages using Firefly theme tokens. Hero card layout, info chips (time=teal, room=indigo), skeleton loading states, dark-mode-safe colors throughout. 5 files: `session_view.svelte`, `ae_comp__event_session_obj_li.svelte`, `ae_comp__event_presentation_obj_li.svelte`, `pres_mgmt/+page.svelte`, `[session_id]/+page.svelte`. (2026-03-06, branch `ae_app_3x_llm`)
+- [x] **[Docs]** **UI Design System Docs:** Created two cheatsheet/reference docs: `documentation/GUIDE__AE_UI_Style_Guidelines.md` (design philosophy, color token rules, forbidden classes, Skeleton v3→v4 migration table, transitions, dark mode rules, a11y checklist) and `documentation/AE__UI_Component_Patterns.md` (hero cards, content cards, table rows, list item cards, info chips, empty state panels, warning/error banners, file upload zones, section wrappers, modals, muted text, QR code pattern). (2026-03-06)
 - [x] **[Badges]** **Badge Print Controls Panel:** New `ae_comp__badge_print_controls.svelte` — per-field accordion with inline edit forms, font size controls, access-level gating. Fixed-right-edge layout replaces collapsed `flex-1` panel. (2026-03-02, branch `ae_app_3x_llm`)
 - [x] **[Badges]** **badge_type_override coupling:** Selecting badge type from dropdown now saves both `badge_type_code_override` AND `badge_type_override` in `ae_comp__badge_obj_view.svelte`, `ae_comp__badge_review_form.svelte`, and `ae_comp__badge_print_controls.svelte`.
 - [x] **[Badges]** **Layout CSS system:** `data-layout` attribute, `@page` injection, `style_href` for per-template CSS files. Two templates: `badge_layout_epson_4x5_fanfold.css`, `badge_layout_zebra_zc10l_pvc.css`.