show use_alt_np as disabled if dependent setting is disabled

+ add getters to settings store
+ add use sidebar setting

src/App.vue

@@ -5,7 +5,8 @@
   <div
     id="app-grid"
     :class="{
-      showAltNP: settings.use_alt_np,
+      showAltNP: settings.use_sidebar && settings.use_alt_np,
+      disableSidebar: !settings.use_sidebar,
     }"
   >
     <LeftSidebar />
@@ -14,8 +15,8 @@
       <router-view />
     </div>
     <NowPlayingRight />
-    <SearchInput />
+    <SearchInput v-if="settings.use_sidebar" />
-    <RightSideBar />
+    <RightSideBar v-if="settings.use_sidebar" />
   </div>
 </template>
 

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

@@ -42,6 +42,15 @@
   }
 }
 
+#app-grid.disableSidebar {
+  grid-template-columns: min-content 1fr;
+  grid-template-areas:
+    "l-sidebar nav"
+    "l-sidebar content"
+    "l-sidebar content"
+    "l-sidebar content";
+}
+
 #acontent {
   grid-area: content;
   max-width: 1955px;

src/components/LeftSidebar/index.vue

@@ -5,7 +5,7 @@
       <Navigation />
     </div>
 
-    <nowPlaying v-if="!settings.use_alt_np" />
+    <nowPlaying v-if="settings.show_default_np" />
   </div>
 </template>
 

src/components/RightSideBar/NowPlayingRight.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar bg-primary pad-medium rounded" v-if="settings.use_alt_np">
+  <div class="b-bar bg-primary pad-medium rounded" v-if="settings.show_alt_np">
     <div class="info">
       <img
         :src="paths.images.thumb + queue.currenttrack?.image"

src/components/SettingsView/Group.vue

@@ -5,7 +5,11 @@
       <div class="desc" v-if="group.desc">{{ group.desc }}</div>
     </div>
     <div class="setting rounded bg-primary pad-lg">
-      <div v-for="(setting, index) in group.settings" :key="index">
+      <div
+        v-for="(setting, index) in group.settings"
+        :key="index"
+        :class="{ inactive: setting.inactive && setting.inactive() }"
+      >
         <div class="title">
           {{ setting.title }}
         </div>
