better structure

config/eww/Lyrics/eww.scss

@@ -0,0 +1,174 @@
+* {
+  all: unset;
+  transition: 200ms ease-out;
+}
+
+.lyrics-window {
+  background-color: $bg;
+  border-radius: 14px;
+  border: 2px solid $border;
+}
+
+.lyrics-window-single {
+  background-color: rgba(30, 30, 46);
+  border-radius: 14px;
+  border: 2px solid $border;
+}
+
+.lyrics-box {
+  margin: 20px 10px 0 20px;
+  min-width: 500px;
+  min-height: 70px;
+  background-color: $gray-alt;
+  border-radius: 15px;
+  padding: 10px;
+  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
+}
+
+.lyrics-box-single {
+  margin: 5px 0px 5px 10px;
+  min-width: 735px;
+}
+
+.lyrics-text {
+  color: $fg;
+  font-size: 15px;
+  font-family: 'Maple Mono NF CN', 'Maple Mono CN', monospace;
+}
+
+.lyrics-text-single {
+  color: $fg;
+  font-size: 15px;
+  font-family: 'Maple Mono NF CN', 'Maple Mono CN', monospace;
+  min-height: 28px;
+}
+
+.control-box {
+  margin: 20px 10px 0 0;
+  padding: 6px;
+  min-height: 90px;
+}
+
+.offset-minus,
+.offset-reset,
+.offset-plus,
+.offset-clear {
+  padding: 0px 6px;
+  margin: 0px 4px 0px 4px;
+  font-family: 'MesloLGM Nerd Font Mono';
+  font-size: 25px;
+  min-width: 16px;
+}
+
+.offset-minus-single,
+.offset-plus-single,
+.offset-reset-single,
+.info-single {
+  padding: 0px 6px;
+  margin: 0;
+  font-family: 'MesloLGM Nerd Font Mono';
+  font-size: 20px;
+  min-width: 16px;
+}
+
+.offset-minus,
+.offset-minus-single {
+  color: $blue;
+}
+
+.offset-plus,
+.offset-plus-single {
+  color: $yellow;
+}
+
+.offset-reset,
+.offset-reset-single {
+  color: $green;
+}
+
+.offset-clear {
+  color: $red;
+}
+
+.info-single {
+  color: $cyan;
+}
+
+.offset-minus:hover,
+.offset-reset:hover,
+.offset-plus:hover,
+.offset-clear:hover,
+.offset-minus-single:hover,
+.offset-plus-single:hover,
+.offset-reset-single:hover,
+.lyrics-info:hover,
+.info-single:hover,
+.player-prev:hover,
+.player-next:hover,
+.player-pp:hover {
+  color: $fg;
+}
+
+.player-music-slider-box {
+  padding: 12px;
+  margin: 10px 0 20px 20px;
+  border-radius: 15px;
+  background-color: $gray-alt;
+  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
+  min-height: 16px;
+}
+
+.player-music-slider trough {
+  background-color: $gray;
+}
+
+.player-music-slider highlight {
+  background-color: $border;
+  padding: 3px;
+}
+
+.player-music-slider {
+  min-width: 200px;
+}
+
+.player-controls-box {
+  margin: 10px 0 20px 20px;
+}
+
+.player-pp,
+.player-next,
+.player-prev,
+.lyrics-info {
+  padding: 0px 6px;
+  margin: 0px 4px 0px 4px;
+  font-family: 'MesloLGM Nerd Font Mono';
+  font-size: 25px;
+  min-width: 16px;
+  color: $fg-alt;
+}
+
+.lyrics-info {
+  color: $cyan;
+}
+
+.offset-box {
+  padding: 11px;
+  margin: 10px 20px 20px 10px;
+  border-radius: 15px;
+  // background-color: $gray-alt;
+  // box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
+}
+
+.offset-label {
+  color: $fg-alt;
+  font-size: 15px;
+  font-family: 'Maple Mono NF CN', 'Maple Mono CN', monospace;
+  margin-right: 10px;
+}
+
+.offset-value {
+  color: $fg;
+  font-size: 15px;
+  font-family: 'Maple Mono NF CN', 'Maple Mono CN', monospace;
+  margin-right: 10px;
+}

