Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 logan
|
065a879190 | ||
|
logan
|
89882b4863 |
@@ -1448,6 +1448,52 @@ is therefore **reported at runtime** to `window.__yjIconMisses` and
|
||||
drawn as a fallback — an e2e sweep asserts there are none — since a
|
||||
missing icon used to be impossible, the CDN having had everything.
|
||||
|
||||
**What each icon *means* is a second table, and it is
|
||||
`utils/icon-language.ts`.** Bundling answers "does this name resolve";
|
||||
nothing answered "does this name mean what the one next to it means",
|
||||
and a wrong-but-real icon renders perfectly. So `plus` came to mean add
|
||||
to the queue, add to a playlist, make a new playlist **and** you do not
|
||||
own this — the first two *adjacent in the same context menu* — while
|
||||
`list` meant the queue, the Playlists destination and adding to the
|
||||
queue.
|
||||
|
||||
The rule the table is built on: **an icon names the noun it acts on,
|
||||
not the verb.** "Add to queue" and "add to playlist" are one verb on
|
||||
two nouns, so the noun is what has to differ — which is why adding to a
|
||||
playlist wears the Playlists destination's own icon, and why the queue
|
||||
got `bars-staggered` and stopped wearing Playlists'. `plus` keeps the
|
||||
one meaning it is unambiguous about, making something that is not there
|
||||
yet.
|
||||
|
||||
Four things about it are load-bearing:
|
||||
|
||||
- **The request toggle is one glyph in two weights**
|
||||
(`regular/bookmark` → `solid/bookmark`), because two states of a
|
||||
toggle have to read as each other's opposite and a plus against a
|
||||
bookmark does not. The pair was *already in the app and already
|
||||
right* on `explore-album-details`'s "Request this" button while the
|
||||
badge forty pixels away showed a plus — `utils/library-status.ts`'s
|
||||
fault one layer down, having made the two agree on what wanting means
|
||||
and left them disagreeing on what it looks like.
|
||||
- **Downloads keeps the solid bookmark, deliberately.** That is the
|
||||
same word twice, not two words: the badge says "this is on your
|
||||
list" and the nav item is that list.
|
||||
- **`icon-language.test.ts` sweeps the source**, because the rule is
|
||||
about every call site and checking one checks nothing — the same
|
||||
shape as `TestNoDirectRuntimeEmits`. It reads every `src/**/*.ts` as
|
||||
raw text and fails on a literal `name="plus"` or `icon: 'list'`
|
||||
outside the table, and its **first assertion is that it read
|
||||
anything at all**, since a sweep over an empty glob passes.
|
||||
- **It also asserts every `ICON_*` is bundled**, which closes the loop
|
||||
the runtime cannot: `bookmark-check` is Font Awesome **Pro** and sat
|
||||
on `explore-artist-details`'s Follow button, drawn for every followed
|
||||
artist as a circled question mark. `offline-icons.spec.ts` sweeps
|
||||
`__yjIconMisses` and could not see it, because no spec had ever
|
||||
followed an artist — the same fault `requested-badge.spec.ts` was
|
||||
written for, one component over, still live. A name computed from
|
||||
state was only checkable from the state; now it is checkable from the
|
||||
table.
|
||||
|
||||
**An album page says how much of the album is yours.**
|
||||
`explore-album-details` is a *catalog* page and there is no
|
||||
library-side album detail page at all, so the album on it may be
|
||||
|
||||
+4
-1
@@ -39,7 +39,10 @@
|
||||
<audio-player></audio-player>
|
||||
<button aria-label="Toggle queue" aria-controls="queue-panel" aria-expanded="false"
|
||||
id="queue-button">
|
||||
<wa-icon name="list"></wa-icon>
|
||||
<!-- 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
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM64 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L96 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
|
||||
|
After Width: | Height: | Size: 609 B |
@@ -37,6 +37,10 @@ import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js'
|
||||
import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
|
||||
import '@components/playlist-picker/playlist-picker.js';
|
||||
import { dict, list } from '@utils/binding';
|
||||
import {
|
||||
ICON_PLAYLIST,
|
||||
ICON_QUEUE,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
/** Pixels to change card width per scroll tick. */
|
||||
const ZOOM_STEP = 16;
|
||||
@@ -1371,7 +1375,7 @@ export class ArtistsView
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_QUEUE}
|
||||
></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
@@ -1407,7 +1411,7 @@ export class ArtistsView
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_PLAYLIST}
|
||||
></wa-icon>
|
||||
Add to Playlist
|
||||
<span
|
||||
|
||||
@@ -6,6 +6,7 @@ import type WaDrawer from '@awesome.me/webawesome/dist/components/drawer/drawer.
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
import '../sidebar/app-sidebar.js';
|
||||
import { nameDialog } from '@utils/name-dialog';
|
||||
import { ICON_PLAYLIST } from '@utils/icon-language';
|
||||
|
||||
type View = 'home' | 'albums' | 'tracks' | 'playlists';
|
||||
|
||||
@@ -138,7 +139,7 @@ export class BottomNav extends LitElement {
|
||||
{ id: 'home', label: 'Home', icon: 'house' },
|
||||
{ id: 'albums', label: 'Albums', icon: 'compact-disc' },
|
||||
{ id: 'tracks', label: 'Tracks', icon: 'music' },
|
||||
{ id: 'playlists', label: 'Playlists', icon: 'list' },
|
||||
{ id: 'playlists', label: 'Playlists', icon: ICON_PLAYLIST },
|
||||
];
|
||||
|
||||
override connectedCallback() {
|
||||
|
||||
@@ -76,6 +76,10 @@ import type {
|
||||
SortDirection,
|
||||
} from './cover-grid-types.js';
|
||||
import { list } from '@utils/binding';
|
||||
import {
|
||||
ICON_PLAYLIST,
|
||||
ICON_QUEUE,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
@customElement('cover-grid')
|
||||
export class CoverGrid
|
||||
@@ -2123,7 +2127,7 @@ export class CoverGrid
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_QUEUE}
|
||||
></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
@@ -2156,7 +2160,7 @@ export class CoverGrid
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_PLAYLIST}
|
||||
></wa-icon>
|
||||
Add to Playlist
|
||||
<span
|
||||
|
||||
@@ -52,6 +52,12 @@ import { dictByName } from '@utils/binding';
|
||||
import type { TrackDetails } from '@components/track-details/track-details.js';
|
||||
import { showTrackDetailsForPath } from '@utils/track-details-opener.js';
|
||||
import '@components/playlist-picker/playlist-picker.js';
|
||||
import {
|
||||
ICON_CAN_REQUEST,
|
||||
ICON_PLAYLIST,
|
||||
ICON_QUEUE,
|
||||
ICON_REQUESTED,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
/**
|
||||
* The region the album header's own failures are rendered in.
|
||||
@@ -2437,7 +2443,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
|
||||
data-testid="album-queue"
|
||||
@click=${() => this.queueOwned()}
|
||||
>
|
||||
<wa-icon slot="start" name="list"></wa-icon>
|
||||
<wa-icon slot="start" name=${ICON_QUEUE}></wa-icon>
|
||||
Add to queue
|
||||
</wa-button>
|
||||
${partial
|
||||
@@ -2740,7 +2746,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
|
||||
of the same Free glyph carry the toggle instead. -->
|
||||
<wa-icon
|
||||
slot="start"
|
||||
name=${this.isRequested ? 'solid/bookmark' : 'regular/bookmark'}
|
||||
name=${this.isRequested ? ICON_REQUESTED : ICON_CAN_REQUEST}
|
||||
></wa-icon>
|
||||
${this.isRequested ? 'Requested' : 'Request this'}
|
||||
</wa-button>
|
||||
@@ -3338,7 +3344,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
|
||||
@click=${() => this.onContextMenuAction('add-to-queue')}
|
||||
@mouseenter=${() => this.ctxMenu.closePlaylistSubmenu()}
|
||||
>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item
|
||||
@@ -3357,7 +3363,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
|
||||
this.openPlaylistSubmenu();
|
||||
}}
|
||||
>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<wa-icon slot="icon" name=${ICON_PLAYLIST}></wa-icon>
|
||||
Add to Playlist
|
||||
<span class="submenu-arrow">▶</span>
|
||||
</wa-dropdown-item>
|
||||
|
||||
@@ -59,6 +59,12 @@ import { dict, dictByName } from '@utils/binding';
|
||||
import type { TrackDetails } from '@components/track-details/track-details.js';
|
||||
import { showTrackDetailsForPath } from '@utils/track-details-opener.js';
|
||||
import '@components/playlist-picker/playlist-picker.js';
|
||||
import {
|
||||
ICON_CAN_REQUEST,
|
||||
ICON_PLAYLIST,
|
||||
ICON_QUEUE,
|
||||
ICON_REQUESTED,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
/* ── Constants ── */
|
||||
|
||||
@@ -2674,7 +2680,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
@click=${() => this.onContextMenuAction('add-to-queue')}
|
||||
@mouseenter=${() => this.ctxMenu.closePlaylistSubmenu()}
|
||||
>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item
|
||||
@@ -2693,7 +2699,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
void this.openPlaylistSubmenu(true);
|
||||
}}
|
||||
>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<wa-icon slot="icon" name=${ICON_PLAYLIST}></wa-icon>
|
||||
Add to Playlist
|
||||
<span class="submenu-arrow">▶</span>
|
||||
</wa-dropdown-item>
|
||||
@@ -2737,7 +2743,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
Play
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => void this.onReleaseAction('add-to-queue')}>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => void this.onReleaseAction('play-next')}>
|
||||
@@ -2751,7 +2757,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
<wa-dropdown-item @click=${() => void this.onReleaseRequestToggle()}>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name=${requested ? 'xmark' : 'bookmark'}
|
||||
name=${requested ? ICON_REQUESTED : ICON_CAN_REQUEST}
|
||||
></wa-icon>
|
||||
${requested ? 'Cancel Request' : 'Request This'}
|
||||
</wa-dropdown-item>
|
||||
@@ -2789,9 +2795,15 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
|
||||
appearance=${request ? 'filled' : 'outlined'}
|
||||
@click=${() => void this.toggleFollow(request?.id)}
|
||||
>
|
||||
<!-- This was bookmark-check, which is not in
|
||||
names.txt and so has rendered the missing-icon
|
||||
fallback — a circled question mark — on every
|
||||
followed artist since it was written. A
|
||||
backtick around that name would end this
|
||||
template literal, which is why there is none. -->
|
||||
<wa-icon
|
||||
slot="start"
|
||||
name=${request ? 'bookmark-check' : 'bookmark'}
|
||||
name=${request ? ICON_REQUESTED : ICON_CAN_REQUEST}
|
||||
></wa-icon>
|
||||
${request ? 'Following' : 'Follow for new releases'}
|
||||
</wa-button>
|
||||
|
||||
@@ -36,6 +36,7 @@ import '@awesome.me/webawesome/dist/components/popup/popup.js';
|
||||
import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
|
||||
import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
|
||||
import { dict, dictByName } from '@utils/binding';
|
||||
import { ICON_QUEUE } from '@utils/icon-language';
|
||||
|
||||
/** The region explore's own action failures (play/queue) are rendered in. */
|
||||
export const ExploreRegion = 'explore';
|
||||
@@ -1342,7 +1343,7 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
|
||||
Play
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => this.onContextMenuAction('add-to-queue')}>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item @click=${() => this.onContextMenuAction('play-next')}>
|
||||
|
||||
@@ -35,6 +35,10 @@ import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js'
|
||||
import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
|
||||
import '@components/playlist-picker/playlist-picker.js';
|
||||
import { dictByName } from '@utils/binding';
|
||||
import {
|
||||
ICON_PLAYLIST,
|
||||
ICON_QUEUE,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
/** Pixels to change card width per scroll tick. */
|
||||
const ZOOM_STEP = 16;
|
||||
@@ -1211,7 +1215,7 @@ export class GenresView
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_QUEUE}
|
||||
></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
@@ -1257,7 +1261,7 @@ export class GenresView
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_PLAYLIST}
|
||||
></wa-icon>
|
||||
Add to Playlist
|
||||
<span
|
||||
|
||||
@@ -4,6 +4,11 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
import { toggleRequest } from '@utils/library-status';
|
||||
import { notificationStore } from '@store/notification-store';
|
||||
import { describeError } from '@utils/describe-error';
|
||||
import {
|
||||
ICON_CAN_REQUEST,
|
||||
ICON_IN_LIBRARY,
|
||||
ICON_REQUESTED,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
/**
|
||||
* Library status for an entity (artist, album, or track).
|
||||
@@ -248,18 +253,25 @@ export class LibraryStatusIndicator extends LitElement {
|
||||
* hourglass says "wait, this is under way", which overstates what a
|
||||
* request is: nothing may be downloading, nothing may ever be found,
|
||||
* and the user can leave one sitting on the list indefinitely. A
|
||||
* bookmark says the honest thing — it is on your list — and reads as
|
||||
* the opposite of the plus that put it there, which is what a
|
||||
* toggle's two states have to do.
|
||||
* bookmark says the honest thing — it is on your list.
|
||||
*
|
||||
* The *other* state is the outline of that same bookmark, not a
|
||||
* plus. Two states of one toggle have to read as each other's
|
||||
* opposite, and a plus and a bookmark do not — this badge showed a
|
||||
* plus on the same page as a "Request this" button already using
|
||||
* the outline/solid pair, forty pixels away. That is the fault
|
||||
* `utils/library-status.ts` was written for, one layer down: it
|
||||
* made the two agree on what wanting *means* and left them
|
||||
* disagreeing on what it looks like.
|
||||
*/
|
||||
private iconName(): string {
|
||||
switch (this.status) {
|
||||
case 'in-library':
|
||||
return 'check';
|
||||
return ICON_IN_LIBRARY;
|
||||
case 'queued':
|
||||
return 'bookmark';
|
||||
return ICON_REQUESTED;
|
||||
default:
|
||||
return 'plus';
|
||||
return ICON_CAN_REQUEST;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@ import { creditStore } from '@store/credit-store';
|
||||
import { FavoritesController } from '@store/controllers/favorites-controller';
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
import { srOnly } from '../../styles/sr-only.css';
|
||||
import { ICON_QUEUE } from '@utils/icon-language';
|
||||
|
||||
/**
|
||||
* What is playing, at the size a phone has room for (plan 016 B2,
|
||||
@@ -339,7 +340,7 @@ export class NowPlayingView extends LitElement {
|
||||
aria-label="Show the queue"
|
||||
@click=${this.openQueue}
|
||||
>
|
||||
<wa-icon name="list"></wa-icon>
|
||||
<wa-icon name=${ICON_QUEUE}></wa-icon>
|
||||
</button>
|
||||
</header>
|
||||
`;
|
||||
|
||||
@@ -70,6 +70,10 @@ import {
|
||||
} from '@utils/explore-link';
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
import { list } from '@utils/binding';
|
||||
import {
|
||||
ICON_PLAYLIST,
|
||||
ICON_QUEUE,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
/** One playlist row: the track and its position in the *playlist*,
|
||||
* which is not its position in the filtered view. */
|
||||
@@ -1358,7 +1362,7 @@ export class PlaylistDetails
|
||||
</button>
|
||||
<div class="playlist-avatar">
|
||||
<wa-icon
|
||||
name="list"
|
||||
name=${ICON_PLAYLIST}
|
||||
></wa-icon>
|
||||
</div>
|
||||
<div class="playlist-info">
|
||||
@@ -1665,7 +1669,7 @@ export class PlaylistDetails
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_QUEUE}
|
||||
></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
@@ -1720,7 +1724,7 @@ export class PlaylistDetails
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_PLAYLIST}
|
||||
></wa-icon>
|
||||
Add to Playlist
|
||||
<span
|
||||
|
||||
@@ -18,6 +18,7 @@ import { notificationStore } from '@store/notification-store';
|
||||
import { describeError } from '@utils/describe-error';
|
||||
import type { DuplicateTracksDialog } from '@components/duplicate-tracks-dialog/duplicate-tracks-dialog.js';
|
||||
import { list } from '@utils/binding';
|
||||
import { ICON_NEW } from '@utils/icon-language';
|
||||
|
||||
/**
|
||||
* A reusable playlist picker that displays existing playlists
|
||||
@@ -307,7 +308,7 @@ export class PlaylistPicker extends LitElement {
|
||||
`
|
||||
: nothing}
|
||||
<wa-dropdown-item @click=${this.handleShowCreate}>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<wa-icon slot="icon" name=${ICON_NEW}></wa-icon>
|
||||
New Playlist
|
||||
</wa-dropdown-item>
|
||||
</div>
|
||||
|
||||
@@ -37,6 +37,10 @@ import { ViewLifecycleMixin } from '@utils/view-lifecycle';
|
||||
import { FavoritesController } from '@store/controllers/favorites-controller';
|
||||
import '@components/duplicate-tracks-dialog/duplicate-tracks-dialog.js';
|
||||
import type { DuplicateTracksDialog } from '@components/duplicate-tracks-dialog/duplicate-tracks-dialog.js';
|
||||
import {
|
||||
ICON_NEW,
|
||||
ICON_PLAYLIST,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
const SCROLL_DEBOUNCE_MS = 100;
|
||||
|
||||
@@ -1496,7 +1500,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
|
||||
@dragleave=${this.onNewButtonDragLeave}
|
||||
@drop=${this.onNewButtonDrop}
|
||||
>
|
||||
<wa-icon name="plus"></wa-icon>
|
||||
<wa-icon name=${ICON_NEW}></wa-icon>
|
||||
New Playlist
|
||||
</button>
|
||||
<button
|
||||
@@ -1641,10 +1645,10 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
|
||||
>
|
||||
<div class="drop-zone-icon">
|
||||
<wa-icon
|
||||
name="plus"
|
||||
name=${ICON_NEW}
|
||||
></wa-icon>
|
||||
</div>
|
||||
<wa-icon name="list"></wa-icon>
|
||||
<wa-icon name=${ICON_PLAYLIST}></wa-icon>
|
||||
<p>No playlists yet</p>
|
||||
<p style="font-size: 12px;">
|
||||
Create a playlist or drop
|
||||
@@ -1666,7 +1670,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
|
||||
>
|
||||
<div class="drop-zone-icon">
|
||||
<wa-icon
|
||||
name="plus"
|
||||
name=${ICON_NEW}
|
||||
></wa-icon>
|
||||
</div>
|
||||
<p>
|
||||
@@ -1701,7 +1705,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
|
||||
>
|
||||
<div class="drop-zone-icon">
|
||||
<wa-icon
|
||||
name="plus"
|
||||
name=${ICON_NEW}
|
||||
></wa-icon>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -60,6 +60,11 @@ import {
|
||||
trackLink,
|
||||
exploreLinkStyles,
|
||||
} from '@utils/explore-link';
|
||||
import {
|
||||
ICON_NEW,
|
||||
ICON_PLAYLIST,
|
||||
ICON_QUEUE,
|
||||
} from '@utils/icon-language';
|
||||
/** Above this many tracks, clearing the queue asks first. */
|
||||
const CLEAR_CONFIRM_THRESHOLD = 20;
|
||||
|
||||
@@ -1755,7 +1760,7 @@ export class QueuePanel
|
||||
title="Add queue to playlist"
|
||||
>
|
||||
<wa-icon
|
||||
name="plus"
|
||||
name=${ICON_PLAYLIST}
|
||||
></wa-icon>
|
||||
</button>
|
||||
</div>
|
||||
@@ -1794,11 +1799,11 @@ export class QueuePanel
|
||||
? html`<div class="empty-state">
|
||||
<div class="drop-zone-icon">
|
||||
<wa-icon
|
||||
name="plus"
|
||||
name=${ICON_NEW}
|
||||
></wa-icon>
|
||||
</div>
|
||||
<wa-icon
|
||||
name="list"
|
||||
name=${ICON_QUEUE}
|
||||
></wa-icon>
|
||||
<p>Queue is empty</p>
|
||||
<p style="font-size: 12px;">
|
||||
@@ -1875,7 +1880,7 @@ export class QueuePanel
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_PLAYLIST}
|
||||
></wa-icon>
|
||||
Add to Playlist
|
||||
<span
|
||||
|
||||
@@ -4,6 +4,10 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
|
||||
import type { DragActiveDetail } from '@utils/drag-controller';
|
||||
import {
|
||||
ICON_PLAYLIST,
|
||||
ICON_REQUESTED,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
type View = 'home' | 'playlists' | 'artists' | 'genres' | 'albums' | 'tracks' | 'explore' | 'downloads' | 'autotag' | 'jobs' | 'settings';
|
||||
|
||||
@@ -197,13 +201,13 @@ export class AppSidebar extends LitElement {
|
||||
|
||||
private navItems: NavItem[] = [
|
||||
{ id: 'home', label: 'Home', icon: 'house' },
|
||||
{ id: 'playlists', label: 'Playlists', icon: 'list' },
|
||||
{ id: 'playlists', label: 'Playlists', icon: ICON_PLAYLIST },
|
||||
{ id: 'artists', label: 'Artists', icon: 'user-group' },
|
||||
{ id: 'genres', label: 'Genres', icon: 'masks-theater' },
|
||||
{ id: 'albums', label: 'Albums', icon: 'compact-disc' },
|
||||
{ id: 'tracks', label: 'Tracks', icon: 'music' },
|
||||
{ id: 'explore', label: 'Explore', icon: 'globe' },
|
||||
{ id: 'downloads', label: 'Downloads', icon: 'bookmark' },
|
||||
{ id: 'downloads', label: 'Downloads', icon: ICON_REQUESTED },
|
||||
{ id: 'autotag', label: 'Autotag', icon: 'tag' },
|
||||
{ id: 'jobs', label: 'Jobs', icon: 'list-check' },
|
||||
{ id: 'settings', label: 'Settings', icon: 'gear' },
|
||||
|
||||
@@ -61,6 +61,10 @@ import {
|
||||
import '@components/smart-playlist-editor/smart-playlist-editor.js';
|
||||
import { designTokens } from '../../styles/tokens.css';
|
||||
import { list } from '@utils/binding';
|
||||
import {
|
||||
ICON_PLAYLIST,
|
||||
ICON_QUEUE,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
|
||||
/**
|
||||
@@ -1481,7 +1485,7 @@ export class SmartPlaylistDetails
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_QUEUE}
|
||||
></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
@@ -1521,7 +1525,7 @@ export class SmartPlaylistDetails
|
||||
>
|
||||
<wa-icon
|
||||
slot="icon"
|
||||
name="plus"
|
||||
name=${ICON_PLAYLIST}
|
||||
></wa-icon>
|
||||
Add to Playlist
|
||||
<span
|
||||
|
||||
@@ -74,6 +74,10 @@ import { tracksByFilePath, tracksForPaths } from '@utils/track-index.js';
|
||||
import '@components/playlist-picker/playlist-picker.js';
|
||||
import type { TrackDetails } from '@components/track-details/track-details.js';
|
||||
import type { CoverArtUrls } from '@components/track-details/track-details.js';
|
||||
import {
|
||||
ICON_PLAYLIST,
|
||||
ICON_QUEUE,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
const COLUMN_STORAGE_KEY = 'track-list-column-widths';
|
||||
const SORT_FIELD_KEY = 'track-list-sort-field';
|
||||
@@ -2342,7 +2346,7 @@ export class TrackList
|
||||
@click=${() => this.onContextMenuAction('add-to-queue')}
|
||||
@mouseenter=${() => this.ctxMenu.closePlaylistSubmenu()}
|
||||
>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<wa-icon slot="icon" name=${ICON_QUEUE}></wa-icon>
|
||||
Add to Queue
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item
|
||||
@@ -2364,7 +2368,7 @@ export class TrackList
|
||||
void this.ctxMenu.showPlaylistSubmenu(this.selection.getSelectedKeysOrdered());
|
||||
}}
|
||||
>
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<wa-icon slot="icon" name=${ICON_PLAYLIST}></wa-icon>
|
||||
Add to Playlist
|
||||
<span class="submenu-arrow">▶</span>
|
||||
</wa-dropdown-item>
|
||||
|
||||
@@ -24,6 +24,7 @@ solid/arrows-rotate
|
||||
solid/arrow-up-short-wide
|
||||
solid/backward-step
|
||||
solid/bars
|
||||
solid/bars-staggered
|
||||
regular/bookmark
|
||||
solid/bookmark
|
||||
solid/box-open
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* What each icon in this app means, once.
|
||||
*
|
||||
* The set was a mix: `plus` meant "add to the queue", "add to a
|
||||
* playlist", "make a new playlist" and "you do not own this" — the
|
||||
* first two *adjacent in the same context menu* — while `list` meant
|
||||
* the queue, the Playlists destination, and (in `queue-panel` alone)
|
||||
* adding to the queue. Two icons carrying seven meanings between them
|
||||
* is not a vocabulary, and a user cannot learn one that says four
|
||||
* things.
|
||||
*
|
||||
* The rule these are chosen by: **an icon names the noun it acts on,
|
||||
* not the verb.** "Add to queue" and "add to playlist" are the same
|
||||
* verb on different nouns, so the noun is what has to differ — which is
|
||||
* also why adding to a playlist wears the Playlists destination's own
|
||||
* icon rather than a generic plus. `plus` survives for exactly the one
|
||||
* thing it is unambiguous about, making something that did not exist.
|
||||
*
|
||||
* Import these rather than writing a name inline. A literal string is
|
||||
* how the last set drifted, and nothing catches it: a wrong-but-real
|
||||
* icon renders perfectly.
|
||||
*/
|
||||
|
||||
/** Start playing this now. */
|
||||
export const ICON_PLAY = 'play';
|
||||
|
||||
/** Start playing this now, in a shuffled order. */
|
||||
export const ICON_SHUFFLE = 'shuffle';
|
||||
|
||||
/**
|
||||
* The queue, and putting something into it.
|
||||
*
|
||||
* One glyph for the noun and the action, so the button that opens the
|
||||
* queue and the menu item that adds to it are visibly the same subject.
|
||||
* The queue used to wear `list`, which is the Playlists destination.
|
||||
*/
|
||||
export const ICON_QUEUE = 'bars-staggered';
|
||||
|
||||
/** Put this next in the queue rather than at the end. */
|
||||
export const ICON_PLAY_NEXT = 'forward-step';
|
||||
|
||||
/**
|
||||
* A playlist, and adding something to one.
|
||||
*
|
||||
* The same icon as the Playlists destination in the sidebar, which is
|
||||
* the point: the menu item says where the thing is going.
|
||||
*/
|
||||
export const ICON_PLAYLIST = 'list';
|
||||
|
||||
/**
|
||||
* Make a new thing that did not exist — a playlist, a rule, a library.
|
||||
*
|
||||
* This is the only meaning `plus` keeps. It used to carry four.
|
||||
*/
|
||||
export const ICON_NEW = 'plus';
|
||||
|
||||
/**
|
||||
* The request ("want") toggle, as an outline/solid pair.
|
||||
*
|
||||
* Two states of one control have to read as each other's opposite,
|
||||
* which a plus and a bookmark do not. The pair was already in the app
|
||||
* and already correct — `explore-album-details`'s "Want this" button
|
||||
* has used it since it was written, and `favorites-controller` uses the
|
||||
* same shape for `regular/heart` → `heart` — while the badge forty
|
||||
* pixels away showed a plus for the same state.
|
||||
*
|
||||
* That is `utils/library-status.ts`'s fault one layer down: it made the
|
||||
* two surfaces agree on *what wanting means* and left them disagreeing
|
||||
* on what it looks like.
|
||||
*/
|
||||
export const ICON_CAN_REQUEST = 'regular/bookmark';
|
||||
export const ICON_REQUESTED = 'solid/bookmark';
|
||||
|
||||
/**
|
||||
* You have this.
|
||||
*
|
||||
* Deliberately not drawn on the common case — see the tracklist, where
|
||||
* absence is what gets marked. This is for the places that answer the
|
||||
* question directly, like the badge on a catalog card.
|
||||
*/
|
||||
export const ICON_IN_LIBRARY = 'check';
|
||||
|
||||
/**
|
||||
* Something is being fetched right now.
|
||||
*
|
||||
* Distinct from `ICON_REQUESTED`: a request may sit on the list
|
||||
* forever without anything happening, which is exactly why the badge's
|
||||
* "queued" state stopped being an hourglass.
|
||||
*/
|
||||
export const ICON_DOWNLOADING = 'download';
|
||||
|
||||
/**
|
||||
* Take this away.
|
||||
*
|
||||
* One icon for removing from a playlist, from the queue and from the
|
||||
* library, because the difference that matters is stated in the words
|
||||
* beside it and in the confirmation — "Remove from Library" says in its
|
||||
* impact line that the files are not deleted.
|
||||
*/
|
||||
export const ICON_REMOVE = 'trash';
|
||||
@@ -19,6 +19,11 @@ import {
|
||||
update,
|
||||
visual,
|
||||
} from '@test/support/render';
|
||||
import {
|
||||
ICON_CAN_REQUEST,
|
||||
ICON_IN_LIBRARY,
|
||||
ICON_REQUESTED,
|
||||
} from '@utils/icon-language';
|
||||
|
||||
describe('<app-sidebar>', () => {
|
||||
it('renders a testid per destination, which is how e2e navigates', async () => {
|
||||
@@ -154,9 +159,20 @@ describe('<library-status-indicator>', () => {
|
||||
it('defaults to "not in library"', async () => {
|
||||
const el = await fixture('library-status-indicator');
|
||||
|
||||
expect(shadow(el, 'wa-icon')?.getAttribute('name')).toBe('plus');
|
||||
expect(shadow(el, 'wa-icon')?.getAttribute('name')).toBe(ICON_CAN_REQUEST);
|
||||
});
|
||||
|
||||
/**
|
||||
* Named from the vocabulary rather than written out, or this test
|
||||
* pins the glyphs *against* the table it is supposed to follow —
|
||||
* which is what it did: it asserted `plus` for the un-owned state,
|
||||
* the same glyph two adjacent menu items were using for two other
|
||||
* meanings, and passing was the reason nobody looked.
|
||||
*
|
||||
* What is still worth asserting is that the three differ, which is
|
||||
* the property the states need and the one the table cannot state
|
||||
* about itself here.
|
||||
*/
|
||||
it('uses a distinct glyph per state', async () => {
|
||||
const glyphs: (string | null | undefined)[] = [];
|
||||
|
||||
@@ -166,7 +182,8 @@ describe('<library-status-indicator>', () => {
|
||||
glyphs.push(shadow(el, 'wa-icon')?.getAttribute('name'));
|
||||
}
|
||||
|
||||
expect(glyphs).toEqual(['check', 'bookmark', 'plus']);
|
||||
expect(glyphs).toEqual([ICON_IN_LIBRARY, ICON_REQUESTED, ICON_CAN_REQUEST]);
|
||||
expect(new Set(glyphs).size).toBe(3);
|
||||
});
|
||||
|
||||
it('phrases its label around the entity it describes', async () => {
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* The icon vocabulary is one table, and nothing writes around it.
|
||||
*
|
||||
* A wrong-but-real icon name renders perfectly: no error, no fallback,
|
||||
* no failing assertion anywhere. That is how `plus` came to mean "add
|
||||
* to the queue", "add to a playlist", "make a new playlist" and "you do
|
||||
* not own this" — the first two adjacent in the same context menu —
|
||||
* while `list` meant the queue, the Playlists destination *and* adding
|
||||
* to the queue.
|
||||
*
|
||||
* `src/icons/index.ts` catches a name that is not *bundled*. Nothing
|
||||
* catches a name that is bundled and means something else, so this
|
||||
* sweeps the source for the governed ones. It is the same shape as
|
||||
* `TestNoDirectRuntimeEmits` and `TestNoWritesOnTheReadPool` in the
|
||||
* backend, and exists for the same reason: the rule is about every call
|
||||
* site, so checking one is checking nothing.
|
||||
*/
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { bundledIconNames } from '../../src/icons';
|
||||
import * as icons from '@utils/icon-language';
|
||||
|
||||
/** Every component source, as text. */
|
||||
const SOURCES = import.meta.glob<string>('../../src/**/*.ts', {
|
||||
eager: true,
|
||||
query: '?raw',
|
||||
import: 'default',
|
||||
});
|
||||
|
||||
/**
|
||||
* The names that carry a meaning the table owns.
|
||||
*
|
||||
* Deliberately not every bundled name. `check` is `ICON_IN_LIBRARY`
|
||||
* here and also the "Copied" confirmation in `job-log-view`, which is
|
||||
* a different, perfectly good meaning — governing it would force a
|
||||
* false rename. What belongs on this list is a name that was actually
|
||||
* overloaded.
|
||||
*/
|
||||
const GOVERNED = [
|
||||
'plus',
|
||||
'list',
|
||||
'bookmark',
|
||||
'solid/bookmark',
|
||||
'regular/bookmark',
|
||||
'bars-staggered',
|
||||
];
|
||||
|
||||
/** The one file allowed to say them, plus its own test. */
|
||||
const DEFINITION = /icon-language\.(ts|test\.ts)$/;
|
||||
|
||||
describe('the icon vocabulary', () => {
|
||||
/**
|
||||
* A sweep over nothing passes. This is the assertion that makes the
|
||||
* rest of the file mean something, and it is the first thing that
|
||||
* breaks if the glob pattern stops matching after a move.
|
||||
*/
|
||||
it('actually reads the source', () => {
|
||||
const paths = Object.keys(SOURCES);
|
||||
|
||||
expect(paths.length).toBeGreaterThan(100);
|
||||
expect(paths.some((p) => p.endsWith('/track-list.ts'))).toBe(true);
|
||||
expect(SOURCES[paths[0]!]).toContain('import');
|
||||
});
|
||||
|
||||
it.each(GOVERNED)('is not written around for %s', (name) => {
|
||||
const offenders: string[] = [];
|
||||
|
||||
for (const [path, source] of Object.entries(SOURCES)) {
|
||||
if (DEFINITION.test(path)) continue;
|
||||
|
||||
// Both spellings: an icon in a template, and an icon name in a
|
||||
// data table (which is how the sidebar and bottom-nav carry
|
||||
// theirs).
|
||||
const literal = new RegExp(
|
||||
`(name="${name}"|icon: '${name}'|name=\\$\\{[^}]*'${name}')`,
|
||||
);
|
||||
|
||||
if (literal.test(source)) offenders.push(path);
|
||||
}
|
||||
|
||||
expect(offenders).toEqual([]);
|
||||
});
|
||||
|
||||
/**
|
||||
* A meaning with no icon behind it is the state the badge's `queued`
|
||||
* spent a year in — declared, styled, and produced by nothing.
|
||||
*/
|
||||
it('gives every meaning a name', () => {
|
||||
const values = Object.entries(icons).filter(([k]) => k.startsWith('ICON_'));
|
||||
|
||||
expect(values.length).toBeGreaterThan(0);
|
||||
|
||||
for (const [key, value] of values) {
|
||||
expect(`${key}=${value}`).toMatch(/^ICON_[A-Z_]+=[a-z]+[a-z/-]*$/);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Every name in the table is a name the app actually ships.
|
||||
*
|
||||
* This is the loop the vocabulary closes. A name that is not bundled
|
||||
* renders a circled question mark and reports itself to
|
||||
* `__yjIconMisses` — at *runtime*, from a state something has to
|
||||
* reach first. `bookmark-check` is Font Awesome **Pro**, and it was
|
||||
* on `explore-artist-details`'s Follow button, drawn for every
|
||||
* followed artist, invisible to `offline-icons.spec.ts` because no
|
||||
* spec had ever followed one. Reaching the state is no longer how
|
||||
* this is found.
|
||||
*/
|
||||
it('names only icons that are bundled', () => {
|
||||
const bundled = new Set(bundledIconNames());
|
||||
const missing = Object.entries(icons)
|
||||
.filter(([k]) => k.startsWith('ICON_'))
|
||||
.filter(([, v]) => !bundled.has(v as string))
|
||||
.map(([k, v]) => `${k} (${v})`);
|
||||
|
||||
expect(missing).toEqual([]);
|
||||
});
|
||||
|
||||
/**
|
||||
* The two states of the request toggle have to be the same glyph in
|
||||
* two weights, or they do not read as each other's opposite — which
|
||||
* is what a plus against a bookmark was.
|
||||
*/
|
||||
it('makes the request toggle an outline/solid pair', () => {
|
||||
expect(icons.ICON_CAN_REQUEST).toBe(`regular/${icons.ICON_REQUESTED.replace('solid/', '')}`);
|
||||
});
|
||||
|
||||
/**
|
||||
* The queue and the Playlists destination wore the same icon, and
|
||||
* "add to queue" and "add to playlist" sat next to each other wearing
|
||||
* a third same one. Whatever the table says, these three have to
|
||||
* differ from each other.
|
||||
*/
|
||||
it('keeps the queue, playlists and creating something apart', () => {
|
||||
const three = [icons.ICON_QUEUE, icons.ICON_PLAYLIST, icons.ICON_NEW];
|
||||
|
||||
expect(new Set(three).size).toBe(3);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user