move global search to right sidebar

src/components/Search/Loader.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="loader" v-if="loading"></div>
+  <div class="loaderx" :class="{ loader: loading, not_loader: !loading }">
+    <div class="content" v-if="!loading">/</div>
+  </div>
 </template>
 
 <script>
@@ -14,12 +16,15 @@ export default {
 </script>
 
 <style lang="scss">
-.loader {
+.loaderx {
   position: absolute;
-  right: 0.65rem;
+  left: 0.65rem;
   top: 0.65rem;
   width: 1.5rem;
   height: 1.5rem;
+}
+
+.loader {
   border: dotted $blue;
   border-radius: 50%;
   animation: spin 0.25s linear infinite;
@@ -33,4 +38,10 @@ export default {
     }
   }
 }
-</style>
+
+.not_loader {
+  border: solid 1px;
+  border-radius: 50%;
+  background-image: url("");
+}
+</style>

src/components/Search/TracksGrid.vue

@@ -4,11 +4,10 @@
     <div class="items">
       <table>
         <tbody>
-          <SongItem
-            v-for="(track, index) in props.tracks"
+          <TrackItem
+            v-for="track in props.tracks"
             :key="track"
-            :song="track"
-            :index="index + 1"
+            :track="track"
           />
         </tbody>
       </table>
@@ -18,8 +17,8 @@
 </template>
 
 <script setup>
-import SongItem from "@/components/shared/SongItem.vue";
 import LoadMore from "./LoadMore.vue";
+import TrackItem from "../shared/TrackItem.vue";
 
 const props = defineProps({
   tracks: {