move global search input to a general location

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

src/App.vue

@@ -16,6 +16,7 @@
     <div class="content">
       <router-view />
     </div>
+    <SearchInput />
     <RightSideBar />
     <Tabs />
     <div class="bottom-bar">
@@ -35,10 +36,24 @@ import Main from "./components/RightSideBar/Main.vue";
 import AlbumArt from "./components/LeftSidebar/AlbumArt.vue";
 import NavBar from "./components/nav/NavBar.vue";
 import Tabs from "./components/RightSideBar/Tabs.vue";
+import SearchInput from "./components/RightSideBar/SearchInput.vue";
+import useContextStore from "./stores/context.js";
+
+const context_store = useContextStore();
 
 const RightSideBar = Main;
 perks.readQueue();
 const collapsed = ref(false);
+
+const app_dom = document.getElementById("app");
+
+app_dom.addEventListener("click", (e) => {
+  const context_menu = perks.getElem("context-menu-visible", "class");
+  console.log(e.target.offsetParent);
+  if (e.target.offsetParent != context_menu) {
+    context_store.hideContextMenu();
+  }
+});
 </script>
 
 <style lang="scss">

src/assets/css/Search/Search.scss

@@ -46,39 +46,3 @@
     display: none;
   }
 }
-
-.right-search {
-  .input-loader {
-    width: 100%;
-    border-radius: 0.4rem;
-    position: relative;
-
-    ._loader {
-      position: absolute;
-      top: 0;
-      right: 2rem;
-    }
-
-    input {
-      width: calc(100% - 2.5rem);
-      border: none;
-      line-height: 2.5rem;
-      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;
-        }
-      }
-    }
-  }
-}

src/assets/css/global.scss

@@ -87,7 +87,7 @@ button {
   grid-template-rows: 3rem 1fr 1fr;
   grid-auto-flow: row;
   grid-template-areas:
-    "l-sidebar nav r-sidebar"
+    "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
     "l-sidebar bottom-bar tabs";
@@ -103,6 +103,11 @@ button {
   }
 }
 
+.gsearch-input {
+  grid-area: search-input;
+  border-left: solid 1px $gray;
+}
+
 .topnav {
   grid-area: nav;
 }

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>
+    <Options />
-      <div class="input">
+    <!-- </div> -->
-        <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>
     <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 &&
