move global search input to a general location

- create a global search store
- create a half-baked context menu store
-

src/components/AlbumView/Header.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="album-h">
+  <div class="album-h" @contextmenu="hideShowContext">
+    <ContextMenu />
     <div class="a-header">
       <div
         class="image art shadow-lg"
-        :style="{ backgroundImage: `url(&quot;${props.album_info.image}&quot;)` }"
+        :style="{
+          backgroundImage: `url(&quot;${props.album_info.image}&quot;)`,
+        }"
       ></div>
       <div class="info">
         <div class="top">
@@ -15,7 +18,8 @@
         <div class="separator no-border"></div>
         <div class="bottom">
           <div class="stats shadow-sm">
-            {{ props.album_info.count }} Tracks • {{ perks.formatSeconds(props.album_info.duration, "long") }} •
+            {{ props.album_info.count }} Tracks •
+            {{ perks.formatSeconds(props.album_info.duration, "long") }} •
             {{ props.album_info.date }}
           </div>
           <div class="play rounded" @click="playAlbum">
@@ -31,6 +35,11 @@
 <script setup>
 import state from "@/composables/state.js";
 import perks from "@/composables/perks.js";
+import ContextMenu from "../contextMenu.vue";
+import { reactive, ref } from "vue";
+import useContextStore from "@/stores/context.js";
+
+const contextStore = useContextStore();
 
 const props = defineProps({
   album_info: {
@@ -39,6 +48,15 @@ const props = defineProps({
   },
 });
 
+const hideShowContext = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  contextStore.showContextMenu(e);
+};
+
+const context_hide = ref(true);
+
 function playAlbum() {
   perks.updateQueue(state.album.tracklist[0], "album");
 }
@@ -52,13 +70,11 @@ function playAlbum() {
 
   gap: $small;
   position: relative;
-  overflow: hidden;
   height: 14rem;
 }
 
 .a-header {
   position: relative;
-  overflow: hidden;
   display: flex;
   align-items: center;
   padding: 1rem;

src/components/LeftSidebar/AlbumArt.vue

@@ -34,5 +34,14 @@ const props = defineProps({
     height: 13rem;
     width: 13rem;
   }
+
+  .artists {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.808);
+
+    &:hover {
+      text-decoration: underline 1px !important;
+    }
+  }
 }
 </style>

src/components/LeftSidebar/SongCard.vue

@@ -36,4 +36,4 @@ const props = defineProps({
   },
 });
 const putCommas = perks.putCommas;
-</script>
+</script>

src/components/RightSideBar/Recommendation.vue

