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

fix: resolve TS errors and Svelte 5 state_referenced_locally warnings

Browse Source 
- e_app_sign_in_out: type user_id/person_id as string|null (TS errors)
- archives/[archive_id]/+page.svelte: move if(browser) block to onMount
- ae_idaa_comp__archive_obj_id_edit: wrap timezone loader in onMount
- ae_idaa_comp__archive_content_obj_id_edit: wrap timezone loader in onMount
- bb/[post_id]/+page.svelte: move if(browser) block to onMount
- TODO: add completed entries, note remaining recovery_meetings warnings
This commit is contained in:
Scott Idem
2026-03-09 19:40:36 -04:00
parent 9b7832ee55
commit 206faf0c71
6 changed files with 99 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
documentation/TODO__Agents.md
View File

@@ -41,6 +41,8 @@ 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 Recently ## ✅ Completed Recently
- [x] **[Svelte]** **`state_referenced_locally` warning fixes (2026-03-09):** Resolved 10 Svelte 5 warnings where `$state`/`$props()` variables were read in top-level synchronous script code instead of inside a reactive closure. Fixed by moving `if (browser) { ... }` blocks and timezone-loading blocks into `onMount`. Files: `archives/[archive_id]/+page.svelte`, `archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte`, `archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte`, `bb/[post_id]/+page.svelte`. Note: 42 similar warnings remain in `recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte` and `..._v2.svelte` — same pattern, fix next session.
- [x] **[TypeScript]** **Sign In/Out TS errors fixed (2026-03-09):** `user_id` and `person_id` in `e_app_sign_in_out.svelte` were implicitly typed `null` from `$state(null)`, causing assignment errors. Explicitly typed as `string | null`.
- [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]** **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] **[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] **[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)

6
src/lib/app_components/e_app_sign_in_out.svelte
View File