+          !albums.albums.length
-          query.length !== 0
         "
         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 {
+import "@/assets/css/Search/Search.scss";
-  components: {
-    AlbumGrid,
-    ArtistGrid,
-    TracksGrid,
-    Loader,
-    Options,
-    Filters,
-  },
 
-  setup() {
+const search = useSearchStore();
-    const search_thing = ref(null);
+const tabs = useTabStore();
-    const loading = ref(state.loading);
-    const filters = ref([]);
 
-    const tracks = reactive({
+const search_thing = ref(null);
-      tracks: [],
-      more: false,
-    });
 
-    let albums = reactive({
+const tracks = reactive({
-      albums: [],
+  tracks: [],
-      more: false,
+  more: false,
-    });
+});
 
-    const artists = reactive({
+let albums = reactive({
-      artists: [],
+  albums: [],
-      more: false,
+  more: false,
-    });
+});
 
-    const query = useDebouncedRef("", 600);
+const artists = reactive({
+  artists: [],
+  more: false,
+});
 
-    function addFilter(filter) {
+const query = useDebouncedRef("", 600);
-      if (!filters.value.includes(filter)) {
+
-        filters.value.push(filter);
+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) {
+    albums.albums = res.albums.albums;
-      filters.value = filters.value.filter((f) => f !== filter);
+    albums.more = res.albums.more;
-    }
 
-    let counter = 0;
+    artists.artists = res.artists.artists;
+    artists.more = res.artists.more;
 
-    function removeLastFilter() {
+    tracks.tracks = res.tracks.tracks;
-      if (query.value === "" || query.value === null) {
+    tracks.more = res.tracks.more;
-        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,
-    };
-  },
-};
 </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="container"
-        :class="({ active_tab: tabs.current === tab }, `${tab}`)"
+        :class="{ active_tab: tabs.current === tab }"
-      ></div>
+      >
+        <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;
+    border-radius: $small;
-    background-color: rgba(17, 123, 223, 0.192);
+    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>
+<script setup>
-export default {
+import useSearchStore from "../../stores/gsearch";
-  props: ["magic_flag"],
-  setup(props, { emit }) {
-    const options = [
-      {
-        title: "Track",
-        icon: "🎵",
-      },
-      {
-        title: "Album",
-        icon: "💿",
-      },
-      {
-        title: "Artist",
-        icon: "👤",
-      },
-      {
-        title: "Playlist",
-        icon: "🎧",
-      },
-      {
-        title: "Folder",
-        icon: "📁",
-      },
-    ];
 
-    function addFilter(value) {
+const search = useSearchStore();
-      emit("addFilter", value);
-    }
 
-    return {
+const options = [
-      options,
+  {
-      addFilter,
+    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;)`,
       }"

src/composables/normalizeContextMenu.js

@@ -0,0 +1,34 @@
+import perks from "./perks";
+
+export default function normalizeContextMenu(x, y) {
+  const app_dom = perks.getElem("app", "id");
+  const context_menu = perks.getElem("context-menu-visible", "class");
+
+  const { left: scopeOffsetX, top: scopeOffsetY } =
+    app_dom.getBoundingClientRect();
+
+  const scopeX = x - scopeOffsetX;
+  const scopeY = y - scopeOffsetY;
+
+  const outOfBoundsX = scopeX + context_menu.clientHeight > app_dom.clientWidth;
+  const outOfBoundsY =
+    scopeY + context_menu.clientHeight > app_dom.clientHeight;
+
+  let normalizedX = x;
+  let normalizedY = y;
+
+  if (outOfBoundsX) {
+    normalizedX =
+      scopeOffsetX + app_dom.clientWidth - context_menu.clientHeight;
+  }
+
+  if (outOfBoundsY) {
+    normalizedY =
+      scopeOffsetY + app_dom.clientHeight - context_menu.clientHeight;
+  }
+
+  return {
+    normalizedX,
+    normalizedY,
+  };
+}

src/composables/perks.js

@@ -212,6 +212,8 @@ window.addEventListener("keyup", () => {
   key_down_fired = false;
 });
 
+
+
 function formatSeconds(seconds) {
   // check if there are arguments
 
@@ -258,6 +260,7 @@ export default {
   focusCurrent,
   updateQueue,
   formatSeconds,
+  getElem,
   current,
   queue,
   next,

src/composables/searchMusic.js

@@ -1,10 +1,10 @@
 import state from "./state.js";
 
-const base_url = "http://0.0.0.0:9876/search?q=";
+const base_url = `${state.settings.uri}/search?q=`;
 
 async function search(query) {
   state.loading.value = true;
-  const url = base_url + encodeURIComponent(query);
+  const url = base_url + encodeURIComponent(query.trim());
 
   const res = await fetch(url);
 

src/stores/context.js

@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+import normalizeContextMenu from "../composables/normalizeContextMenu";
+
+export default defineStore("context-menu", {
+  state: () => ({
+    visible: false,
+    x: 0,
+    y: 0,
+  }),
+  actions: {
+    showContextMenu(e) {
+      this.visible = true;
+      const { normalX, normalY } = normalizeContextMenu(e.clientX, e.clientY);
+      this.x = normalX;
+      this.y = normalY;
+    },
+    hideContextMenu() {
+      this.visible = false;
+    },
+  },
+});

src/stores/gsearch.js

@@ -0,0 +1,67 @@
+import { defineStore } from "pinia";
+import useDebouncedRef from "../composables/useDebouncedRef";
+
+export default defineStore("gsearch", {
+  state: () => ({
+    filters: [],
+    query: useDebouncedRef("", 600),
+    results: {
+      tracks: {
+        items: [],
+        more: false,
+      },
+      albums: {
+        items: [],
+        more: false,
+      },
+      artists: {
+        items: [],
+        more: false,
+      },
+    },
+  }),
+  actions: {
+    addFilter(filter) {
+      if (this.filters.includes(filter)) {
+        return;
+      }
+      this.filters.push(filter);
+    },
+    removeFilter(filter) {
+      this.filters = this.filters.filter((f) => f !== filter);
+    },
+    removeLastFilter() {
+      this.filters.pop();
+    },
+    updateQuery(query) {
+      this.query = query;
+    },
+    updateTrackResults(results) {
+      this.results.tracks = results;
+    },
+    addMoreTrackResults(results) {
+      this.results.tracks.items = [
+        ...this.results.tracks.items,
+        ...results.items,
+      ];
+    },
+    updateAlbumResults(results) {
+      this.results.albums = results;
+    },
+    addMoreAlbumResults(results) {
+      this.results.albums.items = [
+        ...this.results.albums.items,
+        ...results.items,
+      ];
+    },
+    updateArtistResults(results) {
+      this.results.artists = results;
+    },
+    addMoreArtistResults(results) {
+      this.results.artists.items = [
+        ...this.results.artists.items,
+        ...results.items,
+      ];
+    },
+  },
+});

src/stores/tabs.js

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import perks from "../composables/perks";
 
 const tablist = {
   home: "home",
@@ -14,8 +14,21 @@ export default defineStore("tabs", {
   }),
   actions: {
     changeTab(tab) {
+      if (tab === this.tabs.queue) {
+        setTimeout(() => {
+          perks.focusCurrent();
+        }, 500);
+      }
       this.current = tab;
-      console.log(this.current);
+    },
+    switchToQueue() {
+      this.changeTab(tablist.queue);
+    },
+    switchToSearch() {
+      this.changeTab(tablist.search);
+    },
+    switchToHome() {
+      this.changeTab(tablist.home);
     },
   },
 });