feat(frontend): fullscreen toggle and album back button

- add fullscreen/fullscreen_exit icons and a top-bar toggle (right of themes)
- add back arrow left of the album title to return to the albums overview
This commit is contained in:
iu
2026-10-10 18:28:56 +03:00
parent 304cfedb75
commit ba605402ce
3 changed files with 40 additions and 2 deletions
@@ -24,13 +24,29 @@
let railWidth = $state(RAIL.def);
let panelWidth = $state(PANEL.def);
let isFullscreen = $state(false);
onMount(() => {
const r = parseInt(localStorage.getItem(RAIL.key) ?? '', 10);
if (r >= RAIL.min && r <= RAIL.max) railWidth = r;
const p = parseInt(localStorage.getItem(PANEL.key) ?? '', 10);
if (p >= PANEL.min && p <= PANEL.max) panelWidth = p;
const onFs = () => (isFullscreen = !!document.fullscreenElement);
document.addEventListener('fullscreenchange', onFs);
onFs();
return () => document.removeEventListener('fullscreenchange', onFs);
});
async function toggleFullscreen() {
try {
if (document.fullscreenElement) await document.exitFullscreen();
else await document.documentElement.requestFullscreen();
} catch {
/* недоступно */
}
}
function startResize(side: 'left' | 'right', ev: PointerEvent) {
ev.preventDefault();
const cfg = side === 'left' ? RAIL : PANEL;
@@ -134,6 +150,16 @@
</a>
{/if}
<ThemeSwitcher />
<button
type="button"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5"
aria-label={isFullscreen ? 'Выйти из полноэкранного режима' : 'На весь экран'}
title={isFullscreen ? 'Выйти из полноэкранного режима' : 'На весь экран'}
aria-pressed={isFullscreen}
onclick={toggleFullscreen}
>
<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} />
</button>
</div>
</header>