Implement fuzzy page search using fuse.js (#86)

src/components/nav/Titles/APTitle.vue

@@ -1,19 +1,33 @@
 <template>
-  <div class="title albumnavtitle">
-    <PlayBtn :source="things.source" :store="things.store" />
-    <div class="ellip">
-      {{ things.text }}
+  <div
+    class="title grid albumnavtitle"
+    :class="{
+      hide_play: header_shown,
+    }"
+  >
+    <div class="first grid">
+      <PlayBtn :source="things.source" :store="things.store" />
+      <div class="ellip">
+        {{ things.text }}
+      </div>
     </div>
+    <Input :page="($route.name as string)" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useRoute } from "vue-router";
+import { computed } from "@vue/reactivity";
+
 import PlayBtn from "@/components/shared/PlayBtn.vue";
 import { playSources, Routes } from "@/composables/enums";
 import useAlbumStore from "@/stores/pages/album";
 import usePStore from "@/stores/pages/playlist";
-import { computed } from "@vue/reactivity";
-import { useRoute } from "vue-router";
+import Input from "@/components/shared/Input.vue";
+
+defineProps<{
+  header_shown: boolean;
+}>();
 
 const things = computed(() => {
   const route = useRoute();
@@ -46,10 +60,22 @@ const things = computed(() => {
 
 <style lang="scss">
 .albumnavtitle {
-  display: flex;
+  grid-template-columns: max-content 1fr;
   align-items: center;
+  justify-content: space-between;
   gap: $small;
-  outline: solid 1px $gray3;
   height: 100%;
+
+  .first {
+    grid-template-columns: max-content 1fr;
+    gap: $small;
+    align-items: center;
+  }
+}
+
+.albumnavtitle.hide_play {
+  .first {
+    visibility: hidden;
+  }
 }
 </style>

src/components/nav/Titles/Folder.vue

@@ -1,37 +1,43 @@
 <template>
   <div id="folder-nav-title">
     <div class="folder">
-      <div class="fname">
-        <div
-          class="icon image"
-          @click="
-            $router.push({ name: Routes.folder, params: { path: '$home' } })
-          "
-        ></div>
-        <div class="paths">
+      <div class="fname-wrapper">
+        <div class="fname">
           <div
-            class="path"
-            v-for="path in subPaths.slice(1)"
-            :key="path.path"
-            :class="{ inthisfolder: path.active }"
-          >
-            <router-link
-              class="text"
-              :to="{ name: Routes.folder, params: { path: path.path } }"
-              >{{ path.name }}</router-link
+            class="icon image"
+            @click="
+              $router.push({ name: Routes.folder, params: { path: '$home' } })
+            "
+          ></div>
+          <div class="paths">
+            <div
+              class="path"
+              v-for="path in subPaths.slice(1)"
+              :key="path.path"
+              :class="{ inthisfolder: path.active }"
             >
+              <router-link
+                class="text"
+                :to="{ name: Routes.folder, params: { path: path.path } }"
+                >{{ path.name }}</router-link
+              >
+            </div>
           </div>
         </div>
       </div>
+      <div>
+        <Input :page="Routes.folder" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { focusElem } from "@/utils";
-import { subPath } from "@/interfaces";
-import { onUpdated } from "vue";
+import Input from "@/components/shared/Input.vue";
 import { Routes } from "@/composables/enums";
+import { subPath } from "@/interfaces";
+import { focusElem } from "@/utils";
+import { onUpdated } from "vue";
 
 defineProps<{
   subPaths: subPath[];
@@ -44,24 +50,16 @@ onUpdated(() => {
 
 <style lang="scss">
 #folder-nav-title {
-  overflow: hidden;
   width: 100%;
 
   .folder {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr max-content;
     gap: $small;
 
-    .playbtnrect {
-      height: 2.25rem;
-    }
-
-    .drop-btn {
-      width: 2.25rem;
-
-      .drop-icon {
-        height: 2.25rem;
-        width: 2.25rem;
-      }
+    .fname-wrapper {
+      width: 100%;
+      overflow: auto;
     }
 
     .fname {
@@ -70,8 +68,9 @@ onUpdated(() => {
       height: 2.25rem;
       display: flex;
       align-items: center;
-      overflow: auto;
       padding-right: $smaller;
+      width: fit-content;
+      max-width: 100%;
 
       .icon {
         height: 2rem;
@@ -79,7 +78,6 @@ onUpdated(() => {
         background-image: url("../../../assets/icons/folder.fill.svg");
         background-size: 1.5rem;
         margin-left: $smaller;
-        cursor: pointer;
       }
 
       .paths {
@@ -97,10 +95,6 @@ onUpdated(() => {
           white-space: nowrap;
           margin: auto 0;
 
-          a {
-            cursor: default;
-          }
-
           .text {
             padding: $smaller;
             border-radius: $smaller;

src/components/nav/Titles/QueueTitle.vue

@@ -20,10 +20,10 @@ import QueueActions from "@/components/RightSideBar/Queue/QueueActions.vue";
 import { FromOptions, Routes } from "@/composables/enums";
 import useQueueStore from "@/stores/queue";
 
-import FolderSvg from "@/assets/icons/folder.svg";
-import SearchSvg from "@/assets/icons/search.svg";
 import AlbumSvg from "@/assets/icons/album.svg";
+import FolderSvg from "@/assets/icons/folder.svg";
 import PlaylistSvg from "@/assets/icons/playlist.svg";
+import SearchSvg from "@/assets/icons/search.svg";
 
 import { RouteLocationRaw } from "vue-router";
 
@@ -120,9 +120,6 @@ const { name, icon: SourceIcon, location } = getSource();
       }
     }
 
-    button {
-      cursor: pointer;
-    }
   }
 
   .queue-actions {

src/components/nav/Titles/SearchTitle.vue

@@ -23,6 +23,7 @@ import SearchInput from "@/components/RightSideBar/SearchInput.vue";
     #ginner {
       max-width: 30rem;
       margin: 0 auto;
+      border-radius: $small;
     }
 
     .buttons {

src/components/nav/Titles/SettingsTitle.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="settings-nav">
+    <SimpleTitle :text="'Settings'" />
+    <Nav />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SimpleTitle from "./SimpleTitle.vue";
+import Nav from "@/components/SettingsView/Nav.vue";
+</script>
+
+<style lang="scss">
+.settings-nav {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+}
+</style>