From b028bd7b32df90784dd85d72f012d9cdf5b5ddba Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 7 Jul 2025 18:01:57 -0400
Subject: [PATCH] More improvements for IDAA BB

---
 .../components/shad-editor/shad-editor.svelte |  2 +-
 .../bb/ae_idaa_comp__post_obj_id_edit.svelte  | 71 ++++++++++---------
 .../bb/ae_idaa_comp__post_options.svelte      | 13 +++-
 3 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/shad-editor/shad-editor.svelte b/src/lib/components/shad-editor/shad-editor.svelte
index cc751d58..712a4718 100644
--- a/src/lib/components/shad-editor/shad-editor.svelte
+++ b/src/lib/components/shad-editor/shad-editor.svelte
@@ -172,7 +172,7 @@ onDestroy(() => {
 		spellcheck="false"
 		class="tiptap overflow-auto relative">
 		<span
-            class="placeholder text-sm text-gray-400 italic absolute p-3"
+            class="placeholder text-sm text-gray-400 italic absolute p-3 w-full"
             contenteditable="false"
             hidden={editor?.getHTML() !== '<p></p>'}
             >{placeholder}</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 0d3f035c..5da205e8 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
@@ -430,18 +430,22 @@ $effect(() => {
 
         <div>
         <label for="title" class="w-full">
-            <span class="text-sm text-gray-600 dark:text-gray-400">
+            <span class="text-sm font-semibold text-surface-600-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 form-control"
+            class="
+                input w-full
+                preset-tonal-surface hover:preset-filled-surface-100-900
+                form-control
+                "
             />
         </label>
         </div>
 
         <label for="content" class="ae_label post__content w-full">
-            <span class="legend text-sm font-semibold text-gray-600 dark:text-gray-400">
+            <span class="legend text-sm font-semibold text-surface-600-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> -->
@@ -459,7 +463,7 @@ $effect(() => {
                     }}
                     bind:new_html={content_new_html}
                     bind:changed={content_changed}
-                    classes="bg-gray-100 dark:bg-gray-800"
+                    classes="preset-tonal-surface hover:preset-filled-surface-100-900"
                     placeholder="Your post content here..."
                     />
             {:else}
@@ -475,7 +479,7 @@ $effect(() => {
                         }}
                     bind:new_html={content_new_html}
                     bind:changed={content_changed}
-                    classes="bg-gray-100 dark:bg-gray-800"
+                    classes="preset-tonal-surface hover:preset-filled-surface-100-900"
                     placeholder="Your post content here..."
                     />
             {/if}
@@ -524,7 +528,7 @@ $effect(() => {
                                     <span class="fas fa-upload"></span>
                                     <strong class="bg-green-100 p-1">Upload post files</strong>
                                 </div>
-                                <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+                                <span class="text-sm text-surface-600-400 italic">
                                     <!-- <strong>Aether hosted files only</strong><br> -->
                                     Recommended: documents (PDF) and images (png, webp, jpg)
                                     <!-- , audio (mp3, m4a), and video (mp4, mkv) -->
@@ -540,7 +544,7 @@ $effect(() => {
             {#if $idaa_slct.post_obj?.linked_li_json && $idaa_slct.post_obj.linked_li_json.length}
                 <div class="ae_section flex flex-row flex-wrap gap-1 items-center justify-center">
                     <span class="fas fa-paperclip"></span>
-                    <span class="text-sm text-gray-600 dark:text-gray-400 italic">Linked files:</span>
+                    <span class="text-sm text-surface-600-400 italic">Linked files:</span>
                     {#each $idaa_slct.post_obj.linked_li_json as linked_obj, index}
                         <span>
                         <!-- <a
@@ -665,13 +669,14 @@ $effect(() => {
 
         <div>
             <label class="form-group w-100">
-                <span class="text-sm text-gray-600 dark:text-gray-400">
+                <span class="text-sm font-semibold text-surface-600-400">
                     BB post topic:
                 </span>
                 <select
                     name="topic_id"
                     class="
-                        select w-96 preset-outline-secondary-500
+                        select w-96 px-1
+                        preset-tonal-surface hover:preset-filled-surface-100-900
                         form-control col-sm-12
                         "
                     bind:value={$idaa_slct.post_obj.topic_id}
@@ -689,30 +694,30 @@ $effect(() => {
         </div>
 
 
-        <h3 class="h3">Poster's Information</h3>
+        <h3 class="h3 text-base font-bold text-surface-800-200">Poster's Information</h3>
         <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">
+            <legend class="legend text-sm font-semibold text-surface-600-400">Post as "Anonymous"?</legend>
+            <div class="flex flex-row gap-2 preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input
                     type="radio"
                     id="anonymous_no"
                     name="anonymous"
                     value={false}
                     bind:group={$idaa_slct.post_obj.anonymous}
-                    class="radio"
+                    class="radio form-check-input"
                     >
-                <label for="anonymous_no"><strong>No</strong>, include my name and email address</label>
+                <label for="anonymous_no" class="form-check-label"><strong>No</strong>, include my name and email address</label>
             </div>
-            <div class="flex flex-row gap-2">
+            <div class="flex flex-row gap-2 preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input
                     type="radio"
                     id="anonymous_yes"
                     name="anonymous"
                     value={true}
                     bind:group={$idaa_slct.post_obj.anonymous}
-                    class="radio"
+                    class="radio form-check-input"
                     >
-                <label for="anonymous_yes"><strong>Yes</strong>, the post will be listed as <strong>"Anonymous"</strong></label>
+                <label for="anonymous_yes" class="form-check-label"><strong>Yes</strong>, the post will be listed as <strong>"Anonymous"</strong></label>
             </div>
         </fieldset>
 
@@ -721,7 +726,7 @@ $effect(() => {
             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="text-sm font-semibold text-surface-600-400">
                 <span class="fas fa-link"></span> Linked with Novi ID
             </span>
             {#if !$ae_loc.trusted_access}
@@ -732,7 +737,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 form-control"
+                    class="input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                     >
             {:else}
                 <div class="ae_highlight text-sm bg-yellow-100 p-2">
@@ -746,7 +751,7 @@ $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 form-control"
+                    class="input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                     >
             {/if}
         </label>
@@ -754,7 +759,7 @@ $effect(() => {
 
         <div>
         <label for="full_name" class="block form-group d-block w-75">
-            <span class="text-sm text-gray-600 dark:text-gray-400">
+            <span class="text-sm font-semibold text-surface-600-400">
                 Name
                 {#if !$ae_loc.trusted_access}
                     <span class="fas fa-lock m-1" title="Field is locked"></span>
@@ -768,7 +773,7 @@ $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 form-control"
+                class="input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                 >
         </label>
         </div>
@@ -776,7 +781,7 @@ $effect(() => {
         {#if $ae_loc.trusted_access}
         <div>
         <label for="email" class="block form-group d-block w-75">
-            <span class="text-sm text-gray-600 dark:text-gray-400">
+            <span class="text-sm font-semibold text-surface-600-400">
                 Email
             </span>
             {#if !$ae_loc.trusted_access}
@@ -789,9 +794,9 @@ $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 form-control"
+                class="input w-96 preset-tonal-surface hover:preset-filled-surface-100-900 form-control"
                 >
-            <span class="text-xs text-gray-600 dark:text-gray-400 italic">
+            <span class="text-xs text-surface-600-400 italic">
                 Secondary link using the Novi email address
             </span>
         </label>
@@ -801,29 +806,29 @@ $effect(() => {
         {/if}
 
         <!-- A yes/no radio button group to determine if they want to be notified of comments on this post. -->
-        <fieldset class="">
-            <legend class="legend text-sm text-gray-600 dark:text-gray-400">
+        <fieldset class="form-group">
+            <legend class="legend text-sm font-semibold text-surface-600-400">
                 Notify me of comments?
             </legend>
-            <div class="flex flex-row gap-2">
+            <div class="flex flex-row gap-2 preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input
                     type="radio"
                     id="notify_no"
                     name="notify"
                     value={false}
                     bind:group={$idaa_slct.post_obj.notify}
-                    class="radio"
+                    class="radio form-check-input"
                 >
                 <label for="notify_no"><strong>No</strong>, do not notify me of comments</label>
             </div>
-            <div class="flex flex-row gap-2">
+            <div class="flex flex-row gap-2 preset-tonal-surface hover:preset-filled-surface-100-900">
                 <input
                     type="radio"
                     id="notify_yes"
                     name="notify"
                     value={true}
                     bind:group={$idaa_slct.post_obj.notify}
-                    class="radio"
+                    class="radio form-check-input"
                 >
                 <label for="notify_yes"><strong>Yes</strong>, notify me of comments</label>
             </div>
@@ -979,7 +984,7 @@ $effect(() => {
             for="notes"
             class="ae_label post__notes w-full"
             >
-            <span class="legend text-sm font-semibold text-gray-600 dark:text-gray-400">Internal Staff Notes</span>
+            <span class="legend text-sm font-semibold text-surface-600-400">Internal Staff Notes</span>
             <Tiptap_editor
                 default_minimal={true}
                 html_text={$idaa_slct.post_obj.notes}
@@ -1010,7 +1015,7 @@ $effect(() => {
         {#if $idaa_slct.post_id}
             <button
                 type="submit"
-                disabled={!(disable_submit_btn || !obj_changed)}
+                disabled={(disable_submit_btn || !obj_changed)}
                 class="
                     novi_btn btn-warning
                     btn preset-tonal-success
diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte
index 7b02fce6..a47124a9 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte
@@ -31,17 +31,23 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
             class="flex flex-row gap-1 items-center justify-around"
             >
             <label
-                class="text-sm w-32 text-right"
+                class="text-sm w-32 md:w-42 form-group"
                 for="qry_limit__posts">
                 Max posts:
-            </label>
+
             <select
                 id="qry_limit__posts"
                 bind:value={$idaa_loc.bb.qry__limit}
                 on:change={() => {
                     $idaa_trig.post_li = true;
                 }}
-                class="select w-20 text-sm"
+                class="
+                    select w-20 text-sm inline-block
+                    px-1
+                    preset-tonal-tertiary
+                    preset-outline-tertiary-200-800
+                    form-control col-sm-12
+                "
                 >
                 <option value={10}>10</option>
                 <option value={25}>25</option>
@@ -51,6 +57,7 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
                 <option value={200} class:hidden={!$ae_loc.trusted_access}>200</option>
                 <option value={500} class:hidden={!$ae_loc.trusted_access}>500</option>
             </select>
+            </label>
         </span>
 
         {#if $ae_loc.trusted_access && (!$idaa_loc.bb.qry__hidden || $idaa_loc.bb.qry__hidden == 'not_hidden')}