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

style(journals): standardize Skeleton v4 preset-* classes across all journal components

Browse Source 
- Replace all Skeleton v2 variant-* classes with v4 preset-* equivalents
  - variant-filled-* → preset-filled-*
  - variant-soft-* / variant-ghost-* → preset-tonal-*
  - variant-outline-* → preset-outlined-*
  - variant-form-material removed from inputs/selects/textareas
  - input-bordered removed

- Fix dark mode: journal entry content hover (dark:hover:bg-blue-950)
- Fix dark mode: journal obj view section/description bg and text colors
- Fix modal headers: add dismissable=false + explicit X close button (all 3 journals modals)
- Fix DaisyUI wrappers removed from modal_journal_entry_append
- app.css: add global select padding-inline to fix text-against-border issue
This commit is contained in:
Scott Idem
2026-03-06 19:15:51 -05:00
parent 3ca9503b88
commit cc6f73ca04
18 changed files with 201 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.css
View File

@@ -120,6 +120,10 @@
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}
/* Tailwind preflight strips native select padding — restore it globally */
select {
padding-inline: 0.5rem;
}
}
/* There are no more Tailwind layers. */

16
src/routes/journals/+page.svelte
View File

@@ -141,7 +141,7 @@
>
<button
type="button"
class="btn variant-filled-secondary shadow-lg hover:scale-105 transition-transform"
class="btn preset-tonal-secondary shadow-lg hover:scale-105 transition-transform"
onclick={() =>
($journals_sess.show__modal_new__journal_obj = true)}
>
@@ -151,7 +151,7 @@
<button
type="button"
class="btn variant-filled-surface border border-surface-500/30 shadow-lg hover:scale-105 transition-transform"
class="btn preset-tonal-surface shadow-lg hover:scale-105 transition-transform"
onclick={() => (show_import_modal = true)}
>
<FileUp size="1.2em" class="mr-2" />
@@ -160,7 +160,7 @@
<button
type="button"
class="btn variant-soft-surface shadow-lg hover:scale-105 transition-transform"
class="btn preset-tonal-surface shadow-lg hover:scale-105 transition-transform"
onclick={() =>
($journals_sess.show__modal__journals_config = true)}
>
@@ -193,7 +193,7 @@
</p>
<button
type="button"
class="btn variant-filled-primary"
class="btn preset-filled-primary"
onclick={() =>
($journals_sess.show__modal_new__journal_obj = true)}
>
@@ -223,7 +223,7 @@
type="text"
placeholder="e.g. My Daily Logs"
bind:value={$journals_sess.journal.new_journal_name}
class="input variant-filled-surface rounded-lg"
class="input"
/>
</div>
<div class="space-y-1">
@@ -235,20 +235,20 @@
type="text"
placeholder="e.g. diary, log, notebook"
bind:value={$journals_sess.journal.new_journal_type_code}
class="input variant-filled-surface rounded-lg"
class="input"
/>
</div>
<div class="flex justify-end gap-2 pt-4">
<button
type="button"
class="btn variant-soft-surface"
class="btn preset-tonal-surface"
onclick={() =>
($journals_sess.show__modal_new__journal_obj = false)}
>Cancel</button
>
<button
type="button"
class="btn variant-filled-primary font-bold"
class="btn preset-filled-primary font-bold"
onclick={create_journal}>Create Journal</button
>
</div>

6
src/routes/journals/ae_comp__journal_entry_editor.svelte
View File

@@ -81,7 +81,7 @@
</p>
<button
type="button"
class="btn btn-sm variant-filled-error font-bold"
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
onclick={on_force_reset}
>
<RefreshCcw size="1.1em" class="mr-2" /> Force Reset to
@@ -113,7 +113,7 @@
type="button"
onclick={on_save}
disabled={!has_changed}
class="btn btn-sm md:btn-md lg:btn-lg fixed top-72 right-6 min-w-32 variant-filled-success shadow-xl z-20 transition-all"
class="btn btn-sm md:btn-md lg:btn-lg fixed top-72 right-6 min-w-32 preset-filled-success shadow-xl z-20 transition-all"
class:hidden={!has_changed}
>
<Save size="1.2em" class="mr-2" /> Save
@@ -124,7 +124,7 @@
type="button"
onclick={on_save}
disabled={!has_changed}
class="btn variant-filled-warning w-full max-w-96 mt-4"
class="btn preset-tonal-warning hover:preset-filled-warning-500 w-full max-w-96 mt-4"
class:invisible={!has_changed}
>
<Save size="1.2em" class="mr-2" /> Save Changes

