Better fav button in queue item

front/src/components/Queue.vue

@@ -130,7 +130,8 @@ const queueItems = computed(() => tracks.value.map((track, index) => ({
   coverUrl: getCover(track),
   labels: {
     remove: $pgettext('*/*/*', 'Remove'),
-    selectTrack: $pgettext('*/*/*', 'Select track')
+    selectTrack: $pgettext('*/*/*', 'Select track'),
+    favorite: $pgettext('*/*/*', 'Favorite track')
   },
   duration: time.durationFormatted(track.uploads[0]?.duration ?? 0) ?? ''
 }) as QueueItemSource))

front/src/components/QueueItem.vue

@@ -53,11 +53,17 @@ defineEmits<Emits>()
       </template>
     </div>
     <div class="controls">
-      <i
+      <button
-        :class="$store.getters['favorites/isFavorite'](source.track.id) ? 'pink' : ''"
+        :aria-label="source.labels.favorite"
-        class="heart icon"
+        :title="source.labels.favorite"
+        class="ui really basic circular icon button"
         @click.stop="$store.dispatch('favorites/toggle', source.track.id)"
-      />
+      >
+        <i
+          :class="$store.getters['favorites/isFavorite'](source.track.id) ? 'pink' : ''"
+          class="heart icon"
+        />
+      </button>
       <button
         :aria-label="source.labels.remove"
         :title="source.labels.remove"

front/src/style/components/_player.scss

@@ -220,9 +220,8 @@
 
     }
     .position.control {
-      padding-right: 1em;
       flex-grow: 1;
-      padding-left: 0;
+
       i.stream.icon {
         position: relative;
         top: -2px;

front/src/style/components/_queue.scss

@@ -322,8 +322,6 @@
     padding: 0 0.875rem;
 
     .heart {
-      margin-right: 1rem;
-
       &:not(.pink) {
         color: rgba(0, 0, 0, 0.2)
       }

front/src/types.ts

@@ -28,6 +28,7 @@ export interface QueueItemSource {
   labels: {
     remove: string
     selectTrack: string
+    favorite: string
   }
 }