rename files and set max client width on viewport

src/assets/css/global.scss

@@ -72,8 +72,11 @@ a {
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
     "l-sidebar content tabs";
-  width: 100vw;
+  width: 100%;
+  align-content: center;
+  max-width: 2720px;
   height: 100vh;
+  margin: 0 auto;
 }
 
 .tabs {
@@ -87,8 +90,6 @@ a {
 
 #gsearch-input {
   grid-area: search-input;
-  // border-left: solid 1px $gray3;
-  // border-bottom: 1px solid $gray3;
 }
 
 .topnav {
@@ -131,7 +132,7 @@ a {
 #acontent {
   grid-area: content;
   width: 100%;
-  max-width: 1504px;
+  max-width: 1955px;
   padding: $small;
   padding-left: 0;
   overflow: auto;

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/fetch/playlists";
+import { createNewPlaylist } from "../../composables/pages/playlists";
 import { Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import usePlaylistStore from "@/stores/pages/playlists";

src/components/modals/updatePlaylist.vue

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

src/composables/normalizeContextMenu.ts

@@ -1,6 +1,6 @@
 import { getElem } from "./perks";
 
-export default (mouseX, mouseY) => {
+export default (mouseX: number, mouseY: number) => {
   const scope = getElem("app", "id");
   const contextMenu = getElem("context-menu", "class");
   // ? compute what is the mouse position relative to the container element

src/composables/pages/folders.ts

@@ -1,7 +1,6 @@
-import axios from "axios";
-import { Folder, Track } from "../interfaces";
-import state from "./state";
-import useAxios from "./useAxios";
+import { Folder, Track } from "@/interfaces";
+import state from "../state";
+import useAxios from "../useAxios";
 
 export default async function (path: string) {
   interface FolderData {

src/composables/state.ts

@@ -1,11 +1,11 @@
+import { Track, AlbumInfo, Artist } from "./../interfaces";
 import { ref } from "@vue/reactivity";
 import { reactive } from "vue";
-import * as i from "../interfaces";
 
 const search_query = ref("");
 
 const queue = ref(
-  Array<i.Track>({
+  Array<Track>({
     title: "Nothing played yet",
     artists: ["... blah blah blah"],
     image: "http://127.0.0.1:8900/images/thumbnails/4.webp",
@@ -16,14 +16,14 @@ const queue = ref(
 const folder_song_list = ref([]);
 const folder_list = ref([]);
 
-const current = ref(<i.Track>{
+const current = ref(<Track>{
   title: "Nothing played yet",
   artists: ["... blah blah blah"],
   image: "http://127.0.0.1:8900/images/thumbnails/4.webp",
   trackid: "",
 });
 
-const prev = ref(<i.Track>{
+const prev = ref(<Track>{
   title: "Nothing played yet",
   artists: ["... blah blah blah"],
   image: "http://127.0.0.1:8900/images/thumbnails/4.webp",
@@ -31,9 +31,9 @@ const prev = ref(<i.Track>{
 });
 
 const album = reactive({
-  tracklist: Array<i.Track>(),
-  info: <i.AlbumInfo>{},
-  artists: Array<i.Artist>(),
+  tracklist: Array<Track>(),
+  info: <AlbumInfo>{},
+  artists: Array<Artist>(),
   bio: "",
 });
 

src/contexts/track_context.ts

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

src/stores/pages/album.ts

@@ -4,7 +4,7 @@ import {
   getAlbumTracks,
   getAlbumArtists,
   getAlbumBio,
-} from "../../composables/fetch/album";
+} from "../../composables/pages/album";
 
 export default defineStore("album", {
   state: () => ({
@@ -21,7 +21,6 @@ export default defineStore("album", {
      * @param albumartist artist of the album
      */
     async fetchTracksAndArtists(title: string, albumartist: string) {
-
       const tracks = await getAlbumTracks(title, albumartist);
       const artists = await getAlbumArtists(title, albumartist);
 

src/stores/pages/folder.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { Folder, Track } from "../../interfaces";
 
-import fetchThem from "../../composables/getFilesAndFolders";
+import fetchThem from "../../composables/pages/folders";
 
 export default defineStore("FolderDirs&Tracks", {
   state: () => ({
@@ -13,9 +13,7 @@ export default defineStore("FolderDirs&Tracks", {
     async fetchAll(path: string) {
       const { tracks, folders } = await fetchThem(path);
 
-      this.path = path;
-      this.dirs = folders;
-      this.tracks = tracks;
+      [this.path, this.dirs, this.tracks] = [path, folders, tracks];
     },
   },
 });

src/stores/pages/playlist.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { getPlaylist } from "../../composables/fetch/playlists";
+import { getPlaylist } from "../../composables/pages/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/fetch/playlists";
+import { getAllPlaylists } from "../../composables/pages/playlists";
 
 export default defineStore("playlists", {
   state: () => ({