Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Normalize Journals config tabs

Browse Source
This commit is contained in:
Scott Idem
2026-05-05 14:10:12 -04:00
parent 0b04ce7c0c
commit d8616ea5fd
2 changed files with 43 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/routes/journals/ae_comp__modal_journal_config.svelte
View File

@@ -43,6 +43,16 @@ let tmp_config: any = $state({
entry: {} entry: {}
}); });
const panel_class = 'space-y-4 rounded-xl border border-surface-500/20 bg-surface-500/5 p-4 shadow-sm';
const panel_title_class = 'flex items-center gap-2 border-b border-surface-500/20 pb-2 text-lg font-bold';
const tab_button_base_class = 'btn btn-sm border transition-all duration-200';
const tab_button_active_class = 'border-surface-200-800 bg-surface-200-800 text-surface-950-50 shadow-sm';
const tab_button_inactive_class = 'border-transparent bg-surface-50-900/60 text-surface-600-400 hover:border-surface-200-800 hover:bg-surface-100-900 hover:text-surface-950-50';
function tab_button_class(is_active: boolean): string {
return `${tab_button_base_class} ${is_active ? tab_button_active_class : tab_button_inactive_class}`;
}
$effect(() => { $effect(() => {
if (show) { if (show) {
untrack(() => { untrack(() => {
@@ -66,9 +76,9 @@ function handle_save() {
dismissable={false} dismissable={false}
placement="top-center" placement="top-center"
size="xl" size="xl"
class="relative mx-auto flex w-full flex-col rounded-lg border border-orange-300 bg-white text-gray-800 shadow-xl dark:border-orange-700 dark:bg-gray-800 dark:text-gray-200" class="relative mx-auto flex h-[calc(100dvh-2rem)] max-h-[calc(100dvh-2rem)] w-full flex-col rounded-xl border border-surface-200-800 bg-surface-50-900 text-surface-950-50 shadow-xl"
headerClass="flex flex-row gap-2 items-center justify-between w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-t-lg border-b border-orange-200 dark:border-orange-800" headerClass="flex w-full flex-row items-center justify-between gap-2 rounded-t-xl border-b border-surface-200-800 bg-surface-100-900 p-4"
footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800"> footerClass="flex w-full flex-row items-center justify-center gap-2 rounded-b-xl border-t border-surface-200-800 bg-surface-100-900 p-4">
{#snippet header()} {#snippet header()}
<h3 class="flex flex-1 items-center gap-2 text-lg font-bold"> <h3 class="flex flex-1 items-center gap-2 text-lg font-bold">
<Wrench class="text-primary-500" /> <Wrench class="text-primary-500" />
@@ -82,31 +92,25 @@ function handle_save() {
</button> </button>
{/snippet} {/snippet}
<div class="h-[60vh] space-y-6 overflow-y-auto px-4 py-2"> <div class="min-h-0 flex-1 space-y-6 overflow-y-auto px-4 py-3">
<!-- Navigation Tabs --> <!-- Navigation Tabs -->
<div <div
class="bg-surface-500/10 sticky top-0 z-10 mx-auto mb-4 flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm"> class="bg-surface-500/10 sticky top-0 z-10 mx-auto mb-4 flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm">
<button <button
type="button" type="button"
class="btn btn-sm transition-all {tab === 'form' class={tab_button_class(tab === 'form')}
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'form')}> onclick={() => (tab = 'form')}>
<Settings size="1.1em" class="mr-1" /> Config <Settings size="1.1em" class="mr-1" /> Config
</button> </button>
<button <button
type="button" type="button"
class="btn btn-sm transition-all {tab === 'local_json' class={tab_button_class(tab === 'local_json')}
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'local_json')}> onclick={() => (tab = 'local_json')}>
<Database size="1.1em" class="mr-1" /> Local JSON <Database size="1.1em" class="mr-1" /> Local JSON
</button> </button>
<button <button
type="button" type="button"
class="btn btn-sm transition-all {tab === 'session_json' class={tab_button_class(tab === 'session_json')}
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'session_json')}> onclick={() => (tab = 'session_json')}>
<CodeXml size="1.1em" class="mr-1" /> Session JSON <CodeXml size="1.1em" class="mr-1" /> Session JSON
</button> </button>
@@ -115,9 +119,8 @@ function handle_save() {
{#if tab === 'form'} {#if tab === 'form'}
<div class="animate-in fade-in space-y-8 duration-300"> <div class="animate-in fade-in space-y-8 duration-300">
<!-- Date/Time Section --> <!-- Date/Time Section -->
<section class="space-y-4"> <section class={panel_class}>
<h2 <h2 class={panel_title_class}>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<CalendarClock size="1.2em" class="text-primary-500" /> <CalendarClock size="1.2em" class="text-primary-500" />
Date and Time Display Date and Time Display
</h2> </h2>
@@ -162,9 +165,8 @@ function handle_save() {
</section> </section>
<!-- UI Section --> <!-- UI Section -->
<section class="space-y-4"> <section class={panel_class}>
<h2 <h2 class={panel_title_class}>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<MousePointerClick <MousePointerClick
size="1.2em" size="1.2em"
class="text-primary-500" /> class="text-primary-500" />
@@ -202,9 +204,8 @@ function handle_save() {
</section> </section>
<!-- Journal Query Filters Section --> <!-- Journal Query Filters Section -->
<section class="space-y-4"> <section class={panel_class}>
<h2 <h2 class={panel_title_class}>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<Database size="1.2em" class="text-primary-500" /> <Database size="1.2em" class="text-primary-500" />
Journal Query Filters Journal Query Filters
</h2> </h2>
@@ -253,9 +254,8 @@ function handle_save() {
</section> </section>
<!-- Entry Query Filters Section --> <!-- Entry Query Filters Section -->
<section class="space-y-4"> <section class={panel_class}>
<h2 <h2 class={panel_title_class}>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<Database size="1.2em" class="text-primary-500" /> <Database size="1.2em" class="text-primary-500" />
Entry Query Filters Entry Query Filters
</h2> </h2>
@@ -304,14 +304,12 @@ function handle_save() {
</section> </section>
<!-- Security Section --> <!-- Security Section -->
<section class="space-y-4"> <section class={panel_class}>
<h2 <h2 class={panel_title_class}>
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<ShieldCheck size="1.2em" class="text-primary-500" /> <ShieldCheck size="1.2em" class="text-primary-500" />
Security & Encryption Security & Encryption
</h2> </h2>
<div <div class="space-y-4 rounded-lg border border-surface-500/10 bg-surface-500/5 p-4">
class="space-y-4 rounded-lg border border-orange-500/20 bg-orange-500/5 p-4">
<div class="text-sm italic opacity-80"> <div class="text-sm italic opacity-80">
Global security overrides for the journal module. Global security overrides for the journal module.
</div> </div>
@@ -330,7 +328,7 @@ function handle_save() {
</section> </section>
</div> </div>
{:else if tab === 'local_json'} {:else if tab === 'local_json'}
<div class="h-full min-h-[400px]"> <div class="h-full min-h-100">
<AE_Comp_Editor_CodeMirror <AE_Comp_Editor_CodeMirror
readonly={true} readonly={true}
content={JSON.stringify(tmp_config, null, 2)} content={JSON.stringify(tmp_config, null, 2)}
@@ -338,7 +336,7 @@ function handle_save() {
class_li="rounded-lg border border-surface-500/30" /> class_li="rounded-lg border border-surface-500/30" />
</div> </div>
{:else if tab === 'session_json'} {:else if tab === 'session_json'}
<div class="h-full min-h-[400px]"> <div class="h-full min-h-100">
<AE_Comp_Editor_CodeMirror <AE_Comp_Editor_CodeMirror
readonly={true} readonly={true}
content={JSON.stringify($journals_sess, null, 2)} content={JSON.stringify($journals_sess, null, 2)}
@@ -352,13 +350,13 @@ function handle_save() {
<div class="flex gap-4"> <div class="flex gap-4">
<button <button
type="button" type="button"
class="btn preset-tonal-surface min-w-[100px] font-bold" class="btn preset-tonal-surface min-w-25 font-bold"
onclick={() => (show = false)}> onclick={() => (show = false)}>
<X size="1.2em" class="mr-2" /> Cancel <X size="1.2em" class="mr-2" /> Cancel
</button> </button>
<button <button
type="button" type="button"
class="btn preset-filled-primary min-w-[120px] font-bold shadow-lg" class="btn preset-filled-primary min-w-30 font-bold shadow-lg"
onclick={handle_save}> onclick={handle_save}>
<Check size="1.2em" class="mr-2" /> Save Changes <Check size="1.2em" class="mr-2" /> Save Changes
</button> </button>

23
src/routes/journals/ae_comp__modal_journal_entry_config.svelte
View File

@@ -66,6 +66,13 @@ const normalize_date = (val?: string | Date | null) => {
const panel_class = 'space-y-4 rounded-xl border border-surface-500/20 bg-surface-500/5 p-4 shadow-sm'; const panel_class = 'space-y-4 rounded-xl border border-surface-500/20 bg-surface-500/5 p-4 shadow-sm';
const panel_title_class = 'flex items-center gap-2 border-b border-surface-500/20 pb-2 text-lg font-bold'; const panel_title_class = 'flex items-center gap-2 border-b border-surface-500/20 pb-2 text-lg font-bold';
const field_card_class = 'bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors hover:bg-surface-500/10'; const field_card_class = 'bg-surface-500/5 border-surface-500/10 flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors hover:bg-surface-500/10';
const tab_button_base_class = 'btn btn-sm border transition-all duration-200';
const tab_button_active_class = 'border-surface-200-800 bg-surface-200-800 text-surface-950-50 shadow-sm';
const tab_button_inactive_class = 'border-transparent bg-surface-50-900/60 text-surface-600-400 hover:border-surface-200-800 hover:bg-surface-100-900 hover:text-surface-950-50';
function tab_button_class(is_active: boolean): string {
return `${tab_button_base_class} ${is_active ? tab_button_active_class : tab_button_inactive_class}`;
}
async function handle_update_entry() { async function handle_update_entry() {
try { try {
@@ -162,33 +169,25 @@ async function handle_admin_delete_action() {
class="bg-surface-500/10 sticky top-0 z-10 mx-auto mb-4 flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm"> class="bg-surface-500/10 sticky top-0 z-10 mx-auto mb-4 flex max-w-fit justify-center gap-1 rounded-lg p-1 backdrop-blur-sm">
<button <button
type="button" type="button"
class="btn btn-sm transition-all {tab === 'actions' class={tab_button_class(tab === 'actions')}
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'actions')}> onclick={() => (tab = 'actions')}>
<Zap size="1.1em" class="mr-1" /> Quick Actions <Zap size="1.1em" class="mr-1" /> Quick Actions
</button> </button>
<button <button
type="button" type="button"
class="btn btn-sm transition-all {tab === 'meta' class={tab_button_class(tab === 'meta')}
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'meta')}> onclick={() => (tab = 'meta')}>
<Shapes size="1.1em" class="mr-1" /> Metadata <Shapes size="1.1em" class="mr-1" /> Metadata
</button> </button>
<button <button
type="button" type="button"
class="btn btn-sm transition-all {tab === 'security' class={tab_button_class(tab === 'security')}
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'security')}> onclick={() => (tab = 'security')}>
<ShieldCheck size="1.1em" class="mr-1" /> Status & Security <ShieldCheck size="1.1em" class="mr-1" /> Status & Security
</button> </button>
<button <button
type="button" type="button"
class="btn btn-sm transition-all {tab === 'json' class={tab_button_class(tab === 'json')}
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'json')}> onclick={() => (tab = 'json')}>
<CodeXml size="1.1em" class="mr-1" /> JSON <CodeXml size="1.1em" class="mr-1" /> JSON
</button> </button>