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

src/components/RightSideBar/Search.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="right-search">
     <Options />
-    <!-- </div> -->
     <div class="scrollable" ref="search_thing">
       <TracksGrid
         v-if="tracks.tracks.length"
         :more="tracks.more"
         :tracks="tracks.tracks"
+        :query="search.query"
         @loadMore="loadMoreTracks"
       />
       <div class="separator no-border" v-if="tracks.tracks.length"></div>
@@ -49,8 +49,7 @@
 
 <script setup>
 import { reactive, ref } from "@vue/reactivity";
-
-import state from "@/composables/state";
+import state from "../../composables/state";
 import searchMusic from "@/composables/searchMusic.js";
 import useDebouncedRef from "@/composables/useDebouncedRef";
 import AlbumGrid from "@/components/Search/AlbumGrid.vue";
@@ -83,8 +82,6 @@ const artists = reactive({
   more: false,
 });
 
-const query = useDebouncedRef("", 600);
-
 function scrollSearchThing() {
   search_thing.value.scroll({
     top: search_thing.value.scrollTop + 330,

src/components/RightSideBar/SearchInput.vue

@@ -6,13 +6,10 @@
         id="search"
         class="rounded"
         v-model="search.query"
-        placeholder="Search"
+        placeholder="Search your library"
         type="text"
         @keyup.backspace="removeLastFilter"
       />
-      <div class="_loader">
-        <Loader />
-      </div>
     </div>
   </div>
 </template>
@@ -68,23 +65,15 @@ function removeLastFilter() {
       align-items: center;
       width: 100%;
       border: none;
-      border: solid 1px $primary;
       line-height: 2.25rem;
-      background-color: transparent;
-      color: rgb(255, 255, 255);
+      background-color: $gray5;
+      color: inherit;
       font-size: 1rem;
-      outline: none;
-      transition: all 0.5s ease;
       padding-left: 0.75rem;
+      outline: 2px solid transparent;
 
       &:focus {
-        transition: all 0.5s ease;
-        color: rgb(255, 255, 255);
-        outline: none;
-
-        &::placeholder {
-          display: none;
-        }
+        outline: solid $accent;
       }
     }
   }

src/components/RightSideBar/queue/playingFrom.vue

@@ -1,54 +1,59 @@
 <template>
   <div id="playing-from" class="rounded" @click="goTo">
     <div class="h">
-      <div class="icon image" :class="from.type"></div>
+      <div class="icon image" :class="from.icon"></div>
      Playing from
     </div>
     <div class="name">
       <div id="to">
-        {{ from.name }}
+        {{ from.text }}
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { fromFolder, fromAlbum, fromPlaylist } from "../../../interfaces";
+import { fromFolder, fromAlbum, fromPlaylist, fromSearch } from "../../../interfaces";
 import { FromOptions } from "../../../composables/enums";
 import { useRouter } from "vue-router";
 import { computed } from "@vue/reactivity";
 
 const props = defineProps<{
-  from: fromFolder | fromAlbum | fromPlaylist;
+  from: fromFolder | fromAlbum | fromPlaylist | fromSearch;
 }>();
 
 interface from {
-  type: string;
-  name: string;
+  icon: string;
+  text: string;
 }
 
 const from = computed((): from => {
   switch (props.from.type) {
     case undefined:
       return {
-        type: "album",
-        name: "Welcome to Alice",
+        icon: "album",
+        text: "Welcome to Alice",
       };
     case FromOptions.folder:
       return {
-        type: "folder",
-        name: props.from.name,
+        icon: "folder",
+        text: props.from.name,
       };
     case FromOptions.album:
       return {
-        type: "album",
-        name: props.from.name,
+        icon: "album",
+        text: props.from.name,
       };
     case FromOptions.playlist:
       return {
-        type: "playlist",
-        name: props.from.name,
+        icon: "playlist",
+        text: props.from.name,
       };
+    case FromOptions.search:
+      return {
+        icon: "search",
+        text: `Search results for: "${props.from.query}"`
+      }
   }
 });