feat: check screen size to enable or disable settings

+ redesign (again!) the playlist cards

src/App.vue

@@ -8,8 +8,9 @@
     :class="{
       showAltNP: settings.use_sidebar && settings.use_alt_np,
       disableSidebar: !settings.use_sidebar,
-      extendWidth: settings.extend_width,
+      extendWidth: settings.extend_width && settings.extend_width_enabled,
       isSmall: !xl,
+      addBorderRight: xxl,
     }"
   >
     <LeftSidebar />
@@ -33,7 +34,7 @@ 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 { xl, xxl } from "./composables/useBreakpoints";
 import handleShortcuts from "@/composables/useKeyboard";
 import { readLocalStorage, writeLocalStorage } from "@/utils";
 

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

@@ -13,8 +13,8 @@
   margin: 0 auto;
   margin-top: -$small;
   max-width: 1720px;
-  padding-right: $medium;
-  border-right: solid 1px $gray4;
+  // padding-right: $medium;
+  // border-right: solid 1px $gray4;
   padding-top: $small;
 }
 
@@ -24,6 +24,11 @@
   max-width: 100%;
 }
 
+#app-grid.addBorderRight {
+  border-right: solid 1px $gray4;
+  padding-right: $medium;
+}
+
 #app-grid.isSmall {
   grid-template-columns: min-content 1fr;
   grid-template-areas:

src/assets/scss/_variables.scss

@@ -45,7 +45,7 @@ $secondary: $gray5;
 $danger: $red;
 $track-hover: $gray4;
 $context: black;
-$playlist-card-bg: #46474C;
+$playlist-card-bg: $gray4;
 
 // SVG COLORS
 $default: $accent;

src/components/PlaylistsList/PlaylistCard.vue

@@ -1,21 +1,23 @@
 <template>
   <router-link
-    :to="{ name: 'PlaylistView', params: { pid: props.playlist.playlistid } }"
-    :playlist="props.playlist"
+    :to="{ name: 'PlaylistView', params: { pid: playlist.playlistid } }"
     class="p-card rounded noscroll"
   >
-    <img :src="imguri + props.playlist.thumb" />
-    <div class="overlay rounded pad-lg">
+    <img
+      :src="imguri + playlist.thumb"
+      class="rounded border"
+      :class="{ noimg: !playlist.thumb }"
+    />
+    <div class="overlay rounded">
       <div class="p-name ellip">{{ playlist.name }}</div>
       <div class="p-count">
-        {{ playlist.count + ` ${playlist.count == 1 ? "Track" : "Tracks"}` }}
+        {{ playlist.count + ` ${playlist.count === 1 ? "Track" : "Tracks"}` }}
       </div>
     </div>
   </router-link>
 </template>
 
 <script setup lang="ts">
-import play from "@/composables/usePlayFrom";
 import { paths } from "../../config";
 import { Playlist } from "../../interfaces";
 
@@ -28,28 +30,24 @@ const props = defineProps<{
 
 <style lang="scss">
 .p-card {
-  position: relative;
   background-color: $playlist-card-bg;
-  height: 10rem;
+  display: grid;
+  grid-template-rows: 1fr max-content;
+  padding: 1rem;
+  gap: $small;
 
   img {
     width: 100%;
-    height: 100%;
-    aspect-ratio: 1/1.2;
+    aspect-ratio: 1;
     object-fit: cover;
     transition: all 0.5s ease;
   }
 
+  img.noimg {
+    outline: 1px solid $gray2;
+  }
+
   .overlay {
-    position: absolute;
-    top: 0;
-    background-image: linear-gradient(
-      to top,
-      rgba(0, 0, 0, 0.55),
-      transparent 60%
-    );
-    height: 100%;
-    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;

src/components/SettingsView/Group.vue

@@ -15,7 +15,7 @@
         </div>
         <div class="options">
           <Switch
-            v-if="setting.type == SettingType.switch"
+            v-if="setting.type == SettingType.binary"
             @click="setting.action()"
             :state="setting.source()"
           />

src/composables/useBreakpoints.ts

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

src/interfaces/settings.ts

@@ -2,7 +2,7 @@ export enum SettingType {
   text,
   select,
   multiselect,
-  switch,
+  binary,
 }
 
 export interface SettingOption {

src/settings/general/extend-width.ts

@@ -5,9 +5,10 @@ const settings = useSettingsStore;
 
 const extend_to_full_width: Setting = {
   title: "Extend app to full screen width",
-  type: SettingType.switch,
+  type: SettingType.binary,
   source: () => settings().extend_width,
   action: () => settings().toggleExtendWidth(),
+  inactive: () => !settings().extend_width_enabled,
 };
 
 export default [extend_to_full_width];

src/settings/general/now-playing.ts

@@ -5,7 +5,7 @@ const settings = useSettingsStore;
 
 const use_alt_np: Setting = {
   title: "Use alternate now playing card",
-  type: SettingType.switch,
+  type: SettingType.binary,
   source: () => settings().use_alt_np,
   inactive: () => settings().disable_show_alt_np,
   action: () => settings().toggleUseRightNP(),

src/settings/general/sidebar.ts

@@ -5,7 +5,7 @@ const settings = useSettingsStore;
 
 const use_sidebar: Setting = {
   title: "Use right sidebar",
-  type: SettingType.switch,
+  type: SettingType.binary,
   source: () => settings().use_sidebar,
   action: () => settings().toggleDisableSidebar(),
 };

src/stores/content-width.ts

@@ -2,9 +2,10 @@ import { computed } from "vue";
 import { ref } from "@vue/reactivity";
 
 const content_width = ref(0);
+const window_width = ref(0);
 
 const isSmall = computed(() => {
   return content_width.value < 700;
 });
 
-export { content_width, isSmall };
+export { content_width, window_width, isSmall };

src/stores/settings/index.ts

@@ -1,3 +1,4 @@
+import { xxl, xl } from "@/composables/useBreakpoints";
 import { defineStore } from "pinia";
 
 export default defineStore("settings", {
@@ -20,17 +21,20 @@ export default defineStore("settings", {
   },
   getters: {
     show_alt_np(): boolean {
-      return this.use_sidebar && this.use_alt_np;
+      return xl.value && this.use_sidebar && this.use_alt_np;
     },
     show_default_np(): boolean {
       return !this.show_alt_np;
     },
     disable_show_alt_np(): boolean {
-      return !this.use_sidebar;
+      return !xl.value || !this.use_sidebar;
     },
     hide_queue_page(): boolean {
       return this.use_sidebar;
     },
+    extend_width_enabled(): boolean {
+     return xxl.value
+    },
   },
   persist: true,
 });

src/views/PlaylistList.vue

@@ -24,7 +24,7 @@ const pStore = usePStore();
   scrollbar-color: $gray2 transparent;
 
   .grid {
-    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
     gap: 1rem;
   }
 }