@@ -37,7 +37,7 @@ export default {
 
 <style lang="scss">
 .r-tracks {
-  margin-top: 0.5rem;
+  margin: 0.5rem 0.5rem 0.5rem 0;
   padding: 0.5rem;
 }
 

src/components/RightSideBar/Search.vue

@@ -1,24 +1,7 @@
 <template>
   <div class="right-search">
-    <div>
-      <div class="input">
-        <Filters :filters="filters" @removeFilter="removeFilter" />
-        <div class="input-loader border">
-          <input
-            id="search"
-            v-model="query"
-            placeholder="find your music"
-            type="text"
-            @keyup.backspace="removeLastFilter"
-          />
-          <div class="_loader">
-            <Loader />
-          </div>
-        </div>
-      </div>
-      <div class="separator no-border"></div>
-      <Options @addFilter="addFilter" />
-    </div>
+    <Options />
+    <!-- </div> -->
     <div class="scrollable" ref="search_thing">
       <TracksGrid
         v-if="tracks.tracks.length"
@@ -26,7 +9,7 @@
         :tracks="tracks.tracks"
         @loadMore="loadMoreTracks"
       />
-      <div class="separator no-border"></div>
+      <div class="separator no-border" v-if="tracks.tracks.length"></div>
 
       <AlbumGrid
         v-if="albums.albums.length"
@@ -42,166 +25,118 @@
         @loadMore="loadMoreArtists"
       />
       <div
-        v-if="
+        v-if="search.query.trim().length === 0"
+        class="no-res border rounded"
+      >
+        <div class="no-res-text">👻 Find your music</div>
+      </div>
+      <div
+        v-else-if="
           !artists.artists.length &&
           !tracks.tracks.length &&
-          !albums.albums.length &&
-          query.length !== 0
+          !albums.albums.length
         "
         class="no-res border rounded"
       >
         <div class="no-res-text">
-          No results for <span class="highlight rounded">{{ query }}</span>
+          No results for
+          <span class="highlight rounded">{{ search.query }}</span>
         </div>
       </div>
-      <div v-else-if="query.length === 0" class="no-res border rounded">
-        <div class="no-res-text">👻 Find your music</div>
-      </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
 import { reactive, ref } from "@vue/reactivity";
 
-import { watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
 import searchMusic from "@/composables/searchMusic.js";
 import useDebouncedRef from "@/composables/useDebouncedRef";
 import AlbumGrid from "@/components/Search/AlbumGrid.vue";
 import ArtistGrid from "@/components/Search/ArtistGrid.vue";
 import TracksGrid from "@/components/Search/TracksGrid.vue";
-import Loader from "@/components/shared/Loader.vue";
 import Options from "@/components/Search/Options.vue";
-import Filters from "@/components/Search/Filters.vue";
-import "@/assets/css/Search/Search.scss";
 import loadMore from "../../composables/loadmore";
+import useSearchStore from "../../stores/gsearch";
+import useTabStore from "../../stores/tabs";
 
-export default {
-  components: {
-    AlbumGrid,
-    ArtistGrid,
-    TracksGrid,
-    Loader,
-    Options,
-    Filters,
-  },
+import "@/assets/css/Search/Search.scss";
 
-  setup() {
-    const search_thing = ref(null);
-    const loading = ref(state.loading);
-    const filters = ref([]);
+const search = useSearchStore();
+const tabs = useTabStore();
 
-    const tracks = reactive({
-      tracks: [],
-      more: false,
-    });
+const search_thing = ref(null);
 
-    let albums = reactive({
-      albums: [],
-      more: false,
-    });
+const tracks = reactive({
+  tracks: [],
+  more: false,
+});
 
-    const artists = reactive({
-      artists: [],
-      more: false,
-    });
+let albums = reactive({
+  albums: [],
+  more: false,
+});
 
-    const query = useDebouncedRef("", 600);
+const artists = reactive({
+  artists: [],
+  more: false,
+});
 
-    function addFilter(filter) {
-      if (!filters.value.includes(filter)) {
-        filters.value.push(filter);
-      }
+const query = useDebouncedRef("", 600);
+
+function scrollSearchThing() {
+  search_thing.value.scroll({
+    top: search_thing.value.scrollTop + 330,
+    left: 0,
+    behavior: "smooth",
+  });
+}
+
+function loadMoreTracks(start) {
+  scrollSearchThing();
+  loadMore.loadMoreTracks(start).then((response) => {
+    tracks.tracks = [...tracks.tracks, ...response.tracks];
+    tracks.more = response.more;
+  });
+}
+
+function loadMoreAlbums(start) {
+  loadMore.loadMoreAlbums(start).then((response) => {
+    albums.albums = [...albums.albums, ...response.albums];
+    albums.more = response.more;
+  });
+}
+
+function loadMoreArtists(start) {
+  scrollSearchThing();
+  loadMore.loadMoreArtists(start).then((response) => {
+    artists.artists = [...artists.artists, ...response.artists];
+    artists.more = response.more;
+  });
+}
+
+search.$subscribe((mutation, state) => {
+  if (state.query.trim() == "") {
+    tracks.tracks = [];
+    albums.albums = [];
+    artists.artists = [];
+    return;
+  }
+
+  searchMusic(state.query).then((res) => {
+    if (tabs.current !== tabs.tabs.search) {
+      tabs.switchToSearch();
     }
 
-    function removeFilter(filter) {
-      filters.value = filters.value.filter((f) => f !== filter);
-    }
+    albums.albums = res.albums.albums;
+    albums.more = res.albums.more;
 
-    let counter = 0;
+    artists.artists = res.artists.artists;
+    artists.more = res.artists.more;
 
-    function removeLastFilter() {
-      if (query.value === "" || query.value === null) {
-        counter++;
-
-        if (counter > 1 || query.value === null) {
-          filters.value.pop();
-        }
-      }
-    }
-
-    function scrollSearchThing() {
-      search_thing.value.scroll({
-        top: search_thing.value.scrollTop + 330,
-        left: 0,
-        behavior: "smooth",
-      });
-    }
-
-    function loadMoreTracks(start) {
-      scrollSearchThing();
-      loadMore.loadMoreTracks(start).then((response) => {
-        tracks.tracks = [...tracks.tracks, ...response.tracks];
-        tracks.more = response.more;
-      });
-    }
-
-    function loadMoreAlbums(start) {
-      loadMore.loadMoreAlbums(start).then((response) => {
-        albums.albums = [...albums.albums, ...response.albums];
-        albums.more = response.more;
-      });
-    }
-
-    function loadMoreArtists(start) {
-      scrollSearchThing();
-      loadMore.loadMoreArtists(start).then((response) => {
-        artists.artists = [...artists.artists, ...response.artists];
-        artists.more = response.more;
-      });
-    }
-
-    watch(query, (new_query) => {
-      if (
-        query.value === "" ||
-        query.value === "  " ||
-        query.value.length < 2
-      ) {
-        albums.albums = [];
-        artists.artists = [];
-        tracks.tracks = [];
-
-        return;
-      }
-
-      searchMusic(new_query).then((res) => {
-        albums.albums = res.albums.albums;
-        albums.more = res.albums.more;
-
-        artists.artists = res.artists.artists;
-        artists.more = res.artists.more;
-
-        tracks.tracks = res.tracks.tracks;
-        tracks.more = res.tracks.more;
-      });
-    });
-
-    return {
-      addFilter,
-      removeFilter,
-      removeLastFilter,
-      loadMoreTracks,
-      loadMoreAlbums,
-      loadMoreArtists,
-      tracks,
-      albums,
-      artists,
-      query,
-      filters,
-      loading,
-      search_thing,
-    };
-  },
-};
+    tracks.tracks = res.tracks.tracks;
+    tracks.more = res.tracks.more;
+  });
+});
 </script>

src/components/RightSideBar/SearchInput.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="gsearch-input">
+    <Filters :filters="search.filters" @removeFilter="removeFilter" />
+    <div class="input-loader border">
+      <input
+        id="search"
+        v-model="search.query"
+        placeholder="Aretha Franklin"
+        type="text"
+        @keyup.backspace="removeLastFilter"
+      />
+      <div class="_loader">
+        <Loader />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Filters from "../Search/Filters.vue";
+import Loader from "../shared/Loader.vue";
+import useSearchStore from "../../stores/gsearch";
+
+const search = useSearchStore();
+
+function removeFilter(filter) {
+  search.removeFilter(filter);
+}
+
+let counter = 0;
+
+function removeLastFilter() {
+  if (search.query === "") {
+    counter++;
+
+    if (counter > 0) {
+      search.removeLastFilter();
+    }
+  } else {
+    counter = 0;
+  }
+}
+</script>
+
+<style lang="scss">
+.gsearch-input {
+  margin-top: $small;
+  padding: 0 $small;
+  display: flex;
+
+  .input-loader {
+    width: 100%;
+    border-radius: 0.4rem;
+    position: relative;
+
+    ._loader {
+      position: absolute;
+      top: -0.25rem;
+      right: 2rem;
+    }
+
+    input {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      border: none;
+      line-height: 2rem;
+      background-color: transparent;
+      color: rgb(255, 255, 255);
+      font-size: 1rem;
+      outline: none;
+      transition: all 0.5s ease;
+      padding-left: 0.75rem;
+
+      &:focus {
+        transition: all 0.5s ease;
+        color: rgb(255, 255, 255);
+        outline: none;
+
+        &::placeholder {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/RightSideBar/Tabs.vue

@@ -5,9 +5,11 @@
         v-for="tab in tabs.tabs"
         @click="tabs.changeTab(tab)"
         :key="tab"
-        class="image t-item"
-        :class="({ active_tab: tabs.current === tab }, `${tab}`)"
-      ></div>
+        class="container"
+        :class="{ active_tab: tabs.current === tab }"
+      >
+        <div class="image t-item" :class="`${tab}`"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -15,7 +17,7 @@
 <script setup>
 import useTabStore from "../../stores/tabs";
 
-const tabs = useTabStore()
+const tabs = useTabStore();
 </script>
 
 <style lang="scss">
@@ -38,16 +40,25 @@ const tabs = useTabStore()
     height: 2.25rem;
     background-size: 1.5rem;
     border-radius: $small;
-    background-color: $gray4;
+    transition: all 0.25s;
+    width: 4rem;
 
     &:hover {
-      background-color: rgba(128, 128, 128, 0.281);
+      background-color: $gray3;
     }
   }
 
   .active_tab {
-    border: solid;
-    background-color: rgba(17, 123, 223, 0.192);
+    border-radius: $small;
+    display: flex;
+    justify-content: center;
+    width: 4rem;
+
+    .t-item {
+      background-color: transparent;
+    }
+
+    background-image: linear-gradient(to right, $blue, $red) !important;
   }
 
   .search {

src/components/Search/Filters.vue

@@ -27,9 +27,10 @@ export default {
 </script>
 
 <style lang="scss">
-.right-search .filter {
+.gsearch-input .filter {
   display: flex;
-  height: 2rem;
+  // height: 2rem;
+  // border: solid;
 
   .item {
     transition: all 0.2s ease-in-out;

src/components/Search/Options.vue

@@ -5,7 +5,7 @@
       class="item"
       v-for="option in options"
       :key="option"
-      @click="addFilter(option.icon)"
+      @click="search.addFilter(option.icon)"
     >
       <div>
         <span class="icon">{{ option.icon }}</span>
@@ -15,43 +15,33 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ["magic_flag"],
-  setup(props, { emit }) {
-    const options = [
-      {
-        title: "Track",
-        icon: "🎵",
-      },
-      {
-        title: "Album",
-        icon: "💿",
-      },
-      {
-        title: "Artist",
-        icon: "👤",
-      },
-      {
-        title: "Playlist",
-        icon: "🎧",
-      },
-      {
-        title: "Folder",
-        icon: "📁",
-      },
-    ];
+<script setup>
+import useSearchStore from "../../stores/gsearch";
 
-    function addFilter(value) {
-      emit("addFilter", value);
-    }
+const search = useSearchStore();
 
-    return {
-      options,
-      addFilter,
-    };
+const options = [
+  {
+    title: "Track",
+    icon: "🎵",
   },
-};
+  {
+    title: "Album",
+    icon: "💿",
+  },
+  {
+    title: "Artist",
+    icon: "👤",
+  },
+  {
+    title: "Playlist",
+    icon: "🎧",
+  },
+  {
+    title: "Folder",
+    icon: "📁",
+  },
+];
 </script>
 
 <style lang="scss">
@@ -80,7 +70,7 @@ export default {
     .icon {
       position: absolute;
       top: 0.5rem;
-      left: .75rem;
+      left: 0.75rem;
     }
 
     &:hover {

src/components/contextMenu.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    class="context-menu rounded"
+    :class="{ 'context-menu-visible': context.visible }"
+    v-show="context.visible"
+    :style="{
+      left: context.x + 'px',
+      top: context.y + 'px',
+    }"
+  >
+    <div class="context-item" v-for="option in options" :key="option.label">
+      <div class="icon image" :class="option.icon"></div>
+      <div class="label ellip" @click="option.action">{{ option.label }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useContextStore from "@/stores/context.js";
+
+const context = useContextStore();
+
+// const props = defineProps({
+//   context: {
+//     type: Object,
+//     required: true,
+//   },
+// });
+
+const options = [
+  {
+    label: "Item 1 and another one of my long stories",
+    icon: "folder",
+    action: () => {
+      console.log("Item 1 clicked");
+    },
+  },
+  {
+    label: "Item 2",
+    icon: "folder",
+
+    action: () => {
+      console.log("Item 2 clicked");
+    },
+  },
+  {
+    label: "Item 3",
+    icon: "folder",
+    action: () => {
+      console.log("Item 3 clicked");
+    },
+  },
+  {
+    label: "Item 4",
+    icon: "folder",
+
+    action: () => {
+      console.log("Item 4 clicked");
+    },
+  },
+  {
+    label: "Item 5",
+    icon: "folder",
+
+    action: () => {
+      console.log("Item 5 clicked");
+    },
+  },
+];
+
+</script>
+
+<style lang="scss">
+.context-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 14rem;
+  height: min-content;
+  padding: $small;
+  background: $gray;
+  z-index: 100000 !important;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .context-item {
+    width: 100%;
+    height: 3rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    cursor: pointer;
+    padding: 0 $small;
+    border-radius: $small;
+    transition: background 0.2s ease-in-out;
+
+    .icon {
+      height: 1.25rem;
+      width: 1.25rem;
+      margin-right: $small;
+    }
+
+    .label {
+      width: 10rem;
+    }
+
+    .folder {
+      background-image: url("../assets/icons/folder.svg");
+    }
+
+    &:hover {
+      background: #234ece;
+    }
+  }
+}
+
+// .visible {
+//     display: unset;
+// }
+</style>

src/components/shared/SongItem.vue

@@ -7,7 +7,7 @@
     <td class="index">{{ index }}</td>
     <td class="flex">
       <div
-        class="album-art image"
+        class="album-art image rounded"
         :style="{ backgroundImage: `url(&quot;${song.image}&quot;` }"
         @click="emitUpdate(song)"
       >

src/components/shared/TrackItem.vue

@@ -7,7 +7,7 @@
     }"
   >
     <div
-      class="album-art image"
+      class="album-art image rounded"
       :style="{
         backgroundImage: `url(&quot;${props.track.image}&quot;)`,
       }"