From b09923661aca251a71c73c201870ccec1f08599c Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 12 Jul 2026 22:54:13 +0200
Subject: [PATCH] feat(glass): glassify modal inner panels, dropdowns & list
 rows (Phase 2)

Medium container surfaces -> the glass system so they refract the backdrop
consistently: Playlists row (bg-card->glass-card), DownloadCenter user-picker +
ShareDialog share-picker dropdowns (bg-card->glass-menu), DownloadCenter stat
cards / download rows / usage block, ShareDialog share-link block, VideoEditor
selection bar, ProfileEditor profile rows (bg-card/40|bg-surface/60->glass-card).
Tight admin rows and tiny inputs left solid on purpose.
---
 frontend/src/components/DownloadCenter.tsx | 8 ++++----
 frontend/src/components/Playlists.tsx      | 2 +-
 frontend/src/components/ProfileEditor.tsx  | 4 ++--
 frontend/src/components/ShareDialog.tsx    | 4 ++--
 frontend/src/components/VideoEditor.tsx    | 2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/DownloadCenter.tsx b/frontend/src/components/DownloadCenter.tsx
index a192869..ebdbab5 100644
--- a/frontend/src/components/DownloadCenter.tsx
+++ b/frontend/src/components/DownloadCenter.tsx
@@ -189,7 +189,7 @@ function DownloadRow({
   const { t } = useTranslation();
   const running = job.status === "running";
   return (
-    <div className="flex gap-3 p-2.5 rounded-xl bg-card/40 hover:bg-card transition">
+    <div className="flex gap-3 p-2.5 rounded-xl glass-card glass-hover transition">
       <Thumb job={job} />
       <div className="min-w-0 flex-1">
         <div className="font-medium leading-snug line-clamp-1 flex items-center gap-1.5">
@@ -338,7 +338,7 @@ function UsageBar() {
   if (!u) return null;
   const pct = u.unlimited || !u.max_bytes ? 0 : Math.min(100, (u.footprint_bytes / u.max_bytes) * 100);
   return (
-    <div className="rounded-xl bg-card/40 p-3 mb-4">
+    <div className="rounded-xl glass-card p-3 mb-4">
       <div className="flex justify-between text-sm mb-1.5">
         <span className="font-medium">{t("downloads.usage.title")}</span>
         <span className="text-muted">
@@ -446,7 +446,7 @@ function QuotaUserPicker({ onPick }: { onPick: (u: { id: number; email: string }
         className={inputCls}
       />
       {open && filtered.length > 0 && (
-        <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
+        <div className="absolute z-10 mt-1 w-full rounded-lg glass-menu shadow-xl overflow-hidden">
           {filtered.map((u) => (
             <button
               key={u.id}
@@ -482,7 +482,7 @@ function AdminSystem() {
             [t("downloads.admin.totalSize"), formatBytes(s.total_bytes)],
             [t("downloads.admin.cap"), s.total_cap_bytes ? formatBytes(s.total_cap_bytes) : t("downloads.admin.noCap")],
           ].map(([label, val]) => (
-            <div key={label} className="rounded-xl bg-card/40 p-3">
+            <div key={label} className="rounded-xl glass-card p-3">
               <div className="text-xs text-muted">{label}</div>
               <div className="text-lg font-semibold mt-0.5">{val}</div>
             </div>
diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index e802d1c..1e9e466 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -123,7 +123,7 @@ function Row({
     <div
       ref={setNodeRef}
       style={style}
-      className="flex items-center gap-2.5 p-2 rounded-lg border border-border bg-card"
+      className="flex items-center gap-2.5 p-2 rounded-lg glass-card glass-hover"
     >
       {readOnly ? (
         <span className="w-4" />
diff --git a/frontend/src/components/ProfileEditor.tsx b/frontend/src/components/ProfileEditor.tsx
index e1901b5..df45f66 100644
--- a/frontend/src/components/ProfileEditor.tsx
+++ b/frontend/src/components/ProfileEditor.tsx
@@ -97,7 +97,7 @@ export default function ProfileEditor({ onClose }: { onClose: () => void }) {
       <div className="space-y-1.5 mb-4">
         <div className="text-xs uppercase tracking-wide text-muted">{t("downloads.profiles.builtin")}</div>
         {builtins.map((p) => (
-          <div key={p.id} className="flex items-center gap-2 text-sm px-3 py-1.5 rounded-lg bg-surface/60">
+          <div key={p.id} className="flex items-center gap-2 text-sm px-3 py-1.5 rounded-lg glass-card">
             <Lock className="w-3.5 h-3.5 text-muted shrink-0" />
             <span className="flex-1 truncate">{p.name}</span>
           </div>
@@ -106,7 +106,7 @@ export default function ProfileEditor({ onClose }: { onClose: () => void }) {
           <div className="text-xs uppercase tracking-wide text-muted pt-2">{t("downloads.profiles.yours")}</div>
         )}
         {mine.map((p) => (
-          <div key={p.id} className="flex items-center gap-2 text-sm px-3 py-1.5 rounded-lg bg-surface/60">
+          <div key={p.id} className="flex items-center gap-2 text-sm px-3 py-1.5 rounded-lg glass-card">
             <span className="flex-1 truncate">{p.name}</span>
             <button onClick={() => startEdit(p)} title={t("downloads.actions.rename")} className="p-1 rounded hover:bg-surface text-muted hover:text-fg">
               <Pencil className="w-3.5 h-3.5" />
diff --git a/frontend/src/components/ShareDialog.tsx b/frontend/src/components/ShareDialog.tsx
index 1b58d22..a82c98a 100644
--- a/frontend/src/components/ShareDialog.tsx
+++ b/frontend/src/components/ShareDialog.tsx
@@ -56,7 +56,7 @@ function UserShare({ job }: { job: DownloadJob }) {
           className={inputCls}
         />
         {open && filtered.length > 0 && (
-          <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
+          <div className="absolute z-10 mt-1 w-full rounded-lg glass-menu shadow-xl overflow-hidden">
             {filtered.map((u) => (
               <button
                 key={u.id}
@@ -110,7 +110,7 @@ function LinkRow({ link, onChanged }: { link: ShareLink; onChanged: () => void }
   if (link.expires_at) badges.push(t("downloads.share.expiresOn", { date: new Date(link.expires_at).toLocaleDateString() }));
 
   return (
-    <div className="rounded-lg bg-card/40 p-2.5 space-y-2">
+    <div className="rounded-lg glass-card p-2.5 space-y-2">
       <div className="flex items-center gap-2">
         <Link2 className="w-4 h-4 text-muted shrink-0" />
         <input readOnly value={fullUrl} className="flex-1 min-w-0 bg-transparent text-xs text-muted truncate outline-none" />
diff --git a/frontend/src/components/VideoEditor.tsx b/frontend/src/components/VideoEditor.tsx
index 4a103b5..12433d5 100644
--- a/frontend/src/components/VideoEditor.tsx
+++ b/frontend/src/components/VideoEditor.tsx
@@ -443,7 +443,7 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
 
         {/* selected-segment editor */}
         {sel && (
-          <div className="flex flex-wrap items-center gap-2 text-sm rounded-lg bg-card/40 px-3 py-2">
+          <div className="flex flex-wrap items-center gap-2 text-sm rounded-lg glass-card px-3 py-2">
             <span className="font-medium">{t("editor.segment", { n: selIdx + 1 })}</span>
             <button
               onClick={() => toggleKeep(sel.id)}