From b9f0368f5b21da93b1f466521341479420f55485 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Thu, 4 Aug 2022 18:43:12 +0300
Subject: [PATCH] move utility methods to @/utils

---
 src/App.vue                                   | 35 ++++++---
 src/components/AlbumView/Header.vue           | 13 ++--
 src/components/BottomBar/BottomBar.vue        |  2 +-
 src/components/FolderView/SongList.vue        |  2 +-
 src/components/LeftSidebar/SongCard.vue       |  2 +-
 src/components/LeftSidebar/nowPlaying.vue     | 16 ++--
 src/components/PlaylistView/Header.vue        | 20 ++---
 src/components/RightSideBar/NowPlaying.vue    | 28 +++----
 src/components/RightSideBar/Queue.vue         | 12 +--
 src/components/RightSideBar/Queue/upNext.vue  |  2 +-
 src/components/nav/NavBar.vue                 |  2 +-
 src/components/nav/Titles/Folder.vue          |  2 +-
 src/components/shared/SongItem.vue            | 13 ++--
 src/components/shared/TrackItem.vue           | 15 ++--
 src/composables/perks.ts                      | 75 +------------------
 src/composables/useLocalStorage.ts            |  3 -
 src/layouts/HeaderContentBottom.vue           |  2 +-
 src/stores/search.ts                          |  2 +-
 src/stores/tabs.ts                            |  2 +-
 src/utils/index.ts                            | 18 +++++
 .../useCreateSubPaths.ts}                     |  0
 .../useDebouncedRef.ts}                       | 19 +++--
 src/utils/useFocusElem.ts                     | 23 ++++++
 src/utils/useFormatSeconds.ts                 | 46 ++++++++++++
 src/utils/useLocalStorage.ts                  | 25 +++++++
 src/utils/usePutCommas.ts                     | 18 +++++
 src/{composables => utils}/useVisibility.ts   |  0
 src/views/FolderView.vue                      |  1 -
 src/views/album/Content.vue                   |  2 +-
 src/views/playlist/Content.vue                |  2 +-
 30 files changed, 244 insertions(+), 158 deletions(-)
 delete mode 100644 src/composables/useLocalStorage.ts
 create mode 100644 src/utils/index.ts
 rename src/{composables/createSubPaths.ts => utils/useCreateSubPaths.ts} (100%)
 rename src/{composables/useDebouncedRef.js => utils/useDebouncedRef.ts} (76%)
 create mode 100644 src/utils/useFocusElem.ts
 create mode 100644 src/utils/useFormatSeconds.ts
 create mode 100644 src/utils/useLocalStorage.ts
 create mode 100644 src/utils/usePutCommas.ts
 rename src/{composables => utils}/useVisibility.ts (100%)

diff --git a/src/App.vue b/src/App.vue
index a57c6c15..67da788f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,25 +21,27 @@
 </template>
 
 <script setup lang="ts">
-import { onStartTyping } from "@vueuse/core";
+import { onMounted } from "vue";
 import { useRouter } from "vue-router";
+import { onStartTyping } from "@vueuse/core";
 
-import useContextStore from "@/stores/context";
 import useQStore from "@/stores/queue";
 import useModalStore from "@/stores/modal";
-import useShortcuts from "@/composables/useKeyboard";
+import useContextStore from "@/stores/context";
+import handleShortcuts from "@/composables/useKeyboard";
 
-import ContextMenu from "@/components/contextMenu.vue";
-import Navigation from "@/components/LeftSidebar/Navigation.vue";
-import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
 import Logo from "@/components/Logo.vue";
 import Modal from "@/components/modal.vue";
 import NavBar from "@/components/nav/NavBar.vue";
+import Tabs from "@/components/RightSideBar/Tabs.vue";
+import ContextMenu from "@/components/contextMenu.vue";
 import Notification from "@/components/Notification.vue";
+import Navigation from "@/components/LeftSidebar/Navigation.vue";
+import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
 import RightSideBar from "@/components/RightSideBar/Main.vue";
 import SearchInput from "@/components/RightSideBar/SearchInput.vue";
-import Tabs from "@/components/RightSideBar/Tabs.vue";
-import { onMounted } from "vue";
+
+import { readLocalStorage, writeLocalStorage } from "@/utils";
 
 const queue = useQStore();
 const router = useRouter();
@@ -48,7 +50,7 @@ const context_store = useContextStore();
 const app_dom = document.getElementById("app");
 
 queue.readQueue();
