move global search input to a general location

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

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);
     },
   },
 });