Add responsive journal sidebar
This commit is contained in:
Scott Idem
@@ -65,6 +65,7 @@ const preferred_viewer = $derived((journal?.cfg_json?.pref_viewer ?? 'rendered')
|
||||
{:else}
|
||||
<div
|
||||
class="prose dark:prose-invert w-full max-w-none overflow-x-auto rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-900">
|
||||
<!-- The rendered HTML branch is intentionally trusted input from the journal editor pipeline. -->
|
||||
{@html tmp_entry_obj?.content_md_html || ''}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -123,7 +124,7 @@ const preferred_viewer = $derived((journal?.cfg_json?.pref_viewer ?? 'rendered')
|
||||
type="button"
|
||||
onclick={on_save}
|
||||
disabled={!has_changed}
|
||||
class="btn btn-sm md:btn-md lg:btn-lg preset-filled-success fixed top-72 right-6 z-20 min-w-32 shadow-xl transition-all"
|
||||
class="btn btn-sm md:btn-md lg:btn-lg preset-filled-success fixed top-72 right-6 z-20 hidden min-w-32 shadow-xl transition-all md:inline-flex"
|
||||
class:hidden={!has_changed}>
|
||||
<Save size="1.2em" class="mr-2" /> Save
|
||||
</button>
|
||||
|
||||
@@ -18,8 +18,8 @@ let { entry }: Props = $props();
|
||||
<section class="journal-metadata w-full space-y-4">
|
||||
<!-- System Timestamps -->
|
||||
<div
|
||||
class="text-surface-500 flex flex-col items-center justify-between gap-2 px-1 text-xs sm:flex-row">
|
||||
<div class="flex gap-4">
|
||||
class="text-surface-500 flex flex-col gap-2 text-xs sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex flex-col gap-1 sm:flex-row sm:flex-wrap sm:gap-4">
|
||||
<span title="Creation date">
|
||||
<span class="font-semibold">Created:</span>
|
||||
{ae_util.iso_datetime_formatter(
|
||||
|
||||
@@ -19,8 +19,7 @@ import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
|
||||
import {
|
||||
journals_loc,
|
||||
journals_sess,
|
||||
journals_slct
|
||||
journals_sess
|
||||
} from '$lib/ae_journals/ae_journals_stores';
|
||||
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
|
||||
import { decrypt_journal_entry } from '$lib/ae_journals/ae_journals_decryption';
|
||||
@@ -154,10 +153,6 @@ $effect(() => {
|
||||
|
||||
// 2. Auto-Save Debounce
|
||||
$effect(() => {
|
||||
// Track core properties
|
||||
const _content = tmp_entry_obj.content;
|
||||
const _private = tmp_entry_obj.private;
|
||||
|
||||
// Isolate logic from secondary dependencies
|
||||
const should_save = untrack(
|
||||
() => has_unsaved_changes && !is_processing && save_status !== 'saving'
|
||||
@@ -429,10 +424,9 @@ let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
|
||||
group-hover/entry-view:opacity-15 dark:opacity-10 dark:group-hover/entry-view:opacity-20">
|
||||
</div>
|
||||
<section
|
||||
class="ae_view relative flex h-full w-full min-w-0 flex-col gap-2 rounded-xl
|
||||
border border-gray-200
|
||||
bg-white p-2 shadow-xl
|
||||
dark:border-gray-700 dark:bg-gray-900"
|
||||
class="ae_view relative flex h-full w-full min-w-0 flex-col gap-4 rounded-xl
|
||||
border border-surface-200-800
|
||||
bg-surface-50-900 p-2 shadow-xl"
|
||||
bind:clientHeight={$ae_loc.iframe_height_modal_body}>
|
||||
{#if $lq__journal_entry_obj && $lq__journal_obj}
|
||||
<AE_Comp_Journal_Entry_Header
|
||||
@@ -447,60 +441,66 @@ let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
|
||||
{save_status}
|
||||
{log_lvl} />
|
||||
|
||||
{#if decryption_error}
|
||||
<div
|
||||
class="bg-error-500/20 border-error-500 z-50 flex w-full animate-bounce items-center justify-between rounded-lg border-2 p-4 shadow-2xl">
|
||||
<div class="grid w-full min-w-0 gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
|
||||
<div class="min-w-0 space-y-4">
|
||||
{#if decryption_error}
|
||||
<div
|
||||
class="bg-error-100 border-error-300 flex w-full animate-bounce items-center justify-between rounded-lg border p-4 shadow-xl">
|
||||
<div class="text-error-700 flex items-center gap-4 font-bold">
|
||||
<CircleAlert size="2.5em" />
|
||||
<span class="text-xl">{decryption_error}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
|
||||
onclick={() => (decryption_error = null)}>
|
||||
<CircleX size="1.2em" class="mr-2" /> Dismiss
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
|
||||
<section
|
||||
class="relative grow overflow-hidden rounded-xl border border-surface-200-800
|
||||
bg-surface-100-900 p-2 shadow-md min-w-0
|
||||
{$journals_loc.entry.edit_kv[
|
||||
$lq__journal_entry_obj?.journal_entry_id
|
||||
] == 'current'
|
||||
? 'ring-primary-500/40 ring-2 ring-inset'
|
||||
: ''}">
|
||||
<div class="absolute top-2 right-2 z-10">
|
||||
<AE_Comp_Journal_Entry_AiTools
|
||||
content={tmp_entry_obj.content}
|
||||
bind:summary={tmp_entry_obj.summary}
|
||||
on_save={() => update_journal_entry()}
|
||||
{log_lvl} />
|
||||
</div>
|
||||
|
||||
<AE_Comp_Journal_Entry_Editor
|
||||
entry={$lq__journal_entry_obj}
|
||||
journal={$lq__journal_obj}
|
||||
bind:tmp_entry_obj
|
||||
bind:editor_view
|
||||
has_changed={has_unsaved_changes}
|
||||
updated_idb={false}
|
||||
on_save={() => update_journal_entry()}
|
||||
on_force_reset={handle_force_reset} />
|
||||
</section>
|
||||
|
||||
<AE_Comp_Journal_Entry_ObjFileLi
|
||||
{log_lvl}
|
||||
link_to_type="journal_entry"
|
||||
link_to_id={$lq__journal_entry_obj.journal_entry_id}
|
||||
{lq__journal_entry_obj} />
|
||||
</div>
|
||||
|
||||
<aside class="min-w-0 space-y-4 lg:sticky lg:top-4 self-start">
|
||||
<div
|
||||
class="text-error-700 dark:text-error-300 flex items-center gap-4 font-bold">
|
||||
<CircleAlert size="2.5em" />
|
||||
<span class="text-xl">{decryption_error}</span>
|
||||
class="rounded-xl border border-surface-200-800 bg-surface-100-900 p-3 shadow-sm">
|
||||
<AE_Comp_Journal_Entry_Metadata entry={$lq__journal_entry_obj} />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
|
||||
onclick={() => (decryption_error = null)}>
|
||||
<CircleX size="1.2em" class="mr-2" /> Dismiss
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
|
||||
<section
|
||||
class="relative grow overflow-hidden rounded-lg border border-gray-200
|
||||
bg-gray-50 p-1
|
||||
shadow-md dark:border-gray-700 dark:bg-gray-800
|
||||
w-full min-w-0 items-stretch
|
||||
{$journals_loc.entry.edit_kv[
|
||||
$lq__journal_entry_obj?.journal_entry_id
|
||||
] == 'current'
|
||||
? 'ring-primary-500/40 ring-2 ring-inset'
|
||||
: ''}">
|
||||
<div class="absolute top-2 right-2 z-10">
|
||||
<AE_Comp_Journal_Entry_AiTools
|
||||
content={tmp_entry_obj.content}
|
||||
bind:summary={tmp_entry_obj.summary}
|
||||
on_save={() => update_journal_entry()}
|
||||
{log_lvl} />
|
||||
</div>
|
||||
|
||||
<AE_Comp_Journal_Entry_Editor
|
||||
entry={$lq__journal_entry_obj}
|
||||
journal={$lq__journal_obj}
|
||||
bind:tmp_entry_obj
|
||||
bind:editor_view
|
||||
has_changed={has_unsaved_changes}
|
||||
updated_idb={false}
|
||||
on_save={() => update_journal_entry()}
|
||||
on_force_reset={handle_force_reset} />
|
||||
</section>
|
||||
|
||||
<AE_Comp_Journal_Entry_ObjFileLi
|
||||
{log_lvl}
|
||||
link_to_type="journal_entry"
|
||||
link_to_id={$lq__journal_entry_obj.journal_entry_id}
|
||||
{lq__journal_entry_obj} />
|
||||
|
||||
<AE_Comp_Journal_Entry_Metadata entry={tmp_entry_obj as any} />
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<AE_Comp_Modal_Journal_Entry_Append
|
||||
bind:open={show_append_modal}
|
||||
|
||||
Reference in New Issue
Block a user