add extend width setting

- has error: is inverted

src/App.vue

@@ -8,6 +8,7 @@
     :class="{
       showAltNP: settings.use_sidebar && settings.use_alt_np,
       disableSidebar: !settings.use_sidebar,
+      extendWidth: settings.extend_width,
       isSmall: !xl,
     }"
   >

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

@@ -7,13 +7,17 @@
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
     "l-sidebar content bottombar";
-  max-width: 1720px;
   height: calc(100vh);
-  margin: 0 auto;
   gap: 1rem;
+  padding: $small 0;
+  margin: 0 auto;
+  margin-top: -$small;
+  max-width: 1720px;
+}
+
+#app-grid.extendWidth {
   padding-right: $medium;
   border-right: solid 1px $gray4;
-  margin-top: -$small;
   padding-top: $small;
 }
 

src/components/SettingsView/Group.vue

@@ -70,6 +70,7 @@ defineProps<{
     .title {
       margin: auto 0;
       user-select: none;
+      cursor: pointer;
     }
   }
 }

src/settings/general/extend-width.ts

@@ -0,0 +1,13 @@
+import { Setting, SettingType } from "@/interfaces/settings";
+import useSettingsStore from "@/stores/settings";
+
+const settings = useSettingsStore;
+
+const extend_to_full_width: Setting = {
+  title: "Extend app to full screen width",
+  type: SettingType.switch,
+  source: () => settings().extend_width,
+  action: () => settings().toggleExtendWidth(),
+};
+
+export default [extend_to_full_width];

src/settings/general/index.ts

@@ -1,12 +1,13 @@
 import { SettingCategory } from "@/interfaces/settings";
 import nowPlaying from "./now-playing";
 import sidebarSettings from "./sidebar";
+import extendWidth from "./extend-width";
 
 export default {
   title: "General",
   groups: [
     {
-      settings: [...sidebarSettings, ...nowPlaying],
+      settings: [...sidebarSettings, ...nowPlaying, ...extendWidth],
     },
   ],
 } as SettingCategory;

src/stores/settings/index.ts

@@ -4,6 +4,7 @@ export default defineStore("settings", {
   state: () => ({
     use_alt_np: false,
     use_sidebar: true,
+    extend_width: false,
   }),
   actions: {
     toggleUseRightNP() {
@@ -13,6 +14,9 @@ export default defineStore("settings", {
     toggleDisableSidebar() {
       this.use_sidebar = !this.use_sidebar;
     },
+    toggleExtendWidth() {
+      this.extend_width = !this.extend_width;
+    },
   },
   getters: {
     show_alt_np(): boolean {