From ec22795775802010feec21afb1439a265dcb50cb Mon Sep 17 00:00:00 2001
From: charles <charlesdrani@gmail.com>
Date: Tue, 28 May 2024 16:33:04 -0600
Subject: [PATCH] feat: re-introduce like/unlike ui (#214)

---
 src/actions/init.js                     |   5 +
 src/background.js                       |  63 ++++++---
 src/components/icons/icon.js            |  37 +++++-
 src/content.js                          |   4 +-
 src/models/heart-icon.js                | 162 ++++++++++++++++++++++++
 src/models/loop-icon.js                 |  14 +-
 src/models/now-playing-icons.js         |   8 +-
 src/models/seek/seek-icon.js            |   6 +-
 src/models/snip/current-snip.js         |   4 +-
 src/models/snip/track-snip.js           |   2 +-
 src/models/tracklist/heart-icon.js      | 126 ++++++++++++++++++
 src/models/tracklist/track-list.js      | 111 ++++++++++++++--
 src/models/tracklist/tracklist-icon.js  |   4 +-
 src/observers/now-playing.js            |  10 +-
 src/observers/song-tracker.js           |   2 +-
 src/observers/track-list.js             |   3 +-
 src/services/track.js                   |  30 +++++
 src/stores/cache.js                     |   8 +-
 src/stores/data.js                      |  27 ++++
 src/styles.css                          |  51 ++++----
 src/utils/{higlight.js => highlight.js} |  20 ++-
 src/utils/request.js                    |   7 +-
 src/utils/selectors.js                  |   2 +-
 src/utils/song.js                       |   4 +-
 24 files changed, 615 insertions(+), 95 deletions(-)
 create mode 100644 src/models/heart-icon.js
 create mode 100644 src/models/tracklist/heart-icon.js
 create mode 100644 src/services/track.js
 rename src/utils/{higlight.js => highlight.js} (58%)

diff --git a/src/actions/init.js b/src/actions/init.js
index f11859e0..b0c9a16f 100644
--- a/src/actions/init.js
+++ b/src/actions/init.js
@@ -33,6 +33,11 @@ async function load() {
         sessionStorage.setItem('connection_id', connection_id)
     })
 
