From 985e4e5e6d0f095721aa33769eab09ec65cca0eb Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Sat, 20 Jun 2026 20:39:49 +0200
Subject: [PATCH 1/3] fix(mini-player): restore provider order after
 per-profile theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ThemeProvider grew a `useProfile()` call in #264 (per-profile theme +
skin storage), but MiniPlayerApp.tsx was left with the legacy nesting
where ThemeProvider wraps ProfileProvider. React StrictMode catches
the "must be used within ProfileProvider" throw and surfaces it as a
white window — mini-player has been blanked since 1.5.0.

Mirror the main App.tsx nesting (ProfileProvider outer) so the mini
boots into the same provider chain.
---
 src/MiniPlayerApp.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/MiniPlayerApp.tsx b/src/MiniPlayerApp.tsx
index 9d4dd9fd..639fb592 100644
--- a/src/MiniPlayerApp.tsx
+++ b/src/MiniPlayerApp.tsx
@@ -9,6 +9,12 @@ import { MiniPlayer } from "./components/views/MiniPlayer";
  * Library / Playlist contexts since the mini-player only displays
  * the current track + playback controls — no library browsing.
  *
+ * ProfileProvider sits OUTSIDE ThemeProvider because the per-profile
+ * theme work landed in #264 made `ThemeProvider` call `useProfile()`
+ * to scope theme choices per-profile. Without this nesting the
+ * mini boots into a white screen via the "must be used within
+ * ProfileProvider" throw — mirrors the main `App.tsx` nesting.
+ *
  * SpotifyProvider stays in because PlayerProvider calls useSpotify()
  * unconditionally (provider routing happens inside PlayerContext).
  * Without it the mini boots into a white screen via the "must be
@@ -20,14 +26,14 @@ import { MiniPlayer } from "./components/views/MiniPlayer";
  */
 export function MiniPlayerApp() {
   return (
-    <ThemeProvider>
-      <ProfileProvider>
+    <ProfileProvider>
+      <ThemeProvider>
         <SpotifyProvider>
           <PlayerProvider>
             <MiniPlayer />
           </PlayerProvider>
         </SpotifyProvider>
-      </ProfileProvider>
-    </ThemeProvider>
+      </ThemeProvider>
+    </ProfileProvider>
   );
 }

From a066a17948f756b848a2e1857e06e31b7ad10224 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Sat, 20 Jun 2026 20:40:00 +0200
Subject: [PATCH 2/3] fix(skins): drop shadowCard from skin picker preview
 (Pulse leak)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pulse's shadowCard is a neon halo `0 0 24px -4px var(--accent-500)`
that leaks visibly past the picker button's overflow-hidden clip
in the Settings → Appearance grid. The other skins' shadows are
either too subtle (Studio's 1px black, Lounge's soft drop) or
absent (Editorial, Liquid) to read at ~200×100 px anyway, so the
shadow channel was carrying zero signal for four skins and one
clear bug for the fifth.

Drop `boxShadow` from the inline preview style. Each card still
sells its skin via the display font + heading weight + tracking +
border-radius — the surface treatment shows up on the real chrome
the moment the user clicks.
---
 src/components/views/settings/SkinPickerCard.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/views/settings/SkinPickerCard.tsx b/src/components/views/settings/SkinPickerCard.tsx
