feat(settings): add "Square Corners" appearance toggle (#1215)

* feat(settings): add "Square Corners" appearance toggle

A Display toggle in Settings → Appearance → Visual Options that overrides
the active theme to render cards and cover art with square (non-rounded)
corners, for a sharper, boxy look.

Covered surfaces: grid cards (album/playlist/artist/song/because) and
their covers, detail-header heros (album/playlist/tracks), the Now
Playing / Radio view, the fullscreen player, the cover lightbox, the
queue panel cover, and the mini player.

Persisted in themeStore and driven by an `html[data-square-corners]`
attribute set in App.tsx — applied in both the main and mini-player
webviews (the mini player rehydrates the theme store on the shared
`storage` event). Strings added for all 12 locales.

* docs(changelog): add Square Corners to 1.50.0 CHANGELOG and What's New

src/styles/components/index.css

@@ -96,3 +96,4 @@
 @import './back-to-top.css';
 @import './error-boundary.css';
 @import './backdrop-source-list.css';
+@import './square-corners.css';

src/styles/components/square-corners.css

@@ -0,0 +1,70 @@
+/* ── Square Corners override ──
+ *
+ *   Toggled by `html[data-square-corners]` (themeStore `squareCorners`, set in
+ *   App.tsx). A global, theme-independent override that strips the rounded
+ *   corners off the grid cards (album / playlist / artist / song / "because")
+ *   and their cover artwork, for users who prefer a sharp, boxy look.
+ *
+ *   Scope is deliberately limited to cards + their covers — buttons, inputs,
+ *   dialogs and the player bar keep whatever radius the active theme defines.
+ *   `!important` is required because some themes set card radii with their own
+ *   `!important` (see e.g. `.artist-card-avatar-initial`).
+ *
+ *   The fallback artist initials avatar (`.artist-card-avatar-initial`) stays a
+ *   circle on purpose — it is an avatar placeholder, not a card corner. */
+
+/* Grid cards + their covers. */
+html[data-square-corners] :is(
+  .card,
+  .album-card,
+  .artist-card,
+  .song-card,
+  .because-card,
+  .album-card-cover,
+  .because-card-cover-wrap,
+  .artist-card-avatar,
+  .album-card-cover img,
+  .artist-card-avatar img
+) {
+  border-radius: 0 !important;
+}
+
+/* Large cover art in the album / playlist / tracks detail headers (heros). */
+html[data-square-corners] :is(
+  .album-detail-cover,
+  .album-detail-cover-btn,
+  .hero-cover,
+  .playlist-hero-cover,
+  .tracks-hero-cover,
+  .tracks-hero-cover img
+) {
+  border-radius: 0 !important;
+}
+
+/* Now Playing / Radio full view cover art. */
+html[data-square-corners] :is(
+  .np-dash-hero-cover,
+  .np-cover
+) {
+  border-radius: 0 !important;
+}
+
+/* Fullscreen player, the cover lightbox, and the queue panel's current cover. */
+html[data-square-corners] :is(
+  .fsp-cover,
+  .cover-lightbox-img,
+  .queue-current-cover
+) {
+  border-radius: 0 !important;
+}
+
+/* Mini player cover. The mini player is a separate webview, but the
+ *  `data-square-corners` attribute is applied in both window kinds (the App.tsx
+ *  attribute effects run in each webview, and the mini player rehydrates the
+ *  theme store on the shared-localStorage `storage` event). */
+html[data-square-corners] :is(
+  .mp-cover,
+  .mp-album-cover
+) {
+  border-radius: 0 !important;
+}