color changes in search

src/components/RightSideBar/Main.vue

@@ -22,7 +22,7 @@
 
 <script setup>
 import { ref } from "vue";
-import Search from "../Search.vue";
+import Search from "./Search.vue";
 import UpNext from "./Queue.vue";
 import Tabs from "./Tabs.vue";
 import Main from "./Home/Main.vue";
@@ -63,9 +63,9 @@ function changeTab(tab) {
     display: none;
   }
 
-  @include tablet-landscape {
-    width: 3rem;
-  }
+  // @include tablet-landscape {
+  //   width: 3rem;
+  // }
 
   .grid {
     height: 100%;
@@ -77,9 +77,9 @@ function changeTab(tab) {
       width: 29rem;
 
 
-      @include tablet-landscape {
-        display: none;
-      }
+      // @include tablet-landscape {
+      //   display: none;
+      // }
 
       .r-search {
         height: 100%;

src/components/RightSideBar/Search.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="right-search">
+    <div>
+      <div class="input">
+        <Filters :filters="filters" @removeFilter="removeFilter"/>
+        <div class="input-loader border">
+          <input
+              id="search"
+              v-model="query"
+              placeholder="find your music"
+              type="text"
+              @keyup.backspace="removeLastFilter"
+          />
+          <div class="_loader">
+            <Loader/>
+          </div>
+        </div>
+      </div>
+      <div class="separator no-border"></div>
+      <Options @addFilter="addFilter"/>
+    </div>
+    <div class="scrollable">
+      <TracksGrid
+          v-if="tracks.tracks.length"
+          :more="tracks.more"
+          :tracks="tracks.tracks"
+      />
+      <AlbumGrid
+          v-if="albums.albums.length"
+          :albums="albums.albums"
+          :more="albums.more"
+      />
+      <div class="separator no-border"></div>
+      <ArtistGrid
+          v-if="artists.artists.length"
+          :artists="artists.artists"
+          :more="artists.more"
+      />
+      <div
+          v-if="
+          !artists.artists.length &&
+          !tracks.tracks.length &&
+          !albums.albums.length && query.length !== 0
+        "
+          class="no-res"
+      >
+        <div class="no-res-text">
+          No results for <span class="highlight rounded">{{ query }}</span>
+        </div>
+      </div>
+      <div v-else-if="query.length === 0" class="no-res">
+        <div class="no-res-text">Find your music 🔍😀</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {reactive, ref} from "@vue/reactivity";
+
+import {watch} from "@vue/runtime-core";
+import state from "@/composables/state.js";
+import searchMusic from "@/composables/searchMusic.js";
+import useDebouncedRef from "@/composables/useDebouncedRef";
+import AlbumGrid from "@/components/Search/AlbumGrid.vue";
+import ArtistGrid from "@/components/Search/ArtistGrid.vue";
+import TracksGrid from "@/components/Search/TracksGrid.vue";
+import Loader from "@/components/Search/Loader.vue";
+import Options from "@/components/Search/Options.vue";
+import Filters from "@/components/Search/Filters.vue";
+import "@/assets/css/Search/Search.scss";
+
+export default {
+  components: {
+    AlbumGrid,
+    ArtistGrid,
+    TracksGrid,
+    Loader,
+    Options,
+    Filters,
+  },
+
+  setup() {
+    const loading = ref(state.loading);
+    const filters = ref([]);
+
+    const tracks = reactive({
+      tracks: [],
+      more: false,
+    });
+
+    let albums = reactive({
+      albums: [],
+      more: false,
+    });
+
+    const artists = reactive({
+      artists: [],
+      more: false,
+    });
+
+    const query = useDebouncedRef("", 600);
+
+    function addFilter(filter) {
+      if (!filters.value.includes(filter)) {
+        filters.value.push(filter);
+      }
+    }
+
+    function removeFilter(filter) {
+      filters.value = filters.value.filter((f) => f !== filter);
+    }
+
+    let counter = 0;
+
+    function removeLastFilter() {
+      if (query.value === "" || query.value === null) {
+        counter++;
+
+        if (counter > 1 || query.value === null) {
+          filters.value.pop();
+        }
+      }
+    }
+
+    watch(query, (new_query) => {
+      if (query.value === "" || query.value === "  " || query.value.length < 2) {
+        albums.albums = [];
+        artists.artists = [];
+        tracks.tracks = [];
+
+        return;
+      }
+
+
+      searchMusic(new_query).then((res) => {
+        albums.albums = res.albums.albums;
+        albums.more = res.albums.more;
+
+        artists.artists = res.artists.artists;
+        artists.more = res.artists.more;
+
+        tracks.tracks = res.tracks.tracks;
+        tracks.more = res.tracks.more;
+      });
+    });
+
+    return {
+      addFilter,
+      removeFilter,
+      removeLastFilter,
+      tracks,
+      albums,
+      artists,
+      query,
+      filters,
+      loading,
+
+    };
+  },
+};
+</script>