From 38c5345060abf649d4e156df2fc72ccdd2129e9b Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 1 Apr 2026 18:09:17 -0400
Subject: [PATCH] Making things look nicer.

---
 src/lib/app_components/e_app_sys_bar.svelte | 30 ++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte
index 0724b761..7beb6d03 100644
--- a/src/lib/app_components/e_app_sys_bar.svelte
+++ b/src/lib/app_components/e_app_sys_bar.svelte
@@ -629,7 +629,7 @@ const theme_options = [
                         <ShieldUser size="1.1em" class="shrink-0" />
                     {/if}
                     <span
-                        class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/shield:max-w-20 group-hover/shield:opacity-100">
+                        class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/shield:max-w-20 group-hover/shield:opacity-100">
                         {access_label ?? 'Auth?'}
                     </span>
                 </button>
@@ -639,12 +639,12 @@ const theme_options = [
             {#if !$ae_loc?.iframe}
                 <button
                     type="button"
-                    class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary group/font transition-all duration-200"
+                    class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary group/font transition-all duration-700 hover:duration-200"
                     onclick={cycle_font_size}
                     title={font_title}>
                     <span class="text-sm leading-none font-bold">{font_label}</span>
                     <span
-                        class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/font:max-w-20 group-hover/font:opacity-100"
+                        class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/font:max-w-20 group-hover/font:opacity-100 group-hover/display:inline-block"
                         >Font</span>
                 </button>
             {/if}
@@ -653,43 +653,43 @@ const theme_options = [
             {#if !$ae_loc?.iframe}
                 <button
                     type="button"
-                    class="btn btn-sm preset-tonal-surface hover:preset-tonal-secondary group/mode transition-all duration-200"
+                    class="btn btn-sm preset-tonal-surface hover:preset-tonal-secondary group/mode transition-all duration-500 hover:duration-200"
                     onclick={toggle_theme_mode}
                     title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
                         'unknown'})">
                     {#if $ae_loc?.theme_mode === 'dark'}
                         <Moon size="1.1em" class="shrink-0" />
                         <span
-                            class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
+                            class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
                             >Dark</span>
                     {:else}
                         <Sun size="1.1em" class="shrink-0" />
                         <span
-                            class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
+                            class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
                             >Light</span>
                     {/if}
                 </button>
             {/if}
 
-            <!-- EDIT MODE TOGGLE (authenticated+ only) ───────────────────── -->
-            {#if $ae_loc?.authenticated_access}
+            <!-- EDIT MODE TOGGLE (public+ only; was authenticated+) ───────────────────── -->
+            {#if $ae_loc?.public_access}
                 {#if $ae_loc.edit_mode}
                     <button
                         type="button"
-                        class="btn btn-sm preset-tonal-warning hover:preset-tonal-success group/edit transition-all duration-200"
+                        class="btn btn-sm preset-tonal-warning hover:preset-tonal-success group/edit transition-all duration-500 hover:duration-200 pl-.05 pr-1.5"
                         onclick={() => {
                             $ae_loc.edit_mode = false;
                         }}
                         title="Edit mode ON — click to turn off">
                         <ToggleRight size="1em" class="inline-block text-sm" />
                         <span
-                            class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
+                            class="btn-label max-w-0 overflow-hidden text-xs font-semibold opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
                             >Edit</span>
                     </button>
                 {:else}
                     <button
                         type="button"
-                        class="btn btn-sm preset-tonal-surface hover:preset-tonal-warning group/edit transition-all duration-200"
+                        class="btn btn-sm preset-tonal-surface hover:preset-tonal-warning group/edit transition-all duration-500 hover:duration-200 pl-.05 pr-1.5"
                         onclick={() => {
                             $ae_loc.edit_mode = true;
                         }}
@@ -698,8 +698,8 @@ const theme_options = [
                             size="1em"
                             class="inline-block text-sm opacity-50" />
                         <span
-                            class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
-                            >Edit</span>
+                            class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
+                            >Edit?</span>
                     </button>
                 {/if}
             {/if}
@@ -713,12 +713,12 @@ const theme_options = [
                 {#if expand}
                     <CircleX size="1.1em" class="shrink-0" />
                     <span
-                        class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
+                        class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
                         >Close</span>
                 {:else}
                     <Menu size="1.1em" class="shrink-0" />
                     <span
-                        class="btn-label max-w-0 overflow-hidden pl-1 text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
+                        class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
                         >Menu</span>
                 {/if}
             </button>