fix scrollbars being hidden when sidebar is disabled on firefox

+ rename components, to follow vue style guides

src/App.vue

@@ -18,7 +18,7 @@
     </div>
     <!-- <SearchInput v-if="settings.use_sidebar && xl" /> -->
     <RightSideBar v-if="settings.use_sidebar && xl" />
-    <NowPlayingRight />
+    <BottomBar />
   </section>
 </template>
 
@@ -43,14 +43,14 @@ import { readLocalStorage, writeLocalStorage } from "@/utils";
 
 // @small-components
 import Modal from "@/components/modal.vue";
-import ContextMenu from "@/components/contextMenu.vue";
+import ContextMenu from "@/components/ContextMenu.vue";
 import Notification from "@/components/Notification.vue";
 
 // @app-grid-components
 import NavBar from "@/components/nav/NavBar.vue";
 import LeftSidebar from "./components/LeftSidebar/index.vue";
 import RightSideBar from "@/components/RightSideBar/Main.vue";
-import NowPlayingRight from "@/components/RightSideBar/NowPlayingRight.vue";
+import BottomBar from "@/components/BottomBar.vue";
 
 const queue = useQStore();
 const router = useRouter();

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

@@ -1,3 +1,5 @@
+$g-border: solid 1px $gray5;
+
 #app-grid {
   display: grid;
   grid-template-columns: min-content 1fr 29rem;
@@ -9,7 +11,7 @@
 
   gap: 0 1.5rem;
   height: 100%;
-  border: solid 1px $gray3;
+  border: $g-border;
   border-top: none;
   border-bottom: none;
   margin: 0 auto;
@@ -26,7 +28,7 @@
 
 .r-sidebar {
   grid-area: r-sidebar;
-  border-left: solid 1px $gray3;
+  border-left: $g-border;
 }
 
 .topnav {
@@ -41,11 +43,12 @@
   grid-template-rows: 1fr max-content;
   // border-top: none !important;
   // border-bottom: none !important;
-  border-right: solid 1px $gray3;
+  border-right: $g-border;
 }
 
 .b-bar {
   grid-area: bottombar;
+  border-top: $g-border;
 }
 
 // ====== MODIFIERS =======

src/assets/scss/moz.scss

@@ -14,23 +14,7 @@
     }
   }
 
-  // #app-grid.isSmall,
-  // #app-grid.disableSidebar {
-  //   #acontent {
-  //     margin-right: -$small;
-  //     padding-right: $medium;
-
-  //     .search-view {
-  //       margin-right: -0.8rem;
-  //     }
-  //   }
-  // }
-
-  // #app-grid.isSmall #page-search {
-  //   margin-right: $smaller;
-  // }
-
-  // #app-grid.disableSidebar #page-search {
-  //   margin-right: $smaller;
-  // }
+  #app-grid.noSidebar > #acontent {
+    padding-right: 1rem !important;
+  }
 }

src/components/BottomBar.vue

@@ -31,11 +31,13 @@
             </div>
             <div class="tags">
               <div class="title ellip">
-                {{ queue.currenttrack?.title || 'Hello there' }}
+                {{ queue.currenttrack?.title || "Hello there" }}
               </div>
               <ArtistName
                 :artists="queue.currenttrack?.artist || []"
-                :albumartist="queue.currenttrack?.albumartist || 'Welcome to alice'"
+                :albumartist="
+                  queue.currenttrack?.albumartist || 'Welcome to alice'
+                "
                 class="artist"
               />
             </div>
@@ -69,12 +71,12 @@ import { formatSeconds } from "@/utils";
 import { Routes } from "@/composables/enums";
 import useSettingsStore from "@/stores/settings";
 
-import ArtistName from "../shared/ArtistName.vue";
-import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
-import Progress from "../LeftSidebar/NP/Progress.vue";
+import ArtistName from "@/components/shared/ArtistName.vue";
+import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
+import Progress from "@/components/LeftSidebar/NP/Progress.vue";
 
