focus search tab on query change

src/components/RightSideBar/Search/Filters.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="filter">
-    <div
-      class="item"
-      v-for="filter in filters"
-      :key="filter"
-      @click="removeFilter(filter)"
-    >
-      {{ filter }}<span class="cancel image"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["filters"],
-  setup(props, { emit }) {
-    const removeFilter = (filter) => {
-      emit("removeFilter", filter);
-    };
-
-    return {
-      removeFilter,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.gsearch-input .filter {
-  display: flex;
-
-  .item {
-    transition: all 0.2s ease-in-out;
-    background-color: $gray3;
-    height: 2.5rem;
-
-    &:hover {
-      width: 4rem;
-
-      .cancel {
-        position: absolute;
-        right: 0.5rem;
-        width: 1.5rem;
-        height: 1.5rem;
-        background-image: url(../../assets/icons/a.svg);
-        background-size: 70%;
-      }
-    }
-  }
-}
-</style>

src/components/RightSideBar/Search/Options.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="options border rounded">
-    <div class="item info header">Filter by:</div>
-    <div
-      class="item"
-      v-for="option in options"
-      :key="option"
-      @click="search.addFilter(option.icon)"
-    >
-      <div>
-        <span class="icon">{{ option.icon }}</span>
-        <span class="title">&nbsp;&nbsp;{{ option.title }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import useSearchStore from "../../stores/gsearch";
-
-const search = useSearchStore();
-
-const options = [
-  {
-    title: "Track",
-    icon: "🎵",
-  },
-  {
-    title: "Album",
-    icon: "💿",
-  },
-  {
-    title: "Artist",
-    icon: "👤",
-  },
-  {
-    title: "Playlist",
-    icon: "🎧",
-  },
-  {
-    title: "Folder",
-    icon: "📁",
-  },
-];
-</script>
-
-<style lang="scss">
-.right-search .options {
-  display: flex;
-  margin-bottom: $small;
-
-  .item {
-    margin: $small;
-    width: 2.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    transition: all 0.2s ease-in-out;
-    position: relative;
-    background-color: $gray3;
-
-    .title {
-      position: absolute;
-      left: 1.5rem;
-      top: 0.5rem;
-      visibility: hidden;
-    }
-
-    .icon {
-      position: absolute;
-      top: 0.5rem;
-      left: 0.75rem;
-    }
-
-    &:hover {
-      width: 5.5rem;
-      background-color: $gray5;
-
-      .title {
-        visibility: visible;
-      }
-    }
-  }
-
-  .header {
-    width: 5.5rem;
-  }
-}
-</style>

src/components/RightSideBar/Tab.vue

@@ -1,15 +1,13 @@
 <template>
-  <div v-show="name == selectedTab">
+  <div v-show="name == s.currentTab">
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { inject } from "vue";
+import useSearchStore from "../../stores/search";
-
+const s = useSearchStore();
 defineProps<{
   name: string;
 }>();
-
-const selectedTab = inject("currentTab");
 </script>

src/components/RightSideBar/TabsWrapper.vue

@@ -5,7 +5,8 @@
         class="tab rounded"
         v-for="slot in $slots.default()"
         :key="slot.key"
-        @click="currentTab = slot.props.name"
+        @click="s.changeTab(slot.props.name)"
+        :class="{ activetab: slot.props.name === s.currentTab }"
       >
         {{ slot.props.name }}
       </div>
@@ -17,10 +18,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, provide } from "vue";
+import useSearchStore from "../../stores/search";
 
-const currentTab = ref("Tracks");
+const s = useSearchStore();
-provide("currentTab", currentTab);
 </script>
 
 <style lang="scss">
@@ -31,7 +31,6 @@ provide("currentTab", currentTab);
   grid-template-rows: min-content 1fr;
 
   #tabheaders {
-    border: solid 1px rgb(0, 68, 255);
     display: flex;
     gap: $small;
     margin: $small 0;
@@ -40,6 +39,11 @@ provide("currentTab", currentTab);
       background-color: $gray3;
       padding: $small;
       text-transform: capitalize;
+      cursor: pointer;
+    }
+
+    .activetab {
+      background-color: $accent;
     }
   }
 

src/stores/search.ts

@@ -11,7 +11,7 @@ import {
 } from "../composables/searchMusic";
 import { watch } from "vue";
 import useDebouncedRef from "../composables/useDebouncedRef";
-
+import useTabStore from "./tabs";
 /**
  *
  * @param id  The id of the element of the div to scroll
@@ -28,7 +28,8 @@ function scrollOnLoad(id: string) {
 }
 
 export default defineStore("search", () => {
-  const query = useDebouncedRef("", 600);
+  const query = useDebouncedRef(null, 600);
+  const currentTab = ref("tracks");
 
   const tracks = reactive({
     value: <Track[]>[],
@@ -118,17 +119,30 @@ export default defineStore("search", () => {
     () => query.value,
     (newQuery) => {
       search(newQuery);
+      const tabs = useTabStore();
+
+      if (tabs.current !== "search") {
+        tabs.switchToSearch();
+      }
     }
   );
 
+  function changeTab(tab: string) {
+    currentTab.value = tab;
+  }
+
+  setTimeout(() => {}, 3000);
+
   return {
     tracks,
     albums,
     artists,
     query,
+    currentTab,
     search,
     loadTracks,
     loadAlbums,
     loadArtists,
+    changeTab,
   };
 });