add "add to favorite" buttons to artist and album page headers

+ fix album page play buttton

src/components/AlbumView/Header.vue

@@ -32,7 +32,7 @@
             <span v-else-if="album.is_single">Single</span>
             <span v-else>Album</span>
           </div>
-          <div class="title ellip" v-tooltip>
+          <div class="title ellip2" v-tooltip>
             {{ album.title }}
           </div>
         </div>
@@ -48,7 +48,10 @@
               {{ formatSeconds(album.duration, true) }}
             </div>
           </div>
-          <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
+          <div class="buttons">
+            <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
+            <HeartSvg />
+          </div>
         </div>
       </div>
       <div class="art" v-if="!albumHeaderSmall">
@@ -85,6 +88,7 @@ import { isLight } from "@/composables/colors/album";
 import { playSources } from "@/composables/enums";
 import { Album } from "@/interfaces";
 import { Routes } from "@/router/routes";
+import HeartSvg from "../shared/HeartSvg.vue";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
@@ -130,6 +134,11 @@ useVisibility(albumheaderthing, handleVisibilityState);
   background-color: $black;
   align-items: flex-end;
 
+  .buttons {
+    display: flex;
+    gap: $small;
+  }
+
   .big-img {
     height: calc(100%);
     width: 16rem;

src/components/ArtistView/Header.vue

@@ -17,7 +17,7 @@
     >
       <section class="text">
         <div class="card-title">Artist</div>
-        <div class="artist-name">{{ artist.info.name }}</div>
+        <div class="artist-name ellip2">{{ artist.info.name }}</div>
         <div class="stats">
           {{ artist.info.trackcount }} Track{{
             `${artist.info.trackcount == 1 ? "" : "s"}`
@@ -29,7 +29,10 @@
           {{ formatSeconds(artist.info.duration, true) }}
         </div>
       </section>
-      <PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
+      <div class="buttons">
+        <PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
+        <HeartSvg />
+      </div>
     </div>
     <div class="artist-img no-select">
       <img :src="paths.images.artist.large + artist.info.image" />
@@ -54,6 +57,7 @@ import formatSeconds from "@/utils/useFormatSeconds";
 import { isLight } from "@/composables/colors/album";
 import { paths } from "@/config";
 import { playSources } from "@/composables/enums";
+import HeartSvg from "@/components/shared/HeartSvg.vue";
 
 const artist = useArtistPageStore();
 </script>
@@ -68,11 +72,13 @@ const artist = useArtistPageStore();
 .artist-page-header {
   height: 18rem;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 50% 50%;
   position: relative;
 
   .artist-img {
+    // border: solid red;
     height: 18rem;
+    width: 100%;
 
     img {
       height: 100%;
@@ -120,12 +126,7 @@ const artist = useArtistPageStore();
     .artist-name {
       font-size: 3rem;
       font-weight: bold;
-
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      word-wrap: break-word;
     }
 
     .stats {
@@ -136,5 +137,10 @@ const artist = useArtistPageStore();
   .artist-info.nocontrast {
     color: $black;
   }
+
+  .buttons {
+    display: flex;
+    gap: $small;
+  }
 }
 </style>

src/components/PlaylistView/Header.vue

@@ -21,7 +21,7 @@
           {{ formatSeconds(info.duration, true) }}
         </div>
         <div class="title ellip">{{ info.name }}</div>
-        <div class="type">PLAYLIST</div>
+        <div class="type">Playlist</div>
       </div>
     </div>
     <div class="last-updated" :class="{ lightbg: !info.image }">

src/components/shared/HeartSvg.vue

@@ -0,0 +1,21 @@
+<template>
+  <button class="heart-button circular"><HeartSvg /></button>
+</template>
+
+<script setup lang="ts">
+import HeartSvg from "@/assets/icons/heart.svg";
+</script>
+
+<style lang="scss">
+.heart-button {
+  $bg: rgb(247, 149, 149);
+  background: $bg;
+  align-items: center;
+  padding: 0 1rem;
+  gap: $smaller;
+
+  &:hover {
+    background: $bg;
+  }
+}
+</style>

src/components/shared/SongItem.vue

@@ -169,7 +169,6 @@ async function addToFav(trackhash: string) {
     background-color: $gray5;
 
     .index {
-
       .text {
         transition-delay: 500ms;
 
@@ -202,7 +201,6 @@ async function addToFav(trackhash: string) {
   }
 
   .index {
-    opacity: 0.5;
     font-size: 0.8rem;
     width: 100%;
     position: relative;
@@ -211,7 +209,7 @@ async function addToFav(trackhash: string) {
     justify-content: center;
 
     .text {
-      opacity: 1;
+      opacity: 0.5;
       display: block;
       margin: auto 0;
       transition: all 0.25s;
@@ -226,7 +224,6 @@ async function addToFav(trackhash: string) {
       align-content: center;
       transition: all 0.2s;
       transform: translateX(-1.5rem);
-      color: red;
     }
   }