+    document.addEventListener('app.now-playing', async (e) => {
+        const now_playing = e.detail['now-playing']
+        sessionStorage.setItem('now-playing', now_playing)
+    })
+
     document.addEventListener('app.auth_token', async (e) => {
         const { auth_token } = e.detail
         sessionStorage.setItem('auth_token', auth_token)
diff --git a/src/background.js b/src/background.js
index 8fc51e14..d0af3a91 100644
--- a/src/background.js
+++ b/src/background.js
@@ -5,19 +5,26 @@ import { activeOpenTab, sendMessage } from './utils/messaging.js'
 import { getQueueList, setQueueList } from './services/queue.js'
 import { createArtistDiscoPlaylist } from './services/artist-disco.js'
 import { playSharedTrack, seekTrackToPosition } from './services/player.js'
+import { checkIfTracksInCollection, updateLikedTracks } from './services/track.js'
 
 let ENABLED = true
 let popupPort = null
 
-async function getUIState({ selector, tabId }) {
-    const result = await chrome.scripting.executeScript({
-        args: [selector],
+async function getUIState({ selector, tabId, delay = 0 }) {
+    const [result] = await chrome.scripting.executeScript({
+        args: [selector, delay],
         target: { tabId },
-        func: (selector) =>
-            document.querySelector(selector)?.getAttribute('aria-label').toLowerCase()
+        func: (selector, delay) =>
+            new Promise((resolve) => {
+                setTimeout(() => {
+                    resolve(
+                        document.querySelector(selector)?.getAttribute('aria-label').toLowerCase()
+                    )
+                }, delay)
+            })
     })
 
-    return result?.at(0).result
+    return result?.result
 }
 
 async function getMediaControlsState(tabId) {
@@ -36,8 +43,9 @@ async function getMediaControlsState(tabId) {
     const promises = selectors.map(
         (selector) =>
             new Promise((resolve) => {
-                if (selector.search(/(loop)|(add-button)/g) < 0)
+                if (selector.search(/(loop)|(heart)/g) < 0) {
                     return resolve(getUIState({ selector, tabId }))
+                }
                 return setTimeout(() => resolve(getUIState({ selector, tabId })), 500)
             })
     )
@@ -67,7 +75,10 @@ chrome.runtime.onConnect.addListener(async (port) => {
         if (message?.type !== 'controls') return
 
         const { selector, tabId } = await executeButtonClick({ command: message.key })
-        const result = await getUIState({ selector, tabId })
+
+        const delay = selector.includes('heart') ? 250 : 0
+        const result = await getUIState({ selector, tabId, delay })
+
         port.postMessage({ type: 'controls', data: { key: message.key, result } })
     })
 
@@ -104,11 +115,12 @@ chrome.storage.onChanged.addListener(async (changes) => {
     updateBadgeState({ changes, changedKey })
 
     if (changedKey == 'now-playing' && ENABLED) {
-        if (!popupPort) return
-
-        const { active, tabId } = await activeOpenTab()
-        active && popupPort.postMessage({ type: changedKey, data: changes[changedKey].newValue })
-        return await setMediaState({ active, tabId })
+        if (popupPort) {
+            const { active, tabId } = await activeOpenTab()
+            active &&
+                popupPort.postMessage({ type: changedKey, data: changes[changedKey].newValue })
+            await setMediaState({ active, tabId })
+        }
     }
 
     const messageValue =
@@ -132,8 +144,25 @@ chrome.webRequest.onBeforeRequest.addListener(
     ['requestBody']
 )
 
+function getTrackId(url) {
+    const query = new URL(url)
+    const params = new URLSearchParams(query.search)
+    const variables = params.get('variables')
+    const uris = JSON.parse(decodeURIComponent(variables)).uris.at(0)
+    return uris.split('track:').at(-1)
+}
+
 chrome.webRequest.onBeforeSendHeaders.addListener(
-    (details) => {
+    async (details) => {
+        if (details.url.includes('areEntitiesInLibrary')) {
+            const nowPlaying = await getState('now-playing')
+            if (!nowPlaying) return
+            if (nowPlaying?.trackId) return
+
+            nowPlaying.trackId = getTrackId(details.url)
+            chrome.storage.local.set({ 'now-playing': nowPlaying })
+        }
+
         const authHeader = details?.requestHeaders?.find(
             (header) => header?.name == 'authorization'
         )
@@ -144,7 +173,8 @@ chrome.webRequest.onBeforeSendHeaders.addListener(
     {
         urls: [
             'https://api.spotify.com/*',
-            'https://guc3-spclient.spotify.com/track-playback/v1/devices'
+            'https://guc3-spclient.spotify.com/track-playback/v1/devices',
+            'https://api-partner.spotify.com/pathfinder/v1/query?operationName=areEntitiesInLibrary*'
         ]
     },
     ['requestHeaders']
@@ -162,8 +192,11 @@ chrome.runtime.onMessage.addListener(({ key, values }, _, sendResponse) => {
         'queue.get': getQueueList,
         'play.shared': playSharedTrack,
         'play.seek': seekTrackToPosition,
+        'tracks.update': updateLikedTracks,
+        'tracks.liked': checkIfTracksInCollection,
         'artist.disco': createArtistDiscoPlaylist
     }
+
     const handlerFn = messageHandler[key]
     handlerFn
         ? promiseHandler(handlerFn(values), sendResponse)
diff --git a/src/components/icons/icon.js b/src/components/icons/icon.js
index 646e4380..e16f3f56 100644
--- a/src/components/icons/icon.js
+++ b/src/components/icons/icon.js
@@ -23,7 +23,24 @@ export const NOW_PLAYING_SKIP_ICON = {
     id: 'chorus-skip'
 }
 
+export const TRACK_HEART = {
+    lw: 22,
+    role: 'heart',
+    ariaLabel: 'Like Song',
+    stroke: 'currentColor',
+    fill: 'none',
+    viewBox: '-5 -4 24 24'
+}
+
+export const HEART_ICON = {
+    id: 'chorus-heart',
+    ...TRACK_HEART
+}
+
 const SVG_PATHS = {
+    heart: `
+        <path role="heart" d="M15.724 4.22A4.313 4.313 0 0 0 12.192.814a4.269 4.269 0 0 0-3.622 1.13.837.837 0 0 1-1.14 0 4.272 4.272 0 0 0-6.21 5.855l5.916 7.05a1.128 1.128 0 0 0 1.727 0l5.916-7.05a4.228 4.228 0 0 0 .945-3.577z"/>
+    `,
     skip: `
         <path role="skip" fill-rule="evenodd"
               d="M5.965 4.904l9.131 9.131a6.5 6.5 0 00-9.131-9.131zm8.07 10.192L4.904 5.965a6.5 6.5 0 009.131 9.131zM4.343 4.343a8 8 0 1111.314 11.314A8 8 0 014.343 4.343z" clip-rule="evenodd"
@@ -43,10 +60,20 @@ const BUTTON_STYLES = {
         'visibility:hidden;border:none;background:unset;display:flex;align-items:center;cursor:pointer;'
 }
 
-export const createIcon = ({ role, viewBox, id, ariaLabel, strokeWidth, stroke }) => {
+export const createIcon = ({
+    role,
+    viewBox,
+    id,
+    ariaLabel,
+    strokeWidth,
+    stroke,
+    fill = 'currentColor',
+    lw = '1.25rem'
+}) => {
     const svgPath = SVG_PATHS[role] || SVG_PATHS.default
     const buttonStylesKey = id ? 'settings' : 'default'
-    const buttonStyles = BUTTON_STYLES[buttonStylesKey]
+    let buttonStyles = BUTTON_STYLES[buttonStylesKey]
+    if (role == 'skip' && !id) buttonStyles += 'padding-right: 4px;'
 
     return `
         <button 
@@ -59,9 +86,9 @@ export const createIcon = ({ role, viewBox, id, ariaLabel, strokeWidth, stroke }
         >
             <svg
                 role="${role}"
-                width="1.25rem"
-                height="1.25rem"
-                fill="currentColor"
+                width="${lw}"
+                height="${lw}"
+                fill="${fill}"
                 stroke="${stroke || ''}"
                 stroke-width="${strokeWidth || 1.5}"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/src/content.js b/src/content.js
index d6a75f9d..79257db2 100644
--- a/src/content.js
+++ b/src/content.js
@@ -33,6 +33,8 @@ window.addEventListener('message', async (event) => {
         'queue.set': sendBackgroundMessage,
         'queue.get': sendBackgroundMessage,
         'artist.disco': sendBackgroundMessage,
+        'tracks.liked': sendBackgroundMessage,
+        'tracks.update': sendBackgroundMessage,
         'storage.populate': () => getState(null),
         'storage.get': ({ key }) => getState(key),
         'storage.delete': ({ key }) => removeState(key),
@@ -49,7 +51,7 @@ window.addEventListener('message', async (event) => {
 chrome.runtime.onMessage.addListener((message) => {
     const messageKey = Object.keys(message)
     const changedKey = messageKey.find((key) =>
-        ['connection_id', 'enabled', 'auth_token', 'device_id'].includes(key)
+        ['now-playing', 'connection_id', 'enabled', 'auth_token', 'device_id'].includes(key)
     )
 
     if (!changedKey) return
diff --git a/src/models/heart-icon.js b/src/models/heart-icon.js
new file mode 100644
index 00000000..b704a6c6
--- /dev/null
+++ b/src/models/heart-icon.js
@@ -0,0 +1,162 @@
+import { parseNodeString } from '../utils/parser.js'
+import { highlightIconTimer } from '../utils/highlight.js'
+
+import { store } from '../stores/data.js'
+import Dispatcher from '../events/dispatcher.js'
+import { currentData } from '../data/current.js'
+import { createIcon, HEART_ICON } from '../components/icons/icon.js'
+
+export default class HeartIcon {
+    constructor() {
+        this._id = null
+        this._dispatcher = new Dispatcher()
+    }
+
+    init() {
+        this.#placeIcon()
+        this.#setupListener()
+    }
+
+    removeIcon() {
+        this.#heartIcon?.remove()
+        this.#toggleNowPlayingButton(true)
+    }
+
+    #placeIcon() {
+        const heartButton = parseNodeString(this.#createHeartIcon)
+        const refNode = this.#nowPlayingButton
+        refNode.parentElement.insertBefore(heartButton, refNode)
+        this.#toggleNowPlayingButton(false)
+    }
+
+    #toggleNowPlayingButton(show) {
+        const button = this.#nowPlayingButton
+        button.style.visibility = show ? 'visible' : 'hidden'
+        button.style.padding = show ? '0.5rem' : 0
+        button.style.width = show ? '1rem' : 0
+    }
+
+    get #createHeartIcon() {
+        return createIcon(HEART_ICON)
+    }
+
+    get #heartIcon() {
+        return document.querySelector('#chorus-heart')
+    }
+
+    #setupListener() {
+        this.#heartIcon?.addEventListener('click', async () => this.#handleClick())
+    }
+
+    async #dispatchIsInCollection(ids) {
+        return await this._dispatcher.sendEvent({
+            eventType: 'tracks.liked',
+            detail: { key: 'tracks.liked', values: { ids } }
+        })
+    }
+
+    async #dispatchLikedTracks() {
+        const method = (await this.#isHeartIconHighlighted()) ? 'DELETE' : 'PUT'
+        const { trackId: id } = await currentData.readTrack()
+
+        await this._dispatcher.sendEvent({
+            eventType: 'tracks.update',
+            detail: { key: 'tracks.update', values: { id, method } }
+        })
+
+        return method == 'PUT'
+    }
+
+    async #handleClick() {
+        const highlight = await this.#dispatchLikedTracks()
+        this.highlightIcon(highlight)
+    }
+
+    get #nowPlayingButton() {
+        return document.querySelector(
+            'div[data-testid="now-playing-widget"] > button[data-encore-id="buttonTertiary"]'
+        )
+    }
+
+    get #isSpotifyHighlighted() {
+        const button = this.#nowPlayingButton
+        if (!button) return false
+
+        return JSON.parse(button.getAttribute('aria-checked'))
+    }
+
+    async #isHeartIconHighlighted() {
+        const trackState = store.checkInCollection(this._id)
+        if (trackState !== null) return trackState
+
+        // If Spotify does not mark is 'curated', then it's not in ANY of user's playlists
+        if (!this.#isSpotifyHighlighted) {
+            store.saveInCollection({ id: this._id, saved: false })
+            return false
+        }
+
+        return this.#heartIcon.firstElementChild.getAttribute('fill') != 'unset'
+    }
+
+    async #getIsTrackLiked() {
+        if (!this._id) return false
+
+        const trackState = store.checkInCollection(this._id)
+        if (trackState !== null) return trackState
+
+        const response = await this.#dispatchIsInCollection(this._id)
+
+        const saved = response?.data?.at(0)
+        store.saveInCollection({ id: this._id, saved })
+        return saved
+    }
+
+    async highlightIcon(highlight) {
+        this._id = null
+        const { trackId } = await currentData.readTrack()
+        this._id = trackId
+
+        const shouldUpdate = highlight ?? (await this.#getIsTrackLiked())
+
+        highlightIconTimer({
+            fill: true,
+            highlight: shouldUpdate,
+            selector: '#chorus-heart > svg'
+        })
+
+        this.#updateIconLabel(shouldUpdate)
+        store.saveInCollection({ id: this._id, saved: shouldUpdate })
+        this.#highlightInTracklist(shouldUpdate)
+    }
+
+    #highlightInTracklist(highlight) {
+        if (!this._id) return
+
+        const anchors = document.querySelectorAll(
+            `a[data-testid="internal-track-link"][href="/track/${this._id}"]`
+        )
+        if (!anchors?.length) return
+
+        anchors.forEach((anchor) => {
+            const trackRow = anchor?.parentElement?.parentElement?.parentElement
+            if (!trackRow) return
+
+            const heartIcon = trackRow.querySelector('button[role="heart"]')
+            if (!heartIcon) return
+
+            const svg = heartIcon.querySelector('svg')
+            if (!svg) return
+
+            heartIcon.style.visibility = highlight ? 'visible' : 'hidden'
+
+            heartIcon.setAttribute('aria-label', `${highlight ? 'Remove from' : 'Save to'} Liked`)
+            svg.style.fill = highlight ? '#1ed760' : 'transparent'
+            svg.style.stroke = highlight ? '#1ed760' : 'currentColor'
+        })
+    }
+
+    #updateIconLabel(highlight) {
+        const text = `${highlight ? 'Remove from' : 'Save to'} Liked`
+        this.#heartIcon.setAttribute('aria-label', text)
+    }
+}
diff --git a/src/models/loop-icon.js b/src/models/loop-icon.js
index 7cc07bbc..5d8de596 100644
--- a/src/models/loop-icon.js
+++ b/src/models/loop-icon.js
@@ -4,7 +4,7 @@ import { spotifyVideo } from '../actions/overload.js'
 
 import { playback } from '../utils/playback.js'
 import { parseNodeString } from '../utils/parser.js'
-import { highlightLoopIcon } from '../utils/higlight.js'
+import { highlightIcon } from '../utils/highlight.js'
 
 export default class LoopIcon {
     constructor(songTracker) {
@@ -63,14 +63,14 @@ export default class LoopIcon {
         parentElement?.insertBefore(this.#loopButton, parentElement.lastElementChild.nextSibling)
     }
 
-    get #isHiglighted() {
-        const svgIcon = document.getElementById('loop-icon')
+    get #isHighlighted() {
+        const svgIcon =  document.getElementById('loop-icon')
         if (!svgIcon) return false
 
         return svgIcon.getAttribute('fill') == '#1ed760'
     }
 
-    highlightIcon({ isSnip, autoLoop = false }) {
+    highlightLoop({ isSnip, autoLoop = false }) { 
         if (!isSnip && autoLoop) {
             this._video.element.setAttribute('startTime', 0)
             this._video.element.setAttribute('endTime', playback.duration())
@@ -84,7 +84,7 @@ export default class LoopIcon {
             'aria-label',
             autoLoop ? 'Remove Loop' : `Loop ${isSnip ? 'Snip' : 'Track'}`
         )
-        highlightLoopIcon(autoLoop)
+        highlightIcon({ highlight: autoLoop, selector: '#loop-icon' }) 
     }
 
     removeIcon() {
@@ -93,8 +93,8 @@ export default class LoopIcon {
 
     async #handleLoopButton() {
         const track = await currentData.readTrack()
-        const autoLoop = track.isSnip ? !track?.autoLoop : !this.#isHiglighted
-        this.highlightIcon({ isSnip: track.isSnip, autoLoop })
+        const autoLoop = track.isSnip ? !track?.autoLoop : !this.#isHighlighted
+        this.highlightLoop({ isSnip: track.isSnip, autoLoop })
 
         if (!track.isSnip) return
 
diff --git a/src/models/now-playing-icons.js b/src/models/now-playing-icons.js
index 204bc035..586673ab 100644
--- a/src/models/now-playing-icons.js
+++ b/src/models/now-playing-icons.js
@@ -5,7 +5,7 @@ import { SETTINGS_ICON, NOW_PLAYING_SKIP_ICON, createIcon } from '../components/
 
 import { currentSongInfo } from '../utils/song.js'
 import { parseNodeString } from '../utils/parser.js'
-import { highlightElement } from '../utils/higlight.js'
+import { highlightElement } from '../utils/highlight.js'
 
 export default class NowPlayingIcons {
     constructor({ snip, chorus }) {
@@ -72,7 +72,7 @@ export default class NowPlayingIcons {
         skipIcon.addEventListener('click', async () => this.#handleSkipTrack())
     }
 
-    #hightlightTrackListBlock(songStateData) {
+    #highlightTrackListBlock(songStateData) {
         if (!this.#trackRows) return
 
         const title = currentSongInfo()?.id?.split(' by ')?.at(0) || ''
@@ -105,8 +105,8 @@ export default class NowPlayingIcons {
         })
 
         if (updatedValues.isSkipped) {
-            this.#hightlightTrackListBlock(updatedValues)
-            document.querySelector('[data-testid="control-button-skip-forward"]')?.click()
+            this.#highlightTrackListBlock(updatedValues)
+            document.querySelector('[data-testid="control-button-skip-forward"]')?.click()   
         }
     }
 }
diff --git a/src/models/seek/seek-icon.js b/src/models/seek/seek-icon.js
index d4a65c66..9cbf56d4 100644
--- a/src/models/seek/seek-icon.js
+++ b/src/models/seek/seek-icon.js
@@ -126,7 +126,7 @@ export default class SeekIcons {
     }
 
     async #calculateCurrentTime({ role, seekTime }) {
-        const { startTime, endTime } = await songState()
+        const { startTime = 0, endTime = playback.duration() } = await songState()
         let currentTime = parseInt(this._video.currentTime, 10)
         if (currentTime !== playback.current()) currentTime = playback.current()
 
@@ -151,8 +151,8 @@ export default class SeekIcons {
 
         const newTime = await this.#calculateCurrentTime({ role, seekTime })
         this._video.currentTime = newTime
-        document.querySelector('[data-testid="playback-position"]').textContent =
-            secondsToTime(newTime)
+        const position = document.querySelector('[data-testid="playback-position"]')
+        position.textContent = secondsToTime(newTime)
     }
 
     #setupListeners() {
diff --git a/src/models/snip/current-snip.js b/src/models/snip/current-snip.js
index d16efcdc..cff99080 100644
--- a/src/models/snip/current-snip.js
+++ b/src/models/snip/current-snip.js
@@ -4,7 +4,7 @@ import { spotifyVideo } from '../../actions/overload.js'
 
 import { playback } from '../../utils/playback.js'
 import { currentSongInfo } from '../../utils/song.js'
-import { highlightLoopIcon } from '../../utils/higlight.js'
+import { highlightIcon } from '../../utils/highlight.js'
 
 export default class CurrentSnip extends Snip {
     constructor(songTracker) {
@@ -79,7 +79,7 @@ export default class CurrentSnip extends Snip {
 
         this._video.resetTempTimes()
         this.updateView()
-        highlightLoopIcon(result?.autoLoop ?? false)
+        highlightIcon({ highlight: result?.autoLoop ?? false, selector: '#loop-icon' })
         this.skipTrackOnSave(result)
 
         await this._songTracker.updateCurrentSongData(result)
diff --git a/src/models/snip/track-snip.js b/src/models/snip/track-snip.js
index 3e3343f8..ba2917a7 100644
--- a/src/models/snip/track-snip.js
+++ b/src/models/snip/track-snip.js
@@ -1,7 +1,7 @@
 import Snip from './snip.js'
 
 import { trackSongInfo } from '../../utils/song.js'
-import { highlightElement } from '../../utils/higlight.js'
+import { highlightElement } from '../../utils/highlight.js'
 
 export default class TrackSnip extends Snip {
     constructor(store) {
diff --git a/src/models/tracklist/heart-icon.js b/src/models/tracklist/heart-icon.js
new file mode 100644
index 00000000..588c134b
--- /dev/null
+++ b/src/models/tracklist/heart-icon.js
@@ -0,0 +1,126 @@
+import TrackListIcon from './tracklist-icon.js'
+import { TRACK_HEART, createIcon } from '../../components/icons/icon.js'
+
+import { getTrackId } from '../../utils/song.js'
+import Dispatcher from '../../events/dispatcher.js'
+import { currentData } from '../../data/current.js'
+import { highlightIconTimer } from '../../utils/highlight.js'
+
+export default class HeartIcon extends TrackListIcon {
+    constructor(store) {
+        super({
+            store,
+            key: 'isLiked',
+            selector: 'button[role="heart"]'
+        })
+        this._dispatcher = new Dispatcher()
+    }
+
+    get #isOnLikedSongsPage() {
+        return location.pathname == '/collection/tracks'
+    }
+
+    #isLiked(row) {
+        if (this.#isOnLikedSongsPage) return true
+
+        if (row.getAttribute('data-testid') != 'tracklist-row') return false
+
+        const { trackId = null } = getTrackId(row)
+        if (!trackId) return false
+
+        return !!this._store.checkInCollection(trackId)
+    }
+
+    async toggleTrackLiked(row) {
+        const { trackId = null } = getTrackId(row)
+        if (!trackId) return
+
+        const isLiked = this.#isOnLikedSongsPage ? true : this.#isLiked(row)
+        const method = isLiked ? 'DELETE' : 'PUT'
+
+        const { state } = await this._dispatcher.sendEvent({
+            eventType: 'tracks.update',
+            detail: { key: 'tracks.update', values: { id: trackId, method } }
+        })
+
+        if (state == 'error') return
+
+        const saved = method == 'PUT'
+        this._store.saveInCollection({ id: trackId, saved })
+
+        const icon = row.querySelector(this._selector)
+        this.animate(icon, saved)
+
+        this.#updateCurrentTrack(trackId, saved)
+    }
+
+    async #updateCurrentTrack(trackId, highlight) {
+        const currentTrack = await currentData.readTrack()
+
+        if (!currentTrack?.trackId) return
+
+        if (currentTrack?.trackId !== trackId) return
+
+        highlightIconTimer({
+            highlight,
+            fill: true,
+            selector: '#chorus-heart > svg'
+        })
+
+        const heartIcon = document.querySelector('#chorus-heart')
+        const text = `${highlight ? 'Remove from' : 'Save to'} Liked`
+        heartIcon?.setAttribute('aria-label', text)
+    }
+
+    setInitialState(row) {
+        const icon = row.querySelector(this._selector)
+        this.animate(icon)
+    }
+
+    #burn({ icon, burn }) {
+        const svg = icon.querySelector('svg')
+
+        if (burn) {
+            icon.style.visibility = 'visible'
+        }
+
+        icon.setAttribute('aria-label', `${burn ? 'Remove from' : 'Save to'} Liked`)
+        svg.style.fill = burn ? '#1ed760' : 'transparent'
+        svg.style.stroke = burn ? '#1ed760' : 'currentColor'
+    }
+
+    #glow({ icon, glow }) {
+        const svg = icon.querySelector('svg')
+
+        svg.addEventListener('mouseover', () => {
+            if (glow && svg.style.fill == '#1ed760') return
+
+            svg.style.fill = glow ? '#1ed760' : 'transparent'
+            svg.style.stroke = glow ? '#1ed760' : '#fff'
+        })
+
+        svg.addEventListener('mouseleave', () => {
+            if (glow && svg.style.fill == '#1ed760') return
+
+            svg.style.fill = glow ? '#1ed760' : 'transparent'
+            svg.style.stroke = glow ? '#1ed760' : 'currentColor'
+        })
+    }
+
+    animate(icon, heart) {
+        if (!icon?.parentElement) return
+
+        const isLiked = heart ?? this.#isLiked(icon?.parentElement?.parentElement)
+
+        this.#burn({ icon, burn: isLiked })
+        this.#glow({ icon, glow: isLiked })
+    }
+
+    setUI(row) {
+        super._setUI(row)
+    }
+
+    get _iconUI() {
+        return createIcon(TRACK_HEART)
+    }
+}
diff --git a/src/models/tracklist/track-list.js b/src/models/tracklist/track-list.js
index a278f94f..d085cc26 100644
--- a/src/models/tracklist/track-list.js
+++ b/src/models/tracklist/track-list.js
@@ -1,16 +1,20 @@
 import SkipIcon from './skip-icon.js'
 import SnipIcon from './snip-icon.js'
+import HeartIcon from './heart-icon.js'
 
 import Chorus from '../chorus.js'
 import TrackSnip from '../snip/track-snip.js'
+import Dispatcher from '../../events/dispatcher.js'
 
 import { store } from '../../stores/data.js'
-import { trackSongInfo } from '../../utils/song.js'
+import { getTrackId, trackSongInfo } from '../../utils/song.js'
 
 export default class TrackList {
     constructor(songTracker) {
+        this._dispatcher = new Dispatcher()
         this._chorus = new Chorus(songTracker)
         this._skipIcon = new SkipIcon(store)
+        this._heartIcon = new HeartIcon(store)
         this._snipIcon = new SnipIcon(store)
         this._trackSnip = new TrackSnip(store)
 
@@ -18,6 +22,7 @@ export default class TrackList {
         this._events = ['mouseenter', 'mouseleave']
 
         this._icons = [
+            this._heartIcon,
             this._skipIcon // this._snipIcon
         ]
         this._previousRowNum = null
@@ -28,8 +33,76 @@ export default class TrackList {
         return trackRows?.length > 0 ? Array.from(trackRows) : undefined
     }
 
-    setUpBlocking() {
+    get #trackIdsToCheck() {
+        if (!this.#trackRows.length) return []
+
+        const trackIds = new Set(this.#trackRows.map((row) => getTrackId(row).trackId))
+        const collectionTrackIds = new Set(store.collectionTrackIds)
+
+        const trackIdsToCheckIfLiked = [...trackIds.difference(collectionTrackIds)]
+        return trackIdsToCheckIfLiked
+    }
+
+    get #plusCircles() {
+        const plusCircleButtons = document.querySelectorAll(
+            '[role="presentation"] > div > button[data-encore-id="buttonTertiary"][aria-checked]'
+        )
+        if (!plusCircleButtons.length) return []
+        return Array.from(plusCircleButtons)
+    }
+
+    #updateButtonStyles({ button, show = false }) {
+        button.style.padding = show ? '12px' : 0
+        button.style.width = show ? '16px' : 0
+        button.style.visibility = show ? 'visible' : 'hidden'
+        button.style.marginRight = show ? 12 : 0
+    }
+
+    showPlusCircles() {
+        this.#plusCircles
+            .filter((button) => button.style.visibility == 'hidden')
+            .forEach((button) => this.#updateButtonStyles({ button, show: true }))
+    }
+
+    #hidePlusCircles() {
+        this.#plusCircles.forEach((button) => this.#updateButtonStyles({ button }))
+    }
+
+    #hidePlusCircle(row) {
+        const button = row.querySelector('button[role="buttonTertiary"]')
+        if (!button) return
+        this.#updateButtonStyles(button)
+    }
+
+    async #updateCollectionLikedTracks(ids) {
+        const { state, data } = await this._dispatcher.sendEvent({
+            eventType: 'tracks.liked',
+            detail: { key: 'tracks.liked', values: { ids: ids.join(',') } }
+        })
+
+        if (state !== 'completed') return
+
+        const collection = ids.reduce((obj, id, index) => {
+            obj[id] = data[index]
+            return obj
+        }, {})
+
+        store.mergetoCollection(collection)
+    }
+
+    get #isOnLikedSongsPage() {
+        return location.pathname == '/collection/tracks'
+    }
+
+    async setUpBlocking() {
         if (!this.#trackRows?.length) return
+        this.#hidePlusCircles()
+
+        const trackIds = this.#trackIdsToCheck
+
+        if (trackIds.length && !this.#isOnLikedSongsPage) {
+            await this.#updateCollectionLikedTracks(trackIds)
+        }
 
         this.#toggleBlockDisplay(false)
         this.#setRowEvents()
@@ -39,12 +112,19 @@ export default class TrackList {
         if (!this.#trackRows?.length) return
 
         this.#toggleBlockDisplay(true)
+        this.showPlusCircles()
     }
 
     #toggleBlockDisplay(hide) {
         const blockIcons = this.#trackRows
             .map((row) =>
-                Array.from(row.querySelectorAll(['button[role="snip"]', 'button[role="skip"]']))
+                Array.from(
+                    row.querySelectorAll([
+                        //'button[role="snip"]',
+                        'button[role="heart"]',
+                        'button[role="skip"]'
+                    ])
+                )
             )
             .flat()
 
@@ -56,13 +136,17 @@ export default class TrackList {
     }
 
     #getRowIcons(row) {
-        return Array.from(row.querySelectorAll(['button[role="snip"]', 'button[role="skip"]']))
+        return Array.from(
+            row.querySelectorAll('button[role="snip"], button[role="skip"], button[role="heart"]')
+        )
     }
 
     #setMouseEvents(row) {
         const song = trackSongInfo(row)
         if (!song) return
 
+        this.#hidePlusCircle(row)
+
         this._events.forEach((event) => {
             row?.addEventListener(event, async () => {
                 const snipInfo = await this._snipIcon.getTrack(song.id)
@@ -75,10 +159,15 @@ export default class TrackList {
                         : 'hidden'
 
                     const role = icon.getAttribute('role')
-                    const display = snipInfo?.[keys[role]] ?? false
 
-                    this._skipIcon._burn({ icon, burn: display })
-                    this._skipIcon._glow({ icon, glow: display })
+                    if (role == 'heart') {
+                        this._heartIcon.animate(icon)
+                    } else {
+                        const display = snipInfo?.[keys[role]] ?? false
+
+                        this._skipIcon._burn({ icon, burn: display })
+                        this._skipIcon._glow({ icon, glow: display })
+                    }
                 })
             })
         })
@@ -88,7 +177,7 @@ export default class TrackList {
         const target = e.target
         const role = target?.getAttribute('role')
 
-        if (['snip', 'skip'].includes(role)) {
+        if (['snip', 'skip', 'heart'].includes(role)) {
             let row = target.parentElement
             do {
                 row = row.parentElement
@@ -107,10 +196,14 @@ export default class TrackList {
                 const icon = row.querySelector('button[role="snip"]')
                 this._snipIcon._animate(icon)
                 this._previousRowNum = currentIndex
-            } else {
+            } else if (role == 'skip') {
                 const icon = row.querySelector('button[role="skip"]')
                 await this._skipIcon._saveTrack(row)
                 this._skipIcon._animate(icon)
+            } else {
+                const icon = row.querySelector('button[role="heart"]')
+                await this._heartIcon.toggleTrackLiked(row)
+                this._heartIcon.animate(icon)
             }
         }
     }
diff --git a/src/models/tracklist/tracklist-icon.js b/src/models/tracklist/tracklist-icon.js
index 44fcc872..521d9b4d 100644
--- a/src/models/tracklist/tracklist-icon.js
+++ b/src/models/tracklist/tracklist-icon.js
@@ -47,7 +47,6 @@ export default class TrackListIcon {
 
         this._seen.add(song.id)
 
-        const track = (await this.getTrack(song.id)) ?? {}
         await this._store.getTrack({
             id: song.id,
             value: {
@@ -55,8 +54,7 @@ export default class TrackListIcon {
                 isSkipped: false,
                 isSnip: false,
                 startTime: 0,
-                endTime: song.endTime,
-                ...track
+                endTime: song.endTime
             }
         })
     }
diff --git a/src/observers/now-playing.js b/src/observers/now-playing.js
index c739c201..7cd6d8d1 100644
--- a/src/observers/now-playing.js
+++ b/src/observers/now-playing.js
@@ -2,6 +2,7 @@ import { store } from '../stores/data.js'
 import { currentData } from '../data/current.js'
 
 import LoopIcon from '../models/loop-icon.js'
+import HeartIcon from '../models/heart-icon.js'
 import SeekIcons from '../models/seek/seek-icon.js'
 import { currentSongInfo } from '../utils/song.js'
 
@@ -15,6 +16,7 @@ export default class NowPlayingObserver {
         this._chorus = chorus
         this._seekIcons = new SeekIcons()
         this._loopIcon = new LoopIcon(songTracker)
+        this._heartIcon = new HeartIcon()
     }
 
     async observe() {
@@ -25,9 +27,11 @@ export default class NowPlayingObserver {
         this.#toggleSnipUI()
         this._seekIcons.init()
         this._loopIcon.init()
+        this._heartIcon.init()
         const track = await this.setNowPlayingData()
         await this._songTracker.init()
-        this._loopIcon.highlightIcon(track)
+        this._loopIcon.highlightLoop(track)
+        await this._heartIcon.highlightIcon()
     }
 
     #isAnchor(mutation) {
@@ -66,7 +70,8 @@ export default class NowPlayingObserver {
             await this._songTracker.songChange()
 
             this._loopIcon.updateIconPosition()
-            this._loopIcon.highlightIcon(track)
+            this._loopIcon.highlightLoop(track)
+            await this._heartIcon.highlightIcon()
 
             this._snip.updateView()
             await this._seekIcons.setSeekLabels()
@@ -88,6 +93,7 @@ export default class NowPlayingObserver {
         this._observer?.disconnect()
         this._currentSongId = null
         this._loopIcon.removeIcon()
+        this._heartIcon.removeIcon()
         this._seekIcons.removeIcons()
         this._songTracker.clearListeners()
         this._observer = null
diff --git a/src/observers/song-tracker.js b/src/observers/song-tracker.js
index 7675a47d..a55c96cf 100644
--- a/src/observers/song-tracker.js
+++ b/src/observers/song-tracker.js
@@ -5,7 +5,7 @@ import { spotifyVideo } from '../actions/overload.js'
 import { playback } from '../utils/playback.js'
 import { timeToSeconds } from '../utils/time.js'
 import { currentSongInfo } from '../utils/song.js'
-import { highlightElement } from '../utils/higlight.js'
+import { highlightElement } from '../utils/highlight.js'
 
 import Dispatcher from '../events/dispatcher.js'
 
diff --git a/src/observers/track-list.js b/src/observers/track-list.js
index 5a9d486a..93279aaa 100644
--- a/src/observers/track-list.js
+++ b/src/observers/track-list.js
@@ -42,7 +42,7 @@ export default class TrackListObserver {
                     this._isHidden
                         ? this._trackList.removeBlocking()
                         : this._trackList.setUpBlocking()
-                }, 2000)
+                }, 250)
             }
         }
     }
@@ -50,6 +50,7 @@ export default class TrackListObserver {
     #hideUI() {
         this._isHidden = true
         this._trackList.removeBlocking()
+        this._trackList.showPlusCircles()
     }
 
     #showUI() {
diff --git a/src/services/track.js b/src/services/track.js
new file mode 100644
index 00000000..24046d9d
--- /dev/null
+++ b/src/services/track.js
@@ -0,0 +1,30 @@
+import { setOptions, request } from '../utils/request.js'
+
+const API_URL = 'https://api.spotify.com/v1/me/tracks'
+
+// !! method must be either PUT or DELETE !!
+export function updateLikedTracks({ id, method }) {
+    return new Promise(async (resolve, reject) => {
+        try {
+            const options = await setOptions({ method })
+            const response = await request({ url: `${API_URL}?ids=${id}`, options })
+            resolve(response)
+        } catch (error) {
+            reject(error)
+        }
+    })
+}
+
+// ids must must be comma-separated of spotify ids. Ex. ids=jksfdlkjd,jfdklkfdsj,lsuouw
+export function checkIfTracksInCollection({ ids }) {
+    return new Promise(async (resolve, reject) => {
+        try {
+            const options = await setOptions({ method: 'GET' })
+            const url = `${API_URL}/contains?ids=${ids}`
+            const response = await request({ url, options })
+            resolve(response)
+        } catch (error) {
+            reject(error)
+        }
+    })
+}
diff --git a/src/stores/cache.js b/src/stores/cache.js
index 0c0d62ae..4cc24461 100644
--- a/src/stores/cache.js
+++ b/src/stores/cache.js
@@ -8,10 +8,6 @@ export default class CacheStore {
         return this.#cache
     }
 
-    isEmpty(obj) {
-        return Object.keys(obj).length === 0 && obj.constructor === Object
-    }
-
     getKey(key) {
         const result = this.#cache.getItem(key)
         try {
@@ -23,9 +19,7 @@ export default class CacheStore {
 
     getValue({ key, value }) {
         const result = this.getKey(key)
-        if (!!result && (['object', 'string'].includes(typeof result) || this.isEmpty(value))) {
-            return result
-        }
+        if (result) return result
 
         return this.update({ key, value })
     }
diff --git a/src/stores/data.js b/src/stores/data.js
index df078e78..deda1d47 100644
--- a/src/stores/data.js
+++ b/src/stores/data.js
@@ -38,6 +38,33 @@ class DataStore {
         })
     }
 
+    get collectionTrackIds() {
+        const userCurations = this.#cache.getValue({ key: 'user-curated', value: {} })
+        return Object.keys(userCurations)
+    }
+
+    checkInCollection(id) {
+        const userCurations = this.#cache.getValue({ key: 'user-curated', value: {} })
+        if (userCurations.hasOwnProperty(id)) return userCurations[id]
+
+        return null
+    }
+
+    saveInCollection({ id, saved }) {
+        if (!id) return
+
+        const userCurations = this.#cache.getValue({ key: 'user-curated', value: {} })
+        userCurations[id] = saved
+
+        this.#cache.update({ key: 'user-curated', value: userCurations })
+    }
+
+    mergetoCollection(newEntries) {
+        const userCurations = this.#cache.getValue({ key: 'user-curated', value: {} })
+        const collection = Object.assign(userCurations, newEntries)
+        this.#cache.update({ key: 'user-curated', value: collection })
+    }
+
     async populate() {
         const response = await this.#dispatcher.sendEvent({
             eventType: 'storage.populate',
diff --git a/src/styles.css b/src/styles.css
index 63075328..e33d135e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -312,26 +312,28 @@ input[type='number']::-webkit-outer-spin-button {
     justify-content: flex-end;
 }
 
-[role='ff'][aria-label],
-[role='rw'][aria-label],
-[role='loop'][aria-label],
-[role='skip'][aria-label],
-[role='snip'][aria-label],
-[role='speed'][aria-label],
-[role='settings'][aria-label],
-[role='artist-disco'][aria-label] {
+[role=ff][aria-label],
+[role=rw][aria-label],
+[role=loop][aria-label],
+[role=skip][aria-label],
+[role=snip][aria-label], 
+[role=speed][aria-label],
+[role=heart][aria-label],
+[role=settings][aria-label],
+[role=artist-disco][aria-label] {
     position: relative;
     display: inline-block;
 }
 
-[role='ff'][aria-label]:after,
-[role='rw'][aria-label]:after,
-[role='loop'][aria-label]:after,
-[role='skip'][aria-label]:after,
-[role='snip'][aria-label]:after,
-[role='speed'][aria-label]:after,
-[role='settings'][aria-label]:after,
-[role='artist-disco'][aria-label]:after {
+[role=ff][aria-label]:after,
+[role=rw][aria-label]:after,
+[role=loop][aria-label]:after,
+[role=skip][aria-label]:after,
+[role=snip][aria-label]:after, 
+[role=speed][aria-label]:after, 
+[role=heart][aria-label]:after,
+[role=settings][aria-label]:after,
+[role=artist-disco][aria-label]:after {
     content: attr(aria-label);
     display: none;
     position: absolute;
@@ -355,14 +357,15 @@ input[type='number']::-webkit-outer-spin-button {
     box-shadow: 0px 4px 6px 0px rgb(0 0 0 / 35%);
 }
 
-[role='ff'][aria-label]:hover:after,
-[role='rw'][aria-label]:hover:after,
-[role='loop'][aria-label]:hover:after,
-[role='skip'][aria-label]:hover:after,
-[role='snip'][aria-label]:hover:after,
-[role='speed'][aria-label]:hover:after,
-[role='settings'][aria-label]:hover:after,
-[role='artist-disco'][aria-label]:hover:after {
+[role=ff][aria-label]:hover:after,
+[role=rw][aria-label]:hover:after,
+[role=loop][aria-label]:hover:after,
+[role=skip][aria-label]:hover:after,
+[role=snip][aria-label]:hover:after, 
+[role=speed][aria-label]:hover:after,
+[role=heart][aria-label]:hover:after,
+[role=settings][aria-label]:hover:after,
+[role=artist-disco][aria-label]:hover:after {
     display: inline-block;
 }
 
diff --git a/src/utils/higlight.js b/src/utils/highlight.js
similarity index 58%
rename from src/utils/higlight.js
rename to src/utils/highlight.js
index a22b5f21..daa94504 100644
--- a/src/utils/higlight.js
+++ b/src/utils/highlight.js
@@ -22,11 +22,23 @@ export const highlightElement = ({
     }, 250)
 }
 
-export const highlightLoopIcon = (highlight) => {
-    const svgIcon = document.getElementById('loop-icon')
-    if (!svgIcon) return
+export const highlightIconTimer = ({ highlight, selector, fill = false }) => {
+    let updated
+    const timer = setInterval(() => {
+        if (updated) { clearInterval(timer); return }
+
+        updated = highlightIcon({ highlight, selector, fill })
+    }, 0)
+}
+
+export const highlightIcon = ({ highlight, selector, fill = false }) => {
+    const svgIcon = document.querySelector(selector)
+    if (!svgIcon) return false
 
     const colour = highlight ? '#1ed760' : 'currentColor'
-    svgIcon.setAttribute('fill', colour)
+    const fillColour = highlight ? '#1ed760' : fill ? 'unset' : 'currentColor'
     svgIcon.setAttribute('stroke', colour)
+    svgIcon.setAttribute('fill', fillColour)
+
+    return true
 }
diff --git a/src/utils/request.js b/src/utils/request.js
index 190b8a14..e2b780df 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -27,9 +27,10 @@ export const request = async ({ url, options }) => {
             throw new Error('Network response was not ok')
         }
 
-        if (response?.status !== 204) {
-            const jsonResponse = await response?.json()
-            return jsonResponse
+        try {
+            return await response?.json()
+        } catch (err) {
+            return 'empty response'
         }
     } catch (error) {
         throw error
diff --git a/src/utils/selectors.js b/src/utils/selectors.js
index 62067ecf..cf8ef964 100644
--- a/src/utils/selectors.js
+++ b/src/utils/selectors.js
@@ -5,7 +5,7 @@ const mediaKeys = {
     previous: '[data-testid="control-button-skip-back"]',
     'play/pause': '[data-testid="control-button-playpause"]',
     'mute/unmute': '[data-testid="volume-bar-toggle-mute-button"]',
-    'save/unsave': '[data-testid="now-playing-widget"] > [data-encore-id="buttonTertiary"]'
+    'save/unsave': '[data-testid="now-playing-widget"] > #chorus-heart'
 }
 
 const chorusKeys = {
diff --git a/src/utils/song.js b/src/utils/song.js
index 805b9cb6..92ec5d07 100644
--- a/src/utils/song.js
+++ b/src/utils/song.js
@@ -59,8 +59,8 @@ export const trackSongInfo = (row) => {
     }
 }
 
-const getTrackId = (row) => {
-    const trackIdUrl = row.querySelector('a[data-testid="internal-track-link"]')?.href
+export const getTrackId = (row) => {
+    const trackIdUrl = row.querySelector('a[data-testid="internal-track-link"], a')?.href
     if (!trackIdUrl) return
 
     const url = trackIdUrl.split('.com').at(1)