fix #69 and improve playbar album hover

CHANGELOG.md

@@ -5,8 +5,9 @@ Added:
 
 Fixed:
 - Some sidebar items hawing wrong width on hover [(this)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/87#issuecomment-954305428)
+- Broken sidebar hover effect with unsticked items (#69)
 - `Sidebar config` buttons being below the text
-- Fix #87 by not showing the playing indicator above "Liked Songs"
+- "Liked Songs" having an playing indicator wich looks bad (#87)
 - Queue icon is hidden (#73) (Temporary until a better solution is found)
 - Playbar album name is now white again
 

src/js/main.js

@@ -597,8 +597,9 @@ async function songchange() {
 
     if (!document.getElementById("main-trackInfo-year")) {
         const el = document.createElement("div");
+        el.classList.add("main-trackInfo-release", "standalone-ellipsis-one-line", "main-type-finale");
+        el.setAttribute("as", "div");
         el.id = "main-trackInfo-year";
-        el.classList.add("main-trackInfo-release", "ellipsis-one-line", "main-type-finale");
         document.querySelector(".main-trackInfo-container").append(el);
     }
     const albumInfoSpan = document.getElementById("main-trackInfo-year");
@@ -614,8 +615,15 @@ async function songchange() {
     if (album_uri !== undefined && !album_uri.includes("spotify:show")) {
         moment.locale(Spicetify.Locale.getLocale());
         const albumDate = moment(await getAlbumRelease(album_uri.replace("spotify:album:", "")));
-        const albumLink = `<a title="${Spicetify.Player.data.track.metadata.album_title}" href="${album_uri}" data-uri="${album_uri}" data-interaction-target="album-name" class="tl-cell__content">${Spicetify.Player.data.track.metadata.album_title}</a>`;
-        albumInfoSpan.innerHTML = `${albumLink} • ${albumDate.format(moment().diff(albumDate, "months") <= 6 ? "MMM YYYY" : "YYYY")}`;
+        const albumLinkElem = `
+            <span>
+                <span draggable="true">
+                    <a draggable="false" dir="auto" href="${album_uri}">${Spicetify.Player.data.track.metadata.album_title}</a>
+                </span>
+            </span>
+        `;
+        const albumDateElem = `<span> • <span>${albumDate.format(moment().diff(albumDate, "months") <= 6 ? "MMM YYYY" : "YYYY")}</span></span>`;
+        albumInfoSpan.innerHTML = `${albumLinkElem}${albumDateElem}`;
     } else if (Spicetify.Player.data.track.uri.includes("spotify:episode")) {
         // podcast
         bgImage = bgImage.replace("spotify:image:", "https://i.scdn.co/image/");

src/styles/main.scss

@@ -433,7 +433,8 @@ html {
 }
 
 #spicetify-show-list > * {
-    padding: 0 8px;
+    padding: 0px;
+    margin: 0px 8px;
 }
 
 .main-rootlist-statusIcons {
@@ -679,8 +680,14 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
     font-weight: 500;
 }
 
-.main-trackInfo-release > a {
+.main-trackInfo-release a {
     color: var(--spice-subtext);
+
+    &:hover,
+    &:active,
+    &:focus {
+        color: var(--spice-text);
+    }
 }
 
 .main-topBar-topbarContent .main-playButton-PlayButton {