fix scrollbars being hidden when sidebar is disabled on firefox

+ rename components, to follow vue style guides

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";