16
src/routes/journals/ae_comp__journal_entry_header.svelte
View File

@@ -73,7 +73,7 @@
<div class="flex items-center gap-3 w-full md:w-auto">
<a
href="/journals/{journal.journal_id}"
class="btn-icon btn-icon-sm variant-soft-surface"
class="btn-icon btn-icon-sm preset-tonal-surface"
title="Back to Journal"
>
<ChevronLeft size="1.2em" />
@@ -86,8 +86,8 @@
class="btn-icon btn-icon-sm transition-all {has_changed &&
$journals_loc.entry.edit_kv[entry.journal_entry_id] ===
'current'
? 'variant-filled-success'
: 'variant-soft-surface'}"
? 'preset-filled-success'
: 'preset-tonal-surface'}"
>
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
{#if has_changed}<Save size="1.2em" />{:else}<Eye
@@ -102,7 +102,7 @@
<input
type="text"
bind:value={tmp_entry_obj.name}
class="input input-sm variant-form-material font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-0"
class="input input-sm font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-0"
placeholder="Entry Title..."
onchange={on_save}
/>
@@ -155,8 +155,8 @@
<button
type="button"
class="btn-icon btn-icon-sm transition-all {is_decrypted
? 'variant-filled-success shadow-lg shadow-success-500/20'
: 'variant-soft-warning'}"
? 'preset-filled-success shadow-lg shadow-success-500/20'
: 'preset-tonal-warning'}"
onclick={on_decrypt}
title={is_decrypted ? 'Lock Content' : 'Decrypt Content'}
>
@@ -171,7 +171,7 @@
<!-- Unified Config Button -->
<button
type="button"
class="btn btn-sm variant-soft-primary font-bold"
class="btn btn-sm preset-tonal-primary font-bold"
onclick={on_show_config}
>
<Settings size="1.1em" class="mr-2" /> Config
@@ -181,7 +181,7 @@
{#if has_changed && save_status !== 'saving'}
<button
type="button"
class="btn btn-sm variant-filled-primary shadow-lg"
class="btn btn-sm preset-filled-primary"
onclick={on_save}
>
<Save size="1.1em" class="mr-2" /> Save

2
src/routes/journals/ae_comp__journal_entry_metadata.svelte
View File

@@ -40,7 +40,7 @@
</div>
{#if entry.journal_entry_type}
<span class="badge variant-soft-surface">
<span class="badge preset-tonal-surface">
Type: {entry.journal_entry_type}
</span>
{/if}

6
src/routes/journals/ae_comp__journal_entry_obj_file_li.svelte
View File

@@ -206,7 +206,7 @@
<Paperclip size="1.1em" />
Attachments
{#if unified_file_li.length}
<span class="badge variant-soft-surface text-xs"
<span class="badge preset-tonal-surface text-xs"
>{unified_file_li.length}</span
>
{/if}
@@ -215,7 +215,7 @@
{#if $ae_loc.edit_mode}
<button
type="button"
class="btn btn-sm variant-soft-warning font-semibold"
class="btn btn-sm preset-tonal-warning font-semibold"
onclick={() => {
$ae_sess.files.add_to_use_files_method =
$ae_sess.files.add_to_use_files_method === 'upload'
@@ -258,7 +258,7 @@
{#if $ae_loc.edit_mode}
<button
type="button"
class="btn btn-sm variant-soft-error"
class="btn btn-sm preset-tonal-error"
onclick={() => handle_remove_file(file_id)}
title="Remove attachment"
>

2
src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
View File

@@ -450,7 +450,7 @@
</div>
<button
type="button"
class="btn btn-sm variant-filled-error shadow-lg font-bold"
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

4
src/routes/journals/ae_comp__journal_entry_obj_li.svelte
View File

@@ -536,7 +536,7 @@
class:bg-green-100={$journals_loc.entry
.qry__category_code ==
journals_journal_entry_obj.category_code}
class="btn btn-sm variant-outline-secondary hover:preset-filled-secondary-500 transition py-1 px-2"
class="btn btn-sm preset-outlined-secondary hover:preset-filled-secondary-500 transition py-1 px-2"
title={`Filter by category: ${journals_journal_entry_obj.category_code}`}
>
<Shapes class="mx-1 inline-block" />
@@ -603,7 +603,7 @@ Journal ID: ${journals_journal_entry_obj?.journal_id}
duration-1000 hover:duration-200 active:duration-200
ease-in-out
active:z-10
hover:bg-blue-100 hover:border-blue-500 dark:hover:border-blue-500
hover:bg-blue-100 dark:hover:bg-blue-950 hover:border-blue-500 dark:hover:border-blue-500
overflow-scroll
{$journals_slct.journal_obj.cfg_json.entry_li_max_height
? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height}`

19
src/routes/journals/ae_comp__journal_entry_obj_qry.svelte
View File

@@ -110,7 +110,7 @@
title={`Search for Entries in "${$lq__journal_obj?.name}. Press Enter to search.`}
autocomplete="off"
class="
input input-sm input-bordered
input input-sm
w-44 md:w-52
text-sm
"
@@ -120,7 +120,7 @@
<button
type="submit"
class="btn btn-sm preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
class="btn btn-sm preset-filled-primary transition"
title="Perform detailed search"
>
<Library size="1.25em" />
@@ -138,9 +138,8 @@
}}
class="
btn btn-sm
preset-tonal-tertiary
preset-outlined-tertiary-100-900
hover:preset-filled-tertiary-100-900
preset-tonal-surface
hover:preset-filled-surface-500
transition-all
"
title="Clear search query text"
@@ -158,13 +157,7 @@
<span class="flex flex-row items-center gap-2">
<span class="text-sm text-gray-500 hidden md:inline"> Category: </span>
<select
class="
btn btn-sm
preset-tonal-tertiary
preset-outlined-tertiary-100-900
hover:preset-filled-tertiary-100-900
transition-all
"
class="select select-sm"
bind:value={$journals_loc.entry.qry__category_code}
onchange={(event) => {
handle_search_trigger();
@@ -183,7 +176,7 @@
class="flex flex-row flex-wrap items-center gap-2 border-l border-surface-300-700 pl-2"
>
<!-- Global Search hidden until backend supports person_id in entries 2026-01-27 -->
<!--
<!--
<label
class="flex items-center gap-1 cursor-pointer"
title="When enabled, searches all journals for this person. When disabled, only searches the current journal."

12
src/routes/journals/ae_comp__journal_entry_quick_add.svelte
View File

@@ -90,7 +90,7 @@
}
</script>
<div class="card p-4 space-y-4 variant-filled-surface {className}">
<div class="card p-4 space-y-4 preset-tonal-surface {className}">
<header
class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2"
>
@@ -102,7 +102,7 @@
{#if journals_li && journals_li.length > 0}
<div class="w-full sm:w-auto">
<select
class="select select-sm variant-filled-surface border-surface-500/30 font-bold"
class="select select-sm font-bold"
value={target_journal_id}
onchange={handle_journal_change}
>
@@ -115,12 +115,12 @@
</select>
</div>
{:else if !target_journal_id}
<span class="badge variant-filled-error">No Journal Selected</span>
<span class="badge preset-tonal-error">No Journal Selected</span>
{/if}
</header>
<textarea
class="textarea variant-filled-surface border-surface-500/20"
class="textarea"
rows="3"
bind:value={note_content}
{placeholder}
@@ -137,7 +137,7 @@
<div class="flex justify-end space-x-2 grow sm:grow-0">
<button
type="button"
class="btn btn-sm variant-ghost-surface"
class="btn btn-sm preset-tonal-surface"
onclick={() => (note_content = '')}
disabled={is_submitting || note_content.length === 0}
>
@@ -145,7 +145,7 @@
</button>
<button
type="button"
class="btn btn-sm variant-filled-primary font-bold shadow-md"
class="btn btn-sm preset-filled-primary font-bold"
onclick={handle_submit}
disabled={is_submitting ||
!target_journal_id ||

72
src/routes/journals/ae_comp__journal_obj_id_edit.svelte
View File

@@ -173,6 +173,7 @@
<Modal
bind:open={show}
autoclose={false}
dismissable={false}
placement="top-center"
size="xl"
class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
@@ -180,10 +181,13 @@
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"
>
{#snippet header()}
<h3 class="flex items-center gap-2 text-lg font-bold">
<h3 class="flex-1 flex items-center gap-2 text-lg font-bold">
<Settings class="text-primary-500" />
<span>Journal Config: {$lq__journal_obj?.name ?? '--'}</span>
</h3>
<button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show = false)}>
<X size="1.1em" />
</button>
{/snippet}
<div class="space-y-6 py-2 h-[75vh] overflow-y-auto px-4">
@@ -194,8 +198,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'actions'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'actions')}
>
<Zap size="1.1em" class="mr-1" /> Quick Actions
@@ -203,8 +207,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'general'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'general')}
>
<Layout size="1.1em" class="mr-1" /> General
@@ -212,8 +216,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'security'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'security')}
>
<ShieldCheck size="1.1em" class="mr-1" /> Status & Security
@@ -221,8 +225,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'ui'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'ui')}
>
<Palette size="1.1em" class="mr-1" /> UI/Visuals
@@ -230,8 +234,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'json'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'json')}
>
<CodeXml size="1.1em" class="mr-1" /> JSON
@@ -243,7 +247,7 @@
<section class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button
type="button"
class="btn variant-soft-secondary w-full py-4 text-lg font-bold"
class="btn preset-tonal-secondary w-full py-4 text-lg font-bold"
onclick={() => {
show = false;
on_new_entry?.();
@@ -253,7 +257,7 @@
</button>
<button
type="button"
class="btn variant-soft-surface w-full py-4"
class="btn preset-tonal-surface w-full py-4"
onclick={() => {
show = false;
on_show_export?.();
@@ -263,7 +267,7 @@
</button>
<button
type="button"
class="btn variant-soft-surface w-full py-4"
class="btn preset-tonal-surface w-full py-4"
onclick={() => {
show = false;
on_show_import?.();
@@ -284,7 +288,7 @@
<input
type="text"
bind:value={tmp__journal_obj.name}
class="input variant-form-material"
class="input"
placeholder="e.g. Personal Log"
/>
</label>
@@ -294,7 +298,7 @@
>
<textarea
bind:value={tmp__journal_obj.description}
class="textarea variant-form-material h-32"
class="textarea h-32"
placeholder="Describe the purpose of this journal..."
></textarea>
</label>
@@ -305,7 +309,7 @@
>
<select
bind:value={tmp__journal_obj.type_code}
class="select variant-form-material"
class="select"
>
{#each $journals_loc.journal.type_code_li as type (type.code)}
<option value={type.code}
@@ -321,7 +325,7 @@
<input
type="text"
bind:value={tmp__journal_obj.group}
class="input variant-form-material"
class="input"
placeholder="Standard"
/>
</label>
@@ -355,7 +359,7 @@
/>
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-error"
class="btn-icon btn-icon-sm preset-tonal-error"
onclick={() => {
tmp__journal_obj.cfg_json.category_li.splice(
i,
@@ -369,7 +373,7 @@
{/each}
<button
type="button"
class="btn btn-sm variant-soft-primary w-full mt-2"
class="btn btn-sm preset-tonal-primary w-full mt-2"
onclick={() => {
if (!tmp__journal_obj.cfg_json.category_li)
tmp__journal_obj.cfg_json.category_li = [];
@@ -456,7 +460,7 @@
<div class="flex items-center gap-2">
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-surface"
class="btn-icon btn-icon-sm preset-tonal-surface"
onclick={() => {
tmp__journal_obj.sort =
(tmp__journal_obj.sort ?? 0) - 1;
@@ -469,7 +473,7 @@
>
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-surface"
class="btn-icon btn-icon-sm preset-tonal-surface"
onclick={() => {
tmp__journal_obj.sort =
(tmp__journal_obj.sort ?? 0) + 1;
@@ -501,7 +505,7 @@
<input
type="password"
bind:value={tmp__journal_obj.passcode}
class="input variant-form-material grow"
class="input grow"
placeholder="Module-level passcode"
/>
<Fingerprint class="opacity-30" />
@@ -518,7 +522,7 @@
bind:value={
tmp__journal_obj.private_passcode
}
class="input variant-form-material grow"
class="input grow"
placeholder="User-level secret"
/>
<ShieldCheck class="opacity-30" />
@@ -537,7 +541,7 @@
<section class="pt-8">
<button
type="button"
class="btn btn-sm variant-filled-error w-full shadow-lg"
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 w-full shadow-lg"
onclick={delete_journal}
>
<Trash2 size="1.1em" class="mr-2" /> Delete Entire Journal
@@ -564,7 +568,7 @@
bind:value={
tmp__journal_obj.cfg_json.pref_viewer
}
class="select variant-form-material"
class="select"
>
<option value="rendered"
>Rendered HTML (Default)</option
@@ -583,7 +587,7 @@
bind:value={
tmp__journal_obj.cfg_json.pref_editor
}
class="select variant-form-material"
class="select"
>
<option value="textarea"
>Standard Textarea</option
@@ -601,7 +605,7 @@
bind:value={
tmp__journal_obj.cfg_json.color_scheme
}
class="select variant-form-material"
class="select"
>
<option value="">Default (Slate)</option>
<option value="blue">Deep Blue</option>
@@ -619,7 +623,7 @@
bind:value={
tmp__journal_obj.cfg_json.entry_add_text
}
class="select variant-form-material"
class="select"
>
<option value="append"
>Append to End (Default)</option
@@ -826,7 +830,7 @@
bind:value={
tmp__journal_obj.cfg_json.expand_li_content
}
class="select select-sm variant-form-material"
class="select"
>
<option value="click">Click to Expand</option>
<option value="hover">Hover to Expand</option>
@@ -842,7 +846,7 @@
tmp__journal_obj.cfg_json
.entry_li_max_height
}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="">Default</option>
<option value="max-h-16">Small (16)</option>
@@ -861,7 +865,7 @@
tmp__journal_obj.cfg_json
.entry_li_click_max_height
}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="">Default</option>
<option value="active:max-h-64"
@@ -895,14 +899,14 @@
<div class="flex gap-4">
<button
type="button"
class="btn variant-ghost-surface font-bold min-w-[100px]"
class="btn preset-tonal-surface font-bold min-w-[100px]"
onclick={() => (show = false)}
>
<X size="1.2em" class="mr-2" /> Cancel
</button>
<button
type="button"
class="btn variant-filled-primary font-bold shadow-lg min-w-[120px]"
class="btn preset-filled-primary font-bold min-w-[120px]"
onclick={() => handle_update_journal(true)}
>
<Check size="1.2em" class="mr-2" /> Save Changes

9
src/routes/journals/ae_comp__journal_obj_id_view.svelte
View File

@@ -177,7 +177,8 @@
rounded-lg p-2 m-2 w-full
flex flex-col flex-wrap items-center justify-center
bg-{$lq__journal_obj?.cfg_json.color_scheme}-100
text-gray-900 dark:text-gray-900
dark:bg-gray-800
text-gray-900 dark:text-gray-100
"
bind:clientHeight={$ae_loc.iframe_height_modal_body}
>
@@ -215,7 +216,7 @@
type="button"
onclick={() =>
($journals_sess.show__modal_edit__journal_obj = true)}
class="btn variant-filled-secondary py-1 px-3 shadow-md"
class="btn preset-tonal-secondary py-1 px-3 shadow-md"
title="Journal Config & Actions"
>
<Settings size="1.2em" class="mr-2" />
@@ -230,7 +231,7 @@
type="text"
bind:value={typed_journal_passcode}
placeholder="Passcode"
class="input input-sm variant-form-material w-32"
class="input input-sm w-32"
/>
</div>
{/if}
@@ -247,7 +248,7 @@
w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md)
font-mono
text-gray-900
dark:bg-blue-900/40 dark:text-gray-100
dark:bg-gray-700 dark:text-gray-100
shadow-md rounded-lg
text-sm font-normal text-wrap word-break

6
src/routes/journals/ae_comp__journal_obj_li.svelte
View File

@@ -111,7 +111,7 @@
>
<a
href="/journals/{journal?.journal_id}"
class="btn variant-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all"
class="btn preset-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all"
>
<BookOpenText size="1.2em" class="mr-2" />
<span>Open Journal</span>
@@ -138,13 +138,13 @@
<div class="absolute -top-2 -right-2 flex gap-1">
{#if journal.hide}
<span
class="badge-icon variant-filled-surface shadow-sm"
class="badge-icon preset-tonal-surface shadow-sm"
title="Hidden">🚫</span
>
{/if}
{#if !journal.enable}
<span
class="badge-icon variant-filled-warning shadow-sm"
class="badge-icon preset-tonal-warning shadow-sm"
title="Disabled">⚠️</span
>
{/if}

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

@@ -63,6 +63,7 @@
<Modal
bind:open={show}
autoclose={false}
dismissable={false}
placement="top-center"
size="xl"
class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
@@ -70,10 +71,13 @@
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"
>
{#snippet header()}
<h3 class="flex items-center gap-2 text-lg font-bold">
<h3 class="flex-1 flex items-center gap-2 text-lg font-bold">
<Wrench class="text-primary-500" />
<span>&AElig; Journals Module Config</span>
</h3>
<button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show = false)}>
<X size="1.1em" />
</button>
{/snippet}
<div class="space-y-6 py-2 h-[60vh] overflow-y-auto px-4">
@@ -84,8 +88,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'form'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'form')}
>
<Settings size="1.1em" class="mr-1" /> Config
@@ -93,8 +97,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'local_json'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'local_json')}
>
<Database size="1.1em" class="mr-1" /> Local JSON
@@ -102,8 +106,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'session_json'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'session_json')}
>
<CodeXml size="1.1em" class="mr-1" /> Session JSON
@@ -127,7 +131,7 @@
>
<select
bind:value={tmp_config.datetime_format}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="datetime_12_short"
>MMM D, YY hh:mm A</option
@@ -155,7 +159,7 @@
>
<select
bind:value={tmp_config.time_format}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="time_12_short"
>12-hour short (3:30 PM)</option
@@ -235,7 +239,7 @@
>
<select
bind:value={tmp_config.journal.qry__enabled}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="enabled">Enabled Only</option>
<option value="not_enabled"
@@ -252,7 +256,7 @@
>
<select
bind:value={tmp_config.journal.qry__hidden}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="not_hidden">Visible Only</option>
<option value="hidden">Hidden Only</option>
@@ -267,7 +271,7 @@
>
<select
bind:value={tmp_config.journal.qry__limit}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value={10}>10</option>
<option value={20}>20</option>
@@ -296,7 +300,7 @@
>
<select
bind:value={tmp_config.entry.qry__enabled}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="enabled">Enabled Only</option>
<option value="not_enabled"
@@ -313,7 +317,7 @@
>
<select
bind:value={tmp_config.entry.qry__hidden}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value="not_hidden">Visible Only</option>
<option value="hidden">Hidden Only</option>
@@ -328,7 +332,7 @@
>
<select
bind:value={tmp_config.entry.qry__limit}
class="select select-sm variant-form-material"
class="select select-sm"
>
<option value={10}>10</option>
<option value={20}>20</option>
@@ -398,14 +402,14 @@
<div class="flex gap-4">
<button
type="button"
class="btn variant-ghost-surface font-bold min-w-[100px]"
class="btn preset-tonal-surface font-bold min-w-[100px]"
onclick={() => (show = false)}
>
<X size="1.2em" class="mr-2" /> Cancel
</button>
<button
type="button"
class="btn variant-filled-primary font-bold shadow-lg min-w-[120px]"
class="btn preset-filled-primary font-bold shadow-lg min-w-[120px]"
onclick={handle_save}
>
<Check size="1.2em" class="mr-2" /> Save Changes

125
src/routes/journals/ae_comp__modal_journal_entry_append.svelte
View File

@@ -147,78 +147,67 @@
size="xl"
class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col gap-1 mx-auto w-full"
>
<div class="modal">
<div class="modal-box">
<div class="flex flex-col gap-1">
<!-- Checkbox Options -->
<div>
<input
type="checkbox"
id="append_timestamp_header"
bind:checked={add_timestamp_header}
class="p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 inline-block"
/>
<label
for="append_timestamp_header"
class="p-2 inline-block"
>
Use timestamp as Markdown header
</label>
<input
type="checkbox"
id="append_timestamp_header_w_day_of_week"
bind:checked={add_timestamp_header_w_day_of_week}
class="p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 inline-block"
/>
<label
for="append_timestamp_header_w_day_of_week"
class="p-2 inline-block"
>
Include day of week
</label>
</div>
<!-- Text Header Input -->
<div class="flex flex-col gap-3">
<!-- Checkbox Options -->
<div class="flex flex-wrap gap-4">
<label class="flex items-center gap-2">
<input
type="text"
placeholder="Markdown header for content (Optional)"
bind:value={add_text_header}
class="grow min-h-12 h-full w-full p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500"
type="checkbox"
id="append_timestamp_header"
bind:checked={add_timestamp_header}
class="checkbox"
/>
<span>Use timestamp as Markdown header</span>
</label>
<!-- Main Content Area -->
<textarea
bind:value={add_text}
class="grow min-h-48 h-full w-full p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500"
placeholder="Content to {mode === 'auto'
? journal_config?.entry_add_text
: mode}..."
>
</textarea>
</div>
<label class="flex items-center gap-2">
<input
type="checkbox"
id="append_timestamp_header_w_day_of_week"
bind:checked={add_timestamp_header_w_day_of_week}
class="checkbox"
/>
<span>Include day of week</span>
</label>
</div>
<div class="modal-action flex justify-end gap-2 mt-4">
<button
type="button"
disabled={!has_changes}
onclick={handle_save}
class="btn btn-sm md:btn-md lg:btn-lg min-w-32 hover:variant-outline-success hover:preset-filled-success-500"
class:preset-filled-primary-500={has_changes}
class:preset-filled-surface-500={!has_changes}
>
<Check class="mr-1" />
Update
</button>
<button
type="button"
onclick={on_close}
class="btn preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition"
>
<X class="mr-1" />
Cancel
</button>
</div>
<!-- Text Header Input -->
<input
type="text"
placeholder="Markdown header for content (Optional)"
bind:value={add_text_header}
class="input"
/>
<!-- Main Content Area -->
<textarea
bind:value={add_text}
class="textarea min-h-48"
placeholder="Content to {mode === 'auto'
? journal_config?.entry_add_text
: mode}..."
>
</textarea>
<div class="flex justify-end gap-2 mt-2">
<button
type="button"
disabled={!has_changes}
onclick={handle_save}
class="btn preset-filled-primary"
class:opacity-50={!has_changes}
>
<Check class="mr-1" />
Update
</button>
<button
type="button"
onclick={on_close}
class="btn preset-tonal-surface"
>
<X class="mr-1" />
Cancel
</button>
</div>
</div>
</Modal>

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

@@ -109,6 +109,7 @@
<Modal
bind:open={show}
autoclose={false}
dismissable={false}
placement="top-center"
size="lg"
class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
@@ -116,10 +117,13 @@
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"
>
{#snippet header()}
<h3 class="flex items-center gap-2 text-lg font-bold">
<h3 class="flex-1 flex items-center gap-2 text-lg font-bold">
<Settings class="text-primary-500" />
<span>Entry Config: {tmp_entry_obj.name || '--'}</span>
</h3>
<button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show = false)}>
<X size="1.1em" />
</button>
{/snippet}
<div class="space-y-6 py-2 h-[60vh] overflow-y-auto px-4">
@@ -130,8 +134,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'actions'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'actions')}
>
<Zap size="1.1em" class="mr-1" /> Quick Actions
@@ -139,8 +143,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'meta'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'meta')}
>
<Shapes size="1.1em" class="mr-1" /> Metadata
@@ -148,8 +152,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'security'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'security')}
>
<ShieldCheck size="1.1em" class="mr-1" /> Status & Security
@@ -157,8 +161,8 @@
<button
type="button"
class="btn btn-sm transition-all {tab === 'json'
? 'variant-filled-primary'
: 'variant-soft-surface'}"
? 'preset-filled-primary'
: 'preset-tonal-surface'}"
onclick={() => (tab = 'json')}
>
<CodeXml size="1.1em" class="mr-1" /> JSON
@@ -170,7 +174,7 @@
<section class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button
type="button"
class="btn variant-soft-secondary w-full"
class="btn preset-tonal-secondary w-full"
onclick={() => {
show = false;
on_prepend?.();
@@ -180,7 +184,7 @@
</button>
<button
type="button"
class="btn variant-soft-secondary w-full"
class="btn preset-tonal-secondary w-full"
onclick={() => {
show = false;
on_append?.();
@@ -190,7 +194,7 @@
</button>
<button
type="button"
class="btn variant-soft-surface w-full"
class="btn preset-tonal-surface w-full"
onclick={() => {
show = false;
on_show_export?.();
@@ -200,7 +204,7 @@
</button>
<button
type="button"
class="btn variant-soft-surface w-full"
class="btn preset-tonal-surface w-full"
onclick={() => {
/* Clone logic here */ alert(
'Clone not yet implemented in modal'
@@ -221,8 +225,8 @@
type="button"
class="btn btn-sm {tmp_entry_obj.category_code ===
cat.code
? 'variant-filled-primary'
: 'variant-soft-primary'}"
? 'preset-filled-primary'
: 'preset-tonal-primary'}"
onclick={() => {
tmp_entry_obj.category_code = cat.code;
handle_update_entry();
@@ -240,7 +244,7 @@
<label class="label">
<span class="text-sm font-bold opacity-70">Category</span>
<select
class="select variant-form-material"
class="select"
bind:value={tmp_entry_obj.category_code}
onchange={() => {
handle_update_entry();
@@ -263,7 +267,7 @@
<input
type="text"
bind:value={tmp_entry_obj.tags}
class="input variant-form-material grow"
class="input grow"
placeholder="meeting, urgent, ideas"
onchange={() => {
handle_update_entry();
@@ -287,7 +291,7 @@
handle_update_entry();
on_save();
}}
class="input variant-form-material"
class="input"
/>
</label>
<label class="label">
@@ -297,7 +301,7 @@
<div class="flex items-center gap-2">
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-surface"
class="btn-icon btn-icon-sm preset-tonal-surface"
onclick={() => {
tmp_entry_obj.sort =
(tmp_entry_obj.sort ?? 0) - 1;
@@ -310,7 +314,7 @@
>
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-surface"
class="btn-icon btn-icon-sm preset-tonal-surface"
onclick={() => {
tmp_entry_obj.sort =
(tmp_entry_obj.sort ?? 0) + 1;
@@ -402,7 +406,7 @@
<div class="flex items-center gap-2">
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-surface"
class="btn-icon btn-icon-sm preset-tonal-surface"
onclick={() => {
tmp_entry_obj.sort =
(tmp_entry_obj.sort ?? 0) - 1;
@@ -416,7 +420,7 @@
>
<button
type="button"
class="btn-icon btn-icon-sm variant-soft-surface"
class="btn-icon btn-icon-sm preset-tonal-surface"
onclick={() => {
tmp_entry_obj.sort =
(tmp_entry_obj.sort ?? 0) + 1;
@@ -466,7 +470,7 @@
</p>
<button
type="button"
class="btn btn-sm variant-filled-error w-full font-bold"
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 w-full font-bold"
onclick={() => {
show = false;
on_force_reset?.();
@@ -481,7 +485,7 @@
<section class="pt-12">
<button
type="button"
class="btn btn-sm variant-soft-error w-full"
class="btn btn-sm preset-tonal-error w-full"
onclick={() => {
alert('Delete logic handled in parent component');
}}
@@ -505,7 +509,7 @@
{#snippet footer()}
<button
type="button"
class="btn variant-filled-primary font-bold shadow-lg min-w-[120px]"
class="btn preset-filled-primary font-bold min-w-[120px]"
onclick={() => (show = false)}
>
<Check size="1.2em" class="mr-2" />

4
src/routes/journals/ae_comp__modal_journal_export.svelte
View File

@@ -145,7 +145,7 @@
{#each templates as template (template.id)}
<button
type="button"
class="btn variant-ringed-surface flex flex-col gap-1 p-2 h-24 items-center justify-center border-2 text-center {selected_template_id ===
class="btn preset-outlined-surface flex flex-col gap-1 p-2 h-24 items-center justify-center border-2 text-center {selected_template_id ===
template.id
? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
: 'opacity-60'}"
@@ -201,7 +201,7 @@
<div class="flex gap-2">
<button
type="button"
class="btn variant-soft-primary"
class="btn preset-tonal-primary"
onclick={handle_copy}
>
<Copy class="mr-2" size="1.2em" /> Copy to Clipboard

8
src/routes/journals/ae_comp__obj_core_props.svelte
View File

@@ -135,7 +135,7 @@
obj_sort = obj_sort ? obj_sort + 1 : 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-tertiary transition hover:preset-filled-tertiary-500"
title="Increment sort order of this journal entry"
>
<Plus strokeWidth="2.5" color="blue" />
@@ -154,7 +154,7 @@
obj_sort = obj_sort ? obj_sort - 1 : 0;
// update_journal_entry();
}}
class="btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
class="btn-icon btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
title="Decrement sort order of this journal entry"
>
<Minus strokeWidth="2.5" color="blue" />
@@ -199,7 +199,7 @@
// update_journal_entry();
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition *:hover:inline"
class="btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition"
title="Clear the archive on datetime for this journal entry"
>
<X strokeWidth="2.5" color="red" />
@@ -220,7 +220,7 @@
// update_journal_entry();
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition *:hover:inline"
class="btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition"
title="Set the archive on datetime for this journal entry"
>
<Clock strokeWidth="2.5" color="blue" />