add all favorite tracks page

src/components/nav/NavBar.vue

@@ -18,6 +18,7 @@
         <ArtistTracksTitle v-if="$route.name == Routes.artistTracks" />
         <FavoritesNav v-if="$route.name === Routes.favorites" />
         <FavoriteAlbumsNav v-if="$route.name === Routes.favoriteAlbums" />
+        <FavoriteTracksNav v-if="$route.name === Routes.favoriteTracks" />
       </div>
     </div>
   </div>
@@ -42,6 +43,7 @@ import ArtistDiscographyTitle from "./Titles/ArtistDiscographyTitle.vue";
 import ArtistTracksTitle from "./Titles/ArtistTracksTitle.vue";
 import FavoritesNav from "./Titles/FavoritesNav.vue";
 import FavoriteAlbumsNav from "./Titles/FavoriteAlbumsNav.vue";
+import FavoriteTracksNav from "./Titles/FavoriteTracksNav.vue";
 
 const route = useRoute();
 

src/components/nav/Titles/FavoriteTracksNav.vue

@@ -0,0 +1,3 @@
+<template>
+  <h2 style="margin: 0">Favorite Tracks ❤️</h2>
+</template>

src/router/routes.ts

@@ -136,6 +136,12 @@ const favoriteAlbums = {
   component: () => import("@/views/FavoriteAlbums.vue"),
 };
 
+const favoriteTracks = {
+  path: "/favorites/tracks",
+  name: "FavoriteTracks",
+  component: () => import("@/views/FavoriteTracks.vue"),
+};
+
 const notFound = {
   name: "NotFound",
   path: "/:pathMatch(.*)",
@@ -159,6 +165,7 @@ const routes = [
   ArtistTracks,
   favorites,
   favoriteAlbums,
+  favoriteTracks,
 ];
 
 const Routes = {
@@ -178,6 +185,7 @@ const Routes = {
   artistTracks: ArtistTracks.name,
   favorites: favorites.name,
   favoriteAlbums: favoriteAlbums.name,
+  favoriteTracks: favoriteTracks.name,
 };
 
 export { routes, Routes };

src/views/FavoriteTracks.vue

@@ -0,0 +1,23 @@
+<template>
+  <SongList :tracks="tracks" :handlePlay="handlePlay" />
+</template>
+
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+
+import { Track } from "@/interfaces";
+import useQueueStore from "@/stores/queue";
+import { getFavTracks } from "@/composables/fetch/favorite";
+
+import SongList from "@/components/shared/SongList.vue";
+
+const tracks: Ref<Track[]> = ref([]);
+const queue = useQueueStore();
+
+getFavTracks(0).then((data) => (tracks.value = data));
+
+function handlePlay(index: number) {
+  queue.playFromFav(tracks.value);
+  queue.play(index);
+}
+</script>

src/views/Favorites.vue

@@ -11,7 +11,7 @@
     <div class="fav-tracks" v-if="favTracks.length">
       <TopTracks
         :tracks="favTracks"
-        :route="'/home'"
+        :route="'/favorites/tracks'"
         :title="'Tracks ❤️'"
         :playHandler="handlePlay"
       />