Now using the new new new, not mine, Modal element.

src/lib/element_data_store_v2.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 import { browser } from '$app/environment';
-import { onMount } from 'svelte';
+
-// import type { Writable } from 'svelte/store';
+import { liveQuery } from "dexie"; // Use this in the future???
-// import { localStorageStore } from '@skeletonlabs/skeleton';
+import { Modal } from 'flowbite-svelte';
 
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_trig } from '$lib/ae_stores';
@@ -40,7 +40,7 @@ let ae_promises: key_val = {};
 // let ae_triggers: key_val = {};
 
 let ds_get_results: Promise<any>|key_val;
-let ds_loading_status: string = 'starting...';
+export let ds_loading_status: string = 'starting';
 let ds_submit_results: Promise<any>|key_val;
 
 let val_json: key_val;
@@ -75,13 +75,13 @@ if (browser && try_cache && localStorage.getItem(`ae_ds__${ds_code}`)) {
     if (log_lvl) {
         console.log(`ae_e_data_store: Found cached data for ${ds_code}`);
     }
-    ae_ds_tmp = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
+    ae_ds_tmp = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`) ?? '{}');
     if (log_lvl) {
         console.log(`ae_e_data_store cached: ${ds_code} account_id=${$ae_loc.account_id}`, ae_ds_tmp);
     }
 } else {
     ae_ds_tmp = ds_code_obj;
-    ds_loading_status = '-- loading --';
+    ds_loading_status = 'loading';
 }
 
 $ae_sess.ds.submit_status = null;
@@ -181,7 +181,7 @@ async function load_data_store(
             }
 
             ds_loaded = true;
-            ds_loading_status = '-- loaded --';
+            ds_loading_status = 'loaded';
 
             // Set the loaded_on datetime to the current time for reference later. This will be used to determine if the data store is stale.
             ae_ds_tmp.loaded_on = new Date().toISOString();
@@ -216,7 +216,7 @@ async function load_data_store(
             }
         } else {
             ds_loaded = false;
-            ds_loading_status = '-- not found --';
+            ds_loading_status = 'not found';
         }
     })
     .then(function () {
@@ -232,7 +232,7 @@ async function load_data_store(
     .catch(function (error) {
         console.log(`Something went wrong. for code ${code}`);
         console.log(error);
-        ds_loading_status = '-- error --';
+        ds_loading_status = 'error';
         return false;
     });
     // .finally(function (ds_val_result) {
@@ -395,10 +395,15 @@ async function handle_submit_form(event: any) {
 }
 
 
-async function handle_create__data_store({
+async function handle_create__data_store(
+        {
             obj_type,
             data
-        }) {
+        } : {
+            obj_type: string,
+            data: key_val
+        }
+    ) {
     console.log('*** handle_create__data_store() ***');
 
     $ae_sess.ds.create_status = 'starting';
@@ -430,11 +435,17 @@ async function handle_create__data_store({
 }
 
 
-async function handle_update__data_store({
+async function handle_update__data_store(
+        {
             obj_type,
             obj_id,
             data
-        }) {
+        } : {
+            obj_type: string,
+            obj_id: string,
+            data: key_val
+        }
+    ) {
     console.log('*** handle_update__data_store() ***');
 
     $ae_sess.ds.update_status = 'starting';
@@ -496,10 +507,20 @@ async function handle_update__data_store({
 
 {/if}
 
-{#if show_edit}
+<!-- {#if show_edit} -->
-    <section class="edit z-50">
+    <!-- <section class="edit z-50"> -->
+
+    <!-- Main modal -->
+    <Modal
+        title="{ae_ds_tmp.name} - {ae_ds_tmp.code}"
+        bind:open={show_edit}
+        autoclose={false}
+        size="xl"
+        class="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"
+        >
+
     <form
-        class="ae__elem__data_store__form"
+        class="flex flex-col gap-1"
         on:submit|preventDefault={handle_submit_form}
         >
 
@@ -509,6 +530,7 @@ async function handle_update__data_store({
         value={ae_ds_tmp.id}
         />
 
+    <div class="flex flex-row gap-1">
         {#if $ae_loc.trusted_access}
             <label for="ds_use_account_id" class="label text-xs inline">Use Account ID
             <input
@@ -538,6 +560,9 @@ async function handle_update__data_store({
                 required
                 />
         {/if}
+    </div>
+
+    <div class="flex flex-row gap-1">
         {#if $ae_loc.trusted_access}
             <input
                 type="text"
@@ -548,6 +573,9 @@ async function handle_update__data_store({
                 required
                 />
         {/if}
+    </div>
+
+    <div class="flex flex-row gap-1">
         {#if $ae_loc.manager_access}
             <input
                 type="text"
@@ -597,7 +625,9 @@ async function handle_update__data_store({
             <!-- Name: {ae_ds_tmp.name} -->
             Type: {ae_ds_tmp.type}
         {/if}
+    </div>
 
+    <div class="">
         <!-- Handle HTML type -->
         {#if ae_ds_tmp.type == 'html' || ae_ds_tmp.type == null}
         <textarea
@@ -627,7 +657,9 @@ async function handle_update__data_store({
             placeholder="Enter the text here"
             >{ae_ds_tmp.type == 'text' ? ae_ds_tmp.text : ''}</textarea>
         {/if}
-    <div class="flex gap-1 justify-center justify-evenly items-center p-1">
+    </div>
+
+    <div class="flex flex-row gap-1 justify-center justify-evenly items-center">
 
         <button
             type="button"
@@ -645,7 +677,7 @@ async function handle_update__data_store({
             Delete
         </button>
 
-    <button
+        <!-- <button
             type="button"
             class="btn variant-soft-primary"
             on:click={() => {
@@ -655,11 +687,11 @@ async function handle_update__data_store({
             >
             <span class="fas fa-times mx-1"></span>
             Close
-    </button>
+        </button> -->
 
         <button
             type="submit"
-        class="btn variant-soft-primary"
+            class="btn variant-ghost-primary"
             disabled={ds_submit_results instanceof Promise && !ds_submit_results}
             on:click={() => {
                 trigger = 'save__ds__code';
@@ -700,8 +732,28 @@ async function handle_update__data_store({
     </div>
 
     </form>
-    </section>
+
-{/if}
+    <svelte:fragment slot="footer">
+        <div class="text-center w-full">
+            <button
+                type="button"
+                on:click={() => {
+                    console.log('Close modal edit data store.');
+                    show_edit = false;
+                    show_view = true;
+                }}
+                class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
+                >
+                <span class="fas fa-times mx-1"></span>
+                Close
+            </button>
+        </div>
+    </svelte:fragment>
+
+    </Modal>
+
+    <!-- </section> -->
+<!-- {/if} -->
 
 <!-- {#if mode == 'view'} -->
 
@@ -784,6 +836,7 @@ async function handle_update__data_store({
 } */
 
 /* The section.edit should be above the rest of the content and centered on the page */
+/*
 section.edit {
     position: fixed;
     top: 50%;
@@ -797,6 +850,7 @@ section.edit {
 
     min-width: 80%;
 }
+*/
 
 .hide {
     display: none;