move the Routes enum to router/routes.ts

+ fix context menu not being normalized
+ fix nav bar padding-right on no sidebar

src/components/ArtistView/Header.vue

@@ -37,9 +37,11 @@
     <div
       class="gradient"
       :style="{
-        backgroundImage: `linear-gradient(to left, transparent 30%,
+        backgroundImage: artist.info.colors[0]
+          ? `linear-gradient(to left, transparent 30%,
       ${artist.info.colors[0]} 50%,
-      ${artist.info.colors[0]} 100%)`,
+      ${artist.info.colors[0]} 100%)`
+          : '',
       }"
     ></div>
   </div>

src/components/BottomBar.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { Routes } from "@/composables/enums";
+import { Routes } from "@/router/routes";
 import { paths } from "@/config";
 import { formatSeconds } from "@/utils";
 

src/components/ContextMenu.vue

@@ -1,9 +1,11 @@
 <template>
   <div
-    v-show="context.visible"
     class="context-menu rounded shadow-lg no-select"
     ref="contextMenuRef"
     id="context-menu"
+    :style="{
+      opacity: context.visible ? '1' : '0',
+    }"
   >
     <ContextItem
       class="context-item"

src/components/FolderView/FolderItem.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import { Folder } from "@/interfaces";
-import { Routes } from "@/composables/enums";
+import { Routes } from "@/router/routes";
 
 import FolderSvg from "@/assets/icons/folder.svg";
 import SymLinkSvg from "@/assets/icons/symlink.svg";

src/components/FolderView/SongList.vue

@@ -47,8 +47,8 @@ import { ref } from "vue";
 
 import SongItem from "../shared/SongItem.vue";
 
-import { Routes } from "@/composables/enums";
 import { Track } from "@/interfaces";
+import { Routes } from "@/router/routes";
 import useQStore from "@/stores/queue";
 
 const queue = useQStore();

src/components/LeftSidebar/Navigation.vue

@@ -27,12 +27,12 @@
 </template>
 
 <script setup lang="ts">
-import { Routes } from "@/composables/enums";
+import { Routes } from "@/router/routes";
+import FolderSvg from "../../assets/icons/folder-1.svg";
 import PlaylistSvg from "../../assets/icons/playlist-1.svg";
 import QueueSvg from "../../assets/icons/queue.svg";
-import FolderSvg from "../../assets/icons/folder-1.svg";
-import SettingsSvg from "../../assets/icons/settings.svg";
 import SearchSvg from "../../assets/icons/search.svg";
