fix(ui): library-switch overlay was fully opaque — the 'new page' wipe

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

@@ -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>

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
 		}

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;