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

src/components/Search/LoadMore.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="morexx">
-    <button @click="loadMore" class="">
+    <div @click="loadMore" class="btn circular">
       <div class="text">Load More</div>
-    </button>
+    </div>
   </div>
 </template>
 
@@ -22,19 +22,18 @@ function loadMore() {
   place-items: center;
   margin-top: $small;
 
-  button {
-    border-radius: 1.5rem;
+  .btn {
     height: 2.5rem;
     width: 15rem;
     display: grid;
+    place-items: center;
     transition: all 0.5s ease;
-    color: rgba(255, 255, 255, 0.87) !important;
-    background-color: $accent;
-    // border: solid 1px $gray;
+    background-image: linear-gradient(37deg, $red, $blue);
+    cursor: pointer;
 
     &:hover {
       background-color: $blue !important;
-      width: 50%;
+      width: 12rem;
     }
   }
 }

src/components/Search/TracksGrid.vue

@@ -1,40 +1,35 @@
 <template>
   <div class="tracks-results" v-if="tracks">
     <div class="heading">Tracks</div>
-    <div class="items">
-      <table>
-        <tbody>
-          <TrackItem
-            v-for="track in props.tracks"
-            :key="track.trackid"
-            :track="track"
-            :isPlaying="queue.playing"
-            :isCurrent="queue.current.trackid == track.trackid"
-          />
-        </tbody>
-      </table>
-      <LoadMore v-if="more" @loadMore="loadMore" />
-    </div>
+    <TransitionGroup class="items" name="list">
+      <TrackItem
+        v-for="track in tracks"
+        :key="track.trackid"
+        :track="track"
+        :isPlaying="queue.playing"
+        :isCurrent="queue.current.trackid == track.trackid"
+        :isSearchTrack="true"
+        @PlayThis="updateQueue"
+      />
+    </TransitionGroup>
+    <LoadMore v-if="more" @loadMore="loadMore" />
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import LoadMore from "./LoadMore.vue";
 import TrackItem from "../shared/TrackItem.vue";
 import useQStore from "../../stores/queue";
+import { Track } from "../../interfaces";
 
 let counter = 0;
 const queue = useQStore();
-const props = defineProps({
-  tracks: {
-    type: Object,
-    required: true,
-  },
-  more: {
-    type: Boolean,
-    required: true,
-  },
-});
+
+const props = defineProps<{
+  tracks: Track[];
+  more: boolean;
+  query: string;
+}>();
 
 const emit = defineEmits(["loadMore"]);
 
@@ -42,6 +37,12 @@ function loadMore() {
   counter += 5;
   emit("loadMore", counter);
 }
+
+function updateQueue(track: Track) {
+  console.log(props.query);
+  queue.playFromSearch(props.query, props.tracks);
+  queue.play(track);
+}
 </script>
 
 <style lang="scss">
@@ -49,6 +50,16 @@ function loadMore() {
   border-radius: 0.5rem;
   padding: $small;
   border: 1px solid $gray3;
-  // background: ;
+
+  .list-enter-active,
+  .list-leave-active {
+    transition: all 0.5s ease;
+    transition-delay: 0.5s;
+  }
+  .list-enter-from,
+  .list-leave-to {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
 }
 </style>