logan
52d095e3c6
The tab bar's fifth item opened `<app-sidebar>` in a `wa-drawer` sliding in from the side, which is a desktop shape put on a phone: a 200px column of a 424px screen, opening away from the thumb that asked for it, with the rest of its 400px band empty. It also had three nested scrollers in it -- the dialog, its body, and the sidebar's own `overflow-y: auto` host -- so which box a drag moved depended on where the finger landed, which is the "only part of the screen scrolls under my finger" in the report. It is the same element with `placement="bottom"` and `without-header`, so the surface is the sheet #60 already built rather than a second pattern: a `wa-drawer` is a native `<dialog>` opened with `showModal()`, which is exactly the top layer that finding rests on, so the focus trap, Escape, tap-outside and `wa-after-hide` come along unchanged and nothing new has to be proved about paint containment. The sidebar is still mounted rather than re-listed as data, because the shell's own copy is `display: none` below 600px rather than removed -- a second list drawing `nav-*` handles is the duplicate-testid failure this component already renders conditionally to avoid. What `expanded` means had to grow to say the host owns the *box*: `app-sidebar` writes an inline width and caps itself at 400px, which beats any rule the host could write, so the width, the scrolling and the mouse-only resize handle now follow that attribute. The rows are 48px below 600px, stated in the sidebar's own stylesheet since that is the only place it renders there. Measured in the running app at 424x439: the sheet is 424 wide, 373 tall (85vh, so there is an outside to tap), rows 48px, one scroller with `overscroll-behavior: contain`, and Settings' row reachable at the end of it. Desktop and Compact are untouched. Closes #71
525 lines
16 KiB
TypeScript
525 lines
16 KiB
TypeScript
import { LitElement, html, css } from 'lit';
|
|
import { customElement, state, property } from 'lit/decorators.js';
|
|
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
|
import { designTokens } from '../../styles/tokens.css';
|
|
|
|
import type { DragActiveDetail } from '@utils/drag-controller';
|
|
import { ActiveViewController } from '@store/controllers/active-view-controller';
|
|
import { ViewVisibilityController } from '@store/controllers/view-visibility-controller';
|
|
import { VIEW_META } from '../../services/view-meta';
|
|
import type { View } from '../../services/view-meta';
|
|
|
|
const MIN_WIDTH = 56;
|
|
const MAX_WIDTH = 400;
|
|
const DEFAULT_WIDTH = 200;
|
|
const COLLAPSE_WIDTH = 142;
|
|
|
|
/**
|
|
* Below this viewport width the sidebar collapses itself to icons.
|
|
* `.collapsed` existed and only a manual drag ever reached it (H-11),
|
|
* so a small window kept a 200 px sidebar it could not afford and the
|
|
* content pane wore the whole loss.
|
|
*/
|
|
const AUTO_COLLAPSE_VIEWPORT = 900;
|
|
|
|
@customElement('app-sidebar')
|
|
export class AppSidebar extends LitElement {
|
|
static override styles = [designTokens, css`
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
height: 100%;
|
|
background-color: var(--yj-bg-surface, #212529);
|
|
min-width: ${MIN_WIDTH}px;
|
|
max-width: ${MAX_WIDTH}px;
|
|
/* Eleven items need ~406 px and the pane is whatever the
|
|
window leaves it — 352 px at 700x480, which clipped Jobs
|
|
and Settings behind the player bar with no way to reach
|
|
them (H-11). Collapsing to icons does not help: it is a
|
|
width mode, and this is the height. */
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
/* A host that has made room owns the box, not just the labels
|
|
(#71). The bottom-nav sheet is the width of the screen and
|
|
provides the one scroll container it needs; left to itself
|
|
the sidebar is a 200px column with a second scroller inside
|
|
it, which is what a nested scroll region feels like under a
|
|
thumb -- part of the surface moves and part of it does not. */
|
|
:host([expanded]) {
|
|
max-width: none;
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* And the width is not draggable there. It is a mouse
|
|
affordance (mousedown, col-resize) sitting on the right edge
|
|
of a touch surface, where the compatibility mouse events a
|
|
tap synthesises can start a resize nobody asked for. */
|
|
:host([expanded]) .resize-handle {
|
|
display: none;
|
|
}
|
|
|
|
.resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
background-color: transparent;
|
|
transition: background-color 0.15s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.resize-handle:hover,
|
|
.resize-handle.dragging {
|
|
background-color: var(--yj-text-tertiary, #6c757d);
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* The nav item is a real <button>: it was a bare <li @click>,
|
|
which is why tabbing through the whole app reached fourteen
|
|
controls and not one of them was navigation (H-5). */
|
|
li {
|
|
display: block;
|
|
}
|
|
|
|
li button {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
background: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: left;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
li button wa-icon {
|
|
font-size: var(--yj-icon-md);
|
|
flex-shrink: 0;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* A hover tint is for a device that hovers (#54), and this
|
|
component is on a phone too: below 600px it is what
|
|
bottom-nav's "More" sheet mounts, where a hold
|
|
synthesises a hover and leaves a destination looking picked
|
|
after the finger has gone. */
|
|
@media (hover: hover) and (pointer: fine) {
|
|
li button:hover {
|
|
background-color: var(--yj-bg-elevated, #343a40);
|
|
}
|
|
}
|
|
|
|
li button:focus-visible {
|
|
outline: 2px solid var(--yj-accent, #ffd43b);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
li button.active {
|
|
background-color: var(--yj-bg-overlay, #495057);
|
|
}
|
|
|
|
/* The press state (#54), after the .active rule and at the same
|
|
specificity, so pressing the destination you are already on
|
|
still says something. It is what a tap gets now that
|
|
index.css has taken the web view's own highlight box away. */
|
|
li button:active {
|
|
background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
|
|
}
|
|
|
|
li button p {
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
li button.drag-hover {
|
|
background-color: var(
|
|
--yj-accent-bg-strong,
|
|
rgba(255, 212, 59, 0.15)
|
|
);
|
|
outline: 1px dashed var(--yj-accent, #ffd43b);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
li button p {
|
|
font-size: var(--yj-text-md);
|
|
}
|
|
|
|
/* Icon-only collapsed mode */
|
|
:host(.collapsed) ul {
|
|
padding: 8px;
|
|
}
|
|
|
|
:host(.collapsed) li button {
|
|
justify-content: center;
|
|
padding: 10px;
|
|
}
|
|
|
|
:host(.collapsed) li button p {
|
|
display: none;
|
|
}
|
|
|
|
:host(.collapsed) li button wa-icon {
|
|
font-size: var(--yj-icon-md);
|
|
}
|
|
|
|
/* Below 600px the only place this renders is the bottom-nav
|
|
sheet -- the shell's own copy is display: none there -- so
|
|
the rows are sized for the thumb that opened it: 48px, which
|
|
is #186's floor and the height every row in #60's context
|
|
sheet already has. A media query inside a shadow root is
|
|
answered by the viewport, so the component states this
|
|
itself rather than the sheet reaching in. */
|
|
@media (max-width: 599px) {
|
|
ul {
|
|
padding: 4px 8px 8px;
|
|
}
|
|
|
|
li button {
|
|
min-height: 48px;
|
|
padding: 12px 10px;
|
|
gap: 14px;
|
|
}
|
|
}
|
|
`];
|
|
|
|
/** Delay in ms before a drag-hover triggers navigation. */
|
|
private static readonly HOVER_NAV_DELAY = 600;
|
|
|
|
/**
|
|
* Which item is lit, read from the shell rather than tracked here.
|
|
*
|
|
* This used to be a `@state()` field defaulting to `home` -- the
|
|
* landing view -- because "the sidebar does not hear a `navigate`
|
|
* it did not send". That default was the only honest moment it
|
|
* ever had: a back-navigation dispatches no `navigate`, so the
|
|
* highlight stayed on the view the user had just left (#72), and
|
|
* the copy of this component that `bottom-nav` mounts inside its
|
|
* drawer opened on `home` from whatever page you were standing on.
|
|
* The shell publishes the active view now, so there is nothing to
|
|
* default and nothing to keep in step.
|
|
*/
|
|
private activeCtrl = new ActiveViewController(this);
|
|
|
|
@state()
|
|
private isDragging = false;
|
|
|
|
@state()
|
|
private collapsed = false;
|
|
|
|
/**
|
|
* Keep the labels regardless of the viewport, for a host that has
|
|
* made room for them -- `bottom-nav`'s sheet, which is the whole
|
|
* screen wide on the phone where this would otherwise auto-collapse
|
|
* to icons. The auto-collapse is a *width* response to a narrow
|
|
* shell, and inside a sheet the shell is not what the sidebar is
|
|
* sharing space with.
|
|
*
|
|
* It says the host owns the *box*, not only the labels: the width,
|
|
* the scrolling and the resize handle all follow it (#71).
|
|
*/
|
|
@property({ type: Boolean, reflect: true })
|
|
expanded = false;
|
|
|
|
/** The width the user chose, restored when the window grows back. */
|
|
private userWidth = DEFAULT_WIDTH;
|
|
|
|
private narrowViewport: MediaQueryList | null =
|
|
null;
|
|
|
|
/** Whether a track drag is in progress somewhere in the app. */
|
|
@state()
|
|
private trackDragActive = false;
|
|
|
|
/** The nav item ID being hovered during a drag. */
|
|
@state()
|
|
private dragHoverView: View | null = null;
|
|
|
|
private dragHoverTimer: ReturnType<
|
|
typeof setTimeout
|
|
> | null = null;
|
|
|
|
/**
|
|
* Which destinations the user has kept (#25). The list below is
|
|
* still the whole set and its order -- this only filters it, and
|
|
* only for drawing: a hidden view is still reachable by `navigate`,
|
|
* which is what detail views and the launch page depend on.
|
|
*/
|
|
private visibilityCtrl = new ViewVisibilityController(this);
|
|
|
|
private navItems = VIEW_META;
|
|
|
|
override connectedCallback() {
|
|
super.connectedCallback();
|
|
this.style.width = `${DEFAULT_WIDTH}px`;
|
|
this.narrowViewport = window.matchMedia(
|
|
`(max-width: ${AUTO_COLLAPSE_VIEWPORT - 1}px)`,
|
|
);
|
|
this.narrowViewport.addEventListener(
|
|
'change',
|
|
this.onViewportChange,
|
|
);
|
|
this.applyViewportWidth();
|
|
document.addEventListener(
|
|
'mousemove',
|
|
this.handleMouseMove,
|
|
);
|
|
document.addEventListener(
|
|
'mouseup',
|
|
this.handleMouseUp,
|
|
);
|
|
document.addEventListener(
|
|
'yj-drag-active',
|
|
this.onDragActive as EventListener,
|
|
);
|
|
}
|
|
|
|
override disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
this.narrowViewport?.removeEventListener(
|
|
'change',
|
|
this.onViewportChange,
|
|
);
|
|
this.narrowViewport = null;
|
|
document.removeEventListener(
|
|
'mousemove',
|
|
this.handleMouseMove,
|
|
);
|
|
document.removeEventListener(
|
|
'mouseup',
|
|
this.handleMouseUp,
|
|
);
|
|
document.removeEventListener(
|
|
'yj-drag-active',
|
|
this.onDragActive as EventListener,
|
|
);
|
|
this.clearDragHoverTimer();
|
|
}
|
|
|
|
override updated() {
|
|
this.classList.toggle('collapsed', this.collapsed);
|
|
}
|
|
|
|
override render() {
|
|
return html`
|
|
<div
|
|
class="resize-handle ${this.isDragging ? 'dragging' : ''}"
|
|
@mousedown=${this.handleMouseDown}
|
|
></div>
|
|
<nav aria-label="Main">
|
|
<ul>
|
|
${this.navItems
|
|
.filter((item) => this.visibilityCtrl.visible(item.id))
|
|
.map((item) => {
|
|
const active = this.activeCtrl.isActive(item.id);
|
|
const classes = [
|
|
active
|
|
? 'active'
|
|
: '',
|
|
this.dragHoverView === item.id
|
|
? 'drag-hover'
|
|
: '',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
return html`
|
|
<li>
|
|
<button
|
|
type="button"
|
|
class=${classes}
|
|
data-testid="nav-${item.id}"
|
|
aria-current=${active
|
|
? 'page'
|
|
: 'false'}
|
|
@click=${() =>
|
|
this.navigate(item.id)}
|
|
@dragover=${(e: DragEvent) =>
|
|
this.onNavDragOver(
|
|
e,
|
|
item.id,
|
|
)}
|
|
@dragleave=${() =>
|
|
this.onNavDragLeave(
|
|
item.id,
|
|
)}
|
|
@drop=${(e: DragEvent) =>
|
|
this.onNavDrop(e)}
|
|
>
|
|
<wa-icon
|
|
name=${item.icon}
|
|
></wa-icon>
|
|
<p>${item.label}</p>
|
|
</button>
|
|
</li>
|
|
`;
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
`;
|
|
}
|
|
|
|
private handleMouseDown = (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
this.isDragging = true;
|
|
};
|
|
|
|
private handleMouseMove = (e: MouseEvent) => {
|
|
if (!this.isDragging) return;
|
|
|
|
const rect = this.getBoundingClientRect();
|
|
const newWidth = e.clientX - rect.left;
|
|
const clampedWidth = Math.min(
|
|
Math.max(newWidth, MIN_WIDTH),
|
|
MAX_WIDTH,
|
|
);
|
|
|
|
this.style.width = `${clampedWidth}px`;
|
|
this.collapsed = clampedWidth < COLLAPSE_WIDTH;
|
|
this.userWidth = clampedWidth;
|
|
};
|
|
|
|
private onViewportChange = () => {
|
|
this.applyViewportWidth();
|
|
};
|
|
|
|
/**
|
|
* Icons below the breakpoint, the user's own width above it. The
|
|
* width is inline (set here and by the drag handle), so this cannot
|
|
* be a media query in the stylesheet.
|
|
*/
|
|
private applyViewportWidth() {
|
|
// A host that made room decides how much: `bottom-nav`'s sheet
|
|
// is the whole screen wide, and the inline width below -- which
|
|
// beats any rule the host could write -- would draw the old
|
|
// 200px side drawer inside it.
|
|
if (this.expanded) {
|
|
this.style.width = '100%';
|
|
this.collapsed = false;
|
|
|
|
return;
|
|
}
|
|
|
|
const narrow = this.narrowViewport?.matches ?? false;
|
|
const width = narrow
|
|
? MIN_WIDTH
|
|
: this.userWidth;
|
|
|
|
this.style.width = `${width}px`;
|
|
this.collapsed = width < COLLAPSE_WIDTH;
|
|
}
|
|
|
|
private handleMouseUp = () => {
|
|
this.isDragging = false;
|
|
};
|
|
|
|
// =================================================================
|
|
// Drag-hover navigation
|
|
// =================================================================
|
|
|
|
/** Views that accept track drops. */
|
|
private static readonly DROP_VIEWS: Set<View> =
|
|
new Set(['playlists']);
|
|
|
|
private onDragActive = (
|
|
e: CustomEvent<DragActiveDetail>,
|
|
) => {
|
|
this.trackDragActive = e.detail.active;
|
|
|
|
if (!e.detail.active) {
|
|
this.clearDragHoverTimer();
|
|
this.dragHoverView = null;
|
|
}
|
|
};
|
|
|
|
private onNavDragOver = (
|
|
e: DragEvent,
|
|
view: View,
|
|
) => {
|
|
if (!this.trackDragActive) return;
|
|
|
|
if (!AppSidebar.DROP_VIEWS.has(view)) return;
|
|
|
|
// Prevent default so that `drop` can fire.
|
|
e.preventDefault();
|
|
|
|
if (e.dataTransfer) {
|
|
e.dataTransfer.dropEffect = 'copy';
|
|
}
|
|
|
|
// Already hovering this item — no-op.
|
|
if (this.dragHoverView === view) return;
|
|
|
|
this.clearDragHoverTimer();
|
|
this.dragHoverView = view;
|
|
|
|
this.dragHoverTimer = setTimeout(() => {
|
|
this.dragHoverTimer = null;
|
|
|
|
if (this.dragHoverView === view) {
|
|
this.navigate(view);
|
|
}
|
|
}, AppSidebar.HOVER_NAV_DELAY);
|
|
};
|
|
|
|
private onNavDragLeave = (view: View) => {
|
|
if (this.dragHoverView !== view) return;
|
|
|
|
this.clearDragHoverTimer();
|
|
this.dragHoverView = null;
|
|
};
|
|
|
|
private onNavDrop = (e: DragEvent) => {
|
|
// The drop target is the playlist-view, not
|
|
// the sidebar itself — just prevent the
|
|
// default browser action.
|
|
e.preventDefault();
|
|
this.clearDragHoverTimer();
|
|
this.dragHoverView = null;
|
|
};
|
|
|
|
private clearDragHoverTimer() {
|
|
if (this.dragHoverTimer !== null) {
|
|
clearTimeout(this.dragHoverTimer);
|
|
this.dragHoverTimer = null;
|
|
}
|
|
}
|
|
|
|
private navigate(view: View) {
|
|
// No optimistic highlight: the shell answers, and it answers
|
|
// synchronously in `handleNavigate` before it awaits anything.
|
|
// Setting it here as well is the second opinion this fix
|
|
// removes -- it is what let a click's highlight survive a
|
|
// navigation the shell then handled differently.
|
|
this.dispatchEvent(new CustomEvent('navigate', {
|
|
detail: { view },
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'app-sidebar': AppSidebar;
|
|
}
|
|
}
|