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
@@ -36,15 +36,17 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
|
||||
ae_app_theme
|
||||
hidden-print
|
||||
|
||||
bg-blue-100 text-gray-900
|
||||
dark:bg-blue-800 dark:text-gray-200
|
||||
bg-surface-100 dark:bg-surface-800
|
||||
text-surface-900 dark:text-surface-100
|
||||
border border-surface-200 dark:border-surface-700
|
||||
|
||||
flex flex-col flex-wrap gap-1
|
||||
items-end justify-center
|
||||
|
||||
w-72 max-w-72
|
||||
p-1
|
||||
border-2 border-gray-200
|
||||
rounded-lg
|
||||
shadow-md
|
||||
|
||||
duration-300 delay-150 hover:delay-1000 hover:ease-out
|
||||
transition-all
|
||||
|
||||
@@ -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}
|
||||
• <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}
|
||||
|
||||
@@ -68,7 +68,10 @@
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<a
|
||||
|
||||
@@ -420,8 +420,19 @@
|
||||
let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
|
||||
</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
|
||||
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}
|
||||
>
|
||||
{#if $lq__journal_entry_obj && $lq__journal_obj}
|
||||
@@ -458,11 +469,13 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
|
||||
<section
|
||||
class="grow relative bg-gray-100 dark:bg-gray-800 p-1 rounded-lg shadow-md overflow-hidden"
|
||||
class:bg-yellow-50={$journals_loc.entry.edit_kv[
|
||||
$lq__journal_entry_obj?.journal_entry_id
|
||||
] == 'current'}
|
||||
class="grow relative p-1 rounded-lg shadow-md overflow-hidden
|
||||
bg-gray-50 dark:bg-gray-800
|
||||
border border-gray-200 dark:border-gray-700
|
||||
{$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">
|
||||
<AE_Comp_Journal_Entry_AiTools
|
||||
@@ -533,3 +546,4 @@
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -123,8 +123,16 @@
|
||||
);
|
||||
</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
|
||||
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}
|
||||
<!-- 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)}
|
||||
<div
|
||||
class="
|
||||
container journal journal_entry_obj
|
||||
border
|
||||
container journal journal_entry_obj group/entry
|
||||
border border-gray-200 dark:border-gray-700
|
||||
border-l-4 border-l-primary-500/40
|
||||
px-2 py-1 space-y-1
|
||||
w-full max-w-(--breakpoint-lg)
|
||||
flex flex-col items-center justify-center
|
||||
bg-white text-gray-900
|
||||
dark:bg-gray-800 dark:text-gray-200
|
||||
rounded-lg
|
||||
hover:bg-gray-100 hover:dark:bg-gray-700
|
||||
hover:border-gray-300
|
||||
transition-all duration-500 ease-out
|
||||
hover:bg-gray-50 dark:hover:bg-gray-700
|
||||
hover:border-l-primary-500 hover:shadow-md
|
||||
transition-all duration-200 ease-out
|
||||
"
|
||||
class:dim={!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>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -172,21 +172,28 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="
|
||||
rounded-lg p-2 m-2 w-full
|
||||
flex flex-col flex-wrap items-center justify-center
|
||||
bg-{$lq__journal_obj?.cfg_json.color_scheme}-100
|
||||
dark:bg-gray-800
|
||||
text-gray-900 dark:text-gray-100
|
||||
"
|
||||
bind:clientHeight={$ae_loc.iframe_height_modal_body}
|
||||
>
|
||||
<div class="relative group/view w-full mx-2 my-1">
|
||||
<!-- Glow ring — mirrors Quick Add and Journal List -->
|
||||
<div
|
||||
class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500
|
||||
rounded-2xl blur opacity-10 dark:opacity-20
|
||||
group-hover/view:opacity-25 dark:group-hover/view:opacity-35
|
||||
transition duration-700 pointer-events-none"
|
||||
></div>
|
||||
<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
|
||||
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">
|
||||
<BookOpenText class="inline-block text-neutral-800/60" />
|
||||
<BookOpenText class="inline-block text-primary-500/80" />
|
||||
{@html $lq__journal_obj?.name ?? 'Loading...'}
|
||||
|
||||
{#if $ae_loc.edit_mode}
|
||||
@@ -247,8 +254,8 @@
|
||||
p-2
|
||||
w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md)
|
||||
font-mono
|
||||
text-gray-900
|
||||
dark:bg-gray-700 dark:text-gray-100
|
||||
bg-gray-50 text-gray-900
|
||||
dark:bg-gray-800 dark:text-gray-100
|
||||
shadow-md rounded-lg
|
||||
text-sm font-normal text-wrap word-break
|
||||
|
||||
@@ -264,7 +271,8 @@
|
||||
{@html $lq__journal_obj.description_md_html}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Standardized Journal Action/Config Modal -->
|
||||
<Journal_obj_id_edit
|
||||
|
||||
@@ -22,142 +22,118 @@
|
||||
let { lq__journal_obj_li }: Props = $props();
|
||||
</script>
|
||||
|
||||
<!-- Responsive Grid Container -->
|
||||
<section
|
||||
class="journal_list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4"
|
||||
>
|
||||
{#if $lq__journal_obj_li && $lq__journal_obj_li.length}
|
||||
{#each $lq__journal_obj_li as journal, index (journal.journal_id)}
|
||||
<div
|
||||
class="
|
||||
journal_card
|
||||
group relative
|
||||
flex flex-col justify-between
|
||||
bg-surface-50 dark:bg-surface-900
|
||||
border border-surface-500/20 rounded-xl
|
||||
p-5 shadow-sm hover:shadow-xl hover:border-primary-500/50
|
||||
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>
|
||||
<!--
|
||||
Compact mobile-first list — the entire row is the tap target.
|
||||
Glow effect mirrors the Quick Add section above it.
|
||||
Uses plain Tailwind gray scale with explicit dark: variants — no Skeleton paired utilities —
|
||||
so behavior is predictable regardless of which Skeleton theme is active.
|
||||
-->
|
||||
<div class="w-full max-w-2xl relative group/list">
|
||||
<!-- Glow ring behind the list, same technique as Quick Add -->
|
||||
<div
|
||||
class="absolute -inset-1 bg-linear-to-r from-primary-500 to-secondary-500
|
||||
rounded-2xl blur opacity-10 dark:opacity-20
|
||||
group-hover/list:opacity-25 dark:group-hover/list:opacity-35
|
||||
transition duration-700 pointer-events-none"
|
||||
></div>
|
||||
|
||||
{#if journal.type_code}
|
||||
<span
|
||||
class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold"
|
||||
>
|
||||
{journal.type_code}
|
||||
</span>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<!-- Description (Power User / Edit Mode Only) -->
|
||||
{#if journal.description && $ae_loc.edit_mode}
|
||||
<div
|
||||
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"
|
||||
>
|
||||
{@html journal.description_md_html}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Quick Stats (Clean View) -->
|
||||
<div
|
||||
class="flex items-center gap-4 text-xs text-surface-600 dark:text-surface-400"
|
||||
>
|
||||
<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"
|
||||
<section class="journal_list relative w-full space-y-1.5 p-2 sm:p-3
|
||||
bg-white dark:bg-gray-900
|
||||
border border-gray-200 dark:border-gray-700
|
||||
rounded-2xl shadow-xl">
|
||||
{#if $lq__journal_obj_li && $lq__journal_obj_li.length}
|
||||
{#each $lq__journal_obj_li as journal (journal.journal_id)}
|
||||
<a
|
||||
href="/journals/{journal?.journal_id}"
|
||||
class="journal_card group relative
|
||||
flex items-center gap-3 px-4 py-3
|
||||
bg-gray-50 dark:bg-gray-800
|
||||
border border-gray-200 dark:border-gray-700
|
||||
border-l-4 border-l-primary-500/60
|
||||
rounded-xl shadow-sm
|
||||
hover:shadow-md hover:border-l-primary-500
|
||||
hover:bg-gray-100 dark:hover:bg-gray-700
|
||||
active:scale-[0.99]
|
||||
transition-all duration-150 ease-in-out"
|
||||
class:hidden={(journal?.hide || !journal?.enable) && !$ae_loc.trusted_access}
|
||||
class:opacity-60={journal.hide}
|
||||
class:!border-l-warning-500={!journal?.enable}
|
||||
>
|
||||
<a
|
||||
href="/journals/{journal?.journal_id}"
|
||||
class="btn preset-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all"
|
||||
>
|
||||
<BookOpenText size="1.2em" class="mr-2" />
|
||||
<span>Open Journal</span>
|
||||
</a>
|
||||
<!-- Icon: fixed size, never squashed -->
|
||||
<div class="shrink-0 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.3em" />
|
||||
</div>
|
||||
|
||||
<!-- Admin Metadata (Edit Mode Only) -->
|
||||
{#if $ae_loc.edit_mode && $ae_loc.administrator_access}
|
||||
<div
|
||||
class="flex items-center justify-center gap-2 text-[10px] opacity-50 font-mono"
|
||||
>
|
||||
<Calendar size="1em" />
|
||||
<span
|
||||
>Created: {ae_util.iso_datetime_formatter(
|
||||
journal.created_on,
|
||||
'datetime_iso_12_no_seconds'
|
||||
)}</span
|
||||
>
|
||||
<!-- Name + badge: min-w-0 flex-1 lets text shrink and wrap -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="text-sm sm:text-base font-bold
|
||||
text-gray-900 dark:text-gray-100
|
||||
leading-snug break-words">
|
||||
{journal.name}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2 mt-0.5">
|
||||
{#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)}…
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Indicators (Edit Mode Only) -->
|
||||
{#if $ae_loc.edit_mode}
|
||||
<div class="absolute -top-2 -right-2 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
|
||||
>
|
||||
<!-- Stats: right-aligned, compact -->
|
||||
<div class="shrink-0 flex flex-col items-end gap-0.5
|
||||
text-xs text-gray-500 dark:text-gray-400">
|
||||
<div class="flex items-center gap-1" title="Entry Count">
|
||||
<Hash size="0.85em" />
|
||||
<span class="font-bold tabular-nums">{journal.journal_entry_count ?? 0}×</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1" title="Last Updated">
|
||||
<Clock size="0.85em" />
|
||||
<span class="tabular-nums">{ae_util.iso_datetime_formatter(
|
||||
journal.updated_on || journal.created_on,
|
||||
'date_short'
|
||||
)}</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}
|
||||
</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>
|
||||
{/each}
|
||||
{:else}
|
||||
<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>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user