logan
018d857746
The history stack has been global since the Android back gesture landed -- every navigation is an entry and `popstate` restores any of them in either direction. What the report describes as "back is tab-scoped" is that the only way back was a detail view's own button, which leaves the screen with the view it belongs to: click over to Tracks and the album you were reading is still one entry away with nothing on screen saying so. `<nav-history>` is that affordance, plus `nav.back` / `nav.forward` on Alt+Left / Alt+Right -- the browser's own combination, and clear of the bare arrows that seek, since a binding matches on its full canonical string. Forward is not back negated, which is why the old `pushedEntries` counter is gone rather than extended: `popstate` carries no direction and fires identically both ways, so one counter decremented on every pop reads a forward as a second back. Each entry carries its index and the shell keeps the current one and a high-water mark, which also survives a jump of more than one. The buttons dispatch the events the rest of the app already dispatches rather than calling `history` themselves -- the shell owns the guard that stops a press at the root leaving the app, and a second caller reaching for history is how the old `navStack` came to disagree with the platform. Below 900px the control stands down: the top bar is what runs out of room first below that, and nothing becomes unreachable -- the shortcuts are global at every width and the phone has the platform's gesture. Closes #6
67 lines
2.7 KiB
HTML
67 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<link href="./index.css" rel="stylesheet" />
|
|
<title>yellowjacket</title>
|
|
<script src="/index.ts" type="module"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- a11y.30. First focusable thing in the document, so a keyboard
|
|
user is not walked through the header, the library filter, the
|
|
search box and eleven nav items on every navigation. -->
|
|
<a class="skip-link" href="#main-content">Skip to content</a>
|
|
<header class="top-bar">
|
|
<hgroup>
|
|
<h1 class="title">YellowJacket</h1>
|
|
<!-- a11y.29: a heading level was being used for type size. -->
|
|
<p class="subtitle">Music how it was meant to bee.</p>
|
|
</hgroup>
|
|
<!-- Global back/forward (#6). Before the library filter so the
|
|
two navigation controls in this bar are adjacent, and after
|
|
the brand because that is where a window's chrome ends and
|
|
the app's begins. Hidden below 600px by index.css: the
|
|
phone has a system back, and this bar has no room. -->
|
|
<nav-history></nav-history>
|
|
<library-filter></library-filter>
|
|
<search-bar></search-bar>
|
|
<job-indicator></job-indicator>
|
|
</header>
|
|
<div class="sidebar">
|
|
<app-sidebar></app-sidebar>
|
|
</div>
|
|
<div class="content-area">
|
|
<main class="main-panel" data-active-view="tracks" data-testid="main-content" id="main-content"
|
|
tabindex="-1">
|
|
<track-list></track-list>
|
|
</main>
|
|
<queue-panel id="queue-panel"></queue-panel>
|
|
</div>
|
|
<footer class="bottom-bar">
|
|
<now-playing></now-playing>
|
|
<audio-player></audio-player>
|
|
<button aria-label="Toggle queue" aria-controls="queue-panel" aria-expanded="false"
|
|
id="queue-button">
|
|
<!-- ICON_QUEUE in src/utils/icon-language.ts, written out
|
|
because this file has no module scope. It was `list`,
|
|
which is the Playlists destination's icon. -->
|
|
<wa-icon name="bars-staggered"></wa-icon>
|
|
</button>
|
|
</footer>
|
|
<!-- The phone's primary navigation, hidden above 600px by
|
|
index.css. Eager rather than a chunk, for the reason
|
|
notification-host is: it is the only way to move around the
|
|
app on a phone. After the footer, because that is where it
|
|
renders -- the tab bar sits below the transport, and DOM order
|
|
is what a screen reader and the tab sequence follow. -->
|
|
<bottom-nav></bottom-nav>
|
|
<first-run-wizard></first-run-wizard>
|
|
<notification-host></notification-host>
|
|
<shortcuts-overlay></shortcuts-overlay>
|
|
</body>
|
|
|
|
</html>
|