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

feat(journals): redesign list + entry views with glow, dark mode, compact mobile-first layout

Browse Source 
- ae_comp__journal_obj_li: compact tap-target rows, glow wrapper, plain gray dark mode (no Skeleton paired utils)
- +page.svelte (journals index): fix 'Managed by Account Name Not Set' bug, responsive spacing, glow on quick-add
- ae_comp__journal_obj_id_view: glow wrapper, explicit bg-white/dark:bg-gray-900, remove broken dynamic color class
- ae_comp__journal_entry_obj_li: glow wrapper, left-accent border on cards, fix dark mode hover
- ae_comp__journal_entry_obj_id_view: glow wrapper, consistent gray dark mode, edit-mode ring indicator
- ae_comp__journal_entry_header: replace Skeleton surface vars with plain grays (dark mode fix)
- e_app_theme: fix theme selector panel readability in dark mode
This commit is contained in:
Scott Idem
2026-03-13 19:48:23 -04:00
parent ea87befc0d
commit 9b8bc7cb73
7 changed files with 185 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/app_components/e_app_theme.svelte
View File

@@ -36,15 +36,17 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
ae_app_theme ae_app_theme
hidden-print hidden-print
bg-blue-100 text-gray-900 bg-surface-100 dark:bg-surface-800
dark:bg-blue-800 dark:text-gray-200 text-surface-900 dark:text-surface-100
border border-surface-200 dark:border-surface-700
flex flex-col flex-wrap gap-1 flex flex-col flex-wrap gap-1
items-end justify-center items-end justify-center
w-72 max-w-72 w-72 max-w-72
p-1 p-1
border-2 border-gray-200 rounded-lg
shadow-md
duration-300 delay-150 hover:delay-1000 hover:ease-out duration-300 delay-150 hover:delay-1000 hover:ease-out
transition-all transition-all

27
src/routes/journals/+page.svelte
View File

