implement reactive breakpoints

+ fix breaking queue page when there's no data

src/App.vue

@@ -8,6 +8,7 @@
     :class="{
       showAltNP: settings.use_sidebar && settings.use_alt_np,
       disableSidebar: !settings.use_sidebar,
+      isSmall: !xl,
     }"
   >
     <LeftSidebar />
@@ -16,8 +17,8 @@
       <router-view />
     </div>
     <NowPlayingRight />
-    <SearchInput v-if="settings.use_sidebar" />
+    <SearchInput v-if="settings.use_sidebar && xl" />
-    <RightSideBar v-if="settings.use_sidebar" />
+    <RightSideBar v-if="settings.use_sidebar && xl" />
   </div>
 </template>
 
@@ -43,6 +44,7 @@ import LeftSidebar from "./components/LeftSidebar/index.vue";
 import useSettingsStore from "@/stores/settings";
 
 import { readLocalStorage, writeLocalStorage } from "@/utils";
+import { xl } from "./stores/breakpoints";
 
 const queue = useQStore();
 const router = useRouter();
@@ -68,7 +70,7 @@ onStartTyping((e) => {
   // if control is pressed return
   if (e.ctrlKey) {
     console.log("ctrl pressed");
-  };
+  }
 
   const elem = document.getElementById("globalsearch") as HTMLInputElement;
   elem.focus();

src/assets/scss/Global/app-grid.scss

@@ -13,23 +13,32 @@
   gap: 1rem;
   margin: $small auto;
 
-  @include for-desktop-down {
+  // @include for-desktop-down {
-    grid-template-columns: min-content 1fr 26rem;
+  //   grid-template-columns: min-content 1fr 26rem;
-  }
+  // }
 
-  @include tablet-landscape {
+  // @include tablet-landscape {
+  //   grid-template-columns: min-content 1fr;
+  //   grid-template-areas:
+  //     "l-sidebar nav"
+  //     "l-sidebar content"
+  //     "l-sidebar content"
+  //     "l-sidebar content";
+  //   .r-sidebar,
+  //   #tabs,
+  //   #gsearch-input {
+  //     display: none;
+  //   }
+  // }
+}
+
+#app-grid.isSmall {
   grid-template-columns: min-content 1fr;
   grid-template-areas:
     "l-sidebar nav"
     "l-sidebar content"
     "l-sidebar content"
     "l-sidebar content";
-    .r-sidebar,
-    #tabs,
-    #gsearch-input {
-      display: none;
-    }
-  }
 }
 
 #app-grid.showAltNP {
@@ -63,6 +72,16 @@
   }
 }
 
+#app-grid.isSmall #acontent {
+  margin-right: -$small;
+  padding-right: calc($small - 1px);
+}
+
+#app-grid.disableSidebar #acontent {
+  margin-right: -$small;
+  padding-right: calc($small - 1px);
+}
+
 #tabs {
   grid-area: tabs;
   height: 3.5rem;

src/assets/scss/moz.scss

@@ -5,4 +5,22 @@
     margin-right: -1rem;
     padding-right: 1rem;
   }
+
+  #app-grid.isSmall #acontent {
+    margin-right: -$small;
+    padding-right: $medium;
+  }
+
+  #app-grid.isSmall #page-search {
+    margin-right: $smaller;
+  }
+
+  #app-grid.disableSidebar #acontent {
+    margin-right: -$small;
+    padding-right: $medium;
+  }
+
+  #app-grid.disableSidebar #page-search {
+    margin-right: $smaller;
+  }
 }

src/components/LeftSidebar/NP/SongCard.vue

@@ -25,10 +25,10 @@
     </router-link>
 
     <div class="bottom">
-      <div class="title ellip t-center">{{ props.track?.title }}</div>
+      <div class="title ellip t-center">{{ props.track?.title || '♥ Hello ♥' }}</div>
       <ArtistName
-        :artists="track?.artists || ['Artist']"
+        :artists="track?.artists || []"
-        :albumartist="track?.albumartist"
+        :albumartist="track?.albumartist || 'Play something'"
         class="artists"
       />
     </div>

src/components/nav/Titles/QueueTitle.vue

@@ -82,7 +82,7 @@ function getSource() {
       };
 
     default:
-      return { name: "Ghost source" };
+      return { name: "👻 Ghost source", location: {} };
   }
 }
 
@@ -113,13 +113,13 @@ const { name, icon: SourceIcon, location } = getSource();
         grid-template-columns: max-content 1fr;
         align-items: center;
         padding: $smaller $small;
+        height: 100%;
       }
 
       svg {
         transform: scale(0.9);
       }
     }
-
   }
 
   .queue-actions {

src/components/shared/ArtistName.vue

@@ -1,6 +1,9 @@
 <template>
   <div v-tooltip="returnArtists()" style="width: auto">
-    <div class="ellip" v-if="artists[0] === '' && artists.length === 1">
+    <div
+      class="ellip"
+      v-if="artists.length === 0 || (artists[0] === '' && artists.length === 1)"
+    >
       <span>{{ albumartist }}</span>
     </div>
     <div class="ellip" v-else>

src/stores/breakpoints.ts

@@ -0,0 +1,7 @@
+import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+
+const xl = breakpoints.greater("xl");
+
+export { xl };