Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(launcher): consolidate menu controls and anchor to bottom

Browse Source 
- Combine Extend/Mirror into a single toggle button, moved behind edit_mode
- All edit-mode controls (All Files, All Sessions, Display) now share consistent preset-tonal-tertiary styling
- Remove the always-visible display row and its non-native-mode disclaimer
- Wrap Menu_launcher_controls in mt-auto to keep it pinned to the bottom of the sidebar regardless of session count
- Add min-w-20 to file size chip to prevent collapse on narrow sessions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-05-22 13:48:53 -04:00
parent 17b549a75c
commit 172ea994c7
3 changed files with 54 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
View File

@@ -765,7 +765,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
</span>
<span
class="event_file_size preset-filled-surface-100-900 flex w-22 max-w-28 flex-row items-center justify-end gap-1 rounded py-0.5 text-center text-xs"
class="event_file_size preset-filled-surface-100-900 flex min-w-20 w-22 max-w-28 flex-row items-center justify-end gap-1 rounded py-0.5 text-center text-xs"
class:hidden={hide_size}>
<Save size="0.85em" class="inline" />
{#if event_file_obj.file_size}{ae_util.format_bytes(

4
src/routes/events/[event_id]/(launcher)/launcher_menu.svelte
View File

@@ -247,5 +247,7 @@ let ae_promises: key_val = $state({
bind:trigger_reload__event_session_obj_id />
{/if}
<Menu_launcher_controls />
<div class="mt-auto w-full">
<Menu_launcher_controls />
</div>
</div>

154
src/routes/events/[event_id]/(launcher)/menu_launcher_controls.svelte
View File

@@ -36,18 +36,22 @@ const is_native_launcher_mode = $derived(
!!$ae_loc.is_native && $events_loc.launcher.app_mode === 'native'
);
async function set_quick_display_mode(mode: 'extend' | 'mirror') {
if (!is_native_launcher_mode) return;
const res = await native.set_display_layout({ mode });
if (res?.success) quick_display_mode = mode;
async function toggle_display_mode() {
const next = quick_display_mode === 'extend' ? 'mirror' : 'extend';
if (is_native_launcher_mode) {
const res = await native.set_display_layout({ mode: next });
if (res?.success) quick_display_mode = next;
} else {
quick_display_mode = next;
}
}
</script>
<div class="flex w-full max-w-full flex-col items-center justify-center gap-1">
<!-- ── Visibility toggles — edit mode only ── -->
<!-- ── Edit mode controls ── -->
{#if $ae_loc.edit_mode}
<div
class="flex w-full max-w-full flex-row items-center justify-center gap-1">
<!-- All Files / All Sessions toggles -->
<div class="flex w-full max-w-full flex-row items-center justify-center gap-1">
<button
type="button"
onclick={() => {
@@ -59,18 +63,13 @@ async function set_quick_display_mode(mode: 'extend' | 'mirror') {
$events_loc.launcher.show_content__internal_files = true;
}
}}
class="
btn btn-sm preset-tonal-tertiary
hover:preset-filled-tertiary-500 w-1/2
max-w-1/2 text-xs
transition-all
"
title="Toggle visibility of hidden and draft files in the launcher file list.">
class="btn btn-sm preset-tonal-tertiary hover:preset-filled-tertiary-500 w-1/2 max-w-1/2 text-xs transition-all"
title="Toggle visibility of hidden and draft files.">
{#if $events_loc.launcher.show_content__hidden_files}
<EyeOff size="0.85em" class="m-1 text-neutral-800/80" />
<EyeOff size="0.85em" class="m-1" />
Hide Files
{:else}
<Eye size="0.85em" class="m-1 text-neutral-800/80" />
<Eye size="0.85em" class="m-1" />
All Files
{/if}
</button>
@@ -81,27 +80,40 @@ async function set_quick_display_mode(mode: 'extend' | 'mirror') {
$events_loc.launcher.show_content__hidden_sessions =
!$events_loc.launcher.show_content__hidden_sessions;
}}
class="
btn btn-sm preset-tonal-tertiary
hover:preset-filled-tertiary-500 w-1/2
max-w-1/2 text-xs
transition-all
"
title="Toggle visibility of hidden and cancelled sessions in the launcher session list.">
class="btn btn-sm preset-tonal-tertiary hover:preset-filled-tertiary-500 w-1/2 max-w-1/2 text-xs transition-all"
title="Toggle visibility of hidden and cancelled sessions.">
{#if $events_loc.launcher.show_content__hidden_sessions}
<EyeOff size="0.85em" class="m-1 text-neutral-800/80" />
<EyeOff size="0.85em" class="m-1" />
Hide Sessions
{:else}
<Eye size="0.85em" class="m-1 text-neutral-800/80" />
<Eye size="0.85em" class="m-1" />
All Sessions
{/if}
</button>
</div>
<!-- Display mode: single toggle button — tertiary when extending (normal), warning when mirroring (special) -->
<button
type="button"
onclick={toggle_display_mode}
class="btn btn-sm w-full text-xs transition-all"
class:preset-tonal-tertiary={quick_display_mode === 'extend'}
class:hover:preset-filled-tertiary-500={quick_display_mode === 'extend'}
class:preset-tonal-warning={quick_display_mode === 'mirror'}
class:hover:preset-filled-warning-500={quick_display_mode === 'mirror'}
title="Toggle display layout between Extend (separate screens) and Mirror (same content on both).">
{#if quick_display_mode === 'extend'}
<Columns2 size="0.85em" class="m-1" />
Display: Extend
{:else}
<Copy size="0.85em" class="m-1" />
Display: Mirror
{/if}
</button>
{/if}
<!-- ── Accessibility controls — always visible ── -->
<div
class="flex w-full max-w-full flex-row items-center justify-center gap-1">
<div class="flex w-full max-w-full flex-row items-center justify-center gap-1">
<!-- Font size cycler: default → larger → smaller → default -->
<button
type="button"
@@ -115,29 +127,17 @@ async function set_quick_display_mode(mode: 'extend' | 'mirror') {
$ae_loc.font_size_mode = 'default';
}
}}
class="
btn btn-sm preset-tonal-tertiary
hover:preset-filled-tertiary-500 group
w-1/2 max-w-1/2
text-xs transition-all
"
title="Cycle font size (default → larger → smaller). Current: {$ae_loc.font_size_mode ??
'default'}">
class="btn btn-sm preset-tonal-tertiary hover:preset-filled-tertiary-500 group w-1/2 max-w-1/2 text-xs transition-all"
title="Cycle font size (default → larger → smaller). Current: {$ae_loc.font_size_mode ?? 'default'}">
{#if !$ae_loc.font_size_mode || $ae_loc.font_size_mode === 'default'}
<span class="m-1 font-mono text-sm leading-none font-bold"
>A</span>
<span class="hidden text-xs group-hover:inline-block"
>Font: Normal</span>
<span class="m-1 font-mono text-sm leading-none font-bold">A</span>
<span class="hidden text-xs group-hover:inline-block">Font: Normal</span>
{:else if $ae_loc.font_size_mode === 'larger'}
<span class="m-1 font-mono text-base leading-none font-bold"
>A+</span>
<span class="hidden text-xs group-hover:inline-block"
>Font: Larger</span>
<span class="m-1 font-mono text-base leading-none font-bold">A+</span>
<span class="hidden text-xs group-hover:inline-block">Font: Larger</span>
{:else}
<span class="m-1 font-mono text-xs leading-none font-bold"
>A−</span>
<span class="hidden text-xs group-hover:inline-block"
>Font: Smaller</span>
<span class="m-1 font-mono text-xs leading-none font-bold">A−</span>
<span class="hidden text-xs group-hover:inline-block">Font: Smaller</span>
{/if}
</button>
@@ -145,17 +145,10 @@ async function set_quick_display_mode(mode: 'extend' | 'mirror') {
<button
type="button"
onclick={() => {
$ae_loc.theme_mode =
$ae_loc.theme_mode === 'dark' ? 'light' : 'dark';
$ae_loc.theme_mode = $ae_loc.theme_mode === 'dark' ? 'light' : 'dark';
}}
class="
btn btn-sm preset-tonal-tertiary
hover:preset-filled-tertiary-500 group
w-1/2 max-w-1/2
text-xs transition-all
"
title="Toggle light/dark display mode. Current: {$ae_loc.theme_mode ??
'light'}">
class="btn btn-sm preset-tonal-tertiary hover:preset-filled-tertiary-500 group w-1/2 max-w-1/2 text-xs transition-all"
title="Toggle light/dark display mode. Current: {$ae_loc.theme_mode ?? 'light'}">
{#if $ae_loc.theme_mode === 'dark'}
<Moon class="m-1 inline-block" size="1em" />
<span class="hidden group-hover:inline-block">Dark Mode</span>
@@ -165,51 +158,4 @@ async function set_quick_display_mode(mode: 'extend' | 'mirror') {
{/if}
</button>
</div>
<!-- ── Quick display mode controls — always visible (native-only action) ── -->
<div class="flex w-full max-w-full flex-row items-center justify-center gap-1">
<button
type="button"
onclick={() => set_quick_display_mode('extend')}
disabled={!is_native_launcher_mode}
class="
btn btn-sm group w-1/2 max-w-1/2 text-xs transition-all
border-2
"
class:border-primary-500={quick_display_mode === 'extend'}
class:preset-tonal-primary={quick_display_mode === 'extend'}
class:border-surface-400={quick_display_mode !== 'extend'}
class:preset-tonal-surface={quick_display_mode !== 'extend'}
title="Set display layout to Extend (separate laptop and projector screens).">
<Columns2 size="0.9em" class="m-1 inline-block" />
<span class="hidden group-hover:inline-block">Display: Extend</span>
<span class="group-hover:hidden">Extend</span>
</button>
<button
type="button"
onclick={() => set_quick_display_mode('mirror')}
disabled={!is_native_launcher_mode}
class="
btn btn-sm group w-1/2 max-w-1/2 text-xs transition-all
border-2
"
class:border-warning-500={quick_display_mode === 'mirror'}
class:preset-tonal-warning={quick_display_mode === 'mirror'}
class:border-surface-400={quick_display_mode !== 'mirror'}
class:preset-tonal-surface={quick_display_mode !== 'mirror'}
title="Set display layout to Mirror (same content on laptop and projector).">
<Copy size="0.9em" class="m-1 inline-block" />
<span class="hidden group-hover:inline-block">Display: Mirror</span>
<span class="group-hover:hidden">Mirror</span>
</button>
</div>
{#if !is_native_launcher_mode}
<div
class="text-[10px] leading-tight opacity-70 text-center px-2"
title="Shown here as a visual preview. Active in native app mode in the session room.">
Display toggle shown as an example preview. Active in native app mode in the session room.
</div>
{/if}
</div>