From 66a0d7287023e0f325611f314be4273423384588 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Fri, 24 Jan 2025 02:54:18 +0100
Subject: [PATCH] feat(front): ghost trackfavorite icon in tracklist

---
 front/src/components/audio/track/Row.vue             | 3 +--
 front/src/components/favorites/TrackFavoriteIcon.vue | 7 +++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index 12be1b144..243334674 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -192,8 +192,7 @@ const hover = ref(false)
       class="meta right floated column"
     >
       <track-favorite-icon
-        class="tiny"
-        :border="false"
+        ghost
         :track="track"
       />
     </div>
diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index 4ae97e608..dbad609b5 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -12,12 +12,14 @@ interface Props {
   track?: QueueTrack | Track
   button?: boolean
   border?: boolean
+  ghost?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   track: () => ({} as Track),
   button: false,
-  border: false
+  border: false,
+  ghost: false
 })
 
 const { t } = useI18n()
@@ -46,7 +48,8 @@ const title = computed(() => isFavorite.value
   </Button>
   <Button
     v-else
-    ghost
+    :ghost="ghost"
+    :secondary="!ghost"
     icon="bi-heart-fill"
     :class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
     :aria-label="title"