feat(slint): new now-playing bar layout
Land the "New" now-playing bar as the first of the four switchable layouts. A dedicated SongCard component holds the cover (or an idle sleeping cat), the elidable title, the artist·album links, and the vertical audio stamp (compact quality badge over the backend/mode LEDs). A full-width seek bar sits on top with a buffer-driven stream lock. The controls row uses responsive symmetric column zones (39/30/25% by window width); the side columns share one fraction so the transport stays absolutely centred and PLAY lands on the window centre. The song-card / controls divider is a hard wall: the text column stretches to push the audio stamp to its right edge, the album elides first (and never collapses to zero) so the stamp is always visible and never crosses the wall. Adds QualityBadgeFull compact mode, backend/mode output LED labels from settings, a global TooltipOverlay so clipped columns keep their tooltips, and the supporting icons. cc
This commit is contained in:
15 files changed
+1442
-168
No files matched your search
@@ -0,0 +1,18 @@
|
||||
<!-- @license lucide-static v1.17.0 - ISC -->
|
||||
<svg
|
||||
class="lucide lucide-cat"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z" />
|
||||
<path d="M8 14v.5" />
|
||||
<path d="M16 14v.5" />
|
||||
<path d="M11.25 16.25h1.5L12 17l-.75-.75Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 606 B |
@@ -0,0 +1,17 @@
|
||||
<!-- @license lucide-static v1.17.0 - ISC -->
|
||||
<svg
|
||||
class="lucide lucide-mic-vocal"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m11 7.601-5.994 8.19a1 1 0 0 0 .1 1.298l.817.818a1 1 0 0 0 1.314.087L15.09 12" />
|
||||
<path d="M16.5 21.174C15.5 20.5 14.372 20 13 20c-2.058 0-3.928 2.356-6 2-2.072-.356-2.775-3.369-1.5-4.5" />
|
||||
<circle cx="16" cy="7" r="5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 520 B |
@@ -0,0 +1,19 @@
|
||||
<!-- @license lucide-static v1.17.0 - ISC -->
|
||||
<svg
|
||||
class="lucide lucide-monitor-speaker"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5.5 20H8" />
|
||||
<path d="M17 9h.01" />
|
||||
<rect width="10" height="16" x="12" y="4" rx="2" />
|
||||
<path d="M8 6H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h4" />
|
||||
<circle cx="17" cy="15" r="1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 482 B |
@@ -0,0 +1,18 @@
|
||||
<!-- @license lucide-static v1.17.0 - ISC -->
|
||||
<svg
|
||||
class="lucide lucide-settings-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M14 17H5" />
|
||||
<path d="M19 7h-9" />
|
||||
<circle cx="17" cy="17" r="3" />
|
||||
<circle cx="7" cy="7" r="3" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 400 B |
Reference in new issue
Block a user