From f0fae620ea82ffe7ecf51111f6527e61d14cec02 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 7 Jul 2025 15:25:47 -0400
Subject: [PATCH] Finalish clean up for IDAA BB Posts

---
 src/lib/element_tiptap_editor.svelte          |   4 +-
 .../idaa/(idaa)/bb/[post_id]/+page.svelte     |   4 +-
 .../bb/ae_idaa_comp__post_obj_id_edit.svelte  | 160 ++++++++++++------
 .../bb/ae_idaa_comp__post_obj_li.svelte       |  17 +-
 4 files changed, 124 insertions(+), 61 deletions(-)

diff --git a/src/lib/element_tiptap_editor.svelte b/src/lib/element_tiptap_editor.svelte
index 63dd320c..1c3bd175 100644
--- a/src/lib/element_tiptap_editor.svelte
+++ b/src/lib/element_tiptap_editor.svelte
@@ -41,6 +41,8 @@ export let show_toolbar: boolean = true;
 export let placeholder: string = 'Type your text here...';
 export let changed: boolean = false;
 
+export let classes: string = '';
+
 if (default_minimal) {
     show_toolbar = false;
 }
@@ -133,7 +135,7 @@ let mouse_leave_wait: number = 2000;
             }
         }, mouse_enter_wait);
     }}
-    class="block w-full h-full"
+    class="block w-full h-full {classes}"
     >
     <ShadEditor
         class="p-1 transition-all duration-1000"