-useShortcuts(useQStore);
+handleShortcuts(useQStore);
 
 app_dom.addEventListener("click", (e) => {
   if (context_store.visible) {
@@ -66,8 +68,21 @@ onStartTyping(() => {
   elem.value = "";
 });
 
+function handleWelcomeModal() {
+  let welcomeShowCount = readLocalStorage("shown-welcome-message");
+
+  if (!welcomeShowCount) {
+    welcomeShowCount = 0;
+  }
+
+  if (welcomeShowCount < 2) {
+    modal.showWelcomeModal();
+    writeLocalStorage("shown-welcome-message", welcomeShowCount + 1);
+  }
+}
+
 onMounted(() => {
-  modal.showWelcomeModal();
+  handleWelcomeModal();
 });
 </script>
 
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index dbbd587e..37f72e14 100644
--- a/src/components/AlbumView/Header.vue
+++ b/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<{
diff --git a/src/components/BottomBar/BottomBar.vue b/src/components/BottomBar/BottomBar.vue
index 719713be..bd9c9a72 100644
--- a/src/components/BottomBar/BottomBar.vue
+++ b/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";
 
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index c7b2d514..2630676a 100644
--- a/src/components/FolderView/SongList.vue
+++ b/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";
diff --git a/src/components/LeftSidebar/SongCard.vue b/src/components/LeftSidebar/SongCard.vue
index eb076051..07e4f977 100644
--- a/src/components/LeftSidebar/SongCard.vue
+++ b/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;
diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue
index c36b3183..80851b2a 100644
--- a/src/components/LeftSidebar/nowPlaying.vue
+++ b/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();
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 17316e0e..80b6b8a0 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/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();
diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue
index 028f14d6..a1779b0b 100644
--- a/src/components/RightSideBar/NowPlaying.vue
+++ b/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>
 
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index 0bf7ffdd..765d9924 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/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();
diff --git a/src/components/RightSideBar/Queue/upNext.vue b/src/components/RightSideBar/Queue/upNext.vue
index 3dcb8157..e306855e 100644
--- a/src/components/RightSideBar/Queue/upNext.vue
+++ b/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;
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 74eaff7b..aac6b85d 100644
--- a/src/components/nav/NavBar.vue
+++ b/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";
diff --git a/src/components/nav/Titles/Folder.vue b/src/components/nav/Titles/Folder.vue
index 0168770d..219930e6 100644
--- a/src/components/nav/Titles/Folder.vue
+++ b/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";
 
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index ad2c2eab..a272e4d5 100644
--- a/src/components/shared/SongItem.vue
+++ b/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();
 
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index 2de96a6a..f3513411 100644
--- a/src/components/shared/TrackItem.vue
+++ b/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;
diff --git a/src/composables/perks.ts b/src/composables/perks.ts
index 53d9cbc2..c241778e 100644
--- a/src/composables/perks.ts
+++ b/src/composables/perks.ts
@@ -1,32 +1,6 @@
 import { RouteLocationNormalized } from "vue-router";
 
-const putCommas = (artists: string[]) => {
-  let result = [];
 
-  artists.forEach((i, index, artists) => {
-    if (index !== artists.length - 1) {
-      result.push(i + ", ");
-    } else {
-      result.push(i);
-    }
-  });
-
-  return result;
-};
-
-function focusElem(className: string, delay?: number, pos?: any) {
-  const dom = document.getElementsByClassName(className)[0];
-
-  setTimeout(() => {
-    if (dom) {
-      dom.scrollIntoView({
-        behavior: "smooth",
-        block: `${pos ?? "start"}` as any,
-        inline: "center",
-      });
-    }
-  }, delay | 300);
-}
 
 function getElem(id: string, type: string) {
   switch (type) {
@@ -49,51 +23,4 @@ function isSameRoute(to: r, from: r) {
   return false;
 }
 
-/**
- * Converts seconds into minutes and hours.
- * @param seconds The seconds to convert
- * @param long Whether to provide the time in the long format
- */
-function formatSeconds(seconds: number, long?: boolean) {
-  if (seconds == undefined) {
-    return "00:00";
-  }
-
-  const date = new Date(seconds * 1000);
-
-  const hh = date.getUTCHours();
-  const mm = date.getUTCMinutes();
-  const ss = date.getUTCSeconds();
-
-  let _hh = hh < 10 ? `0${hh}` : hh;
-  let _mm = mm < 10 ? `0${mm}` : mm;
-  let _ss = ss < 10 ? `0${ss}` : ss;
-
-  if (long == true) {
-    if (hh === 1) {
-      _hh = hh + " Hour";
-    } else {
-      _hh = `${hh} Hours`;
-    }
-
-    if (mm === 1) {
-      _mm = mm + " Minute";
-    } else {
-      _mm = `${mm} Minutes`;
-    }
-
-    if (hh > 0) {
-      return `${_hh}, ${_mm}`;
-    } else {
-      return `${_mm}`;
-    }
-  }
-
-  if (hh > 0) {
-    return `${_hh}:${_mm}:${_ss}`;
-  } else {
-    return `${_mm}:${_ss}`;
-  }
-}
-
-export { putCommas, focusElem, formatSeconds, getElem, isSameRoute };
+export { getElem, isSameRoute };
diff --git a/src/composables/useLocalStorage.ts b/src/composables/useLocalStorage.ts
deleted file mode 100644
index bdb2fae5..00000000
--- a/src/composables/useLocalStorage.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function readLocalStorage(key: string) {
-  return JSON.parse(localStorage.getItem(key));
-}
diff --git a/src/layouts/HeaderContentBottom.vue b/src/layouts/HeaderContentBottom.vue
index 4bc99df1..c6c7d5dc 100644
--- a/src/layouts/HeaderContentBottom.vue
+++ b/src/layouts/HeaderContentBottom.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import useVisibility from "@/composables/useVisibility";
+import { useVisibility } from "@/utils";
 import useNavStore from "@/stores/nav";
 import { onBeforeRouteUpdate, RouteParams, useRoute } from "vue-router";
 
diff --git a/src/stores/search.ts b/src/stores/search.ts
index bc1a545c..5a186d02 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -10,7 +10,7 @@ import {
   loadMoreArtists,
 } from "../composables/fetch/searchMusic";
 import { watch } from "vue";
-import useDebouncedRef from "../composables/useDebouncedRef";
+import useDebouncedRef from "../utils/useDebouncedRef";
 import useTabStore from "./tabs";
 /**
  *
diff --git a/src/stores/tabs.ts b/src/stores/tabs.ts
index 1d092f83..34f6ad22 100644
--- a/src/stores/tabs.ts
+++ b/src/stores/tabs.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { focusElem } from "../composables/perks";
+import { focusElem } from "@/utils";
 
 const tablist = {
   home: "home",
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 00000000..c8b7e0ad
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,18 @@
+import focusElem from "./useFocusElem";
+import putCommas from "./usePutCommas";
+import useVisibility from "./useVisibility";
+import formatSeconds from "./useFormatSeconds";
+import useDebouncedRef from "./useDebouncedRef";
+import createSubPaths from "./useCreateSubPaths";
+import { readLocalStorage, writeLocalStorage } from "./useLocalStorage";
+
+export {
+  readLocalStorage,
+  writeLocalStorage,
+  createSubPaths,
+  useDebouncedRef,
+  focusElem,
+  useVisibility,
+  formatSeconds,
+  putCommas,
+};
diff --git a/src/composables/createSubPaths.ts b/src/utils/useCreateSubPaths.ts
similarity index 100%
rename from src/composables/createSubPaths.ts
rename to src/utils/useCreateSubPaths.ts
diff --git a/src/composables/useDebouncedRef.js b/src/utils/useDebouncedRef.ts
similarity index 76%
rename from src/composables/useDebouncedRef.js
rename to src/utils/useDebouncedRef.ts
index b31a62a3..53754e90 100644
--- a/src/composables/useDebouncedRef.js
+++ b/src/utils/useDebouncedRef.ts
@@ -1,4 +1,4 @@
-import { customRef, ref } from "vue";
+import { customRef, Ref, ref } from "vue";
 
 /**
  * Debounces a function
@@ -6,11 +6,14 @@ import { customRef, ref } from "vue";
  * @param {*} fn The function to debounce
  * @param {*} delay The delay in milliseconds
  * @param {*} immediate whether to debounce immediately
- * @returns {Function} The debounced function
  */
-const debounce = (fn, delay = 0, immediate = false) => {
-  let timeout;
-  return (...args) => {
+const debounce = (
+  fn: (...params: any) => void,
+  delay: number = 0,
+  immediate: any = false
+) => {
+  let timeout: any;
+  return (...args: any) => {
     if (immediate && !timeout) fn(...args);
     clearTimeout(timeout);
 
@@ -28,7 +31,11 @@ const debounce = (fn, delay = 0, immediate = false) => {
  * @param {*} immediate Whether to call the function immediately
  * @returns {Object} The ref and a function to call to update the ref
  */
-const useDebouncedRef = (initialValue, delay, immediate = false) => {
+const useDebouncedRef = (
+  initialValue: string,
+  delay: number,
+  immediate = false
+) => {
   const state = ref(initialValue);
   return customRef((track, trigger) => ({
     get() {
diff --git a/src/utils/useFocusElem.ts b/src/utils/useFocusElem.ts
new file mode 100644
index 00000000..6e2c37d8
--- /dev/null
+++ b/src/utils/useFocusElem.ts
@@ -0,0 +1,23 @@
+/**
+ * Scrolls a element into view.
+ * @param className The class to focus
+ * @param delay Delay in milliseconds
+ * @param pos Positioning of the focus element
+ */
+export default function focusElem(
+  className: string,
+  delay?: number,
+  pos?: any
+) {
+  const dom = document.getElementsByClassName(className)[0];
+
+  setTimeout(() => {
+    if (dom) {
+      dom.scrollIntoView({
+        behavior: "smooth",
+        block: `${pos ?? "start"}` as any,
+        inline: "center",
+      });
+    }
+  }, delay | 300);
+}
diff --git a/src/utils/useFormatSeconds.ts b/src/utils/useFormatSeconds.ts
new file mode 100644
index 00000000..9f3225a7
--- /dev/null
+++ b/src/utils/useFormatSeconds.ts
@@ -0,0 +1,46 @@
+/**
+ * Converts seconds into minutes and hours.
+ * @param seconds The seconds to convert
+ * @param long Whether to provide the time in the long format
+ */
+export default function formatSeconds(seconds: number, long?: boolean) {
+  if (seconds == undefined) {
+    return "00:00";
+  }
+
+  const date = new Date(seconds * 1000);
+
+  const hh = date.getUTCHours();
+  const mm = date.getUTCMinutes();
+  const ss = date.getUTCSeconds();
+
+  let _hh = hh < 10 ? `0${hh}` : hh;
+  let _mm = mm < 10 ? `0${mm}` : mm;
+  let _ss = ss < 10 ? `0${ss}` : ss;
+
+  if (long == true) {
+    if (hh === 1) {
+      _hh = hh + " Hour";
+    } else {
+      _hh = `${hh} Hours`;
+    }
+
+    if (mm === 1) {
+      _mm = mm + " Minute";
+    } else {
+      _mm = `${mm} Minutes`;
+    }
+
+    if (hh > 0) {
+      return `${_hh}, ${_mm}`;
+    } else {
+      return `${_mm}`;
+    }
+  }
+
+  if (hh > 0) {
+    return `${_hh}:${_mm}:${_ss}`;
+  } else {
+    return `${_mm}:${_ss}`;
+  }
+}
diff --git a/src/utils/useLocalStorage.ts b/src/utils/useLocalStorage.ts
new file mode 100644
index 00000000..5ecae75e
--- /dev/null
+++ b/src/utils/useLocalStorage.ts
@@ -0,0 +1,25 @@
+/**
+ * Retrieeves the value of a key from localStorage.
+ * @param key the key to read from local storage
+ * @returns A javascript object representing the value stored in local storage
+ */
+export function readLocalStorage(key: string) {
+  return JSON.parse(localStorage.getItem(key));
+}
+
+/**
+ * Stores a value in localStorage.
+ * @param key the key to store the value in local storage
+ * @param value the value to store in local storage
+ * @returns true if the value was successfully stored, false otherwise
+ * @throws if the value is not a valid JSON string
+ */
+
+export function writeLocalStorage(key: string, value: any) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
diff --git a/src/utils/usePutCommas.ts b/src/utils/usePutCommas.ts
new file mode 100644
index 00000000..9957a216
--- /dev/null
+++ b/src/utils/usePutCommas.ts
@@ -0,0 +1,18 @@
+/**
+ * Turns a list of artists into a string of artists separated by commas.
+ * @param artists artists array to put commas in
+ * @returns a string with commas in between each artist
+ */
+export default (artists: string[]) => {
+  let result = [];
+
+  artists.forEach((i, index, artists) => {
+    if (index !== artists.length - 1) {
+      result.push(i + ", ");
+    } else {
+      result.push(i);
+    }
+  });
+
+  return result;
+};
diff --git a/src/composables/useVisibility.ts b/src/utils/useVisibility.ts
similarity index 100%
rename from src/composables/useVisibility.ts
rename to src/utils/useVisibility.ts
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index c6029ce3..69ca8ce6 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -15,7 +15,6 @@
       <SongList
         :tracks="FStore.tracks"
         :path="FStore.path"
-        :copyright="null"
       />
     </div>
   </div>
diff --git a/src/views/album/Content.vue b/src/views/album/Content.vue
index 993641fb..bcc4d622 100644
--- a/src/views/album/Content.vue
+++ b/src/views/album/Content.vue
@@ -20,7 +20,7 @@ const props = defineProps<{
   discs: {
     [key: string]: Track[];
   };
-  copyright: string;
+  copyright?: string;
 }>();
 
 // check if the disc is the last disc
diff --git a/src/views/playlist/Content.vue b/src/views/playlist/Content.vue
index c06b68b1..b4a60d8c 100644
--- a/src/views/playlist/Content.vue
+++ b/src/views/playlist/Content.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="songlist rounded">
     <div v-if="tracks.length">
-      <SongList :tracks="tracks" :pname="name" :playlistid="playlistid" />
+      <SongList :tracks="tracks" :pname="name" :playlistid="playlistid"/>
     </div>
     <div v-else-if="tracks.length === 0 && count > 0">
       <div class="no-results">