From a11b4a9cc459a0535dbefadb507fa7a7976e27f7 Mon Sep 17 00:00:00 2001
From: John O'Keefe <git@linuxhg.com>
Date: Sun, 18 Oct 2026 13:16:35 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui):=20library-switch=20overlay=20was=20ful?=
 =?UTF-8?q?ly=20opaque=20=E2=80=94=20the=20'new=20page'=20wipe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The switch overlay intended a 50% dim (bg-opacity-50) but set its
background with an inline style — Tailwind's bg-opacity variable does
not apply to inline styles, so the overlay rendered fully opaque. Every
library switch wiped the material area to a solid sheet (chrome stays
visible: the sidebar sits at z-60 above the overlay's z-50) and
hard-cut back when the overlay dropped — reading exactly as a new page
instead of a fade. The dashboard showed it worst because its switch
holds the overlay longest (sections fetch + awaited week-widget refresh
behind it).

- overlay background is now theme-aware translucent
  (color-mix 55% bg-primary over transparent); the dead bg-opacity-50
  class is gone
- the dim lifts before the fade-in starts, so the new content's fade
  plays fully visible rather than being hard-cut mid-transition
---
 templates/library_switcher.templ    | 4 ++--
 templates/library_switcher_templ.go | 2 +-
 web/src/library-switcher.ts         | 5 +++++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/templates/library_switcher.templ b/templates/library_switcher.templ
index 5a6f1560..0ebdb912 100644
--- a/templates/library_switcher.templ
+++ b/templates/library_switcher.templ
@@ -43,8 +43,8 @@ templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, title stri
 		</div>
 		<div
 			id="loading-spinner"
-			class="hidden fixed inset-0 bg-opacity-50 flex items-center justify-center z-50"
-			style="background-color: var(--bg-primary);"
+			class="hidden fixed inset-0 flex items-center justify-center z-50"
+			style="background-color: color-mix(in srgb, var(--bg-primary) 55%, transparent);"
 		>
 			<div class="animate-spin rounded-full h-12 w-12 border-b-2" style="border-color: var(--accent);"></div>
 		</div>
diff --git a/templates/library_switcher_templ.go b/templates/library_switcher_templ.go
index 022f5cf2..0979e575 100644
--- a/templates/library_switcher_templ.go
+++ b/templates/library_switcher_templ.go
@@ -275,7 +275,7 @@ func LibrarySwitcher(libData []LibraryData, currentLibraryID string, title strin
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div><div id=\"loading-spinner\" class=\"hidden fixed inset-0 bg-opacity-50 flex items-center justify-center z-50\" style=\"background-color: var(--bg-primary);\"><div class=\"animate-spin rounded-full h-12 w-12 border-b-2\" style=\"border-color: var(--accent);\"></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div><div id=\"loading-spinner\" class=\"hidden fixed inset-0 flex items-center justify-center z-50\" style=\"background-color: color-mix(in srgb, var(--bg-primary) 55%, transparent);\"><div class=\"animate-spin rounded-full h-12 w-12 border-b-2\" style=\"border-color: var(--accent);\"></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/web/src/library-switcher.ts b/web/src/library-switcher.ts
index 2969b283..60e9270e 100644
--- a/web/src/library-switcher.ts
+++ b/web/src/library-switcher.ts
@@ -27,6 +27,11 @@ export async function switchWithTransition(
 
     await fetchFn();
 
+    // Lift the dim BEFORE the fade-in starts, so the new content's fade
+    // plays fully visible instead of being hard-cut by the overlay
+    // disappearing mid-transition.
+    loading.classList.add("hidden");
+
     container.classList.remove("duration-150");
     container.classList.add("duration-300");
     void container.offsetHeight;