fix: global event to clear search on navbar press

closes: modrinth#1979

Author: IMB11

apps/frontend/package.json

@@ -40,6 +40,7 @@
     "@modrinth/ui": "workspace:*",
     "@modrinth/utils": "workspace:*",
     "@pinia/nuxt": "^0.5.1",
+    "@types/three": "^0.172.0",
     "@vintl/vintl": "^4.4.1",
     "@vueuse/core": "^11.1.0",
     "ace-builds": "^1.36.2",
@@ -53,12 +54,12 @@
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
     "markdown-it": "14.1.0",
+    "mitt": "^3.0.1",
     "pathe": "^1.1.2",
     "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.0",
     "semver": "^7.5.4",
     "three": "^0.172.0",
-    "@types/three": "^0.172.0",
     "vue-multiselect": "3.0.0-alpha.2",
     "vue-typed-virtual-list": "^1.0.10",
     "vue3-ace-editor": "^2.2.4",

apps/frontend/src/layouts/default.vue

@@ -115,6 +115,7 @@
             :highlighted-style="
               route.name === 'search-mods' ? 'main-nav-primary' : 'main-nav-secondary'
             "
+            @click="$emit('search:clear')"
           >
             <nuxt-link to="/mods"> <BoxIcon aria-hidden="true" /> Mods </nuxt-link>
           </ButtonStyled>
@@ -126,6 +127,7 @@
             :highlighted-style="
               route.name === 'search-resourcepacks' ? 'main-nav-primary' : 'main-nav-secondary'
             "
+            @click="$emit('search:clear')"
           >
             <nuxt-link to="/resourcepacks">
               <PaintBrushIcon aria-hidden="true" /> Resource Packs
@@ -137,6 +139,7 @@
             :highlighted-style="
               route.name === 'search-datapacks' ? 'main-nav-primary' : 'main-nav-secondary'
             "
+            @click="$emit('search:clear')"
           >
             <nuxt-link to="/datapacks"> <BracesIcon aria-hidden="true" /> Data Packs </nuxt-link>
           </ButtonStyled>
@@ -146,6 +149,7 @@
             :highlighted-style="
               route.name === 'search-modpacks' ? 'main-nav-primary' : 'main-nav-secondary'
             "
+            @click="$emit('search:clear')"
           >
             <nuxt-link to="/modpacks"> <PackageOpenIcon aria-hidden="true" /> Modpacks </nuxt-link>
           </ButtonStyled>
@@ -155,6 +159,7 @@
             :highlighted-style="
               route.name === 'search-shaders' ? 'main-nav-primary' : 'main-nav-secondary'
             "
+            @click="$emit('search:clear')"
           >
             <nuxt-link to="/shaders"> <GlassesIcon aria-hidden="true" /> Shaders </nuxt-link>
           </ButtonStyled>
@@ -164,6 +169,7 @@
             :highlighted-style="
               route.name === 'search-plugins' ? 'main-nav-primary' : 'main-nav-secondary'
             "
+            @click="$emit('search:clear')"
           >
             <nuxt-link to="/plugins"> <PlugIcon aria-hidden="true" /> Plugins </nuxt-link>
           </ButtonStyled>
@@ -202,6 +208,7 @@
                 },
               ]"
               hoverable
+              @select="$emit('search:clear')"
             >
               <BoxIcon
                 v-if="route.name === 'search-mods' || route.path.startsWith('/mod/')"
@@ -705,6 +712,8 @@ import TeleportOverflowMenu from "~/components/ui/servers/TeleportOverflowMenu.v
 const { formatMessage } = useVIntl();
 
 const app = useNuxtApp();
+const { $emit } = app;
+
 const auth = await useAuth();
 const user = await useUser();
 

apps/frontend/src/pages/search/[searchProjectType].vue

@@ -334,6 +334,7 @@ import {
   ImageIcon,
 } from "@modrinth/assets";
 import { computed } from "vue";
+import { useNuxtApp } from "#app";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 import LogoAnimated from "~/components/brand/LogoAnimated.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
@@ -344,6 +345,8 @@ const { formatMessage } = useVIntl();
 const filtersMenuOpen = ref(false);
 
 const data = useNuxtApp();
+const { $listen } = data;
+
 const route = useNativeRoute();
 const router = useNativeRouter();
 
@@ -484,6 +487,7 @@ const {
 
   // Functions
   createPageParams,
+  readQueryParams,
 } = useSearch(projectTypes, tags, serverFilters);
 
 const messages = defineMessages({
@@ -654,6 +658,10 @@ useSeoMeta({
   ogTitle,
   ogDescription: description,
 });
+
+$listen("search:clear", () => {
+  readQueryParams();
+});
 </script>
 
 <style lang="scss" scoped>

apps/frontend/src/plugins/global-events.ts

@@ -0,0 +1,11 @@
+import mitt from "mitt";
+
+export default defineNuxtPlugin(() => {
+  const emitter = mitt();
+  return {
+    provide: {
+      event: emitter.emit,
+      listen: emitter.on,
+    },
+  };
+});

packages/ui/src/utils/search.ts

@@ -669,6 +669,7 @@ export function useSearch(
     // Functions
     createPageParams,
     createPageParamsString,
+    readQueryParams
   }
 }