style(eww): revamp mpd player widget design and animations

.config/eww/eww.scss

@@ -67,13 +67,19 @@
     box-shadow: none;
     padding: 0;
     margin: 0;
+    transition: all 0.15s ease;
 }
 
 .player-shape-btn:hover {
     /* GTK's default button hover would paint a rectangle behind the
        SVG, reintroducing exactly the shape this design avoids. */
     background-color: transparent;
     background-image: none;
+    opacity: 0.85;
+}
+
+.player-shape-btn:active {
+    opacity: 0.6;
 }
 
 /* Defines the collapsed state's overall footprint (it is the overlay's
@@ -85,8 +91,8 @@
    top-left, and the triangle's lower tip ends at ~18px. */
 .player-collapsed-sizer {
     background-color: transparent;
-    min-width: 72px;
-    min-height: 72px;
+    min-width: 68px;
+    min-height: 68px;
 }
 
 /* The separate expand triangle -- no negative margin: it is positioned
@@ -99,11 +105,14 @@
     box-shadow: none;
     padding: 0;
     margin: 0;
+    border-radius: 50%;
+    transition: all 0.2s ease;
 }
 
 .player-expand-arrow:hover {
-    background-color: transparent;
+    background-color: rgba(0, 162, 255, 0.15);
     background-image: none;
+    box-shadow: 0 0 12px 4px rgba(0, 162, 255, 0.4);
 }
 
 /* Expanded state: a taller card. */
@@ -147,6 +156,8 @@
     padding: 2px 8px;
     margin: 0 2px;
     border-radius: 6px;
+    min-width: 20px;
+    min-height: 20px;
 }
 
 .mpd-btn:hover {
@@ -165,3 +176,4 @@
     color: #ffffff;
     background-color: rgba(255, 255, 255, 0.15);
 }
+@import "mpd-dashboard";

.config/eww/eww.yuck

@@ -1,3 +1,4 @@
+(include "./mpd-dashboard.yuck")
 ;; Lyrics scroll widget -- pinned always-on-top overlay showing the
 ;; current synced (.lrc) lyrics line with 1 line of context above and 2
 ;; below, sourced from "mpdtui -lyrics-line" via scripts/lyrics-listen.sh
@@ -44,13 +45,14 @@
   :geometry (geometry :x "0%" :y "4%" :width "620px" :height "1px" :anchor "top center")
   :stacking "fg"
   :windowtype "normal"
+
   (lyrics-widget))
 
 ;; Collapsible player, bottom-right. "mpc toggle" flips play<->pause in
 ;; one command (matches every real media player's own single toggle
 ;; button rather than separate always-visible Play/Pause buttons, which
 ;; would be redundant given the state is already known).
-(deflisten mpd_status :initial "{\"state\": \"stop\", \"artist\": \"\", \"title\": \"\", \"albumart\": \"/tmp/eww-mpd-albumart-placeholder.png\"}"
+(deflisten mpd_status :initial "{\"state\": \"stop\", \"artist\": \"\", \"title\": \"\", \"albumart\": \"/tmp/eww-mpd-albumart-placeholder.png\", \"year\": \"\", \"composer\": \"\", \"queue_length\": \"0\"}"
   "~/.config/eww/scripts/mpd-player-status.sh")
 
 ;; Shared across both monitor instances (not per-window/[win-id]-scoped
@@ -87,7 +89,7 @@
     ;; :visible false drops the widget from allocation entirely; the
     ;; revealer inside it still provides the reveal animation.
     (box :visible {!player_expanded}
-      (revealer :transition "crossfade" :duration "250ms" :reveal {!player_expanded}
+      (revealer :transition "slideup" :duration "250ms" :reveal {!player_expanded}
         ;; The sizer is the overlay's first (size-determining) child:
         ;; a bit larger than the 64px circle, so the arrow can sit in
         ;; the empty upper-left corner *outside* the circle's arc
@@ -106,19 +108,11 @@
             (image :path "${player_assets}/player-expand.svg"
                    :image-width 20 :image-height 20)))))
 
-    ;; Expanded: a taller card -- album art, title, artist, the same
-    ;; toggle/stop pair, plus collapse (back to the circle) and close
-    ;; (this instance only, see win-id above) in the corner.
+    ;; Expanded: the new massive dashboard
     (box :visible {player_expanded}
-      (revealer :transition "crossfade" :duration "300ms" :reveal {player_expanded}
+      (revealer :transition "slideup" :duration "300ms" :reveal {player_expanded}
         (overlay
-          (box :orientation "v" :space-evenly false :halign "center" :class "player-card"
-            (image :class "player-albumart" :path {mpd_status.albumart} :image-width 120 :image-height 120)
-            (label :class "player-title" :text {mpd_status.title == "" ? "Nothing playing" : mpd_status.title} :limit-width 28)
-            (label :class "player-artist" :text {mpd_status.artist} :limit-width 28)
-            (box :orientation "h" :space-evenly false :halign "center" :class "player-controls"
-              (button :class "mpd-btn" :onclick "mpc toggle" {mpd_status.state == "playing" ? "⏸" : "▶"})
-              (button :class "mpd-btn" :onclick "mpc stop" "⏹")))
+          (mpd-dashboard-widget)
           (box :orientation "h" :halign "end" :valign "start" :class "player-card-actions"
             (button :class "mpd-close" :onclick "eww update player_expanded=false" "⌄")
             (button :class "mpd-close" :onclick "eww close ${win-id}" "✕")))))))