@@ -99,35 +99,32 @@
</script> </script>
<div <div
class="page_container flex flex-col gap-8 items-center w-full min-h-screen p-4 md:p-8" class="page_container flex flex-col gap-4 sm:gap-6 md:gap-8 items-center w-full min-h-screen p-3 sm:p-4 md:p-8"
> >
<!-- Header Section --> <!-- Header Section -->
<header class="text-center space-y-2 max-w-3xl"> <header class="text-center space-y-2 max-w-3xl">
<h1 <h1
class="text-4xl md:text-5xl font-black tracking-tight text-surface-900 dark:text-surface-100" class="text-3xl sm:text-4xl md:text-5xl font-black tracking-tight text-surface-900 dark:text-surface-100"
> >
<!-- <div class="p-3 bg-surface-500/10 rounded-2xl"> -->
<SquareLibrary size="1em" class="text-primary-500 inline-block" /> <SquareLibrary size="1em" class="text-primary-500 inline-block" />
<!-- </div> -->
Journals Journals
</h1> </h1>
<p class="text-surface-600 dark:text-surface-400 font-medium"> <!-- Show the person's name as context; skip account name (often shows placeholder) -->
Managed by <span class="text-primary-500" {#if $ae_loc.person.given_name || $ae_loc.person.family_name}
>{$lq__account?.name ?? $ae_loc.account_name ?? 'Æ loading...'}</span <p class="text-surface-600 dark:text-surface-400 font-medium">
> <span class="text-primary-500 font-semibold">
{#if $ae_loc.person.given_name} {[$ae_loc.person.given_name, $ae_loc.person.family_name].filter(Boolean).join(' ')}
&bull; <span class="opacity-75" </span>
>{$ae_loc.person.given_name}</span </p>
> {/if}
{/if}
</p>
</header> </header>
<!-- Quick Add Integrated Section --> <!-- Quick Add Integrated Section -->
<section class="w-full max-w-2xl"> <section class="w-full max-w-2xl">
<div class="relative group"> <div class="relative group">
<!-- Glow ring: slightly brighter in dark mode where colors need more presence -->
<div <div
class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200" class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500 rounded-2xl blur opacity-25 dark:opacity-40 group-hover:opacity-60 dark:group-hover:opacity-70 transition duration-1000 group-hover:duration-200"
></div> ></div>
<AE_Comp_Journal_Entry_Quick_Add <AE_Comp_Journal_Entry_Quick_Add
journals_li={$lq__journal_obj_li} journals_li={$lq__journal_obj_li}

5
src/routes/journals/ae_comp__journal_entry_header.svelte
View File

@@ -68,7 +68,10 @@
</script> </script>
<header <header
class="flex flex-col md:flex-row items-center justify-between gap-4 p-3 bg-surface-100/50 dark:bg-surface-900/50 rounded-xl border border-surface-500/20 backdrop-blur-md shadow-sm w-full" class="flex flex-col md:flex-row items-center justify-between gap-4 p-3
bg-gray-50 dark:bg-gray-800
border border-gray-200 dark:border-gray-700
rounded-xl shadow-sm w-full"
> >
<div class="flex items-center gap-3 w-full md:w-auto"> <div class="flex items-center gap-3 w-full md:w-auto">
<a <a

24
src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
View File

@@ -420,8 +420,19 @@
let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto'); let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
</script> </script>
<div class="relative group/entry-view w-full">
<!-- Subtle glow — same technique as the rest of the Journals module -->
<div
class="absolute -inset-1 bg-linear-to-r from-primary-500/50 to-secondary-500/50
rounded-2xl blur opacity-5 dark:opacity-10
group-hover/entry-view:opacity-15 dark:group-hover/entry-view:opacity-20
transition duration-700 pointer-events-none"
></div>
<section <section
class="ae_view flex flex-col gap-2 w-full h-full p-1" class="ae_view relative flex flex-col gap-2 w-full h-full p-2
bg-white dark:bg-gray-900
border border-gray-200 dark:border-gray-700
rounded-xl shadow-xl"
bind:clientHeight={$ae_loc.iframe_height_modal_body} bind:clientHeight={$ae_loc.iframe_height_modal_body}
> >
{#if $lq__journal_entry_obj && $lq__journal_obj} {#if $lq__journal_entry_obj && $lq__journal_obj}
@@ -458,11 +469,13 @@
</div> </div>
{/if} {/if}
<!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
<section <section
class="grow relative bg-gray-100 dark:bg-gray-800 p-1 rounded-lg shadow-md overflow-hidden" class="grow relative p-1 rounded-lg shadow-md overflow-hidden
class:bg-yellow-50={$journals_loc.entry.edit_kv[ bg-gray-50 dark:bg-gray-800
$lq__journal_entry_obj?.journal_entry_id border border-gray-200 dark:border-gray-700
] == 'current'} {$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current'
? 'ring-2 ring-inset ring-primary-500/40' : ''}"
> >
<div class="absolute top-2 right-2 z-10"> <div class="absolute top-2 right-2 z-10">
<AE_Comp_Journal_Entry_AiTools <AE_Comp_Journal_Entry_AiTools
@@ -533,3 +546,4 @@
</div> </div>
{/if} {/if}
</section> </section>
</div>

22
src/routes/journals/ae_comp__journal_entry_obj_li.svelte
View File

@@ -123,8 +123,16 @@
); );
</script> </script>
<div class="relative group/entries w-full">
<!-- Subtle glow behind the entry list — same technique as the other journal sections -->
<div
class="absolute -inset-1 bg-linear-to-r from-primary-500/50 to-secondary-500/50
rounded-2xl blur opacity-5 dark:opacity-10
group-hover/entries:opacity-15 dark:group-hover/entries:opacity-20
transition duration-700 pointer-events-none"
></div>
<section <section
class="journal_list flex flex-col gap-1 md:gap-2 items-center justify-center w-full" class="journal_list relative flex flex-col gap-1 md:gap-2 items-center justify-center w-full"
> >
{#if visible_journal_entry_obj_li === null} {#if visible_journal_entry_obj_li === null}
<!-- Loading state --> <!-- Loading state -->
@@ -154,17 +162,18 @@
{#each visible_journal_entry_obj_li as journals_journal_entry_obj, index (journals_journal_entry_obj.journal_entry_id)} {#each visible_journal_entry_obj_li as journals_journal_entry_obj, index (journals_journal_entry_obj.journal_entry_id)}
<div <div
class=" class="
container journal journal_entry_obj container journal journal_entry_obj group/entry
border border border-gray-200 dark:border-gray-700
border-l-4 border-l-primary-500/40
px-2 py-1 space-y-1 px-2 py-1 space-y-1
w-full max-w-(--breakpoint-lg) w-full max-w-(--breakpoint-lg)
flex flex-col items-center justify-center flex flex-col items-center justify-center
bg-white text-gray-900 bg-white text-gray-900
dark:bg-gray-800 dark:text-gray-200 dark:bg-gray-800 dark:text-gray-200
rounded-lg rounded-lg
hover:bg-gray-100 hover:dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700
hover:border-gray-300 hover:border-l-primary-500 hover:shadow-md
transition-all duration-500 ease-out transition-all duration-200 ease-out
" "
class:dim={!journals_journal_entry_obj.enable} class:dim={!journals_journal_entry_obj.enable}
class:bg-warning-100={!journals_journal_entry_obj?.enable} class:bg-warning-100={!journals_journal_entry_obj?.enable}
@@ -761,3 +770,4 @@ Journal ID: ${journals_journal_entry_obj?.journal_id}
</div> </div>
{/if} {/if}
</section> </section>
</div>

36
src/routes/journals/ae_comp__journal_obj_id_view.svelte
View File

@@ -172,21 +172,28 @@
} }
</script> </script>
<section <div class="relative group/view w-full mx-2 my-1">
class=" <!-- Glow ring — mirrors Quick Add and Journal List -->
rounded-lg p-2 m-2 w-full <div
flex flex-col flex-wrap items-center justify-center class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500
bg-{$lq__journal_obj?.cfg_json.color_scheme}-100 rounded-2xl blur opacity-10 dark:opacity-20
dark:bg-gray-800 group-hover/view:opacity-25 dark:group-hover/view:opacity-35
text-gray-900 dark:text-gray-100 transition duration-700 pointer-events-none"
" ></div>
bind:clientHeight={$ae_loc.iframe_height_modal_body} <section
> class="relative rounded-xl p-3 w-full
flex flex-col gap-2 items-center justify-center
bg-white dark:bg-gray-900
border border-gray-200 dark:border-gray-700
text-gray-900 dark:text-gray-100
shadow-xl"
bind:clientHeight={$ae_loc.iframe_height_modal_body}
>
<header <header
class="ae_header journal__header flex flex-row flex-wrap gap-2 items-center justify-between w-full" class="ae_header journal__header flex flex-row flex-wrap gap-2 items-center justify-between w-full"
> >
<h2 class="journal__name h3 text-center"> <h2 class="journal__name h3 text-center">
<BookOpenText class="inline-block text-neutral-800/60" /> <BookOpenText class="inline-block text-primary-500/80" />
{@html $lq__journal_obj?.name ?? 'Loading...'} {@html $lq__journal_obj?.name ?? 'Loading...'}
{#if $ae_loc.edit_mode} {#if $ae_loc.edit_mode}
@@ -247,8 +254,8 @@
p-2 p-2
w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md) w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md)
font-mono font-mono
text-gray-900 bg-gray-50 text-gray-900
dark:bg-gray-700 dark:text-gray-100 dark:bg-gray-800 dark:text-gray-100
shadow-md rounded-lg shadow-md rounded-lg
text-sm font-normal text-wrap word-break text-sm font-normal text-wrap word-break
@@ -264,7 +271,8 @@
{@html $lq__journal_obj.description_md_html} {@html $lq__journal_obj.description_md_html}
</div> </div>
{/if} {/if}
</section> </section>
</div>
<!-- Standardized Journal Action/Config Modal --> <!-- Standardized Journal Action/Config Modal -->
<Journal_obj_id_edit <Journal_obj_id_edit

