Modularize Journal Entry view and refine UI logic
- Extracted AI Tools and Metadata into dedicated Svelte 5 components (JournalEntry_AITools, JournalEntry_Metadata). - Standardized iconography to Lucide across list and detail views. - Refined sort order controls with improved styling and Lucide icons. - Fixed 'OpenAI is not defined' ReferenceError by restoring necessary imports. - Corrected component naming discrepancy for Journal_entry_obj_file_li. - Hardened change detection using Svelte 5 .by for reliable Save button behavior.
This commit is contained in:
Scott Idem
94
src/routes/journals/JournalEntry_AITools.svelte
Normal file
94
src/routes/journals/JournalEntry_AITools.svelte
Normal file
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* JournalEntry_AITools.svelte
|
||||
* Extracted 2026-01-08 to modularize the massive Journal Entry God Component.
|
||||
* Manages OpenAI summarization and display.
|
||||
*/
|
||||
import OpenAI from 'openai';
|
||||
import { BotMessageSquare, Loader, FileText } from '@lucide/svelte';
|
||||
import {
|
||||
journals_loc,
|
||||
journals_sess
|
||||
} from '$lib/ae_journals/ae_journals_stores';
|
||||
import type { ae_JournalEntry } from '$lib/types/ae_types';
|
||||
|
||||
interface Props {
|
||||
entry: ae_JournalEntry;
|
||||
log_lvl?: number;
|
||||
}
|
||||
|
||||
let { entry, log_lvl = 0 }: Props = $props();
|
||||
let ae_promises: any = $state(null);
|
||||
|
||||
async function generate_summary() {
|
||||
if (!entry.content) return;
|
||||
|
||||
const ai_client = new OpenAI({
|
||||
apiKey: $journals_loc?.llm__api_token,
|
||||
baseURL: $journals_loc?.llm__api_base_url,
|
||||
dangerouslyAllowBrowser: $journals_loc?.llm__api_dangerous_browser
|
||||
});
|
||||
|
||||
try {
|
||||
ae_promises = ai_client.chat.completions.create({
|
||||
model: $journals_loc?.llm__api_model,
|
||||
messages: [
|
||||
{
|
||||
role: 'system',
|
||||
content: $journals_loc?.entry?.llm__system_prompt ||
|
||||
'You are a helpful assistant that helps people find information.'
|
||||
},
|
||||
{ role: 'user', content: entry.content }
|
||||
]
|
||||
}).then((resp__chat) => {
|
||||
if (log_lvl) console.log('AI API Response:', resp__chat);
|
||||
|
||||
$journals_sess.entry.ai_summary =
|
||||
resp__chat?.choices?.[0]?.message?.content || 'No summary available';
|
||||
|
||||
$journals_sess.entry.show__ai_summary = true;
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.error('Error from chat completion:', err);
|
||||
alert('Error from chat completion: ' + (err?.message || err));
|
||||
}
|
||||
}
|
||||
|
||||
function use_saved_summary() {
|
||||
$journals_sess.entry.ai_summary = entry.summary;
|
||||
$journals_sess.entry.show__ai_summary = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="journal-ai-tools relative">
|
||||
{#if !$journals_sess?.entry?.show__ai_summary}
|
||||
{#if entry.content && entry.content.length > 50}
|
||||
<button
|
||||
type="button"
|
||||
onclick={generate_summary}
|
||||
class="btn btn-sm variant-filled-primary absolute top-2 right-2 z-10 shadow-lg"
|
||||
title="Generate AI summary"
|
||||
>
|
||||
{#await ae_promises}
|
||||
<Loader class="inline-block mr-1 animate-spin" />
|
||||
<span class="text-sm">Summarizing...</span>
|
||||
{:then}
|
||||
<BotMessageSquare class="inline-block mr-1" />
|
||||
<span class="text-sm">Summarize</span>
|
||||
{:catch}
|
||||
<span class="text-sm text-red-500">Error</span>
|
||||
{/await}
|
||||
</button>
|
||||
{:else if entry.summary}
|
||||
<button
|
||||
type="button"
|
||||
onclick={use_saved_summary}
|
||||
class="btn btn-sm variant-filled-primary absolute top-2 right-2 z-10 shadow-lg"
|
||||
title="Show saved summary"
|
||||
>
|
||||
<FileText class="inline-block mr-1" />
|
||||
Use Saved Summary
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
58
src/routes/journals/JournalEntry_Metadata.svelte
Normal file
58
src/routes/journals/JournalEntry_Metadata.svelte
Normal file
@@ -0,0 +1,58 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* JournalEntry_Metadata.svelte
|
||||
* Extracted 2026-01-08 to modularize the massive Journal Entry God Component.
|
||||
* Displays creation, update, and original datetime/timezone information.
|
||||
*/
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_loc } from '$lib/stores/ae_stores';
|
||||
import type { ae_JournalEntry } from '$lib/types/ae_types';
|
||||
|
||||
interface Props {
|
||||
entry: ae_JournalEntry;
|
||||
}
|
||||
|
||||
let { entry }: Props = $props();
|
||||
</script>
|
||||
|
||||
<section class="journal-metadata w-full space-y-4">
|
||||
<!-- Original Date/Time Info -->
|
||||
{#if entry.original_datetime || entry.original_timezone}
|
||||
<div class="flex flex-col sm:flex-row gap-4 p-3 bg-surface-500/5 rounded-lg border border-surface-500/20">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-surface-500">Original Date/Time</span>
|
||||
<span class="text-sm font-medium">
|
||||
{entry.original_datetime ? ae_util.iso_datetime_formatter(entry.original_datetime, 'datetime_12_long') : '--'}
|
||||
</span>
|
||||
</div>
|
||||
{#if entry.original_timezone}
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-surface-500">Timezone</span>
|
||||
<span class="text-sm font-medium">{entry.original_timezone}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- System Timestamps -->
|
||||
<div class="flex flex-col sm:flex-row justify-between items-center gap-2 px-1 text-xs text-surface-500">
|
||||
<div class="flex gap-4">
|
||||
<span title="Creation date">
|
||||
<span class="font-semibold">Created:</span>
|
||||
{ae_util.iso_datetime_formatter(entry.created_on, 'datetime_12_long')}
|
||||
</span>
|
||||
{#if entry.updated_on}
|
||||
<span title="Last update">
|
||||
<span class="font-semibold">Updated:</span>
|
||||
{ae_util.iso_datetime_formatter(entry.updated_on, 'datetime_12_long')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if entry.journal_entry_type}
|
||||
<span class="badge variant-soft-surface">
|
||||
Type: {entry.journal_entry_type}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@@ -60,6 +60,8 @@
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
|
||||
import OpenAI from 'openai';
|
||||
|
||||
|
||||
|
||||
import { wrapSelection, toggleLinePrefix } from '$lib/ae_journals/ae_journals_editor_helpers';
|
||||
@@ -109,10 +111,12 @@
|
||||
journals_prom
|
||||
} from '$lib/ae_journals/ae_journals_stores';
|
||||
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
|
||||
import Comp_journal_entry_file_li from './ae_comp__journal_entry_obj_file_li.svelte';
|
||||
import Journal_entry_obj_file_li from './ae_comp__journal_entry_obj_file_li.svelte';
|
||||
// import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
|
||||
// import Element_manage_hosted_file_li_wrap from '$lib/element_manage_hosted_file_li_all.svelte';
|
||||
import Comp_hosted_files_download_button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
|
||||
import JournalEntry_AITools from './JournalEntry_AITools.svelte';
|
||||
import JournalEntry_Metadata from './JournalEntry_Metadata.svelte';
|
||||
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
@@ -1985,49 +1989,40 @@
|
||||
</button>
|
||||
|
||||
<!-- Set sort order (number) -->
|
||||
<span
|
||||
<div
|
||||
class:hidden={!$ae_loc.edit_mode}
|
||||
class="w-full mb-2 flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg"
|
||||
class="w-full mb-2 flex flex-row items-center justify-center border border-surface-500/30 rounded-lg p-1 bg-surface-500/5"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Incrementing sort order');
|
||||
tmp_entry_obj.sort = $lq__journal_entry_obj?.sort
|
||||
? $lq__journal_entry_obj?.sort + 1
|
||||
: 1;
|
||||
console.log('Incremented sort order:', tmp_entry_obj.sort);
|
||||
if (log_lvl) console.log('Incrementing sort order');
|
||||
tmp_entry_obj.sort = ($lq__journal_entry_obj?.sort ?? 0) + 1;
|
||||
update_journal_entry();
|
||||
}}
|
||||
class="btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
|
||||
class="btn-icon btn-icon-sm preset-tonal-surface hover:preset-filled-secondary-500"
|
||||
title="Increment sort order of this journal entry"
|
||||
>
|
||||
<Plus strokeWidth="2.5" color="blue" />
|
||||
<Plus size="1em" />
|
||||
</button>
|
||||
<span class="mx-1">
|
||||
{#if $lq__journal_entry_obj?.sort}
|
||||
{$lq__journal_entry_obj.sort}
|
||||
{:else}
|
||||
<!-- <ArrowDown01 /> -->
|
||||
<ArrowDown10 />
|
||||
{/if}
|
||||
|
||||
<span class="mx-4 font-bold text-base min-w-[1.5em] text-center">
|
||||
{tmp_entry_obj.sort ?? $lq__journal_entry_obj?.sort ?? 0}
|
||||
</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Decrementing sort order');
|
||||
tmp_entry_obj.sort = $lq__journal_entry_obj?.sort
|
||||
? $lq__journal_entry_obj?.sort - 1
|
||||
: 0;
|
||||
console.log('Decremented sort order:', tmp_entry_obj.sort);
|
||||
if (log_lvl) console.log('Decrementing sort order');
|
||||
tmp_entry_obj.sort = Math.max(0, ($lq__journal_entry_obj?.sort ?? 0) - 1);
|
||||
update_journal_entry();
|
||||
}}
|
||||
class="btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
|
||||
class="btn-icon btn-icon-sm preset-tonal-surface hover:preset-filled-secondary-500"
|
||||
title="Decrement sort order of this journal entry"
|
||||
>
|
||||
<Minus strokeWidth="2.5" color="blue" />
|
||||
<Minus size="1em" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Set group (string) -->
|
||||
<input
|
||||
@@ -2739,7 +2734,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
|
||||
{/if}
|
||||
|
||||
{#if $lq__journal_entry_obj?.journal_entry_id}
|
||||
<Comp_journal_entry_file_li
|
||||
<Journal_entry_obj_file_li
|
||||
{log_lvl}
|
||||
link_to_type="journal_entry"
|
||||
link_to_id={$lq__journal_entry_obj?.journal_entry_id}
|
||||
@@ -2903,29 +2898,7 @@ zzzz
|
||||
{/if} -->
|
||||
|
||||
<section class="ae_meta flex flex-row flex-wrap gap-1 items-center justify-between w-full">
|
||||
<span class="flex flex-row items-center justify-center text-sm text-gray-500">
|
||||
{#if !$ae_loc.edit_mode}
|
||||
<span class="">
|
||||
{ae_util.iso_datetime_formatter(
|
||||
$lq__journal_entry_obj?.created_on,
|
||||
'datetime_iso_12_no_seconds'
|
||||
)}
|
||||
{$lq__journal_entry_obj?.updated_on
|
||||
? ` | Last updated: ${ae_util.iso_datetime_formatter($lq__journal_entry_obj?.updated_on, 'datetime_iso_12_no_seconds')}`
|
||||
: ''}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="">
|
||||
{ae_util.iso_datetime_formatter(
|
||||
$lq__journal_entry_obj?.created_on,
|
||||
'datetime_iso_tz'
|
||||
)}
|
||||
{$lq__journal_entry_obj?.updated_on
|
||||
? ` | Last updated: ${ae_util.iso_datetime_formatter($lq__journal_entry_obj?.updated_on, 'datetime_iso_tz')}`
|
||||
: ''}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
<JournalEntry_Metadata entry={tmp_entry_obj} />
|
||||
</section>
|
||||
|
||||
{#if $journals_sess?.entry?.show__ai_summary && $journals_sess?.entry?.ai_summary}
|
||||
|
||||
@@ -39,28 +39,27 @@
|
||||
<div
|
||||
class="
|
||||
container journal journal_obj
|
||||
border rounded p-2 mb-2 space-y-2
|
||||
w-full max-w-(--breakpoint-md)
|
||||
border border-surface-500/30 rounded-lg p-3 mb-4 space-y-3
|
||||
w-full max-w-2xl
|
||||
flex flex-col items-center justify-center
|
||||
bg-{journals_journal_obj?.cfg_json.color_scheme}-100
|
||||
bg-surface-50 dark:bg-surface-900
|
||||
shadow-sm hover:shadow-md transition-shadow
|
||||
"
|
||||
class:hidden={(journals_journal_obj?.hide || !journals_journal_obj?.enable) &&
|
||||
!$ae_loc.trusted_access}
|
||||
class:dim={journals_journal_obj.hide}
|
||||
class:bg-warning-100={!journals_journal_obj?.enable}
|
||||
class:text-warning-900={!journals_journal_obj?.enable}
|
||||
class:opacity-50={journals_journal_obj.hide}
|
||||
class:preset-filled-warning-100-900={!journals_journal_obj?.enable}
|
||||
>
|
||||
<header
|
||||
class="
|
||||
ae_header
|
||||
flex flex-row gap-2 items-center justify-between
|
||||
w-full
|
||||
text-neutral-800/60
|
||||
"
|
||||
>
|
||||
<h3 class="journal__name h3">
|
||||
<BookType class="m-1 inline-block" />
|
||||
<span class="journal__name">{journals_journal_obj.name}</span>
|
||||
<h3 class="journal__name text-xl md:text-2xl font-bold flex items-center gap-2 text-surface-900 dark:text-surface-100">
|
||||
<BookType size="1.25em" class="text-primary-500" />
|
||||
<span class="journal__name truncate">{journals_journal_obj.name}</span>
|
||||
</h3>
|
||||
|
||||
<!-- Show a label if the type code is set -->
|
||||
@@ -107,21 +106,18 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="ae_options flex flex-row gap-2 items-center justify-center">
|
||||
<div class="ae_options flex flex-row flex-wrap gap-3 items-center justify-center">
|
||||
<a
|
||||
href="/journals/{journals_journal_obj?.journal_id}"
|
||||
class="btn btn-secondary btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 hover:underline transition"
|
||||
class="btn variant-filled-primary md:btn-lg font-bold shadow-lg hover:scale-105 transition-transform"
|
||||
title={`View: ${journals_journal_obj?.name}`}
|
||||
>
|
||||
<!-- <span class="fas fa-envelope-open m-1"></span> -->
|
||||
<BookOpenText class="m-1" />
|
||||
Open
|
||||
<BookOpenText size="1.25em" />
|
||||
<span>Open Journal</span>
|
||||
|
||||
{#if journals_journal_obj?.journal_entry_count}
|
||||
<span class="ae_badge ae_info journal__journal_entry_count">
|
||||
{@html journals_journal_obj?.journal_entry_count == 1
|
||||
? `${journals_journal_obj?.journal_entry_count}× entry`
|
||||
: `${journals_journal_obj?.journal_entry_count}× entries`}
|
||||
<span class="badge variant-filled-secondary ml-2">
|
||||
{journals_journal_obj?.journal_entry_count} {journals_journal_obj?.journal_entry_count === 1 ? 'entry' : 'entries'}
|
||||
</span>
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user