fix(app): Fix music block and added playing now model

static/css/style.css

@@ -711,33 +711,60 @@ img.card-icon { border-radius: 12px; }
     border: 1px solid rgba(94, 234, 212, .3);
 }
 
-.ym-tabs {
+.ym-now {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 14px 16px;
+    margin-bottom: 16px;
+    border: 1px solid rgba(94, 234, 212, .25);
+    border-radius: 12px;
+    background: linear-gradient(120deg, rgba(94, 234, 212, .07), rgba(255, 255, 255, .02));
+    flex-wrap: wrap;
+}
+
+.ym-now-label {
     display: inline-flex;
-    gap: 4px;
-    padding: 3px;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, .04);
-    border: 1px solid var(--card-border);
-}
-
-.ym-tab {
+    align-items: center;
+    gap: 7px;
     font-family: var(--mono);
-    font-size: .72rem;
-    letter-spacing: .06em;
-    padding: 5px 14px;
-    border-radius: 999px;
-    border: none;
-    background: transparent;
-    color: var(--muted);
-    cursor: pointer;
-    transition: color .2s, background .2s;
+    font-size: .68rem;
+    letter-spacing: .14em;
+    text-transform: uppercase;
+    color: var(--accent);
+    flex-shrink: 0;
 }
 
-.ym-tab:hover { color: var(--text); }
+.ym-now-body { min-width: 0; }
 
-.ym-tab.active {
-    background: rgba(94, 234, 212, .12);
-    color: var(--accent);
+.ym-now-link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
+}
+
+a.ym-now-link:hover .ym-track-title { color: var(--accent); }
+
+.ym-now-cover {
+    width: 72px;
+    height: 72px;
+    border-radius: 8px;
+    object-fit: cover;
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, .06);
+}
+
+.ym-now-cover.ym-cover-empty { font-size: 1.5rem; }
+
+.ym-now-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+
+.ym-now-idle {
+    font-family: var(--mono);
+    font-size: .8rem;
+    color: var(--muted);
 }
 
 .ym-meta {