docs: update style review to reflect Phase 1 & 2 completion
Marked all non-frozen, non-IDAA style migration work as done: - FA→Lucide across events, pres_mgmt, core, badges, leads, hosted_files - variant-* → preset-* across all modules - badge code_to_icon refactor, FA CDN scoped to IDAA layout - global svg.lucide inline fix in app.css Phase 3 deferred: Launcher (post-April 2026) and IDAA (last priority). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -1,9 +1,9 @@
|
||||
# PROJECT: Aether App — Comprehensive Style Review
|
||||
|
||||
**Status:** In Progress
|
||||
**Status:** Phase 1 & 2 Complete — Phase 3 Deferred (post-April 2026 conference)
|
||||
**Priority:** Medium
|
||||
**Created:** 2026-03-13
|
||||
**Updated:** 2026-03-13
|
||||
**Updated:** 2026-03-16
|
||||
**Related:** `src/app.css`, `src/routes/+layout.svelte`, `documentation/AE__UI_Component_Patterns.md`
|
||||
|
||||
---
|
||||
@@ -269,11 +269,12 @@ Key standard patterns:
|
||||
|
||||
| Item | Status | Notes |
|
||||
|---|---|---|
|
||||
| Root layout banners (offline, expired) | 🟡 Needs work | Uses `bg-orange-600/90` — replace with `preset-tonal-warning` |
|
||||
| Root layout banners (offline, expired) | ✅ Done | `bg-orange-600/90` → `preset-tonal-warning` (2026-03-16) |
|
||||
| `e_app_sys_bar.svelte` | ✅ Modern | Best-practice reference component |
|
||||
| `e_app_theme.svelte` | 🟡 Legacy | Redundant with sys_bar theme section; keep but no new work |
|
||||
| `core/+layout.svelte` | ✅ Good | Uses `variant-soft-*` — migrate to `preset-*` eventually |
|
||||
| `core/+layout.svelte` | ✅ Done | `variant-*` → `preset-*` (2026-03-16) |
|
||||
| `core/+page.svelte` | ✅ Good | Excellent card grid template |
|
||||
| All `/core/` files (21 files) | ✅ Done | `variant-*` → `preset-*`, FA → Lucide (2026-03-16) |
|
||||
|
||||
### Journals
|
||||
|
||||
@@ -281,60 +282,62 @@ Key standard patterns:
|
||||
|---|---|---|
|
||||
| Overall | ✅ Canonical reference | Use as template for all new work |
|
||||
| `ae_comp__journal_obj_li.svelte` | ✅ Excellent | Card pattern, icon sizing, hover states |
|
||||
| `ae_comp__journal_entry_obj_li.svelte` | 🟡 Minor issues | `bg-slate-*` inconsistency (should be `gray-*`); hardcoded HSL eye icon colors |
|
||||
| `ae_comp__journal_entry_header.svelte` | 🔴 A11y issue | `focus:ring-0` on name input — restore focus ring |
|
||||
| `ae_comp__journal_entry_obj_li.svelte` | ✅ Done | `bg-slate-*` → `bg-gray-*`; hardcoded HSL → Tailwind tokens (2026-03-16) |
|
||||
| `ae_comp__journal_entry_header.svelte` | ✅ Done | `focus:ring-0` restored to `focus:ring-2` (2026-03-16) |
|
||||
|
||||
### Events — General
|
||||
|
||||
| Item | Status | Notes |
|
||||
|---|---|---|
|
||||
| `events/+page.svelte` | 🟡 Legacy | FontAwesome icons; `variant-ghost-surface` button |
|
||||
| `events/+layout.svelte` | 🟡 Legacy | FontAwesome spinners and arrows |
|
||||
| `events/ae_comp__events_menu_nav.svelte` | 🟡 Legacy | All icons are FontAwesome |
|
||||
| `events/[id]/+page.svelte` | 🟡 Mixed | Good card grid, but `variant-soft-warning` and hardcoded dark overrides |
|
||||
| `events/+page.svelte` | ✅ Done | FA → Lucide; `variant-ghost-surface` → `preset-outlined-surface` (2026-03-16) |
|
||||
| `events/+layout.svelte` | ✅ Done | FA → Lucide (spinners, arrows) (2026-03-16) |
|
||||
| `events/ae_comp__events_menu_nav.svelte` | ✅ Done | FA → Lucide (2026-03-16) |
|
||||
| `events/[id]/+page.svelte` | ✅ Done | FA → Lucide; `variant-*` → `preset-*` (2026-03-16) |
|
||||
| `events/ae_comp__event_file_obj_tbl.svelte` | ✅ Done | FA → Lucide (2026-03-16) |
|
||||
| `events/ae_comp__event_presentation_obj_li.svelte` | ✅ Done | FA → Lucide (2026-03-16) |
|
||||
| Lucide inline flow | ✅ Done | Global `svg.lucide { display: inline }` rule in `app.css` (2026-03-16) |
|
||||
|
||||
### Events — Pres Mgmt
|
||||
|
||||
| Item | Status | Notes |
|
||||
|---|---|---|
|
||||
| Overall | 🟡 Legacy | Predates the modern refactor |
|
||||
| `pres_mgmt/+page.svelte` | 🟡 Legacy | FontAwesome throughout; bare list, no card styling |
|
||||
| Session/presenter page menus | 🟡 Legacy | FontAwesome icons; `variant-*` buttons |
|
||||
| Session view | 🟡 Mixed | Some modern patterns mixed with legacy |
|
||||
| --- | --- | --- |
|
||||
| All 24 pres_mgmt files | ✅ Done | FA → Lucide; `variant-*` → `preset-*` (2026-03-16) |
|
||||
| Card styling for session/presenter lists | 🔒 Phase 3 | Deferred to post-April 2026 |
|
||||
|
||||
### Events — Launcher ⚠️ Live Production
|
||||
|
||||
| Item | Status | Notes |
|
||||
|---|---|---|
|
||||
| --- | --- | --- |
|
||||
| Overall | ⚠️ FREEZE | **April 2026 conference** — no style changes until post-event |
|
||||
| Icon/button migration | 🔒 Deferred | Schedule for Phase 3 after conference |
|
||||
| `launcher_session_view.svelte:329` | 🔒 Frozen | One `variant-soft-secondary` remains — do not touch |
|
||||
|
||||
### Events — Badges
|
||||
|
||||
| Item | Status | Notes |
|
||||
|---|---|---|
|
||||
| Overall | 🟡 Mixed | Functional, some `variant-*` patterns |
|
||||
| `badge_upload_form.svelte` | 🟡 Legacy | `variant-filled-tertiary/primary` buttons |
|
||||
| `badge_template_form.svelte` | 🟡 Legacy | `variant-filled-*` buttons |
|
||||
| --- | --- | --- |
|
||||
| FA → Lucide | ✅ Done | All badge files migrated (2026-03-16) |
|
||||
| `badge_upload_form.svelte` | ✅ Done | `variant-*` → `preset-*` (2026-03-16) |
|
||||
| `badge_template_form.svelte` | ✅ Done | `variant-*` → `preset-*` (2026-03-16) |
|
||||
| `code_to_html` | ✅ Refactored | FA HTML string dict → `code_to_icon` Lucide component map (2026-03-16) |
|
||||
|
||||
### Events — Leads
|
||||
|
||||
| Item | Status | Notes |
|
||||
|---|---|---|
|
||||
| Overall | 🟡 Legacy | Heavy `variant-*` usage throughout; otherwise functionally good |
|
||||
| `ae_comp__exhibit_signin.svelte` | 🟡 Mixed | `variant-filled-primary`, `variant-soft-error` |
|
||||
| `ae_comp__lead_qr_scanner.svelte` | 🟡 Legacy | All state cards use `variant-soft-*` |
|
||||
| `ae_tab__add.svelte` | 🟡 Legacy | `variant-filled-secondary`, `variant-ghost-surface` tab buttons |
|
||||
| --- | --- | --- |
|
||||
| FA → Lucide | ✅ Done | All leads files migrated (2026-03-16) |
|
||||
| `ae_comp__exhibit_signin.svelte` | ✅ Done | `variant-*` → `preset-*` (2026-03-16) |
|
||||
| `ae_comp__lead_qr_scanner.svelte` | ✅ Done | `variant-*` → `preset-*` (2026-03-16) |
|
||||
| `ae_tab__add.svelte` | ✅ Done | `variant-*` → `preset-*` (2026-03-16) |
|
||||
|
||||
### IDAA ⚠️ Privacy-Critical
|
||||
|
||||
| Item | Status | Notes |
|
||||
|---|---|---|
|
||||
| --- | --- | --- |
|
||||
| `(idaa)/+page.svelte` | ✅ Modern | Semantic tokens, good access gate |
|
||||
| Archives | 🟡 Partial | Likely legacy underneath; deferred |
|
||||
| BB (Posts) | 🟡 Partial | Deferred — most sensitive module |
|
||||
| Recovery Meetings | 🟡 Partial | Deferred |
|
||||
| **All IDAA** | ⚠️ Last priority | Review only after non-IDAA modules are complete |
|
||||
| FA CDN | ✅ Scoped | Moved from `app.html` → `idaa/+layout.svelte` `<svelte:head>` (2026-03-16) |
|
||||
| Archives, BB, Recovery Meetings | 🔒 Deferred | Full style review deferred to Phase 3 |
|
||||
| **All IDAA FA → Lucide** | 🔒 Last priority | Review only after non-IDAA modules are complete |
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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.)
|
||||
|
||||
## ✅ Completed (2026-03)
|
||||
- [x] **[UI]** Style Review Phase 1 & 2 complete — all non-frozen, non-IDAA routes migrated: FA→Lucide (events, pres_mgmt, core, badges, leads, hosted_files), `variant-*`→`preset-*` (all modules), `code_to_html` badge dict refactored to Lucide component map, FA CDN scoped to IDAA layout, global `svg.lucide { display: inline }` CSS rule added to fix icon inline flow. See `documentation/PROJECT__AE_Style_Review.md`. (2026-03-16)
|
||||
- [x] **[UI]** Pres Mgmt Phase 3 — FA→Lucide icon migration across all 24 pres_mgmt files. (2026-03-16)
|
||||
- [x] **[IDAA]** `ae_idaa_comp__event_obj_id_edit.svelte` — inlined Tailwind utilities, removed `<style>` block; eliminated all 23 `@apply`/`@reference` svelte-check warnings. (2026-03-16)
|
||||
- [x] **[Badges]** Badge print page svelte-check fix: extracted print CSS to `static/ae-print-badge.css`; fixed unclosed `<script>` tag in `print/+page.svelte`. (2026-03-16)
|
||||
|
||||
Reference in New Issue
Block a user