From 284e0d5bde79e12ecef61cb0106f5e1037287778 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 25 May 2026 03:54:41 +0200
Subject: [PATCH 1/3] feat(ui): toggle Hi-Res badge + add Spotify-style label
 in PlayerBar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two related UI bumps:

- New `useHiResBadgeVisibility` hook backed by
  `profile_setting['ui.show_hi_res_badge']` (default ON). All three
  HiResBadge variants now skip render when the flag is off, so the
  toggle is a one-line global hide for users who find the audiophile
  chrome noisy. Per-profile so a kid's profile can stay clean while
  the audiophile profile keeps the pills.

- New `text` variant on HiResBadge — Spotify-style minimal green
  uppercase text, no pill background. Used under the artist name in
  the PlayerBar metadata stack so users instantly know whether the
  current track is being served at Hi-Res 24-bit / DSD spec without
  pinning the audio-quality footer.

- New Settings → Appearance card (`HiResBadgeCard`) hosting the
  toggle, with i18n across all 17 locales.

Implementation is intentionally minimal: the visibility hook lives
inside HiResBadge so existing call sites stay unchanged (no prop
drilling). The pattern mirrors `useWrappedBannerVisibility` —
profile setting + window event for refresh + same default-ON shape.
---
 docs/features/ui.md                           | 12 ++++
 src/components/common/HiResBadge.tsx          | 26 +++++--
 src/components/player/PlayerBar.tsx           | 14 ++++
 src/components/views/SettingsView.tsx         |  3 +
 .../views/settings/HiResBadgeCard.tsx         | 49 +++++++++++++
 src/hooks/useHiResBadgeVisibility.ts          | 69 +++++++++++++++++++
 src/i18n/locales/ar.json                      |  4 ++
 src/i18n/locales/de.json                      |  4 ++
 src/i18n/locales/en.json                      |  4 ++
 src/i18n/locales/es.json                      |  4 ++
 src/i18n/locales/fr.json                      |  4 ++
 src/i18n/locales/hi.json                      |  4 ++
 src/i18n/locales/id.json                      |  4 ++
 src/i18n/locales/it.json                      |  4 ++
 src/i18n/locales/ja.json                      |  4 ++
 src/i18n/locales/ko.json                      |  4 ++
 src/i18n/locales/nl.json                      |  4 ++
 src/i18n/locales/pt-BR.json                   |  4 ++
 src/i18n/locales/pt.json                      |  4 ++
 src/i18n/locales/ru.json                      |  4 ++
 src/i18n/locales/tr.json                      |  4 ++
 src/i18n/locales/zh-CN.json                   |  4 ++
 src/i18n/locales/zh-TW.json                   |  4 ++
 23 files changed, 236 insertions(+), 5 deletions(-)
 create mode 100644 src/components/views/settings/HiResBadgeCard.tsx
 create mode 100644 src/hooks/useHiResBadgeVisibility.ts

