implement clearing search input on start typing

+ rename pages folder to fetch in composables folder

src/App.vue

@@ -73,7 +73,9 @@ router.afterEach((to, from) => {
 });
 
 onStartTyping(() => {
-  document.getElementById("globalsearch").focus();
+  const elem = document.getElementById("globalsearch") as HTMLInputElement;
+  elem.focus();
+  elem.value = "";
 });
 </script>
 

src/components/modals/NewPlaylist.vue

@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
-import { createNewPlaylist } from "../../composables/pages/playlists";
+import { createNewPlaylist } from "../../composables/fetch/playlists";
 import { Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import usePlaylistStore from "@/stores/pages/playlists";

src/components/modals/updatePlaylist.vue

@@ -55,8 +55,8 @@
 <script setup lang="ts">
 import usePStore from "@/stores/pages/playlist";
 import { onMounted } from "vue";
-import { updatePlaylist } from "../../composables/pages/playlists";
-import { Playlist } from "../../interfaces";
+import { updatePlaylist } from "@/composables/fetch/playlists";
+import { Playlist } from "@/interfaces";
 
 const pStore = usePStore();
 

src/composables/fetch/playlists.ts

@@ -1,4 +1,4 @@
-import { Artist } from "./../../interfaces";
+import { Artist } from "../../interfaces";
 import { Playlist, Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import state from "../state";

src/composables/fetch/searchMusic.ts

@@ -1,4 +1,4 @@
-import state from "./state";
+import state from "../state";
 import axios from "axios";
 
 const base_url = `${state.settings.uri}/search`;

src/composables/useKeyboard.ts

@@ -3,7 +3,7 @@ import useQStore from "@/stores/queue";
 let key_down_fired = false;
 
 function focusSearchBox() {
-  const elem = document.getElementById("search");
+  const elem = document.getElementById("globalsearch");
 
   elem.focus();
 }

src/contexts/track_context.ts

@@ -4,7 +4,7 @@ import { Option } from "../interfaces";
 import {
   getAllPlaylists,
   addTrackToPlaylist,
-} from "../composables/pages/playlists";
+} from "../composables/fetch/playlists";
 
 import useQueueStore from "../stores/queue";
 import useModalStore from "../stores/modal";

src/stores/pages/album.ts

@@ -5,7 +5,7 @@ import {
   getAlbumTracks,
   getAlbumArtists,
   getAlbumBio,
-} from "../../composables/pages/album";
+} from "../../composables/fetch/album";
 
 function sortTracks(tracks: Track[]) {
   return tracks.sort((a, b) => {

src/stores/pages/folder.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { Folder, Track } from "../../interfaces";
 
-import fetchThem from "../../composables/pages/folders";
+import fetchThem from "../../composables/fetch/folders";
 
 export default defineStore("FolderDirs&Tracks", {
   state: () => ({

src/stores/pages/playlist.ts

@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 import {
   getPlaylist,
   getPlaylistArtists,
-} from "../../composables/pages/playlists";
+} from "../../composables/fetch/playlists";
 import { Track, Playlist } from "../../interfaces";
 
 export default defineStore("playlist-tracks", {

src/stores/pages/playlists.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { Playlist } from "../../interfaces";
-import { getAllPlaylists } from "../../composables/pages/playlists";
+import { getAllPlaylists } from "../../composables/fetch/playlists";
 
 export default defineStore("playlists", {
   state: () => ({

src/stores/search.ts

@@ -8,7 +8,7 @@ import {
   loadMoreTracks,
   loadMoreAlbums,
   loadMoreArtists,
-} from "../composables/searchMusic";
+} from "../composables/fetch/searchMusic";
 import { watch } from "vue";
 import useDebouncedRef from "../composables/useDebouncedRef";
 import useTabStore from "./tabs";