style(journals): standardize and stabilize 'Config' interfaces across all levels

This commit is contained in:
Scott Idem
2026-01-14 18:52:45 -05:00
parent 0108e28f59
commit dbb45e10ae
6 changed files with 102 additions and 217 deletions

View File

@@ -144,7 +144,7 @@
onclick={() => $journals_sess.show__modal__journals_config = true} onclick={() => $journals_sess.show__modal__journals_config = true}
> >
<Wrench size="1.2em" class="mr-2" /> <Wrench size="1.2em" class="mr-2" />
<span>Configure</span> <span>Config</span>
</button> </button>
</nav> </nav>
{/if} {/if}

View File

@@ -118,12 +118,12 @@
<div class="w-[1px] h-6 bg-surface-500/20 mx-1"></div> <div class="w-[1px] h-6 bg-surface-500/20 mx-1"></div>
<!-- Unified Settings Button --> <!-- Unified Config Button -->
<button <button
class="btn btn-sm variant-soft-primary font-bold" class="btn btn-sm variant-soft-primary font-bold"
onclick={onShowConfig} onclick={onShowConfig}
> >
<Settings size="1.1em" class="mr-2" /> Settings <Settings size="1.1em" class="mr-2" /> Config
</button> </button>
<!-- Explicit Save (Mobile/Backup) --> <!-- Explicit Save (Mobile/Backup) -->

View File

