Integrate nav

- other minor refactors

src/components/AlbumView/Header.vue

@@ -44,7 +44,7 @@ const props = defineProps<{
 
 .a-header {
   display: grid;
-  grid-template-columns: 13rem 1fr;
+  grid-template-columns: 15rem 1fr;
   padding: 1rem;
   height: 100%;
   background-color: $gray4;
@@ -58,8 +58,8 @@ const props = defineProps<{
     align-items: flex-end;
 
     .image {
-      width: 12rem;
-      height: 12rem;
+      width: 14rem;
+      height: 14rem;
     }
   }
 

src/components/FolderView/Header.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="folder-top flex">
-    <div class="fname">
-      <PlayBtnRect />
-      <div class="ftext">
-        <div class="icon image"></div>
-        <div class="ellip">
-          {{ folder.path.split("/").splice(-1).join("") }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import useFStore from "../../stores/folder";
-import PlayBtnRect from "../shared/PlayBtnRect.vue";
-
-const folder = useFStore();
-</script>
-
-<style lang="scss">
-.folder-top {
-  border-bottom: 1px solid $separator;
-  width: calc(100% - 0.5rem);
-  padding-bottom: $small;
-  height: 3rem;
-}
-
-.folder-top .fname {
-  width: 100%;
-  display: flex;
-  gap: $small;
-  align-items: center;
-
-  .ftext {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 2.5rem;
-    border-radius: $small;
-    background-color: $primary;
-    padding: $small $small $small 2.25rem;
-
-    .icon {
-      position: absolute;
-      left: $small;
-      height: 1.5rem;
-      width: 1.5rem;
-      background-image: url(../../assets/icons/folder.fill.svg);
-      margin-right: $small;
-    }
-
-    @include phone-only {
-      display: none;
-    }
-  }
-}
-</style>

src/components/RightSideBar/queue/playingFrom.vue

@@ -1,9 +1,8 @@
 <template>
   <div id="playing-from" class="rounded" @click="goTo">
-  <div class="abs shadow-sm">Playing From</div>
     <div class="h">
       <div class="icon image" :class="from.type"></div>
-      {{ from.type }}
+     Playing from
     </div>
     <div class="name">
       <div id="to">
@@ -100,27 +99,17 @@ function goTo() {
 
 <style lang="scss">
 #playing-from {
-  background: linear-gradient(-200deg, $gray4 40%, $red, $gray4);
   background-size: 120%;
   padding: 0.75rem;
   cursor: pointer;
   position: relative;
   transition: all .2s ease;
+  background-color: $accent;
 
   &:hover {
     background-position: -4rem;
   }
 
-  .abs {
-    position: absolute;
-    right: $small;
-    bottom: $small;
-    font-size: .9rem;
-    background-color: $gray;
-    padding: $smaller;
-    border-radius: .25rem;
-  }
-
   .name {
     text-transform: capitalize;
     font-weight: bolder;
@@ -133,7 +122,7 @@ function goTo() {
     align-items: center;
     gap: $small;
     text-transform: capitalize;
-    color: rgba(255, 255, 255, 0.664);
+    color: rgba(255, 255, 255, 0.849);
 
     .icon {
       height: 1.25rem;

src/components/nav/NavBar.vue

@@ -1,31 +1,50 @@
 <template>
-  <div class="topnav rounded">
+  <div class="topnav">
     <div class="left">
       <div class="btn">
-        <PlayBtn />
+        <NavButtons />
       </div>
+
       <div class="info">
-        <div class="title">Playlists</div>
+        <div class="title" v-if="$route.name == 'Playlists'">Playlists</div>
+        <div class="folder" v-else-if="$route.name == 'FolderView'">
+          <div class="play">
+            <PlayBtnRect />
+          </div>
+          <div class="fname">
+            <div class="icon image"></div>
+            <div class="ellip">
+              {{ $route.params.path.split("/").splice(-1)[0] }}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
+
     <div class="center rounded">
       <Loader />
     </div>
-    <div class="right"></div>
+    <div class="right">
+      <Search />
+    </div>
   </div>
 </template>
 
 <script setup>
-import PlayBtn from "../shared/PlayBtn.vue";
+import NavButtons from "./NavButtons.vue";
 import Loader from "../shared/Loader.vue";
+import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import Search from "./Search.vue";
 </script>
 
 <style lang="scss">
 .topnav {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  padding: 0 $small;
+  grid-template-columns: 1fr max-content max-content;
+  padding-bottom: 1rem;
   margin: $small $small 0 $small;
+  border-bottom: 1px solid $gray3;
+  height: 3rem;
 
   .left {
     display: flex;
@@ -37,12 +56,46 @@ import Loader from "../shared/Loader.vue";
         font-size: 1.5rem;
         font-weight: bold;
       }
+
+      .folder {
+        display: flex;
+        gap: 1rem;
+
+        .playbtnrect {
+          height: 2.25rem;
+        }
+
+        .fname {
+          position: relative;
+          padding-left: 2.25rem;
+          background-color: $gray4;
+          border-radius: $small;
+          height: 2.25rem;
+          display: flex;
+          align-items: center;
+          padding-right: $small;
+
+          .icon {
+            position: absolute;
+            left: $small;
+            top: $small;
+            width: 1.5rem;
+            height: 1.5rem;
+            background-image: url("../../assets/icons/folder.fill.svg");
+          }
+        }
+      }
     }
   }
 
   .center {
     display: grid;
     place-items: center;
+    margin-right: 1rem;
+  }
+
+  .right {
+    width: 100%;
   }
 }
 </style>

src/components/nav/NavButtons.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="back-forward">
+    <div class="back image" @click="$router.back()"></div>
+    <div class="forward image" @click="$router.forward()"></div>
+  </div>
+</template>
+
+<script setup>
+console.log();
+</script>
+
+<style lang="scss">
+#back-forward {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  padding-right: 1rem;
+  margin-right: $small;
+  border-right: 1px solid $gray3;
+
+  & > div {
+    background-color: $gray4;
+    border-radius: $small;
+    height: 2.25rem;
+    width: 2.25rem;
+    cursor: pointer;
+    background-size: 2rem;
+    transition: all .25s ease-in-out;
+
+    &:hover {
+      background-color: $accent;
+    }
+  }
+
+  .back {
+    background-image: url("../../assets/icons/right-arrow.svg");
+    transform: rotate(180deg);
+  }
+
+  .forward {
+    background-image: url("../../assets/icons/right-arrow.svg");
+  }
+}
+</style>

src/components/nav/Search.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="nav-search">
+    <form>
+      <input
+        type="search"
+        name=""
+        id=""
+        placeholder="Search this playlist"
+        class="rounded"
+      />
+    </form>
+  </div>
+</template>
+
+<style lang="scss">
+#nav-search {
+  form {
+    display: flex;
+    gap: $small;
+
+    input[type="search"] {
+      background-color: $gray5;
+      border: none;
+      padding: $small;
+      width: 100%;
+      min-width: 24rem;
+      color: $white;
+      font-size: 1rem;
+
+      &:focus {
+        outline: solid $accent;
+      }
+    }
+  }
+}
+</style>

src/components/playlists/NewPlaylistCard.vue

@@ -3,6 +3,7 @@
     <div class="gradient rounded"></div>
     <div class="plus image p-image"></div>
     <div>New Playlist</div>
+    <div></div>
   </div>
 </template>
 
@@ -10,30 +11,31 @@
 #new-playlist-card {
   display: grid;
   place-items: center;
-  background-color: $black;
   position: relative;
   cursor: pointer;
 
   .gradient {
     position: absolute;
-    width: calc(100% - 2rem);
-    height: 10rem;
-    top: 1rem;
+    width: calc(100% - 1.5rem);
+    top: 0.75rem;
     background-image: linear-gradient(37deg, $red, $blue);
     background-size: 100%;
-    transition: all .5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    aspect-ratio: 1;
   }
 
   .image {
     background-image: url("../../assets/icons/plus.svg");
     background-size: 5rem;
     z-index: 1;
-    transition: all .5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+    background-color: transparent;
+    margin-bottom: $small;
   }
 
   &:hover {
     .gradient {
-      background-size: 30rem;
+      background-size: 300rem;
     }
     .image {
       transform: rotate(270deg);

src/components/playlists/PlaylistCard.vue

@@ -10,7 +10,7 @@
     <div
       class="image p-image rounded shadow-sm"
       :style="{
-        backgroundImage: `url(${props.playlist.image})`,
+        backgroundImage: `url(${props.playlist.thumb})`,
       }"
     ></div>
     <div class="pbtn">
@@ -37,21 +37,21 @@ import Option from "../shared/Option.vue";
 const props = defineProps<{
   playlist: Playlist;
 }>();
-
 </script>
 
 <style lang="scss">
 .p-card {
   width: 100%;
   padding: 0.75rem;
-  transition: all 0.2s ease;
-  background-image: linear-gradient(37deg, #000000e8, $gray);
+  transition: all 0.25s ease;
+  background-position: -10rem;
   position: relative;
 
   .p-image {
     min-width: 100%;
-    height: 10rem;
     transition: all 0.2s ease;
+    background-color: $gray4;
+    aspect-ratio: 1;
   }
 
   .drop {
@@ -60,6 +60,7 @@ const props = defineProps<{
     right: 1.25rem;
     opacity: 0;
     transition: all 0.25s ease-in-out;
+    display: none;
 
     .drop-btn {
       background-color: $gray3;
@@ -67,6 +68,7 @@ const props = defineProps<{
   }
 
   .pbtn {
+    display: none;
     position: absolute;
     bottom: 4.5rem;
     left: 1.25rem;
@@ -75,10 +77,12 @@ const props = defineProps<{
   }
 
   &:hover {
+    background-color: $gray5;
+
     .drop {
-      transition-delay: .75s;
+      transition-delay: 0.75s;
       opacity: 1;
-      transform: translate(0, -.5rem);
+      transform: translate(0, -0.5rem);
     }
   }
 

src/components/shared/Loader.vue

@@ -1,20 +1,21 @@
 <template>
   <div class="loaderx" :class="{ loader: loading, not_loader: !loading }">
-    <div v-if="!loading">😹</div>
+    <div v-if="!loading">🦋</div>
   </div>
 </template>
 
 <script setup>
 import state from "@/composables/state";
 
-const loading = state.loading
+const loading = state.loading;
 </script>
 
 <style lang="scss">
 .loaderx {
   width: 1.5rem;
-  height:1.5rem;
+  height: 1.5rem;
   border-radius: 50%;
+  user-select: none;
 }
 
 .loader {