diff --git a/docs/features/ui.md b/docs/features/ui.md
index 3b29249a..a9fc991d 100644
--- a/docs/features/ui.md
+++ b/docs/features/ui.md
@@ -176,6 +176,18 @@ The overflow popover itself is capped at `max-h-[calc(100dvh-7rem)]` with `overf
 
 The opt-in audio-quality footer ([`AudioQualityFooter`](../../src/components/player/AudioQualityFooter.tsx), pinned via Settings → Appearance → Player bar layout) is a thin strip below the player bar that surfaces the source file specs in compact form (`48 kHz · 256 kb/s · 6 Mo` on the left, `AAC · 24bit · 48kHz` on the right; bitrates ≥ 1000 kbps render as `Mb/s`). When the engine is resampling — source rate ≠ output device rate — the left chunk renders an arrow instead: `48 kHz → 44.1 kHz · …`, so the user can spot the conversion at a glance without opening the popover. The arrow is gated on the device rate being known (the engine reports `0` before the first stream opens); otherwise we fall back to the source rate alone rather than printing a misleading `48 kHz → null`. The Hi-Res pill surfaces when [`isHiRes`](../../src/lib/hiRes.ts) accepts the source bit depth / sample rate combination.
 
+### Hi-Res / DSD badge
+
+[`HiResBadge`](../../src/components/common/HiResBadge.tsx) is the green pill that decorates track rows, album grid tiles, and the player-bar metadata when the source qualifies as Hi-Res (`isHiRes` — ≥ 24-bit, ≥ 44.1 kHz) or as DSD (`dsdLabel` returns `DSD64` / `DSD128` / …). Three variants:
+
+| Variant   | Used in                                                              | Style                                                                                                  |
+| --------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `overlay` | Album / artist grid covers (default).                                | Absolute-positioned pill in the cover's top-left corner with a drop shadow.                            |
+| `inline`  | TrackTable rows, sidebar lists.                                      | Inline rounded pill next to the title.                                                                 |
+| `text`    | Player bar — under the artist name.                                  | Spotify-style minimal green uppercase text, no pill background, blends into the metadata stack.        |
+
+All variants are gated by [`useHiResBadgeVisibility`](../../src/hooks/useHiResBadgeVisibility.ts), which reads `profile_setting['ui.show_hi_res_badge']` (default `true`) and re-reads on the `waveflow:hi-res-badge-visibility` window event. Settings → Appearance ships [`HiResBadgeCard`](../../src/components/views/settings/HiResBadgeCard.tsx) to flip the flag — when off, every mounted `HiResBadge` returns `null` in one render, including the player-bar text label. Per-profile so a kid's profile can hide the audiophile chrome while the audiophile profile keeps it.
+
 Hovering (or keyboard-focusing) the footer opens [`AudioPipelinePopover`](../../src/components/player/AudioPipelinePopover.tsx) — an audiophile-grade breakdown of what the engine is actually doing.
 
 #### Sections displayed
diff --git a/src/components/common/HiResBadge.tsx b/src/components/common/HiResBadge.tsx
index 49dc0d0b..f8a085b7 100644
--- a/src/components/common/HiResBadge.tsx
+++ b/src/components/common/HiResBadge.tsx
@@ -1,4 +1,5 @@
 import { dsdLabel, isHiRes } from "../../lib/hiRes";
+import { useHiResBadgeVisibility } from "../../hooks/useHiResBadgeVisibility";
 
 /**
  * Hi-Res Audio badge — shown when the source file is delivered at a
@@ -6,18 +7,25 @@ import { dsdLabel, isHiRes } from "../../lib/hiRes";
  * DSD (in which case the badge says "DSD64", "DSD128", etc. instead
  * of "Hi-Res 24-bit").
  *
- * Two visual variants:
- * - `overlay` is intended to sit on top of an album cover (top-left
+ * Three visual variants:
+ * - `overlay` (default) sits on top of an album cover (top-left
  *   corner, drop shadow);
  * - `inline` is for sidebar / row contexts where the badge sits next
- *   to text.
+ *   to text;
+ * - `text` is the minimal Spotify-style green text label used under
+ *   the artist name in the player bar — no background pill so it
+ *   nests cleanly inside dense metadata.
+ *
+ * Globally hidden by the per-profile
+ * `profile_setting['ui.show_hi_res_badge']` toggle — flipping that off
+ * returns `null` everywhere this component is mounted.
  */
 interface HiResBadgeProps {
   bitDepth: number | null;
   sampleRate: number | null;
   /** Codec label from the scanner (e.g. "FLAC", "DSD128"). */
   codec?: string | null;
-  variant?: "overlay" | "inline";
+  variant?: "overlay" | "inline" | "text";
   /** Override the visible text. Default is "Hi-Res {bitDepth}-bit". */
   label?: string;
 }
@@ -29,13 +37,21 @@ export function HiResBadge({
   variant = "overlay",
   label,
 }: HiResBadgeProps) {
+  const { visible } = useHiResBadgeVisibility();
   // DSD wins over the generic Hi-Res check — a DSF/DFF file reports
   // bit_depth=1 but is anything but lossy, and the user expects the
   // rate label (DSD64/128/...) rather than "Hi-Res 1-bit".
   const dsd = dsdLabel(codec);
   const isVisible = dsd !== null || isHiRes(bitDepth, sampleRate);
-  if (!isVisible) return null;
+  if (!isVisible || !visible) return null;
   const text = label ?? dsd ?? `Hi-Res ${bitDepth}-bit`;
+  if (variant === "text") {
+    return (
+      <span className="text-[10px] font-bold uppercase tracking-wider text-emerald-500 dark:text-emerald-400">
+        {text}
+      </span>
+    );
+  }
   if (variant === "inline") {
     return (
       <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500 text-white tracking-wide">
diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx
index 7f623389..3c721f40 100644
--- a/src/components/player/PlayerBar.tsx
+++ b/src/components/player/PlayerBar.tsx
@@ -13,6 +13,7 @@ import { useSleepTimer } from "../../hooks/useSleepTimer";
 import { usePlayerBarLayout } from "../../hooks/usePlayerBarLayout";
 import { Artwork } from "../common/Artwork";
 import { ArtistLink } from "../common/ArtistLink";
+import { HiResBadge } from "../common/HiResBadge";
 import { PlaybackControls } from "./PlaybackControls";
 import { ProgressBar } from "./ProgressBar";
 import { SleepTimerMenu } from "./SleepTimerMenu";
@@ -166,6 +167,19 @@ export function PlayerBar({ onNavigateToArtist }: PlayerBarProps) {
                   (currentTrack?.album_title ?? t("player.inactive"))
                 )}
               </span>
+              {/* Spotify-style minimal quality label under the artist.
+                  HiResBadge renders null when the track isn't Hi-Res /
+                  DSD OR when the user has hidden the badge from
+                  Settings → Appearance, so the row collapses naturally
+                  for lossy / lossless-16-bit content. */}
+              {currentTrack && (
+                <HiResBadge
+                  bitDepth={currentTrack.bit_depth}
+                  sampleRate={currentTrack.sample_rate}
+                  codec={currentTrack.codec}
+                  variant="text"
+                />
+              )}
             </div>
             {currentTrack && !isSpotify && (
               <button
diff --git a/src/components/views/SettingsView.tsx b/src/components/views/SettingsView.tsx
index 2f780711..512b4239 100644
--- a/src/components/views/SettingsView.tsx
+++ b/src/components/views/SettingsView.tsx
@@ -132,6 +132,7 @@ import { ExclusiveModeCard } from "./settings/ExclusiveModeCard";
 import { PlayerBarLayoutCard } from "./settings/PlayerBarLayoutCard";
 import { ShortcutsCard } from "./settings/ShortcutsCard";
 import { WrappedBannerCard } from "./settings/WrappedBannerCard";
+import { HiResBadgeCard } from "./settings/HiResBadgeCard";
 
 interface SettingsViewProps {
   onNavigate: (view: ViewId) => void;
@@ -2533,6 +2534,8 @@ export function SettingsView({ onNavigate }: SettingsViewProps) {
 
           <PlayerBarLayoutCard />
 
+          <HiResBadgeCard />
+
           <WrappedBannerCard />
         </section>
       )}
diff --git a/src/components/views/settings/HiResBadgeCard.tsx b/src/components/views/settings/HiResBadgeCard.tsx
new file mode 100644
index 00000000..a6869413
--- /dev/null
+++ b/src/components/views/settings/HiResBadgeCard.tsx
@@ -0,0 +1,49 @@
+import { useTranslation } from "react-i18next";
+import { Sparkles } from "lucide-react";
+import { useHiResBadgeVisibility } from "../../../hooks/useHiResBadgeVisibility";
+
+/**
+ * Settings → Appearance row toggling the Hi-Res / DSD pill that
+ * decorates track lists, album grids, and the compact label under
+ * the artist name in the player bar. Default ON because the pill is
+ * part of WaveFlow's audiophile identity; the toggle lets users who
+ * find it noisy turn it off without touching every list view.
+ */
+export function HiResBadgeCard() {
+  const { t } = useTranslation();
+  const { visible, setVisible } = useHiResBadgeVisibility();
+
+  return (
+    <section
+      aria-label={t("settings.hiResBadge.title")}
+      className="px-4 py-3"
+    >
+      <label className="flex items-start justify-between gap-3 cursor-pointer">
+        <span className="flex items-start gap-3 min-w-0">
+          <Sparkles
+            size={20}
+            className="text-zinc-400 mt-0.5 shrink-0"
+            aria-hidden="true"
+          />
+          <span className="min-w-0">
+            <span className="block text-sm font-medium text-zinc-900 dark:text-white">
+              {t("settings.hiResBadge.title")}
+            </span>
+            <span className="block text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed mt-0.5">
+              {t("settings.hiResBadge.subtitle")}
+            </span>
+          </span>
+        </span>
+        <input
+          type="checkbox"
+          checked={visible}
+          onChange={(e) => {
+            void setVisible(e.target.checked);
+          }}
+          className="mt-1.5 w-4 h-4 accent-emerald-500 cursor-pointer shrink-0"
+          aria-label={t("settings.hiResBadge.title")}
+        />
+      </label>
+    </section>
+  );
+}
diff --git a/src/hooks/useHiResBadgeVisibility.ts b/src/hooks/useHiResBadgeVisibility.ts
new file mode 100644
index 00000000..32659dc4
--- /dev/null
+++ b/src/hooks/useHiResBadgeVisibility.ts
@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useState } from "react";
+import { getProfileSetting, setProfileSetting } from "../lib/tauri/profile";
+
+/** Per-profile `profile_setting` key gating every Hi-Res / DSD pill. */
+const KEY = "ui.show_hi_res_badge";
+
+/**
+ * Window event broadcast by the Settings toggle after a write so every
+ * mounted `HiResBadge` + the player-bar quality label re-read in one
+ * go. Same pattern as `usePlayerBarLayout`.
+ */
+export const HI_RES_BADGE_EVENT = "waveflow:hi-res-badge-visibility";
+
+const DEFAULT_VISIBLE = true;
+
+function parseVisible(raw: string | null): boolean {
+  if (raw == null) return DEFAULT_VISIBLE;
+  return raw !== "false" && raw !== "0";
+}
+
+export interface HiResBadgeVisibility {
+  visible: boolean;
+  setVisible: (next: boolean) => Promise<void>;
+}
+
+/**
+ * Hook returning the user's preference for the Hi-Res / DSD pill that
+ * decorates track lists, album grids, and the player bar. Default
+ * **on** because the badge is part of WaveFlow's audiophile identity;
+ * the toggle lets users who find it noisy turn it off in one click.
+ *
+ * Stored in `profile_setting['ui.show_hi_res_badge']` (per-profile so
+ * a kid's profile can stay clean while the audiophile profile keeps
+ * the pills). Persistence + event handling mirror `usePlayerBarLayout`.
+ */
+export function useHiResBadgeVisibility(): HiResBadgeVisibility {
+  const [visible, setVisibleState] = useState<boolean>(DEFAULT_VISIBLE);
+
+  useEffect(() => {
+    let cancelled = false;
+    const refresh = async () => {
+      try {
+        const raw = await getProfileSetting(KEY);
+        if (cancelled) return;
+        setVisibleState(parseVisible(raw));
+      } catch (err) {
+        console.error("[useHiResBadgeVisibility] read failed", err);
+      }
+    };
+    void refresh();
+    window.addEventListener(HI_RES_BADGE_EVENT, refresh);
+    return () => {
+      cancelled = true;
+      window.removeEventListener(HI_RES_BADGE_EVENT, refresh);
+    };
+  }, []);
+
+  const setVisible = useCallback(async (next: boolean) => {
+    setVisibleState(next);
+    try {
+      await setProfileSetting(KEY, next ? "true" : "false", "bool");
+      window.dispatchEvent(new CustomEvent(HI_RES_BADGE_EVENT));
+    } catch (err) {
+      console.error("[useHiResBadgeVisibility] write failed", err);
+    }
+  }, []);
+
+  return { visible, setVisible };
+}
diff --git a/src/i18n/locales/ar.json b/src/i18n/locales/ar.json
index 4968d4cf..b4c6aef2 100644
--- a/src/i18n/locales/ar.json
+++ b/src/i18n/locales/ar.json
@@ -1601,6 +1601,10 @@
           "description": "لا تُظهر الشعار في الشاشة الرئيسية أبدًا. تظل صفحة Wrapped متاحة."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "شارة Hi-Res / DSD",
+      "subtitle": "عرض ملصق «Hi-Res 24-bit» أو «DSD128» بجانب المسارات المؤهلة وأسفل اسم الفنان في شريط المشغل. مفعّل افتراضيًا."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index c65b5599..e5ce2e90 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -1597,6 +1597,10 @@
           "description": "Banner nie auf dem Startbildschirm anzeigen. Die Wrapped-Ansicht bleibt erreichbar."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Hi-Res / DSD-Badge",
+      "subtitle": "Zeigt die Plakette „Hi-Res 24-bit“ oder „DSD128“ neben qualifizierenden Titeln und unter dem Künstlernamen in der Wiedergabeleiste. Standardmäßig aktiviert."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 63f17ee3..58c4d8b0 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1597,6 +1597,10 @@
           "description": "Never show the banner on the home screen. The Wrapped view itself stays reachable."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Hi-Res / DSD badge",
+      "subtitle": "Show the “Hi-Res 24-bit” or “DSD128” pill next to qualifying tracks and under the artist name in the player bar. On by default."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 51c7c02a..d17b4e8d 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -1597,6 +1597,10 @@
           "description": "Nunca mostrar el banner en el inicio. La vista Wrapped sigue siendo accesible."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Insignia Hi-Res / DSD",
+      "subtitle": "Muestra la etiqueta «Hi-Res 24-bit» o «DSD128» junto a las pistas que califican y bajo el nombre del artista en la barra del reproductor. Activado por defecto."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 10ff66b0..def4899b 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -1597,6 +1597,10 @@
           "description": "Ne jamais afficher le bandeau sur l'accueil. La page Wrapped reste accessible."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Badge Hi-Res / DSD",
+      "subtitle": "Affiche la pastille « Hi-Res 24-bit » ou « DSD128 » à côté des morceaux concernés et sous l'artiste dans la barre de lecture. Activé par défaut."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/hi.json b/src/i18n/locales/hi.json
index 1aca24eb..bbbe1dd0 100644
--- a/src/i18n/locales/hi.json
+++ b/src/i18n/locales/hi.json
@@ -1597,6 +1597,10 @@
           "description": "होम स्क्रीन पर बैनर कभी न दिखाएँ। Wrapped दृश्य फिर भी सुलभ रहता है।"
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Hi-Res / DSD बैज",
+      "subtitle": "योग्य ट्रैक के बगल में और प्लेयर बार में कलाकार के नाम के नीचे «Hi-Res 24-bit» या «DSD128» पिल दिखाएँ। डिफ़ॉल्ट रूप से चालू।"
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/id.json b/src/i18n/locales/id.json
index 2b778c07..39ae9838 100644
--- a/src/i18n/locales/id.json
+++ b/src/i18n/locales/id.json
@@ -1597,6 +1597,10 @@
           "description": "Jangan pernah tampilkan banner di beranda. Tampilan Wrapped tetap dapat diakses."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Lencana Hi-Res / DSD",
+      "subtitle": "Tampilkan pil «Hi-Res 24-bit» atau «DSD128» di samping lagu yang memenuhi syarat dan di bawah nama artis di bilah pemutar. Aktif secara default."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
index be0055e2..d35e6924 100644
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
@@ -1597,6 +1597,10 @@
           "description": "Non mostrare mai il banner sulla home. La vista Wrapped resta accessibile."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Badge Hi-Res / DSD",
+      "subtitle": "Mostra l'etichetta «Hi-Res 24-bit» o «DSD128» accanto ai brani idonei e sotto il nome dell'artista nella barra del riproduttore. Attivo di default."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index b82d485b..e11d8e28 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -1597,6 +1597,10 @@
           "description": "ホーム画面にバナーを表示しません。Wrapped ページには引き続きアクセスできます。"
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Hi-Res / DSD バッジ",
+      "subtitle": "対象トラックの横と、プレイヤーバーのアーティスト名の下に「Hi-Res 24-bit」または「DSD128」のラベルを表示します。デフォルトはオン。"
     }
   },
   "scanProgress": {
diff --git a/src/i18n/locales/ko.json b/src/i18n/locales/ko.json
index 09cc8b45..ccd227c5 100644
--- a/src/i18n/locales/ko.json
+++ b/src/i18n/locales/ko.json
@@ -1597,6 +1597,10 @@
           "description": "홈 화면에 배너를 절대 표시하지 않습니다. Wrapped 페이지는 계속 접근할 수 있습니다."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Hi-Res / DSD 배지",
+      "subtitle": "해당 트랙 옆과 플레이어 바의 아티스트 이름 아래에 «Hi-Res 24-bit» 또는 «DSD128» 배지를 표시합니다. 기본값은 켬."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/nl.json b/src/i18n/locales/nl.json
index 86ad0775..1a1a9a70 100644
--- a/src/i18n/locales/nl.json
+++ b/src/i18n/locales/nl.json
@@ -1597,6 +1597,10 @@
           "description": "Toon de banner nooit op de startpagina. De Wrapped-weergave blijft bereikbaar."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Hi-Res / DSD-badge",
+      "subtitle": "Toon de “Hi-Res 24-bit”- of “DSD128”-pil naast tracks die ervoor in aanmerking komen en onder de artiestennaam in de afspeelbalk. Standaard aan."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/pt-BR.json b/src/i18n/locales/pt-BR.json
index 1a8bf26a..78c87d37 100644
--- a/src/i18n/locales/pt-BR.json
+++ b/src/i18n/locales/pt-BR.json
@@ -1597,6 +1597,10 @@
           "description": "Nunca mostrar o banner na tela inicial. A visão Wrapped continua acessível."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Selo Hi-Res / DSD",
+      "subtitle": "Mostra a pílula «Hi-Res 24-bit» ou «DSD128» ao lado das faixas elegíveis e abaixo do nome do artista na barra do reprodutor. Ativado por padrão."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json
index 65ba83ec..0a6f7669 100644
--- a/src/i18n/locales/pt.json
+++ b/src/i18n/locales/pt.json
@@ -1597,6 +1597,10 @@
           "description": "Nunca mostrar o banner no ecrã inicial. A vista Wrapped continua acessível."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Distintivo Hi-Res / DSD",
+      "subtitle": "Mostra a pílula «Hi-Res 24-bit» ou «DSD128» ao lado das faixas elegíveis e sob o nome do artista na barra do reprodutor. Ativado por defeito."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index f8fbc49e..77f450b6 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -1599,6 +1599,10 @@
           "description": "Никогда не показывать баннер на главном экране. Страница Wrapped остаётся доступной."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Бейдж Hi-Res / DSD",
+      "subtitle": "Показывает значок «Hi-Res 24-bit» или «DSD128» рядом с подходящими треками и под именем исполнителя в панели плеера. Включено по умолчанию."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/tr.json b/src/i18n/locales/tr.json
index 7ce6aa24..82694865 100644
--- a/src/i18n/locales/tr.json
+++ b/src/i18n/locales/tr.json
@@ -1597,6 +1597,10 @@
           "description": "Afişi ana ekranda asla gösterme. Wrapped görünümüne yine de erişilebilir."
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Hi-Res / DSD rozeti",
+      "subtitle": "Uygun parçaların yanında ve oynatma çubuğunda sanatçı adının altında «Hi-Res 24-bit» veya «DSD128» rozetini gösterir. Varsayılan olarak açık."
     }
   },
   "spotify": {
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 9dc4840f..df437231 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1604,6 +1604,10 @@
           "description": "永远不在首页显示横幅。Wrapped 页面仍可访问。"
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Hi-Res / DSD 标识",
+      "subtitle": "在符合条件的曲目旁以及播放栏的艺人姓名下方显示「Hi-Res 24-bit」或「DSD128」标识。默认开启。"
     }
   },
   "scanProgress": {
diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
index d0de7dee..053bcade 100644
--- a/src/i18n/locales/zh-TW.json
+++ b/src/i18n/locales/zh-TW.json
@@ -1604,6 +1604,10 @@
           "description": "永遠不在首頁顯示橫幅。Wrapped 頁面仍可存取。"
         }
       }
+    },
+    "hiResBadge": {
+      "title": "Hi-Res / DSD 標籤",
+      "subtitle": "在符合條件的曲目旁以及播放列的演出者名稱下方顯示「Hi-Res 24-bit」或「DSD128」標籤。預設開啟。"
     }
   },
   "scanProgress": {

From efa19bbbd83f3c1d0dc3cef510e8733d4d1f4798 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 25 May 2026 04:10:29 +0200
Subject: [PATCH 2/3] fix(ui): single-subscriber store + rollback for hi-res
 badge toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two findings from the PR #147 review:

1. Every mounted HiResBadge called the hook, which fired its own
   `useEffect` with a Tauri `getProfileSetting` read + a window
   event listener. On a virtualised library view with ~20-50 badges
   mounted at once that's 20-50 redundant fetches plus 20-50
   listeners for a single boolean.

   Refactor the hook to a module-level store + `useSyncExternalStore`:
   the first subscriber kicks off the one-and-only Tauri read, the
   window listener is attached lazily (and only once), and every
   `HiResBadge` shares the same `currentVisible` value through cheap
   `Set<callback>` notifications. Call sites stay unchanged — same
   public interface, same `visible`/`setVisible` shape.

2. The optimistic `setVisible` flipped the local state before the
   `setProfileSetting` write and never rolled back on failure, so a
   rejected Tauri call left the UI showing a value that didn't match
   what was actually persisted. Capture the previous value before
   the flip and restore it inside the catch so the visible state
   tracks the truth on the disk.

`refreshHiResBadgeVisibility` is also now exported for callers that
need to force a re-read (profile switch — separate follow-up since
the original hook had the same limitation, and the no-op cost of the
new cache between switches is benign).
---
 src/hooks/useHiResBadgeVisibility.ts | 119 +++++++++++++++++++++------
 1 file changed, 94 insertions(+), 25 deletions(-)

diff --git a/src/hooks/useHiResBadgeVisibility.ts b/src/hooks/useHiResBadgeVisibility.ts
index 32659dc4..ac2419a8 100644
--- a/src/hooks/useHiResBadgeVisibility.ts
+++ b/src/hooks/useHiResBadgeVisibility.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 import { getProfileSetting, setProfileSetting } from "../lib/tauri/profile";
 
 /** Per-profile `profile_setting` key gating every Hi-Res / DSD pill. */
@@ -7,7 +7,8 @@ const KEY = "ui.show_hi_res_badge";
 /**
  * Window event broadcast by the Settings toggle after a write so every
  * mounted `HiResBadge` + the player-bar quality label re-read in one
- * go. Same pattern as `usePlayerBarLayout`.
+ * go. Also re-fired by other callers (tests, future profile-switch
+ * code) when the underlying setting changes outside this module.
  */
 export const HI_RES_BADGE_EVENT = "waveflow:hi-res-badge-visibility";
 
@@ -18,6 +19,80 @@ function parseVisible(raw: string | null): boolean {
   return raw !== "false" && raw !== "0";
 }
 
+// ─── Module-level store ───────────────────────────────────────────────
+//
+// The previous implementation called `useEffect` with its own window
+// listener + Tauri fetch inside every `HiResBadge` instance. On a
+// virtualised library view ~20-50 badges are mounted at once → 20-50
+// `getProfileSetting` calls plus 20-50 listeners on the window event
+// for what is really a single boolean. The shared store collapses that
+// to one Tauri fetch on the first subscriber + one window listener
+// attached lazily, with React-level subscriptions handled through
+// `useSyncExternalStore` (cheap — just adds a callback to a Set).
+
+let currentVisible: boolean = DEFAULT_VISIBLE;
+let hydrated = false;
+let windowListenerAttached = false;
+const listeners: Set<() => void> = new Set();
+
+function notify(): void {
+  for (const listener of listeners) listener();
+}
+
+async function hydrateFromBackend(): Promise<void> {
+  try {
+    const raw = await getProfileSetting(KEY);
+    const next = parseVisible(raw);
+    if (next !== currentVisible) {
+      currentVisible = next;
+      notify();
+    }
+  } catch (err) {
+    console.error("[useHiResBadgeVisibility] read failed", err);
+  }
+}
+
+function ensureWindowListener(): void {
+  if (windowListenerAttached || typeof window === "undefined") return;
+  windowListenerAttached = true;
+  window.addEventListener(HI_RES_BADGE_EVENT, () => {
+    void hydrateFromBackend();
+  });
+}
+
+function subscribe(listener: () => void): () => void {
+  ensureWindowListener();
+  if (!hydrated) {
+    // First subscriber kicks off the one-time backend read. Marked
+    // hydrated even before the fetch resolves so subsequent
+    // subscribers don't fire a duplicate request — they'll get the
+    // value via `notify` once the first fetch lands.
+    hydrated = true;
+    void hydrateFromBackend();
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function getSnapshot(): boolean {
+  return currentVisible;
+}
+
+// ─── Test / profile-switch hook ───────────────────────────────────────
+//
+// Exported so that `ProfileContext` (or unit tests) can force a re-
+// hydrate when the active profile changes — `profile_setting` is
+// scoped per profile, so the cached `currentVisible` becomes stale
+// the moment the user switches.
+
+/** Force the module-level store to re-read from the backend. */
+export function refreshHiResBadgeVisibility(): void {
+  hydrated = true;
+  void hydrateFromBackend();
+}
+
 export interface HiResBadgeVisibility {
   visible: boolean;
   setVisible: (next: boolean) => Promise<void>;
@@ -29,39 +104,33 @@ export interface HiResBadgeVisibility {
  * **on** because the badge is part of WaveFlow's audiophile identity;
  * the toggle lets users who find it noisy turn it off in one click.
  *
- * Stored in `profile_setting['ui.show_hi_res_badge']` (per-profile so
+ * Backed by `profile_setting['ui.show_hi_res_badge']` (per-profile so
  * a kid's profile can stay clean while the audiophile profile keeps
- * the pills). Persistence + event handling mirror `usePlayerBarLayout`.
+ * the pills) and a module-level cache so a virtualised view with
+ * dozens of mounted badges only triggers one Tauri fetch + one window
+ * listener.
  */
 export function useHiResBadgeVisibility(): HiResBadgeVisibility {
-  const [visible, setVisibleState] = useState<boolean>(DEFAULT_VISIBLE);
-
-  useEffect(() => {
-    let cancelled = false;
-    const refresh = async () => {
-      try {
-        const raw = await getProfileSetting(KEY);
-        if (cancelled) return;
-        setVisibleState(parseVisible(raw));
-      } catch (err) {
-        console.error("[useHiResBadgeVisibility] read failed", err);
-      }
-    };
-    void refresh();
-    window.addEventListener(HI_RES_BADGE_EVENT, refresh);
-    return () => {
-      cancelled = true;
-      window.removeEventListener(HI_RES_BADGE_EVENT, refresh);
-    };
-  }, []);
+  const visible = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
   const setVisible = useCallback(async (next: boolean) => {
-    setVisibleState(next);
+    const previous = currentVisible;
+    if (next === previous) return;
+    // Optimistic update — flips every mounted consumer immediately.
+    currentVisible = next;
+    notify();
     try {
       await setProfileSetting(KEY, next ? "true" : "false", "bool");
+      // Broadcast for other tabs / mini-player webview so they
+      // re-hydrate from the same store.
       window.dispatchEvent(new CustomEvent(HI_RES_BADGE_EVENT));
     } catch (err) {
       console.error("[useHiResBadgeVisibility] write failed", err);
+      // Roll back so the UI stays consistent with the persisted
+      // setting on failure (Tauri command rejected, profile pool
+      // unavailable, etc.).
+      currentVisible = previous;
+      notify();
     }
   }, []);
 

From bb4cd5e24281ededcee5cc04cdfaf71a27deee99 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 25 May 2026 04:19:10 +0200
Subject: [PATCH 3/3] fix(ui): token-guard hi-res hydrate + ssr-guard the
 dispatch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two findings from the latest review:

- `hydrateFromBackend` could apply a stale `getProfileSetting` reply
  if two reads raced (e.g. the settings toggle dispatching the
  window event right next to a profile-switch
  `refreshHiResBadgeVisibility`). Capture a monotonic token at the
  top of the function and bail when a newer read has already
  superseded the in-flight one before committing to `currentVisible`.

- `window.dispatchEvent` in `setVisible` was unguarded, so a
  non-DOM caller (Node tests, hypothetical future SSR) would crash.
  Wrap with the same `typeof window !== "undefined"` check that
  `ensureWindowListener` already uses.

Skipped finding: the CodeRabbit "fan-out coûteux" pass ran on the
pre-`efa19bb` revision where each badge held its own listener +
Tauri call. The store-with-useSyncExternalStore refactor already
collapses that to one fetch + one listener total, so prop-drilling
a `visible` flag would add noise without any measurable win.
---
 src/hooks/useHiResBadgeVisibility.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useHiResBadgeVisibility.ts b/src/hooks/useHiResBadgeVisibility.ts
index ac2419a8..71a94e6b 100644
--- a/src/hooks/useHiResBadgeVisibility.ts
+++ b/src/hooks/useHiResBadgeVisibility.ts
@@ -33,6 +33,13 @@ function parseVisible(raw: string | null): boolean {
 let currentVisible: boolean = DEFAULT_VISIBLE;
 let hydrated = false;
 let windowListenerAttached = false;
+// Monotonic token for in-flight backend reads. Bumped before each
+// fetch; the resolver only commits if its captured token still
+// matches — protects against an older async response overwriting a
+// newer one if two `hydrateFromBackend` calls race (e.g. settings
+// toggle dispatching the window event right next to a profile-switch
+// `refreshHiResBadgeVisibility`).
+let hydrateToken = 0;
 const listeners: Set<() => void> = new Set();
 
 function notify(): void {
@@ -40,8 +47,10 @@ function notify(): void {
 }
 
 async function hydrateFromBackend(): Promise<void> {
+  const token = ++hydrateToken;
   try {
     const raw = await getProfileSetting(KEY);
+    if (token !== hydrateToken) return; // a newer read superseded us
     const next = parseVisible(raw);
     if (next !== currentVisible) {
       currentVisible = next;
@@ -122,8 +131,12 @@ export function useHiResBadgeVisibility(): HiResBadgeVisibility {
     try {
       await setProfileSetting(KEY, next ? "true" : "false", "bool");
       // Broadcast for other tabs / mini-player webview so they
-      // re-hydrate from the same store.
-      window.dispatchEvent(new CustomEvent(HI_RES_BADGE_EVENT));
+      // re-hydrate from the same store. Guarded so callers running
+      // in a non-DOM environment (Node tests, future SSR) don't
+      // crash here — `ensureWindowListener` applies the same guard.
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent(HI_RES_BADGE_EVENT));
+      }
     } catch (err) {
       console.error("[useHiResBadgeVisibility] write failed", err);
       // Roll back so the UI stays consistent with the persisted