move utility methods to @/utils

src/components/AlbumView/Header.vue

@@ -40,15 +40,16 @@
 </template>
 
 <script setup lang="ts">
-import useVisibility from "@/composables/useVisibility";
+import { ref } from "vue";
+
 import { paths } from "@/config";
 import useNavStore from "@/stores/nav";
-import useAlbumStore from "@/stores/pages/album";
-import { ref } from "vue";
-import { getButtonColor, isLight } from "../../composables/colors/album";
-import { playSources } from "../../composables/enums";
-import { formatSeconds } from "../../composables/perks";
 import { AlbumInfo } from "../../interfaces";
+import useAlbumStore from "@/stores/pages/album";
+import { playSources } from "../../composables/enums";
+import { useVisibility, formatSeconds } from "@/utils";
+import { getButtonColor, isLight } from "../../composables/colors/album";
+
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
 const props = defineProps<{

src/components/BottomBar/BottomBar.vue

@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import "@/assets/scss/BottomBar/BottomBar.scss";
-import { formatSeconds } from "@/composables/perks";
+import { formatSeconds } from "@/utils";
 import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
 import Progress from "../LeftSidebar/NP/Progress.vue";
 

src/components/FolderView/SongList.vue

@@ -33,7 +33,7 @@ import { onBeforeRouteUpdate, useRoute } from "vue-router";
 
 import SongItem from "../shared/SongItem.vue";
 
-import { focusElem } from "@/composables/perks";
+import { focusElem } from "@/utils";
 import { onMounted, onUpdated, ref } from "vue";
 import { Track } from "@/interfaces";
 import useQStore from "@/stores/queue";

src/components/LeftSidebar/SongCard.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { putCommas } from "../../composables/perks";
+import { putCommas } from "@/utils";
 import { paths } from "../../config";
 import { Track } from "../../interfaces";
 const imguri = paths.images.thumb;

src/components/LeftSidebar/nowPlaying.vue

@@ -22,19 +22,21 @@
 </template>
 
 <script setup lang="ts">
-import { ContextSrc } from "@/composables/enums";
-import trackContext from "@/contexts/track_context";
-import useContextStore from "@/stores/context";
+import { ref } from "vue";
+
 import useModalStore from "@/stores/modal";
 import useQueueStore from "@/stores/queue";
-import MenuSvg from "../../assets/icons/more.svg";
 import useQStore from "../../stores/queue";
+import useContextStore from "@/stores/context";
+import MenuSvg from "../../assets/icons/more.svg";
+import trackContext from "@/contexts/track_context";
+
+import { ContextSrc } from "@/composables/enums";
+import { formatSeconds } from "@/utils";
+
 import HotKeys from "./NP/HotKeys.vue";
 import Progress from "./NP/Progress.vue";
 import SongCard from "./SongCard.vue";
-import { formatSeconds } from "@/composables/perks";
-
-import { ref } from "vue";
 
 const queue = useQStore();
 const contextStore = useContextStore();

src/components/PlaylistView/Header.vue

@@ -47,19 +47,21 @@
 </template>
 
 <script setup lang="ts">
-import useVisibility from "@/composables/useVisibility";
-import useNavStore from "@/stores/nav";
-import usePStore from "@/stores/pages/playlist";
 import { ref } from "vue";
-import { ContextSrc, playSources } from "../../composables/enums";
-import { paths } from "../../config";
-import pContext from "../../contexts/playlist";
-import { Playlist } from "../../interfaces";
-import useContextStore from "../../stores/context";
+
+import useNavStore from "@/stores/nav";
 import useModalStore from "../../stores/modal";
+import pContext from "../../contexts/playlist";
+import usePStore from "@/stores/pages/playlist";
+import useContextStore from "../../stores/context";
+
+import { paths } from "../../config";
+import { Playlist } from "../../interfaces";
+import { useVisibility, formatSeconds } from "@/utils";
+import { ContextSrc, playSources } from "@/composables/enums";
+
 import Option from "../shared/Option.vue";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
-import { formatSeconds } from "@/composables/perks";
 
 const imguri = paths.images.playlist;
 const context = useContextStore();

src/components/RightSideBar/NowPlaying.vue

@@ -3,25 +3,25 @@
     <div class="art-tags">
       <div class="duration">{{ formatSeconds(current.length) }}</div>
       <div
-          :style="{
+        :style="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
         }"
-          class="album-art image bg-black"
+        class="album-art image bg-black"
       ></div>
       <div class="t-a">
         <p id="title" class="ellipsis">{{ current.title }}</p>
         <div class="separator no-bg-black"></div>
         <div v-if="current.artists[0] !== ''" id="artist" class="ellip">
           <span v-for="artist in putCommas(current.artists)" :key="artist">{{
-              artist
-            }}</span>
+            artist
+          }}</span>
         </div>
         <div v-else id="artist">
           <span>{{ current.albumartist }}</span>
         </div>
         <div id="type">
           <span v-if="current.bitrate > 330"
-          >FLAC • {{ current.bitrate }} Kbps</span
+            >FLAC • {{ current.bitrate }} Kbps</span
           >
           <span v-else>MP3 | {{ current.bitrate }} Kbps</span>
         </div>
@@ -29,7 +29,7 @@
     </div>
     <div class="progress">
       <div class="prog">
