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

- 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

View File

@@ -99,35 +99,32 @@
</script>
<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 class="text-center space-y-2 max-w-3xl">
<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" />
<!-- </div> -->
Journals
</h1>
<p class="text-surface-600 dark:text-surface-400 font-medium">
Managed by <span class="text-primary-500"
>{$lq__account?.name ?? $ae_loc.account_name ?? 'Æ loading...'}</span
>
{#if $ae_loc.person.given_name}
&bull; <span class="opacity-75"
>{$ae_loc.person.given_name}</span
>
{/if}
</p>
<!-- Show the person's name as context; skip account name (often shows placeholder) -->
{#if $ae_loc.person.given_name || $ae_loc.person.family_name}
<p class="text-surface-600 dark:text-surface-400 font-medium">
<span class="text-primary-500 font-semibold">
{[$ae_loc.person.given_name, $ae_loc.person.family_name].filter(Boolean).join(' ')}
</span>
</p>
{/if}
</header>
<!-- Quick Add Integrated Section -->
<section class="w-full max-w-2xl">
<div class="relative group">
<!-- Glow ring: slightly brighter in dark mode where colors need more presence -->
<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>
<AE_Comp_Journal_Entry_Quick_Add
journals_li={$lq__journal_obj_li}