Last round of prettier: npx prettier --write src/

src/lib/app_components/e_app_theme.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
-    import { Minimize2, Moon, Sun } from '@lucide/svelte';
-    import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
+import { Minimize2, Moon, Sun } from '@lucide/svelte';
+import {
+    ae_loc,
+    ae_sess,
+    ae_api,
+    slct,
+    slct_trigger
+} from '$lib/stores/ae_stores';
 
-    interface Props {
-        log_lvl?: number;
-        hide?: null | boolean;
-        expand?: boolean;
-        set_theme_mode: any;
-        set_theme_name: any;
-    }
+interface Props {
+    log_lvl?: number;
+    hide?: null | boolean;
+    expand?: boolean;
+    set_theme_mode: any;
+    set_theme_name: any;
+}
 
-    let {
-        log_lvl = $bindable(0),
-        hide = $bindable(false),
-        expand = $bindable(false),
-        set_theme_mode,
-        set_theme_name
-    }: Props = $props();
+let {
+    log_lvl = $bindable(0),
+    hide = $bindable(false),
+    expand = $bindable(false),
+    set_theme_mode,
+    set_theme_name
+}: Props = $props();
 </script>
 
 <!-- Change light and dark mode -->
@@ -37,25 +43,23 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
 
         bg-surface-100 dark:bg-surface-800
         text-surface-900 dark:text-surface-100
-        border border-surface-200 dark:border-surface-700
+        border-surface-200 dark:border-surface-700 flex
 
-        flex flex-col flex-wrap gap-1
+        w-72 max-w-72 flex-col flex-wrap
         items-end justify-center
 
-        w-72 max-w-72
+        gap-1 rounded-lg
+        border
         p-1
-        rounded-lg
         shadow-md
 
-        duration-300 delay-150 hover:delay-1000 hover:ease-out
-        transition-all
+        transition-all delay-150 duration-300 hover:delay-1000
+        hover:ease-out
         "
-    class:hidden={hide}
->
+    class:hidden={hide}>
     <div
         class:hidden={!expand}
-        class="flex flex-row flex-wrap gap-2 items-center justify-between w-full"
-    >
+        class="flex w-full flex-row flex-wrap items-center justify-between gap-2">
         <!-- Theme Name: -->
         <span class="text-sm font-semibold">
             {$ae_loc.theme_name}
@@ -74,7 +78,10 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
                 // document.body.setAttribute('data-theme', $ae_loc?.theme_name);
 
                 // NEW for Tailwind v4: Update the html attribute named "data-theme" to the current theme name.
-                document.documentElement.setAttribute('data-theme', new_theme_name);
+                document.documentElement.setAttribute(
+                    'data-theme',
+                    new_theme_name
+                );
 
                 // if ($ae_loc.theme_mode == 'light') {
                 //     document.documentElement.classList.remove('dark');
@@ -86,8 +93,7 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
             }}
             bind:value={$ae_loc.theme_name}
             class="select w-32"
-            title="Theme name"
-        >
+            title="Theme name">
             <option value="">-- None --</option>
             <option value="cerberus">Cerberus</option>
             <option value="concord">Concord</option>
@@ -112,41 +118,38 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
     </div>
 
     <div
-        class="flex flex-row flex-wrap gap-2 items-center w-full"
+        class="flex w-full flex-row flex-wrap items-center gap-2"
         class:justify-between={expand}
-        class:justify-end={!expand}
-    >
+        class:justify-end={!expand}>
         {#if expand}
             <!-- Hide theme options -->
             <button
                 class="
-                btn btn-sm text-xs
-                preset-tonal-secondary hover:preset-filled-secondary-500
-                transition-all group
+                btn btn-sm preset-tonal-secondary
+                hover:preset-filled-secondary-500 group
+                text-xs transition-all
                 "
                 onclick={() => {
                     expand = !expand;
                 }}
-                title="Hide Theme Options"
-            >
+                title="Hide Theme Options">
                 <!-- <span class="fas fa-compress-alt"></span> -->
                 <Minimize2 size="1em" class="m-1" />
                 <span
                     class="
                     hidden
-                    group-hover:inline-block
                     text-xs
-                    "
-                >
+                    group-hover:inline-block
+                    ">
                     Hide Theme Options
                 </span>
             </button>
 
             <button
                 class="
-                btn btn-sm text-xs
-                preset-tonal-secondary hover:preset-filled-secondary-500
-                transition-all group
+                btn btn-sm preset-tonal-secondary
+                hover:preset-filled-secondary-500 group
+                text-xs transition-all
                 "
                 onclick={() => {
                     if ($ae_loc.theme_mode == 'light') {
@@ -157,23 +160,24 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
 
                     // DOM sync is handled reactively by the layout effect in +layout.svelte
                 }}
-                title="Change light and dark mode"
-            >
+                title="Change light and dark mode">
                 <!-- <span class="fas fa-adjust"></span> -->
                 {#if $ae_loc.theme_mode == 'light'}
                     <Sun class="m-1" />
-                    <span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
+                    <span
+                        class="hidden group-hover:inline-block md:inline-block"
+                        >Light Mode</span>
                 {:else if $ae_loc.theme_mode == 'dark'}
                     <Moon class="m-1" />
-                    <span class="hidden group-hover:inline-block">Dark Mode</span>
+                    <span class="hidden group-hover:inline-block"
+                        >Dark Mode</span>
                 {/if}
                 <span
                     class="
                     hidden
-                    group-hover:inline-block
                     text-xs
-                    "
-                >
+                    group-hover:inline-block
+                    ">
                     Change
                 </span>
             </button>
@@ -197,18 +201,19 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
 
                     expand = !expand;
                 }}
-                title="Change light and dark mode"
-            >
+                title="Change light and dark mode">
                 {#if $ae_loc.theme_mode == 'light'}
                     <span class="inline-block" title="Light Mode">
                         <Sun />
                     </span>
-                    <span class="hidden group-hover:inline-block">Light Mode</span>
+                    <span class="hidden group-hover:inline-block"
+                        >Light Mode</span>
                 {:else if $ae_loc.theme_mode == 'dark'}
                     <span class="inline-block" title="Dark Mode">
                         <Moon />
                     </span>
-                    <span class="hidden group-hover:inline-block">Dark Mode</span>
+                    <span class="hidden group-hover:inline-block"
+                        >Dark Mode</span>
                 {/if}
             </button>
         {/if}