config/eww/Lyrics/eww.yuck

@@ -0,0 +1,95 @@
+(defpoll lyriclines :interval "500ms" "spotify-lyrics print -l 3 -a 1 -f \"$HOME/.local/state/eww/lyrics/offset\" | Lyrics/scripts/colorize.sh 2")
+(deflisten lyricline "spotify-lyrics listen -l 1 -f \"$HOME/.local/state/eww/lyrics/offset\"")
+(defpoll position :interval "1s" "spotify-lyrics position")
+(defpoll length :interval "1s" "spotify-lyrics length")
+(defpoll offset :interval "1s" "cat $HOME/.local/state/eww/lyrics/offset")
+(defpoll play-button :interval "1s" "if spotify-lyrics status; then echo \"󰏤\"; else echo \"󰐊\"; fi")
+(defvar hover false)
+
+(defwidget lyrics []
+  (box :class "lyrics-window" :space-evenly "false" :orientation "v"
+    (box :class "lyrics-container" :space-evenly "false" :orientation "h"
+      (box :class "lyrics-box" :vexpand "false" :hexpand "false" :valign "center" :space-evenly "true" :orientation "v"
+        (label :class "lyrics-text"
+               :vexpand "false" :hexpand "false" :space-evenly "false"
+               :halign "start"
+               :unindent "false" :truncate "false" :truncate-left "false"
+               :markup lyriclines
+        )
+      )
+      (box :class "control-box" :vexpand "false" :hexpand "false" :space-evenly "true" :orientation "v"
+        (box :class "control-row-1" :space-evenly "false" :orientation "h"
+          (button :class "offset-plus" :onclick "Lyrics/scripts/lyric-offset.py +500" "󰾆")
+          (button :class "offset-minus" :onclick "Lyrics/scripts/lyric-offset.py -500" "󰓅")
+        )
+        (box :class "control-row-1" :space-evenly "false" :orientation "h"
+          (button :class "offset-reset" :onclick "Lyrics/scripts/lyric-offset.py" "󰾅")
+          (button :class "offset-clear" :onclick "Lyrics/scripts/lyric-clear.sh $(spotify-lyrics trackid)" "󰑙")
+        )
+      )
+    )
+    (box :class "player-controls" :space-evenly "false" :orientation "h"
+      (box :class "player-music-slider-box"
+           :vexpand "false" :hexpand "false" :valign "center" :space-evenly "false" :orientation "h"
+        (eventbox :onhover "eww update hover=true"
+                :onhoverlost "eww update hover=false"
+                :cursor "pointer"
+                :space-evenly "false"
+          (scale :orientation "h" :class "player-music-slider"
+                :min 0 :max length :value position
+                :onchange { hover ? "spotify-lyrics set-position {}" : "" })
+        )
+      )
+      (box :class "player-controls-box"
+           :vexpand "false" :hexpand "false" :valign "center" :space-evenly "false" :orientation "h"
+        (button :class "player-prev" :onclick "playerctl previous --player=spotify" "󰒮")
+        (button :class "player-pp" :onclick "playerctl play-pause --player=spotify" "${play-button}")
+        (button :class "player-next" :onclick "playerctl next --player=spotify" "󰒭")
+        (button :class "lyrics-info" :onclick "ghostty -e sh -c 'spotify-lyrics fetch | less' &" "")
+      )
+      (box :class "offset-box"
+            :vexpand "false" :hexpand "true" :valign "center" :halign "center" :space-evenly "false" :orientation "h"
+          (label :class "offset-label" :text "Offset (ms): ")
+          (label :class "offset-value" :text offset)
+      )
+    )
+  )
+)
+
+(defwidget lyrics-single []
+  (box :class "lyrics-window-single" :space-evenly "false" :orientation "h"
+    (box :class "lyrics-box-single"
+         :vexpand "false" :hexpand "false"
+         :valign "center" :space-evenly "false" :orientation "v"
+      (label :class "lyrics-text-single"
+             :vexpand "false" :hexpand "false" :space-evenly "false"
+             :halign "start"
+             :text lyricline
+      )
+    )
+    (box :class "control-box-single" :vexpand "false" :hexpand "false" :space-evenly "true" :orientation "v"
+      (box :class "control-row-1-single" :space-evenly "false" :orientation "h"
+        (button :class "info-single" :onclick "ghostty -e sh -c 'spotify-lyrics fetch | less' &" "")
+        (button :class "offset-plus-single" :onclick "Lyrics/scripts/lyric-offset.py +500" "󰾆")
+        (button :class "offset-reset-single" :onclick "Lyrics/scripts/lyric-offset.py" "󰾅")
+        (button :class "offset-minus-single" :onclick "Lyrics/scripts/lyric-offset.py -500" "󰓅")
+      )
+    )
+  )
+)
+
+(defwindow lyrics
+    :windowtype "normal"
+    :wm-ignore true
+    :monitor 0
+    :geometry (geometry :anchor "top center")
+    (lyrics)
+)
+
+(defwindow lyrics-single
+    :windowtype "normal"
+    :wm-ignore true
+    :monitor 0
+    :geometry (geometry :x 1108 :y -45)
+    (lyrics-single)
+)

