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

Got themes working again.

Browse Source
This commit is contained in:
Scott Idem
2025-04-30 17:30:06 -04:00
parent d7a1c03beb
commit 15cb0aa0c5
9 changed files with 238 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/ae_journals/ae_journals__journal.ts
View File

@@ -591,9 +591,11 @@ export function db_save_ae_obj_li__journal(
passcode_write: obj.passcode_write,
passcode_write_expire: obj.passcode_write_expire,
passcode: obj.passcode,
passcode: obj.passcode, // For Journal Entry encryption password
passcode_timeout: obj.passcode_timeout,
auth_key: obj.auth_key, // For Journal authorization without sign in
enable: obj.enable,
hide: obj.hide,
priority: obj.priority,

4
src/lib/ae_journals/db_journals.ts
View File

@@ -68,9 +68,11 @@ export interface Journal {
passcode_write?: null|string;
passcode_write_expire?: null|Date
passcode?: null|string;
passcode?: null|string; // For Journal Entry encryption password
passcode_timeout?: null|number; // Timeout in seconds
auth_key?: null|string; // For Journal authorization without sign in
enable: null|boolean;
hide?: null|boolean;
archive?: null|boolean; // Archive the journal

2
src/lib/ae_stores.ts
View File

@@ -48,7 +48,7 @@ export let ae_snip = string_snippets;
// Set the version for the app data. Changing this should force a notification and ask the user to clear and reload the page.
let ver = '2025-04-30_1320'; // KEEP: 2025-04-18_1335 and 2025-04-29_1545
let ver_idb = '2025-04-18_1100'; // Not used
let ver_idb = '2025-04-18_1100'; // Not currently used
// *** BEGIN *** Longer-term app data. This should be stored to local storage.
const ae_app_local_data_defaults: key_val = {

56
src/lib/element_app_cfg.svelte
View File

@@ -5,6 +5,8 @@ import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import Element_theme from '$lib/element_theme.svelte';
let notes: null|string = null;
let all: boolean = false;
@@ -159,57 +161,11 @@ function handle_clear_storage(item: null|string) {
</section>
<!-- END: Access Type -->
<Element_theme
set_theme_mode={set_theme_mode}
set_theme_name={set_theme_name}
/>
<section class="space-y-2">
<h2 class="strong">Theme:</h2>
<div>
<!-- Light/Dark Theme: -->
<RadioGroup
active="variant-glass-success"
hover="hover:variant-ringed-surface"
>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.app_cfg.theme_mode}
name="theme_light"
value={'light'}
>
Light
</RadioItem>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.app_cfg.theme_mode}
name="theme_dark"
value={'dark'}
>
Dark
</RadioItem>
</RadioGroup>
</div>
<div>
<!-- Theme Name: -->
<select
on:change={() => {
$slct_trigger = 'set_theme_name';
}}
bind:value={$ae_loc.app_cfg.theme_name}
class="select"
title="Theme name"
>
<option value="">-- None --</option>
<option value="gold-nouveau">Gold Nouveau</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="rocket">Rocket</option>
<option value="wintry">Wintry</option>
</select>
</div>
</section>
<!-- END: Theme -->

129
src/lib/element_theme.svelte Normal file
View File

@@ -0,0 +1,129 @@
<script lang="ts">
import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
import {
Moon, Sun
} from '@lucide/svelte';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
interface Props {
set_theme_mode: any;
set_theme_name: any;
}
let { set_theme_mode, set_theme_name }: Props = $props();
</script>
<!-- Change light and dark mode -->
<!--
if ($ae_loc.app_cfg.theme_mode == 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
} else if ($ae_loc.app_cfg.theme_mode == 'dark') {
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}
-->
<div>
<button
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary"
onclick={() => {
if ($ae_loc.theme_mode == 'light') {
$ae_loc.theme_mode = 'dark';
} else if ($ae_loc.theme_mode == 'dark') {
$ae_loc.theme_mode = 'light';
}
if ($ae_loc.theme_mode == 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
} else if ($ae_loc.theme_mode == 'dark') {
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}
}}
title="Change light and dark mode"
>
<!-- <span class="fas fa-adjust"></span> -->
{#if $ae_loc.theme_mode == 'light'}
<Sun />
<span class="hidden md:inline">Light Mode</span>
{:else if $ae_loc.theme_mode == 'dark'}
<Moon />
<span class="hidden md:inline">Dark Mode</span>
{/if}
<span class="hidden md:inline">
Change Theme
</span>
</button>
<!-- <button
class="btn btn-sm variant-ghost-surface hover:variant-filled-success"
onclick={() => {
if ($ae_loc.app_cfg.theme_mode == 'light') {
$ae_loc.app_cfg.theme_mode = 'dark';
} else if ($ae_loc.app_cfg.theme_mode == 'dark') {
$ae_loc.app_cfg.theme_mode = 'light';
}
}}
title="Change light and dark mode"
>
<span class="fas fa-adjust"></span>
<span class="hidden md:inline">
Change Theme
</span>
</button> -->
</div>
<section class="space-y-2">
<h2 class="strong">Theme:</h2>
<div>
<!-- Light/Dark Theme: -->
<RadioGroup
active="variant-glass-success"
hover="hover:variant-ringed-surface"
>
<RadioItem
onchange={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.theme_mode}
name="theme_light"
value={'light'}
>
Light
</RadioItem>
<RadioItem
onchange={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.theme_mode}
name="theme_dark"
value={'dark'}
>
Dark
</RadioItem>
</RadioGroup>
</div>
<div>
<!-- Theme Name: -->
<select
onchange={() => {
$slct_trigger = 'set_theme_name';
}}
bind:value={$ae_loc.theme_name}
class="select"
title="Theme name"
>
<option value="">-- None --</option>
<option value="gold-nouveau">Gold Nouveau</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="rocket">Rocket</option>
<option value="wintry">Wintry</option>
</select>
</div>
</section>

103
src/routes/journals/[journal_id]/+layout.svelte
View File

@@ -84,6 +84,7 @@ async function handle_update_journal() {
type_code: $journals_slct.tmp_journal_obj.type_code,
passcode: $journals_slct.tmp_journal_obj.passcode,
passcode_timeout: $journals_slct.tmp_journal_obj.passcode_timeout,
auth_key: $journals_slct.tmp_journal_obj.auth_key, // The Journal Entry encryption password
cfg_json: $journals_slct.tmp_journal_obj.cfg_json
@@ -198,6 +199,7 @@ async function handle_update_journal() {
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;
@@ -329,62 +331,93 @@ async function handle_update_journal() {
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 mx-auto w-full divide-y"
>
<div class="modal">
<div class="modal-box">
<div class="modal-box mx-2 mb-10">
<!-- <h3 class="font-bold text-lg">Edit Journal</h3> -->
<div class="py-4">
<div class="py-4 mb-2">
<label class="text-sm text-gray-500 hidden sm:inline">
Journal Name:
<input type="text" placeholder="Journal Name" bind:value={$journals_slct.tmp_journal_obj.name} class="input input-bordered w-full mb-2" />
</label>
<!-- Journal Description (Markdown) -->
<label class="text-sm text-gray-500 hidden sm:inline">
Journal Description:
<textarea
placeholder="Journal Description (Markdown format)"
bind:value={$journals_slct.tmp_journal_obj.description}
class="input input-bordered w-full mb-2 h-32 resize-none"
title="Description of the journal (supports Markdown)"
></textarea>
</label>
<input type="text" placeholder="Journal Type" bind:value={$journals_slct.tmp_journal_obj.type_code} class="input input-bordered w-full mb-2" />
<!-- input for passcode -->
<input type="text" placeholder="Passcode" bind:value={$journals_slct.tmp_journal_obj.passcode} class="input input-bordered w-full mb-2" />
<!-- input for passcode timeout -->
<input type="number" placeholder="Passcode Timeout" bind:value={$journals_slct.tmp_journal_obj.passcode_timeout} class="input input-bordered w-full mb-2" />
<div class="*:hover:inline">
<!-- input for passcode -->
<label
class="text-sm text-gray-500">
Passcode:
<input type="text" placeholder="Passcode" bind:value={$journals_slct.tmp_journal_obj.passcode} class="input input-bordered w-64 mb-2" />
</label>
<div class="text-xs text-gray-500 hidden md:inline">
<span class="text-red-500">*</span> This passcode is used to encrypt the Journal Entries.
</div>
<!-- input for passcode timeout -->
<label class="text-sm text-gray-500">
Passcode Timeout:
<input type="number" placeholder="Passcode Timeout" bind:value={$journals_slct.tmp_journal_obj.passcode_timeout} class="input input-bordered w-32 mb-2" />
</label>
</div>
<!-- input for auth_key -->
<label class="text-sm text-gray-500 sm:inline">
Auth Key:
<input type="text" placeholder="Auth Key" bind:value={$journals_slct.tmp_journal_obj.auth_key} class="input input-bordered w-64 mb-2" />
</label>
<label class="text-sm text-gray-500">
Journal Type:
<input type="text" placeholder="Journal Type" bind:value={$journals_slct.tmp_journal_obj.type_code} class="input input-bordered w-48 mb-2" />
</label>
<!-- select option for journal type_code -->
<span class="text-sm text-gray-500 hidden sm:inline">
<div>
<span class="text-sm text-gray-500 sm:inline">
Journal Type:
</span>
<select
class="btn btn-sm
variant-ghost-surface
hover:variant-filled-surface
transition
text-xs
"
bind:value={$journals_slct.tmp_journal_obj.type_code}
onchange={(event) => {
// Update the cfg_json with the selected journal type. Example cate
$journals_slct.tmp_journal_obj.type_code = event.target.value;
console.log('Selected journal type:', $journals_slct.tmp_journal_obj.type_code);
}}
title="Select a journal type"
>
<option value="">Select Journal Type</option>
{#each $journals_loc.journal.type_code_li as journal_type}
<option value={journal_type.code}>{journal_type.name}</option>
{/each}
</select>
<select
class="btn btn-sm
variant-ghost-surface
hover:variant-filled-surface
transition
text-xs
"
bind:value={$journals_slct.tmp_journal_obj.type_code}
onchange={(event) => {
// Update the cfg_json with the selected journal type. Example cate
$journals_slct.tmp_journal_obj.type_code = event.target.value;
console.log('Selected journal type:', $journals_slct.tmp_journal_obj.type_code);
}}
title="Select a journal type"
>
<option value="">Select Journal Type</option>
{#each $journals_loc.journal.type_code_li as journal_type}
<option value={journal_type.code}>{journal_type.name}</option>
{/each}
</select>
</div>
<div>
<!-- inputs for customizable journal category list -->
<!-- each category has a code and name; need to be able to add and remove categories -->
<span class="text-sm text-gray-500 hidden sm:inline">
<div class="text-sm text-gray-500 hidden sm:inline">
Journal Categories:
</span>
<div class="flex flex-col gap-1">
</div>
<div class="flex flex-col gap-1 p-4">
{#each $journals_slct.tmp_journal_obj.cfg_json.category_li as category, index}
<div class="flex flex-row items-center gap-1">
<input type="text" placeholder="Category Code" bind:value={$journals_slct.tmp_journal_obj.cfg_json.category_li[index].code} class="input input-bordered w-full" />
<input type="text" placeholder="Category Code" bind:value={$journals_slct.tmp_journal_obj.cfg_json.category_li[index].code} class="input input-bordered w-48" />
<input type="text" placeholder="Category Name" bind:value={$journals_slct.tmp_journal_obj.cfg_json.category_li[index].name} class="input input-bordered w-full" />
<button
type="button"
@@ -405,7 +438,7 @@ async function handle_update_journal() {
$journals_slct.tmp_journal_obj.cfg_json.category_li.push({ code: '', name: '' });
$journals_slct.tmp_journal_obj.cfg_json.category_li = $journals_slct.tmp_journal_obj.cfg_json.category_li;
}}
class="btn btn-sm variant-ghost-success hover:variant-filled-success transition max-w-96"
class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition max-w-48 p-1"
>
<Plus />
Add Category
@@ -424,7 +457,7 @@ async function handle_update_journal() {
$journals_slct.tmp_journal_obj.cfg_json.entry_li_max_height = event.target.value;
console.log('Selected max height:', $journals_slct.tmp_journal_obj.cfg_json.entry_li_max_height);
}}
class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-96"
class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-48"
title="Select maximum height for journal entries in the list"
>
<option value="">Default (auto)</option>
@@ -451,7 +484,7 @@ async function handle_update_journal() {
$journals_slct.tmp_journal_obj.cfg_json.color_scheme = event.target.value;
console.log('Selected color scheme:', $journals_slct.tmp_journal_obj.cfg_json.color_scheme);
}}
class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-96"
class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-48"
title="Select color scheme for journal entries"
>
<option value="">Default (auto)</option>

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

@@ -10,6 +10,7 @@ import {
Eye, EyeOff,
Flag, FlagOff, FileX, Fingerprint,
Globe, Group,
LockKeyholeOpen,
MessageSquareWarning, Minus,
NotebookPen, NotebookText, NotepadTextDashed,
Pencil, PenLine, Plus,
@@ -742,12 +743,15 @@ $effect(async () => {
title="Toggle private visibility of this journal entry"
>
{#if $lq__journal_entry_obj?.private && decrypted_content}
<LockKeyholeOpen strokeWidth="2.5" color="red" />
{:else if $lq__journal_entry_obj?.private && $ae_loc.edit_mode}
<Fingerprint strokeWidth="2.5" color="red" />
{:else if $lq__journal_entry_obj?.private}
<Fingerprint strokeWidth="2.5" color="green" />
{:else}
<Fingerprint strokeWidth="1" color="gray" />
{/if}
</button>
<button

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

@@ -100,7 +100,7 @@ $effect(() => {
</script>
<section class="journal_list flex flex-col gap-2 items-center justify-center w-full">
<section class="journal_list flex flex-col gap-1 md:gap-2 items-center justify-center w-full">
{#if $lq__journal_entry_obj_li && $lq__journal_entry_obj_li.length}
<!-- <div class="ae_group">
@@ -113,7 +113,19 @@ $effect(() => {
<div
class="container journal journal_entry_obj border border-1 p-2 mb-2 space-y-2 w-full max-w-screen-lg flex flex-col items-center justify-center bg-white rounded-lg"
class="
container journal journal_entry_obj
border border-1
px-2 py-1 space-y-1
w-full max-w-screen-lg
flex flex-col items-center justify-center
bg-white text-gray-900
dark:bg-gray-800 dark:text-gray-200
rounded-lg
hover:bg-gray-100
hover:border-gray-300
transition-all duration-500 ease-out
"
class:dim={!journals_journal_entry_obj.enable}
class:bg-warning-100={!journals_journal_entry_obj?.enable}
>
@@ -419,7 +431,7 @@ $effect(() => {
shadow-lg rounded-lg
border border-gray-200 dark:border-gray-700
text-wrap text-sm font-mono whitespace-pre-wrap
delay-1000 duration-300 hover:delay-500 hover:duration-300 transition-all hover:transition-all ease-in-out
delay-1000 duration-300 hover:delay-1000 hover:duration-300 transition-all hover:transition-all ease-out
hover:z-10 hover:h-auto hover:max-h-full
hover:bg-blue-100 hover:border-blue-500 dark:hover:border-blue-500
{$journals_slct.journal_obj.cfg_json.entry_li_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height} overflow-scroll` : ''}
@@ -465,7 +477,10 @@ $effect(() => {
{/if} -->
<!-- </div> -->
<section class="ae_section journal_entry__entry">
<section
class:hidden={!journals_journal_entry_obj?.original_datetime && !journals_journal_entry_obj?.original_timezone}
class="ae_section journal_entry__entry"
>
<!-- {#if journals_journal_entry_obj?.description}
<div
class="journal_entry__description ae_description"

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

@@ -36,11 +36,12 @@ let { log_lvl = 0,
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
"
bind:clientHeight={$ae_loc.iframe_height_modal_body}>
<header class="ae_header journal__header">
<h2 class="journal__name h3 text-center">
<h2 class="journal__name h3 text-center ">
<BookOpenText class="inline-block" />
{@html $lq__journal_obj?.name ?? 'Loading...'}
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
@@ -56,6 +57,7 @@ let { log_lvl = 0,
<!-- 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}
<div
@@ -67,7 +69,7 @@ let { log_lvl = 0,
w-full max-w-screen-md
font-mono
text-gray-900
dark:bg-blue-900 dark:text-gray-100
dark:bg-blue-900/40 dark:text-gray-100
shadow-md rounded-lg
text-sm font-normal text-wrap word-break
@@ -76,6 +78,7 @@ let { log_lvl = 0,
prose-h2:underline
prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0
prose-li:m-0 prose-li:p-0 prose-li:line-height-none
"
>