move global search to right sidebar

package.json

@@ -9,7 +9,6 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
-    "animate.css": "^4.1.1",
     "mitt": "^3.0.0",
     "register-service-worker": "^1.7.1",
     "sass": "^1.49.0",

server/app/api.py

@@ -15,7 +15,7 @@ def initialize() -> None:
     Runs all the necessary setup functions.
     """
     helpers.create_config_dir()
-    # helpers.check_for_new_songs()
+    helpers.check_for_new_songs()
 
 
 initialize()

src/App.vue

@@ -12,22 +12,10 @@
       <PinnedStuff :collapsed="collapsed" />
     </div>
     <div class="content">
-      <div class="search-box">
+      <div class="search-box"></div>
-        <Search
-          v-model:search="search"
-          @expandSearch="expandSearch"
-          @collapseSearch="collapseSearch"
-        />
-      </div>
       <router-view />
     </div>
-    <div class="r-sidebar">
+    <RightSideBar />
-      <div class="m-np">
-        <NowPlaying />
-      </div>
-      <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
-      <RecommendedArtist />
-    </div>
     <div class="bottom-bar">
       <BottomBar />
     </div>
@@ -38,24 +26,18 @@
 import { ref } from "@vue/reactivity";
 
 import Navigation from "./components/LeftSidebar/Navigation.vue";
-import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue"
+import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
-import Search from "./components/Search.vue";
-import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
-import UpNext from "./components/RightSideBar/UpNext.vue";
-import RecommendedArtist from "./components/RightSideBar/Recommendation.vue";
 import BottomBar from "@/components/BottomBar/BottomBar.vue";
 
 import perks from "@/composables/perks.js";
+import Main from "./components/RightSideBar/Main.vue";
 
 export default {
   components: {
     Navigation,
     PinnedStuff,
-    Search,
+    BottomBar,
-    NowPlaying,
+    RightSideBar: Main,
-    UpNext,
-    RecommendedArtist,
-    BottomBar
   },
 
   setup() {
@@ -67,29 +49,9 @@ export default {
       collapsed.value = !collapsed.value;
     }
 
-    let up_next = ref(true);
-    let search = ref(false);
-
-    const expandQueue = () => {
-      up_next.value = !up_next.value;
-    };
-
-    const expandSearch = () => {
-      search.value = true;
-    };
-
-    const collapseSearch = () => {
-      search.value = false;
-    };
-
     return {
       toggleNav,
-      expandSearch,
-      collapseSearch,
-      expandQueue,
       collapsed,
-      up_next,
-      search,
     };
   },
 };
@@ -106,10 +68,10 @@ export default {
   #toggle {
     position: absolute;
     left: 0.2rem;
-    width: 4rem;
+    width: 3rem;
     height: 100%;
     background: url(./assets/icons/menu.svg);
-    background-size: 50%;
+    background-size: 2rem;
     background-repeat: no-repeat;
     background-position: center;
     cursor: pointer;
@@ -118,14 +80,11 @@ export default {
 .logo {
   height: 2rem;
   width: 9rem;
-  margin-left: 4rem;
+  margin-left: 3rem;
   background: url(./assets/logo.svg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
-  animation: fadeIn;
-  animation-duration: 2s;
-  animation-iteration-count: 1;
 }
 
 .r-sidebar {

src/assets/css/BottomBar/BottomBar.scss

@@ -47,6 +47,7 @@
       align-items: center;
       margin: $small;
       padding: $small;
+      background-color: $bbb;
 
       .progress-bottom {
         display: flex;

src/assets/css/Search/Search.scss

@@ -45,6 +45,8 @@
 
   .search-icon {
     position: absolute;
+    top: 0;
+    right: 0;
     height: 2.5rem;
     width: 2.5rem;
     background-image: url(../../icons/search.svg);

src/assets/css/_variables.scss

@@ -7,12 +7,16 @@ $green: #439443;
 $separator: #ffffff46;
 $pink: #c43a3a;
 $highlight-blue: #006eff;
+$bbb: #050608; //bottom controls background
+
 // sizes
-$small: 0.5em;
+$small: 0.5rem;
-$smaller: 0.25em;
+$smaller: 0.25rem;
+$medium: 0.75rem;
+$large: 1.5rem;
+$larger: 2rem;
 
 // media query mixins
-
 @mixin phone-only {
   @media (max-width: 599px) {
     @content;

src/assets/css/global.scss

@@ -95,11 +95,9 @@ button {
 }
 
 .l-sidebar {
-  width: 15em;
+  width: 15rem;
   grid-area: l-sidebar;
   padding-top: 0.5rem;
-  margin: 0.5rem 0 0.5rem 0.5rem;
-  border-radius: 0.5rem;
   background-color: $card-dark;
 }
 
@@ -109,7 +107,7 @@ button {
 }
 
 .collapsed .l-sidebar {
-  width: 70px;
+  width: 3rem;
   transition: all 0.3s ease;
 }
 
@@ -141,16 +139,6 @@ button {
 
 .r-sidebar {
   grid-area: r-sidebar;
-  border-radius: 5px;
-  margin-right: 0.5rem;
-  overflow-y: auto;
-  width: 30em;
-  position: relative;
-  margin-bottom: 0.5em;
-
-  @include tablet-landscape {
-    display: none;
-  }
 }
 
 .image {

src/components/LeftSidebar/Navigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="side-nav-container border" :class="{ collapsed: collapsed }">
+  <div class="side-nav-container" :class="{ collapsed: collapsed }">
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="home-button">
         <div class="in">
@@ -75,14 +75,12 @@ export default {
 <style lang="scss">
 .collapsed {
   .nav-button {
-    font-size: smaller;
     margin-top: 5px;
-    align-items: center;
-    justify-content: center;
 
     span {
       display: none;
     }
+
     .in {
       width: 100%;
       flex-direction: column;
@@ -93,8 +91,9 @@ export default {
 .side-nav-container {
   padding: $small;
   color: #fff;
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
   padding-top: 10px;
+  margin-top: 1rem;
 
   .nav-button {
     border-radius: $small;
@@ -105,7 +104,33 @@ export default {
     padding: 0.6rem 0 0.6rem 0;
 
     &:hover {
-      background-color: rgb(5, 80, 150);
+      #home-icon {
+        background-color: rgba(145, 58, 58, 0.555);
+      }
+
+      #album-icon {
+        background-color: rgba(113, 58, 145, 0.555);
+      }
+
+      #artists-icon {
+        background-color: rgba(13, 72, 139, 0.555);
+      }
+
+      #playlists-icon {
+        background-color: rgba(206, 13, 132, 0.555);
+      }
+
+      #mixes-icon {
+        background-color: rgba(0, 85, 81, 0.555);
+      }
+
+      #folders-icon {
+        background-color: rgba(90, 89, 3, 0.596);
+      }
+
+      #settings-icon {
+        background-color: rgba(129, 106, 106, 0.596);
+      }
     }
 
     .nav-icon {

src/components/RightSideBar/Main.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="r-sidebar">
+    <!-- <div class="m-np"> -->
+      <!-- <NowPlaying class="hidden"/> -->
+    <!-- </div> -->
+    <div class="s">
+      <Search
+        v-model:search="search"
+        @expandSearch="expandSearch"
+        @collapseSearch="collapseSearch"
+      />
+    </div>
+    <div class="q">
+      <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
+    </div>
+    <div class="r">
+      <RecommendedArtist />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Search from "../Search.vue";
+import UpNext from "./UpNext.vue";
+import RecommendedArtist from "@/components/RightSideBar/Recommendation.vue";
+
+let up_next = ref(true);
+let search = ref(false);
+
+const expandQueue = () => {
+  up_next.value = !up_next.value;
+};
+
+const expandSearch = () => {
+  search.value = true;
+};
+
+const collapseSearch = () => {
+  search.value = false;
+};
+</script>
+
+<style lang="scss">
+.r-sidebar {
+  border-radius: 5px;
+  margin-right: 0.5rem;
+  margin-bottom: $small;
+  overflow-y: auto;
+  width: 30em;
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-rows: min-content min-content auto;
+}
+</style>

src/components/RightSideBar/UpNext.vue

@@ -25,37 +25,7 @@
         :class="{ v0: !is_expanded, v1: is_expanded }"
         class="scrollable border"
       >
-        <div
+        <TrackItem v-for="song in queue" :key="song" :track="song" />
-          class="song-item h-1"
-          v-for="song in queue"
-          :key="song"
-          @click="playThis(song)"
-          :class="{
-            currentInQueue: current.id == song.id,
-          }"
-        >
-          <div
-            class="album-art image"
-            :style="{
-              backgroundImage: `url(&quot;${song.image}&quot;)`,
-            }"
-          >
-            <div
-              class="now-playing-track image"
-              v-if="current.id == song.id"
-              :class="{ active: is_playing, not_active: !is_playing }"
-            ></div>
-          </div>
-          <div class="tags">
-            <div class="title ellip">{{ song.title }}</div>
-            <hr />
-            <div class="artist ellip">
-              <span v-for="artist in putCommas(song.artists)" :key="artist">{{
-                artist
-              }}</span>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -65,16 +35,14 @@
 import { ref, toRefs } from "@vue/reactivity";
 import perks from "@/composables/perks.js";
 import audio from "@/composables/playAudio.js";
-import state from "@/composables/state.js";
 import { watch } from "@vue/runtime-core";
+import TrackItem from "../shared/TrackItem.vue";
 
 export default {
   props: ["up_next"],
   setup(props, { emit }) {
     const is_expanded = toRefs(props).up_next;
-
     const queue = ref(perks.queue);
-    const current = ref(perks.current);
     const next = ref(perks.next);
 
     let collapse = () => {
@@ -90,27 +58,18 @@ export default {
     });
 
     const { playNext } = audio;
-    const { playAudio } = audio;
-
-    const playThis = (song) => {
-      playAudio(song.filepath);
-      perks.current.value = song;
-    };
 
     const putCommas = perks.putCommas;
-
     return {
       collapse,
       is_expanded,
-      is_playing: state.is_playing,
       playNext,
-      playThis,
       putCommas,
       queue,
-      current,
       next,
     };
   },
+  components: { TrackItem },
 };
 </script>
 
@@ -207,38 +166,4 @@ export default {
     background-color: transparent;
   }
 }
-
-.up-next .scrollable .song-item {
-  display: flex;
-  align-items: center;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-
-  &:hover {
-    cursor: pointer;
-    background-color: $blue;
-  }
-
-  hr {
-    border: none;
-    margin: 0.1rem;
-  }
-
-  .album-art {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 3rem;
-    height: 3rem;
-    margin: 0 0.5rem 0 0;
-    border-radius: 0.5rem;
-    background-image: url(../../assets/images/null.webp);
-  }
-  .artist {
-    width: 20rem;
-    font-size: small;
-    color: rgba(255, 255, 255, 0.637);
-  }
-}
 </style>

src/components/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-search border" ref="searchComponent">
     <div class="input">
-      <div class="search-icon image"></div>
+      <Loader />
       <Filters :filters="filters" @removeFilter="removeFilter" />
       <div class="input-loader border">
         <input
@@ -13,7 +13,8 @@
           placeholder="find your music"
           v-model="query"
         />
-        <Loader />
+        <div class="search-icon image"></div>
+        <!--  -->
       </div>
       <div
         class="suggestions v00"

src/components/Search/Loader.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="loader" v-if="loading"></div>
+  <div class="loaderx" :class="{ loader: loading, not_loader: !loading }">
+    <div class="content" v-if="!loading">/</div>
+  </div>
 </template>
 
 <script>
@@ -14,12 +16,15 @@ export default {
 </script>
 
 <style lang="scss">
-.loader {
+.loaderx {
   position: absolute;
-  right: 0.65rem;
+  left: 0.65rem;
   top: 0.65rem;
   width: 1.5rem;
   height: 1.5rem;
+}
+
+.loader {
   border: dotted $blue;
   border-radius: 50%;
   animation: spin 0.25s linear infinite;
@@ -33,4 +38,10 @@ export default {
     }
   }
 }
+
+.not_loader {
+  border: solid 1px;
+  border-radius: 50%;
+  background-image: url("");
+}
 </style>

src/components/Search/TracksGrid.vue

@@ -4,11 +4,10 @@
     <div class="items">
       <table>
         <tbody>
-          <SongItem
+          <TrackItem
-            v-for="(track, index) in props.tracks"
+            v-for="track in props.tracks"
             :key="track"
-            :song="track"
+            :track="track"
-            :index="index + 1"
           />
         </tbody>
       </table>
@@ -18,8 +17,8 @@
 </template>
 
 <script setup>
-import SongItem from "@/components/shared/SongItem.vue";
 import LoadMore from "./LoadMore.vue";
+import TrackItem from "../shared/TrackItem.vue";
 
 const props = defineProps({
   tracks: {

src/components/shared/TrackItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="track-item h-1"
+    @click="playThis(props.track)"
+    :class="{
+      currentInQueue: current.id == props.track.id,
+    }"
+  >
+    <div
+      class="album-art image"
+      :style="{
+        backgroundImage: `url(&quot;${props.track.image}&quot;)`,
+      }"
+    >
+      <div
+        class="now-playing-track image"
+        v-if="current.id == props.track.id"
+        :class="{ active: is_playing, not_active: !is_playing }"
+      ></div>
+    </div>
+    <div class="tags">
+      <div class="title ellip">{{ props.track.title }}</div>
+      <hr />
+      <div class="artist ellip">
+        <span v-for="artist in putCommas(props.track.artists)" :key="artist">{{
+          artist
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import perks from "../../composables/perks";
+import playAudio from "../../composables/playAudio";
+
+const props = defineProps({
+  track: Object,
+});
+
+const current = ref(perks.current);
+const putCommas = perks.putCommas;
+const is_playing = ref(playAudio.playing);
+
+const playThis = (song) => {
+  playAudio.playAudio(song.filepath);
+  perks.current.value = song;
+};
+
+</script>
+
+<style lang="scss">
+.track-item {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $blue;
+  }
+
+  hr {
+    border: none;
+    margin: 0.1rem;
+  }
+
+  .album-art {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 3rem;
+    height: 3rem;
+    margin: 0 0.5rem 0 0;
+    border-radius: 0.5rem;
+    background-image: url(../../assets/images/null.webp);
+  }
+  .artist {
+    width: 20rem;
+    font-size: small;
+    color: rgba(255, 255, 255, 0.637);
+  }
+}
+</style>

src/main.js

@@ -5,7 +5,6 @@ import router from "./router";
 
 import "../src/assets/css/global.scss";
 
-import "animate.css";
 import mitt from "mitt";
 
 const emitter = mitt();

yarn.lock

@@ -333,11 +333,6 @@ ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-animate.css@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
-  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"