peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(glass): glassify the side rails + back-to-top (Phase 1, feed chrome)

Browse source 
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.
This commit is contained in:
npeter83 2026-07-12 22:44:57 +02:00
parent 7e85ee430b
commit 7fd5f20490
4 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/BackToTop.tsx
View file

@ -34,7 +34,7 @@ export default function BackToTop({ dep, threshold = 600 }: { dep?: unknown; thr
return createPortal( return createPortal(
<button <button
onClick={toTop} 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" show ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3 pointer-events-none"
}`} }`}
> >

2
frontend/src/components/CollapsedFilterRail.tsx
View file

@ -13,7 +13,7 @@ export default function CollapsedFilterRail({
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( 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 <button
onClick={onToggleCollapse} onClick={onToggleCollapse}
title={t("sidebar.expandPanel")} title={t("sidebar.expandPanel")}

2
frontend/src/components/Playlists.tsx
View file

@ -524,7 +524,7 @@ export default function Playlists({ canWrite }: { canWrite: boolean }) {
return ( return (
<div className="flex h-full min-h-0"> <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"> <div className="flex items-center justify-between mb-2">
<span className="text-sm font-semibold">{t("playlists.title")}</span> <span className="text-sm font-semibold">{t("playlists.title")}</span>
<button <button

2
frontend/src/components/Sidebar.tsx
View file

@ -462,7 +462,7 @@ export default function Sidebar({
} }
return ( 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. */} {/* Scope: your own subscriptions (Mine) vs the shared Library — moved out of the top bar. */}
<div <div
className="flex items-center rounded-full border border-border bg-card p-0.5 text-xs" className="flex items-center rounded-full border border-border bg-card p-0.5 text-xs"