From ea413bbb9b0a9b8c59474cc63fde235ea89b4954 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Wed, 17 Jun 2026 17:27:39 -0400 Subject: [PATCH] style(core): enhance UI consistency, support dark mode, and reorder navigation - Refactored core layout and dashboard to follow AE Firefly guidelines - Added proper theme-aware backgrounds and transitioned to Skeleton v4 tokens - Grouped navigation and cards by functional color (Teal: Infra, Indigo: Identity, Amber: Config) - Reordered items to: Accounts, Sites, Users, People, Data Stores, Lookups, Addresses, Contacts - Fixed color inconsistency for Activity Logs in dashboard vs navigation - Enabled non-blocking modal mode for inline field editors in Data Stores table --- src/routes/core/+layout.svelte | 95 +++++++++++-------- src/routes/core/+page.svelte | 112 +++++++++++------------ src/routes/core/data_stores/+page.svelte | 2 + 3 files changed, 117 insertions(+), 92 deletions(-) diff --git a/src/routes/core/+layout.svelte b/src/routes/core/+layout.svelte index a19faf91..019dfc3e 100644 --- a/src/routes/core/+layout.svelte +++ b/src/routes/core/+layout.svelte @@ -39,43 +39,66 @@ onMount(() => {
+ class="ae_core bg-surface-50-950 text-surface-900-100 m-auto flex h-full max-h-full max-w-7xl flex-col gap-4 overflow-auto p-4 transition-colors duration-200"> {#if $ae_loc.manager_access} - +
+
+
+ +
+
+

Æ Core

+

+ System Management +

+
+
+ + +
{@render children?.()} diff --git a/src/routes/core/+page.svelte b/src/routes/core/+page.svelte index 5ddfbdec..71895e84 100644 --- a/src/routes/core/+page.svelte +++ b/src/routes/core/+page.svelte @@ -26,9 +26,9 @@ $effect(() => { }); -
+
+ class="bg-surface-100-900 border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-6 shadow-xl">
@@ -44,7 +44,7 @@ $effect(() => {
+ class="border-surface-500/10 min-w-50 rounded-xl border bg-surface-200-800 p-3">

Active Account @@ -59,7 +59,7 @@ $effect(() => { class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

+ class="card preset-tonal-primary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
{
+ class="card preset-tonal-secondary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
{
+ class="card preset-tonal-error group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
{
+ class="card preset-tonal-warning group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
{
+ +
+
+
+
+ +
+

Data Stores

+
+

+ Manage all content and configuration data stores across accounts. +

+
+ + Manage + +
+ + +
+
+
+
+ +
+

Lookups

+
+

+ View system lookup tables (countries, time zones, etc). +

+
+ + View + +
+
+ class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
{
+ class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
{
+ class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-colors duration-200 hover:brightness-110">
+ class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">

Activity Logs

@@ -208,54 +252,10 @@ $effect(() => {

View Logs
- - -
-
-
-
- -
-

Data Stores

-
-

- Manage all content and configuration data stores across accounts. -

-
- - Manage - -
- - -
-
-
-
- -
-

Lookups

-
-

- View system lookup tables (countries, time zones, etc). -

-
- - View - -
diff --git a/src/routes/core/data_stores/+page.svelte b/src/routes/core/data_stores/+page.svelte index f500cc8d..25e623d7 100644 --- a/src/routes/core/data_stores/+page.svelte +++ b/src/routes/core/data_stores/+page.svelte @@ -561,6 +561,7 @@ function content_preview(ds: ae_DataStore): string { current_value={ds.name ?? ''} placeholder="Display name" display_modal={true} + modal_blocking={false} on_success={() => do_search(false)} /> @@ -573,6 +574,7 @@ function content_preview(ds: ae_DataStore): string { field_type="select" select_options={ds_type_options} display_modal={true} + modal_blocking={false} on_success={() => do_search(false)}> {ds.type ?? '?'}