+import SettingsSvg from "../../assets/icons/settings.svg";
 
 const menus = [
   {

src/components/LeftSidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-auto-animate class="l-sidebar no-scroll">
+  <div class="l-sidebar no-scroll">
     <div class="withlogo">
       <Logo />
       <Navigation />

src/components/modals/NewPlaylist.vue

@@ -14,13 +14,13 @@
 </template>
 
 <script setup lang="ts">
+import { Routes } from "@/router/routes";
+import usePlaylistStore from "@/stores/pages/playlists";
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { createNewPlaylist } from "../../composables/fetch/playlists";
 import { Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
-import usePlaylistStore from "@/stores/pages/playlists";
-import { Routes } from "@/composables/enums";
 
 const props = defineProps<{
   track?: Track;

src/components/nav/NavBar.vue

@@ -3,9 +3,7 @@
     <div class="left">
       <NavButtons />
 
-      <div
-        class="info"
-      >
+      <div class="info">
         <APTitle
           v-if="$route.name == Routes.album || $route.name == Routes.playlist"
           :header_shown="nav.h_visible"
@@ -18,6 +16,9 @@
         <SearchTitle v-if="$route.name == Routes.search" />
         <PlaylistsTitle v-if="$route.name == Routes.playlists" />
         <QueueTitle v-if="$route.name == Routes.queue" />
+        <ArtistDiscographyTitle
+          v-if="$route.name == Routes.artistDiscography"
+        />
       </div>
     </div>
   </div>
@@ -28,18 +29,19 @@ import { ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import { subPath } from "@/interfaces";
+import { Routes } from "@/router/routes";
 import useNavStore from "@/stores/nav";
 import { createSubPaths } from "@/utils";
-import { Routes } from "@/composables/enums";
 
 import NavButtons from "./NavButtons.vue";
 
-import FolderTitle from "./Titles/Folder.vue";
 import APTitle from "./Titles/APTitle.vue";
-import SearchTitle from "./Titles/SearchTitle.vue";
+import FolderTitle from "./Titles/Folder.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";
 
 const route = useRoute();
 const nav = useNavStore();

src/components/nav/Titles/ArtistDiscographyTitle.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="artist-discography-nav">
+    <h1 class="ellip">Creedence Clearwater Revival</h1>
+    <div class="buttons">
+      <!-- create dropdown -->
+      <div class="select rounded-sm" v-auto-animate="{ duration: 100 }">
+        <button class="selected" @click.prevent="showDropDown = !showDropDown">
+          <span class="ellip">Albums and appearances</span>
+          <ArrowSvg />
+        </button>
+        <div
+          ref="dropOptionsRef"
+          class="options rounded-sm"
+          v-if="showDropDown"
+        >
+          <div class="option selected" value="1">Albums</div>
+          <div class="option" value="2">Singles & EPs</div>
+          <div class="option" value="3">Appearances</div>
+        </div>
+      </div>
+      <button class="rounded-sm"><GridSvg /></button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+
+import ArrowSvg from "@/assets/icons/expand.svg";
+import GridSvg from "@/assets/icons/grid.svg";
+import { Ref, ref } from "vue";
+
+const showDropDown = ref(false);
+const dropOptionsRef: Ref<HTMLElement | undefined> = ref();
+
+function hideDropDown() {
+  showDropDown.value = false;
+}
+
+onClickOutside(dropOptionsRef, (e) => {
+  e.stopImmediatePropagation();
+  hideDropDown();
+});
+</script>
+
+<style lang="scss">
+.artist-discography-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+
+  h1 {
+    margin: 0;
+  }
+
+  .buttons {
+    display: flex;
+    gap: $small;
+  }
+
+  .selected {
+    display: grid;
+    grid-template-columns: 1fr 2rem;
+    gap: $smaller;
+    width: 100%;
+    padding-right: 0;
+
+    svg {
+      transform: rotate(90deg) scale(0.9);
+    }
+  }
+
+  .select {
+    position: relative;
+    width: 7rem;
+    display: flex;
+    align-items: center;
+    font-size: calc($medium + 2px);
+    z-index: 10;
+
+    .options {
+      background-color: $gray;
+      position: absolute;
+      top: 120%;
+      padding: $small $smaller;
+      display: grid;
+    }
+
+    .option {
+      padding: $small;
+      border-bottom: 1px solid $gray4;
+      width: 6.5rem;
+
+      &:hover {
+        border-radius: $smaller;
+        border-bottom: 1px solid transparent;
+        background-color: $darkestblue;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>

src/components/nav/Titles/Folder.vue

@@ -34,8 +34,8 @@
 
 <script setup lang="ts">
 import SearchInput from "@/components/shared/NavSearchInput.vue";
-import { Routes } from "@/composables/enums";
 import { subPath } from "@/interfaces";
+import { Routes } from "@/router/routes";
 import { focusElemByClass } from "@/utils";
 import { onUpdated } from "vue";
 

src/components/shared/ArtistCard.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script setup lang="ts">
-import { Routes } from "@/composables/enums";
 import { Artist } from "@/interfaces";
+import { Routes } from "@/router/routes";
 import { paths } from "../../config";
 
 const imguri = paths.images.artist.large;

src/components/shared/ArtistName.vue

@@ -30,8 +30,7 @@
 
 <script setup lang="ts">
 import { Artist } from "@/interfaces";
-import { putCommas } from "@/utils";
-import { Routes } from "@/composables/enums";
+import { Routes } from "@/router/routes";
 
 const props = defineProps<{
   artists: Artist[] | null;

src/components/shared/NavSearchInput.vue

@@ -20,15 +20,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import { storeToRefs } from "pinia";
+import { ref } from "vue";
 
-import usePStore from "@/stores/pages/playlist";
 import useAlbumStore from "@/stores/pages/album";
 import useFolderStore from "@/stores/pages/folder";
+import usePStore from "@/stores/pages/playlist";
 
-import { Routes } from "@/composables/enums";
 import SearchSvg from "@/assets/icons/search.svg";
+import { Routes } from "@/router/routes";
 
 const clicked = ref(false);
 const [playlist, album, folder] = [