From 7fd5f204908f75a02aa72b8e5b36570e5707f666 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 12 Jul 2026 22:44:57 +0200
Subject: [PATCH] feat(glass): glassify the side rails + back-to-top (Phase 1,
 feed chrome)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert the always-visible flat rails to the frosted glass system so they sit
consistently over the new background image (like the nav/header already do):
- Feed filter Sidebar + CollapsedFilterRail: bg-surface/40 -> glass
- Playlists left rail: bg-surface/40 -> glass
- BackToTop FAB: bg-card+border -> glass-card glass-hover
Small controls inside (filter pills/inputs) stay solid — a solid-on-glass
hierarchy, not everything translucent.
---
 frontend/src/components/BackToTop.tsx           | 2 +-
 frontend/src/components/CollapsedFilterRail.tsx | 2 +-
 frontend/src/components/Playlists.tsx           | 2 +-
 frontend/src/components/Sidebar.tsx             | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/BackToTop.tsx b/frontend/src/components/BackToTop.tsx
index 26bc792..f23519c 100644
--- a/frontend/src/components/BackToTop.tsx
+++ b/frontend/src/components/BackToTop.tsx
@@ -34,7 +34,7 @@ export default function BackToTop({ dep, threshold = 600 }: { dep?: unknown; thr
   return createPortal(
     <button
       onClick={toTop}
-      className={`fixed bottom-5 right-5 z-30 inline-flex items-center justify-center w-11 h-11 rounded-full bg-card border border-border text-fg shadow-lg hover:border-accent hover:text-accent transition-all duration-200 ${
+      className={`fixed bottom-5 right-5 z-30 inline-flex items-center justify-center w-11 h-11 rounded-full glass-card glass-hover text-fg shadow-lg hover:text-accent transition-all duration-200 ${
         show ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3 pointer-events-none"
       }`}
     >
diff --git a/frontend/src/components/CollapsedFilterRail.tsx b/frontend/src/components/CollapsedFilterRail.tsx
index 41124a6..948e1b5 100644
--- a/frontend/src/components/CollapsedFilterRail.tsx
+++ b/frontend/src/components/CollapsedFilterRail.tsx
@@ -13,7 +13,7 @@ export default function CollapsedFilterRail({
 }) {
   const { t } = useTranslation();
   return (
-    <aside className="hidden md:flex w-[46px] shrink-0 flex-col items-center gap-2 border-r border-border bg-surface/40 py-3">
+    <aside className="hidden md:flex w-[46px] shrink-0 flex-col items-center gap-2 glass py-3">
       <button
         onClick={onToggleCollapse}
         title={t("sidebar.expandPanel")}
diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index c157186..e802d1c 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -524,7 +524,7 @@ export default function Playlists({ canWrite }: { canWrite: boolean }) {
 
   return (
     <div className="flex h-full min-h-0">
-      <aside className="w-64 shrink-0 border-r border-border bg-surface/40 overflow-y-auto p-3">
+      <aside className="w-64 shrink-0 glass overflow-y-auto p-3">
         <div className="flex items-center justify-between mb-2">
           <span className="text-sm font-semibold">{t("playlists.title")}</span>
           <button
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index b6dc281..eec0175 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -462,7 +462,7 @@ export default function Sidebar({
   }
 
   return (
-    <aside className="hidden md:block w-64 shrink-0 border-r border-border bg-surface/40 overflow-y-auto p-4 space-y-3">
+    <aside className="hidden md:block w-64 shrink-0 glass overflow-y-auto p-4 space-y-3">
       {/* Scope: your own subscriptions (Mine) vs the shared Library — moved out of the top bar. */}
       <div
         className="flex items-center rounded-full border border-border bg-card p-0.5 text-xs"