fix current track in queue auto scroll position

- add another inner container to limit the offset
- auto scroll current track to container start
- add todo file

src/components/RightSideBar/Queue.vue

@@ -2,19 +2,21 @@
   <div class="up-next">
     <div class="r-grid">
       <UpNext :next="queue.next" :playNext="queue.playNext" />
-      <div
-        class="scrollable-r border rounded"
-        @mouseenter="setMouseOver(true)"
-        @mouseleave="setMouseOver(false)"
-      >
-        <TrackItem
-          v-for="t in queue.tracks"
-          :key="t.trackid"
-          :track="t"
-          @playThis="queue.play(t)"
-          :isCurrent="t.trackid === queue.current.trackid"
-          :isPlaying="queue.playing"
-        />
+      <div class="scrollable-r border rounded">
+        <div
+          class="inner"
+          @mouseenter="setMouseOver(true)"
+          @mouseleave="setMouseOver(false)"
+        >
+          <TrackItem
+            v-for="t in queue.tracks"
+            :key="t.trackid"
+            :track="t"
+            @playThis="queue.play(t)"
+            :isCurrent="t.trackid === queue.current.trackid"
+            :isPlaying="queue.playing"
+          />
+        </div>
       </div>
       <PlayingFrom :from="queue.from" />
     </div>
@@ -62,10 +64,17 @@ onUpdated(() => {
 
     .scrollable-r {
       height: 100%;
-      padding: $small;
-      overflow: auto;
-      overflow-x: hidden;
-      scrollbar-color: grey transparent;
+      padding: $small 0 $small $small;
+      overflow: hidden;
+
+      .inner {
+        height: 100%;
+        overflow: scroll;
+        margin-top: 1rem;
+        padding-right: $small;
+        overflow-x: hidden;
+        scrollbar-color: grey transparent;
+      }
     }
   }
 }

src/components/RightSideBar/Search/Main.vue

@@ -11,7 +11,6 @@
         <ArtistGrid />
       </Tab>
     </TabsWrapper>
-    <component :is="s.currentTab" />
   </div>
 </template>
 
@@ -22,8 +21,6 @@ import TracksGrid from "./TracksGrid.vue";
 import AlbumGrid from "./AlbumGrid.vue";
 import ArtistGrid from "./ArtistGrid.vue";
 import "@/assets/css/Search/Search.scss";
-import useSearchStore from "@/stores/search";
-const s = useSearchStore();
 
 </script>
 

src/components/RightSideBar/Search/Tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="name == s.currentTab"  v-motion-slide-visible-top>
+  <div v-show="name == s.currentTab" v-motion-slide-visible-top>
     <slot />
   </div>
 </template>

src/components/RightSideBar/Search/TracksGrid.vue

@@ -26,7 +26,7 @@ const queue = useQStore();
 const search = useSearchStore();
 
 function loadMore() {
-    search.updateLoadCounter("tracks", 5);
+  search.updateLoadCounter("tracks", 5);
   search.loadTracks(search.loadCounter.tracks);
 }