feat: check screen size to enable or disable settings

+ redesign (again!) the playlist cards

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,
 });