@@ -52,6 +56,11 @@ defineProps<{
   .setting {
     display: grid;
     gap: 1rem;
+
+    .inactive {
+      opacity: 0.5;
+      pointer-events: none;
+    }
   }
 
   .setting > * {

src/components/nav/NavBar.vue

@@ -8,17 +8,14 @@
           overflow: $route.name === Routes.search ? 'visible' : 'hidden',
         }"
       >
-        <APTitle v-show="showAPTitle" />
+        <APTitle v-if="showAPTitle" />
         <SimpleTitle
-          v-show="$route.name == Routes.playlists"
+          v-if="$route.name == Routes.playlists"
           :text="'Playlists'"
         />
-        <SimpleTitle
+        <SimpleTitle v-if="$route.name == Routes.settings" :text="'Settings'" />
-          v-show="$route.name == Routes.settings"
+        <Folder v-if="$route.name == Routes.folder" :subPaths="subPaths" />
-          :text="'Settings'"
+        <SearchTitle v-if="$route.name == Routes.search" />
-        />
-        <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
-        <SearchTitle v-show="$route.name == Routes.search" />
       </div>
     </div>
 
@@ -89,6 +86,7 @@ watch(
   display: grid;
   grid-template-columns: 1fr min-content;
   width: 100%;
+  gap: $small;
 
   .left {
     display: grid;
@@ -97,7 +95,6 @@ watch(
 
     .info {
       margin: auto 0;
-      // overflow: hidden;
 
       .title {
         font-size: 1.5rem;

src/components/nav/Titles/Folder.vue

@@ -2,18 +2,24 @@
   <div id="folder-nav-title">
     <div class="folder">
       <div class="fname">
-        <div class="icon image"></div>
+        <div
+          class="icon image"
+          @click="
+            $router.push({ name: Routes.folder, params: { path: '$home' } })
+          "
+        ></div>
         <div class="paths">
           <div
             class="path"
-            v-for="path in subPaths"
+            v-for="path in subPaths.slice(1)"
             :key="path.path"
             :class="{ inthisfolder: path.active }"
-            @click="
-              $router.push({ name: 'FolderView', params: { path: path.path } })
-            "
           >
-            <span class="text">{{ path.name }}</span>
+            <router-link
+              class="text"
+              :to="{ name: Routes.folder, params: { path: path.path } }"
+              >{{ path.name }}</router-link
+            >
           </div>
         </div>
       </div>
@@ -25,6 +31,7 @@
 import { focusElem } from "@/utils";
 import { subPath } from "@/interfaces";
 import { onUpdated } from "vue";
+import { Routes } from "@/composables/enums";
 
 defineProps<{
   subPaths: subPath[];
@@ -43,7 +50,6 @@ onUpdated(() => {
   .folder {
     display: flex;
     gap: $small;
-    width: inherit;
 
     .playbtnrect {
       height: 2.25rem;
@@ -64,7 +70,6 @@ onUpdated(() => {
       height: 2.25rem;
       display: flex;
       align-items: center;
-      width: 100%;
       overflow: auto;
       padding-right: $smaller;
 
@@ -74,7 +79,7 @@ onUpdated(() => {
         background-image: url("../../../assets/icons/folder.fill.svg");
         background-size: 1.5rem;
         margin-left: $smaller;
-        background-position: 65% 50%;
+        cursor: pointer;
       }
 
       .paths {
@@ -91,7 +96,10 @@ onUpdated(() => {
         .path {
           white-space: nowrap;
           margin: auto 0;
-          cursor: default;
+
+          a {
+            cursor: default;
+          }
 
           .text {
             padding: $smaller;
@@ -102,13 +110,11 @@ onUpdated(() => {
             content: "/";
             font-size: small;
             margin-right: $smaller;
-            opacity: .25;
+            opacity: 0.25;
           }
 
           &:first-child {
-            &::before {
+            display: none;
-              display: none;
-            }
           }
 
           &:last-child {

src/interfaces/settings.ts

@@ -14,6 +14,7 @@ export interface Setting {
   title: string;
   type: SettingType;
   options?: SettingOption[];
+  inactive?: () => boolean;
   action: (arg0?: any) => void;
   source: () => any;
 }

src/settings/general/now-playing.ts

@@ -1,13 +1,20 @@
-import { SettingType } from "@/interfaces/settings";
+import { Setting, SettingType } from "@/interfaces/settings";
 import useSettingsStore from "@/stores/settings";
 
 const settings = useSettingsStore;
 
-export default [
+const use_alt_np: Setting = {
-  {
+  title: "Use alternate now playing card",
-    title: "Use alternate now playing card",
+  type: SettingType.switch,
-    type: SettingType.switch,
+  source: () => settings().use_alt_np,
-    source: () => settings().use_alt_np,
+  inactive: () => settings().disable_show_alt_np,
-    action: () => settings().toggleUseRightNP(),
+  action: () => settings().toggleUseRightNP(),
-  },
+};
-];
+const use_sidebar: Setting = {
+  title: "Use right sidebar",
+  type: SettingType.switch,
+  source: () => settings().use_sidebar,
+  action: () => settings().toggleDisableSidebar(),
+};
+
+export default [use_sidebar, use_alt_np];

src/stores/settings/index.ts

@@ -1,16 +1,29 @@
 import { defineStore } from "pinia";
-import useQueueStore from "../queue";
 
 export default defineStore("settings", {
   state: () => ({
     use_alt_np: false,
+    use_sidebar: true,
   }),
   actions: {
     toggleUseRightNP() {
+      if (!this.use_sidebar) return;
       this.use_alt_np = !this.use_alt_np;
-      useQueueStore();
+    },
+    toggleDisableSidebar() {
+      this.use_sidebar = !this.use_sidebar;
+    },
+  },
+  getters: {
+    show_alt_np(): boolean {
+      return 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;
     },
   },
-  getters: {},
   persist: true,
 });