From 15cb0aa0c51e1033e9f6ac3ba9a11d03dddb34bf Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 30 Apr 2025 17:30:06 -0400
Subject: [PATCH] Got themes working again.

---
 src/lib/ae_journals/ae_journals__journal.ts   |   4 +-
 src/lib/ae_journals/db_journals.ts            |   4 +-
 src/lib/ae_stores.ts                          |   2 +-
 src/lib/element_app_cfg.svelte                |  56 +-------
 src/lib/element_theme.svelte                  | 129 ++++++++++++++++++
 .../journals/[journal_id]/+layout.svelte      | 103 +++++++++-----
 .../ae_comp__journal_entry_obj_id_view.svelte |   4 +
 .../ae_comp__journal_entry_obj_li.svelte      |  23 +++-
 .../ae_comp__journal_obj_id_view.svelte       |   7 +-
 9 files changed, 238 insertions(+), 94 deletions(-)
 create mode 100644 src/lib/element_theme.svelte

diff --git a/src/lib/ae_journals/ae_journals__journal.ts b/src/lib/ae_journals/ae_journals__journal.ts
index fcda9eeb..cbd22a4a 100644
--- a/src/lib/ae_journals/ae_journals__journal.ts
+++ b/src/lib/ae_journals/ae_journals__journal.ts
@@ -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,
diff --git a/src/lib/ae_journals/db_journals.ts b/src/lib/ae_journals/db_journals.ts
index 99a673bd..503bd65a 100644
--- a/src/lib/ae_journals/db_journals.ts
+++ b/src/lib/ae_journals/db_journals.ts
@@ -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
diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index aff57f76..6813da1a 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -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 = {
diff --git a/src/lib/element_app_cfg.svelte b/src/lib/element_app_cfg.svelte
index 4e43576a..05fe32aa 100644
--- a/src/lib/element_app_cfg.svelte
+++ b/src/lib/element_app_cfg.svelte
@@ -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 -->
 
 
diff --git a/src/lib/element_theme.svelte b/src/lib/element_theme.svelte
new file mode 100644
index 00000000..1aa6a8b0
--- /dev/null
+++ b/src/lib/element_theme.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/routes/journals/[journal_id]/+layout.svelte b/src/routes/journals/[journal_id]/+layout.svelte
index 35756de5..1fddfa2e 100644
--- a/src/routes/journals/[journal_id]/+layout.svelte
+++ b/src/routes/journals/[journal_id]/+layout.svelte
@@ -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>
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
index d926563c..8d2884d7 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
@@ -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
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
index 3a5c4e9a..bb0f606e 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
@@ -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"
diff --git a/src/routes/journals/ae_comp__journal_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
index 0ed77967..fb9ed03e 100644
--- a/src/routes/journals/ae_comp__journal_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
@@ -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
             "
         >