fix(launcher): remove ghost Flowbite close btn; add working Close btn in footer

The Flowbite Dialog component (which Drawer wraps internally) renders a
<CloseButton type='submit'> by default when dismissable=true. Since the
Drawer does not use the form/dialog mechanism, that button appeared at the
bottom of the drawer but did nothing. Fix: dismissable={false} on the cfg
Drawer suppresses it.

launcher_cfg.svelte footer redesigned:
- Lower-left: Close button (always visible) — mirrors top-right X, useful
  when the user has scrolled down through long config sections
- Lower-right: Reload (always visible, shorter label)
- Full-width Debug Panel button (edit_mode only, below the row)

Click-outside behavior unchanged — Flowbite Dialog outsideclose defaults
to true, so tapping outside the drawer still closes it.
This commit is contained in:
Scott Idem
2026-03-13 15:07:46 -04:00
parent bf22b4a512
commit 456674cc3e
2 changed files with 20 additions and 8 deletions

View File

@@ -874,6 +874,7 @@
</div>
<Drawer
dismissable={false}
class="bg-orange-50 dark:bg-slate-800 opacity-90 hover:opacity-97 transition-all duration-300 border border-gray-300 dark:border-gray-600 w-full md:w-96 lg:w-[32rem]"
placement="left"
{...{

View File

@@ -216,28 +216,39 @@
class="w-full flex flex-col gap-2 border-t border-surface-500/20 pt-4 mt-auto"
>
<div class="grid grid-cols-2 gap-2">
<!-- Close button — always visible in lower-left as a second dismissal point.
Useful in kiosk/iframe mode where the top-right close btn may scroll out of view. -->
<button
type="button"
onclick={() =>
($events_loc.launcher.hide_drawer__debug = false)}
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 transition-all"
class:hidden={!$ae_loc.edit_mode}
onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 transition-all"
>
<span class="fas fa-bug mr-2"></span>
Debug Panel
<span class="fas fa-times mr-2"></span>
Close
</button>
<button
type="button"
onclick={() => location.reload()}
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition-all"
class:col-span-2={!$ae_loc.edit_mode}
>
<span class="fas fa-sync-alt mr-2"></span>
Reload Page
Reload
</button>
</div>
{#if $ae_loc.edit_mode}
<button
type="button"
onclick={() =>
($events_loc.launcher.hide_drawer__debug = false)}
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 transition-all w-full"
>
<span class="fas fa-bug mr-2"></span>
Debug Panel
</button>
{/if}
<p
class="text-[9px] text-center opacity-40 uppercase font-bold tracking-widest mt-2"
>