show existing image on update playlist modal

+ some modal cleanup

src/assets/scss/Global/app-grid.scss

@@ -11,10 +11,10 @@
   height: calc(100vh);
   margin: 0 auto;
   gap: 1rem;
-  padding: $small;
   padding-right: $medium;
   border-right: solid 1px $gray4;
   margin-top: -$small;
+  padding-top: $small;
 }
 
 #app-grid.isSmall {

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -38,11 +38,9 @@ import LoadMore from "./LoadMore.vue";
 
 const search = useSearchStore();
 
-const props = defineProps<{
+defineProps<{
   album_grid?: boolean;
 }>();
-
-console.log(search.albums);
 </script>
 
 <style lang="scss">

src/components/modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="new-playlist-modal" v-if="modal.visible">
+  <div class="modal" v-if="modal.visible">
     <div class="bg" @click="modal.hideModal"></div>
     <div class="m-content rounded">
       <div class="heading">{{ modal.title }}</div>
@@ -34,7 +34,6 @@ const modal = useModalStore();
  * @param title
  */
 function setTitle(title: string) {
-  console.log(title);
   modal.setTitle(title);
 }
 
@@ -47,7 +46,7 @@ function hideModal() {
 </script>
 
 <style lang="scss">
-.new-playlist-modal {
+.modal {
   position: fixed;
   z-index: 20;
   height: 100vh;
@@ -65,10 +64,11 @@ function hideModal() {
   }
 
   .m-content {
-    width: 30rem;
+    width: 100%;
-    background-color: $black;
+    max-width: 35rem;
     padding: 1rem;
     position: relative;
+    background-color: $gray;
 
     .cancel {
       width: 2rem;
@@ -78,9 +78,10 @@ function hideModal() {
       right: 1rem;
       background-image: url("../assets/icons/plus.svg");
       transform: rotate(45deg);
+      cursor: pointer;
 
       &:hover {
-        transform: rotate(135deg);
+        transform: rotate(45deg) scale(1.2);
       }
     }
   }

src/components/modals/NewPlaylist.vue

@@ -4,7 +4,7 @@
     <br />
     <input
       type="text"
-      class="rounded"
+      class="rounded-sm"
       name="name"
       id="modal-playlist-name-input"
     />

src/components/modals/updatePlaylist.vue

@@ -28,7 +28,9 @@
         id="update-pl-img-preview"
         class="image"
         :style="{
-          backgroundImage: `url(${props.playlist.image})`,
+          backgroundImage: `url(${
+            paths.images.playlist + props.playlist.image
+          })`,
         }"
       />
     </div>
@@ -41,6 +43,7 @@ import { updatePlaylist } from "@/composables/fetch/playlists";
 import { Playlist } from "@/interfaces";
 import usePStore from "@/stores/pages/playlist";
 import { onMounted } from "vue";
+import { paths } from "@/config";
 
 const pStore = usePStore();
 
@@ -132,6 +135,7 @@ function update_playlist(e: Event) {
     place-items: center;
     color: $gray1;
     margin: $small 0;
+    cursor: pointer;
 
     #update-pl-img-preview {
       width: 4.5rem;

src/config.ts

@@ -1,3 +1,6 @@
+// "local" | "remote"
+let mode = "remote";
+
 export interface D<T = string> {
   [key: string]: T;
 }
@@ -19,19 +22,15 @@ const imageRoutes = {
   raw: "/raw/",
 };
 
-let mode: string = "remote";
-
 function toggleMode() {
   mode = mode === "local" ? "remote" : "local";
 }
 
-function getDomain() {
+const domain = () => domains[mode];
-  return domains[mode];
-}
 
-const baseImgUrl = getDomain() + ports.images;
+const baseImgUrl = domain() + ports.images;
 
-const baseApiUrl = getDomain() + ports.api;
+const baseApiUrl = domain() + ports.api;
 
 const paths = {
   api: {

src/stores/search.ts

@@ -37,7 +37,7 @@ export default defineStore("search", () => {
   const route = useRoute();
 
   const currentTab = ref("tracks");
-  const RESULT_COUNT = 6;
+  const RESULT_COUNT = 10;
 
   const loadCounter = reactive({
     tracks: 0,