From a8dc816d0bc8a48924c11d8db29bbc7cdc6be45d Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Mon, 2 Jan 2023 15:42:47 +0300
Subject: [PATCH] refactor simple nav componnents

+ add nav for favorite artists
---
 src/components/nav/NavBar.vue                 | 30 +++++++++++++------
 .../nav/Titles/ArtistTracksTitle.vue          |  5 ----
 .../nav/Titles/FavoriteAlbumsNav.vue          |  3 --
 .../nav/Titles/FavoriteTracksNav.vue          |  3 --
 src/components/nav/Titles/FavoritesNav.vue    |  3 --
 src/components/nav/Titles/PlaylistsTitle.vue  |  4 +--
 src/components/nav/Titles/SettingsTitle.vue   |  4 +--
 .../Titles/{SimpleTitle.vue => SimpleNav.vue} |  2 +-
 8 files changed, 26 insertions(+), 28 deletions(-)
 delete mode 100644 src/components/nav/Titles/ArtistTracksTitle.vue
 delete mode 100644 src/components/nav/Titles/FavoriteAlbumsNav.vue
 delete mode 100644 src/components/nav/Titles/FavoriteTracksNav.vue
 delete mode 100644 src/components/nav/Titles/FavoritesNav.vue
 rename src/components/nav/Titles/{SimpleTitle.vue => SimpleNav.vue} (70%)

diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index d4ec2ef..66f5564 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -15,10 +15,26 @@
         <ArtistDiscographyTitle
           v-if="$route.name == Routes.artistDiscography"
         />
-        <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" />
+        <SimpleNav
+          v-if="$route.name == Routes.artistTracks"
+          :text="$route.query.artist as string || 'Artist Tracks'"
+        />
+        <SimpleNav
+          v-if="$route.name === Routes.favorites"
+          :text="'Favorites ❤️'"
+        />
+        <SimpleNav
+          v-if="$route.name === Routes.favoriteAlbums"
+          :text="'Favorite Albums ❤️'"
+        />
+        <SimpleNav
+          v-if="$route.name === Routes.favoriteArtists"
+          :text="'Favorite Artists ❤️'"
+        />
+        <SimpleNav
+          v-if="$route.name === Routes.favoriteTracks"
+          :text="'Favorite Tracks ❤️'"
+        />
       </div>
     </div>
   </div>
@@ -35,18 +51,14 @@ import { createSubPaths } from "@/utils";
 import NavButtons from "./NavButtons.vue";
 
 import FolderTitle from "./Titles/Folder.vue";
+import SimpleNav from "./Titles/SimpleNav.vue";
 import PlaylistsTitle from "./Titles/PlaylistsTitle.vue";
 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";
-import FavoritesNav from "./Titles/FavoritesNav.vue";
-import FavoriteAlbumsNav from "./Titles/FavoriteAlbumsNav.vue";
-import FavoriteTracksNav from "./Titles/FavoriteTracksNav.vue";
 
 const route = useRoute();
-
 const subPaths = ref<subPath[]>([]);
 
 watch(
diff --git a/src/components/nav/Titles/ArtistTracksTitle.vue b/src/components/nav/Titles/ArtistTracksTitle.vue
deleted file mode 100644
index 2c92a5f..0000000
--- a/src/components/nav/Titles/ArtistTracksTitle.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="artist-tracks-nav">
-    <h2 style="margin: 0">{{ $route.query.artist }}</h2>
-  </div>
-</template>
diff --git a/src/components/nav/Titles/FavoriteAlbumsNav.vue b/src/components/nav/Titles/FavoriteAlbumsNav.vue
deleted file mode 100644
index 044dcb9..0000000
--- a/src/components/nav/Titles/FavoriteAlbumsNav.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <h2 style="margin: 0">Favorite albums ❤️</h2>
-</template>
diff --git a/src/components/nav/Titles/FavoriteTracksNav.vue b/src/components/nav/Titles/FavoriteTracksNav.vue
deleted file mode 100644
index 406e2ee..0000000
--- a/src/components/nav/Titles/FavoriteTracksNav.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <h2 style="margin: 0">Favorite Tracks ❤️</h2>
-</template>
diff --git a/src/components/nav/Titles/FavoritesNav.vue b/src/components/nav/Titles/FavoritesNav.vue
deleted file mode 100644
index f951273..0000000
--- a/src/components/nav/Titles/FavoritesNav.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <h2 style="margin: 0">Favorites</h2>
-</template>
diff --git a/src/components/nav/Titles/PlaylistsTitle.vue b/src/components/nav/Titles/PlaylistsTitle.vue
index 7bc6529..703130a 100644
--- a/src/components/nav/Titles/PlaylistsTitle.vue
+++ b/src/components/nav/Titles/PlaylistsTitle.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="playlists-nav">
-    <SimpleTitle :text="'Playlists'" />
+    <SimpleNav :text="'Playlists'" />
     <div class="buttons">
       <button @click="showNewPlaylistModal()"><PlusSvg /> New Playlist</button>
     </div>
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import SimpleTitle from "./SimpleTitle.vue";
+import SimpleNav from "./SimpleNav.vue";
 import PlusSvg from "../../../assets/icons/plus.svg";
 
 import useModalStore from "@/stores/modal";
diff --git a/src/components/nav/Titles/SettingsTitle.vue b/src/components/nav/Titles/SettingsTitle.vue
index 056cd70..8a78479 100644
--- a/src/components/nav/Titles/SettingsTitle.vue
+++ b/src/components/nav/Titles/SettingsTitle.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="settings-nav">
-    <SimpleTitle :text="'Settings'" />
+    <SimpleNav :text="'Settings'" />
     <Nav />
   </div>
 </template>
 
 <script setup lang="ts">
-import SimpleTitle from "./SimpleTitle.vue";
+import SimpleNav from "./SimpleNav.vue";
 import Nav from "@/components/SettingsView/Nav.vue";
 </script>
 
diff --git a/src/components/nav/Titles/SimpleTitle.vue b/src/components/nav/Titles/SimpleNav.vue
similarity index 70%
rename from src/components/nav/Titles/SimpleTitle.vue
rename to src/components/nav/Titles/SimpleNav.vue
index fe27d51..717a568 100644
--- a/src/components/nav/Titles/SimpleTitle.vue
+++ b/src/components/nav/Titles/SimpleNav.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="title">{{ text }}</div>
+  <h2 style="margin: 0">{{ text }}</h2>
 </template>
 
 <script setup lang="ts">