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
2026-05-07 13:11:22 +02:00
2026-05-14 01:30:14 +03:00

Psysonic Logo

A modern desktop client for self-hosted music libraries

Fast. Native. Beautiful. Built for people who actually care about their music collection.

Psysonic is built primarily for Navidrome and also works with Gonic, Airsonic, LMS and other Subsonic-compatible servers, depending on the features supported by your server.


Latest Release GitHub Stars License GPLv3 Tauri v2

Discord Community Telegram Community Support Psysonic on Ko-fi

AUR psysonic AUR psysonic-bin Cachix



Available languages: English, German, Spanish, French, Norwegian Bokmål, Dutch, Romanian, Russian and Chinese.

More translations are added over time.

No telemetry • Native performance • Navidrome-first • Community driven


Psysonic Screenshot


Warning

Psysonic is under active development. Bugs and rough edges can happen, and features may change as the project evolves.

What is Psysonic?

Psysonic is a desktop music client for self-hosted music libraries. It is designed for people who want the freedom of their own server without giving up the comfort, polish and speed of a modern music app.

It is built with Rust, Tauri v2 and React, with a strong focus on responsiveness, customization, practical music-library workflows and a user interface that does not require a manual before you can press play.

Psysonic is optimized first and foremost for Navidrome. Other Subsonic-compatible servers can work well too, but advanced features may depend on server-side support.


Highlights

Playback & Queue

  • Gapless playback
  • Crossfade
  • ReplayGain support
  • LUFS-based Smart Loudness Normalization
  • AudioMuse-AI support
  • Infinite Queue
  • Smart Radio sessions
  • Fast and responsive playback handling
  • Low memory usage compared to heavy web-first clients

Audio Tools

  • 10-band Equalizer
  • Equalizer presets
  • AutoEQ headphone correction
  • Per-device optimization
  • Loudness-aware playback options

Library Management

  • Fast search across large libraries
  • Albums, artists, tracks and genres
  • Ratings support
  • Multi-select bulk actions
  • Drag & drop playlist management
  • Smart Playlists
  • Built for large self-hosted collections

Lyrics & Discovery

  • Synced lyrics with seek support
  • Lyrics provider support: YouLy+, LRCLIB and NetEase
  • Auto-scrolling sidebar lyrics
  • Fullscreen lyric mode
  • Last.fm scrobbling
  • Similar artists
  • Loved tracks and listening stats

Sharing & Social Listening

  • Magic Strings sharing:

    • share albums, artists and queues
    • Navidrome user management helpers
    • fast account sharing
  • Orbit shared listening sessions:

    • host-controlled synchronized playback
    • session invites via link
    • guest song suggestions
    • real-time queue interaction

Personalization & Accessibility

  • Large theme collection
  • Catppuccin and Nord inspired styles
  • Glassmorphism effects
  • Font customization
  • Zoom controls
  • Keybind remapping
  • Theme Scheduler for automatic day/night switching
  • Colorblind-friendly theme options
  • Keyboard-friendly navigation

Power User Extras

  • CLI controls
  • USB / portable sync
  • Backup and restore settings
  • In-app auto updater
  • LAN / remote auto switching

Shared listening feature banner

Orbit brings synchronized shared listening sessions directly into Psysonic.

Start a session, invite others with a link and listen together with host-controlled playback, shared queue interaction and guest song suggestions. It is built for real-world music sharing without turning your self-hosted setup into a social-media circus.


Platforms

OS Support
Windows Native installer
macOS Signed DMG
Linux AppImage / DEB / RPM / AUR (psysonic, psysonic-bin) / NixOS

Install

Linux

curl -fsSL https://raw.githubusercontent.com/Psychotoxical/psysonic/main/scripts/install.sh | sudo bash

Linux builds are also available through GitHub Releases, AUR and Cachix/Nix.

Windows

Download the latest installer from the GitHub Releases.

macOS

Download the signed DMG from the GitHub Releases.


Development

Contributor expectations (PRs, CI, Tauri boundary, UI): CONTRIBUTING.md.

git clone https://github.com/Psychotoxical/psysonic.git
cd psysonic
npm install
npm run tauri:dev

Build release:

npm run tauri:build

Privacy

Psysonic is built for self-hosted music collections. Your library is yours.

  • No telemetry
  • No spyware nonsense
  • No analytics harvesting
  • No hidden tracking

Community & Support

Join the community, report bugs, suggest features, share themes and help shape the future of Psysonic.


License

Psysonic is licensed under the GNU GPL v3.0.


Forks and Attribution

Psysonic is free and open-source software under the GPLv3. You are welcome to fork it, modify it and build upon it under the terms of the license.

If you publish a modified or rebranded version, please make it clear that your project is based on Psysonic and preserve proper attribution to the original project.

That is not about preventing forks. Forks are part of open source. It is about being honest with users and contributors about where the work comes from.

Features, design work and implementation ideas developed in Psysonic should not be presented as unrelated original work in downstream projects.


Own your music. Enjoy the client too.

Psysonic brings a modern desktop experience to self-hosted music libraries.

Languages
TypeScript 69.9%
Rust 24.9%
CSS 4.3%
JavaScript 0.5%
Shell 0.3%