responsiveness improvements

+ extract track context menu handler into a composable

src/components/RightSideBar/Home/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="r-home">
-    <UpNext :next="queue.tracklist[queue.next]" :playNext="queue.playNext" />
-    <Recommendations />
+    <UpNext :track="queue.tracklist[queue.next]" :playNext="queue.playNext" />
+    <!-- <Recommendations /> -->
   </div>
 </template>
 
@@ -12,8 +12,7 @@
 </style>
 
 <script setup lang="ts">
-import Recommendations from "./Recommendation.vue";
-import UpNext from "../Queue/upNext.vue";
 import useQStore from "../../../stores/queue";
+import UpNext from "../Queue/upNext.vue";
 const queue = useQStore();
 </script>

src/components/RightSideBar/Main.vue

@@ -29,14 +29,6 @@ const tabs = useTabStore();
 .r-sidebar {
   width: 100%;
 
-  @include phone-only {
-    display: none;
-  }
-
-  @include tablet-landscape {
-    display: none;
-  }
-
   .grid {
     display: flex;
     position: relative;
@@ -44,12 +36,8 @@ const tabs = useTabStore();
 
     .r-content {
       grid-area: content;
-      width: 29rem;
-      // width: 100%;
-
-      // @include tablet-landscape {
-      //   display: none;
-      // }
+      overflow: hidden;
+      width: 100%;
 
       .r-search {
         height: 100%;

src/components/RightSideBar/Queue.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <UpNext :next="queue.tracklist[queue.next]" :playNext="queue.playNext" />
+      <UpNext :track="queue.tracklist[queue.next]" :playNext="queue.playNext" />
       <div class="scrollable-r bg-black rounded">
         <QueueActions />
-        <div class="inner">
-          <TransitionGroup
-            name="queuelist"
-            @mouseenter="setMouseOver(true)"
-            @mouseleave="setMouseOver(false)"
-          >
+        <div
+          class="inner"
+          @mouseenter="setMouseOver(true)"
+          @mouseleave="setMouseOver(false)"
+        >
+          <TransitionGroup name="queuelist">
             <TrackItem
               v-for="(t, index) in queue.tracklist"
-              :key="t.trackid"
+              :key="index"
               :track="t"
               @playThis="queue.play(index)"
               :isCurrent="index === queue.current"
@@ -29,13 +29,13 @@
 <script setup lang="ts">
 import { onUpdated, ref } from "vue";
 
-import { focusElem } from "@/utils";
 import useQStore from "@/stores/queue";
+import { focusElem } from "@/utils";
 
-import UpNext from "./Queue/upNext.vue";
 import TrackItem from "../shared/TrackItem.vue";
 import PlayingFrom from "./Queue/playingFrom.vue";
 import QueueActions from "./Queue/QueueActions.vue";
+import UpNext from "./Queue/upNext.vue";
 
 const queue = useQStore();
 const mouseover = ref(false);
@@ -84,13 +84,10 @@ onUpdated(() => {
     position: relative;
     height: 100%;
     display: grid;
+    grid-template-columns: 1fr;
     grid-template-rows: max-content 1fr max-content;
     gap: $small;
 
-    .left {
-      display: flex;
-      gap: $small;
-    }
 
     .scrollable-r {
       height: 100%;

src/components/RightSideBar/Queue/QueueActions.vue

@@ -36,6 +36,11 @@ const queue = useQueueStore();
   margin: 1rem;
   margin-bottom: 0;
 
+  .left {
+    display: flex;
+    gap: $small;
+  }
+
   .action {
     padding: $smaller;
     padding-right: $small;

src/components/RightSideBar/Queue/upNext.vue

@@ -1,21 +1,18 @@
 <template>
-  <div class="main-item bg-black" @click="playNext">
-    <div class="h">Up Next</div>
-    <div class="itemx shadow">
-      <div
-        class="album-art image"
-        :style="{
-          backgroundImage: `url(&quot;${imguri + next.image}&quot;)`,
-        }"
-      ></div>
-      <div class="tags">
-        <p class="title ellip">{{ next.title }}</p>
-        <hr />
-        <p class="artist ellip">
-          <span v-for="artist in putCommas(next.artists)" :key="artist">{{
-            artist
-          }}</span>
-        </p>
+  <div
+    class="next-track bg-black"
+    :class="{ contexton: context_on }"
+    @click="playNext"
+    @contextmenu.prevent="showMenu"
+  >
+    <div class="nextup abs">next up</div>
+    <img :src="paths.images.thumb + track.image" class="rounded" />
+    <div class="tags">
+      <div class="title ellip">{{ track.title }}</div>
+      <div class="artist ellip">
+        <span v-for="artist in putCommas(track.artists)" :key="artist">{{
+          artist
+        }}</span>
       </div>
     </div>
   </div>
@@ -23,67 +20,68 @@
 
 <script setup lang="ts">
 import { paths } from "@/config";
-import { putCommas } from "@/utils";
 import { Track } from "@/interfaces";
+import { putCommas } from "@/utils";
 
-const imguri = paths.images.thumb;
-defineProps<{
-  next: Track;
+import { showTrackContextMenu as showContext } from "@/composables/context";
+import { ref } from "vue";
+
+const props = defineProps<{
+  track: Track;
   playNext: () => void;
 }>();
+
+const context_on = ref(false);
+
+function showMenu(e: Event) {
+  showContext(e, props.track, context_on);
+}
 </script>
 
 <style lang="scss">
-.main-item {
+.next-track {
   border-radius: 0.5rem;
   position: relative;
 
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 1rem;
+  padding: $small;
+  width: 100%;
+  cursor: pointer;
+
   &:hover {
-    background-color: $accent;
+    background-color: $gray4;
 
     .h {
       background-color: $black;
     }
   }
 
-  .h {
-    position: absolute;
+  .nextup {
     right: $small;
-    bottom: $small;
-    font-size: 0.9rem;
-    background-color: $accent;
+    top: 0;
+    font-size: 0.8rem;
     padding: $smaller;
     border-radius: 0.25rem;
+    font-style: oblique;
+    opacity: 0.5;
   }
 
-  .itemx {
-    display: flex;
-    align-items: center;
-    border-radius: 0.5rem;
-    padding: 0.75rem;
-    cursor: pointer;
-  }
-
-  .album-art {
+  img {
     width: 4.5rem;
-    height: 4.5rem;
-    background-image: url(../../assets/images/null.webp);
-    margin: 0 0.5rem 0 0;
-    border-radius: 0.5rem;
+    aspect-ratio: 1;
+    object-fit: contain;
   }
 
   .tags {
-    hr {
-      border: none;
-      margin: 0.3rem;
-    }
-    .title {
-      width: 20rem;
-      margin: 0;
-    }
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: $small;
+
     .artist {
-      width: 20rem;
-      margin: 0;
       font-size: small;
     }
   }

src/components/RightSideBar/Search/Main.vue

@@ -27,6 +27,7 @@ import TracksGrid from "./TracksGrid.vue";
   position: relative;
   overflow: hidden;
   height: 100%;
+  width: 100%;
 
   .heading {
     padding: $medium;

src/components/RightSideBar/SearchInput.vue

@@ -16,17 +16,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted } from "vue";
 import useSearchStore from "../../stores/search";
 
 const search = useSearchStore();
+let input: HTMLInputElement;
+
+onMounted(() => {
+  input = document.getElementById("ginner") as HTMLInputElement;
+});
 
 function focusThis() {
-  document.getElementById("ginner").classList.add("focused");
+  input.classList.add("focused");
 }
 
 function unfocusThis() {
-  document.getElementById("ginner").classList.remove("focused");
+  input.classList.remove("focused");
 }
 </script>
 
@@ -34,11 +39,6 @@ function unfocusThis() {
 #gsearch-input {
   display: flex;
   height: max-content;
-  // margin-bottom: $smaller;
-
-  @include tablet-landscape {
-    display: none;
-  }
 
   #ginner {
     width: 100%;