238
src/routes/journals/ae_comp__journal_obj_li.svelte
View File

@@ -22,142 +22,118 @@
let { lq__journal_obj_li }: Props = $props(); let { lq__journal_obj_li }: Props = $props();
</script> </script>
<!-- Responsive Grid Container --> <!--
<section Compact mobile-first list — the entire row is the tap target.
class="journal_list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4" Glow effect mirrors the Quick Add section above it.
> Uses plain Tailwind gray scale with explicit dark: variants — no Skeleton paired utilities —
{#if $lq__journal_obj_li && $lq__journal_obj_li.length} so behavior is predictable regardless of which Skeleton theme is active.
{#each $lq__journal_obj_li as journal, index (journal.journal_id)} -->
<div <div class="w-full max-w-2xl relative group/list">
class=" <!-- Glow ring behind the list, same technique as Quick Add -->
journal_card <div
group relative class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500
flex flex-col justify-between rounded-2xl blur opacity-10 dark:opacity-20
bg-surface-50 dark:bg-surface-900 group-hover/list:opacity-25 dark:group-hover/list:opacity-35
border border-surface-500/20 rounded-xl transition duration-700 pointer-events-none"
p-5 shadow-sm hover:shadow-xl hover:border-primary-500/50 ></div>
transition-all duration-200 ease-in-out
"
class:hidden={(journal?.hide || !journal?.enable) &&
!$ae_loc.trusted_access}
class:opacity-60={journal.hide}
class:border-warning-500={!journal?.enable}
>
<!-- Top Section: Title & Badge -->
<div class="space-y-3">
<header class="flex justify-between items-start gap-2">
<div class="flex items-center gap-3">
<div
class="p-2 bg-primary-500/10 rounded-lg text-primary-500 group-hover:bg-primary-500 group-hover:text-white transition-colors"
>
<BookType size="1.5em" />
</div>
<h3
class="text-xl font-bold text-surface-900 dark:text-surface-100 line-clamp-1"
>
{journal.name}
</h3>
</div>
{#if journal.type_code} <section class="journal_list relative w-full space-y-1.5 p-2 sm:p-3
<span bg-white dark:bg-gray-900
class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold" border border-gray-200 dark:border-gray-700
> rounded-2xl shadow-xl">
{journal.type_code} {#if $lq__journal_obj_li && $lq__journal_obj_li.length}
</span> {#each $lq__journal_obj_li as journal (journal.journal_id)}
{/if} <a
</header> href="/journals/{journal?.journal_id}"
class="journal_card group relative
<!-- Description (Power User / Edit Mode Only) --> flex items-center gap-3 px-4 py-3
{#if journal.description && $ae_loc.edit_mode} bg-gray-50 dark:bg-gray-800
<div border border-gray-200 dark:border-gray-700
class="prose prose-sm dark:prose-invert max-h-24 overflow-y-auto bg-surface-100/50 dark:bg-surface-800/50 p-3 rounded-lg text-xs font-mono" border-l-4 border-l-primary-500/60
> rounded-xl shadow-sm
{@html journal.description_md_html} hover:shadow-md hover:border-l-primary-500
</div> hover:bg-gray-100 dark:hover:bg-gray-700
{/if} active:scale-[0.99]
transition-all duration-150 ease-in-out"
<!-- Quick Stats (Clean View) --> class:hidden={(journal?.hide || !journal?.enable) && !$ae_loc.trusted_access}
<div class:opacity-60={journal.hide}
class="flex items-center gap-4 text-xs text-surface-600 dark:text-surface-400" class:!border-l-warning-500={!journal?.enable}
>
<div
class="flex items-center gap-1"
title="Entry Count"
>
<Hash size="1.2em" />
<span class="font-bold"
>{journal.journal_entry_count ?? 0}</span
>
</div>
<div
class="flex items-center gap-1"
title="Last Updated"
>
<Clock size="1.2em" />
<span
>{ae_util.iso_datetime_formatter(
journal.updated_on || journal.created_on,
'date_short'
)}</span
>
</div>
</div>
</div>
<!-- Bottom Section: Actions -->
<div
class="mt-6 pt-4 border-t border-surface-500/10 flex flex-col gap-3"
> >
<a <!-- Icon: fixed size, never squashed -->
href="/journals/{journal?.journal_id}" <div class="shrink-0 p-2 bg-primary-500/10 rounded-lg text-primary-500
class="btn preset-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all" group-hover:bg-primary-500 group-hover:text-white transition-colors">
> <BookType size="1.3em" />
<BookOpenText size="1.2em" class="mr-2" /> </div>
<span>Open Journal</span>
</a>
<!-- Admin Metadata (Edit Mode Only) --> <!-- Name + badge: min-w-0 flex-1 lets text shrink and wrap -->
{#if $ae_loc.edit_mode && $ae_loc.administrator_access} <div class="min-w-0 flex-1">
<div <div class="text-sm sm:text-base font-bold
class="flex items-center justify-center gap-2 text-[10px] opacity-50 font-mono" text-gray-900 dark:text-gray-100
> leading-snug break-words">
<Calendar size="1em" /> {journal.name}
<span
>Created: {ae_util.iso_datetime_formatter(
journal.created_on,
'datetime_iso_12_no_seconds'
)}</span
>
</div> </div>
{/if} <div class="flex flex-wrap items-center gap-2 mt-0.5">
</div> {#if journal.type_code}
<span class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold">
{journal.type_code}
</span>
{/if}
<!-- Description snippet: edit mode only -->
{#if journal.description && $ae_loc.edit_mode}
<span class="text-[11px] text-gray-500 dark:text-gray-400 font-mono truncate max-w-[16rem]">
{ae_util.strip_html ? ae_util.strip_html(journal.description).slice(0, 60) : journal.description.slice(0, 60)}&hellip;
</span>
{/if}
</div>
</div>
<!-- Status Indicators (Edit Mode Only) --> <!-- Stats: right-aligned, compact -->
{#if $ae_loc.edit_mode} <div class="shrink-0 flex flex-col items-end gap-0.5
<div class="absolute -top-2 -right-2 flex gap-1"> text-xs text-gray-500 dark:text-gray-400">
{#if journal.hide} <div class="flex items-center gap-1" title="Entry Count">
<span <Hash size="0.85em" />
class="badge-icon preset-tonal-surface shadow-sm" <span class="font-bold tabular-nums">{journal.journal_entry_count ?? 0}&times;</span>
title="Hidden">🚫</span </div>
> <div class="flex items-center gap-1" title="Last Updated">
{/if} <Clock size="0.85em" />
{#if !journal.enable} <span class="tabular-nums">{ae_util.iso_datetime_formatter(
<span journal.updated_on || journal.created_on,
class="badge-icon preset-tonal-warning shadow-sm" 'date_short'
title="Disabled">⚠️</span )}</span>
> </div>
{#if $ae_loc.edit_mode && $ae_loc.administrator_access}
<div class="flex items-center gap-1 opacity-40" title="Created">
<Calendar size="0.85em" />
<span class="font-mono text-[10px] tabular-nums">{ae_util.iso_datetime_formatter(
journal.created_on,
'date_short'
)}</span>
</div>
{/if} {/if}
</div> </div>
{/if}
<!-- Chevron hint: desktop only -->
<BookOpenText size="0.95em"
class="shrink-0 opacity-0 group-hover:opacity-30 transition-opacity hidden sm:block" />
<!-- Status overlays: edit mode only -->
{#if $ae_loc.edit_mode}
<div class="absolute -top-1.5 -right-1.5 flex gap-1">
{#if journal.hide}
<span class="badge-icon preset-tonal-surface shadow-sm" title="Hidden">🚫</span>
{/if}
{#if !journal.enable}
<span class="badge-icon preset-tonal-warning shadow-sm" title="Disabled">⚠️</span>
{/if}
</div>
{/if}
</a>
{/each}
{:else}
<div class="p-20 text-center text-gray-400 dark:text-gray-500 flex flex-col items-center gap-4">
<BookType size="4em" />
<p class="text-xl">No journals found in this view.</p>
</div> </div>
{/each} {/if}
{:else} </section>
<div </div>
class="col-span-full p-20 text-center opacity-50 flex flex-col items-center gap-4"
>
<BookType size="4em" />
<p class="text-xl">No journals found in this view.</p>
</div>
{/if}
</section>