From 532d0efabe73f9ecc54078b791b60db3887cc940 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 10 Jan 2023 17:52:09 +0300
Subject: [PATCH] fix scrolling issue in sidebar search components

---
 src/components/PlaylistView/Header.vue        | 24 +++++++-------
 src/components/RightSideBar/Search/Main.vue   |  1 -
 src/components/RightSideBar/Search/Tab.vue    |  4 ++-
 .../RightSideBar/Search/TabsWrapper.vue       | 20 +++++++-----
 src/components/nav/Titles/SearchTitle.vue     | 32 +++++++++++++------
 src/stores/search.ts                          |  6 +++-
 6 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 08bcc3e2..515252af 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -28,24 +28,26 @@
       <span class="status"
         >Last updated {{ info.last_updated }} &#160;|&#160;&#160;</span
       >
-      <span class="edit" @click="editPlaylist">Edit</span>
+      <span class="edit" @click="editPlaylist">Edit&#160;&#160;|</span>
+      <DeleteSvg class="edit"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { storeToRefs } from "pinia";
 
 import useNavStore from "@/stores/nav";
 import usePStore from "@/stores/pages/playlist";
-import useModalStore from "../../stores/modal";
+import useModalStore from "@/stores/modal";
 
+import { paths } from "@/config";
 import { playSources } from "@/composables/enums";
 import { formatSeconds, useVisibility } from "@/utils";
-import { paths } from "../../config";
 
-import { storeToRefs } from "pinia";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import DeleteSvg from "@/assets/icons/delete.svg";
 
 const modal = useModalStore();
 const nav = useNavStore();
@@ -89,7 +91,7 @@ function editPlaylist() {
     position: absolute;
     bottom: 1rem;
     right: 1rem;
-    padding: 0.5rem;
+    padding: $smaller $small;
     background-color: $body;
     color: rgb(255, 255, 255);
     font-size: 0.9rem;
@@ -97,14 +99,12 @@ function editPlaylist() {
     box-shadow: 0 0 1rem rgba(0, 0, 0, 0.479);
     z-index: 12;
 
-    @include phone-only {
-      bottom: 1rem;
-      right: 1rem;
-      font-size: small;
+    display: flex;
+    align-items: center;
 
-      .status {
-        display: none;
-      }
+    svg {
+      transform: scale(.75);
+    margin-bottom: -0.2rem;
     }
 
     .edit {
diff --git a/src/components/RightSideBar/Search/Main.vue b/src/components/RightSideBar/Search/Main.vue
index e8e55fff..4a9a9334 100644
--- a/src/components/RightSideBar/Search/Main.vue
+++ b/src/components/RightSideBar/Search/Main.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="right-search">
     <TabsWrapper
-      :isOnSearchPage="isOnSearchPage"
       :tabs="tabs"
       @switchTab="switchTab"
       :currentTab="currentTab"
diff --git a/src/components/RightSideBar/Search/Tab.vue b/src/components/RightSideBar/Search/Tab.vue
index d52e6743..9c80753a 100644
--- a/src/components/RightSideBar/Search/Tab.vue
+++ b/src/components/RightSideBar/Search/Tab.vue
@@ -1,5 +1,7 @@
 <template>
-  <component :is="getComponent()?.component" v-bind="getComponent()?.props" />
+  <div style="height: 100%">
+    <component :is="getComponent()?.component" v-bind="getComponent()?.props" />
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/RightSideBar/Search/TabsWrapper.vue b/src/components/RightSideBar/Search/TabsWrapper.vue
index 664dafb0..5a1d98ee 100644
--- a/src/components/RightSideBar/Search/TabsWrapper.vue
+++ b/src/components/RightSideBar/Search/TabsWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="right-tabs" :class="tabContent">
+  <div id="right-tabs" :class="{ tabContent: tabContent }">
     <div class="tab-buttons-wrapper">
       <div class="tabheaders rounded-sm no-scroll">
         <div
@@ -34,21 +34,25 @@ const emit = defineEmits<{
 
 <style lang="scss">
 #right-tabs {
-  height: 100%;
   display: grid;
+  position: absolute; // TODO: Find a way to fix scrollability without using position absolute.
+  overflow: hidden;
+
+  height: 100%;
+  width: 100%;
 
   .tab-buttons-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
   }
+}
 
-  #tab-content {
-    height: 100%;
-    overflow: scroll;
-    overflow-x: hidden;
-    padding-bottom: 1rem;
-  }
+#tab-content {
+  height: 100%;
+  overflow: scroll;
+  overflow-x: hidden;
+  padding-bottom: 1rem;
 }
 
 #right-tabs.tabContent {
diff --git a/src/components/nav/Titles/SearchTitle.vue b/src/components/nav/Titles/SearchTitle.vue
index efe03bae..40d5ebce 100644
--- a/src/components/nav/Titles/SearchTitle.vue
+++ b/src/components/nav/Titles/SearchTitle.vue
@@ -1,27 +1,29 @@
 <template>
   <div class="nav-search-input">
     <SearchInput :on_nav="true" />
-    <Tabs
-      :tabs="tabs"
-      :currentTab="($route.params.page as string)"
-      @switchTab="(tab: string) => {
+    <div class="buttons-area">
+      <Tabs
+        :tabs="tabs"
+        :currentTab="($route.params.page as string)"
+        @switchTab="(tab: string) => {
         $router.replace({ name: Routes.search, params: { page: tab }, query: {
           q: search.query,
         } });
         search.switchTab(tab);
       }"
-    />
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Tabs from "@/components/RightSideBar/Search/TabsWrapper.vue";
-import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 import { Routes } from "@/router/routes";
 
 import useSearchStore from "@/stores/search";
-const search = useSearchStore();
+import Tabs from "@/components/RightSideBar/Search/TabsWrapper.vue";
+import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 
+const search = useSearchStore();
 const tabs = ["tracks", "albums", "artists"];
 </script>
 
@@ -31,10 +33,20 @@ const tabs = ["tracks", "albums", "artists"];
   display: grid;
   grid-template-columns: 1fr max-content;
   gap: 1rem;
+  
+  .buttons-area {
+    position: relative;
+    height: 100%;
+    width: 12rem;
+  }
 
   #right-tabs {
-    display: grid;
-    align-items: center;
+    width: max-content;
+    height: max-content;
+
+    .tabheaders {
+      height: 38px;
+    }
   }
 
   .tabheaders {
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 815e516d..8940ecae 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -83,10 +83,14 @@ export default defineStore("search", () => {
     if (!query) return;
 
     searchTracks(query).then((data) => {
-      const scrollable = document.getElementById(
+      let scrollable = document.getElementById(
         "songlist-scroller"
       ) as HTMLElement;
 
+      if (scrollable === null) {
+        scrollable = document.createElement("div");
+      }
+
       waitForScrollEnd(scrollable, 0).then(() => {
         tracks.value = data.tracks;
         tracks.more = data.more;