-        <Progress/>
+        <Progress />
       </div>
     </div>
     <div class="c-wrapper rounded">
@@ -38,7 +38,7 @@
           <div class="image"></div>
           <div class="image"></div>
         </div>
-        <HotKeys/>
+        <HotKeys />
         <div class="fav">
           <div class="image"></div>
           <div class="image"></div>
@@ -49,9 +49,11 @@
 </template>
 
 <script>
+import { ref } from "@vue/reactivity";
+
 import playAudio from "@/composables/playAudio.js";
-import {ref} from "@vue/reactivity";
-import {putCommas, formatSeconds} from "../../composables/perks.js";
+import { formatSeconds, putCommas } from "@/utils";
+
 import HotKeys from "../shared/HotKeys.vue";
 import Progress from "../shared/Progress.vue";
 
@@ -60,9 +62,9 @@ export default {
     const current = ref(perks.current);
     const putCommas = perks.putCommas;
 
-    const {playNext} = playAudio;
-    const {playPrev} = playAudio;
-    const {playPause} = playAudio;
+    const { playNext } = playAudio;
+    const { playPrev } = playAudio;
+    const { playPause } = playAudio;
     const isPlaying = playAudio.playing;
 
     const seek = () => {
@@ -80,7 +82,7 @@ export default {
       formatSeconds: perks.formatSeconds,
     };
   },
-  components: {Progress, HotKeys},
+  components: { Progress, HotKeys },
 };
 </script>
 

src/components/RightSideBar/Queue.vue

@@ -25,12 +25,14 @@
 </template>
 
 <script setup lang="ts">
-import TrackItem from "../shared/TrackItem.vue";
-import useQStore from "@/stores/queue";
-import PlayingFrom from "./Queue/playingFrom.vue";
-import UpNext from "./Queue/upNext.vue";
 import { onUpdated, ref } from "vue";
-import { focusElem } from "@/composables/perks";
+
+import { focusElem } from "@/utils";
+import useQStore from "@/stores/queue";
+
+import UpNext from "./Queue/upNext.vue";
+import TrackItem from "../shared/TrackItem.vue";
+import PlayingFrom from "./Queue/playingFrom.vue";
 import QueueActions from "./Queue/QueueActions.vue";
 
 const queue = useQStore();

src/components/RightSideBar/Queue/upNext.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script setup lang="ts">
-import { putCommas } from "@/composables/perks";
 import { paths } from "@/config";
+import { putCommas } from "@/utils";
 import { Track } from "@/interfaces";
 
 const imguri = paths.images.thumb;

src/components/nav/NavBar.vue

@@ -28,7 +28,7 @@ import Search from "./Search.vue";
 import { useRoute } from "vue-router";
 import { ref, watch } from "vue";
 import { Routes } from "@/composables/enums";
-import createSubPaths from "@/composables/createSubPaths";
+import { createSubPaths } from "@/utils";
 import { subPath } from "@/interfaces";
 import Folder from "./Titles/Folder.vue";
 import Playlists from "./Titles/Playlists.vue";

src/components/nav/Titles/Folder.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { focusElem } from "@/composables/perks";
+import { focusElem } from "@/utils";
 import { subPath } from "@/interfaces";
 import { onUpdated } from "vue";
 

src/components/shared/SongItem.vue

@@ -75,17 +75,18 @@
 </template>
 
 <script setup lang="ts">
-import OptionSvg from "@/assets/icons/more.svg";
-import { ContextSrc } from "@/composables/enums";
-import { formatSeconds, putCommas } from "@/composables/perks";
-import useContextStore from "@/stores/context";
+import { ref } from "vue";
+
 import useModalStore from "@/stores/modal";
 import useQueueStore from "@/stores/queue";
+import useContextStore from "@/stores/context";
+import trackContext from "@/contexts/track_context";
+import OptionSvg from "@/assets/icons/more.svg";
 
 import { paths } from "@/config";
-import trackContext from "@/contexts/track_context";
 import { Track } from "@/interfaces";
-import { ref } from "vue";
+import { ContextSrc } from "@/composables/enums";
+import { formatSeconds, putCommas } from "@/utils";
 
 const contextStore = useContextStore();
 

src/components/shared/TrackItem.vue

@@ -24,7 +24,7 @@
     </div>
     <div class="tags">
       <div class="title ellip">
-       {{ props.track.title }}
+        {{ props.track.title }}
       </div>
       <hr />
       <div class="artist ellip">
@@ -37,16 +37,17 @@
 </template>
 
 <script setup lang="ts">
-import { ContextSrc } from "@/composables/enums";
-import { putCommas } from "@/composables/perks";
-import trackContext from "@/contexts/track_context";
-import { Track } from "@/interfaces";
 import { ref } from "vue";
 
-import { paths } from "@/config";
-import useContextStore from "@/stores/context";
 import useModalStore from "@/stores/modal";
 import useQueueStore from "@/stores/queue";
+import useContextStore from "@/stores/context";
+import trackContext from "@/contexts/track_context";
+
+import { paths } from "@/config";
+import { putCommas } from "@/utils";
+import { Track } from "@/interfaces";
+import { ContextSrc } from "@/composables/enums";
 
 const contextStore = useContextStore();
 const imguri = paths.images.thumb;