diff --git a/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte b/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte
index 2899c9a3..c17e5db2 100644
--- a/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte
@@ -133,11 +133,11 @@ onDestroy(() => {
             max-w-full
         "
         >
-        {#if $lq__post_obj?.topic_id}<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>{/if}
+        <!-- {#if $lq__post_obj?.topic_id}<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>{/if} -->
 
         <span class="float-right flex flex-row flex-wrap gap-1 items-center justify-end">
             {#if $lq__post_obj?.topic_name}
-                <span class="badge badge-info preset-tonal-tertiary"><span class="fas fa-user-md m-1"></span> {$lq__post_obj?.topic_name}</span>
+                <span class="badge badge-info preset-tonal-secondary"><span class="fas fa-tag"></span> {$lq__post_obj?.topic_name}</span>
             {/if}
             {#if $ae_loc.trusted_access && $lq__post_obj?.hide}
                 <span class="badge badge-warning"><span class="fas fa-exclamation-triangle m-1"></span> Hidden</span>
diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
index 9d094df6..bc2a7c12 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
@@ -375,7 +375,7 @@ $effect(() => {
 
 
 <section
-    class="svelte_component ae_section ae_edit post_obj edit__post_obj space-y-2 p-2 border rounded bg-blue-100"
+    class="svelte_component ae_section ae_edit post_obj edit__post_obj space-y-2 p-2 border rounded preset-outlined-warning-200-800 preset-tonal-warning"
     class:ae_create={!$idaa_slct.post_id}
     bind:clientHeight={$ae_loc.iframe_height_modal_body}
     >
@@ -404,7 +404,12 @@ $effect(() => {
                     $idaa_sess.bb.edit__post_obj = false;
                 }
             }}
-            class="novi_btn btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition"
+            class="
+                novi_btn
+                btn btn-sm
+                preset-filled-warning-200-800 hover:preset-filled-success-200-800
+                transition
+                "
             title="Cancel editing of post for {$idaa_slct.post_obj.full_name} (ID: {$idaa_slct.post_obj.post_id}"
             >
             <span class="fas fa-edit m-1"></span> Cancel Edit
@@ -415,20 +420,22 @@ $effect(() => {
 
     <input type="hidden" value={$idaa_slct.post_id} />
 
-    <section class="ae_section post__general_information border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section post__general_information -->
+    <div class="ae_section post__general_information border border-gray-200 rounded p-2 space-y-2"> <!-- BEGIN: section post__general_information -->
 
         <div>
         <label for="title" class="w-full">
             <span class="text-sm text-gray-600 dark:text-gray-400">
                 Title of BB post:
             </span>
-        <input type="text" id="title" name="title" required max="200" bind:value={$idaa_slct.post_obj.title} placeholder="Title of Post" autocomplete="off" class="input w-full" />
+        <input
+            type="text" id="title" name="title" required max="200" bind:value={$idaa_slct.post_obj.title} placeholder="Title of Post" autocomplete="off"
+            class="input w-full form-control"
+            />
         </label>
         </div>
 
-        <div>
         <label for="content" class="ae_label post__content w-full">
-            <span class="text-sm text-gray-600 dark:text-gray-400">
+            <span class="legend text-sm font-semibold text-gray-600 dark:text-gray-400">
                 Content (post body):
             </span>
             <!-- <textarea name="content" id="content" class="ae_value post__content tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.post_obj.content} ></textarea> -->
@@ -446,6 +453,7 @@ $effect(() => {
                     }}
                     bind:new_html={content_new_html}
                     bind:changed={content_changed}
+                    classes="bg-gray-100 dark:bg-gray-800"
                     placeholder="Your post content here..."
                     />
             {:else}
@@ -461,22 +469,23 @@ $effect(() => {
                         }}
                     bind:new_html={content_new_html}
                     bind:changed={content_changed}
+                    classes="bg-gray-100 dark:bg-gray-800"
                     placeholder="Your post content here..."
                     />
             {/if}
-
-
         </label>
-        </div>
 
         <div
             class="flex flex-col gap-1 items-center justify-center"
             >
             <button
                 type="button"
-                class="novi_btn btn btn-sm"
-                class:preset-filled-secondary-500={$idaa_sess.bb.show__inline_edit__file_upload}
-                class:preset-tonal-secondary={!$idaa_sess.bb.show__inline_edit__file_upload}
+                class="
+                    novi_btn
+                    btn btn-sm
+                    "
+                class:preset-filled-success-200-800={$idaa_sess.bb.show__inline_edit__file_upload}
+                class:preset-filled-tertiary-200-800={!$idaa_sess.bb.show__inline_edit__file_upload}
                 onclick={() => {
                     $idaa_sess.bb.show__inline_edit__file_upload = !$idaa_sess.bb.show__inline_edit__file_upload;
                 }}
@@ -649,13 +658,16 @@ $effect(() => {
 
 
         <div>
-            <label class="">
+            <label class="form-group w-100">
                 <span class="text-sm text-gray-600 dark:text-gray-400">
                     BB post topic:
                 </span>
                 <select
                     name="topic_id"
-                    class="select w-96"
+                    class="
+                        select w-96 preset-outline-secondary-500
+                        form-control col-sm-12
+                        "
                     bind:value={$idaa_slct.post_obj.topic_id}
                     >
                     <option value="">-- None --</option>
@@ -672,7 +684,7 @@ $effect(() => {
 
 
         <h3 class="h3">Poster's Information</h3>
-        <fieldset class="">
+        <fieldset class="form-group">
             <legend class="text-sm text-gray-600 dark:text-gray-400">Post as "Anonymous"?</legend>
             <div class="flex flex-row gap-2">
                 <input
@@ -698,7 +710,8 @@ $effect(() => {
             </div>
         </fieldset>
 
-        <label for="external_person_id">
+        <div>
+        <label for="external_person_id" class="block form-group d-block w-100">
             <span class="text-sm text-gray-600 dark:text-gray-400">
                 <span class="fas fa-link"></span> Linked with Novi ID
             </span>
@@ -710,7 +723,7 @@ $effect(() => {
                     name="external_person_id"
                     value={($idaa_slct.post_obj.external_person_id ? $idaa_slct.post_obj.external_person_id : $idaa_loc.novi_uuid)}
                     readonly={true}
-                    class="input w-96"
+                    class="input w-96 form-control"
                     >
             {:else}
                 <div class="ae_highlight text-sm bg-yellow-100 p-2">
@@ -724,12 +737,14 @@ $effect(() => {
                     value={($idaa_slct.post_obj?.external_person_id ? $idaa_slct.post_obj
                     ?.external_person_id : '')}
                     readonly={!$ae_loc.administrator_access}
-                    class="input w-96"
+                    class="input w-96 form-control"
                     >
             {/if}
         </label>
+        </div>
 
-        <label for="full_name">
+        <div>
+        <label for="full_name" class="block form-group d-block w-75">
             <span class="text-sm text-gray-600 dark:text-gray-400">
                 Name
                 {#if !$ae_loc.trusted_access}
@@ -744,12 +759,14 @@ $effect(() => {
                 name="full_name"
                 value={($idaa_slct.post_obj?.full_name ? $idaa_slct?.post_obj.full_name : $idaa_loc.novi_full_name)}
                 readonly={!$ae_loc.trusted_access}
-                class="input w-96"
+                class="input w-96 form-control"
                 >
         </label>
+        </div>
 
         {#if $ae_loc.trusted_access}
-        <label for="email">
+        <div>
+        <label for="email" class="block form-group d-block w-75">
             <span class="text-sm text-gray-600 dark:text-gray-400">
                 Email
                 {#if !$ae_loc.trusted_access}
@@ -763,12 +780,13 @@ $effect(() => {
                 name="email"
                 value={($idaa_slct.post_obj?.email ? $idaa_slct.post_obj?.email : $idaa_loc.novi_email ?? '')}
                 readonly={!$ae_loc.trusted_access}
-                class="input w-96"
+                class="input w-96 form-control"
                 >
             <span class="text-xs text-gray-600 dark:text-gray-400 italic">
                 Secondary link using the Novi email address
             </span>
         </label>
+        </div>
         {:else}
             <input type="hidden" name="email" value={($idaa_slct.post_obj?.email ? $idaa_slct.post_obj?.email : $idaa_loc.novi_email ?? '')} />
         {/if}
@@ -802,25 +820,32 @@ $effect(() => {
             </div>
         </fieldset>
 
-    </section> <!-- END: section post__general_information -->
+    </div> <!-- END: section post__general_information -->
 
 
     {#if $ae_loc.trusted_access}
     <button
         type="button"
-        class="novi_btn btn btn-sm preset-tonal-warning float-right"
-        class:preset-filled-secondary-500={$idaa_loc.bb.show__admin_options}
-        class:preset-tonal-secondary={!$idaa_loc.bb.show__admin_options}
+        class="
+            novi_btn
+            btn btn-sm float-right
+            "
+        class:preset-filled-success-200-800={$idaa_loc.bb.show__admin_options}
+        class:preset-filled-tertiary-200-800={!$idaa_loc.bb.show__admin_options}
         onclick={() => {
             $idaa_loc.bb.show__admin_options = !$idaa_loc.bb.show__admin_options;
         }}
         >
+        {#if $idaa_loc.bb.show__admin_options}
+        <span class="fas fa-eye-slash m-1"></span>
+        {:else}
         <span class="fas fa-eye m-1"></span>
-        {$idaa_loc.bb.show__admin_options ? 'Hide' : 'Show'} Admin
+        {/if}
+        {$idaa_loc.bb.show__admin_options ? 'Hide' : 'Show'} Admin?
     </button>
 
     <!-- BEGIN: section post__admin_options -->
-    <section
+    <div
         class="ae_section post__admin_options border border-gray-200 rounded p-2 space-y-2 bg-red-100"
         class:hidden={!$idaa_loc.bb.show__admin_options}
         >
@@ -835,8 +860,8 @@ $effect(() => {
             <span
                 class="flex flex-row flex-wrap gap-2 items-center justify-evenly grow"
                 >
-                <fieldset class="flex flex-row gap-1 items-center justify-center">
-                    <legend class="legend text-sm font-semibold">Hide</legend>
+                <fieldset class="flex flex-row gap-1 items-center justify-center form-check">
+                    <legend class="legend text-sm font-semibold form-check-label">Hide</legend>
                     <div>
                         <input
                             type="radio"
@@ -844,7 +869,7 @@ $effect(() => {
                             name="hide"
                             value={true}
                             bind:group={$idaa_slct.post_obj.hide}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="hide_yes">Yes</label>
                     </div>
@@ -855,14 +880,14 @@ $effect(() => {
                             name="hide"
                             value={false}
                             bind:group={$idaa_slct.post_obj.hide}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="hide_no">No</label>
                     </div>
                 </fieldset>
 
-                <fieldset class="flex flex-row gap-2">
-                    <legend class="legend text-sm font-semibold">Priority</legend>
+                <fieldset class="flex flex-row gap-1 items-center justify-center form-check">
+                    <legend class="legend text-sm font-semibold form-check-label">Priority</legend>
                     <div>
                         <input
                             type="radio"
@@ -870,7 +895,7 @@ $effect(() => {
                             name="priority"
                             value={true}
                             bind:group={$idaa_slct.post_obj.priority}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="priority_yes">Yes</label>
                     </div>
@@ -881,23 +906,23 @@ $effect(() => {
                             name="priority"
                             value={false}
                             bind:group={$idaa_slct.post_obj.priority}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="priority_no">No</label>
                     </div>
                 </fieldset>
             </span>
 
-            <span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
-                <label class="legend text-sm font-semibold">Sort <input type="number" name="sort" bind:value={$idaa_slct.post_obj.sort} class="input w-24" /></label>
+            <span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow col-sm-1">
+                <label class="legend text-sm font-semibold input-group">Sort <input type="number" name="sort" bind:value={$idaa_slct.post_obj.sort} class="input w-24 form-control" /></label>
 
-                <label class="legend text-sm font-semibold">Group <input type="text" name="group" bind:value={$idaa_slct.post_obj.group} max="100" class="input w-40" /></label>
+                <label class="legend text-sm font-semibold input-group">Group <input type="text" name="group" bind:value={$idaa_slct.post_obj.group} max="100" class="input w-40 form-control" /></label>
             </span>
 
             {#if $ae_loc.administrator_access}
             <span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
-                <fieldset class="flex flex-row gap-2">
-                    <legend class="legend text-sm font-semibold">Enable</legend>
+                <fieldset class="flex flex-row gap-2 form-check">
+                    <legend class="legend text-sm font-semibold form-check-label">Enable</legend>
                     <div>
                         <input
                             type="radio"
@@ -905,7 +930,7 @@ $effect(() => {
                             name="enable"
                             value={true}
                             bind:group={$idaa_slct.post_obj.enable}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="enable_yes">Yes</label>
                     </div>
@@ -916,7 +941,7 @@ $effect(() => {
                             name="enable"
                             value={false}
                             bind:group={$idaa_slct.post_obj.enable}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="enable_no">No</label>
                     </div>
@@ -930,13 +955,15 @@ $effect(() => {
         {#if $ae_loc.trusted_access}
         <label
             for="notes"
-
+            class="ae_label post__notes w-full"
             >
-            <span class="legend text-sm font-semibold">Internal Staff Notes</span>
+            <span class="legend text-sm font-semibold text-gray-600 dark:text-gray-400">Internal Staff Notes</span>
             <Tiptap_editor
                 default_minimal={true}
                 html_text={$idaa_slct.post_obj.notes}
-                show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
+                show_button_kv={{
+                    'heading__h1': false, 'heading__h2': false, 'heading__h3': false
+                }}
                 bind:new_html={notes_new_html}
                 bind:changed={notes_changed}
                 placeholder="Internal notes for staff only. Not shown to the public."
@@ -944,18 +971,25 @@ $effect(() => {
         </label>
         {/if}
 
-    </section> <!-- END: section post__admin_options -->
+    </div> <!-- END: section post__admin_options -->
     {/if}
 
 
-    <section class="ae_section ae_options ae_row ae_actions post__options post__actions flex flex-row gap-1 items-center justify-between">
+    <div class="
+        ae_section ae_options ae_row ae_actions post__options post__actions
+        flex flex-row gap-1 items-center justify-between w-full
+        d-flex align-items-center justify-content-between
+        "
+        >
         <div>
         <!-- BEGIN: section post__options -->
         {#if $idaa_slct.post_id}
             <button
                 type="submit"
                 disabled={(disable_submit_btn || !obj_changed)}
-                class="novi_btn btn_primary btn btn-primary preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
+                class="novi_btn btn btn-primary
+                preset-tonal-success
+                hover:preset-filled-success-500 transition"
                 >
                 {#await prom_api__post_obj}
                     <span class="fas fa-spinner fa-spin m-1"></span> Saving
@@ -989,7 +1023,10 @@ $effect(() => {
                 if (!confirm('Are you sure you want to delete this post?')) {return false;}
                 handle_delete_post_obj({post_id: $idaa_slct.post_id, method: 'delete'});
             }}
-            class="novi_btn btn btn-sm preset-tonal-warning"
+            class="
+                novi_btn
+                btn btn-sm preset-filled-warning-400-600 hover:preset-filled-error-200-800
+                "
             title="Delete record permanently"
             >
             <span class="fas fa-minus m-1"></span> Delete
@@ -1001,7 +1038,12 @@ $effect(() => {
                 if (!confirm('Are you sure you want to disable this post?')) {return false;}
                 handle_delete_post_obj({post_id: $idaa_slct.post_id, method: 'disable'});
             }}
-            class="novi_btn btn btn-sm preset-tonal-warning"
+            class="
+                novi_btn
+                btn btn-sm
+                preset-filled-warning-200-800 hover:preset-filled-error-200-800
+                transition
+                "
             title="Disable record to delete"
             >
             <span class="fas fa-minus m-1"></span> Delete
@@ -1013,7 +1055,12 @@ $effect(() => {
                 if (!confirm('Are you sure you want to hide this post?')) {return false;}
                 handle_delete_post_obj({post_id: $idaa_slct.post_id, method: 'hide'});
             }}
-            class="novi_btn btn btn-sm preset-tonal-warning"
+            class="
+                novi_btn
+                btn btn-sm
+                preset-filled-warning-200-800 hover:preset-filled-error-200-800
+                transition
+                "
             title="Hide record to delete"
             >
             <span class="fas fa-comment-slash m-1"></span> Delete
@@ -1035,13 +1082,18 @@ $effect(() => {
                     $idaa_sess.bb.edit__post_obj = false;
                 }
             }}
-            class="novi_btn btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition"
+            class="
+                novi_btn
+                btn btn-sm
+                preset-filled-warning-200-800 hover:preset-filled-success-200-800
+                transition
+                "
             title="Cancel editing of post for {$idaa_slct.post_obj.full_name} (ID: {$idaa_slct.post_obj.post_id}"
             >
             <span class="fas fa-edit m-1"></span> Cancel Edit
         </button>
         </div>
-    </section>
+    </div>
 
 </form>
 
diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
index 2c959ea2..73556106 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
@@ -41,7 +41,7 @@ onMount(() => {
                     <span class="fas fa-comment-alt m-1"></span>
                     {@html idaa_post_obj.title}
                 </span>
-                {#if idaa_post_obj.topic_name}<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-user-md m-1"></span> {idaa_post_obj.topic_name}</span>{/if}
+                {#if idaa_post_obj.topic_name}<span class="badge badge-info preset-tonal-secondary"><span class="fas fa-tag m-1"></span> {idaa_post_obj.topic_name}</span>{/if}
             </h3>
         </header>
 
@@ -58,7 +58,11 @@ onMount(() => {
         <div class="ae_options flex flex-row gap-2 items-center justify-center">
             <a
                 href="/idaa/bb/{idaa_post_obj?.post_id}"
-                class="novi_btn btn btn-secondary btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
+                class="
+                    novi_btn btn-secondary
+                    btn btn-md preset-filled-primary-200-800
+                    transition
+                    "
                 title={`Open to see details: ${idaa_post_obj?.name}`}
                 >
                 <span class="fas fa-envelope-open m-1"></span>
@@ -144,7 +148,7 @@ onMount(() => {
             {/if}
         </div>
 
-        <div class="ae_section ae_footer ae_meta post__meta text-sm text-gray-500 mt-4 flex flex-row gap-2 items-center justify-center">
+        <div class="ae_footer ae_meta post__meta text-sm text-gray-500/80 m-1 flex flex-row gap-2 items-center justify-center">
             {#if (idaa_post_obj.anonymous)}
             <div class="post__posted_by">
                 <span class="text-xs">Posted by:</span>
@@ -179,7 +183,12 @@ onMount(() => {
                 </span>
                 {/if}
                 {#if idaa_post_obj.archive_on}
-                <span class="post__archive_on text-xs">Archive on: {ae_util.iso_datetime_formatter(idaa_post_obj.archive_on, 'datetime_12_short')}</span>
+                <span
+                    class="post__archive_on"
+                    >
+                    <span class="ae_label text-xs">Archive on:</span>
+                    <span class="ae_value">{ae_util.iso_datetime_formatter(idaa_post_obj.archive_on, 'datetime_12_short')}</span>
+                </span>
                 {/if}
             </div>
             {/if}