@@ -24,6 +24,8 @@
MessageSquareWarning, MessageSquareWarning,
Copy, Copy,
FilePlus, FilePlus,
FileDown,
FileUp,
Globe, Globe,
BookHeart, BookHeart,
BriefcaseBusiness, BriefcaseBusiness,
@@ -34,7 +36,8 @@
X, X,
Settings, Settings,
CalendarClock, CalendarClock,
MousePointerClick MousePointerClick,
Zap
} from '@lucide/svelte'; } from '@lucide/svelte';
import { Modal } from 'flowbite-svelte'; import { Modal } from 'flowbite-svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
@@ -57,16 +60,22 @@
log_lvl?: number; log_lvl?: number;
lq__journal_obj: any; lq__journal_obj: any;
show?: boolean; show?: boolean;
onNewEntry?: () => void;
onShowExport?: () => void;
onShowImport?: () => void;
} }
let { let {
log_lvl = $bindable(0), log_lvl = $bindable(0),
lq__journal_obj, lq__journal_obj,
show = $bindable(false) show = $bindable(false),
onNewEntry,
onShowExport,
onShowImport
}: Props = $props(); }: Props = $props();
// *** Internal State // *** Internal State
let tab: 'general' | 'security' | 'ui' | 'json' = $state('general'); let tab: 'actions' | 'general' | 'security' | 'ui' | 'json' = $state('actions');
let tmp__journal_obj: any = $state({}); let tmp__journal_obj: any = $state({});
// Deep copy on mount or when lq changes to ensure we have a working copy // Deep copy on mount or when lq changes to ensure we have a working copy
@@ -118,7 +127,8 @@
default_private: tmp__journal_obj.default_private, default_private: tmp__journal_obj.default_private,
default_public: tmp__journal_obj.default_public, default_public: tmp__journal_obj.default_public,
default_personal: tmp__journal_obj.default_personal, default_personal: tmp__journal_obj.default_personal,
default_professional: tmp__journal_obj.default_professional default_professional: tmp__journal_obj.default_professional,
code: tmp__journal_obj.code
}; };
await journals_func.update_ae_obj__journal({ await journals_func.update_ae_obj__journal({
@@ -163,14 +173,17 @@
> >
{#snippet header()} {#snippet header()}
<h3 class="flex items-center gap-2 text-lg font-bold"> <h3 class="flex items-center gap-2 text-lg font-bold">
<BookOpenText class="text-primary-500" /> <Settings class="text-primary-500" />
<span>Edit Journal: {$lq__journal_obj?.name ?? '--'}</span> <span>Journal Config: {$lq__journal_obj?.name ?? '--'}</span>
</h3> </h3>
{/snippet} {/snippet}
<div class="space-y-6 py-2 h-[75vh] overflow-y-auto px-4"> <div class="space-y-6 py-2 h-[75vh] overflow-y-auto px-4">
<!-- Navigation Tabs --> <!-- Navigation Tabs -->
<div class="flex justify-center gap-1 mb-4 p-1 bg-surface-500/10 rounded-lg max-w-fit mx-auto sticky top-0 z-10 backdrop-blur-sm"> <div class="flex justify-center gap-1 mb-4 p-1 bg-surface-500/10 rounded-lg max-w-fit mx-auto sticky top-0 z-10 backdrop-blur-sm">
<button class="btn btn-sm transition-all {tab === 'actions' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'actions')}>
<Zap size="1.1em" class="mr-1" /> Quick Actions
</button>
<button class="btn btn-sm transition-all {tab === 'general' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'general')}> <button class="btn btn-sm transition-all {tab === 'general' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'general')}>
<Layout size="1.1em" class="mr-1" /> General <Layout size="1.1em" class="mr-1" /> General
</button> </button>
@@ -185,7 +198,22 @@
</button> </button>
</div> </div>
{#if tab === 'general'} {#if tab === 'actions'}
<div class="space-y-6 animate-in fade-in duration-300">
<section class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button class="btn variant-soft-secondary w-full py-4 text-lg font-bold" onclick={() => { show = false; onNewEntry?.(); }}>
<FilePlus size="1.5em" class="mr-2"/> New Journal Entry
</button>
<button class="btn variant-soft-surface w-full py-4" onclick={() => { show = false; onShowExport?.(); }}>
<FileDown size="1.5em" class="mr-2"/> Export Entries
</button>
<button class="btn variant-soft-surface w-full py-4" onclick={() => { show = false; onShowImport?.(); }}>
<FileUp size="1.5em" class="mr-2"/> Import Entries
</button>
</section>
</div>
{:else if tab === 'general'}
<div class="space-y-6 animate-in fade-in duration-300"> <div class="space-y-6 animate-in fade-in duration-300">
<!-- Core Meta --> <!-- Core Meta -->
<section class="grid grid-cols-1 gap-4 p-2"> <section class="grid grid-cols-1 gap-4 p-2">

View File

@@ -3,7 +3,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
// *** Import other supporting libraries // *** Import other supporting libraries
import { BookPlus, BookOpenText, FilePlus, Menu, Pencil, FileDown, FileUp } from '@lucide/svelte'; import { BookPlus, BookOpenText, FilePlus, Menu, Pencil, FileDown, FileUp, Settings } from '@lucide/svelte';
// *** Import Aether specific variables and functions // *** Import Aether specific variables and functions
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -24,6 +24,7 @@
journals_prom journals_prom
} from '$lib/ae_journals/ae_journals_stores'; } from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions'; import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import Journal_obj_id_edit from './ae_comp__journal_obj_id_edit.svelte';
interface Props { interface Props {
log_lvl?: number; log_lvl?: number;
@@ -40,7 +41,6 @@
// let ae_trigger: any = null; // let ae_trigger: any = null;
// let ae_triggers: key_val = {}; // let ae_triggers: key_val = {};
let show_menu: boolean = $state(false);
let typed_journal_passcode: string = $state(''); let typed_journal_passcode: string = $state('');
let passcode_timer: any = $state(null); let passcode_timer: any = $state(null);
@@ -119,6 +119,33 @@
} else { } else {
} }
} }
async function handle_new_entry() {
let data_kv = {
category_code: null
};
if ($journals_loc.qry__category_code) {
data_kv.category_code = $journals_loc.qry__category_code;
}
try {
const results = await journals_func.create_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
});
if (results?.journal_entry_id_random) {
$journals_slct.journal_entry_id = results.journal_entry_id_random;
$journals_loc.entry.edit_kv[$journals_slct.journal_entry_id] = 'current';
goto(`/journals/${$lq__journal_obj?.journal_id}/entry/${results.journal_entry_id_random}`);
}
} catch (error) {
console.error('Error creating journal entry:', error);
alert('Failed to create new journal entry.');
}
}
</script> </script>
<section <section
@@ -147,213 +174,32 @@
</h2> </h2>
<div class="grow flex flex-row flex-wrap gap-2 items-center justify-end"> <div class="grow flex flex-row flex-wrap gap-2 items-center justify-end">
<section class="relative transition-all"> <!-- Simplified Config Trigger -->
<!-- Menu Button --> <button
<button type="button"
type="button" onclick={() => ($journals_sess.show__modal_edit__journal_obj = true)}
onclick={() => (show_menu = !show_menu)} class="btn variant-filled-secondary py-1 px-3 shadow-md"
class=" title="Journal Config & Actions"
btn >
variant-outline-secondary hover:preset-filled-secondary-400-600 <Settings size="1.2em" class="mr-2" />
py-1 px-2 w-24 <span class="hidden md:inline">Config</span>
transition-all </button>
"
title="Toggle menu"
>
<Menu size="1.5em" class="inline-block" />
<span class="hidden md:inline">Menu</span>
</button>
<!-- Menu --> <!-- Passcode Verification (Condensed) -->
<!-- {#if show_menu} --> {#if !$journals_sess?.journal_kv[$lq__journal_obj?.id]?.journal_passcode_verified}
<div <div class="flex gap-1">
class="
absolute top-12 right-0
p-4 z-50 w-80
space-y-0.5
bg-white dark:bg-gray-800
border border-gray-500
shadow-xl rounded-lg
min-w-72
max-w-fit
"
class:hidden={!show_menu}
>
<div
class="
flex flex-row flex-wrap items-center justify-evenly gap-2 w-full
"
>
<span class="text-sm text-gray-500">
<span class="fas fa-info-circle text-blue-500"></span>
Journal ID: {$lq__journal_obj?.id}
</span>
<button
type="button"
onclick={() => {
// $journals_sess.show__modal_new__journal_entry_obj = true
// log_lvl = 3;
let data_kv = {
category_code: null
};
if ($journals_loc.qry__category_code) {
data_kv.category_code = $journals_loc.qry__category_code;
}
if (log_lvl) {
console.log(
'Creating new journal entry with data_kv:',
data_kv
);
}
journals_func
.create_ae_obj__journal_entry({
api_cfg: $ae_api,
journal_id: $lq__journal_obj?.journal_id,
data_kv: data_kv,
log_lvl: log_lvl
})
.then((results) => {
if (log_lvl) {
console.log('New journal entry created:', results);
}
$journals_slct.journal_entry_id =
results?.journal_entry_id_random;
// $journals_loc.entry.edit = true;
$journals_loc.entry.edit_kv[
$journals_slct.journal_entry_id
] = 'current';
// alert(`Journal entry created successfully! ${$journals_slct.journal_entry_id}`);
})
.catch((error) => {
console.error('Error updating journal entry:', error);
alert('Failed to update journal entry.');
})
.finally(() => {
if ($journals_slct.journal_entry_id) {
goto(
`/journals/${$lq__journal_obj?.journal_id}/entry/${$journals_slct.journal_entry_id}`
);
} else {
alert('Failed to create new journal entry.');
}
});
}}
class="
btn btn-sm
preset-tonal-secondary border border-secondary-500
hover:preset-filled-secondary-500
transition
"
title="Create a new journal entry for this journal: {$lq__journal_obj?.name}"
>
<FilePlus />
<!-- <span class="fas fa-plus m-1"></span> -->
<span class="hidden sm:inline"> New Journal Entry </span>
</button>
<button
type="button"
onclick={() => {
$journals_slct.tmp_journal_obj = {
name: $lq__journal_obj?.name,
description: $lq__journal_obj?.description,
type_code: $lq__journal_obj?.type_code,
passcode: $lq__journal_obj?.passcode,
passcode_timeout: $lq__journal_obj?.passcode_timeout,
auth_key: $lq__journal_obj?.auth_key,
cfg_json: $lq__journal_obj?.cfg_json
};
$journals_sess.show__modal_edit__journal_obj = true;
}}
class:hidden={!$ae_loc.edit_mode}
class="
btn btn-sm
preset-tonal-warning border border-warning-500
hover:preset-filled-warning-500
transition
"
title="Edit Journal meta and configuration (name, type, passcode, categories, etc.: {$lq__journal_obj?.name})"
>
<Pencil />
<span class="hidden md:inline"> Edit Journal </span>
</button>
{#if $lq__journal_entry_obj_li && $lq__journal_entry_obj_li.length > 0}
<button
type="button"
onclick={() => {
show_menu = false;
onShowExport?.();
}}
class="
btn btn-sm
preset-tonal-secondary border border-secondary-500
hover:preset-filled-secondary-500
transition
"
title="Export journal entries"
>
<FileDown />
<span class="hidden md:inline"> Export Entries </span>
</button>
{/if}
<button
type="button"
onclick={() => {
show_menu = false;
onShowImport?.();
}}
class="
btn btn-sm
preset-tonal-secondary border border-secondary-500
hover:preset-filled-secondary-500
transition
"
title="Import journal entries from files"
>
<FileUp />
<span class="hidden md:inline"> Import Entries </span>
</button>
</div>
<!-- Set Journal private_passcode (string) -->
<!-- The Journal private_passcode will be used along with the Journal passcode to encrypt the journal entries. -->
<input <input
type="text" type="password"
bind:value={typed_journal_passcode} bind:value={typed_journal_passcode}
placeholder="Journal passcode" placeholder="Passcode"
onchange={() => { class="input input-sm variant-form-material w-32"
// console.log('HERE');
// verify_journal_passcode();
}}
class="input input-sm input-bordered w-full mb-2"
title="Enter private passcode of this journal"
/> />
{#if $journals_sess?.journal_kv[$lq__journal_obj?.id]?.journal_passcode_verified}
<div class="text-sm text-gray-500">
<span class="fas fa-check-circle text-green-500"></span>
Journal passcode verified
</div>
{:else}
<div class="text-sm text-gray-500">
<span class="fas fa-exclamation-circle text-red-500"></span>
Journal passcode not verified {$lq__journal_obj?.private_passcode ??
'??'}
</div>
{/if}
</div> </div>
<!-- {/if} --> {/if}
</section>
</div> </div>
</header> </header>
<!-- Show Journal description --> <!-- Show Journal description -->
<!-- class:bg-green-100={$lq__journal_obj?.cfg_json.color_scheme ?? 'green'} -->
<!-- prose-h1:text-gray-100 dark:prose-h1:text-gray-900 -->
<!-- <div> -->
{#if $lq__journal_obj?.description && $ae_loc.edit_mode} {#if $lq__journal_obj?.description && $ae_loc.edit_mode}
<div <div
class=" class="
@@ -379,5 +225,14 @@
{@html $lq__journal_obj.description_md_html} {@html $lq__journal_obj.description_md_html}
</div> </div>
{/if} {/if}
<!-- </div> -->
</section> </section>
<!-- Standardized Journal Action/Config Modal -->
<Journal_obj_id_edit
{log_lvl}
{lq__journal_obj}
show={$journals_sess.show__modal_edit__journal_obj}
onNewEntry={handle_new_entry}
onShowExport={onShowExport}
onShowImport={onShowImport}
/>

View File

@@ -21,7 +21,8 @@
RefreshCcw, RefreshCcw,
Tag, Tag,
Plus, Plus,
Minus Minus,
Zap
} from '@lucide/svelte'; } from '@lucide/svelte';
import { Modal } from 'flowbite-svelte'; import { Modal } from 'flowbite-svelte';
import { ae_loc, ae_api } from '$lib/stores/ae_stores'; import { ae_loc, ae_api } from '$lib/stores/ae_stores';
@@ -72,7 +73,7 @@
{#snippet header()} {#snippet header()}
<h3 class="flex items-center gap-2 text-lg font-bold"> <h3 class="flex items-center gap-2 text-lg font-bold">
<Settings class="text-primary-500" /> <Settings class="text-primary-500" />
<span>Entry Settings: {tmp_entry_obj.name || '--'}</span> <span>Entry Config: {tmp_entry_obj.name || '--'}</span>
</h3> </h3>
{/snippet} {/snippet}
@@ -80,7 +81,7 @@
<!-- Navigation Tabs --> <!-- Navigation Tabs -->
<div class="flex justify-center gap-1 mb-4 p-1 bg-surface-500/10 rounded-lg max-w-fit mx-auto sticky top-0 z-10 backdrop-blur-sm"> <div class="flex justify-center gap-1 mb-4 p-1 bg-surface-500/10 rounded-lg max-w-fit mx-auto sticky top-0 z-10 backdrop-blur-sm">
<button class="btn btn-sm transition-all {tab === 'actions' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'actions')}> <button class="btn btn-sm transition-all {tab === 'actions' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'actions')}>
<Clock size="1.1em" class="mr-1" /> Quick Actions <Zap size="1.1em" class="mr-1" /> Quick Actions
</button> </button>
<button class="btn btn-sm transition-all {tab === 'meta' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'meta')}> <button class="btn btn-sm transition-all {tab === 'meta' ? 'variant-filled-primary' : 'variant-soft-surface'}" onclick={() => (tab = 'meta')}>
<Shapes size="1.1em" class="mr-1" /> Metadata <Shapes size="1.1em" class="mr-1" /> Metadata

View File

@@ -15,7 +15,8 @@
X, X,
CalendarClock, CalendarClock,
MousePointerClick, MousePointerClick,
Database Database,
Wrench
} from '@lucide/svelte'; } from '@lucide/svelte';
import { Modal } from 'flowbite-svelte'; import { Modal } from 'flowbite-svelte';
import { untrack } from 'svelte'; import { untrack } from 'svelte';
@@ -75,8 +76,8 @@
> >
{#snippet header()} {#snippet header()}
<h3 class="flex items-center gap-2 text-lg font-bold"> <h3 class="flex items-center gap-2 text-lg font-bold">
<Settings class="text-primary-500" /> <Wrench class="text-primary-500" />
<span>&AElig; Journals Module Settings</span> <span>&AElig; Journals Module Config</span>
</h3> </h3>
{/snippet} {/snippet}