@@ -131,7 +125,8 @@
   ;; different widths too, not just heights, and a fixed width would
   ;; leave the small circle floating in the middle of reserved space
   ;; instead of flush against the corner.
-  :geometry (geometry :x "5px" :y "15px" :width "1px" :height "1px" :anchor "bottom right")
+  :geometry (geometry :x "10px" :y "15px" :width "1px" :height "1px" :anchor "bottom right")
   :stacking "fg"
   :windowtype "normal"
+  :focusable true
   (mpd-player-widget :win-id win-id))

.config/eww/mpd-dashboard.scss

@@ -0,0 +1,217 @@
+.dashboard-container {
+    background-color: rgba(20, 20, 20, 0.95);
+    border-radius: 12px;
+    padding: 20px;
+    color: #ffffff;
+    font-family: "DejaVu Sans", sans-serif;
+    min-height: 450px;
+    min-width: 950px;
+}
+
+.dashboard-left {
+    padding-right: 20px;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.dashboard-now-playing {
+    margin-bottom: 20px;
+}
+
+.dashboard-albumart {
+    border-radius: 8px;
+    margin-right: 15px;
+}
+
+.dashboard-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.dashboard-album, .dashboard-year, .dashboard-composer {
+    font-size: 13px;
+    color: #aaaaaa;
+    margin-bottom: 2px;
+}
+
+.dashboard-controls {
+    margin-top: 10px;
+}
+
+.dashboard-progress-container {
+    margin-top: 15px;
+    margin-bottom: 5px;
+    padding-right: 15px;
+}
+
+.dashboard-time {
+    font-size: 11px;
+    color: #888888;
+    margin-bottom: 2px;
+}
+
+.dashboard-progress {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.dashboard-progress trough {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    min-height: 4px;
+}
+
+.dashboard-progress highlight {
+    background-color: #00a2ff;
+    border-radius: 4px;
+}
+
+.dashboard-lyrics {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    padding: 10px;
+}
+
+.dashboard-lyrics-title {
+    font-weight: bold;
+    color: #888;
+    margin-bottom: 10px;
+    font-size: 12px;
+}
+
+.dashboard-lyrics-content label {
+    margin-bottom: 4px;
+}
+
+.dashboard-lyrics-current {
+    color: #ffe66d;
+    font-weight: bold;
+}
+
+.dashboard-right {
+    padding-left: 20px;
+}
+
+.dashboard-search-bar {
+    margin-bottom: 15px;
+    margin-right: 70px;
+}
+
+.dashboard-search-input {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+    padding: 8px 12px;
+    color: white;
+    border: 1px solid transparent;
+}
+
+.dashboard-search-input:focus {
+    border: 1px solid #00a2ff;
+}
+
+.dashboard-search-btn {
+    background-color: #00a2ff;
+    color: white;
+    border-radius: 6px;
+    padding: 6px 16px;
+    margin-left: 10px;
+    font-weight: bold;
+}
+
+.dashboard-filters {
+    margin-bottom: 20px;
+}
+
+.dashboard-filter, .dashboard-filter-active {
+    padding: 6px 16px;
+    border-radius: 20px;
+    margin: 0 5px;
+    font-size: 13px;
+    background-color: rgba(255, 255, 255, 0.05);
+    transition: all 0.2s ease;
+}
+
+.dashboard-filter:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+.dashboard-filter-active {
+    background-color: #00a2ff;
+    color: white;
+    font-weight: bold;
+}
+
+.dashboard-tab, .dashboard-tab-active {
+    padding: 2px 12px;
+    margin-bottom: 5px;
+    font-size: 11px;
+    transition: all 0.2s ease;
+    border-radius: 12px;
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.dashboard-tab:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+}
+
+.dashboard-tab-active {
+    background-color: #00a2ff;
+    color: white;
+    font-weight: bold;
+}
+
+.dashboard-pagination {
+    margin-top: 10px;
+    font-size: 13px;
+    color: #aaaaaa;
+}
+
+.dashboard-queue {
+    font-size: 13px;
+    color: #888888;
+    margin-left: 15px;
+}
+
+.dashboard-results-list {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    padding: 10px;
+}
+
+.dashboard-track-row {
+    padding: 8px 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.dashboard-track-row:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.dashboard-track-title {
+    font-size: 11px;
+    font-weight: bold;
+    color: #ffffff;
+    margin-bottom: 2px;
+}
+
+.dashboard-track-row .dashboard-album {
+    font-size: 10px;
+    color: #888888;
+}
+
+.dashboard-track-play {
+    color: #25d366;
+    margin-right: 15px;
+    font-size: 14px;
+}
+
+.dashboard-track-add {
+    color: #aaa;
+    font-size: 16px;
+    padding: 0 5px;
+}
+
+.dashboard-track-add:hover {
+    color: white;
+}