feat(frontend): Add filter query and download hash to the url during download modal use (#3138)

* feat: Automatically open download modal when filter queries are present

* chore: Use a hash to open the modal, and make the filter queries independent of the modal

* chore: Correct to use emit for taking functions

* chore: Add filter query and download hash to the url during modal use, and fix linting issues

* chore(frontend): Undo changes to NewModal

My computer does not like running the app, making testing a lot harder, so I'll undo this change, at least for now

* Remove extra line

---------

Signed-off-by: Prospector <6166773+Prospector@users.noreply.github.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/frontend/src/pages/[type]/[id].vue

@@ -184,7 +184,19 @@
         </div>
       </div>
     </div>
-    <NewModal ref="downloadModal">
+    <NewModal
+      ref="downloadModal"
+      :on-show="
+        () => {
+          navigateTo({ query: route.query, hash: '#download' });
+        }
+      "
+      :on-hide="
+        () => {
+          navigateTo({ query: route.query, hash: '' });
+        }
+      "
+    >
       <template #title>
         <Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" />
         <div class="truncate text-lg font-extrabold text-contrast">
@@ -303,6 +315,15 @@
                         if (!currentPlatform && platformAccordion) {
                           platformAccordion.open();
                         }
+
+                        navigateTo({
+                          query: {
+                            ...route.query,
+                            ...(userSelectedGameVersion && { version: userSelectedGameVersion }),
+                            ...(userSelectedPlatform && { loader: userSelectedPlatform }),
+                          },
+                          hash: route.hash,
+                        });
                       }
                     "
                   >
@@ -379,6 +400,15 @@
                         if (!currentGameVersion && gameVersionAccordion) {
                           gameVersionAccordion.open();
                         }
+
+                        navigateTo({
+                          query: {
+                            ...route.query,
+                            ...(userSelectedGameVersion && { version: userSelectedGameVersion }),
+                            ...(userSelectedPlatform && { loader: userSelectedPlatform }),
+                          },
+                          hash: route.hash,
+                        });
                       }
                     "
                   >
@@ -828,6 +858,7 @@ import {
 } from "@modrinth/ui";
 import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
 import { formatCategory, isRejected, isStaff, isUnderReview, renderString } from "@modrinth/utils";
+import { navigateTo } from "#app";
 import dayjs from "dayjs";
 import ModrinthIcon from "~/assets/images/utils/modrinth.svg?component";
 import Accordion from "~/components/ui/Accordion.vue";

packages/ui/src/components/modal/NewModal.vue

@@ -70,7 +70,7 @@ const props = withDefaults(
     closeOnClickOutside: true,
     closeOnEsc: true,
     warnOnClose: false,
-    header: null,
+    header: undefined,
     onHide: () => {},
     onShow: () => {},
   },