Now with extra save buttons

src/routes/journals/[journal_id]/+layout.svelte

@@ -384,9 +384,9 @@ 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 mx-2 mb-10">
+        <div class="modal-box mx-2 mb-14 space-y-4">
             <!-- <h3 class="font-bold text-lg">Edit Journal</h3> -->
-            <div class="py-4 mb-2">
+            <div class="py-2 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" />
@@ -403,8 +403,6 @@ async function handle_update_journal() {
                     ></textarea>
                 </label>
 
-
-
                 <div class="*:hover:inline">
                     <!-- input for passcode -->
                     <label
@@ -429,11 +427,11 @@ async function handle_update_journal() {
                     <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 -->
                 <div>
                     <span class="text-sm text-gray-500 sm:inline">
@@ -461,7 +459,7 @@ async function handle_update_journal() {
                     </select>
                 </div>
 
-                <div>
+                <div class="flex flex-row gap-1 items-center judify-start">
                     <!-- inputs for customizable journal category list -->
                     <!-- each category has a code and name; need to be able to add and remove categories -->
                     <div class="text-sm text-gray-500 hidden sm:inline">
@@ -500,7 +498,7 @@ async function handle_update_journal() {
                 </div>
 
                 <!-- Select max height options (Tailwind CSS) -->
-                <div>
+                <div class="flex flex-row gap-1 items-center judify-start">
                     <span class="text-sm text-gray-500 hidden sm:inline">
                         Journal Entry List Max Height:
                     </span>
@@ -525,7 +523,7 @@ async function handle_update_journal() {
                 </div>
 
                 <!-- Select hover max height options (Tailwind CSS) -->
-                <div>
+                <div class="flex flex-row gap-1 items-center judify-start">
                     <span class="text-sm text-gray-500 hidden sm:inline">
                         Journal Entry List Hover Max Height:
                     </span>
@@ -552,7 +550,7 @@ async function handle_update_journal() {
                 <!-- Select color scheme for the journal entries -->
                 <!-- Should select from the common Tailwind CSS options. Examples: slate, blue, gray, green, orange, red, yellow, etc. -->
                 <!-- Saves to cfg_json.color_scheme -->
-                <div>
+                <div class="flex flex-row gap-1 items-center judify-start">
                     <span class="text-sm text-gray-500 hidden sm:inline">
                         Color Scheme:
                     </span>
@@ -577,6 +575,13 @@ async function handle_update_journal() {
                 </div>
 
                 <!-- Toggles for automatically hiding Entries marked as either: private, personal, or professional  -->
+                <div class="flex flex-row gap-1 items-center judify-start">
+
+                    <span class="text-sm text-gray-500 hidden sm:inline">
+                        Journal Entry Visibility:
+                    </span>
+
+                    <span class="flex flex-row gap-1 items-center justify-center">
                     <button
                         type="button"
                         onclick={() => {
@@ -660,11 +665,18 @@ async function handle_update_journal() {
                             Professional Entries
                         </span>
                     </button>
+                    </span>
+                </div>
 
 
                 <!-- Toggle buttons for showing/hiding various Journal Entry page view buttons: alert, alert message, private, public, personal, professional, template -->
-                <div class="flex flox-row gap-1">
+                <div class="flex flox-row gap-1 items-center judify-start">
 
+                    <span class="text-sm text-gray-500 hidden sm:inline">
+                        Journal Entry View Buttons:
+                    </span>
+
+                    <span class="flex flex-row gap-1 items-center justify-center">
                     <button
                         type="button"
                         onclick={() => {
@@ -860,9 +872,9 @@ async function handle_update_journal() {
                             Template Button
                         </span>
                     </button>
+                    </span>
                 </div>
 
-
                 <!-- JSON configuration editor for advanced users -->
                 <!-- textarea for json_cfg editing -->
             </div>
@@ -1089,7 +1101,19 @@ async function handle_update_journal() {
                     <X />
                     Cancel
                 </button>
+
+
             </div>
+
+            <button
+                type="button"
+                onclick={handle_update_journal}
+                class="btn variant-ghost-warning hover:variant-filled-warning transition absolute top-0 right-16 m-2"
+                title="Save changes to this journal"
+                >
+                <Check />
+                Update
+            </button>
         </div>
     </div>
 </Modal>

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -828,6 +828,7 @@ function handle_marked(text_string: string) {
         svelte_component ae_section ae_view journal_entry_obj view__journal_entry_obj bg-white
         flex flex-col flex-grow items-center justify-start
         w-full h-full p-2 m-2 space-y-2
+
         "
         bind:clientHeight={$ae_loc.iframe_height_modal_body}
         >
@@ -1909,6 +1910,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
         flex flex-col flex-wrap items-center justify-center
         h-full min-h-max max-h-full
         w-full max-w-6xl
+        relative
         "
     >
 {#if (!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])}
@@ -2117,6 +2119,29 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
         Updated obj? {updated_obj} -->
 
         <!-- && $lq__journal_entry_obj?.updated_on !== orig_entry_obj?.updated_on -->
+
+        <!-- Using absolute or fixed position -->
+        <button
+            type="button"
+            onclick={() => {
+                update_journal_entry();
+            }}
+            disabled={!tmp_entry_obj_changed}
+            class:hidden={!tmp_entry_obj_changed}
+            class:variant-filled-error={tmp_entry_obj_changed}
+            class="
+                btn btn-sm md:btn-md lg:btn-lg
+                min-w-24 w-full lg:min-w-32
+                max-w-40
+                variant-ghost-surface
+                hover:variant-outline-success
+                hover:variant-filled-success
+                fixed top-96 md:top-72 right-6
+                "
+            >
+            Save Changes?
+        </button>
+
     <!-- </div> -->
 
     {/if}