@@ -43,7 +43,7 @@
let url_user_email = $state(untrack(() => data?.url?.searchParams?.get('user_email'))); let url_user_email = $state(untrack(() => data?.url?.searchParams?.get('user_email')));
$effect(() => { $effect(() => {
// NOTE: Sync URL params to state. // NOTE: Sync URL params to state.
// We use untrack to prevent infinite loops if navigation triggers within this effect. // We use untrack to prevent infinite loops if navigation triggers within this effect.
// WARNING: Ensure this doesn't clobber user-entered data during background URL updates. // WARNING: Ensure this doesn't clobber user-entered data during background URL updates.
untrack(() => { untrack(() => {
@@ -57,9 +57,9 @@
let ae_promises: key_val = {}; let ae_promises: key_val = {};
let trigger: null | boolean = $state(null); // Use $state to ensure reactivity let trigger: null | boolean = $state(null); // Use $state to ensure reactivity
let user_id = $state(null); // Use $state to ensure reactivity let user_id: string | null = $state(null); // Use $state to ensure reactivity
let user_obj: key_val = $state({}); // Use $state to ensure reactivity let user_obj: key_val = $state({}); // Use $state to ensure reactivity
let person_id = $state(null); // Use $state to ensure reactivity let person_id: string | null = $state(null); // Use $state to ensure reactivity
let person_obj: key_val = $state({}); // Use $state to ensure reactivity let person_obj: key_val = $state({}); // Use $state to ensure reactivity
$effect(() => { $effect(() => {

7
src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
View File

@@ -9,8 +9,7 @@
let log_lvl: number = 2; let log_lvl: number = 2;
// *** Import Svelte specific // *** Import Svelte specific
import { onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
// *** Import other supporting libraries // *** Import other supporting libraries
import { Modal } from 'flowbite-svelte'; import { Modal } from 'flowbite-svelte';
@@ -282,7 +281,7 @@
} }
}); });
if (browser) { onMount(() => {
console.log('Browser environment detected.'); console.log('Browser environment detected.');
// NOTE: Use data[data.account_id].slct.archive_id (from load / URL params), // NOTE: Use data[data.account_id].slct.archive_id (from load / URL params),
@@ -297,7 +296,7 @@
); );
window.parent.postMessage({ scroll_to: 0 }, '*'); // This should be in pixels window.parent.postMessage({ scroll_to: 0 }, '*'); // This should be in pixels
} }
} });
onDestroy(() => { onDestroy(() => {
log_lvl = 1; log_lvl = 1;

85
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
// *** Import Svelte core // *** Import Svelte core
import { onMount } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
// *** Import Aether core variables and functions // *** Import Aether core variables and functions
@@ -110,50 +111,52 @@
? JSON.parse(localStorage.getItem('lu_time_zone_list') as string) ? JSON.parse(localStorage.getItem('lu_time_zone_list') as string)
: [] : []
); );
$ae_loc.lu_time_zone_list = []; onMount(() => {
// $ae_loc.lu_time_zone_list = []; $ae_loc.lu_time_zone_list = [];
// lu_time_zone_list = []; // $ae_loc.lu_time_zone_list = [];
if (lu_time_zone_list && lu_time_zone_list.length > 0) { // lu_time_zone_list = [];
// console.log('Already have time zone list!', lu_time_zone_list); if (lu_time_zone_list && lu_time_zone_list.length > 0) {
} else { // console.log('Already have time zone list!', lu_time_zone_list);
console.log('No time zone list'); } else {
console.log('No time zone list');
let lu_time_zone_li_get_promise = core_func let lu_time_zone_li_get_promise = core_func
.load_ae_obj_li__time_zone({ .load_ae_obj_li__time_zone({
api_cfg: $ae_api, api_cfg: $ae_api,
only_priority: true, only_priority: true,
log_lvl: log_lvl log_lvl: log_lvl
}) })
.then(function (lu_time_zone_li_get_result) { .then(function (lu_time_zone_li_get_result) {
/* We need to save the time zone list to localStore */ /* We need to save the time zone list to localStore */
if (lu_time_zone_li_get_result) { if (lu_time_zone_li_get_result) {
lu_time_zone_list = lu_time_zone_li_get_result; lu_time_zone_list = lu_time_zone_li_get_result;
localStorage.setItem( localStorage.setItem(
'lu_time_zone_list', 'lu_time_zone_list',
JSON.stringify(lu_time_zone_li_get_result) JSON.stringify(lu_time_zone_li_get_result)
); );
if (log_lvl) { if (log_lvl) {
console.log(`Time zone list:`, lu_time_zone_list); console.log(`Time zone list:`, lu_time_zone_list);
}
} else {
console.log(`No time zones returned!`);
// $ae_loc.lu_time_zone_list = [];
} }
} else {
console.log(`No time zones returned!`);
// $ae_loc.lu_time_zone_list = [];
}
if (lu_time_zone_li_get_result) { if (lu_time_zone_li_get_result) {
lu_time_zone_list = lu_time_zone_li_get_result; lu_time_zone_list = lu_time_zone_li_get_result;
console.log(`Time zone list:`, lu_time_zone_list); console.log(`Time zone list:`, lu_time_zone_list);
console.log(lu_time_zone_list[0]); console.log(lu_time_zone_list[0]);
console.log(lu_time_zone_list[10]); console.log(lu_time_zone_list[10]);
} else { } else {
console.log(`No time zones returned!`); console.log(`No time zones returned!`);
lu_time_zone_list = []; lu_time_zone_list = [];
} }
}) })
.catch(function (error: any) { .catch(function (error: any) {
console.log('No results returned or failed.', error); console.log('No results returned or failed.', error);
}); });
} }
});
function prevent_default<T extends Event>(fn: (event: T) => void) { function prevent_default<T extends Event>(fn: (event: T) => void) {
return function (event: T) { return function (event: T) {

85
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
// *** Import Svelte core // *** Import Svelte core
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
// *** Import Aether core variables and functions // *** Import Aether core variables and functions
@@ -48,50 +49,52 @@
? JSON.parse(localStorage.getItem('lu_time_zone_list') as string) ? JSON.parse(localStorage.getItem('lu_time_zone_list') as string)
: [] : []
); );
$ae_loc.lu_time_zone_list = []; onMount(() => {
// $ae_loc.lu_time_zone_list = []; $ae_loc.lu_time_zone_list = [];
// lu_time_zone_list = []; // $ae_loc.lu_time_zone_list = [];
if (lu_time_zone_list && lu_time_zone_list.length > 0) { // lu_time_zone_list = [];
// console.log('Already have time zone list!', lu_time_zone_list); if (lu_time_zone_list && lu_time_zone_list.length > 0) {
} else { // console.log('Already have time zone list!', lu_time_zone_list);
console.log('No time zone list'); } else {
console.log('No time zone list');
let lu_time_zone_li_get_promise = core_func let lu_time_zone_li_get_promise = core_func
.load_ae_obj_li__time_zone({ .load_ae_obj_li__time_zone({
api_cfg: $ae_api, api_cfg: $ae_api,
only_priority: true, only_priority: true,
log_lvl: log_lvl log_lvl: log_lvl
}) })
.then(function (lu_time_zone_li_get_result) { .then(function (lu_time_zone_li_get_result) {
/* We need to save the time zone list to localStore */ /* We need to save the time zone list to localStore */
if (lu_time_zone_li_get_result) { if (lu_time_zone_li_get_result) {
lu_time_zone_list = lu_time_zone_li_get_result; lu_time_zone_list = lu_time_zone_li_get_result;
localStorage.setItem( localStorage.setItem(
'lu_time_zone_list', 'lu_time_zone_list',
JSON.stringify(lu_time_zone_li_get_result) JSON.stringify(lu_time_zone_li_get_result)
); );
if (log_lvl) { if (log_lvl) {
console.log(`Time zone list:`, lu_time_zone_list); console.log(`Time zone list:`, lu_time_zone_list);
}
} else {
console.log(`No time zones returned!`);
// $ae_loc.lu_time_zone_list = [];
} }
} else {
console.log(`No time zones returned!`);
// $ae_loc.lu_time_zone_list = [];
}
if (lu_time_zone_li_get_result) { if (lu_time_zone_li_get_result) {
lu_time_zone_list = lu_time_zone_li_get_result; lu_time_zone_list = lu_time_zone_li_get_result;
console.log(`Time zone list:`, lu_time_zone_list); console.log(`Time zone list:`, lu_time_zone_list);
console.log(lu_time_zone_list[0]); console.log(lu_time_zone_list[0]);
console.log(lu_time_zone_list[10]); console.log(lu_time_zone_list[10]);
} else { } else {
console.log(`No time zones returned!`); console.log(`No time zones returned!`);
lu_time_zone_list = []; lu_time_zone_list = [];
} }
}) })
.catch(function (error: any) { .catch(function (error: any) {
console.log('No results returned or failed.', error); console.log('No results returned or failed.', error);
}); });
} }
});
function prevent_default<T extends Event>(fn: (event: T) => void) { function prevent_default<T extends Event>(fn: (event: T) => void) {
return function (event: T) { return function (event: T) {

7
src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte
View File

@@ -9,8 +9,7 @@
let log_lvl: number = 0; let log_lvl: number = 0;
// *** Import Svelte specific // *** Import Svelte specific
import { onDestroy, untrack } from 'svelte'; import { onMount, onDestroy, untrack } from 'svelte';
import { browser } from '$app/environment';
// *** Import other supporting libraries // *** Import other supporting libraries
import { liveQuery } from 'dexie'; import { liveQuery } from 'dexie';
@@ -91,7 +90,7 @@
}); });
}); });
if (browser) { onMount(() => {
console.log('Browser environment detected.'); console.log('Browser environment detected.');
// NOTE: Use data[data.account_id].slct.post_id (from load / URL params), // NOTE: Use data[data.account_id].slct.post_id (from load / URL params),
@@ -104,7 +103,7 @@
console.log('In iframe, sending message to parent window to scroll to top as well'); console.log('In iframe, sending message to parent window to scroll to top as well');
window.parent.postMessage({ scroll_to: 0 }, '*'); // This should be in pixels window.parent.postMessage({ scroll_to: 0 }, '*'); // This should be in pixels
} }
} });
onDestroy(() => { onDestroy(() => {
log_lvl = 1; log_lvl = 1;