move the Routes enum to router/routes.ts

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

src/assets/icons/grid.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24px" height="24px">
+<g id="surface88165820">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 5 3 C 3.90625 3 3 3.90625 3 5 L 3 9 C 3 10.09375 3.90625 11 5 11 L 9 11 C 10.09375 11 11 10.09375 11 9 L 11 5 C 11 3.90625 10.09375 3 9 3 Z M 15 3 C 13.90625 3 13 3.90625 13 5 L 13 9 C 13 10.09375 13.90625 11 15 11 L 19 11 C 20.09375 11 21 10.09375 21 9 L 21 5 C 21 3.90625 20.09375 3 19 3 Z M 5 5 L 9 5 L 9 9 L 5 9 Z M 15 5 L 19 5 L 19 9 L 15 9 Z M 5 13 C 3.90625 13 3 13.90625 3 15 L 3 19 C 3 20.09375 3.90625 21 5 21 L 9 21 C 10.09375 21 11 20.09375 11 19 L 11 15 C 11 13.90625 10.09375 13 9 13 Z M 15 13 C 13.90625 13 13 13.90625 13 15 L 13 19 C 13 20.09375 13.90625 21 15 21 L 19 21 C 20.09375 21 21 20.09375 21 19 L 21 15 C 21 13.90625 20.09375 13 19 13 Z M 5 15 L 9 15 L 9 19 L 5 19 Z M 15 15 L 19 15 L 19 19 L 15 19 Z M 15 15 "/>
+</g>
+</svg>

src/assets/scss/Global/app-grid.scss

@@ -89,6 +89,7 @@ $g-border: solid 1px $gray5;
   .topnav {
     //reduce width to match #acontent
     width: calc(100% - 1rem);
+    padding-right: 0;
   }
 }
 
