First version of the technical help notification is ready for IDAA.

src/lib/e_app_help_tech.svelte

@@ -55,6 +55,7 @@ if (log_lvl) {
 }
 
 let help_tech_text: string = $state('');
+let hide_additional_info: boolean = $state(true);
 
 function preventDefault(fn) {
     return function (event) {
@@ -102,12 +103,13 @@ function send_help_tech_email() {
     api.send_email({
         api_cfg: $ae_api,
         from_email: $ae_loc.site_cfg_json?.noreply_email ?? 'noreply+tech@oneskyit.com',
-        from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'Tech NoReply',
+        from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'IT NoReply',
         // to_email: $ae_loc.site_cfg_json?.admin_email ?? 'admin+tech@oneskyit.com', // 'scott+idaabb@oneskyit.com',
-        to_email: 'scott+tech@oneskyit.com',
+        to_email: 'it+tech@oneskyit.com',
         // to_email: $idaa_slct.post_obj.email,
         // to_email: 'scott+idaabb@oneskyit.com',
-        to_name: $ae_loc.site_cfg_json?.admin_name ?? 'Tech Admin',
+        // to_name: $ae_loc.site_cfg_json?.admin_name ?? 'IT Tech',
+        to_name: 'IT Tech',
         // to_name: $idaa_slct.post_obj.full_name ?? 'IDAA BB Poster',
         subject: subject,
         body_html: body_html,
@@ -121,18 +123,23 @@ function send_help_tech_email() {
 <div
     class="
         m-2
+        mx-auto
         p-2
         flex flex-row
         items-center justify-center
-        preset-tonal-surface
         rounded-lg shadow-2xl
-        border-2
+        border-2 border-transparent
-        border-blue-400 dark:border-blue-600
-        shadow-blue-200 dark:shadow-blue-800
-        bg-blue-100 dark:bg-blue-900
         transition-all
         {e_class}
         "
+        class:w-xl={$ae_sess.show_help_tech}
+        class:w-fit={!$ae_sess.show_help_tech}
+        class:hover:border-blue-400={$ae_sess.show_help_tech}
+        class:hover:dark:border-blue-600={$ae_sess.show_help_tech}
+        class:hover:shadow-blue-200={$ae_sess.show_help_tech}
+        class:hover:dark:shadow-blue-800={$ae_sess.show_help_tech}
+        class:bg-blue-100={$ae_sess.show_help_tech}
+        class:dark:bg-blue-900={$ae_sess.show_help_tech}
     >
 
 
@@ -144,6 +151,20 @@ function send_help_tech_email() {
                 transition-all
                 "
             >
+            <div
+                class="
+                    d-flex align-items-center justify-content-between
+                    flex flex-row gap-1 items-center justify-between
+                    w-full
+                    "
+                >
+                <h3
+                    class="
+
+                        text-base font-semibold text-gray-800
+                        w-fit
+                        "
+                    >
                     {#if e_success}
                         <span class="text-green-500">
                             <BadgeQuestionMark class="inline-block mr-2" />
@@ -160,6 +181,21 @@ function send_help_tech_email() {
                         </span> -->
                     {/if}
 
+                    <!-- Cancel button -->
+                </h3>
+                <button
+                    onclick={() => ($ae_sess.show_help_tech = false)}
+                    class="
+                        btn btn-base preset-tonal-tertiary
+                        {btn_class}
+                        "
+                    title="Close Help Request Form"
+                    >
+                    <span class="fas fa-times"></span>
+                    <span class="sr-only">Close</span>
+                </button>
+            </div>
+
             <form
                 class="
                     m-1
@@ -185,7 +221,8 @@ function send_help_tech_email() {
                     class="
                         btn btn-lg
                         m-1
-                    preset-tonal-success
+                        preset-tonal-warning
+                        hover:preset-tonal-success
                         preset-outlined-warning-600-400
                         transition-all
                         {btn_class}
@@ -206,60 +243,119 @@ function send_help_tech_email() {
 
             </form>
 
-        <p class="text-sm text-gray-500 text-center">
+            <div
+                class="
+                    text-sm text-gray-500 text-center italic
+                    "
+                    >
                 This is intended for technical issues only. Please contact your organization's staff if you have a question about your membership, recorded content, meetings, or posts.
-        </p>
+            </div>
 
-        <div>
+            <div
-            <h2 class="text-lg font-semibold text-gray-800">
+                class="border border-gray-300 rounded p-2">
+                <div
+                    class="
+                        d-flex align-items-center justify-content-between
+                        flex flex-row gap-1 items-center justify-between
+                        w-full
+                        "
+                    >
+                    <h4
+                        class="
+
+                            text-base font-semibold text-gray-800
+                            flex flex-row gap-1 items-center justify-center
+                            "
+                        >
                         Additional Information Included
-            </h2>
+
-            <ul class="list-disc list-inside text-gray-800 text-sm">
+
-                <li>Datetime = {new Date().toISOString()}</li>
+                    </h4>
-                <li>URL: {window.location.href}</li>
+                    <!-- Button to expand and show additional information -->
-                <li>Browser = {navigator.userAgent}</li>
+                    <button
-                <li>Viewport Size = {window.innerWidth} x {window.innerHeight}</li>
+                        class="
-                <li>Screen Resolution = {window.screen.width} x {window.screen.height}</li>
+                            btn btn-sm preset-tonal-tertiary
-                <li>In iframe = {$ae_loc?.iframe}</li>
+                            {btn_class}
-                <li>Theme Mode = {$ae_loc?.theme_mode}</li>
+                            "
-                <li>Theme Name = {$ae_loc?.theme_name}</li>
+                        onclick={() => (hide_additional_info = !hide_additional_info)}
-                <li>Account ID = {$slct.account_id}</li>
+                        title="Toggle additional information"
-                <li>Access Type = {$ae_loc?.access_type}</li>
+                        >
+                        <span>
+                        {#if hide_additional_info}
+                            <span class="fas fa-caret-right"></span>
+                            Show
+                        {:else}
+                            <span class="fas fa-caret-down"></span>
+                            Hide
+                        {/if}
+                        </span>
+                    </button>
+                </div>
+                <ul
+                    class="list-disc list-inside text-gray-800 text-sm"
+                    class:hidden={hide_additional_info}
+                    >
+                    <li><span class="text-sm text-gray-500">Datetime =</span> {new Date().toISOString()}</li>
+                    <li><span class="text-sm text-gray-500">URL =</span> {window.location.href}</li>
+                    <li><span class="text-sm text-gray-500">Browser =</span> {navigator.userAgent}</li>
+                    <li><span class="text-sm text-gray-500">Viewport Size =</span> {window.innerWidth} x {window.innerHeight}</li>
+                    <li><span class="text-sm text-gray-500">Screen Resolution =</span> {window.screen.width} x {window.screen.height}</li>
+                    <li><span class="text-sm text-gray-500">In iframe =</span> {$ae_loc?.iframe}</li>
+                    <li><span class="text-sm text-gray-500">Theme Mode =</span> {$ae_loc?.theme_mode}</li>
+                    <li><span class="text-sm text-gray-500">Theme Name =</span> {$ae_loc?.theme_name}</li>
+                    <li><span class="text-sm text-gray-500">Account ID =</span> {$slct.account_id}</li>
+                    <li><span class="text-sm text-gray-500">Access Type =</span> {$ae_loc?.access_type}</li>
                     {#if $ae_loc?.person_id}
-                    <li>person_id = {$ae_loc?.person_id}</li>
+                        <li><span class="text-sm text-gray-500">person_id =</span> {$ae_loc?.person_id}</li>
-                    <li>full_name = {$ae_loc?.full_name}</li>
+                        <li><span class="text-sm text-gray-500">full_name =</span> {$ae_loc?.full_name}</li>
                     {/if}
                     {#if $ae_loc?.user_id}
-                    <li>user_id = {$ae_loc?.user_id}</li>
+                        <li><span class="text-sm text-gray-500">user_id =</span> {$ae_loc?.user_id}</li>
-                    <li>username = {$ae_loc?.username}</li>
+                        <li><span class="text-sm text-gray-500">username =</span> {$ae_loc?.username}</li>
-                    <li>email = {$ae_loc?.email}</li>
+                        <li><span class="text-sm text-gray-500">email =</span> {$ae_loc?.email}</li>
                     {/if}
-                <li>API Base URL: {$ae_api.base_url}</li>
+                    <li><span class="text-sm text-gray-500">API Base URL =</span> {$ae_api.base_url}</li>
 
                     {#if additional_kv && Object.keys(additional_kv).length > 0}
-                    <h2 class="text-lg font-semibold text-gray-800">Additional Component Info:</h2>
+                        <h2 class="text-base font-semibold text-gray-800">Component Info:</h2>
                     <ul class="list-disc list-inside text-gray-800 text-sm">
                     {#each Object.entries(additional_kv) as [key, value]}
-                    <li>{key} = {value}</li>
+                        <li><span class="text-sm text-gray-500">{key} =</span> {value ?? '-- not set --'}</li>
                     {/each}
                     </ul>
                     {/if}
 
                 </ul>
-            <p class="text-gray-600 text-sm mt-2">
+                <div class="text-sm text-gray-500 text-center italic">
                     This information will be included in the help request to assist technical support in diagnosing the issue.
-            </p>
+                </div>
 
             </div>
+
+        <!-- Cancel button -->
+        <button
+            onclick={() => ($ae_sess.show_help_tech = false)}
+            class="
+                btn btn-sm preset-tonal-tertiary
+                m-1
+                {btn_class}
+                "
+            title="Close Help Request Form"
+            >
+            <span class="fas fa-times"></span>
+            <span class="">Cancel</span>
+        </button>
+
         </div>
 
+
+
     {:else}
 
         <button
             onclick={() => ($ae_sess.show_help_tech = true)}
             class="
                 btn btn-sm
-                m-1
                 preset-outlined-warning-600-400
                 transition-all
                 {btn_class}
@@ -267,9 +363,11 @@ function send_help_tech_email() {
             title={btn_title}
             >
             {#if !hide_icon}
-                <BadgeQuestionMark class="inline-block mr-2" />
+                <BadgeQuestionMark class="inline-block m-0.5" />
             {/if}
+            <span class="hidden">
             {btn_text}
+            </span>
         </button>
 
     {/if}

src/routes/idaa/(idaa)/+layout.svelte

@@ -194,8 +194,10 @@ if (browser) {
 
 {#if (browser && ($ae_loc.trusted_access || ($ae_loc.authenticated_access && $idaa_loc.novi_uuid)))}
 
+    <!-- e_class="w-xl" -->
+    <!-- e_class="float-right" -->
     <Help_tech
-        e_class="w-xl"
+
         btn_class="novi_btn"
         additional_kv={{
             'novi_uuid': $idaa_loc.novi_uuid,