use reactive breakpoints to conditionally render right sidebar

+ use reactive content div width to remove big img on album page header

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
+    "@vueuse/components": "^9.2.0",
     "@vueuse/core": "^8.5.0",
     "@vueuse/integrations": "^9.2.0",
     "axios": "^0.26.1",

src/App.vue

@@ -13,7 +13,7 @@
   >
     <LeftSidebar />
     <NavBar />
-    <div id="acontent">
+    <div id="acontent" v-element-size="updateContentElemSize">
       <router-view />
     </div>
     <NowPlayingRight />
@@ -26,11 +26,15 @@
 import { onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { onStartTyping } from "@vueuse/core";
+import { vElementSize } from "@vueuse/components";
 
 import useQStore from "@/stores/queue";
 import useModalStore from "@/stores/modal";
 import useContextStore from "@/stores/context";
+import useSettingsStore from "@/stores/settings";
+import { xl } from "./composables/useBreakpoints";
 import handleShortcuts from "@/composables/useKeyboard";
+import { readLocalStorage, writeLocalStorage } from "@/utils";
 
 import Modal from "@/components/modal.vue";
 import NavBar from "@/components/nav/NavBar.vue";
@@ -41,10 +45,7 @@ import RightSideBar from "@/components/RightSideBar/Main.vue";
 import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 import NowPlayingRight from "@/components/RightSideBar/NowPlayingRight.vue";
 import LeftSidebar from "./components/LeftSidebar/index.vue";
-import useSettingsStore from "@/stores/settings";
+import { content_width } from "@/stores/content-width";
-
-import { readLocalStorage, writeLocalStorage } from "@/utils";
-import { xl } from "./stores/breakpoints";
 
 const queue = useQStore();
 const router = useRouter();
@@ -67,7 +68,6 @@ router.afterEach(() => {
 });
 
 onStartTyping((e) => {
-  // if control is pressed return
   if (e.ctrlKey) {
     console.log("ctrl pressed");
   }
@@ -77,6 +77,16 @@ onStartTyping((e) => {
   elem.value = "";
 });
 
+function updateContentElemSize({
+  width,
+  height,
+}: {
+  width: number;
+  height: number;
+}) {
+  content_width.value = width;
+}
+
 function handleWelcomeModal() {
   let welcomeShowCount = readLocalStorage("shown-welcome-message");
 

src/assets/scss/Global/variants.scss

@@ -25,5 +25,5 @@
 }
 
 .shadow-lg {
-  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.175);
+  box-shadow: 0 0 $medium rgba(0, 0, 0, 0.589);
 }

src/components/AlbumView/Header.vue

@@ -16,10 +16,14 @@
     >
       <div class="art">
         <img
-          :src="imguri.artist + album.artistimg"
+          :src="
-          alt=""
+            widthIsSmall
-          class="circular shadow-lg"
+              ? imguri.thumb + album.image
+              : imguri.artist + album.artistimg
+          "
+          class="shadow-lg"
           loading="lazy"
+          :class="`${widthIsSmall ? 'rounded' : 'circular'}`"
         />
       </div>
       <div>
@@ -35,7 +39,7 @@
           </div>
         </div>
         <div class="bottom">
-          <div class="stats">
+          <div class="stats ellip">
             <div class="border rounded-sm pad-sm">
               {{ album.artist }} • {{ album.date }} • {{ album.count }}
               {{ album.count === 1 ? "Track" : "Tracks" }} •
@@ -50,10 +54,9 @@
         </div>
       </div>
     </div>
-    <div
+    <div class="big-img noscroll" v-if="!widthIsSmall">
-      class="rounded shadow-lg image bigimg"
+      <img :src="imguri.thumb + album.image" class="rounded" />
-      :style="{ backgroundImage: `url(${imguri.thumb + album.image})` }"
+    </div>
-    ></div>
   </div>
 </template>
 
@@ -67,6 +70,7 @@ import useAlbumStore from "@/stores/pages/album";
 import { playSources } from "../../composables/enums";
 import { useVisibility, formatSeconds } from "@/utils";
 import { getButtonColor, isLight } from "../../composables/colors/album";
+import { isSmall as widthIsSmall } from "@/stores/content-width";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
@@ -107,20 +111,16 @@ useVisibility(albumheaderthing, handleVisibilityState);
   padding: 1rem;
   height: 100% !important;
   background-color: $black;
-  background-image: linear-gradient(37deg, $black 20%, $gray, $black 90%);
   overflow: hidden;
 
-  .bigimg {
+  .big-img {
-    height: 100%;
+    height: calc(100%);
     width: 16rem;
-    overflow: hidden;
+    margin: auto 0;
 
     img {
       height: 100%;
       aspect-ratio: 1;
-
-      object-fit: cover;
-      object-position: bottom;
     }
   }
 
@@ -169,25 +169,13 @@ useVisibility(albumheaderthing, handleVisibilityState);
         font-weight: bold;
         font-size: 0.8rem;
         margin-bottom: 0.75rem;
-        cursor: text;
-
 
         div {
           width: fit-content;
+          cursor: text;
         }
       }
     }
   }
