From 7f344b51dbef2ef3f7ec6405cfbc0e72afd83bd7 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Mon, 12 Dec 2022 10:41:23 +0300
Subject: [PATCH] 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                     |   6 +
 src/assets/scss/Global/app-grid.scss          |   2 +-
 src/components/ArtistView/Header.vue          |   6 +-
 src/components/BottomBar.vue                  |   2 +-
 src/components/ContextMenu.vue                |   4 +-
 src/components/FolderView/FolderItem.vue      |   2 +-
 src/components/FolderView/SongList.vue        |   2 +-
 src/components/LeftSidebar/Navigation.vue     |   6 +-
 src/components/LeftSidebar/index.vue          |   2 +-
 src/components/modals/NewPlaylist.vue         |   4 +-
 src/components/nav/NavBar.vue                 |  14 +-
 .../nav/Titles/ArtistDiscographyTitle.vue     | 107 ++++++++
 src/components/nav/Titles/Folder.vue          |   2 +-
 src/components/shared/ArtistCard.vue          |   2 +-
 src/components/shared/ArtistName.vue          |   3 +-
 src/components/shared/NavSearchInput.vue      |   6 +-
 src/router/routes.ts                          | 256 ++++++++++--------
 src/stores/context.ts                         |   2 +
 src/stores/search.ts                          |   2 +-
 src/views/AlbumsGrid.vue                      |  43 +++
 src/views/SearchView/main.vue                 |   2 +-
 yarn.lock                                     |  30 ++
 22 files changed, 361 insertions(+), 144 deletions(-)
 create mode 100644 src/assets/icons/grid.svg
 create mode 100644 src/components/nav/Titles/ArtistDiscographyTitle.vue
 create mode 100644 src/views/AlbumsGrid.vue

diff --git a/src/assets/icons/grid.svg b/src/assets/icons/grid.svg
new file mode 100644
index 0000000..af9ee1e
--- /dev/null
+++ b/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>
diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss
index 9115bfa..ee6456a 100644
--- a/src/assets/scss/Global/app-grid.scss
+++ b/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;
   }
diff --git a/src/components/ArtistView/Header.vue b/src/components/ArtistView/Header.vue
index 8626c24..759d972 100644
--- a/src/components/ArtistView/Header.vue
+++ b/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>
diff --git a/src/components/BottomBar.vue b/src/components/BottomBar.vue
index 6c56f44..fd241d4 100644
--- a/src/components/BottomBar.vue
+++ b/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";
 
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 42869ca..ea7361a 100644
--- a/src/components/ContextMenu.vue
+++ b/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"
diff --git a/src/components/FolderView/FolderItem.vue b/src/components/FolderView/FolderItem.vue
index 5688252..a4006d9 100644
--- a/src/components/FolderView/FolderItem.vue
+++ b/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";
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index fcd8f87..991a0df 100644
--- a/src/components/FolderView/SongList.vue
+++ b/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();
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index a249fa9..3808b27 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/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 = [
   {
diff --git a/src/components/LeftSidebar/index.vue b/src/components/LeftSidebar/index.vue
index 89ca508..002ddae 100644
--- a/src/components/LeftSidebar/index.vue
+++ b/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 />
diff --git a/src/components/modals/NewPlaylist.vue b/src/components/modals/NewPlaylist.vue
index 22f5ffe..8179847 100644
--- a/src/components/modals/NewPlaylist.vue
+++ b/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;
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 821a04f..f40ee2c 100644
--- a/src/components/nav/NavBar.vue
+++ b/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();
diff --git a/src/components/nav/Titles/ArtistDiscographyTitle.vue b/src/components/nav/Titles/ArtistDiscographyTitle.vue
new file mode 100644
index 0000000..0bd9cd2
--- /dev/null
+++ b/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>
diff --git a/src/components/nav/Titles/Folder.vue b/src/components/nav/Titles/Folder.vue
index cddc0a2..a3efa7f 100644
--- a/src/components/nav/Titles/Folder.vue
+++ b/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";
 
diff --git a/src/components/shared/ArtistCard.vue b/src/components/shared/ArtistCard.vue
index 4d914b1..5301f3d 100644
--- a/src/components/shared/ArtistCard.vue
+++ b/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;
diff --git a/src/components/shared/ArtistName.vue b/src/components/shared/ArtistName.vue
index 357f61f..d0c1a61 100644
--- a/src/components/shared/ArtistName.vue
+++ b/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;
diff --git a/src/components/shared/NavSearchInput.vue b/src/components/shared/NavSearchInput.vue
index e7dd0cb..d7f6fa3 100644
--- a/src/components/shared/NavSearchInput.vue
+++ b/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] = [
diff --git a/src/router/routes.ts b/src/router/routes.ts
index d1bda91..3cb0833 100644
--- a/src/router/routes.ts
+++ b/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 };
diff --git a/src/stores/context.ts b/src/stores/context.ts
index 4d91532..8ac50fc 100644
--- a/src/stores/context.ts
+++ b/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;
diff --git a/src/stores/search.ts b/src/stores/search.ts
index c2d92ca..5f27903 100644
--- a/src/stores/search.ts
+++ b/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";
 /**
diff --git a/src/views/AlbumsGrid.vue b/src/views/AlbumsGrid.vue
new file mode 100644
index 0000000..7a75d68
--- /dev/null
+++ b/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>
diff --git a/src/views/SearchView/main.vue b/src/views/SearchView/main.vue
index 84492b8..337a7b3 100644
--- a/src/views/SearchView/main.vue
+++ b/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";
diff --git a/yarn.lock b/yarn.lock
index 6b6a2b3..9d4566a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -92,6 +92,11 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
+"@types/web-bluetooth@^0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz#94e175b53623384bff1f354cdb3197a8d63cdbe5"
+  integrity sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==
+
 "@types/web-bluetooth@^0.0.15":
   version "0.0.15"
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz#d60330046a6ed8a13b4a53df3813c44942ebdf72"
@@ -1187,6 +1192,13 @@ follow-redirects@^1.14.8:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
 
+framesync@6.1.2, framesync@^6.1.0:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.1.2.tgz#755eff2fb5b8f3b4d2b266dd18121b300aefea27"
+  integrity sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==
+  dependencies:
+    tslib "2.4.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1333,6 +1345,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -2022,6 +2039,14 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+style-value-types@5.1.2, style-value-types@^5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.1.2.tgz#6be66b237bd546048a764883528072ed95713b62"
+  integrity sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "2.4.0"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -2124,6 +2149,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+tslib@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"