9 Commits

Author	SHA1	Message	Date
Psychotoxical	f9df918c72	feat(themes): community Theme Store + semantic-token refactor (#1009) ... * feat(themes): add semantic tokens for the theme-store contract (B0 P1) Additive: define --highlight, --accent-2, --bg-deep, --bg-elevated and --text-on-accent on the :root base as --ctp-* mappings. They resolve per-theme automatically and nothing consumes them yet (zero behaviour change) — groundwork for replacing direct --ctp-* use in components. * refactor(themes): components consume semantic tokens, not --ctp-* (B0 P2) Replace every direct --ctp-* reference in component/layout/track CSS and TSX inline styles with the readable semantic token (--bg-app, --accent, --highlight, --text-on-accent, …). --ctp-* now survives only as the Catppuccin palette layer the base maps from, and as the deliberate categorical rainbow in Composers/Genres/artistsHelpers (left untouched). This is the readable contract surface for the community theme store. Divergences (theme set a semantic var != its --ctp- source) are corrections — the element now uses the theme's real semantic colour. * feat(themes): add player-bar title/artist color tokens New optional --player-title / --player-artist, defaulting to --text-primary / --text-secondary so nothing changes unless a theme overrides them. Lets a theme give the now-playing readout its own colour as a plain token. * refactor(themes): token-only theme library (flatten, whitelist, one file per theme) Turn every built-in theme into a single self-contained [data-theme] var block of semantic whitelist tokens (plus the internal --ctp-* palette layer): - Flatten all themes: drop structural override rules, @keyframes, and global-token overrides (radius / shadow-elevation / transition / spacing / font / focus-ring). Signature player-bar readout colours are preserved via the new --player-title / --player-artist tokens. - Normalize the var blocks to the semantic whitelist: drop the alternate token vocabulary (nav-active / scrollbar / bg-input / success / border-default / ...); rename --success -> --positive and --border-default -> --border where no whitelist equivalent was set. Migrate the few components that read those tokens to the whitelist equivalents. - Split multi-theme files so each theme ships as its own file, making the built-in set 1:1 with the per-theme store packaging. Kept as-is (built-in, not flattened): the two colour-blind-safe accessibility themes, plus the two curated core skins. * chore(themes): remove seven themes retired after the token refactor These themes leaned on heavy structural overrides and were dropped rather than flattened. Full removal each: the CSS file(s), the index.css import, the Theme type union, and the ThemePicker entry. * feat(themes): granular tokens — track lists Wire track rows to per-region tokens: row hover (--row-hover), the now-playing row + indicator (--row-playing-bg / --row-playing-text), track title/artist/ number/duration text, column-header text, row dividers, and the resize-handle active colour. Covers the desktop tracklist, the shared song-row (Tracks hub / search), and the mobile tracklist. Drop a baked border fallback. Visual no-op. * feat(themes): granular tokens — cards Wire album and artist cards to per-region tokens (--card-hover-border, --card-title, --card-subtitle, --card-placeholder-bg). Visual no-op. * fix(themes): drop undefined/baked colour aliases Replace the undefined --bg-surface (resolved to nothing — broken placeholder backgrounds and filter input) with --card-placeholder-bg / --input-bg, and the baked-hex aliases --color-error / --color-warning with --danger / --warning so themes can actually recolour them. * feat(themes): Spectrum demo theme + trim unused cascade tokens Add a loud built-in demo theme that gives each region its own hue (sidebar green, player pink, lists cyan, cards gold, menus red, controls blue) so the per-region granularity is obvious when you switch to it. Drop two unused cascade tokens (--sidebar-text-active, --row-active-bg) and the unused on-media block (those media surfaces stay static by design). * style(themes): make Spectrum demo brutally loud Full-saturation neon per region (toxic green sidebar, magenta player, cyan lists, acid-yellow cards, blood-red menus, electric-blue controls, purple scrollbar) so the per-region separation is unmistakable. The earlier soft tints were too subtle to read. * feat(themes): name the granular demo theme Braindead * feat(themes): granular per-region tokens — cascade layer + sidebar Add an optional per-region token layer (semantic-cascade.css) so a theme can recolour individual regions — sidebar hover, player controls, list rows, menus, inputs, on-media surfaces — independently of the global tokens. Every token defaults to its base token (or a media-safe literal), so this is a visual no-op until a theme overrides one; it only adds control points. Wire the sidebar region as the first consumer and drop the baked grey fallbacks (--bg-tertiary, etc.) that no theme could reach. * feat(themes): granular tokens — controls, menus, scrollbar Wire inputs, buttons, sliders, the custom-select, context menus, submenus and modals to per-region tokens, and tokenise the scrollbar. Complete B0 by dropping the last direct --ctp-* references in the input/button/progress/ scrollbar utility CSS. Fix three undefined-token bugs that fell back to nothing (so no theme could reach them): --surface-2 (context-menu hover had no highlight), --bg-surface (submenu create-input had no background), and the baked grey fallbacks in the custom-select. Every other new token defaults to today's value — a visual no-op that only adds override points. * feat(themes): granular tokens — player bar Wire the desktop player bar's transport controls, time toggle, and overflow menu to per-region tokens (--player-control, --player-time-toggle-*, etc.). Fix the undefined --surface-hover/--surface-active grey fallbacks on the time toggle. Visual no-op; defaults match today's values. * chore(themes): remove empty theme stub files Six theme CSS files were reduced to comment-only stubs by the flatten sweep but their files and @import lines remained. Five are empty structural companions of now-flattened themes (morpheus, p-dvd, aero-glass, luna-teal) and two are orphans of cut themes (order-of-the-phoenix, pandora). Removed the files and their imports. * feat(themes): runtime injection foundation for the theme store Plumbing for installed community themes ahead of the in-app store UI, nothing user-visible yet: - installedThemesStore: persisted (localStorage) record of installed community themes incl. their CSS text, so an active community theme is available synchronously at startup (no flash, fully offline). - themeInjection: reconcile <head> <style data-installed-theme> elements with the store; lightweight defense-in-depth sanitize on top of CI. - themeRegistry: jsDelivr registry client with a 12h localStorage cache and stale-on-error fallback. - App: inject installed themes before applying data-theme, in both webviews. - themeStore: widen the Theme type to accept dynamic installed ids. * feat(themes): dedicated Themes settings tab Move theme selection and the day/night scheduler out of Appearance into a new dedicated Themes tab — the future home of the community Theme Store. Appearance keeps grid columns, visual options, UI scale, font and seekbar. - ThemesTab: theme picker + scheduler (relocated verbatim). - AppearanceTab: drop the two relocated sections + now-unused imports. - Register the tab in settingsTabs (Tab union, resolveTab, search index) and Settings (tab bar, render, label map). - i18n: settings.tabThemes in all 9 locales. * feat(themes): community Theme Store browse + install Add the Theme Store section to the Themes tab: - Fetch the jsDelivr registry (12h cache, stale-on-error fallback). - Search by name/author/description + filter by light/dark + refresh. - Per-row CDN thumbnail, name, author, description and actions: Install / Apply / Update / Uninstall. Installing fetches the CSS, persists it (localStorage) and the runtime injection applies it; uninstalling the active theme falls back to the matching core. - Rating slot left reserved (deferred). - i18n: themeStore* keys in all 9 locales. * feat(themes): slim bundle to fixed cores + flat Themes tab Remove the 86 store palettes (incl. braindead) from the app bundle — the CSS files, their index.css imports, the Theme union and the picker data — leaving only the six fixed cores (Catppuccin Mocha/Latte, Kanagawa Wave, Stark HUD, Vision Dark/Navy). Everything else installs from the store. Themes tab is rebuilt flat (no collapsible accordions): - "Your Themes": one card grid of the fixed cores + installed community themes; click to apply, uninstall on community ones (active theme falls back to the matching core). Catppuccin prefix on Mocha/Latte; a CVD-safe pill on the colour-blind-safe Vision themes. - Scheduler day/night options include installed themes. - Theme Store: alphabetical order, thumbnail lightbox, and a submit hint above the search linking to the themes repository. - Nav order: Servers, Library, Audio, Themes, Appearance, Lyrics, … - ThemePicker accordion removed; fixed-theme data moved to fixedThemes.ts. - i18n for all new strings across 9 locales. * feat(themes): reset removed-from-bundle themes to a bundled fallback After slimming the bundle to the six fixed core themes, a profile upgraded from an older build may have an active or scheduler theme that is now store-only and not installed — it has no [data-theme] block and would render as unstyled :root. Reset any theme/themeDay/themeNight that is neither bundled nor installed to a bundled fallback: Mocha for the main + night slots, Latte for the day slot. Runs synchronously in runPreReactBootstrap, rewriting the persisted selection in localStorage before React mounts (no flash; Zustand rehydrates after first paint). No auto-install and no network — the fallback is always a bundled theme, so it works offline. * feat(themes): floating back-to-top button on the Themes tab The Themes tab can get long (theme grid + scheduler + full store list), so add a floating back-to-top affordance that appears once the page is scrolled and smooth-scrolls to the top. It is portalled into the route host and positioned absolute against it — the main scroll viewport sets contain: paint, which would otherwise make position: fixed resolve against the scrolling box and drift with the content. Reusable component (scroll viewport id + threshold props); i18n common.backToTop added in all nine locales. * feat(themes): accessibility + state polish for the Theme Store - Reuse the shared CoverLightbox for the thumbnail preview instead of a second inline dialog — gains a visible close button and a focus-managed, portalled dialog, and drops duplicated markup. - Theme cards expose aria-pressed so assistive tech announces the selected theme, not just the visual check. - Transient store messages get live-region roles (loading/empty/install failure = status, fetch error = alert). - Thumbnails degrade gracefully when offline/missing (hide the broken-image glyph; the thumbnail button no longer stretches with the row, so its background can't show as letterbox bars). * feat(themes): larger store-row thumbnails (120x75 -> 200x125) The list previews were too small to make a theme out; bump the display size (same 1.6 aspect). Thumbnails are now served at 720x450, so the larger display stays crisp. * fix(themes): bust thumbnail cache on registry change jsDelivr serves theme thumbnails with a 7-day max-age, so when a thumbnail is updated the webview keeps showing its cached old image (the path is unchanged). Append the registry's generatedAt as a cache-busting query to the thumbnail URLs (list + lightbox); it changes on every themes push, so a registry refresh makes the webview re-fetch and reflect the current CDN image instead of a stale one. * docs(themes): changelog + credits for the Theme Store Add the 1.48.0 "Themes — community Theme Store" changelog entry (PR #1009) and the matching line in the Psychotoxical credits. * fix(themes): address PR review (uninstall hygiene, validation, polish) Uninstall/scheduler & validation: - uninstallTheme() repairs every selection slot (active + day + night), not just the manual one, and is shared by both uninstall buttons (dedup). - Validate theme CSS at install time and skip persisting CSS that won't inject (no more "installed/active but renders nothing" with no feedback). - Harden the runtime validator: exactly one rule, scoped exactly to the theme's [data-theme='<id>'] selector (no unscoped/foreign selectors), no at-rules, url() only data:, no expression()/javascript:, size-capped. Tokens & polish: - Fix three dangling undefined tokens (--surface-2 x2, --bg-surface). - Finish the warning/success token sweep (--warning / --positive, themeable). - Apply the active theme synchronously before React mounts (no first-frame flash) and inject installed themes up front. - One-time, dismissible notice when the slim-bundle migration reset a theme. - Update badge uses semver, not string inequality. - Offline/stale indicator in the store; cross-window theme sync; drop the now dead REMOVED_THEME_REMAP and Card.mode field. Tests: themeInjection (validator + sync), themeRegistry (cache/force/stale/ malformed), uninstallTheme (slot repair), migration notice. i18n in all nine locales. Full suite green (1755 tests). * test(bootstrap): cover startup theme apply + cross-window sync The review fixes added applyThemeAtStartup / installCrossWindowThemeSync to bootstrap.ts (a hot-path file) without tests, dropping its coverage to 68.3% and failing the frontend hot-path coverage gate (>=70%). Add unit tests for both (and the no-op / malformed-storage paths); bootstrap.ts is back to ~98%.	2026-06-07 02:47:33 +02:00
cucadmuh	6da98e476b	fix(ui): New badge flicker on mainstage album rail hover (#986) ... * fix(ui): stop New badge flicker on mainstage album rail first hover Dim cover via ::before under badges; keep play overlay transparent and avoid visibility toggles on rail action buttons. * docs: CHANGELOG for mainstage New badge hover fix (PR #986) * fix(ui): keep New badge above rail cover zoom (match grid stacking) Use contain:paint + translateZ layering like New Releases grid so scaled cover art does not paint over the badge during hover animation. * fix(ui): global album cover badge stacking for all rails and grids Move img/badge/overlay z-index into album-card.css; stop album-grid from resetting card transform or duplicating cover rules that hid New badges. * docs: CHANGELOG — badge stacking applies to all album rails * fix(ui): restore rail play buttons above scaled cover layer Raise play overlay and badge z-index on horizontal rails so WebKit does not paint zoomed cover art over hover controls after the New badge stacking fix.	2026-06-04 16:09:54 +03:00
cucadmuh	c683b5e37b	fix(cards): selection ring clipping on browse grids (WebKitGTK) (#962) ... * fix(artists): inset selection ring on grid cards, stop composer hover clip Artist multi-select used a positive outline-offset that clipped in the first grid row and sat outside the card border on hover. Match album cards with an inset ring; drop composer-card hover translateY that sheared the top edge in the in-page scrollport. Reported by zunoz (v1.47.0-rc.3). * fix(cards): selection ring via inset ::after overlay on WebKitGTK grids Replace outline-based multi-select rings on album/artist/playlist cards with the same inset ::after box-shadow pattern used for card focus rings (card.css) — avoids clipping and the 1px gap vs the inner border on overflow:hidden tiles in All Albums and related browse grids. * docs: note browse grid selection ring fix in CHANGELOG (PR #962) * docs(changelog): credit zunoz on Psysonic Discord for PR #962	2026-06-03 22:38:57 +03:00
cucadmuh	4ac373a65b	feat(search): scoped live search on browse pages (#938) ... * feat(artists): scoped live search badge replaces page filter Move Artists browse text search into the header Live Search with a page scope badge (Users icon), field-local undo, and double-click/backspace to clear scope. Block the live-search dropdown while scoped so results only filter the Artists grid; mobile overlay follows the same rules. * fix(artists): plain grid for scoped search fixes broken card layout Route the browse grid through VirtualCardGrid, switch to non-virtual CSS grid when live search filters the catalog, reset scroll on filter changes, and skip content-visibility on plain tiles to avoid blank/black cards. * fix(search): scope badge double-Backspace and single clear control Require two Backspaces on an empty scoped field after prior text input; one Backspace still clears the badge when the field was never filled. Move live-search clear/advanced controls inside the field pill, drop the extra outer clear button, and use type=text to avoid native search clears. * fix(search): drop duplicate outer live-search clear button Keep the native in-field clear on type=search and the original pill layout; remove only the extra × control outside the search border. Reset dropdown state when the query is cleared via the native control. * refactor(search): generic scoped browse query helper, drop dead code Rename artistsBrowseSearchQuery to scopedBrowseSearchQuery with an expectedScope argument; wire Artists via useScopedBrowseSearchQuery. Remove unused liveSearchScoped dropdown helper (scoped mode blocks it). * feat(search): ghost scope badge and single-click badge remove After clearing the artists scope on /artists, show a faded ghost chip to restore page-only search while keeping the global search placeholder. Active badge removes on one click; tooltips and styles updated. * feat(search): scoped live search for All Albums and New Releases Wire albums and newReleases scope badges with debounced album title search (local index title-only FTS + filtered search3). Plain grid, scroll reset, and session query restore on album grid browse pages. * fix(browse): preserve scroll restore after album/artist detail back Only reset in-page scroll when filter resetKey changes, not when isScrollRestorePending clears after session restore. * feat(search): scoped live search for Tracks browse Wire /tracks to header live search with wide title/artist/album FTS, hide hero and discovery rails while search is active, and remove the inline search field from the browse list. * fix(search): clear header query when leaving scoped browse pages Prevent global live search from firing on album/detail routes after a scoped browse query; browse session stashes still restore on back. * fix(tracks): restore scroll after back from detail during scoped search Hold stashed song results across fetchSongPage churn, defer leave-stash teardown past AppShell scroll reset, restore tracks scroll after the list is ready, and save scroll snapshot when opening artist from song context menu. * fix(tracks): hide discovery headings during scoped search Hide the page subtitle and "Browse all tracks" section title when tracks search is active, matching hero/rails chrome behavior. * feat(search): scoped live search for Composers browse Wire /composers to header live search with composers scope badge, session stash, scroll restore, and plain grid/list during text filter. Remove the in-page filter input; add i18n and navigation helpers. * docs: CHANGELOG and credits for scoped browse live search (PR #938)	2026-06-01 13:04:36 +03:00
ImAsra	ae2e123a14	feat: add long press to shuffle with a wave animation (#888) ... * feat: add long press to shuffle with a wave animation to singnify how long to press * refactor: long-press shuffle cleanup Follow-up on the long-press shuffle PR: shared hook/overlay, playback parity, pointer events, broader surface coverage, locales, and tests. * docs: credit ImAsra for long-press album shuffle (PR #888) Add CHANGELOG entry and Settings credits for the hold-to-shuffle play interaction shipped in Psychotoxical/psysonic#888. * fix: restore playAlbumShuffled and long-press hook wiring The follow-up merge dropped playAlbumShuffled and reverted the shared long-press hook in album play buttons, breaking tsc and vitest on PR #888. --------- Co-authored-by: cucadmuh <49571317+cucadmuh@users.noreply.github.com>	2026-05-28 23:59:49 +03:00
Frank Stellmacher	4b239957c4	fix(ui): restore round play and enqueue buttons on cards and rails (#788) ... Album-card play and enqueue overlay buttons revert to a pill shape (var(--radius-full)); the small play button next to track numbers in the album track list / artist top-tracks reverts to a circle (50%). The square shape from the consistency sweep felt off against the round covers — back to the original round/pill family for these specific icons. All other surfaces touched in #745 stay on var(--radius-sm).	2026-05-19 00:17:34 +02:00
cucadmuh	d7b23b3c08	fix(ui): stable play/enqueue hover on album rails and mainstage cards (#787) ... * fix(ui): stable play/enqueue hover on album rails and mainstage cards Horizontal Home rails (Discover): drop content-visibility:auto and scroll-snap, pin controls to cover hover, dim overlay via background. Grids and song cards: pointer-events on overlays so WebKitGTK/Wayland GPU does not lose :hover. * chore: CHANGELOG and credits for PR #787	2026-05-18 23:35:08 +03:00
Frank Stellmacher	3b94368ffa	fix(ui): visual consistency sweep — shapes, buttons, hero, header alignment (#745) ... * fix(ui): square shape across badges, pills and non-player buttons zunoz on Discord flagged inconsistent shapes for play buttons, badges and pills across the app. Unify to var(--radius-sm) for non-player surfaces so the same visual indicator looks identical wherever it appears. Player Bar, Fullscreen Player and Mini Player keep their circular shape as part of the player family; toggle switches, sliders, search input, pagination dots and theme overrides are left alone. Covers: hero play + nav arrows, album-card details button, album header icon buttons, playlist suggestion play, album-row nav arrows; .badge (incl. New / album-detail), genre pill, np chip/tag/badge, np-dash toolbar badge, radio filter chip, radio card chip, mp album plays pill, settings search-result badge, alphabet filter buttons, download hint, mobile search chip, artist release-group count, artist external link, all Orbit session pills, device-sync count badge; ServersTab "Aktiv" badge, PlaylistCard loading badge, AlbumRow / ArtistRow "more" buttons. * fix(composers): collapse empty space between virtual rows The composer grid uses text-only tiles (~78 px intrinsic) but estimateRowHeightPx scaled with cell width like the image variants, clamped to a 200 px maximum. On normal viewports every virtual row reserved ~200 px while the actual card was ~78 px, leaving ~120 px of empty space below each row. Pin the composer variant to min === max so the rowHeight is a fixed 88 px regardless of cell width. * fix(ui): unify secondary action buttons on btn-surface Action rows on the Artist, Album, Tracks, Favorites and Most Played pages mixed btn-ghost (borderless), btn-surface (bordered) and bare .btn (no variant, picked up bordered look in light themes only). Result was per-page and per-theme inconsistency — secondary buttons sometimes had borders, sometimes not. Unify on btn-surface for all secondary actions so the same affordance looks identical across pages and the difference between themes is just border tone, not border presence. - Tracks hero: Enqueue and Reroll buttons - AlbumHeader: Shuffle, Enqueue, Star, Share, Bio, Download and the Offline-cache states - MostPlayed: sort toggle and compilations filter (now matches the Albums page header) * fix(hero): make pagination dots visible on light backdrops The pagination dots used `rgba(255, 255, 255, 0.35)` which disappears against white-dominant cover art and on light themes, even under the hero gradient overlay. zunoz on Discord reported the inactive dots as effectively invisible. Bump inactive dots to 85 % white with a dark outline + drop shadow so they read against any backdrop, and switch the active dot to the accent color so the highlight reads as colour, not just width. Also opaque-fill `.badge` (`var(--accent)` + `--ctp-crust` text) so the hero pills do not disappear against light cover art either — base class previously used `--accent-dim` which is too transparent for badges per the existing badge rule. * fix(tracks): align Browse-all-tracks header with rows The Tracks page header sat outside the scroll container while rows sat inside it, so the scrollbar gutter shrank only the rows and the last header column drifted right of its row data. With OpenDyslexic selected the wider glyphs pushed "Duration" past the viewport edge entirely; zunoz on Discord reported it. Move SongListHeader inside the scroll container with position: sticky so header and rows share the same width budget. Sticky keeps the header visible while scrolling as a side benefit. * test(cardGridLayout): pin composer variant to fixed row height Guards the fix that collapsed the empty space between Composers grid rows. Re-introducing the `cellWidthPx + extra` scaling for composer would silently bring back ~120 px of dead space per virtual row, so the test asserts the fixed 88 px output across a wide cellWidth range. Image variants (artist / album / playlist) get baseline assertions so the composer case is documented as the deliberate exception, not an oversight. * docs(changelog): UI consistency sweep (PR #745)	2026-05-17 12:32:43 +02:00
Frank Stellmacher	4b4cf42167	refactor(styles): split components.css into per-section files (#657) ... components.css (14205 LOC) → 84 per-section files in src/styles/components/ + an index.css that imports them in original cascade order. Same approach as the theme.css split: top-level sections are detected by single-dash or 3+ dash header decoration (/^\/\* ─(?: |─{2,})/), 2-dash sub-sections stay inside their parent. Concatenating in @import order reproduces the original byte stream (+1 trailing newline, cosmetic). Each section is now self-contained — touching Tracklist, Modal, Hero, Sidebar, etc. only opens one focused file. Generated via /tmp/split-components-css.mjs.	2026-05-13 19:10:11 +02:00