Use gunicorn instead of Werkzeug and 32 more very minor changes (#35)

src/components/shared/Loader.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="loaderx" :class="{ loader: loading, not_loader: !loading }">
-    <div v-if="!loading">🦋</div>
+  <div
+    class="loaderx"
+    :class="{ loader: loader.loading, not_loader: !loader.loading }"
+  >
+    <div v-if="!loader.loading">🦋</div>
   </div>
 </template>
 
 <script setup>
-import state from "@/composables/state";
-
-const loading = state.loading;
+import useLoaderStore from "../../stores/loader";
+const loader = useLoaderStore();
 </script>
 
 <style lang="scss">

src/components/shared/Option.vue

@@ -17,9 +17,8 @@ import { ContextSrc } from "../../composables/enums";
 let elem: DOMRect;
 const clicked = ref(false);
 
-const props = defineProps<{
+defineProps<{
   src?: string;
-  color?: string;
 }>();
 
 const emit = defineEmits<{
@@ -45,7 +44,6 @@ function showDropdown(e: Event) {
 <style lang="scss">
 .drop-btn {
   width: 2.5rem;
-  height: 2.5rem;
   background-color: $accent;
   transition: all 0.5s ease-in-out;
   cursor: pointer;

src/components/shared/SongItem.vue

@@ -20,14 +20,6 @@
       </div>
       <div @click="emitUpdate(props.song)">
         <span class="ellip title">{{ props.song.title }}</span>
-        <div class="artist ellip">
-          <span
-            v-for="artist in perks.putCommas(props.song.artists)"
-            :key="artist"
-          >
-            {{ artist }}
-          </span>
-        </div>
       </div>
     </div>
     <div class="song-artists">
@@ -200,17 +192,6 @@ function emitUpdate(track: Track) {
     .title {
       cursor: pointer;
     }
-
-    .artist {
-      display: none;
-      font-size: 0.8rem;
-      color: rgba(255, 255, 255, 0.719);
-      cursor: pointer;
-
-      @include phone-only {
-        display: unset;
-      }
-    }
   }
 
   td {