-import HeartSvg from "../../assets/icons/heart.svg";
-// import PlusSvg from "../../assets/icons/plus.svg";
+import HeartSvg from "@/assets/icons/heart.svg";
+// import PlusSvg from "@/assets/icons/plus.svg";
 
 const queue = useQStore();
 const settings = useSettingsStore();
@@ -82,13 +84,10 @@ const settings = useSettingsStore();
 
 <style lang="scss">
 .b-bar {
-  // height: 100%;
   background-color: rgb(22, 22, 22);
   display: grid;
   align-items: center;
   z-index: 1;
-  border-top: solid 1px $gray3;
-
 
   &:hover {
     ::-moz-range-thumb {

src/components/LeftSidebar/index.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import Navigation from "@/components/LeftSidebar/Navigation.vue";
-import NPImg from "@/components/LeftSidebar/nowPlayingImg.vue";
+import NPImg from "./NowPlayingImg.vue";
 import Logo from "@/components/Logo.vue";
 
 import useSettingsStore from "@/stores/settings";

src/components/RightSideBar/Main.vue

@@ -16,10 +16,10 @@
 </template>
 
 <script setup lang="ts">
-import Search from "./Search/Main.vue";
-import Queue from "./Queue.vue";
-import DashBoard from "./Home/Main.vue";
 import useTabStore from "../../stores/tabs";
+import DashBoard from "./Home/Main.vue";
+import Queue from "./Queue.vue";
+import Search from "./Search/Main.vue";
 import SearchInput from "./SearchInput.vue";
 
 const tabs = useTabStore();

src/components/nav/Titles/APTitle.vue

@@ -16,14 +16,14 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from "vue-router";
 import { computed } from "@vue/reactivity";
+import { useRoute } from "vue-router";
 
+import Input from "@/components/shared/NavSearchInput.vue";
 import PlayBtn from "@/components/shared/PlayBtn.vue";
 import { playSources, Routes } from "@/composables/enums";
 import useAlbumStore from "@/stores/pages/album";
 import usePStore from "@/stores/pages/playlist";
-import Input from "@/components/shared/Input.vue";
 
 defineProps<{
   header_shown: boolean;

src/components/nav/Titles/Folder.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import SearchInput from "@/components/shared/Input.vue";
+import SearchInput from "@/components/shared/NavSearchInput.vue";
 import { Routes } from "@/composables/enums";
 import { subPath } from "@/interfaces";
 import { focusElem } from "@/utils";

src/router/routes.ts

@@ -4,13 +4,10 @@ import useFStore from "@/stores/pages/folder";
 import usePTrackStore from "@/stores/pages/playlist";
 import usePStore from "@/stores/pages/playlists";
 
-import Home from "@/views/Home.vue";
-
 const routes = [
   {
     path: "/",
     name: "Home",
-    component: Home,
     redirect: "/folder/$home",
   },
   {
@@ -42,7 +39,7 @@ const routes = [
   {
     path: "/playlist/:pid",
     name: "PlaylistView",
-    component: () => import("@/views/playlist/index.vue"),
+    component: () => import("@/views/PlaylistView/index.vue"),
     beforeEnter: async (to: any) => {
       state.loading.value = true;
       await usePTrackStore()
@@ -60,7 +57,7 @@ const routes = [
   {
     path: "/albums/:hash",
     name: "AlbumView",
-    component: () => import("@/views/album/index.vue"),
+    component: () => import("@/views/AlbumView/index.vue"),
     beforeEnter: async (to: any) => {
       state.loading.value = true;
       const store = useAStore();
@@ -83,7 +80,7 @@ const routes = [
   {
     path: "/search/:page",
     name: "SearchView",
-    component: () => import("@/views/search/main.vue"),
+    component: () => import("@/views/SearchView/main.vue"),
   },
   {
     path: "/queue",
@@ -117,5 +114,7 @@ const routesList = routes.map((route, index) => {
 });
 
 // TODO: Use dynamic keys in routesList
+//       Try adding an index.ts on Foldered views, import main component and export it ...
+//       Then try importing it here as @/views/ThatView
 
 export { routes, routesList };

src/views/HomeView.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import Home from "@/components/Home.vue";
+import Home from "@/components/HomePage.vue";
 </script>
 <style>
 .home {