index 46332292..b69c5402 100644
--- a/src/components/views/settings/SkinPickerCard.tsx
+++ b/src/components/views/settings/SkinPickerCard.tsx
@@ -92,12 +92,20 @@ export function SkinPickerCard() {
           // skin's actual tokens, not the active skin's. Using inline
           // styles also sidesteps having to round-trip through
           // tailwind / data-skin attribute fiddling for the preview.
+          //
+          // `shadowCard` is intentionally NOT applied here: Pulse's
+          // neon halo (`0 0 24px -4px var(--accent-500)`) leaks
+          // visibly past the button's overflow-hidden clip, and at
+          // ~200×100 px the other skins' shadows are too subtle to
+          // read anyway. The skin's identity is already carried by
+          // the display font + heading weight + tracking + radius;
+          // chrome-scale shadows belong on real surfaces, not on
+          // thumbnail previews.
           const previewStyle: React.CSSProperties = {
             fontFamily: preset.typography.display,
             fontWeight: preset.typography.headingWeight,
             letterSpacing: preset.typography.displayTracking,
             borderRadius: preset.radius.card,
-            boxShadow: preset.surface.shadowCard,
           };
           return (
             <button

From a802da9ddb8ba9cc5682a0cd120f8a79de402451 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Sat, 20 Jun 2026 20:43:15 +0200
Subject: [PATCH 3/3] fix(about): make hero card theme-aware (Liquid light
 readability)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Hero card hardcoded `bg-linear-to-br from-zinc-900 to-zinc-800
text-white` + a stack of `text-zinc-{300,400,500,600}` and
`text-white/5` classes designed for a guaranteed-dark surface.
That worked on Studio's light variant (where the dark gradient
deliberately contrasted with the page) but breaks on Liquid Light:
liquid.css:349 strips `background-image` on every `rounded-3xl`
under `main` to apply its universal glass treatment, leaving the
dark text classes stranded on pale glass — the version watermark,
subtitle, year, license and "Check for updates" button were all
invisible.

Pair every colour with a `dark:` variant so the hero renders
correctly on every (theme × skin) combo: light page surfaces get
dark text against a soft light gradient (or the skin's glass
override), dark surfaces keep the original white-on-zinc look.
---
 src/components/views/AboutView.tsx | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/views/AboutView.tsx b/src/components/views/AboutView.tsx
index 2aad46dc..2687f228 100644
--- a/src/components/views/AboutView.tsx
+++ b/src/components/views/AboutView.tsx
@@ -256,37 +256,45 @@ export function AboutView({ onNavigate }: AboutViewProps) {
         </div>
       </div>
 
-      {/* Hero Card */}
-      <div className="relative overflow-hidden rounded-3xl p-10 bg-linear-to-br from-zinc-900 to-zinc-800 text-white">
-        <div className="absolute top-0 right-0 text-[120px] font-black text-white/5 leading-none pr-8 pt-4 select-none">
+      {/* Hero Card — theme-aware so the light variant stays readable.
+          The original hero hardcoded a dark gradient + white text;
+          that worked on Studio Dark and on Studio Light (where the
+          dark surface deliberately contrasted with the page), but
+          Liquid Light's universal `rounded-3xl` glass override
+          (liquid.css:349) strips `background-image` and leaves the
+          dark text classes stranded on pale glass. Pairing every
+          colour with a `dark:` variant lets the hero render
+          correctly on every (theme × skin) combo. */}
+      <div className="relative overflow-hidden rounded-3xl p-10 bg-linear-to-br from-zinc-100 to-zinc-200 dark:from-zinc-900 dark:to-zinc-800 text-zinc-900 dark:text-white">
+        <div className="absolute top-0 right-0 text-[120px] font-black text-zinc-900/5 dark:text-white/5 leading-none pr-8 pt-4 select-none">
           {version}
         </div>
         <div className="relative z-10">
           <div className="flex items-center space-x-2 mb-2">
             <WaveFlowLogo className="w-8 h-8" />
             <h2 className="text-3xl font-black">
-              Wave<span className="text-emerald-400">Flow</span>
+              Wave<span className="text-emerald-600 dark:text-emerald-400">Flow</span>
             </h2>
           </div>
-          <p className="text-zinc-400 mb-4">{t("about.hero.subtitle")}</p>
+          <p className="text-zinc-600 dark:text-zinc-400 mb-4">{t("about.hero.subtitle")}</p>
           <div className="flex items-center space-x-3 mb-4">
             <span className="bg-emerald-500 text-white text-xs px-2.5 py-1 rounded-full font-semibold">
               v{version}
             </span>
-            <span className="text-zinc-500 text-sm">2026</span>
-            <span className="text-zinc-600">·</span>
-            <span className="text-zinc-500 text-sm">GPL-3.0 License</span>
+            <span className="text-zinc-600 dark:text-zinc-500 text-sm">2026</span>
+            <span className="text-zinc-400 dark:text-zinc-600">·</span>
+            <span className="text-zinc-600 dark:text-zinc-500 text-sm">GPL-3.0 License</span>
           </div>
           <button
             type="button"
-            className="flex items-center space-x-2 px-4 py-2 rounded-xl border border-zinc-700 bg-zinc-800 text-sm font-medium text-zinc-300 hover:bg-zinc-700 transition-colors"
+            className="flex items-center space-x-2 px-4 py-2 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors"
           >
             <ExternalLink size={14} aria-hidden="true" />
             <span>{t("about.hero.checkUpdates")}</span>
           </button>
-          <p className="text-xs text-zinc-500 mt-4">
+          <p className="text-xs text-zinc-600 dark:text-zinc-500 mt-4">
             {t("about.hero.developedBy")}{" "}
-            <span className="font-semibold text-zinc-300">WaveFlow Team</span>
+            <span className="font-semibold text-zinc-800 dark:text-zinc-300">WaveFlow Team</span>
           </p>
         </div>
       </div>