@@ -109,7 +110,6 @@ $g-border: solid 1px $gray5;
 }
 
 .v-scroll-page.isSmall {
-  // hide album and artists columns
   .songlist-item {
     grid-template-columns: 1.5rem 2fr 2.5rem 2.5rem;
   }

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] = [

src/router/routes.ts

@@ -5,131 +5,155 @@ import usePlaylistPageStore from "@/stores/pages/playlist";
 import usePlaylistListPageStore from "@/stores/pages/playlists";
 import useArtistPageStore from "@/stores/pages/artist";
 
-const routes = [
-  {
-    path: "/",
-    name: "Home",
-    redirect: "/folder/$home",
-  },
-  {
-    path: "/folder/:path",
-    name: "FolderView",
-    component: () => import("@/views/FolderView.vue"),
-    beforeEnter: async (to: any) => {
-      state.loading.value = true;
-      await useFolderPageStore()
-        .fetchAll(to.params.path)
-        .then(() => {
-          state.loading.value = false;
-        });
-    },
-  },
-  {
-    path: "/playlists",
-    name: "PlaylistList",
-    component: () => import("@/views/PlaylistList.vue"),
-    beforeEnter: async () => {
-      state.loading.value = true;
-      await usePlaylistListPageStore()
-        .fetchAll()
-        .then(() => {
-          state.loading.value = false;
-        });
-    },
-  },
-  {
-    path: "/playlist/:pid",
-    name: "PlaylistView",
-    component: () => import("@/views/PlaylistView/index.vue"),
-    beforeEnter: async (to: any) => {
-      state.loading.value = true;
-      await usePlaylistPageStore()
-        .fetchAll(to.params.pid)
-        .then(() => {
-          state.loading.value = false;
-        });
-    },
-  },
-  {
-    path: "/albums",
-    name: "AlbumsView",
-    component: () => import("@/views/AlbumsExplorer.vue"),
-  },
-  {
-    path: "/albums/:hash",
-    name: "AlbumView",
-    component: () => import("@/views/AlbumView/index.vue"),
-    beforeEnter: async (to: any) => {
-      state.loading.value = true;
-      const store = useAlbumPageStore();
+const home = {
+  path: "/",
+  name: "Home",
+  redirect: "/folder/$home",
+};
 
-      await store.fetchTracksAndArtists(to.params.hash).then(() => {
+const folder = {
+  path: "/folder/:path",
+  name: "FolderView",
+  component: () => import("@/views/FolderView.vue"),
+  beforeEnter: async (to: any) => {
+    state.loading.value = true;
+    await useFolderPageStore()
+      .fetchAll(to.params.path)
+      .then(() => {
         state.loading.value = false;
       });
-    },
   },
-  {
-    path: "/artists",
-    name: "ArtistsView",
-    component: () => import("@/views/ArtistsExplorer.vue"),
-  },
-  {
-    path: "/artists/:hash",
-    name: "ArtistView",
-    component: () => import("@/views/ArtistView"),
-    beforeEnter: async (to: any) => {
-      state.loading.value = true;
+};
 
-      await useArtistPageStore()
-        .getData(to.params.hash)
-        .then(() => {
-          state.loading.value = false;
-        });
-    },
+const playlists = {
+  path: "/playlists",
+  name: "PlaylistList",
+  component: () => import("@/views/PlaylistList.vue"),
+  beforeEnter: async () => {
+    state.loading.value = true;
+    await usePlaylistListPageStore()
+      .fetchAll()
+      .then(() => {
+        state.loading.value = false;
+      });
   },
-  {
-    path: "/settings",
-    name: "SettingsView",
-    component: () => import("@/views/SettingsView.vue"),
+};
+
+const playlistView = {
+  path: "/playlist/:pid",
+  name: "PlaylistView",
+  component: () => import("@/views/PlaylistView/index.vue"),
+  beforeEnter: async (to: any) => {
+    state.loading.value = true;
+    await usePlaylistPageStore()
+      .fetchAll(to.params.pid)
+      .then(() => {
+        state.loading.value = false;
+      });
   },
-  {
-    path: "/search/:page",
-    name: "SearchView",
-    component: () => import("@/views/SearchView"),
+};
+
+const albums = {
+  path: "/albums",
+  name: "AlbumsView",
+  component: () => import("@/views/AlbumsExplorer.vue"),
+};
+
+const albumView = {
+  path: "/albums/:hash",
+  name: "AlbumView",
+  component: () => import("@/views/AlbumView/index.vue"),
+  beforeEnter: async (to: any) => {
+    state.loading.value = true;
+    const store = useAlbumPageStore();
+
+    await store.fetchTracksAndArtists(to.params.hash).then(() => {
+      state.loading.value = false;
+    });
   },
-  {
-    path: "/queue",
-    name: "QueueView",
-    component: () => import("@/views/QueueView.vue"),
-  },
-  {
-    name: "NotFound",
-    path: "/:pathMatch(.*)",
-    component: () => import("@/views/NotFound.vue"),
+};
+
+const artists = {
+  path: "/artists",
+  name: "ArtistsView",
+  component: () => import("@/views/ArtistsExplorer.vue"),
+};
+
+const artistView = {
+  path: "/artists/:hash",
+  name: "ArtistView",
+  component: () => import("@/views/ArtistView"),
+  beforeEnter: async (to: any) => {
+    state.loading.value = true;
+
+    await useArtistPageStore()
+      .getData(to.params.hash)
+      .then(() => {
+        state.loading.value = false;
+      });
   },
+};
+
+const artistDiscography = {
+  path: "/artists/:hash/discography",
+  name: "ArtistDiscographyView",
+  component: () => import("@/views/AlbumsGrid.vue"),
+};
+
+const settings = {
+  path: "/settings",
+  name: "SettingsView",
+  component: () => import("@/views/SettingsView.vue"),
+};
+
+const search = {
+  path: "/search/:page",
+  name: "SearchView",
+  component: () => import("@/views/SearchView"),
+};
+
+const queue = {
+  path: "/queue",
+  name: "QueueView",
+  component: () => import("@/views/QueueView.vue"),
+};
+
+const notFound = {
+  name: "NotFound",
+  path: "/:pathMatch(.*)",
+  component: () => import("@/views/NotFound.vue"),
+};
+
+const routes = [
+  home,
+  folder,
+  playlists,
+  playlistView,
+  albums,
+  albumView,
+  artists,
+  artistView,
+  artistDiscography,
+  settings,
+  search,
+  queue,
+  notFound,
 ];
 
-const keys = [
-  "home",
-  "folder",
-  "playlists",
-  "playlist",
-  "albums",
-  "album",
-  "artists",
-  "settings",
-  "search",
-  "queue",
-  "notfound",
-];
+const Routes = {
+  home: home.name,
+  folder: folder.name,
+  playlists: playlists.name,
+  playlist: playlistView.name,
+  albums: albums.name,
+  album: albumView.name,
+  artists: artists.name,
+  artist: artistView.name,
+  artistDiscography: artistDiscography.name,
+  settings: settings.name,
+  search: search.name,
+  queue: queue.name,
+  notFound: notFound.name,
+};
 
-const routesList = routes.map((route, index) => {
-  const key = keys[index];
-  return { route: route.name };
-});
-
-// TODO: Use dynamic keys in routesList
-//       Try adding an index.ts on Foldered views, import main component and export it ...
-//       Then try importing it here as @/views/ThatView
-
-export { routes, routesList };
+export { routes, Routes };

src/stores/context.ts

@@ -40,6 +40,8 @@ export default defineStore("context-menu", {
         getBoundingClientRect: generateGetBoundingClientRect(e.x, e.y),
       } as VirtualElement;
 
+      console.log(virtualElement.contextElement)
+
       getContextOptions()
         .then((options) => {
           this.options = options;

src/stores/search.ts

@@ -9,7 +9,7 @@ import {
     searchArtists, searchTracks
 } from "../composables/fetch/searchMusic";
 import { Album, Artist, Playlist, Track } from "../interfaces";
-import { Routes } from "./../composables/enums";
+import { Routes } from "@/router/routes";
 import useLoaderStore from "./loader";
 import useTabStore from "./tabs";
 /**

src/views/AlbumsGrid.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="album-grid-view v-scroll-page">
+    <div class="scrollable">
+      <AlbumCard v-for="album in albums" :album="album" :key="Math.random()" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useArtistPageStore from "@/stores/pages/artist";
+import AlbumCard from "@/components/shared/AlbumCard.vue";
+import { getArtistAlbums } from "@/composables/fetch/artists";
+
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { Album } from "@/interfaces";
+
+const artist = useArtistPageStore();
+const route = useRoute();
+
+const albums = ref(<Album[]>[]);
+
+onMounted(() => {
+  // artist.getArtistAlbums(route.params.hash);
+  getArtistAlbums(route.params.hash as string).then((res) => {
+    albums.value = res.appearances;
+    console.log(albums.value);
+  });
+});
+</script>
+
+<style lang="scss">
+.album-grid-view {
+  // border: solid;
+
+  .scrollable {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-gap: $small;
+    padding: 0 1rem;
+  }
+}
+</style>

src/views/SearchView/main.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { Routes } from "@/composables/enums";
+import { Routes } from "@/router/routes";
 import useSearchStore from "@/stores/search";
 import { focusElemByClass } from "@/utils";
 import { computed, onMounted, ref } from "vue";