implement artist tracks page

src/components/ArtistView/Header.vue

@@ -3,9 +3,9 @@
     class="artist-header-ambient rounded"
     style="height: 100%; width: 100%"
     :style="{
-      boxShadow: artist.info.colors
+      boxShadow: artist.info.colors.length
         ? `0 .5rem 2rem ${artist.info.colors[0]}`
-        : '',
+        : undefined,
     }"
   ></div>
   <div class="artist-page-header rounded no-scroll">
@@ -88,8 +88,8 @@ const artist = useArtistPageStore();
     background-image: linear-gradient(
       to left,
       transparent 10%,
-      $gray2 50%,
-      $gray2 100%
+      $gray 50%,
+      $gray 100%
     );
     height: 100%;
     width: 100%;

src/components/ArtistView/TopTracks.vue

@@ -1,6 +1,22 @@
 <template>
   <div class="artist-top-tracks">
-    <h3 class="section-title">Tracks</h3>
+    <h3 class="section-title">
+      Tracks
+      <span class="see-more">
+        <RouterLink
+          :to="{
+            name: Routes.artistTracks,
+            params: {
+              hash: artist.info.artisthash,
+            },
+            query: {
+              artist: artist.info.name,
+            },
+          }"
+          >SEE ALL</RouterLink
+        >
+      </span>
+    </h3>
     <div class="tracks">
       <SongItem
         v-for="(song, index) in artist.tracks"
@@ -20,6 +36,7 @@ import useQueueStore from "@/stores/queue";
 import { FromOptions, playSources } from "@/composables/enums";
 
 import { getArtistTracks } from "@/composables/fetch/artists";
+import { Routes } from "@/router/routes";
 
 const artist = useArtistPageStore();
 const queue = useQueueStore();
@@ -51,5 +68,19 @@ async function playFromPage(index: number) {
     padding-left: 1rem;
     color: $red;
   }
+
+  h3 {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .see-more {
+    font-size: $medium;
+
+    a:hover {
+      text-decoration: underline;
+      cursor: pointer !important;
+    }
+  }
 }
 </style>

src/components/nav/NavBar.vue

@@ -19,6 +19,7 @@
         <ArtistDiscographyTitle
           v-if="$route.name == Routes.artistDiscography"
         />
+        <ArtistTracksTitle v-if="$route.name == Routes.artistTracks" />
       </div>
     </div>
   </div>
@@ -42,6 +43,7 @@ import QueueTitle from "./Titles/QueueTitle.vue";
 import SearchTitle from "./Titles/SearchTitle.vue";
 import SettingsTitle from "./Titles/SettingsTitle.vue";
 import ArtistDiscographyTitle from "./Titles/ArtistDiscographyTitle.vue";
+import ArtistTracksTitle from "./Titles/ArtistTracksTitle.vue";
 
 const route = useRoute();
 const nav = useNavStore();

src/components/nav/Titles/ArtistTracksTitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="artist-tracks-nav">
+    <h2 style="margin: 0">{{ $route.query.artist }}</h2>
+  </div>
+</template>

src/components/nav/Titles/QueueTitle.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="nav-queue-title">
     <div class="first no-scroll">
-      <router-link :to="(location as RouteLocationRaw)">
-        <button class="btn-active">Go to source</button>
-      </router-link>
       <div class="playing-from">
-        <div class="border rounded-sm pad-sm">
-          <SourceIcon v-if="SourceIcon" />
-          <b class="ellip">{{ name }}</b>
-        </div>
+        <router-link :to="(location as RouteLocationRaw)">
+          <div class="border rounded-sm pad-sm">
+            <SourceIcon v-if="SourceIcon" />
+            <b class="ellip">{{ name }}</b>
+          </div>
+        </router-link>
       </div>
     </div>
     <QueueActions />
@@ -19,7 +18,7 @@
 import QueueActions from "@/components/RightSideBar/Queue/QueueActions.vue";
 import { FromOptions } from "@/composables/enums";
 import useQueueStore from "@/stores/queue";
-import {Routes} from "@/router/routes";
+import { Routes } from "@/router/routes";
 
 import AlbumSvg from "@/assets/icons/album.svg";
 import FolderSvg from "@/assets/icons/folder.svg";
@@ -112,11 +111,6 @@ const { name, icon: SourceIcon, location } = getSource();
   align-items: center;
 
   .first {
-    width: 100%;
-    display: grid;
-    grid-template-columns: max-content 1fr;
-    gap: 1rem;
-
     .playing-from {
       display: flex;
       align-items: center;
@@ -124,11 +118,17 @@ const { name, icon: SourceIcon, location } = getSource();
       opacity: 0.75;
 
       .border {
+        cursor: pointer;
         display: grid;
         grid-template-columns: max-content 1fr;
         align-items: center;
         padding: $smaller $small;
         height: 100%;
+
+        &:hover {
+          background-color: $darkestblue;
+          border: solid 1px $darkestblue;
+        }
       }
 
       svg {

src/components/shared/SongItem.vue

@@ -144,7 +144,7 @@ async function addToFav(trackhash: string) {
 <style lang="scss">
 .songlist-item {
   display: grid;
-  grid-template-columns: 1.5rem 2fr 1fr 1.5fr 2.5rem 2.5rem;
+  grid-template-columns: 1.75rem 2fr 1fr 1.5fr 2.5rem 2.5rem;
   align-items: center;
   justify-content: flex-start;
   height: $song-item-height;
@@ -169,6 +169,7 @@ async function addToFav(trackhash: string) {
     background-color: $gray5;
 
     .index {
+
       .text {
         transition-delay: 500ms;