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

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>