From ede6eef00f85ccdc68065934242e92143b136baa Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Tue, 27 May 2025 22:07:43 +1000
Subject: [PATCH] feat(TrackItem): add favourites functionality to track item
 component

---
 src/components/TrackItem.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/TrackItem.vue b/src/components/TrackItem.vue
index 08e7a9c..f43ae90 100644
--- a/src/components/TrackItem.vue
+++ b/src/components/TrackItem.vue
@@ -3,9 +3,11 @@ import { artistsOrganize } from '../utils'
 import { ref } from 'vue'
 import { usePlayQueueStore } from '../stores/usePlayQueueStore'
 import { useToast } from 'vue-toast-notification'
+import { useFavourites } from '../stores/useFavourites'
 
 import QueueAddIcon from '../assets/icons/queueadd.vue'
 import StarEmptyIcon from '../assets/icons/starempty.vue'
+import StarFilledIcon from '../assets/icons/starfilled.vue'
 
 const props = defineProps<{
 	album?: Album,
@@ -18,6 +20,7 @@ const hover = ref(false)
 
 const playQueueStore = usePlayQueueStore()
 const toast = useToast()
+const favourites = useFavourites()
 
 function appendToQueue() {
 	console.log('aaa')
@@ -55,9 +58,12 @@ function appendToQueue() {
 				class="hover:scale-110 transition-all text-white/50 hover:text-white active:text-white/40 active:scale-95">
 				<QueueAddIcon :size="4" />
 			</button>
-			<button @click.stop=""
-				class="hover:scale-110 transition-all text-white/50 hover:text-white active:text-white/40 active:scale-95">
-				<StarEmptyIcon :size="4" />
+			<button @click.stop="favourites.toggleFavourite({
+				song: track,
+				album: album,
+			})" class="hover:scale-110 transition-all text-white/50 hover:text-white active:text-white/40 active:scale-95">
+				<StarFilledIcon v-if="favourites.isFavourite(track.cid)" :size="4" />
+				<StarEmptyIcon v-else :size="4" />
 			</button>
 		</div>