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: {}
});
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(() => {
if (show) {
untrack(() => {
@@ -66,9 +76,9 @@ function handle_save() {
dismissable={false}
placement="top-center"
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"
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"
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">
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 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 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()}
<h3 class="flex flex-1 items-center gap-2 text-lg font-bold">
<Wrench class="text-primary-500" />
@@ -82,31 +92,25 @@ function handle_save() {
</button>
{/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 -->
<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">
<button
type="button"
class="btn btn-sm transition-all {tab === 'form'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
class={tab_button_class(tab === 'form')}
onclick={() => (tab = 'form')}>
<Settings size="1.1em" class="mr-1" /> Config
</button>
<button
type="button"
class="btn btn-sm transition-all {tab === 'local_json'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
class={tab_button_class(tab === 'local_json')}
onclick={() => (tab = 'local_json')}>
<Database size="1.1em" class="mr-1" /> Local JSON
</button>
<button
type="button"
class="btn btn-sm transition-all {tab === 'session_json'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
class={tab_button_class(tab === 'session_json')}
onclick={() => (tab = 'session_json')}>
<CodeXml size="1.1em" class="mr-1" /> Session JSON
</button>
@@ -115,9 +119,8 @@ function handle_save() {
{#if tab === 'form'}
<div class="animate-in fade-in space-y-8 duration-300">
<!-- Date/Time Section -->
<section class="space-y-4">
<h2
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<section class={panel_class}>
<h2 class={panel_title_class}>
<CalendarClock size="1.2em" class="text-primary-500" />
Date and Time Display
</h2>
@@ -162,9 +165,8 @@ function handle_save() {
</section>
<!-- UI Section -->
<section class="space-y-4">
<h2
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<section class={panel_class}>
<h2 class={panel_title_class}>
<MousePointerClick
size="1.2em"
class="text-primary-500" />
@@ -202,9 +204,8 @@ function handle_save() {
</section>
<!-- Journal Query Filters Section -->
<section class="space-y-4">
<h2
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<section class={panel_class}>
<h2 class={panel_title_class}>
<Database size="1.2em" class="text-primary-500" />
Journal Query Filters
</h2>
@@ -253,9 +254,8 @@ function handle_save() {
</section>
<!-- Entry Query Filters Section -->
<section class="space-y-4">
<h2
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<section class={panel_class}>
<h2 class={panel_title_class}>
<Database size="1.2em" class="text-primary-500" />
Entry Query Filters
</h2>
@@ -304,14 +304,12 @@ function handle_save() {
</section>
<!-- Security Section -->
<section class="space-y-4">
<h2
class="border-surface-500/30 flex items-center gap-2 border-b pb-2 text-xl font-bold">
<section class={panel_class}>
<h2 class={panel_title_class}>
<ShieldCheck size="1.2em" class="text-primary-500" />
Security & Encryption
</h2>
<div
class="space-y-4 rounded-lg border border-orange-500/20 bg-orange-500/5 p-4">
<div class="space-y-4 rounded-lg border border-surface-500/10 bg-surface-500/5 p-4">
<div class="text-sm italic opacity-80">
Global security overrides for the journal module.
</div>
@@ -330,7 +328,7 @@ function handle_save() {
</section>
</div>
{:else if tab === 'local_json'}
<div class="h-full min-h-[400px]">
<div class="h-full min-h-100">
<AE_Comp_Editor_CodeMirror
readonly={true}
content={JSON.stringify(tmp_config, null, 2)}
@@ -338,7 +336,7 @@ function handle_save() {
class_li="rounded-lg border border-surface-500/30" />
</div>
{:else if tab === 'session_json'}
<div class="h-full min-h-[400px]">
<div class="h-full min-h-100">
<AE_Comp_Editor_CodeMirror
readonly={true}
content={JSON.stringify($journals_sess, null, 2)}
@@ -352,13 +350,13 @@ function handle_save() {
<div class="flex gap-4">
<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)}>
<X size="1.2em" class="mr-2" /> Cancel
</button>
<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}>
<Check size="1.2em" class="mr-2" /> Save Changes
</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_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 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() {
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">
<button
type="button"
class="btn btn-sm transition-all {tab === 'actions'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
class={tab_button_class(tab === 'actions')}
onclick={() => (tab = 'actions')}>
<Zap size="1.1em" class="mr-1" /> Quick Actions
</button>
<button
type="button"
class="btn btn-sm transition-all {tab === 'meta'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
class={tab_button_class(tab === 'meta')}
onclick={() => (tab = 'meta')}>
<Shapes size="1.1em" class="mr-1" /> Metadata
</button>
<button
type="button"
class="btn btn-sm transition-all {tab === 'security'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
class={tab_button_class(tab === 'security')}
onclick={() => (tab = 'security')}>
<ShieldCheck size="1.1em" class="mr-1" /> Status & Security
</button>
<button
type="button"
class="btn btn-sm transition-all {tab === 'json'
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
class={tab_button_class(tab === 'json')}
onclick={() => (tab = 'json')}>
<CodeXml size="1.1em" class="mr-1" /> JSON
</button>