-
-  @include for-desktop-down {
-    .art > img {
-      height: 6rem;
-      box-shadow: 0 0 1rem $black;
-    }
-
-    .info > .top > .title {
-      font-size: 2rem;
-    }
-  }
 }
 </style>

src/components/FolderView/SongList.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { onUpdated, ref } from "vue";
+import {  ref } from "vue";
 import { useElementSize } from "@vueuse/core";
 import { computed } from "@vue/reactivity";
 

src/components/RightSideBar/SearchInput.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="gsearch-input">
-    <div id="ginner" tabindex="0" class="bg-primary">
+    <div id="ginner" tabindex="0" class="bg-primary rounded-sm">
       <input
         id="globalsearch"
-        v-model="search.query"
+        v-model.trim="search.query"
         placeholder="Search your library"
         type="search"
         @blur.prevent="removeFocusedClass"
@@ -11,7 +11,7 @@
       />
       <SearchSvg />
     </div>
-    <div class="buttons bg-primary">
+    <div class="buttons rounded-sm bg-primary">
       <button
         @click="tabs.switchToQueue"
         v-if="tabs.current !== tabs.tabs.queue"
@@ -58,10 +58,6 @@ function removeFocusedClass() {
   grid-template-columns: 1fr max-content;
   gap: 1rem;
 
-  & > * {
-    border-radius: $medium;
-  }
-
   .buttons {
     display: grid;
     grid-auto-flow: column;
@@ -79,7 +75,7 @@ function removeFocusedClass() {
     display: flex;
     align-items: center;
     gap: $smaller;
-    padding: 0 1rem;
+    padding: 0 $small;
 
     input {
       width: 100%;

src/stores/content-width.ts

@@ -0,0 +1,11 @@
+import { computed } from "vue";
+import { ref } from "@vue/reactivity";
+
+const content_width = ref(0);
+
+const isSmall = computed(() => {
+  return content_width.value < 700;
+});
+
+console.log(content_width);
+export { content_width, isSmall };

yarn.lock

@@ -192,6 +192,15 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.37.tgz#8e6adc3f2759af52f0e85863dfb0b711ecc5c702"
   integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==
 
+"@vueuse/components@^9.2.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-9.2.0.tgz#606e926c3ac0291f0fd7e58b29d4023afcfd0578"
+  integrity sha512-NgQRhq5v1LRZsQq21rJlY8VjEqYg5xWiGErBftY+HaBhHsLAn4PxJxtvbe9uZNdOQlRdWM3UPUF6NO/sWfnyWw==
+  dependencies:
+    "@vueuse/core" "9.2.0"
+    "@vueuse/shared" "9.2.0"
+    vue-demi "*"
+
 "@vueuse/core@9.2.0":
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.2.0.tgz#58e3588b9bc5a69010aa9104b00056ee9ebff738"