config/eww/Lyrics/scripts/colorize.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+
+HIGHLIGHT_COLOR="#cdd6f4" # text
+NORMAL_COLOR="#7f849c" # overlay1
+TARGET_LINE=1
+[ -n "$1" ] && TARGET_LINE="$1"
+
+mapfile -t lines
+
+output=""
+for i in "${!lines[@]}"; do
+    line_num=$((i + 1))
+    escaped_line=$(echo "${lines[$i]}" | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g')
+
+    [[ $i -gt 0 ]] && output+=$'\n' # +="\n" is not properly displayed in eww
+
+    if [[ $line_num -eq $TARGET_LINE ]]; then
+        output+="<span color=\"$HIGHLIGHT_COLOR\">$escaped_line</span>"
+    else
+        output+="<span color=\"$NORMAL_COLOR\">$escaped_line</span>"
+    fi
+done
+
+echo "$output"

config/eww/Lyrics/scripts/lyric-clear.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+if [ -z "$1" ]; then
+    "spotify-lyrics" clear
+    notify-send -a "spotify-lyrics" "Cache Cleared" "Lyrics cache have been cleared."
+else
+    "spotify-lyrics" clear "$1"
+    notify-send -a "spotify-lyrics" "Cache Cleared" "Lyrics cache for track $1 have been cleared."
+fi

config/eww/Lyrics/scripts/lyric-offset.py

@@ -0,0 +1,45 @@
+#!/usr/bin/env python3
+
+APP_NAME = "spotify-lyrics"
+STATE_DIR_NAME = "~/.local/state/eww/lyrics"
+STATE_FILE_NAME = "offset"
+
+
+def notify_send(title, message):
+    import subprocess
+    subprocess.run(["notify-send", "-t", "1000", "-a", APP_NAME, title, message], check=True)
+
+
+def main():
+    import sys
+    import os
+
+    state_dir = os.path.expanduser(STATE_DIR_NAME)
+    if not os.path.exists(state_dir):
+        os.makedirs(state_dir)
+
+    offset_file = os.path.join(state_dir, STATE_FILE_NAME)
+    if not os.path.exists(offset_file):
+        with open(offset_file, "w") as f:
+            f.write("0")
+
+    if len(sys.argv) < 2:
+        new_offset = 0
+    else:
+        try:
+            increment = int(sys.argv[1])
+            with open(offset_file, "r") as f:
+                current_offset = int(f.read().strip())
+            new_offset = current_offset + increment
+        except ValueError:
+            print("Invalid input. Please provide an integer value.")
+            return
+
+    with open(offset_file, "w") as f:
+        f.write(str(new_offset))
+
+    notify_send("Lyrics Speed Changed", f"The offset has been changed to {new_offset} ms.")
+
+
+if __name__ == "__main__":
+    main()

config/eww/Lyrics/scripts/lyric-show.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+