From 34e65ace1ee0583d4e08d3a1c5b8f1f3a4879027 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <hendersoncal117@gmail.com>
Date: Fri, 1 Aug 2025 15:03:49 +0100
Subject: [PATCH] chore: fix frontend lint issues

---
 apps/frontend/crowdin.yml                     |   2 +-
 apps/frontend/eslint.config.mjs               |  14 +-
 apps/frontend/src/app.vue                     |   4 +-
 .../src/assets/styles/components.scss         |   8 +-
 apps/frontend/src/assets/styles/global.scss   |  20 +-
 apps/frontend/src/assets/styles/layout.scss   |  56 +-
 .../src/components/brand/TextLogo.vue         |  22 +-
 apps/frontend/src/components/ui/Accordion.vue |  30 +-
 .../src/components/ui/AdPlaceholder.vue       |  46 +-
 .../src/components/ui/AutomaticAccordion.vue  |  24 +-
 .../src/components/ui/Breadcrumbs.vue         |   4 +-
 apps/frontend/src/components/ui/Checkbox.vue  |  10 +-
 apps/frontend/src/components/ui/Chips.vue     |  16 +-
 .../components/ui/CollectionCreateModal.vue   |  52 +-
 .../src/components/ui/ConditionalNuxtLink.vue |   2 +-
 apps/frontend/src/components/ui/DropArea.vue  |  34 +-
 .../components/ui/EnvironmentIndicator.vue    |  14 +-
 apps/frontend/src/components/ui/FileInput.vue |  22 +-
 apps/frontend/src/components/ui/HCaptcha.vue  |  26 +-
 .../src/components/ui/MessageBanner.vue       |  10 +-
 apps/frontend/src/components/ui/Modal.vue     |  22 +-
 .../src/components/ui/ModalCreation.vue       | 112 +-
 apps/frontend/src/components/ui/NavRow.vue    |  58 +-
 apps/frontend/src/components/ui/NavStack.vue  |   2 +-
 .../src/components/ui/NavStackItem.vue        |   4 +-
 apps/frontend/src/components/ui/NavTabs.vue   | 120 +--
 .../src/components/ui/NotificationItem.vue    | 140 +--
 .../src/components/ui/OptionGroup.vue         |  82 +-
 .../components/ui/OrganizationCreateModal.vue |  58 +-
 .../ui/OrganizationProjectTransferModal.vue   |  46 +-
 .../src/components/ui/ProjectCard.vue         |  80 +-
 .../src/components/ui/ProjectMemberHeader.vue | 230 ++---
 .../src/components/ui/ShareArticleButtons.vue |  24 +-
 .../src/components/ui/charts/Chart.client.vue | 126 +--
 .../src/components/ui/charts/ChartDisplay.vue | 324 +++---
 .../ui/charts/CompactChart.client.vue         |  44 +-
 .../moderation/ModerationDelphiReportCard.vue |  52 +-
 .../checklist/ChecklistKeybindsModal.vue      |  52 +-
 .../checklist/ModerationChecklist.vue         |  16 +-
 .../checklist/ModpackPermissionsFlow.vue      | 248 ++---
 .../ui/modrinth-loading-indicator.ts          | 106 +-
 .../src/components/ui/news/LatestNewsRow.vue  |  12 +-
 .../src/components/ui/report/ReportInfo.vue   |  18 +-
 .../src/components/ui/report/ReportView.vue   |  74 +-
 .../src/components/ui/report/ReportsList.vue  |  86 +-
 .../src/components/ui/search/Categories.vue   |  12 +-
 .../src/components/ui/search/SearchFilter.vue |  16 +-
 .../ui/servers/BackupCreateModal.vue          |  82 +-
 .../ui/servers/BackupDeleteModal.vue          |  22 +-
 .../src/components/ui/servers/BackupItem.vue  | 158 +--
 .../ui/servers/BackupRenameModal.vue          |  94 +-
 .../ui/servers/BackupRestoreModal.vue         |  44 +-
 .../ui/servers/BackupSettingsModal.vue        | 118 +--
 .../ui/servers/ContentVersionEditModal.vue    | 284 +++--
 .../ui/servers/ContentVersionFilter.vue       | 114 +--
 .../src/components/ui/servers/FileItem.vue    | 405 ++++----
 .../components/ui/servers/FileVirtualList.vue |  82 +-
 .../ui/servers/FilesCreateItemModal.vue       |  68 +-
 .../ui/servers/FilesDeleteItemModal.vue       |  38 +-
 .../ui/servers/FilesImageViewer.vue           | 142 +--
 .../components/ui/servers/FilesLabelBar.vue   |  14 +-
 .../ui/servers/FilesMoveItemModal.vue         |  52 +-
 .../ui/servers/FilesRenameItemModal.vue       |  66 +-
 .../ui/servers/FilesUploadConflictModal.vue   |  32 +-
 .../ui/servers/FilesUploadDragAndDrop.vue     |  58 +-
 .../ui/servers/FilesUploadDropdown.vue        | 222 ++--
 .../ui/servers/FilesUploadZipUrlModal.vue     |  92 +-
 .../src/components/ui/servers/Globe.vue       | 188 ++--
 .../ui/servers/InstallingTicker.vue           |  28 +-
 .../components/ui/servers/LoaderSelector.vue  |  42 +-
 .../ui/servers/LoaderSelectorCard.vue         |  32 +-
 .../src/components/ui/servers/LogLine.vue     |  46 +-
 .../ui/servers/PanelServerActionButton.vue    | 182 ++--
 .../ui/servers/PanelServerStatus.vue          |  36 +-
 .../components/ui/servers/PanelTerminal.vue   | 929 +++++++++--------
 .../PlatformChangeModpackVersionModal.vue     | 102 +-
 .../ui/servers/PlatformMrpackModal.vue        | 260 ++---
 .../ui/servers/PlatformVersionSelectModal.vue | 341 +++---
 .../src/components/ui/servers/SaveBanner.vue  |  28 +-
 .../components/ui/servers/ServerGameLabel.vue |  14 +-
 .../src/components/ui/servers/ServerIcon.vue  |   4 +-
 .../ui/servers/ServerInfoLabels.vue           |  14 +-
 .../components/ui/servers/ServerListing.vue   |  38 +-
 .../ui/servers/ServerLoaderLabel.vue          |  14 +-
 .../ui/servers/ServerManageEmptyState.vue     |   2 +-
 .../components/ui/servers/ServerSidebar.vue   |  24 +-
 .../src/components/ui/servers/ServerStats.vue | 108 +-
 .../ui/servers/ServerSubdomainLabel.vue       |  30 +-
 .../ui/servers/ServerUptimeLabel.vue          |  50 +-
 .../ui/servers/TeleportOverflowMenu.vue       | 364 +++----
 .../ui/servers/icons/LoaderIcon.vue           |   8 +-
 .../servers/marketing/ServerPlanSelector.vue  | 108 +-
 .../ui/servers/notice/AssignNoticeModal.vue   | 114 +--
 .../components/ui/thread/ThreadMessage.vue    |  54 +-
 .../components/ui/thread/ThreadSummary.vue    |  28 +-
 apps/frontend/src/composables/auth.js         | 116 +--
 apps/frontend/src/composables/auth/scopes.ts  | 482 ++++-----
 .../src/composables/compact-number.ts         |  22 +-
 apps/frontend/src/composables/country.ts      |  38 +-
 .../frontend/src/composables/display-names.ts |  72 +-
 apps/frontend/src/composables/featureFlags.ts |  70 +-
 apps/frontend/src/composables/fetch.js        |  26 +-
 apps/frontend/src/composables/image-upload.ts |  44 +-
 apps/frontend/src/composables/loading.js      |  14 +-
 apps/frontend/src/composables/notifs.js       |  34 +-
 .../src/composables/nuxt-accessors.ts         |   4 +-
 apps/frontend/src/composables/nuxt-bugfest.ts |   2 +-
 apps/frontend/src/composables/query.js        |   8 +-
 apps/frontend/src/composables/route-params.js |   8 +-
 .../composables/servers/modrinth-servers.ts   | 324 +++---
 .../composables/servers/modules/backups.ts    |  64 +-
 .../src/composables/servers/modules/base.ts   |  10 +-
 .../composables/servers/modules/content.ts    |  24 +-
 .../src/composables/servers/modules/fs.ts     | 190 ++--
 .../composables/servers/modules/general.ts    | 180 ++--
 .../src/composables/servers/modules/index.ts  |  16 +-
 .../composables/servers/modules/network.ts    |  34 +-
 .../composables/servers/modules/startup.ts    |  22 +-
 .../src/composables/servers/modules/ws.ts     |  14 +-
 .../src/composables/servers/servers-fetch.ts  | 178 ++--
 apps/frontend/src/composables/tag.js          |  78 +-
 .../src/composables/use-client-try.ts         |  34 +-
 apps/frontend/src/composables/user.js         | 156 +--
 apps/frontend/src/composables/util.ts         |  10 +-
 apps/frontend/src/composables/vue.ts          |   8 +-
 apps/frontend/src/error.vue                   | 136 +--
 apps/frontend/src/helpers/events.ts           |   4 +-
 apps/frontend/src/helpers/fileUtils.js        |  40 +-
 apps/frontend/src/helpers/highlight.js        |  76 +-
 apps/frontend/src/helpers/infer.js            | 502 +++++----
 apps/frontend/src/helpers/moderation.ts       | 150 +--
 apps/frontend/src/helpers/notifications.ts    | 190 ++--
 apps/frontend/src/helpers/package.js          | 152 +--
 apps/frontend/src/helpers/projects.js         | 218 ++--
 apps/frontend/src/helpers/teams.js            |  18 +-
 apps/frontend/src/helpers/threads.js          |  16 +-
 apps/frontend/src/helpers/users.js            |  10 +-
 apps/frontend/src/layouts/default.vue         | 518 +++++-----
 apps/frontend/src/layouts/empty.vue           |   2 +-
 apps/frontend/src/middleware/auth.ts          |  26 +-
 apps/frontend/src/middleware/launcher-auth.ts |   4 +-
 apps/frontend/src/pages/[type]/[id].vue       | 598 +++++------
 .../src/pages/[type]/[id]/changelog.vue       |  54 +-
 .../src/pages/[type]/[id]/gallery.vue         | 214 ++--
 apps/frontend/src/pages/[type]/[id]/index.vue |  12 +-
 .../src/pages/[type]/[id]/moderation.vue      |  48 +-
 .../pages/[type]/[id]/settings/analytics.vue  |   6 +-
 .../[type]/[id]/settings/description.vue      |  44 +-
 .../src/pages/[type]/[id]/settings/index.vue  | 154 +--
 .../pages/[type]/[id]/settings/license.vue    | 104 +-
 .../src/pages/[type]/[id]/settings/links.vue  | 104 +-
 .../pages/[type]/[id]/settings/members.vue    | 270 ++---
 .../src/pages/[type]/[id]/settings/tags.vue   |  72 +-
 .../[type]/[id]/version/[version]-new.vue     |  74 +-
 .../pages/[type]/[id]/version/[version].vue   | 502 +++++----
 .../[type]/[id]/version/[version]/edit.vue    |   4 +-
 .../src/pages/[type]/[id]/versions.vue        |  56 +-
 .../frontend/src/pages/admin/billing/[id].vue | 142 +--
 .../src/pages/admin/servers/notices.vue       | 236 ++---
 apps/frontend/src/pages/admin/user_email.vue  |  26 +-
 apps/frontend/src/pages/app.vue               | 150 +--
 apps/frontend/src/pages/auth.vue              |   4 +-
 apps/frontend/src/pages/auth/authorize.vue    | 142 ++-
 .../src/pages/auth/reset-password.vue         | 140 +--
 apps/frontend/src/pages/auth/sign-in.vue      | 142 +--
 apps/frontend/src/pages/auth/sign-up.vue      | 118 +--
 apps/frontend/src/pages/auth/verify-email.vue |  82 +-
 apps/frontend/src/pages/collection/[id].vue   | 284 ++---
 apps/frontend/src/pages/dashboard.vue         |  16 +-
 .../src/pages/dashboard/analytics.vue         |  16 +-
 apps/frontend/src/pages/dashboard/index.vue   |  52 +-
 .../src/pages/dashboard/notifications.vue     |  72 +-
 .../src/pages/dashboard/report/[id].vue       |   8 +-
 apps/frontend/src/pages/dashboard/reports.vue |   8 +-
 .../src/pages/dashboard/revenue/index.vue     |  64 +-
 .../src/pages/dashboard/revenue/withdraw.vue  | 180 ++--
 apps/frontend/src/pages/flags.vue             |   6 +-
 apps/frontend/src/pages/frog.vue              |  48 +-
 apps/frontend/src/pages/index.vue             |  50 +-
 apps/frontend/src/pages/legal.vue             |   8 +-
 apps/frontend/src/pages/legal/ccpa.vue        |   8 +-
 apps/frontend/src/pages/legal/cmp-info.vue    |  32 +-
 apps/frontend/src/pages/legal/cmp.vue         |   8 +-
 apps/frontend/src/pages/legal/copyright.vue   |   8 +-
 apps/frontend/src/pages/legal/privacy.vue     |   8 +-
 apps/frontend/src/pages/legal/rules.vue       |   8 +-
 apps/frontend/src/pages/legal/security.vue    |   8 +-
 apps/frontend/src/pages/legal/terms.vue       |   8 +-
 apps/frontend/src/pages/moderation.vue        |  62 +-
 .../src/pages/moderation/reports/[id].vue     |  24 +-
 .../moderation/technical-review-mockup.vue    | 278 ++---
 .../src/pages/news/article/[slug].vue         |  60 +-
 apps/frontend/src/pages/news/changelog.vue    |  12 +-
 .../pages/news/changelog/[product]/[date].vue |  26 +-
 .../src/pages/news/changelog/index.vue        |  24 +-
 apps/frontend/src/pages/news/index.vue        |  34 +-
 apps/frontend/src/pages/organization/[id].vue | 198 ++--
 .../organization/[id]/settings/analytics.vue  |   4 +-
 .../organization/[id]/settings/index.vue      | 100 +-
 .../organization/[id]/settings/members.vue    | 114 +--
 .../organization/[id]/settings/projects.vue   | 210 ++--
 apps/frontend/src/pages/plus.vue              |  58 +-
 .../src/pages/search/[searchProjectType].vue  | 262 ++---
 apps/frontend/src/pages/servers/index.vue     | 408 ++++----
 .../src/pages/servers/manage/[id].vue         | 872 ++++++++--------
 .../src/pages/servers/manage/[id]/backups.vue | 150 +--
 .../src/pages/servers/manage/[id]/content.vue |  14 +-
 .../servers/manage/[id]/content/index.vue     | 312 +++---
 .../src/pages/servers/manage/[id]/files.vue   | 968 +++++++++---------
 .../servers/manage/[id]/options/billing.vue   |   2 +-
 .../servers/manage/[id]/options/index.vue     | 272 +++--
 .../servers/manage/[id]/options/info.vue      |  46 +-
 .../servers/manage/[id]/options/loader.vue    |  16 +-
 .../servers/manage/[id]/options/network.vue   | 259 +++--
 .../manage/[id]/options/preferences.vue       |  66 +-
 .../manage/[id]/options/properties.vue        | 188 ++--
 .../servers/manage/[id]/options/startup.vue   | 126 +--
 .../src/pages/servers/manage/index.vue        | 104 +-
 apps/frontend/src/pages/settings.vue          |  16 +-
 apps/frontend/src/pages/settings/account.vue  | 272 ++---
 .../src/pages/settings/applications.vue       | 244 ++---
 .../src/pages/settings/authorizations.vue     |  68 +-
 .../src/pages/settings/billing/charges.vue    |  30 +-
 .../src/pages/settings/billing/index.vue      | 520 +++++-----
 apps/frontend/src/pages/settings/index.vue    | 200 ++--
 apps/frontend/src/pages/settings/language.vue | 252 ++---
 apps/frontend/src/pages/settings/pats.vue     | 198 ++--
 apps/frontend/src/pages/settings/profile.vue  | 142 +--
 apps/frontend/src/pages/settings/sessions.vue |  68 +-
 apps/frontend/src/plugins/cosmetics.ts        |  70 +-
 apps/frontend/src/plugins/dayjs.js            |  18 +-
 apps/frontend/src/plugins/floating-vue.js     |  20 +-
 apps/frontend/src/plugins/scroll.client.js    |  10 +-
 apps/frontend/src/plugins/shorthands.js       | 224 ++--
 apps/frontend/src/plugins/theme/index.ts      |  70 +-
 .../src/plugins/theme/native-theme.ts         |  40 +-
 .../src/plugins/theme/preferred-theme.ts      |  24 +-
 .../src/plugins/theme/theme-settings.ts       |  26 +-
 apps/frontend/src/plugins/theme/themes.ts     |  24 +-
 apps/frontend/src/public/inmobi.js            | 150 +--
 apps/frontend/src/public/promo-frame.html     |  30 +-
 .../routes/.well-known/change-password.ts     |   4 +-
 apps/frontend/src/store/console.ts            | 122 +--
 apps/frontend/src/store/moderation.ts         |  64 +-
 apps/frontend/src/types/fusejs.d.ts           |   6 +-
 apps/frontend/src/types/modrinth.d.ts         |   2 +-
 apps/frontend/src/types/vintl.d.ts            |  14 +-
 apps/frontend/src/utils/analytics.js          | 348 +++----
 apps/frontend/src/utils/fetch-helpers.ts      |  14 +-
 apps/frontend/src/utils/i18n-project-type.ts  |  76 +-
 apps/frontend/src/utils/permissions.ts        |   6 +-
 apps/frontend/src/utils/report-helpers.ts     |  22 +-
 apps/frontend/src/utils/vue-children.ts       |   6 +-
 253 files changed, 12665 insertions(+), 12701 deletions(-)

diff --git a/apps/frontend/crowdin.yml b/apps/frontend/crowdin.yml
index e7c47c7da..2817cde42 100644
--- a/apps/frontend/crowdin.yml
+++ b/apps/frontend/crowdin.yml
@@ -1,6 +1,6 @@
 project_id: 518556
 preserve_hierarchy: true
-commit_message: "[ci skip]"
+commit_message: '[ci skip]'
 
 files:
   - source: /locales/en-US/*
diff --git a/apps/frontend/eslint.config.mjs b/apps/frontend/eslint.config.mjs
index 06f1344a9..e7e8a4d97 100644
--- a/apps/frontend/eslint.config.mjs
+++ b/apps/frontend/eslint.config.mjs
@@ -1,8 +1,10 @@
 import config from '@modrinth/tooling-config/eslint/nuxt.mjs'
-export default config.append([{
+export default config.append([
+  {
     rules: {
-        '@typescript-eslint/no-explicit-any': 'off',
-        "import/no-unresolved": "off",
-        'no-undef': 'off'
-    }
-}])
\ No newline at end of file
+      '@typescript-eslint/no-explicit-any': 'off',
+      'import/no-unresolved': 'off',
+      'no-undef': 'off',
+    },
+  },
+])
diff --git a/apps/frontend/src/app.vue b/apps/frontend/src/app.vue
index ebd9fa560..7b8ef22ad 100644
--- a/apps/frontend/src/app.vue
+++ b/apps/frontend/src/app.vue
@@ -6,6 +6,6 @@
   </NuxtLayout>
 </template>
 <script setup lang="ts">
-import ModrinthLoadingIndicator from "~/components/ui/modrinth-loading-indicator.ts";
-import Notifications from "~/components/ui/Notifications.vue";
+import ModrinthLoadingIndicator from '~/components/ui/modrinth-loading-indicator.ts'
+import Notifications from '~/components/ui/Notifications.vue'
 </script>
diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss
index f647e7e25..429bb54de 100644
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -415,7 +415,7 @@
   }
 
   &:disabled,
-  &[disabled="true"] {
+  &[disabled='true'] {
     cursor: not-allowed;
     filter: grayscale(50%);
     opacity: 0.5;
@@ -461,7 +461,7 @@ tr.button-transparent {
   }
 
   &:disabled > *,
-  &[disabled="true"] > * {
+  &[disabled='true'] > * {
     cursor: not-allowed;
     filter: grayscale(50%);
     opacity: 0.5;
@@ -492,7 +492,7 @@ tr.button-transparent {
     box-shadow: none;
 
     &disabled,
-    &[disabled="true"] {
+    &[disabled='true'] {
       cursor: not-allowed;
       box-shadow: none;
     }
@@ -678,7 +678,7 @@ tr.button-transparent {
   background: var(--color-button-bg);
 
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     top: 7px;
     left: 7px;
diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index cefb9460c..d471784e0 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -125,8 +125,8 @@ html {
 
   --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
 
-  --landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing-light.webp");
-  --landing-maze-gradient-bg: url("https://cdn.modrinth.com/landing-new/landing-lower-light.webp");
+  --landing-maze-bg: url('https://cdn.modrinth.com/landing-new/landing-light.webp');
+  --landing-maze-gradient-bg: url('https://cdn.modrinth.com/landing-new/landing-lower-light.webp');
   --landing-maze-outer-bg: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
 
   --landing-color-heading: #000;
@@ -259,10 +259,10 @@ html {
 
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
 
-  --landing-maze-bg: url("https://cdn.modrinth.com/landing-new/landing.webp");
+  --landing-maze-bg: url('https://cdn.modrinth.com/landing-new/landing.webp');
   --landing-maze-gradient-bg:
     linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
-    url("https://cdn.modrinth.com/landing-new/landing-lower.webp");
+    url('https://cdn.modrinth.com/landing-new/landing-lower.webp');
   --landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);
 
   --landing-color-heading: #fff;
@@ -492,7 +492,7 @@ textarea {
   }
 
   &:disabled,
-  &[disabled="true"] {
+  &[disabled='true'] {
     opacity: 0.6;
     pointer-events: none;
     cursor: not-allowed;
@@ -509,7 +509,7 @@ textarea {
 }
 
 button,
-input[type="button"] {
+input[type='button'] {
   cursor: pointer;
   border: none;
   outline: 2px solid transparent;
@@ -525,13 +525,13 @@ kbd {
   font-size: 0.85em !important;
 }
 
-@import "~/assets/styles/layout.scss";
-@import "~/assets/styles/utils.scss";
-@import "~/assets/styles/components.scss";
+@import '~/assets/styles/layout.scss';
+@import '~/assets/styles/utils.scss';
+@import '~/assets/styles/components.scss';
 
 button:focus-visible,
 a:focus-visible,
-[tabindex="0"]:focus-visible {
+[tabindex='0']:focus-visible {
   outline: 0.25rem solid #ea80ff;
   border-radius: 0.25rem;
 }
diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss
index 60e05cfdd..2f14b33bf 100644
--- a/apps/frontend/src/assets/styles/layout.scss
+++ b/apps/frontend/src/assets/styles/layout.scss
@@ -42,9 +42,9 @@
   padding: 0 1.5rem;
 
   grid-template:
-    "sidebar"
-    "content"
-    "info"
+    'sidebar'
+    'content'
+    'info'
     / 100%;
 
   @media screen and (max-width: 1024px) {
@@ -81,25 +81,25 @@
     column-gap: 0.75rem;
 
     grid-template:
-      "sidebar content" auto
-      "info content" auto
-      "dummy content" 1fr
+      'sidebar content' auto
+      'info content' auto
+      'dummy content' 1fr
       / 18.75rem 1fr;
 
     &.alt-layout {
       grid-template:
-        "content sidebar" auto
-        "content info" auto
-        "content dummy" 1fr
+        'content sidebar' auto
+        'content info' auto
+        'content dummy' 1fr
         / 1fr 18.75rem;
     }
 
     &.no-sidebar {
       grid-template:
-        "header header" auto
-        "content content" auto
-        "info info" auto
-        "dummy dummy" 1fr
+        'header header' auto
+        'content content' auto
+        'info info' auto
+        'dummy dummy' 1fr
         / 1fr 1fr;
 
       .normal-page__content {
@@ -129,9 +129,9 @@
   padding-bottom: 1.5rem;
 
   grid-template:
-    "header"
-    "content"
-    "sidebar"
+    'header'
+    'content'
+    'sidebar'
     / 100%;
 
   .normal-page__ultimate-sidebar {
@@ -152,16 +152,16 @@
   @media screen and (min-width: 1024px) {
     &.sidebar {
       grid-template:
-        "header header" auto
-        "content sidebar" auto
-        "content dummy" 1fr
+        'header header' auto
+        'content sidebar' auto
+        'content dummy' 1fr
         / 1fr 18.75rem;
 
       &.alt-layout {
         grid-template:
-          "header header" auto
-          "sidebar content" auto
-          "dummy content" 1fr
+          'header header' auto
+          'sidebar content' auto
+          'dummy content' 1fr
           / 18.75rem 1fr;
       }
     }
@@ -177,9 +177,9 @@
       max-width: calc(80rem + 0.75rem + 600px);
 
       grid-template:
-        "header header ultimate-sidebar" auto
-        "content sidebar ultimate-sidebar" auto
-        "content dummy ultimate-sidebar" 1fr
+        'header header ultimate-sidebar' auto
+        'content sidebar ultimate-sidebar' auto
+        'content dummy ultimate-sidebar' 1fr
         / 1fr 18.75rem auto;
 
       .normal-page__header {
@@ -203,9 +203,9 @@
 
       &.alt-layout {
         grid-template:
-          "ultimate-sidebar header header" auto
-          "ultimate-sidebar sidebar content" auto
-          "ultimate-sidebar dummy content" 1fr
+          'ultimate-sidebar header header' auto
+          'ultimate-sidebar sidebar content' auto
+          'ultimate-sidebar dummy content' 1fr
           / auto 18.75rem 1fr;
       }
     }
diff --git a/apps/frontend/src/components/brand/TextLogo.vue b/apps/frontend/src/components/brand/TextLogo.vue
index a942c1401..efd4af63c 100644
--- a/apps/frontend/src/components/brand/TextLogo.vue
+++ b/apps/frontend/src/components/brand/TextLogo.vue
@@ -54,21 +54,21 @@
 </template>
 
 <script setup>
-const loading = useLoading();
+const loading = useLoading()
 
-const config = useRuntimeConfig();
+const config = useRuntimeConfig()
 
 const api = computed(() => {
-  const apiUrl = config.public.apiBaseUrl;
-  if (apiUrl.startsWith("https://api.modrinth.com")) {
-    return "prod";
-  } else if (apiUrl.startsWith("https://staging-api.modrinth.com")) {
-    return "staging";
-  } else if (apiUrl.startsWith("localhost") || apiUrl.startsWith("127.0.0.1")) {
-    return "localhost";
+  const apiUrl = config.public.apiBaseUrl
+  if (apiUrl.startsWith('https://api.modrinth.com')) {
+    return 'prod'
+  } else if (apiUrl.startsWith('https://staging-api.modrinth.com')) {
+    return 'staging'
+  } else if (apiUrl.startsWith('localhost') || apiUrl.startsWith('127.0.0.1')) {
+    return 'localhost'
   }
-  return "foreign";
-});
+  return 'foreign'
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/Accordion.vue b/apps/frontend/src/components/ui/Accordion.vue
index 31fcfae6f..9ca7ec85d 100644
--- a/apps/frontend/src/components/ui/Accordion.vue
+++ b/apps/frontend/src/components/ui/Accordion.vue
@@ -19,43 +19,43 @@
 </template>
 
 <script setup lang="ts">
-import { DropdownIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { DropdownIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
 
 const props = withDefaults(
   defineProps<{
-    openByDefault?: boolean;
-    type?: "standard" | "outlined" | "transparent";
+    openByDefault?: boolean
+    type?: 'standard' | 'outlined' | 'transparent'
   }>(),
   {
-    type: "standard",
+    type: 'standard',
     openByDefault: false,
   },
-);
+)
 
-const isOpen = ref(props.openByDefault);
-const emit = defineEmits(["onOpen", "onClose"]);
+const isOpen = ref(props.openByDefault)
+const emit = defineEmits(['onOpen', 'onClose'])
 
-const slots = useSlots();
+const slots = useSlots()
 
 function open() {
-  isOpen.value = true;
-  emit("onOpen");
+  isOpen.value = true
+  emit('onOpen')
 }
 function close() {
-  isOpen.value = false;
-  emit("onClose");
+  isOpen.value = false
+  emit('onClose')
 }
 
 defineExpose({
   open,
   close,
   isOpen,
-});
+})
 
 defineOptions({
   inheritAttrs: false,
-});
+})
 </script>
 <style scoped>
 .accordion-content {
diff --git a/apps/frontend/src/components/ui/AdPlaceholder.vue b/apps/frontend/src/components/ui/AdPlaceholder.vue
index e2d5c9b46..e098aea77 100644
--- a/apps/frontend/src/components/ui/AdPlaceholder.vue
+++ b/apps/frontend/src/components/ui/AdPlaceholder.vue
@@ -31,53 +31,53 @@ useHead({
     // },
     {
       // Aditude
-      src: "https://dn0qt3r0xannq.cloudfront.net/modrinth-7JfmkEIXEp/modrinth-longform/prebid-load.js",
+      src: 'https://dn0qt3r0xannq.cloudfront.net/modrinth-7JfmkEIXEp/modrinth-longform/prebid-load.js',
       async: true,
     },
     {
       // Optima
-      src: "https://bservr.com/o.js?uid=8118d1fdb2e0d6f32180bd27",
+      src: 'https://bservr.com/o.js?uid=8118d1fdb2e0d6f32180bd27',
       async: true,
     },
     {
-      src: "/inmobi.js",
+      src: '/inmobi.js',
       async: true,
     },
   ],
   link: [
     {
-      rel: "preload",
-      as: "script",
-      href: "https://www.googletagservices.com/tag/js/gpt.js",
+      rel: 'preload',
+      as: 'script',
+      href: 'https://www.googletagservices.com/tag/js/gpt.js',
     },
   ],
-});
+})
 
 onMounted(() => {
-  window.tude = window.tude || { cmd: [] };
-  window.Raven = window.Raven || { cmd: [] };
+  window.tude = window.tude || { cmd: [] }
+  window.Raven = window.Raven || { cmd: [] }
 
   window.Raven.cmd.push(({ config }) => {
     config.setCustom({
-      param1: "web",
-    });
-  });
+      param1: 'web',
+    })
+  })
 
   tude.cmd.push(function () {
     tude.refreshAdsViaDivMappings([
       {
-        divId: "modrinth-rail-1",
-        baseDivId: "pb-slot-square-2",
+        divId: 'modrinth-rail-1',
+        baseDivId: 'pb-slot-square-2',
         targeting: {
-          location: "web",
+          location: 'web',
         },
       },
-    ]);
-  });
-});
+    ])
+  })
+})
 </script>
 <style>
-iframe[id^="google_ads_iframe"] {
+iframe[id^='google_ads_iframe'] {
   color-scheme: normal;
   background: transparent;
 }
@@ -96,21 +96,21 @@ iframe[id^="google_ads_iframe"] {
   background: var(--color-raised-bg);
 }
 
-#qc-cmp2-ui button[mode="primary"] {
+#qc-cmp2-ui button[mode='primary'] {
   background: var(--color-brand);
   color: var(--color-accent-contrast);
   border-radius: var(--radius-lg);
   border: none;
 }
 
-#qc-cmp2-ui button[mode="secondary"] {
+#qc-cmp2-ui button[mode='secondary'] {
   background: var(--color-button-bg);
   color: var(--color-base);
   border-radius: var(--radius-lg);
   border: none;
 }
 
-#qc-cmp2-ui button[mode="link"] {
+#qc-cmp2-ui button[mode='link'] {
   color: var(--color-link);
 }
 
@@ -129,7 +129,7 @@ iframe[id^="google_ads_iframe"] {
   font-family: var(--font-standard);
 }
 
-#qc-cmp2-ui .qc-cmp2-toggle[aria-checked="true"] {
+#qc-cmp2-ui .qc-cmp2-toggle[aria-checked='true'] {
   background-color: var(--color-brand);
   border: 1px solid var(--color-brand);
 }
diff --git a/apps/frontend/src/components/ui/AutomaticAccordion.vue b/apps/frontend/src/components/ui/AutomaticAccordion.vue
index 154f3fd09..9c076175b 100644
--- a/apps/frontend/src/components/ui/AutomaticAccordion.vue
+++ b/apps/frontend/src/components/ui/AutomaticAccordion.vue
@@ -13,35 +13,35 @@
 <script setup lang="ts">
 defineOptions({
   inheritAttrs: false,
-});
+})
 
-const slotContainer = ref();
+const slotContainer = ref()
 
-const hasContent = ref(false);
+const hasContent = ref(false)
 
-const mutationObserver = ref<MutationObserver | null>(null);
+const mutationObserver = ref<MutationObserver | null>(null)
 
 function updateContent() {
-  if (!slotContainer.value) return false;
+  if (!slotContainer.value) return false
 
-  hasContent.value = slotContainer.value ? slotContainer.value.children.length > 0 : false;
+  hasContent.value = slotContainer.value ? slotContainer.value.children.length > 0 : false
 }
 
 onMounted(() => {
-  mutationObserver.value = new MutationObserver(updateContent);
+  mutationObserver.value = new MutationObserver(updateContent)
 
   mutationObserver.value.observe(slotContainer.value, {
     childList: true,
-  });
+  })
 
-  updateContent();
-});
+  updateContent()
+})
 
 onUnmounted(() => {
   if (mutationObserver.value) {
-    mutationObserver.value.disconnect();
+    mutationObserver.value.disconnect()
   }
-});
+})
 </script>
 <style scoped>
 .accordion-content {
diff --git a/apps/frontend/src/components/ui/Breadcrumbs.vue b/apps/frontend/src/components/ui/Breadcrumbs.vue
index 889a2484a..9e06b76e3 100644
--- a/apps/frontend/src/components/ui/Breadcrumbs.vue
+++ b/apps/frontend/src/components/ui/Breadcrumbs.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { ChevronRightIcon } from "@modrinth/assets";
+import { ChevronRightIcon } from '@modrinth/assets'
 
 defineProps({
   linkStack: {
@@ -26,7 +26,7 @@ defineProps({
     type: String,
     required: true,
   },
-});
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/Checkbox.vue b/apps/frontend/src/components/ui/Checkbox.vue
index b21786c75..b63eaeafc 100644
--- a/apps/frontend/src/components/ui/Checkbox.vue
+++ b/apps/frontend/src/components/ui/Checkbox.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import { CheckIcon, DropdownIcon } from "@modrinth/assets";
+import { CheckIcon, DropdownIcon } from '@modrinth/assets'
 
 export default {
   components: {
@@ -36,7 +36,7 @@ export default {
     label: {
       type: String,
       required: false,
-      default: "",
+      default: '',
     },
     disabled: {
       type: Boolean,
@@ -60,15 +60,15 @@ export default {
       default: false,
     },
   },
-  emits: ["update:modelValue"],
+  emits: ['update:modelValue'],
   methods: {
     toggle() {
       if (!this.disabled) {
-        this.$emit("update:modelValue", !this.modelValue);
+        this.$emit('update:modelValue', !this.modelValue)
       }
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/Chips.vue b/apps/frontend/src/components/ui/Chips.vue
index 3fd248324..4298a2ed7 100644
--- a/apps/frontend/src/components/ui/Chips.vue
+++ b/apps/frontend/src/components/ui/Chips.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { CheckIcon } from "@modrinth/assets";
+import { CheckIcon } from '@modrinth/assets'
 
 export default {
   components: {
@@ -42,32 +42,32 @@ export default {
       default: true,
     },
   },
-  emits: ["update:modelValue"],
+  emits: ['update:modelValue'],
   computed: {
     selected: {
       get() {
-        return this.modelValue;
+        return this.modelValue
       },
       set(value) {
-        this.$emit("update:modelValue", value);
+        this.$emit('update:modelValue', value)
       },
     },
   },
   created() {
     if (this.items.length > 0 && this.neverEmpty) {
-      this.selected = this.items[0];
+      this.selected = this.items[0]
     }
   },
   methods: {
     toggleItem(item) {
       if (this.selected === item && !this.neverEmpty) {
-        this.selected = null;
+        this.selected = null
       } else {
-        this.selected = item;
+        this.selected = item
       }
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/CollectionCreateModal.vue b/apps/frontend/src/components/ui/CollectionCreateModal.vue
index 02b075607..9ceadc63d 100644
--- a/apps/frontend/src/components/ui/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/CollectionCreateModal.vue
@@ -28,8 +28,8 @@
       </div>
       <p class="m-0 max-w-[30rem]">
         Your new collection will be created as a public collection with
-        {{ projectIds.length > 0 ? projectIds.length : "no" }}
-        {{ projectIds.length !== 1 ? "projects" : "project" }}.
+        {{ projectIds.length > 0 ? projectIds.length : 'no' }}
+        {{ projectIds.length !== 1 ? 'projects' : 'project' }}.
       </p>
       <div class="flex gap-2">
         <ButtonStyled color="brand">
@@ -49,61 +49,61 @@
   </NewModal>
 </template>
 <script setup>
-import { PlusIcon, XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
 
-const router = useNativeRouter();
+const router = useNativeRouter()
 
-const name = ref("");
-const description = ref("");
+const name = ref('')
+const description = ref('')
 
-const modal = ref();
+const modal = ref()
 
 const props = defineProps({
   projectIds: {
     type: Array,
     default() {
-      return [];
+      return []
     },
   },
-});
+})
 
 async function create() {
-  startLoading();
+  startLoading()
   try {
-    const result = await useBaseFetch("collection", {
-      method: "POST",
+    const result = await useBaseFetch('collection', {
+      method: 'POST',
       body: {
         name: name.value.trim(),
         description: description.value.trim() || undefined,
         projects: props.projectIds,
       },
       apiVersion: 3,
-    });
+    })
 
-    await initUserCollections();
+    await initUserCollections()
 
-    modal.value.hide();
-    await router.push(`/collection/${result.id}`);
+    modal.value.hide()
+    await router.push(`/collection/${result.id}`)
   } catch (err) {
     addNotification({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err?.data?.description || err?.message || err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 function show(event) {
-  name.value = "";
-  description.value = "";
-  modal.value.show(event);
+  name.value = ''
+  description.value = ''
+  modal.value.show(event)
 }
 
 defineExpose({
   show,
-});
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/components/ui/ConditionalNuxtLink.vue b/apps/frontend/src/components/ui/ConditionalNuxtLink.vue
index 8a9ac6b52..3aa17b58e 100644
--- a/apps/frontend/src/components/ui/ConditionalNuxtLink.vue
+++ b/apps/frontend/src/components/ui/ConditionalNuxtLink.vue
@@ -17,5 +17,5 @@ defineProps({
     type: Boolean,
     required: true,
   },
-});
+})
 </script>
diff --git a/apps/frontend/src/components/ui/DropArea.vue b/apps/frontend/src/components/ui/DropArea.vue
index 515364b7f..f499005d8 100644
--- a/apps/frontend/src/components/ui/DropArea.vue
+++ b/apps/frontend/src/components/ui/DropArea.vue
@@ -4,10 +4,10 @@
     class="drop-area"
     @drop.stop.prevent="
       (event) => {
-        $refs.drop_area.style.visibility = 'hidden';
+        $refs.drop_area.style.visibility = 'hidden'
 
         if (event.dataTransfer && event.dataTransfer.files && fileAllowed) {
-          $emit('change', event.dataTransfer.files);
+          $emit('change', event.dataTransfer.files)
         }
       }
     "
@@ -22,45 +22,45 @@ export default {
   props: {
     accept: {
       type: String,
-      default: "",
+      default: '',
     },
   },
-  emits: ["change"],
+  emits: ['change'],
   data() {
     return {
       fileAllowed: false,
-    };
+    }
   },
   mounted() {
-    document.addEventListener("dragenter", this.allowDrag);
+    document.addEventListener('dragenter', this.allowDrag)
   },
   methods: {
     allowDrag(event) {
-      const file = event.dataTransfer?.items[0];
+      const file = event.dataTransfer?.items[0]
 
       if (
         file &&
         this.accept
-          .split(",")
-          .reduce((acc, t) => acc || file.type.startsWith(t) || file.type === t || t === "*", false)
+          .split(',')
+          .reduce((acc, t) => acc || file.type.startsWith(t) || file.type === t || t === '*', false)
       ) {
-        this.fileAllowed = true;
-        event.dataTransfer.dropEffect = "copy";
-        event.preventDefault();
+        this.fileAllowed = true
+        event.dataTransfer.dropEffect = 'copy'
+        event.preventDefault()
 
         if (this.$refs.drop_area) {
-          this.$refs.drop_area.style.visibility = "visible";
+          this.$refs.drop_area.style.visibility = 'visible'
         }
       } else {
-        this.fileAllowed = false;
+        this.fileAllowed = false
 
         if (this.$refs.drop_area) {
-          this.$refs.drop_area.style.visibility = "hidden";
+          this.$refs.drop_area.style.visibility = 'hidden'
         }
       }
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -81,7 +81,7 @@ export default {
   &::before {
     --indent: 4rem;
 
-    content: " ";
+    content: ' ';
     position: relative;
     top: var(--indent);
     left: var(--indent);
diff --git a/apps/frontend/src/components/ui/EnvironmentIndicator.vue b/apps/frontend/src/components/ui/EnvironmentIndicator.vue
index 5cdf0ae79..c25c28b42 100644
--- a/apps/frontend/src/components/ui/EnvironmentIndicator.vue
+++ b/apps/frontend/src/components/ui/EnvironmentIndicator.vue
@@ -49,22 +49,22 @@
 </template>
 
 <script setup>
-import { ClientIcon, GlobeIcon, InfoIcon, ServerIcon } from "@modrinth/assets";
+import { ClientIcon, GlobeIcon, InfoIcon, ServerIcon } from '@modrinth/assets'
 
 defineProps({
   type: {
     type: String,
-    default: "mod",
+    default: 'mod',
   },
   serverSide: {
     type: String,
     required: false,
-    default: "",
+    default: '',
   },
   clientSide: {
     type: String,
     required: false,
-    default: "",
+    default: '',
   },
   typeOnly: {
     type: Boolean,
@@ -85,12 +85,12 @@ defineProps({
     type: Array,
     required: false,
     default() {
-      return [];
+      return []
     },
   },
-});
+})
 
-const tags = useTags();
+const tags = useTags()
 </script>
 <style lang="scss" scoped>
 .environment {
diff --git a/apps/frontend/src/components/ui/FileInput.vue b/apps/frontend/src/components/ui/FileInput.vue
index ec1558ec3..e0722ec84 100644
--- a/apps/frontend/src/components/ui/FileInput.vue
+++ b/apps/frontend/src/components/ui/FileInput.vue
@@ -18,14 +18,14 @@
 </template>
 
 <script>
-import { fileIsValid } from "~/helpers/fileUtils.js";
+import { fileIsValid } from '~/helpers/fileUtils.js'
 
 export default {
   components: {},
   props: {
     prompt: {
       type: String,
-      default: "Select file",
+      default: 'Select file',
     },
     multiple: {
       type: Boolean,
@@ -59,33 +59,33 @@ export default {
       default: false,
     },
   },
-  emits: ["change"],
+  emits: ['change'],
   data() {
     return {
       files: [],
-    };
+    }
   },
   methods: {
     addFiles(files, shouldNotReset) {
       if (!shouldNotReset || this.shouldAlwaysReset) {
-        this.files = files;
+        this.files = files
       }
 
-      const validationOptions = { maxSize: this.maxSize, alertOnInvalid: true };
-      this.files = [...this.files].filter((file) => fileIsValid(file, validationOptions));
+      const validationOptions = { maxSize: this.maxSize, alertOnInvalid: true }
+      this.files = [...this.files].filter((file) => fileIsValid(file, validationOptions))
 
       if (this.files.length > 0) {
-        this.$emit("change", this.files);
+        this.$emit('change', this.files)
       }
     },
     handleDrop(e) {
-      this.addFiles(e.dataTransfer.files);
+      this.addFiles(e.dataTransfer.files)
     },
     handleChange(e) {
-      this.addFiles(e.target.files);
+      this.addFiles(e.target.files)
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/HCaptcha.vue b/apps/frontend/src/components/ui/HCaptcha.vue
index bacc2516a..16cfde3b7 100644
--- a/apps/frontend/src/components/ui/HCaptcha.vue
+++ b/apps/frontend/src/components/ui/HCaptcha.vue
@@ -1,40 +1,40 @@
 <script setup>
-const token = defineModel();
-const id = ref(null);
+const token = defineModel()
+const id = ref(null)
 
 function hCaptchaUpdateToken(newToken) {
-  token.value = newToken;
+  token.value = newToken
 }
 
 function hCaptchaReady() {
-  window.hCaptchaUpdateToken = hCaptchaUpdateToken;
-  id.value = window.hcaptcha.render("h-captcha");
+  window.hCaptchaUpdateToken = hCaptchaUpdateToken
+  id.value = window.hcaptcha.render('h-captcha')
 }
 
 onMounted(() => {
   if (window.hcaptcha) {
-    hCaptchaReady();
+    hCaptchaReady()
   } else {
-    window.hCaptchaReady = hCaptchaReady;
+    window.hCaptchaReady = hCaptchaReady
 
     useHead({
       script: [
         {
-          src: "https://js.hcaptcha.com/1/api.js?render=explicit&onload=hCaptchaReady",
+          src: 'https://js.hcaptcha.com/1/api.js?render=explicit&onload=hCaptchaReady',
           async: true,
           defer: true,
         },
       ],
-    });
+    })
   }
-});
+})
 
 defineExpose({
   reset: () => {
-    token.value = null;
-    window.hcaptcha.reset(id.value);
+    token.value = null
+    window.hcaptcha.reset(id.value)
   },
-});
+})
 </script>
 
 <template>
diff --git a/apps/frontend/src/components/ui/MessageBanner.vue b/apps/frontend/src/components/ui/MessageBanner.vue
index 3adb6fc5f..6432220b3 100644
--- a/apps/frontend/src/components/ui/MessageBanner.vue
+++ b/apps/frontend/src/components/ui/MessageBanner.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts" setup>
-type MessageType = "information" | "warning";
+type MessageType = 'information' | 'warning'
 const props = withDefaults(defineProps<{ messageType?: MessageType }>(), {
-  messageType: "information",
-});
-const cardClassByType = computed(() => `message-banner__content_${props.messageType}`);
-const ariaLabelByType = computed(() => `Banner with ${props.messageType} message`);
+  messageType: 'information',
+})
+const cardClassByType = computed(() => `message-banner__content_${props.messageType}`)
+const ariaLabelByType = computed(() => `Banner with ${props.messageType} message`)
 </script>
 
 <style lang="css" scoped>
diff --git a/apps/frontend/src/components/ui/Modal.vue b/apps/frontend/src/components/ui/Modal.vue
index f815e049b..f0760088f 100644
--- a/apps/frontend/src/components/ui/Modal.vue
+++ b/apps/frontend/src/components/ui/Modal.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { XIcon } from "@modrinth/assets";
+import { XIcon } from '@modrinth/assets'
 
 export default {
   components: {
@@ -39,31 +39,31 @@ export default {
     },
   },
   setup() {
-    const cosmetics = useCosmetics();
+    const cosmetics = useCosmetics()
 
-    return { cosmetics };
+    return { cosmetics }
   },
   data() {
     return {
       shown: false,
       actuallyShown: false,
-    };
+    }
   },
   methods: {
     show() {
-      this.shown = true;
+      this.shown = true
       setTimeout(() => {
-        this.actuallyShown = true;
-      }, 50);
+        this.actuallyShown = true
+      }, 50)
     },
     hide() {
-      this.actuallyShown = false;
+      this.actuallyShown = false
       setTimeout(() => {
-        this.shown = false;
-      }, 300);
+        this.shown = false
+      }, 300)
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/ModalCreation.vue b/apps/frontend/src/components/ui/ModalCreation.vue
index 938cd6d5a..43e8532b1 100644
--- a/apps/frontend/src/components/ui/ModalCreation.vue
+++ b/apps/frontend/src/components/ui/ModalCreation.vue
@@ -84,11 +84,11 @@
 </template>
 
 <script setup>
-import { PlusIcon,XIcon } from "@modrinth/assets";
-import { ButtonStyled, DropdownSelect,NewModal } from "@modrinth/ui";
+import { PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, DropdownSelect, NewModal } from '@modrinth/ui'
 
-const router = useRouter();
-const app = useNuxtApp();
+const router = useRouter()
+const app = useNuxtApp()
 
 const props = defineProps({
   organizationId: {
@@ -96,120 +96,120 @@ const props = defineProps({
     required: false,
     default: null,
   },
-});
+})
 
-const modal = ref();
+const modal = ref()
 
-const name = ref("");
-const slug = ref("");
-const description = ref("");
-const manualSlug = ref(false);
+const name = ref('')
+const slug = ref('')
+const description = ref('')
+const manualSlug = ref(false)
 const visibilities = ref([
   {
-    actual: "approved",
-    display: "Public",
+    actual: 'approved',
+    display: 'Public',
   },
   {
-    actual: "unlisted",
-    display: "Unlisted",
+    actual: 'unlisted',
+    display: 'Unlisted',
   },
   {
-    actual: "private",
-    display: "Private",
+    actual: 'private',
+    display: 'Private',
   },
-]);
+])
 const visibility = ref({
-  actual: "approved",
-  display: "Public",
-});
+  actual: 'approved',
+  display: 'Public',
+})
 
 const cancel = () => {
-  modal.value.hide();
-};
+  modal.value.hide()
+}
 
 async function createProject() {
-  startLoading();
+  startLoading()
 
-  const formData = new FormData();
+  const formData = new FormData()
 
-  const auth = await useAuth();
+  const auth = await useAuth()
 
   const projectData = {
     title: name.value.trim(),
-    project_type: "mod",
+    project_type: 'mod',
     slug: slug.value,
     description: description.value.trim(),
-    body: "",
+    body: '',
     requested_status: visibility.value.actual,
     initial_versions: [],
     team_members: [
       {
         user_id: auth.value.user.id,
         name: auth.value.user.username,
-        role: "Owner",
+        role: 'Owner',
       },
     ],
     categories: [],
-    client_side: "required",
-    server_side: "required",
-    license_id: "LicenseRef-Unknown",
+    client_side: 'required',
+    server_side: 'required',
+    license_id: 'LicenseRef-Unknown',
     is_draft: true,
-  };
+  }
 
   if (props.organizationId) {
-    projectData.organization_id = props.organizationId;
+    projectData.organization_id = props.organizationId
   }
 
-  formData.append("data", JSON.stringify(projectData));
+  formData.append('data', JSON.stringify(projectData))
 
   try {
-    await useBaseFetch("project", {
-      method: "POST",
+    await useBaseFetch('project', {
+      method: 'POST',
       body: formData,
       headers: {
-        "Content-Disposition": formData,
+        'Content-Disposition': formData,
       },
-    });
+    })
 
-    modal.value.hide();
+    modal.value.hide()
     await router.push({
-      name: "type-id",
+      name: 'type-id',
       params: {
-        type: "project",
+        type: 'project',
         id: slug.value,
       },
-    });
+    })
   } catch (err) {
     app.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 
 function show(event) {
-  name.value = "";
-  slug.value = "";
-  description.value = "";
-  manualSlug.value = false;
-  modal.value.show(event);
+  name.value = ''
+  slug.value = ''
+  description.value = ''
+  manualSlug.value = false
+  modal.value.show(event)
 }
 
 defineExpose({
   show,
-});
+})
 
 function updatedName() {
   if (!manualSlug.value) {
     slug.value = name.value
       .trim()
       .toLowerCase()
-      .replaceAll(" ", "-")
-      .replaceAll(/[^a-zA-Z0-9!@$()`.+,_"-]/g, "")
-      .replaceAll(/--+/gm, "-");
+      .replaceAll(' ', '-')
+      .replaceAll(/[^a-zA-Z0-9!@$()`.+,_"-]/g, '')
+      .replaceAll(/--+/gm, '-')
   }
 }
 </script>
diff --git a/apps/frontend/src/components/ui/NavRow.vue b/apps/frontend/src/components/ui/NavRow.vue
index b654cdd70..685738094 100644
--- a/apps/frontend/src/components/ui/NavRow.vue
+++ b/apps/frontend/src/components/ui/NavRow.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-const route = useNativeRoute();
+const route = useNativeRoute()
 
 const props = defineProps({
   links: {
@@ -35,59 +35,59 @@ const props = defineProps({
     default: null,
     type: String,
   },
-});
+})
 
-const sliderPositionX = ref(0);
-const sliderPositionY = ref(18);
-const selectedElementWidth = ref(0);
-const activeIndex = ref(-1);
-const oldIndex = ref(-1);
+const sliderPositionX = ref(0)
+const sliderPositionY = ref(18)
+const selectedElementWidth = ref(0)
+const activeIndex = ref(-1)
+const oldIndex = ref(-1)
 
 const filteredLinks = computed(() =>
   props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
-);
-const positionToMoveX = computed(() => `${sliderPositionX.value}px`);
-const positionToMoveY = computed(() => `${sliderPositionY.value}px`);
-const sliderWidth = computed(() => `${selectedElementWidth.value}px`);
+)
+const positionToMoveX = computed(() => `${sliderPositionX.value}px`)
+const positionToMoveY = computed(() => `${sliderPositionY.value}px`)
+const sliderWidth = computed(() => `${selectedElementWidth.value}px`)
 
 function pickLink() {
   activeIndex.value = props.query
     ? filteredLinks.value.findIndex(
-        (x) => (x.href === "" ? undefined : x.href) === route.path[props.query],
+        (x) => (x.href === '' ? undefined : x.href) === route.path[props.query],
       )
-    : filteredLinks.value.findIndex((x) => x.href === decodeURIComponent(route.path));
+    : filteredLinks.value.findIndex((x) => x.href === decodeURIComponent(route.path))
 
   if (activeIndex.value !== -1) {
-    startAnimation();
+    startAnimation()
   } else {
-    oldIndex.value = -1;
-    sliderPositionX.value = 0;
-    selectedElementWidth.value = 0;
+    oldIndex.value = -1
+    sliderPositionX.value = 0
+    selectedElementWidth.value = 0
   }
 }
 
-const rowLinkElements = ref();
+const rowLinkElements = ref()
 
 function startAnimation() {
-  const el = rowLinkElements.value[activeIndex.value].$el;
+  const el = rowLinkElements.value[activeIndex.value].$el
 
-  if (!el || !el.offsetParent) return;
+  if (!el || !el.offsetParent) return
 
-  sliderPositionX.value = el.offsetLeft;
-  sliderPositionY.value = el.offsetTop + el.offsetHeight;
-  selectedElementWidth.value = el.offsetWidth;
+  sliderPositionX.value = el.offsetLeft
+  sliderPositionY.value = el.offsetTop + el.offsetHeight
+  selectedElementWidth.value = el.offsetWidth
 }
 
 onMounted(() => {
-  window.addEventListener("resize", pickLink);
-  pickLink();
-});
+  window.addEventListener('resize', pickLink)
+  pickLink()
+})
 
 onUnmounted(() => {
-  window.removeEventListener("resize", pickLink);
-});
+  window.removeEventListener('resize', pickLink)
+})
 
-watch(route, () => pickLink());
+watch(route, () => pickLink())
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/NavStack.vue b/apps/frontend/src/components/ui/NavStack.vue
index 9ba713ead..bbd9ec21e 100644
--- a/apps/frontend/src/components/ui/NavStack.vue
+++ b/apps/frontend/src/components/ui/NavStack.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-export default {};
+export default {}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/NavStackItem.vue b/apps/frontend/src/components/ui/NavStackItem.vue
index c1471ca9d..0562ab385 100644
--- a/apps/frontend/src/components/ui/NavStackItem.vue
+++ b/apps/frontend/src/components/ui/NavStackItem.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { ChevronRightIcon } from "@modrinth/assets";
+import { ChevronRightIcon } from '@modrinth/assets'
 
 export default {
   components: {
@@ -55,7 +55,7 @@ export default {
       type: Boolean,
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/NavTabs.vue b/apps/frontend/src/components/ui/NavTabs.vue
index 3acd73e43..ac7fbe040 100644
--- a/apps/frontend/src/components/ui/NavTabs.vue
+++ b/apps/frontend/src/components/ui/NavTabs.vue
@@ -35,129 +35,129 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted,ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from 'vue'
 
-const route = useNativeRoute();
+const route = useNativeRoute()
 
 interface Tab {
-  label: string;
-  href: string;
-  shown?: boolean;
-  icon?: string;
-  subpages?: string[];
+  label: string
+  href: string
+  shown?: boolean
+  icon?: string
+  subpages?: string[]
 }
 
 const props = defineProps<{
-  links: Tab[];
-  query?: string;
-}>();
+  links: Tab[]
+  query?: string
+}>()
 
-const scrollContainer = ref<HTMLElement | null>(null);
+const scrollContainer = ref<HTMLElement | null>(null)
 
-const sliderLeft = ref(4);
-const sliderTop = ref(4);
-const sliderRight = ref(4);
-const sliderBottom = ref(4);
-const activeIndex = ref(-1);
-const subpageSelected = ref(false);
+const sliderLeft = ref(4)
+const sliderTop = ref(4)
+const sliderRight = ref(4)
+const sliderBottom = ref(4)
+const activeIndex = ref(-1)
+const subpageSelected = ref(false)
 
 const filteredLinks = computed(() =>
   props.links.filter((x) => (x.shown === undefined ? true : x.shown)),
-);
-const sliderLeftPx = computed(() => `${sliderLeft.value}px`);
-const sliderTopPx = computed(() => `${sliderTop.value}px`);
-const sliderRightPx = computed(() => `${sliderRight.value}px`);
-const sliderBottomPx = computed(() => `${sliderBottom.value}px`);
+)
+const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
+const sliderTopPx = computed(() => `${sliderTop.value}px`)
+const sliderRightPx = computed(() => `${sliderRight.value}px`)
+const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
 
-const tabLinkElements = ref();
+const tabLinkElements = ref()
 
 function pickLink() {
-  let index = -1;
-  subpageSelected.value = false;
+  let index = -1
+  subpageSelected.value = false
   for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
-    const link = filteredLinks.value[i];
+    const link = filteredLinks.value[i]
     if (props.query) {
       if (route.query[props.query] === link.href || (!route.query[props.query] && !link.href)) {
-        index = i;
-        break;
+        index = i
+        break
       }
     } else if (decodeURIComponent(route.path) === link.href) {
-      index = i;
-      break;
+      index = i
+      break
     } else if (
       decodeURIComponent(route.path).includes(link.href) ||
       (link.subpages &&
         link.subpages.some((subpage) => decodeURIComponent(route.path).includes(subpage)))
     ) {
-      index = i;
-      subpageSelected.value = true;
-      break;
+      index = i
+      subpageSelected.value = true
+      break
     }
   }
-  activeIndex.value = index;
+  activeIndex.value = index
 
   if (activeIndex.value !== -1) {
-    startAnimation();
+    startAnimation()
   } else {
-    sliderLeft.value = 0;
-    sliderRight.value = 0;
+    sliderLeft.value = 0
+    sliderRight.value = 0
   }
 }
 
 function startAnimation() {
-  const el = tabLinkElements.value[activeIndex.value]?.$el;
+  const el = tabLinkElements.value[activeIndex.value]?.$el
 
-  if (!el || !el.offsetParent) return;
+  if (!el || !el.offsetParent) return
 
   const newValues = {
     left: el.offsetLeft,
     top: el.offsetTop,
     right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
     bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
-  };
+  }
 
   if (sliderLeft.value === 4 && sliderRight.value === 4) {
-    sliderLeft.value = newValues.left;
-    sliderRight.value = newValues.right;
-    sliderTop.value = newValues.top;
-    sliderBottom.value = newValues.bottom;
+    sliderLeft.value = newValues.left
+    sliderRight.value = newValues.right
+    sliderTop.value = newValues.top
+    sliderBottom.value = newValues.bottom
   } else {
-    const delay = 200;
+    const delay = 200
 
     if (newValues.left < sliderLeft.value) {
-      sliderLeft.value = newValues.left;
+      sliderLeft.value = newValues.left
       setTimeout(() => {
-        sliderRight.value = newValues.right;
-      }, delay);
+        sliderRight.value = newValues.right
+      }, delay)
     } else {
-      sliderRight.value = newValues.right;
+      sliderRight.value = newValues.right
       setTimeout(() => {
-        sliderLeft.value = newValues.left;
-      }, delay);
+        sliderLeft.value = newValues.left
+      }, delay)
     }
 
     if (newValues.top < sliderTop.value) {
-      sliderTop.value = newValues.top;
+      sliderTop.value = newValues.top
       setTimeout(() => {
-        sliderBottom.value = newValues.bottom;
-      }, delay);
+        sliderBottom.value = newValues.bottom
+      }, delay)
     } else {
-      sliderBottom.value = newValues.bottom;
+      sliderBottom.value = newValues.bottom
       setTimeout(() => {
-        sliderTop.value = newValues.top;
-      }, delay);
+        sliderTop.value = newValues.top
+      }, delay)
     }
   }
 }
 
 onMounted(() => {
-  pickLink();
-});
+  pickLink()
+})
 
 watch(
   () => [route.path, route.query],
   () => pickLink(),
-);
+)
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 1b8672e87..4a4bdfd37 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -211,8 +211,8 @@
           class="iconified-button square-button brand-button button-transparent"
           @click="
             () => {
-              acceptTeamInvite(notification.body.team_id);
-              read();
+              acceptTeamInvite(notification.body.team_id)
+              read()
             }
           "
         >
@@ -223,8 +223,8 @@
           class="iconified-button square-button danger-button button-transparent"
           @click="
             () => {
-              removeSelfFromTeam(notification.body.team_id);
-              read();
+              removeSelfFromTeam(notification.body.team_id)
+              read()
             }
           "
         >
@@ -249,8 +249,8 @@
             class="iconified-button brand-button"
             @click="
               () => {
-                acceptTeamInvite(notification.body.team_id);
-                read();
+                acceptTeamInvite(notification.body.team_id)
+                read()
               }
             "
           >
@@ -261,8 +261,8 @@
             class="iconified-button danger-button"
             @click="
               () => {
-                removeSelfFromTeam(notification.body.team_id);
-                read();
+                removeSelfFromTeam(notification.body.team_id)
+                read()
               }
             "
           >
@@ -329,22 +329,22 @@ import {
   UserPlusIcon,
   VersionIcon,
   XIcon,
-} from "@modrinth/assets";
-import { Avatar, CopyCode, ProjectStatusBadge, useRelativeTime } from "@modrinth/ui";
-import { renderString } from "@modrinth/utils";
+} from '@modrinth/assets'
+import { Avatar, CopyCode, ProjectStatusBadge, useRelativeTime } from '@modrinth/ui'
+import { renderString } from '@modrinth/utils'
 
-import DoubleIcon from "~/components/ui/DoubleIcon.vue";
-import Categories from "~/components/ui/search/Categories.vue";
-import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
-import { markAsRead } from "~/helpers/notifications.ts";
-import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
-import { acceptTeamInvite, removeSelfFromTeam } from "~/helpers/teams.js";
-import { getUserLink } from "~/helpers/users.js";
+import DoubleIcon from '~/components/ui/DoubleIcon.vue'
+import Categories from '~/components/ui/search/Categories.vue'
+import ThreadSummary from '~/components/ui/thread/ThreadSummary.vue'
+import { markAsRead } from '~/helpers/notifications.ts'
+import { getProjectLink, getVersionLink } from '~/helpers/projects.js'
+import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams.js'
+import { getUserLink } from '~/helpers/users.js'
 
-const app = useNuxtApp();
-const emit = defineEmits(["update:notifications"]);
+const app = useNuxtApp()
+const emit = defineEmits(['update:notifications'])
 
-const formatRelativeTime = useRelativeTime();
+const formatRelativeTime = useRelativeTime()
 
 const props = defineProps({
   notification: {
@@ -367,34 +367,34 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-});
+})
 
-const flags = useFeatureFlags();
-const tags = useTags();
+const flags = useFeatureFlags()
+const tags = useTags()
 
 const type = computed(() =>
-  !props.notification.body || props.notification.body.type === "legacy_markdown"
+  !props.notification.body || props.notification.body.type === 'legacy_markdown'
     ? null
     : props.notification.body.type,
-);
-const thread = computed(() => props.notification.extra_data.thread);
-const report = computed(() => props.notification.extra_data.report);
-const project = computed(() => props.notification.extra_data.project);
-const version = computed(() => props.notification.extra_data.version);
-const user = computed(() => props.notification.extra_data.user);
-const organization = computed(() => props.notification.extra_data.organization);
-const invitedBy = computed(() => props.notification.extra_data.invited_by);
+)
+const thread = computed(() => props.notification.extra_data.thread)
+const report = computed(() => props.notification.extra_data.report)
+const project = computed(() => props.notification.extra_data.project)
+const version = computed(() => props.notification.extra_data.version)
+const user = computed(() => props.notification.extra_data.user)
+const organization = computed(() => props.notification.extra_data.organization)
+const invitedBy = computed(() => props.notification.extra_data.invited_by)
 
 const threadLink = computed(() => {
   if (report.value) {
-    return `/dashboard/report/${report.value.id}`;
+    return `/dashboard/report/${report.value.id}`
   } else if (project.value) {
-    return `${getProjectLink(project.value)}/moderation#messages`;
+    return `${getProjectLink(project.value)}/moderation#messages`
   }
-  return "#";
-});
+  return '#'
+})
 
-const hasBody = computed(() => !type.value || thread.value || type.value === "project_update");
+const hasBody = computed(() => !type.value || thread.value || type.value === 'project_update')
 
 async function read() {
   try {
@@ -403,54 +403,54 @@ async function read() {
       ...(props.notification.grouped_notifs
         ? props.notification.grouped_notifs.map((notif) => notif.id)
         : []),
-    ];
-    const updateNotifs = await markAsRead(ids);
-    const newNotifs = updateNotifs(props.notifications);
-    emit("update:notifications", newNotifs);
+    ]
+    const updateNotifs = await markAsRead(ids)
+    const newNotifs = updateNotifs(props.notifications)
+    emit('update:notifications', newNotifs)
   } catch (err) {
     app.$notify({
-      group: "main",
-      title: "Error marking notification as read",
+      group: 'main',
+      title: 'Error marking notification as read',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
 }
 
 async function performAction(notification, actionIndex) {
-  startLoading();
+  startLoading()
   try {
-    await read();
+    await read()
 
     if (actionIndex !== null) {
       await useBaseFetch(`${notification.actions[actionIndex].action_route[1]}`, {
         method: notification.actions[actionIndex].action_route[0].toUpperCase(),
-      });
+      })
     }
   } catch (err) {
     app.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 
 function getMessages() {
-  const messages = [];
+  const messages = []
   if (props.notification.body.message_id) {
-    messages.push(props.notification.body.message_id);
+    messages.push(props.notification.body.message_id)
   }
   if (props.notification.grouped_notifs) {
     for (const notif of props.notification.grouped_notifs) {
       if (notif.body.message_id) {
-        messages.push(notif.body.message_id);
+        messages.push(notif.body.message_id)
       }
     }
   }
-  return messages;
+  return messages
 }
 </script>
 
@@ -458,35 +458,35 @@ function getMessages() {
 .notification {
   display: grid;
   grid-template:
-    "icon title"
-    "actions actions"
-    "date date";
+    'icon title'
+    'actions actions'
+    'date date';
   grid-template-columns: min-content 1fr;
   grid-template-rows: min-content min-content min-content;
   gap: var(--spacing-card-sm);
 
   &.compact {
     grid-template:
-      "icon title actions"
-      "date date date";
+      'icon title actions'
+      'date date date';
     grid-template-columns: min-content 1fr auto;
     grid-template-rows: auto min-content;
   }
 
   &.has-body {
     grid-template:
-      "icon title"
-      "body body"
-      "actions actions"
-      "date date";
+      'icon title'
+      'body body'
+      'actions actions'
+      'date date';
     grid-template-columns: min-content 1fr;
     grid-template-rows: min-content auto auto min-content;
 
     &.compact {
       grid-template:
-        "icon title actions"
-        "body body body"
-        "date date date";
+        'icon title actions'
+        'body body body'
+        'date date date';
       grid-template-columns: min-content 1fr auto;
       grid-template-rows: min-content auto min-content;
     }
diff --git a/apps/frontend/src/components/ui/OptionGroup.vue b/apps/frontend/src/components/ui/OptionGroup.vue
index b50a13a12..8fb7a3919 100644
--- a/apps/frontend/src/components/ui/OptionGroup.vue
+++ b/apps/frontend/src/components/ui/OptionGroup.vue
@@ -31,88 +31,88 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { computed, onMounted,ref } from "vue";
+import { computed, onMounted, ref } from 'vue'
 
-const modelValue = defineModel<T>({ required: true });
+const modelValue = defineModel<T>({ required: true })
 
 const props = defineProps<{
-  options: T[];
-}>();
+  options: T[]
+}>()
 
-const scrollContainer = ref<HTMLElement | null>(null);
+const scrollContainer = ref<HTMLElement | null>(null)
 
-const sliderLeft = ref(4);
-const sliderTop = ref(4);
-const sliderRight = ref(4);
-const sliderBottom = ref(4);
+const sliderLeft = ref(4)
+const sliderTop = ref(4)
+const sliderRight = ref(4)
+const sliderBottom = ref(4)
 
-const sliderLeftPx = computed(() => `${sliderLeft.value}px`);
-const sliderTopPx = computed(() => `${sliderTop.value}px`);
-const sliderRightPx = computed(() => `${sliderRight.value}px`);
-const sliderBottomPx = computed(() => `${sliderBottom.value}px`);
+const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
+const sliderTopPx = computed(() => `${sliderTop.value}px`)
+const sliderRightPx = computed(() => `${sliderRight.value}px`)
+const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
 
-const optionButtons = ref();
+const optionButtons = ref()
 
-const initialized = ref(false);
+const initialized = ref(false)
 
 function setOption(option: T) {
-  modelValue.value = option;
+  modelValue.value = option
 }
 
 watch(modelValue, () => {
-  startAnimation(props.options.indexOf(modelValue.value));
-});
+  startAnimation(props.options.indexOf(modelValue.value))
+})
 
 function startAnimation(index: number) {
-  const el = optionButtons.value[index];
+  const el = optionButtons.value[index]
 
-  if (!el || !el.offsetParent) return;
+  if (!el || !el.offsetParent) return
 
   const newValues = {
     left: el.offsetLeft,
     top: el.offsetTop,
     right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
     bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
-  };
+  }
 
   if (sliderLeft.value === 4 && sliderRight.value === 4) {
-    sliderLeft.value = newValues.left;
-    sliderRight.value = newValues.right;
-    sliderTop.value = newValues.top;
-    sliderBottom.value = newValues.bottom;
+    sliderLeft.value = newValues.left
+    sliderRight.value = newValues.right
+    sliderTop.value = newValues.top
+    sliderBottom.value = newValues.bottom
   } else {
-    const delay = 200;
+    const delay = 200
 
     if (newValues.left < sliderLeft.value) {
-      sliderLeft.value = newValues.left;
+      sliderLeft.value = newValues.left
       setTimeout(() => {
-        sliderRight.value = newValues.right;
-      }, delay);
+        sliderRight.value = newValues.right
+      }, delay)
     } else {
-      sliderRight.value = newValues.right;
+      sliderRight.value = newValues.right
       setTimeout(() => {
-        sliderLeft.value = newValues.left;
-      }, delay);
+        sliderLeft.value = newValues.left
+      }, delay)
     }
 
     if (newValues.top < sliderTop.value) {
-      sliderTop.value = newValues.top;
+      sliderTop.value = newValues.top
       setTimeout(() => {
-        sliderBottom.value = newValues.bottom;
-      }, delay);
+        sliderBottom.value = newValues.bottom
+      }, delay)
     } else {
-      sliderBottom.value = newValues.bottom;
+      sliderBottom.value = newValues.bottom
       setTimeout(() => {
-        sliderTop.value = newValues.top;
-      }, delay);
+        sliderTop.value = newValues.top
+      }, delay)
     }
   }
-  initialized.value = true;
+  initialized.value = true
 }
 
 onMounted(() => {
-  startAnimation(props.options.indexOf(modelValue.value));
-});
+  startAnimation(props.options.indexOf(modelValue.value))
+})
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/OrganizationCreateModal.vue
index f39ae14b7..37722c6b4 100644
--- a/apps/frontend/src/components/ui/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/OrganizationCreateModal.vue
@@ -71,51 +71,51 @@
   </NewModal>
 </template>
 <script setup>
-import { PlusIcon,XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
 
-const router = useNativeRouter();
+const router = useNativeRouter()
 
-const name = ref("");
-const slug = ref("");
-const description = ref("");
-const manualSlug = ref(false);
+const name = ref('')
+const slug = ref('')
+const description = ref('')
+const manualSlug = ref(false)
 
-const modal = ref();
+const modal = ref()
 
 async function createOrganization() {
-  startLoading();
+  startLoading()
   try {
     const value = {
       name: name.value.trim(),
       description: description.value.trim(),
-      slug: slug.value.trim().replace(/ +/g, ""),
-    };
+      slug: slug.value.trim().replace(/ +/g, ''),
+    }
 
-    const result = await useBaseFetch("organization", {
-      method: "POST",
+    const result = await useBaseFetch('organization', {
+      method: 'POST',
       body: JSON.stringify(value),
       apiVersion: 3,
-    });
+    })
 
-    modal.value.hide();
+    modal.value.hide()
 
-    await router.push(`/organization/${result.slug}`);
+    await router.push(`/organization/${result.slug}`)
   } catch (err) {
-    console.error(err);
+    console.error(err)
     addNotification({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 function show(event) {
-  name.value = "";
-  description.value = "";
-  modal.value.show(event);
+  name.value = ''
+  description.value = ''
+  modal.value.show(event)
 }
 
 function updateSlug() {
@@ -123,15 +123,15 @@ function updateSlug() {
     slug.value = name.value
       .trim()
       .toLowerCase()
-      .replaceAll(" ", "-")
-      .replaceAll(/[^a-zA-Z0-9!@$()`.+,_"-]/g, "")
-      .replaceAll(/--+/gm, "-");
+      .replaceAll(' ', '-')
+      .replaceAll(/[^a-zA-Z0-9!@$()`.+,_"-]/g, '')
+      .replaceAll(/--+/gm, '-')
   }
 }
 
 defineExpose({
   show,
-});
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
index 80f19b877..fe659947d 100644
--- a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
+++ b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
@@ -59,7 +59,7 @@
               <span>{{
                 formatProjectType(
                   $getProjectTypeForDisplay(
-                    project.project_types?.[0] ?? "project",
+                    project.project_types?.[0] ?? 'project',
                     project.loaders,
                   ),
                 )
@@ -88,13 +88,13 @@
               <span>
                 {{
                   selectedProjects.length === props.projects.length
-                    ? "All"
+                    ? 'All'
                     : selectedProjects.length
                 }}
               </span>
               <span>
-                {{ " " }}
-                {{ selectedProjects.length === 1 ? "project" : "projects" }}
+                {{ ' ' }}
+                {{ selectedProjects.length === 1 ? 'project' : 'projects' }}
               </span>
             </span>
           </Button>
@@ -109,40 +109,40 @@
 </template>
 
 <script setup>
-import { BoxIcon, SettingsIcon, TransferIcon, XIcon } from "@modrinth/assets";
-import { Avatar,Button, Checkbox, CopyCode, Modal } from "@modrinth/ui";
-import { formatProjectType } from "@modrinth/utils";
+import { BoxIcon, SettingsIcon, TransferIcon, XIcon } from '@modrinth/assets'
+import { Avatar, Button, Checkbox, CopyCode, Modal } from '@modrinth/ui'
+import { formatProjectType } from '@modrinth/utils'
 
-const modalOpen = ref(null);
+const modalOpen = ref(null)
 
 const props = defineProps({
   projects: {
     type: Array,
     required: true,
   },
-});
+})
 
 // define emit for submission
-const emit = defineEmits(["submit"]);
+const emit = defineEmits(['submit'])
 
-const selectedProjects = ref([]);
+const selectedProjects = ref([])
 
 const toggleSelectedProjects = () => {
   if (selectedProjects.value.length === props.projects.length) {
-    selectedProjects.value = [];
+    selectedProjects.value = []
   } else {
-    selectedProjects.value = props.projects;
+    selectedProjects.value = props.projects
   }
-};
+}
 
 const onSubmitHandler = () => {
   if (selectedProjects.value.length === 0) {
-    return;
+    return
   }
-  emit("submit", selectedProjects.value);
-  selectedProjects.value = [];
-  modalOpen.value?.hide();
-};
+  emit('submit', selectedProjects.value)
+  selectedProjects.value = []
+  modalOpen.value?.hide()
+}
 </script>
 
 <style lang="scss" scoped>
@@ -176,7 +176,7 @@ const onSubmitHandler = () => {
 
     .table-row {
       display: grid;
-      grid-template: "checkbox icon name type settings" "checkbox icon id type settings";
+      grid-template: 'checkbox icon name type settings' 'checkbox icon id type settings';
       grid-template-columns:
         min-content min-content minmax(min-content, 2fr)
         minmax(min-content, 1fr) min-content;
@@ -208,7 +208,7 @@ const onSubmitHandler = () => {
     }
 
     .table-head {
-      grid-template: "checkbox settings";
+      grid-template: 'checkbox settings';
       grid-template-columns: min-content minmax(min-content, 1fr);
 
       :nth-child(2),
@@ -223,7 +223,7 @@ const onSubmitHandler = () => {
   @media screen and (max-width: 560px) {
     .table-row {
       display: grid;
-      grid-template: "checkbox icon name settings" "checkbox icon id settings" "checkbox icon type settings" "checkbox icon status settings";
+      grid-template: 'checkbox icon name settings' 'checkbox icon id settings' 'checkbox icon type settings' 'checkbox icon status settings';
       grid-template-columns: min-content min-content minmax(min-content, 1fr) min-content;
 
       :nth-child(5) {
@@ -232,7 +232,7 @@ const onSubmitHandler = () => {
     }
 
     .table-head {
-      grid-template: "checkbox settings";
+      grid-template: 'checkbox settings';
       grid-template-columns: min-content minmax(min-content, 1fr);
     }
   }
diff --git a/apps/frontend/src/components/ui/ProjectCard.vue b/apps/frontend/src/components/ui/ProjectCard.vue
index 1e2ed606f..c0e50b86f 100644
--- a/apps/frontend/src/components/ui/ProjectCard.vue
+++ b/apps/frontend/src/components/ui/ProjectCard.vue
@@ -90,11 +90,11 @@
 </template>
 
 <script>
-import { CalendarIcon, DownloadIcon, HeartIcon,UpdatedIcon } from "@modrinth/assets";
-import { Avatar, ProjectStatusBadge, useRelativeTime } from "@modrinth/ui";
+import { CalendarIcon, DownloadIcon, HeartIcon, UpdatedIcon } from '@modrinth/assets'
+import { Avatar, ProjectStatusBadge, useRelativeTime } from '@modrinth/ui'
 
-import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
-import Categories from "~/components/ui/search/Categories.vue";
+import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator.vue'
+import Categories from '~/components/ui/search/Categories.vue'
 
 export default {
   components: {
@@ -110,15 +110,15 @@ export default {
   props: {
     id: {
       type: String,
-      default: "modrinth-0",
+      default: 'modrinth-0',
     },
     type: {
       type: String,
-      default: "mod",
+      default: 'mod',
     },
     name: {
       type: String,
-      default: "Project Name",
+      default: 'Project Name',
     },
     author: {
       type: String,
@@ -126,11 +126,11 @@ export default {
     },
     description: {
       type: String,
-      default: "A _type description",
+      default: 'A _type description',
     },
     iconUrl: {
       type: String,
-      default: "#",
+      default: '#',
       required: false,
     },
     downloads: {
@@ -145,7 +145,7 @@ export default {
     },
     createdAt: {
       type: String,
-      default: "0000-00-00",
+      default: '0000-00-00',
     },
     updatedAt: {
       type: String,
@@ -154,7 +154,7 @@ export default {
     categories: {
       type: Array,
       default() {
-        return [];
+        return []
       },
     },
     status: {
@@ -168,12 +168,12 @@ export default {
     serverSide: {
       type: String,
       required: false,
-      default: "",
+      default: '',
     },
     clientSide: {
       type: String,
       required: false,
-      default: "",
+      default: '',
     },
     moderation: {
       type: Boolean,
@@ -212,26 +212,26 @@ export default {
     },
   },
   setup() {
-    const tags = useTags();
-    const formatRelativeTime = useRelativeTime();
+    const tags = useTags()
+    const formatRelativeTime = useRelativeTime()
 
-    return { tags, formatRelativeTime };
+    return { tags, formatRelativeTime }
   },
   computed: {
     projectTypeDisplay() {
-      return this.$getProjectTypeForDisplay(this.type, this.categories);
+      return this.$getProjectTypeForDisplay(this.type, this.categories)
     },
     toColor() {
-      let color = this.color;
+      let color = this.color
 
-      color >>>= 0;
-      const b = color & 0xff;
-      const g = (color & 0xff00) >>> 8;
-      const r = (color & 0xff0000) >>> 16;
-      return "rgba(" + [r, g, b, 1].join(",") + ")";
+      color >>>= 0
+      const b = color & 0xff
+      const g = (color & 0xff00) >>> 8
+      const r = (color & 0xff0000) >>> 16
+      return 'rgba(' + [r, g, b, 1].join(',') + ')'
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -244,9 +244,9 @@ export default {
 
 .display-mode--list .project-card {
   grid-template:
-    "icon title stats"
-    "icon description stats"
-    "icon tags stats";
+    'icon title stats'
+    'icon description stats'
+    'icon tags stats';
   grid-template-columns: min-content 1fr auto;
   grid-template-rows: min-content 1fr min-content;
   column-gap: var(--spacing-card-md);
@@ -255,20 +255,20 @@ export default {
 
   @media screen and (max-width: 750px) {
     grid-template:
-      "icon title"
-      "icon description"
-      "icon tags"
-      "stats stats";
+      'icon title'
+      'icon description'
+      'icon tags'
+      'stats stats';
     grid-template-columns: min-content auto;
     grid-template-rows: min-content 1fr min-content min-content;
   }
 
   @media screen and (max-width: 550px) {
     grid-template:
-      "icon title"
-      "icon description"
-      "tags tags"
-      "stats stats";
+      'icon title'
+      'icon description'
+      'tags tags'
+      'stats stats';
     grid-template-columns: min-content auto;
     grid-template-rows: min-content 1fr min-content min-content;
   }
@@ -277,7 +277,7 @@ export default {
 .display-mode--gallery .project-card,
 .display-mode--grid .project-card {
   padding: 0 0 var(--spacing-card-bg) 0;
-  grid-template: "gallery gallery" "icon title" "description  description" "tags tags" "stats stats";
+  grid-template: 'gallery gallery' 'icon title' 'description  description' 'tags tags' 'stats stats';
   grid-template-columns: min-content 1fr;
   grid-template-rows: min-content min-content 1fr min-content min-content;
   row-gap: var(--spacing-card-sm);
@@ -501,10 +501,10 @@ export default {
 .small-mode {
   @media screen and (min-width: 750px) {
     grid-template:
-      "icon title"
-      "icon description"
-      "icon tags"
-      "stats stats" !important;
+      'icon title'
+      'icon description'
+      'icon tags'
+      'stats stats' !important;
     grid-template-columns: min-content auto !important;
     grid-template-rows: min-content 1fr min-content min-content !important;
 
diff --git a/apps/frontend/src/components/ui/ProjectMemberHeader.vue b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
index e4b293c3a..e19891d0e 100644
--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
@@ -117,10 +117,10 @@ import {
   ScaleIcon,
   SendIcon,
   XIcon,
-} from "@modrinth/assets";
-import { formatProjectType } from "@modrinth/utils";
+} from '@modrinth/assets'
+import { formatProjectType } from '@modrinth/utils'
 
-import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
+import { acceptTeamInvite, removeTeamMember } from '~/helpers/teams.js'
 
 const props = defineProps({
   project: {
@@ -130,7 +130,7 @@ const props = defineProps({
   versions: {
     type: Array,
     default() {
-      return [];
+      return []
     },
   },
   currentMember: {
@@ -151,7 +151,7 @@ const props = defineProps({
   },
   routeName: {
     type: String,
-    default: "",
+    default: '',
   },
   auth: {
     type: Object,
@@ -166,12 +166,12 @@ const props = defineProps({
     default() {
       return () => {
         addNotification({
-          group: "main",
-          title: "An error occurred",
-          text: "setProcessing function not found",
-          type: "error",
-        });
-      };
+          group: 'main',
+          title: 'An error occurred',
+          text: 'setProcessing function not found',
+          type: 'error',
+        })
+      }
     },
   },
   toggleCollapsed: {
@@ -179,12 +179,12 @@ const props = defineProps({
     default() {
       return () => {
         addNotification({
-          group: "main",
-          title: "An error occurred",
-          text: "toggleCollapsed function not found",
-          type: "error",
-        });
-      };
+          group: 'main',
+          title: 'An error occurred',
+          text: 'toggleCollapsed function not found',
+          type: 'error',
+        })
+      }
     },
   },
   updateMembers: {
@@ -192,81 +192,81 @@ const props = defineProps({
     default() {
       return () => {
         addNotification({
-          group: "main",
-          title: "An error occurred",
-          text: "updateMembers function not found",
-          type: "error",
-        });
-      };
+          group: 'main',
+          title: 'An error occurred',
+          text: 'updateMembers function not found',
+          type: 'error',
+        })
+      }
     },
   },
-});
+})
 
-const featuredGalleryImage = computed(() => props.project.gallery.find((img) => img.featured));
+const featuredGalleryImage = computed(() => props.project.gallery.find((img) => img.featured))
 
 const nags = computed(() => [
   {
     condition: props.versions.length < 1,
-    title: "Upload a version",
-    id: "upload-version",
-    description: "At least one version is required for a project to be submitted for review.",
-    status: "required",
+    title: 'Upload a version',
+    id: 'upload-version',
+    description: 'At least one version is required for a project to be submitted for review.',
+    status: 'required',
     link: {
-      path: "versions",
-      title: "Visit versions page",
-      hide: props.routeName === "type-id-versions",
+      path: 'versions',
+      title: 'Visit versions page',
+      hide: props.routeName === 'type-id-versions',
     },
   },
   {
     condition:
-      props.project.body === "" || props.project.body.startsWith("# Placeholder description"),
-    title: "Add a description",
-    id: "add-description",
+      props.project.body === '' || props.project.body.startsWith('# Placeholder description'),
+    title: 'Add a description',
+    id: 'add-description',
     description:
       "A description that clearly describes the project's purpose and function is required.",
-    status: "required",
+    status: 'required',
     link: {
-      path: "settings/description",
-      title: "Visit description settings",
-      hide: props.routeName === "type-id-settings-description",
+      path: 'settings/description',
+      title: 'Visit description settings',
+      hide: props.routeName === 'type-id-settings-description',
     },
   },
   {
     condition: !props.project.icon_url,
-    title: "Add an icon",
-    id: "add-icon",
+    title: 'Add an icon',
+    id: 'add-icon',
     description:
-      "Your project should have a nice-looking icon to uniquely identify your project at a glance.",
-    status: "suggestion",
+      'Your project should have a nice-looking icon to uniquely identify your project at a glance.',
+    status: 'suggestion',
     link: {
-      path: "settings",
-      title: "Visit general settings",
-      hide: props.routeName === "type-id-settings",
+      path: 'settings',
+      title: 'Visit general settings',
+      hide: props.routeName === 'type-id-settings',
     },
   },
   {
     condition: props.project.gallery.length === 0 || !featuredGalleryImage.value,
-    title: "Feature a gallery image",
-    id: "feature-gallery-image",
-    description: "Featured gallery images may be the first impression of many users.",
-    status: "suggestion",
+    title: 'Feature a gallery image',
+    id: 'feature-gallery-image',
+    description: 'Featured gallery images may be the first impression of many users.',
+    status: 'suggestion',
     link: {
-      path: "gallery",
-      title: "Visit gallery page",
-      hide: props.routeName === "type-id-gallery",
+      path: 'gallery',
+      title: 'Visit gallery page',
+      hide: props.routeName === 'type-id-gallery',
     },
   },
   {
     hide: props.project.versions.length === 0,
     condition: props.project.categories.length < 1,
-    title: "Select tags",
-    id: "select-tags",
-    description: "Select all tags that apply to your project.",
-    status: "suggestion",
+    title: 'Select tags',
+    id: 'select-tags',
+    description: 'Select all tags that apply to your project.',
+    status: 'suggestion',
     link: {
-      path: "settings/tags",
-      title: "Visit tag settings",
-      hide: props.routeName === "type-id-settings-tags",
+      path: 'settings/tags',
+      title: 'Visit tag settings',
+      hide: props.routeName === 'type-id-settings-tags',
     },
   },
   {
@@ -277,111 +277,111 @@ const nags = computed(() => [
       props.project.discord_url ||
       props.project.donation_urls.length > 0
     ),
-    title: "Add external links",
-    id: "add-links",
+    title: 'Add external links',
+    id: 'add-links',
     description:
-      "Add any relevant links targeted outside of Modrinth, such as sources, issues, or a Discord invite.",
-    status: "suggestion",
+      'Add any relevant links targeted outside of Modrinth, such as sources, issues, or a Discord invite.',
+    status: 'suggestion',
     link: {
-      path: "settings/links",
-      title: "Visit links settings",
-      hide: props.routeName === "type-id-settings-links",
+      path: 'settings/links',
+      title: 'Visit links settings',
+      hide: props.routeName === 'type-id-settings-links',
     },
   },
   {
     hide:
       props.project.versions.length === 0 ||
-      props.project.project_type === "resourcepack" ||
-      props.project.project_type === "plugin" ||
-      props.project.project_type === "shader" ||
-      props.project.project_type === "datapack",
+      props.project.project_type === 'resourcepack' ||
+      props.project.project_type === 'plugin' ||
+      props.project.project_type === 'shader' ||
+      props.project.project_type === 'datapack',
     condition:
-      props.project.client_side === "unknown" ||
-      props.project.server_side === "unknown" ||
-      (props.project.client_side === "unsupported" && props.project.server_side === "unsupported"),
-    title: "Select supported environments",
-    id: "select-environments",
+      props.project.client_side === 'unknown' ||
+      props.project.server_side === 'unknown' ||
+      (props.project.client_side === 'unsupported' && props.project.server_side === 'unsupported'),
+    title: 'Select supported environments',
+    id: 'select-environments',
     description: `Select if the ${formatProjectType(
       props.project.project_type,
     ).toLowerCase()} functions on the client-side and/or server-side.`,
-    status: "required",
+    status: 'required',
     link: {
-      path: "settings",
-      title: "Visit general settings",
-      hide: props.routeName === "type-id-settings",
+      path: 'settings',
+      title: 'Visit general settings',
+      hide: props.routeName === 'type-id-settings',
     },
   },
   {
-    condition: props.project.license.id === "LicenseRef-Unknown",
-    title: "Select license",
-    id: "select-license",
+    condition: props.project.license.id === 'LicenseRef-Unknown',
+    title: 'Select license',
+    id: 'select-license',
     description: `Select the license your ${formatProjectType(
       props.project.project_type,
     ).toLowerCase()} is distributed under.`,
-    status: "required",
+    status: 'required',
     link: {
-      path: "settings/license",
-      title: "Visit license settings",
-      hide: props.routeName === "type-id-settings-license",
+      path: 'settings/license',
+      title: 'Visit license settings',
+      hide: props.routeName === 'type-id-settings-license',
     },
   },
   {
-    condition: props.project.status === "draft",
-    title: "Submit for review",
-    id: "submit-for-review",
+    condition: props.project.status === 'draft',
+    title: 'Submit for review',
+    id: 'submit-for-review',
     description:
-      "Your project is only viewable by members of the project. It must be reviewed by moderators in order to be published.",
-    status: "review",
+      'Your project is only viewable by members of the project. It must be reviewed by moderators in order to be published.',
+    status: 'review',
     link: null,
     action: {
       onClick: submitForReview,
-      title: "Submit for review",
-      disabled: () => nags.value.filter((x) => x.condition && x.status === "required").length > 0,
+      title: 'Submit for review',
+      disabled: () => nags.value.filter((x) => x.condition && x.status === 'required').length > 0,
     },
   },
   {
-    hide: props.project.stats === "draft",
+    hide: props.project.stats === 'draft',
     condition: props.tags.rejectedStatuses.includes(props.project.status),
-    title: "Resubmit for review",
-    id: "resubmit-for-review",
+    title: 'Resubmit for review',
+    id: 'resubmit-for-review',
     description: `Your project has been ${props.project.status} by
             Modrinth's staff. In most cases, you can resubmit for review after
             addressing the staff's message.`,
-    status: "review",
+    status: 'review',
     link: {
-      path: "moderation",
-      title: "Visit moderation page",
-      hide: props.routeName === "type-id-moderation",
+      path: 'moderation',
+      title: 'Visit moderation page',
+      hide: props.routeName === 'type-id-moderation',
     },
   },
-]);
+])
 
 const showInvitation = computed(() => {
   if (props.allMembers && props.auth) {
-    const member = props.allMembers.find((x) => x.user.id === props.auth.user.id);
-    return member && !member.accepted;
+    const member = props.allMembers.find((x) => x.user.id === props.auth.user.id)
+    return member && !member.accepted
   }
-  return false;
-});
+  return false
+})
 
 const acceptInvite = () => {
-  acceptTeamInvite(props.project.team);
-  props.updateMembers();
-};
+  acceptTeamInvite(props.project.team)
+  props.updateMembers()
+}
 
 const declineInvite = () => {
-  removeTeamMember(props.project.team, props.auth.user.id);
-  props.updateMembers();
-};
+  removeTeamMember(props.project.team, props.auth.user.id)
+  props.updateMembers()
+}
 
 const submitForReview = async () => {
   if (
     !props.acknowledgedMessage ||
-    nags.value.filter((x) => x.condition && x.status === "required").length === 0
+    nags.value.filter((x) => x.condition && x.status === 'required').length === 0
   ) {
-    await props.setProcessing();
+    await props.setProcessing()
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/ShareArticleButtons.vue b/apps/frontend/src/components/ui/ShareArticleButtons.vue
index 8813a7caf..284a423e4 100644
--- a/apps/frontend/src/components/ui/ShareArticleButtons.vue
+++ b/apps/frontend/src/components/ui/ShareArticleButtons.vue
@@ -64,23 +64,23 @@ import {
   MailIcon,
   MastodonIcon,
   TwitterIcon,
-} from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+} from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
 
 const props = defineProps<{
-  title?: string;
-  url: string;
-}>();
+  title?: string
+  url: string
+}>()
 
-const copied = ref(false);
-const encodedUrl = computed(() => encodeURIComponent(props.url));
-const encodedTitle = computed(() => (props.title ? encodeURIComponent(props.title) : undefined));
+const copied = ref(false)
+const encodedUrl = computed(() => encodeURIComponent(props.url))
+const encodedTitle = computed(() => (props.title ? encodeURIComponent(props.title) : undefined))
 
 async function copyToClipboard(text: string) {
-  await navigator.clipboard.writeText(text);
-  copied.value = true;
+  await navigator.clipboard.writeText(text)
+  copied.value = true
   setTimeout(() => {
-    copied.value = false;
-  }, 3000);
+    copied.value = false
+  }, 3000)
 }
 </script>
diff --git a/apps/frontend/src/components/ui/charts/Chart.client.vue b/apps/frontend/src/components/ui/charts/Chart.client.vue
index 21115c625..8d9a9c5e9 100644
--- a/apps/frontend/src/components/ui/charts/Chart.client.vue
+++ b/apps/frontend/src/components/ui/charts/Chart.client.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { formatMoney,formatNumber } from "@modrinth/utils";
-import dayjs from "dayjs";
-import VueApexCharts from "vue3-apexcharts";
+import { formatMoney, formatNumber } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import VueApexCharts from 'vue3-apexcharts'
 
 const props = defineProps({
   name: {
@@ -18,7 +18,7 @@ const props = defineProps({
   },
   formatLabels: {
     type: Function,
-    default: (label) => dayjs(label).format("MMM D"),
+    default: (label) => dayjs(label).format('MMM D'),
   },
   colors: {
     type: Array,
@@ -26,11 +26,11 @@ const props = defineProps({
   },
   prefix: {
     type: String,
-    default: "",
+    default: '',
   },
   suffix: {
     type: String,
-    default: "",
+    default: '',
   },
   hideToolbar: {
     type: Boolean,
@@ -46,7 +46,7 @@ const props = defineProps({
   },
   type: {
     type: String,
-    default: "bar",
+    default: 'bar',
   },
   hideTotal: {
     type: Boolean,
@@ -58,11 +58,11 @@ const props = defineProps({
   },
   legendPosition: {
     type: String,
-    default: "right",
+    default: 'right',
   },
   xAxisType: {
     type: String,
-    default: "datetime",
+    default: 'datetime',
   },
   percentStacked: {
     type: Boolean,
@@ -76,14 +76,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
 function formatTooltipValue(value, props) {
-  return props.isMoney ? formatMoney(value, false) : formatNumber(value, false);
+  return props.isMoney ? formatMoney(value, false) : formatNumber(value, false)
 }
 
 function generateListEntry(value, index, _, w, props) {
-  const color = w.globals.colors?.[index];
+  const color = w.globals.colors?.[index]
 
   return `<div class="list-entry">
     <span class="circle" style="background-color: ${color}"></span>
@@ -93,35 +93,35 @@ function generateListEntry(value, index, _, w, props) {
     <div class="value">
       ${props.prefix}${formatTooltipValue(value, props)}${props.suffix}
     </div>
-  </div>`;
+  </div>`
 }
 
 function generateTooltip({ series, seriesIndex, dataPointIndex, w }, props) {
-  const label = w.globals.lastXAxis.categories?.[dataPointIndex];
+  const label = w.globals.lastXAxis.categories?.[dataPointIndex]
 
-  const formattedLabel = props.formatLabels(label);
+  const formattedLabel = props.formatLabels(label)
 
   let tooltip = `<div class="bar-tooltip">
     <div class="seperated-entry title">
-      <div class="label">${formattedLabel}</div>`;
+      <div class="label">${formattedLabel}</div>`
 
   // Logic for total and percent stacked
   if (!props.hideTotal) {
     if (props.percentStacked) {
-      const total = series.reduce((a, b) => a + (b?.[dataPointIndex] || 0), 0);
-      const percentValue = (100 * series[seriesIndex][dataPointIndex]) / total;
+      const total = series.reduce((a, b) => a + (b?.[dataPointIndex] || 0), 0)
+      const percentValue = (100 * series[seriesIndex][dataPointIndex]) / total
       tooltip += `<div class="value">${props.prefix}${formatNumber(percentValue)}%${
         props.suffix
-      }</div>`;
+      }</div>`
     } else {
-      const totalValue = series.reduce((a, b) => a + (b?.[dataPointIndex] || 0), 0);
+      const totalValue = series.reduce((a, b) => a + (b?.[dataPointIndex] || 0), 0)
       tooltip += `<div class="value">${props.prefix}${formatTooltipValue(totalValue, props)}${
         props.suffix
-      }</div>`;
+      }</div>`
     }
   }
 
-  tooltip += '</div><hr class="card-divider" />';
+  tooltip += '</div><hr class="card-divider" />'
 
   // Logic for generating list entries
   if (props.percentStacked) {
@@ -131,9 +131,9 @@ function generateTooltip({ series, seriesIndex, dataPointIndex, w }, props) {
       seriesIndex,
       w,
       props,
-    );
+    )
   } else {
-    const returnTopN = 15;
+    const returnTopN = 15
 
     const listEntries = series
       .map((value, index) => [
@@ -144,13 +144,13 @@ function generateTooltip({ series, seriesIndex, dataPointIndex, w }, props) {
       .sort((a, b) => b[0] - a[0])
       .slice(0, returnTopN) // Return only the top X entries
       .map((value) => value[1])
-      .join("");
+      .join('')
 
-    tooltip += listEntries;
+    tooltip += listEntries
   }
 
-  tooltip += "</div>";
-  return tooltip;
+  tooltip += '</div>'
+  return tooltip
 }
 
 const chartOptions = computed(() => {
@@ -158,19 +158,19 @@ const chartOptions = computed(() => {
     chart: {
       id: props.name,
       fontFamily:
-        "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
-      foreColor: "var(--color-base)",
+        'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+      foreColor: 'var(--color-base)',
       selection: {
         enabled: true,
         fill: {
-          color: "var(--color-brand)",
+          color: 'var(--color-brand)',
         },
       },
       toolbar: {
         show: false,
       },
       stacked: props.stacked,
-      stackType: props.percentStacked ? "100%" : "normal",
+      stackType: props.percentStacked ? '100%' : 'normal',
       zoom: {
         autoScaleYaxis: true,
       },
@@ -183,7 +183,7 @@ const chartOptions = computed(() => {
       categories: props.labels,
       labels: {
         style: {
-          borderRadius: "var(--radius-sm)",
+          borderRadius: 'var(--radius-sm)',
         },
       },
       axisTicks: {
@@ -207,8 +207,8 @@ const chartOptions = computed(() => {
       },
     },
     grid: {
-      borderColor: "var(--color-button-bg)",
-      tickColor: "var(--color-button-bg)",
+      borderColor: 'var(--color-button-bg)',
+      tickColor: 'var(--color-button-bg)',
     },
     legend: {
       show: !props.hideLegend,
@@ -216,16 +216,16 @@ const chartOptions = computed(() => {
       showForZeroSeries: false,
       showForSingleSeries: false,
       showForNullSeries: false,
-      fontSize: "var(--font-size-nm)",
+      fontSize: 'var(--font-size-nm)',
       fontFamily:
-        "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
+        'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
       onItemClick: {
         toggleDataSeries: true,
       },
     },
     markers: {
       size: 0,
-      strokeColor: "var(--color-contrast)",
+      strokeColor: 'var(--color-contrast)',
       strokeWidth: 3,
       strokeOpacity: 1,
       fillOpacity: 1,
@@ -236,29 +236,29 @@ const chartOptions = computed(() => {
     plotOptions: {
       bar: {
         horizontal: props.horizontalBar,
-        columnWidth: "80%",
-        endingShape: "rounded",
+        columnWidth: '80%',
+        endingShape: 'rounded',
         borderRadius: 5,
-        borderRadiusApplication: "end",
-        borderRadiusWhenStacked: "last",
+        borderRadiusApplication: 'end',
+        borderRadiusWhenStacked: 'last',
       },
     },
     stroke: {
-      curve: "smooth",
+      curve: 'smooth',
       width: 2,
     },
     tooltip: {
       custom: (d) => generateTooltip(d, props),
     },
     fill:
-      props.type === "area"
+      props.type === 'area'
         ? {
             colors: props.colors,
-            type: "gradient",
+            type: 'gradient',
             opacity: 1,
             gradient: {
-              shade: "light",
-              type: "vertical",
+              shade: 'light',
+              type: 'vertical',
               shadeIntensity: 0,
               gradientToColors: props.colors,
               inverseColors: true,
@@ -269,40 +269,40 @@ const chartOptions = computed(() => {
             },
           }
         : {},
-  };
-});
+  }
+})
 
-const chart = ref(null);
+const chart = ref(null)
 
 const legendValues = ref(
   [...props.data].map((project, index) => {
-    return { name: project.name, visible: true, color: props.colors[index] };
+    return { name: project.name, visible: true, color: props.colors[index] }
   }),
-);
+)
 
 const flipLegend = (legend, newVal) => {
-  legend.visible = newVal;
-  chart.value.toggleSeries(legend.name);
-};
+  legend.visible = newVal
+  chart.value.toggleSeries(legend.name)
+}
 
 const resetChart = () => {
-  if (!chart.value) return;
-  chart.value.updateSeries([...props.data]);
+  if (!chart.value) return
+  chart.value.updateSeries([...props.data])
   chart.value.updateOptions({
     xaxis: {
       categories: props.labels,
     },
-  });
-  chart.value.resetSeries();
+  })
+  chart.value.resetSeries()
   legendValues.value.forEach((legend) => {
-    legend.visible = true;
-  });
-};
+    legend.visible = true
+  })
+}
 
 defineExpose({
   resetChart,
   flipLegend,
-});
+})
 </script>
 
 <template>
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index 5f3c64b97..61f38cbd1 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -304,28 +304,28 @@
 </template>
 
 <script setup lang="ts">
-import { DownloadIcon,UpdatedIcon } from "@modrinth/assets";
-import { Button, Card, DropdownSelect } from "@modrinth/ui";
-import { formatCategoryHeader,formatMoney, formatNumber } from "@modrinth/utils";
-import dayjs from "dayjs";
-import { computed } from "vue";
+import { DownloadIcon, UpdatedIcon } from '@modrinth/assets'
+import { Button, Card, DropdownSelect } from '@modrinth/ui'
+import { formatCategoryHeader, formatMoney, formatNumber } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed } from 'vue'
 
-import { UiChartsChart as Chart,UiChartsCompactChart as CompactChart } from "#components";
-import PaletteIcon from "~/assets/icons/palette.svg?component";
-import { analyticsSetToCSVString, intToRgba } from "~/utils/analytics.js";
+import { UiChartsChart as Chart, UiChartsCompactChart as CompactChart } from '#components'
+import PaletteIcon from '~/assets/icons/palette.svg?component'
+import { analyticsSetToCSVString, intToRgba } from '~/utils/analytics.js'
 
-const router = useNativeRouter();
-const theme = useTheme();
+const router = useNativeRouter()
+const theme = useTheme()
 
 const props = withDefaults(
   defineProps<{
-    projects?: any[];
+    projects?: any[]
     /**
      * @deprecated Use `ranges` instead
      */
-    resoloutions?: Record<string, number>;
-    ranges?: RangeObject[];
-    personal?: boolean;
+    resoloutions?: Record<string, number>
+    ranges?: RangeObject[]
+    personal?: boolean
   }>(),
   {
     projects: undefined,
@@ -333,19 +333,19 @@ const props = withDefaults(
     ranges: () => defaultRanges,
     personal: false,
   },
-);
+)
 
-const projects = ref(props.projects || []);
+const projects = ref(props.projects || [])
 
 // const selectedChart = ref('downloads')
 const selectedChart = computed({
   get: () => {
-    const id = (router.currentRoute.value.query?.chart as string | undefined) || "downloads";
+    const id = (router.currentRoute.value.query?.chart as string | undefined) || 'downloads'
     // if the id is anything but the 3 charts we have or undefined, throw an error
-    if (!["downloads", "views", "revenue"].includes(id)) {
-      throw new Error(`Unknown chart ${id}`);
+    if (!['downloads', 'views', 'revenue'].includes(id)) {
+      throw new Error(`Unknown chart ${id}`)
     }
-    return id;
+    return id
   },
   set: (chart) => {
     router.push({
@@ -353,119 +353,119 @@ const selectedChart = computed({
         ...router.currentRoute.value.query,
         chart,
       },
-    });
+    })
   },
-});
+})
 
 // Chart refs
-const downloadsChart = ref();
-const viewsChart = ref();
-const revenueChart = ref();
-const tinyDownloadChart = ref();
-const tinyViewChart = ref();
-const tinyRevenueChart = ref();
+const downloadsChart = ref()
+const viewsChart = ref()
+const revenueChart = ref()
+const tinyDownloadChart = ref()
+const tinyViewChart = ref()
+const tinyRevenueChart = ref()
 
-const selectedDisplayProjects = ref(props.projects || []);
+const selectedDisplayProjects = ref(props.projects || [])
 
 const removeProjectFromDisplay = (id: string) => {
-  selectedDisplayProjects.value = selectedDisplayProjects.value.filter((p) => p.id !== id);
-};
+  selectedDisplayProjects.value = selectedDisplayProjects.value.filter((p) => p.id !== id)
+}
 
 const addProjectToDisplay = (id: string) => {
   selectedDisplayProjects.value = [
     ...selectedDisplayProjects.value,
     props.projects?.find((p) => p.id === id),
-  ].filter(Boolean);
-};
+  ].filter(Boolean)
+}
 
 const projectIsOnDisplay = (id: string) => {
-  return selectedDisplayProjects.value?.some((p) => p.id === id) ?? false;
-};
+  return selectedDisplayProjects.value?.some((p) => p.id === id) ?? false
+}
 
 const resetCharts = () => {
-  downloadsChart.value?.resetChart();
-  viewsChart.value?.resetChart();
-  revenueChart.value?.resetChart();
+  downloadsChart.value?.resetChart()
+  viewsChart.value?.resetChart()
+  revenueChart.value?.resetChart()
 
-  tinyDownloadChart.value?.resetChart();
-  tinyViewChart.value?.resetChart();
-  tinyRevenueChart.value?.resetChart();
-};
+  tinyDownloadChart.value?.resetChart()
+  tinyViewChart.value?.resetChart()
+  tinyRevenueChart.value?.resetChart()
+}
 
 const isUsingProjectColors = computed({
   get: () => {
     return (
-      router.currentRoute.value.query?.colors === "true" ||
+      router.currentRoute.value.query?.colors === 'true' ||
       router.currentRoute.value.query?.colors === undefined
-    );
+    )
   },
   set: (newValue) => {
     router.push({
       query: {
         ...router.currentRoute.value.query,
-        colors: newValue ? "true" : "false",
+        colors: newValue ? 'true' : 'false',
       },
-    });
+    })
   },
-});
+})
 
-const startDate = ref(dayjs().startOf("day"));
-const endDate = ref(dayjs().endOf("day"));
-const timeResolution = ref(30);
+const startDate = ref(dayjs().startOf('day'))
+const endDate = ref(dayjs().endOf('day'))
+const timeResolution = ref(30)
 
 onBeforeMount(() => {
   // Load cached data and range from localStorage - cache.
   if (import.meta.client) {
-    const rangeLabel = localStorage.getItem("analyticsSelectedRange");
+    const rangeLabel = localStorage.getItem('analyticsSelectedRange')
     if (rangeLabel) {
-      const range = props.ranges.find((r) => r.getLabel([dayjs(), dayjs()]) === rangeLabel)!;
+      const range = props.ranges.find((r) => r.getLabel([dayjs(), dayjs()]) === rangeLabel)!
 
       if (range !== undefined) {
-        internalRange.value = range;
-        const ranges = range.getDates(dayjs());
-        timeResolution.value = range.timeResolution;
-        startDate.value = ranges.startDate;
-        endDate.value = ranges.endDate;
+        internalRange.value = range
+        const ranges = range.getDates(dayjs())
+        timeResolution.value = range.timeResolution
+        startDate.value = ranges.startDate
+        endDate.value = ranges.endDate
       }
     }
   }
-});
+})
 
 onMounted(() => {
   if (internalRange.value === null) {
     internalRange.value = props.ranges.find(
-      (r) => r.getLabel([dayjs(), dayjs()]) === "Previous 30 days",
-    )!;
+      (r) => r.getLabel([dayjs(), dayjs()]) === 'Previous 30 days',
+    )!
   }
 
-  const ranges = selectedRange.value.getDates(dayjs());
-  startDate.value = ranges.startDate;
-  endDate.value = ranges.endDate;
-  timeResolution.value = selectedRange.value.timeResolution;
-});
+  const ranges = selectedRange.value.getDates(dayjs())
+  startDate.value = ranges.startDate
+  endDate.value = ranges.endDate
+  timeResolution.value = selectedRange.value.timeResolution
+})
 
-const internalRange: Ref<RangeObject> = ref(null as unknown as RangeObject);
+const internalRange: Ref<RangeObject> = ref(null as unknown as RangeObject)
 
 const selectedRange = computed({
   get: () => {
-    return internalRange.value;
+    return internalRange.value
   },
   set: (newRange) => {
-    const ranges = newRange.getDates(dayjs());
-    startDate.value = ranges.startDate;
-    endDate.value = ranges.endDate;
-    timeResolution.value = newRange.timeResolution;
+    const ranges = newRange.getDates(dayjs())
+    startDate.value = ranges.startDate
+    endDate.value = ranges.endDate
+    timeResolution.value = newRange.timeResolution
 
-    internalRange.value = newRange;
+    internalRange.value = newRange
 
     if (import.meta.client) {
       localStorage.setItem(
-        "analyticsSelectedRange",
-        internalRange.value?.getLabel([dayjs(), dayjs()]) ?? "Previous 30 days",
-      );
+        'analyticsSelectedRange',
+        internalRange.value?.getLabel([dayjs(), dayjs()]) ?? 'Previous 30 days',
+      )
     }
   },
-});
+})
 
 const analytics = useFetchAllAnalytics(
   resetCharts,
@@ -475,53 +475,53 @@ const analytics = useFetchAllAnalytics(
   startDate,
   endDate,
   timeResolution,
-);
+)
 
 const formattedCategorySubtitle = computed(() => {
   return (
-    selectedRange.value?.getLabel([dayjs(startDate.value), dayjs(endDate.value)]) ?? "Loading..."
-  );
-});
+    selectedRange.value?.getLabel([dayjs(startDate.value), dayjs(endDate.value)]) ?? 'Loading...'
+  )
+})
 
 const selectedDataSet = computed(() => {
   switch (selectedChart.value) {
-    case "downloads":
-      return analytics.totalData.value.downloads;
-    case "views":
-      return analytics.totalData.value.views;
-    case "revenue":
-      return analytics.totalData.value.revenue;
+    case 'downloads':
+      return analytics.totalData.value.downloads
+    case 'views':
+      return analytics.totalData.value.views
+    case 'revenue':
+      return analytics.totalData.value.revenue
     default:
-      throw new Error(`Unknown chart ${selectedChart.value}`);
+      throw new Error(`Unknown chart ${selectedChart.value}`)
   }
-});
+})
 const selectedDataSetProjects = computed(() => {
   return selectedDataSet.value.projectIds
     .map((id) => props.projects?.find((p) => p?.id === id))
-    .filter(Boolean);
-});
+    .filter(Boolean)
+})
 
 const downloadSelectedSetAsCSV = () => {
-  const selectedChartName = selectedChart.value;
+  const selectedChartName = selectedChart.value
 
-  const csv = analyticsSetToCSVString(selectedDataSet.value);
+  const csv = analyticsSetToCSVString(selectedDataSet.value)
 
-  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
 
-  const link = document.createElement("a");
-  const url = URL.createObjectURL(blob);
-  link.setAttribute("href", url);
-  link.setAttribute("download", `${selectedChartName}-data.csv`);
-  link.style.visibility = "hidden";
-  document.body.appendChild(link);
+  const link = document.createElement('a')
+  const url = URL.createObjectURL(blob)
+  link.setAttribute('href', url)
+  link.setAttribute('download', `${selectedChartName}-data.csv`)
+  link.style.visibility = 'hidden'
+  document.body.appendChild(link)
 
-  link.click();
-};
+  link.click()
+}
 
-const onDownloadSetAsCSV = useClientTry(async () => await downloadSelectedSetAsCSV());
+const onDownloadSetAsCSV = useClientTry(async () => await downloadSelectedSetAsCSV())
 const onToggleColors = () => {
-  isUsingProjectColors.value = !isUsingProjectColors.value;
-};
+  isUsingProjectColors.value = !isUsingProjectColors.value
+}
 </script>
 
 <script lang="ts">
@@ -529,177 +529,177 @@ const onToggleColors = () => {
  * @deprecated Use `ranges` instead
  */
 const defaultResoloutions: Record<string, number> = {
-  "5 minutes": 5,
-  "30 minutes": 30,
-  "An hour": 60,
-  "12 hours": 720,
-  "A day": 1440,
-  "A week": 10080,
-};
+  '5 minutes': 5,
+  '30 minutes': 30,
+  'An hour': 60,
+  '12 hours': 720,
+  'A day': 1440,
+  'A week': 10080,
+}
 
-type DateRange = { startDate: dayjs.Dayjs; endDate: dayjs.Dayjs };
+type DateRange = { startDate: dayjs.Dayjs; endDate: dayjs.Dayjs }
 
 type RangeObject = {
-  getLabel: (dateRange: [dayjs.Dayjs, dayjs.Dayjs]) => string;
-  getDates: (currentDate: dayjs.Dayjs) => DateRange;
+  getLabel: (dateRange: [dayjs.Dayjs, dayjs.Dayjs]) => string
+  getDates: (currentDate: dayjs.Dayjs) => DateRange
   // A time resolution in minutes.
-  timeResolution: number;
-};
+  timeResolution: number
+}
 
 const defaultRanges: RangeObject[] = [
   {
-    getLabel: () => "Previous 30 minutes",
+    getLabel: () => 'Previous 30 minutes',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(30, "minute"),
+      startDate: dayjs(currentDate).subtract(30, 'minute'),
       endDate: currentDate,
     }),
     timeResolution: 1,
   },
   {
-    getLabel: () => "Previous hour",
+    getLabel: () => 'Previous hour',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(1, "hour"),
+      startDate: dayjs(currentDate).subtract(1, 'hour'),
       endDate: currentDate,
     }),
     timeResolution: 5,
   },
   {
-    getLabel: () => "Previous 12 hours",
+    getLabel: () => 'Previous 12 hours',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(12, "hour"),
+      startDate: dayjs(currentDate).subtract(12, 'hour'),
       endDate: currentDate,
     }),
     timeResolution: 12,
   },
   {
-    getLabel: () => "Previous 24 hours",
+    getLabel: () => 'Previous 24 hours',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(1, "day"),
+      startDate: dayjs(currentDate).subtract(1, 'day'),
       endDate: currentDate,
     }),
     timeResolution: 30,
   },
   {
-    getLabel: () => "Today",
+    getLabel: () => 'Today',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).startOf("day"),
+      startDate: dayjs(currentDate).startOf('day'),
       endDate: currentDate,
     }),
     timeResolution: 30,
   },
   {
-    getLabel: () => "Yesterday",
+    getLabel: () => 'Yesterday',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(1, "day").startOf("day"),
-      endDate: dayjs(currentDate).startOf("day").subtract(1, "second"),
+      startDate: dayjs(currentDate).subtract(1, 'day').startOf('day'),
+      endDate: dayjs(currentDate).startOf('day').subtract(1, 'second'),
     }),
     timeResolution: 30,
   },
   {
-    getLabel: () => "This week",
+    getLabel: () => 'This week',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).startOf("week").add(1, "hour"),
+      startDate: dayjs(currentDate).startOf('week').add(1, 'hour'),
       endDate: currentDate,
     }),
     timeResolution: 360,
   },
   {
-    getLabel: () => "Last week",
+    getLabel: () => 'Last week',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(1, "week").startOf("week").add(1, "hour"),
-      endDate: dayjs(currentDate).startOf("week").subtract(1, "second"),
+      startDate: dayjs(currentDate).subtract(1, 'week').startOf('week').add(1, 'hour'),
+      endDate: dayjs(currentDate).startOf('week').subtract(1, 'second'),
     }),
     timeResolution: 1440,
   },
   {
-    getLabel: () => "Previous 7 days",
+    getLabel: () => 'Previous 7 days',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).startOf("day").subtract(7, "day").add(1, "hour"),
-      endDate: currentDate.startOf("day"),
+      startDate: dayjs(currentDate).startOf('day').subtract(7, 'day').add(1, 'hour'),
+      endDate: currentDate.startOf('day'),
     }),
     timeResolution: 720,
   },
   {
-    getLabel: () => "This month",
+    getLabel: () => 'This month',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).startOf("month").add(1, "hour"),
+      startDate: dayjs(currentDate).startOf('month').add(1, 'hour'),
       endDate: currentDate,
     }),
     timeResolution: 1440,
   },
   {
-    getLabel: () => "Last month",
+    getLabel: () => 'Last month',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(1, "month").startOf("month").add(1, "hour"),
-      endDate: dayjs(currentDate).startOf("month").subtract(1, "second"),
+      startDate: dayjs(currentDate).subtract(1, 'month').startOf('month').add(1, 'hour'),
+      endDate: dayjs(currentDate).startOf('month').subtract(1, 'second'),
     }),
     timeResolution: 1440,
   },
   {
-    getLabel: () => "Previous 30 days",
+    getLabel: () => 'Previous 30 days',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).startOf("day").subtract(30, "day").add(1, "hour"),
-      endDate: currentDate.startOf("day"),
+      startDate: dayjs(currentDate).startOf('day').subtract(30, 'day').add(1, 'hour'),
+      endDate: currentDate.startOf('day'),
     }),
     timeResolution: 1440,
   },
   {
-    getLabel: () => "This quarter",
+    getLabel: () => 'This quarter',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).startOf("quarter").add(1, "hour"),
+      startDate: dayjs(currentDate).startOf('quarter').add(1, 'hour'),
       endDate: currentDate,
     }),
     timeResolution: 1440,
   },
   {
-    getLabel: () => "Last quarter",
+    getLabel: () => 'Last quarter',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(1, "quarter").startOf("quarter").add(1, "hour"),
-      endDate: dayjs(currentDate).startOf("quarter").subtract(1, "second"),
+      startDate: dayjs(currentDate).subtract(1, 'quarter').startOf('quarter').add(1, 'hour'),
+      endDate: dayjs(currentDate).startOf('quarter').subtract(1, 'second'),
     }),
     timeResolution: 1440,
   },
   {
-    getLabel: () => "This year",
+    getLabel: () => 'This year',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).startOf("year"),
+      startDate: dayjs(currentDate).startOf('year'),
       endDate: currentDate,
     }),
     timeResolution: 20160,
   },
   {
-    getLabel: () => "Last year",
+    getLabel: () => 'Last year',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(1, "year").startOf("year"),
-      endDate: dayjs(currentDate).startOf("year").subtract(1, "second"),
+      startDate: dayjs(currentDate).subtract(1, 'year').startOf('year'),
+      endDate: dayjs(currentDate).startOf('year').subtract(1, 'second'),
     }),
     timeResolution: 20160,
   },
   {
-    getLabel: () => "Previous year",
+    getLabel: () => 'Previous year',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(1, "year"),
+      startDate: dayjs(currentDate).subtract(1, 'year'),
       endDate: dayjs(currentDate),
     }),
     timeResolution: 40320,
   },
   {
-    getLabel: () => "Previous two years",
+    getLabel: () => 'Previous two years',
     getDates: (currentDate: dayjs.Dayjs) => ({
-      startDate: dayjs(currentDate).subtract(2, "year"),
+      startDate: dayjs(currentDate).subtract(2, 'year'),
       endDate: currentDate,
     }),
     timeResolution: 40320,
   },
   {
-    getLabel: () => "All Time",
+    getLabel: () => 'All Time',
     getDates: (currentDate: dayjs.Dayjs) => ({
       startDate: dayjs(0),
       endDate: currentDate,
     }),
     timeResolution: 40320,
   },
-];
+]
 </script>
 
 <style scoped lang="scss">
@@ -885,7 +885,7 @@ const defaultRanges: RangeObject[] = [
 
 .country-value {
   display: grid;
-  grid-template-areas: "flag text bar";
+  grid-template-areas: 'flag text bar';
   grid-template-columns: auto 1fr 10rem;
   align-items: center;
   justify-content: space-between;
diff --git a/apps/frontend/src/components/ui/charts/CompactChart.client.vue b/apps/frontend/src/components/ui/charts/CompactChart.client.vue
index 17d884434..22a072b99 100644
--- a/apps/frontend/src/components/ui/charts/CompactChart.client.vue
+++ b/apps/frontend/src/components/ui/charts/CompactChart.client.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Card } from "@modrinth/ui";
-import VueApexCharts from "vue3-apexcharts";
+import { Card } from '@modrinth/ui'
+import VueApexCharts from 'vue3-apexcharts'
 
 // let VueApexCharts
 // if (import.meta.client) {
@@ -10,11 +10,11 @@ import VueApexCharts from "vue3-apexcharts";
 const props = defineProps({
   value: {
     type: String,
-    default: "",
+    default: '',
   },
   title: {
     type: String,
-    default: "",
+    default: '',
   },
   data: {
     type: Array,
@@ -26,11 +26,11 @@ const props = defineProps({
   },
   prefix: {
     type: String,
-    default: "",
+    default: '',
   },
   suffix: {
     type: String,
-    default: "",
+    default: '',
   },
   isMoney: {
     type: Boolean,
@@ -38,17 +38,17 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: "var(--color-brand)",
+    default: 'var(--color-brand)',
   },
-});
+})
 
 // no grid lines, no toolbar, no legend, no data labels
 const chartOptions = {
   chart: {
     id: props.title,
     fontFamily:
-      "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
-    foreColor: "var(--color-base)",
+      'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+    foreColor: 'var(--color-base)',
     toolbar: {
       show: false,
     },
@@ -61,16 +61,16 @@ const chartOptions = {
     parentHeightOffset: 0,
   },
   stroke: {
-    curve: "smooth",
+    curve: 'smooth',
     width: 2,
   },
   fill: {
     colors: [props.color],
-    type: "gradient",
+    type: 'gradient',
     opacity: 1,
     gradient: {
-      shade: "light",
-      type: "vertical",
+      shade: 'light',
+      type: 'vertical',
       shadeIntensity: 0,
       gradientToColors: [props.color],
       inverseColors: true,
@@ -91,7 +91,7 @@ const chartOptions = {
     enabled: false,
   },
   xaxis: {
-    type: "datetime",
+    type: 'datetime',
     categories: props.labels,
     labels: {
       show: false,
@@ -120,23 +120,23 @@ const chartOptions = {
   tooltip: {
     enabled: false,
   },
-};
+}
 
-const chart = ref(null);
+const chart = ref(null)
 
 const resetChart = () => {
-  chart.value?.updateSeries([...props.data]);
+  chart.value?.updateSeries([...props.data])
   chart.value?.updateOptions({
     xaxis: {
       categories: props.labels,
     },
-  });
-  chart.value?.resetSeries();
-};
+  })
+  chart.value?.resetSeries()
+}
 
 defineExpose({
   resetChart,
-});
+})
 </script>
 
 <template>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue
index 795d2e645..0700d1761 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationDelphiReportCard.vue
@@ -47,7 +47,7 @@
                 <span class="max-w-[200px] truncate font-mono text-xs sm:max-w-none">
                   {{
                     report.version.files.find((file) => file.primary)?.filename ||
-                    "Unknown primary file"
+                    'Unknown primary file'
                   }}
                 </span>
               </div>
@@ -124,56 +124,56 @@ import {
   EyeIcon,
   LinkIcon,
   OrganizationIcon,
-} from "@modrinth/assets";
-import type { ExtendedDelphiReport } from "@modrinth/moderation";
+} from '@modrinth/assets'
+import type { ExtendedDelphiReport } from '@modrinth/moderation'
 import {
   Avatar,
   ButtonStyled,
   OverflowMenu,
   type OverflowMenuOption,
   useRelativeTime,
-} from "@modrinth/ui";
-import dayjs from "dayjs";
+} from '@modrinth/ui'
+import dayjs from 'dayjs'
 
 const props = defineProps<{
-  report: ExtendedDelphiReport;
-}>();
+  report: ExtendedDelphiReport
+}>()
 
-const formatRelativeTime = useRelativeTime();
-const isPending = computed(() => props.report.status === "pending");
+const formatRelativeTime = useRelativeTime()
+const isPending = computed(() => props.report.status === 'pending')
 
 const quickActions: OverflowMenuOption[] = [
   {
-    id: "copy-link",
+    id: 'copy-link',
     action: () => {
-      const base = window.location.origin;
-      const reviewUrl = `${base}/moderation/tech-reviews?q=${props.report.version.id}`;
+      const base = window.location.origin
+      const reviewUrl = `${base}/moderation/tech-reviews?q=${props.report.version.id}`
       navigator.clipboard.writeText(reviewUrl).then(() => {
         addNotification({
-          type: "success",
-          title: "Tech review link copied",
-          text: "The link to this tech review has been copied to your clipboard.",
-        });
-      });
+          type: 'success',
+          title: 'Tech review link copied',
+          text: 'The link to this tech review has been copied to your clipboard.',
+        })
+      })
     },
   },
   {
-    id: "copy-id",
+    id: 'copy-id',
     action: () => {
       navigator.clipboard.writeText(props.report.version.id).then(() => {
         addNotification({
-          type: "success",
-          title: "Version ID copied",
-          text: "The ID of this version has been copied to your clipboard.",
-        });
-      });
+          type: 'success',
+          title: 'Version ID copied',
+          text: 'The ID of this version has been copied to your clipboard.',
+        })
+      })
     },
   },
-];
+]
 
 const versionUrl = computed(() => {
-  return `/${props.report.project.project_type}/${props.report.project.slug}/versions/${props.report.version.id}`;
-});
+  return `/${props.report.project.project_type}/${props.report.project.slug}/versions/${props.report.version.id}`
+})
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ChecklistKeybindsModal.vue b/apps/frontend/src/components/ui/moderation/checklist/ChecklistKeybindsModal.vue
index 53e491df9..f2cc18807 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ChecklistKeybindsModal.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ChecklistKeybindsModal.vue
@@ -29,56 +29,56 @@
 </template>
 
 <script setup lang="ts">
-import { type KeybindListener, keybinds, normalizeKeybind } from "@modrinth/moderation";
-import NewModal from "@modrinth/ui/src/components/modal/NewModal.vue";
-import { ref } from "vue";
+import { type KeybindListener, keybinds, normalizeKeybind } from '@modrinth/moderation'
+import NewModal from '@modrinth/ui/src/components/modal/NewModal.vue'
+import { ref } from 'vue'
 
-const modal = ref<InstanceType<typeof NewModal>>();
+const modal = ref<InstanceType<typeof NewModal>>()
 
-function parseKeybindDisplay(keybind: KeybindListener["keybind"]): string[] {
-  const keybinds = Array.isArray(keybind) ? keybind : [keybind];
-  const normalized = keybinds[0];
-  const def = normalizeKeybind(normalized);
+function parseKeybindDisplay(keybind: KeybindListener['keybind']): string[] {
+  const keybinds = Array.isArray(keybind) ? keybind : [keybind]
+  const normalized = keybinds[0]
+  const def = normalizeKeybind(normalized)
 
-  const keys = [];
+  const keys = []
 
   if (def.ctrl || def.meta) {
-    keys.push(isMac() ? "CMD" : "CTRL");
+    keys.push(isMac() ? 'CMD' : 'CTRL')
   }
-  if (def.shift) keys.push("SHIFT");
-  if (def.alt) keys.push("ALT");
+  if (def.shift) keys.push('SHIFT')
+  if (def.alt) keys.push('ALT')
 
   const mainKey = def.key
-    .replace("ArrowLeft", "←")
-    .replace("ArrowRight", "→")
-    .replace("ArrowUp", "↑")
-    .replace("ArrowDown", "↓")
-    .replace("Enter", "↵")
-    .replace("Space", "SPACE")
-    .replace("Escape", "ESC")
-    .toUpperCase();
+    .replace('ArrowLeft', '←')
+    .replace('ArrowRight', '→')
+    .replace('ArrowUp', '↑')
+    .replace('ArrowDown', '↓')
+    .replace('Enter', '↵')
+    .replace('Space', 'SPACE')
+    .replace('Escape', 'ESC')
+    .toUpperCase()
 
-  keys.push(mainKey);
+  keys.push(mainKey)
 
-  return keys;
+  return keys
 }
 
 function isMac() {
-  return navigator.platform.toUpperCase().includes("MAC");
+  return navigator.platform.toUpperCase().includes('MAC')
 }
 
 function show(event?: MouseEvent) {
-  modal.value?.show(event);
+  modal.value?.show(event)
 }
 
 function hide() {
-  modal.value?.hide();
+  modal.value?.hide()
 }
 
 defineExpose({
   show,
   hide,
-});
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index 53710669f..9b6a0be9c 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -326,9 +326,14 @@ import {
   XIcon,
 } from '@modrinth/assets'
 import {
+  type Action,
+  type ButtonAction,
   checklist,
+  type ConditionalButtonAction,
   deserializeActionStates,
+  type DropdownAction,
   expandVariables,
+  finalPermissionMessages,
   findMatchingVariant,
   flattenProjectVariables,
   getActionIdForStage,
@@ -338,16 +343,9 @@ import {
   initializeActionState,
   kebabToTitleCase,
   keybinds,
+  type MultiSelectChipsAction,
   processMessage,
   serializeActionStates,
-} from '@modrinth/moderation'
-import {
-  type Action,
-  type ButtonAction,
-  type ConditionalButtonAction,
-  type DropdownAction,
-  finalPermissionMessages,
-  type MultiSelectChipsAction,
   type Stage,
   type ToggleAction,
 } from '@modrinth/moderation'
@@ -363,8 +361,8 @@ import {
 import {
   type ModerationJudgements,
   type ModerationModpackItem,
-  type ProjectStatus,
   type Project,
+  type ProjectStatus,
   renderHighlightedString,
 } from '@modrinth/utils'
 import { computedAsync, useLocalStorage } from '@vueuse/core'
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue b/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
index 3787db552..864eb5caa 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
@@ -137,7 +137,7 @@
       <ButtonStyled v-if="modPackData && currentIndex < modPackData.length" color="blue">
         <button :disabled="!canGoNext" @click="goToNext">
           <RightArrowIcon aria-hidden="true" />
-          {{ currentIndex + 1 >= modPackData.length ? "Complete" : "Next" }}
+          {{ currentIndex + 1 >= modPackData.length ? 'Complete' : 'Next' }}
         </button>
       </ButtonStyled>
     </div>
@@ -145,8 +145,8 @@
 </template>
 
 <script setup lang="ts">
-import { LeftArrowIcon, RightArrowIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
 import type {
   ModerationFlameModpackItem,
   ModerationJudgements,
@@ -155,19 +155,19 @@ import type {
   ModerationModpackResponse,
   ModerationPermissionType,
   ModerationUnknownModpackItem,
-} from "@modrinth/utils";
-import { useLocalStorage, useSessionStorage } from "@vueuse/core";
-import { computed, onMounted,ref, watch } from "vue";
+} from '@modrinth/utils'
+import { useLocalStorage, useSessionStorage } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
-  projectId: string;
-  modelValue?: ModerationJudgements;
-}>();
+  projectId: string
+  modelValue?: ModerationJudgements
+}>()
 
 const emit = defineEmits<{
-  complete: [];
-  "update:modelValue": [judgements: ModerationJudgements];
-}>();
+  complete: []
+  'update:modelValue': [judgements: ModerationJudgements]
+}>()
 
 const persistedModPackData = useLocalStorage<ModerationModpackItem[] | null>(
   `modpack-permissions-${props.projectId}`,
@@ -178,9 +178,9 @@ const persistedModPackData = useLocalStorage<ModerationModpackItem[] | null>(
       write: (v: any) => JSON.stringify(v),
     },
   },
-);
+)
 
-const persistedIndex = useLocalStorage<number>(`modpack-permissions-index-${props.projectId}`, 0);
+const persistedIndex = useLocalStorage<number>(`modpack-permissions-index-${props.projectId}`, 0)
 
 const modPackData = useSessionStorage<ModerationModpackItem[] | null>(
   `modpack-permissions-data-${props.projectId}`,
@@ -191,7 +191,7 @@ const modPackData = useSessionStorage<ModerationModpackItem[] | null>(
       write: (v: any) => JSON.stringify(v),
     },
   },
-);
+)
 const permanentNoFiles = useSessionStorage<ModerationModpackItem[]>(
   `modpack-permissions-permanent-no-${props.projectId}`,
   [],
@@ -201,110 +201,110 @@ const permanentNoFiles = useSessionStorage<ModerationModpackItem[]>(
       write: (v: any) => JSON.stringify(v),
     },
   },
-);
-const currentIndex = ref(0);
+)
+const currentIndex = ref(0)
 
 const fileApprovalTypes: ModerationModpackPermissionApprovalType[] = [
   {
-    id: "yes",
-    name: "Yes",
+    id: 'yes',
+    name: 'Yes',
   },
   {
-    id: "with-attribution-and-source",
-    name: "With attribution and source",
+    id: 'with-attribution-and-source',
+    name: 'With attribution and source',
   },
   {
-    id: "with-attribution",
-    name: "With attribution",
+    id: 'with-attribution',
+    name: 'With attribution',
   },
   {
-    id: "no",
-    name: "No",
+    id: 'no',
+    name: 'No',
   },
   {
-    id: "permanent-no",
-    name: "Permanent no",
+    id: 'permanent-no',
+    name: 'Permanent no',
   },
   {
-    id: "unidentified",
-    name: "Unidentified",
+    id: 'unidentified',
+    name: 'Unidentified',
   },
-];
+]
 
 const filePermissionTypes: ModerationPermissionType[] = [
-  { id: "yes", name: "Yes" },
-  { id: "no", name: "No" },
-];
+  { id: 'yes', name: 'Yes' },
+  { id: 'no', name: 'No' },
+]
 
 function persistAll() {
-  persistedModPackData.value = modPackData.value;
-  persistedIndex.value = currentIndex.value;
+  persistedModPackData.value = modPackData.value
+  persistedIndex.value = currentIndex.value
 }
 
 watch(
   modPackData,
   (newValue) => {
-    persistedModPackData.value = newValue;
+    persistedModPackData.value = newValue
   },
   { deep: true },
-);
+)
 
 watch(currentIndex, (newValue) => {
-  persistedIndex.value = newValue;
-});
+  persistedIndex.value = newValue
+})
 
 function loadPersistedData(): void {
   if (persistedModPackData.value) {
-    modPackData.value = persistedModPackData.value;
+    modPackData.value = persistedModPackData.value
   }
-  currentIndex.value = persistedIndex.value;
+  currentIndex.value = persistedIndex.value
 }
 
 function clearPersistedData(): void {
-  persistedModPackData.value = null;
-  persistedIndex.value = 0;
+  persistedModPackData.value = null
+  persistedIndex.value = 0
 }
 
 async function fetchModPackData(): Promise<void> {
   try {
     const data = (await useBaseFetch(`moderation/project/${props.projectId}`, {
       internal: true,
-    })) as ModerationModpackResponse;
+    })) as ModerationModpackResponse
 
     const permanentNoItems: ModerationModpackItem[] = Object.entries(data.identified || {})
-      .filter(([_, file]) => file.status === "permanent-no")
+      .filter(([_, file]) => file.status === 'permanent-no')
       .map(
         ([sha1, file]): ModerationModpackItem => ({
           sha1,
           file_name: file.file_name,
-          type: "identified",
+          type: 'identified',
           status: file.status,
           approved: null,
         }),
       )
-      .sort((a, b) => a.file_name.localeCompare(b.file_name));
+      .sort((a, b) => a.file_name.localeCompare(b.file_name))
 
-    permanentNoFiles.value = permanentNoItems;
+    permanentNoFiles.value = permanentNoItems
 
     const sortedData: ModerationModpackItem[] = [
       ...Object.entries(data.identified || {})
         .filter(
           ([_, file]) =>
-            file.status !== "yes" &&
-            file.status !== "with-attribution-and-source" &&
-            file.status !== "permanent-no",
+            file.status !== 'yes' &&
+            file.status !== 'with-attribution-and-source' &&
+            file.status !== 'permanent-no',
         )
         .map(
           ([sha1, file]): ModerationModpackItem => ({
             sha1,
             file_name: file.file_name,
-            type: "identified",
+            type: 'identified',
             status: file.status,
             approved: null,
-            ...(file.status === "unidentified" && {
-              proof: "",
-              url: "",
-              title: "",
+            ...(file.status === 'unidentified' && {
+              proof: '',
+              url: '',
+              title: '',
             }),
           }),
         )
@@ -314,12 +314,12 @@ async function fetchModPackData(): Promise<void> {
           ([sha1, fileName]): ModerationUnknownModpackItem => ({
             sha1,
             file_name: fileName,
-            type: "unknown",
+            type: 'unknown',
             status: null,
             approved: null,
-            proof: "",
-            url: "",
-            title: "",
+            proof: '',
+            url: '',
+            title: '',
           }),
         )
         .sort((a, b) => a.file_name.localeCompare(b.file_name)),
@@ -328,7 +328,7 @@ async function fetchModPackData(): Promise<void> {
           ([sha1, info]): ModerationFlameModpackItem => ({
             sha1,
             file_name: info.file_name,
-            type: "flame",
+            type: 'flame',
             status: null,
             approved: null,
             id: info.id,
@@ -337,166 +337,166 @@ async function fetchModPackData(): Promise<void> {
           }),
         )
         .sort((a, b) => a.file_name.localeCompare(b.file_name)),
-    ];
+    ]
 
     if (modPackData.value) {
-      const existingMap = new Map(modPackData.value.map((item) => [item.sha1, item]));
+      const existingMap = new Map(modPackData.value.map((item) => [item.sha1, item]))
 
       sortedData.forEach((item) => {
-        const existing = existingMap.get(item.sha1);
+        const existing = existingMap.get(item.sha1)
         if (existing) {
           Object.assign(item, {
             status: existing.status,
             approved: existing.approved,
-            ...(item.type === "unknown" && {
-              proof: (existing as ModerationUnknownModpackItem).proof || "",
-              url: (existing as ModerationUnknownModpackItem).url || "",
-              title: (existing as ModerationUnknownModpackItem).title || "",
+            ...(item.type === 'unknown' && {
+              proof: (existing as ModerationUnknownModpackItem).proof || '',
+              url: (existing as ModerationUnknownModpackItem).url || '',
+              title: (existing as ModerationUnknownModpackItem).title || '',
             }),
-            ...(item.type === "flame" && {
+            ...(item.type === 'flame' && {
               url: (existing as ModerationFlameModpackItem).url || item.url,
               title: (existing as ModerationFlameModpackItem).title || item.title,
             }),
-          });
+          })
         }
-      });
+      })
     }
 
-    modPackData.value = sortedData;
-    persistAll();
+    modPackData.value = sortedData
+    persistAll()
   } catch (error) {
-    console.error("Failed to fetch modpack data:", error);
-    modPackData.value = [];
-    permanentNoFiles.value = [];
-    persistAll();
+    console.error('Failed to fetch modpack data:', error)
+    modPackData.value = []
+    permanentNoFiles.value = []
+    persistAll()
   }
 }
 
 function goToPrevious(): void {
   if (currentIndex.value > 0) {
-    currentIndex.value--;
-    persistAll();
+    currentIndex.value--
+    persistAll()
   }
 }
 
 watch(
   modPackData,
   (newValue) => {
-    persistedModPackData.value = newValue;
+    persistedModPackData.value = newValue
   },
   { deep: true },
-);
+)
 
 function goToNext(): void {
   if (modPackData.value && currentIndex.value < modPackData.value.length) {
-    currentIndex.value++;
+    currentIndex.value++
 
     if (currentIndex.value >= modPackData.value.length) {
-      const judgements = getJudgements();
-      emit("update:modelValue", judgements);
-      emit("complete");
-      clearPersistedData();
+      const judgements = getJudgements()
+      emit('update:modelValue', judgements)
+      emit('complete')
+      clearPersistedData()
     } else {
-      persistAll();
+      persistAll()
     }
   }
 }
 
-function setStatus(index: number, status: ModerationModpackPermissionApprovalType["id"]): void {
+function setStatus(index: number, status: ModerationModpackPermissionApprovalType['id']): void {
   if (modPackData.value && modPackData.value[index]) {
-    modPackData.value[index].status = status;
-    modPackData.value[index].approved = null;
-    persistAll();
-    emit("update:modelValue", getJudgements());
+    modPackData.value[index].status = status
+    modPackData.value[index].approved = null
+    persistAll()
+    emit('update:modelValue', getJudgements())
   }
 }
 
-function setApproval(index: number, approved: ModerationPermissionType["id"]): void {
+function setApproval(index: number, approved: ModerationPermissionType['id']): void {
   if (modPackData.value && modPackData.value[index]) {
-    modPackData.value[index].approved = approved;
-    persistAll();
-    emit("update:modelValue", getJudgements());
+    modPackData.value[index].approved = approved
+    persistAll()
+    emit('update:modelValue', getJudgements())
   }
 }
 
 const canGoNext = computed(() => {
-  if (!modPackData.value || !modPackData.value[currentIndex.value]) return false;
-  const current = modPackData.value[currentIndex.value];
-  return current.status !== null;
-});
+  if (!modPackData.value || !modPackData.value[currentIndex.value]) return false
+  const current = modPackData.value[currentIndex.value]
+  return current.status !== null
+})
 
 function getJudgements(): ModerationJudgements {
-  if (!modPackData.value) return {};
+  if (!modPackData.value) return {}
 
-  const judgements: ModerationJudgements = {};
+  const judgements: ModerationJudgements = {}
 
   modPackData.value.forEach((item) => {
-    if (item.type === "flame") {
+    if (item.type === 'flame') {
       judgements[item.sha1] = {
-        type: "flame",
+        type: 'flame',
         id: item.id,
         status: item.status,
         link: item.url,
         title: item.title,
         file_name: item.file_name,
-      };
-    } else if (item.type === "unknown") {
+      }
+    } else if (item.type === 'unknown') {
       judgements[item.sha1] = {
-        type: "unknown",
+        type: 'unknown',
         status: item.status,
         proof: item.proof,
         link: item.url,
         title: item.title,
         file_name: item.file_name,
-      };
+      }
     }
-  });
+  })
 
-  return judgements;
+  return judgements
 }
 
 onMounted(() => {
-  loadPersistedData();
+  loadPersistedData()
   if (!modPackData.value) {
-    fetchModPackData();
+    fetchModPackData()
   }
-});
+})
 
 watch(
   modPackData,
   (newValue) => {
     if (newValue && newValue.length === 0) {
-      emit("complete");
-      clearPersistedData();
+      emit('complete')
+      clearPersistedData()
     }
   },
   { immediate: true },
-);
+)
 
 watch(
   () => props.projectId,
   () => {
-    clearPersistedData();
-    loadPersistedData();
+    clearPersistedData()
+    loadPersistedData()
     if (!modPackData.value) {
-      fetchModPackData();
+      fetchModPackData()
     }
   },
-);
+)
 
 function getModpackFiles(): {
-  interactive: ModerationModpackItem[];
-  permanentNo: ModerationModpackItem[];
+  interactive: ModerationModpackItem[]
+  permanentNo: ModerationModpackItem[]
 } {
   return {
     interactive: modPackData.value || [],
     permanentNo: permanentNoFiles.value,
-  };
+  }
 }
 
 defineExpose({
   getModpackFiles,
-});
+})
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/modrinth-loading-indicator.ts b/apps/frontend/src/components/ui/modrinth-loading-indicator.ts
index 4120f7f64..d848d0536 100644
--- a/apps/frontend/src/components/ui/modrinth-loading-indicator.ts
+++ b/apps/frontend/src/components/ui/modrinth-loading-indicator.ts
@@ -1,9 +1,9 @@
-import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
+import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'
 
-import { startLoading, stopLoading, useNuxtApp } from "#imports";
+import { startLoading, stopLoading, useNuxtApp } from '#imports'
 
 export default defineComponent({
-  name: "ModrinthLoadingIndicator",
+  name: 'ModrinthLoadingIndicator',
   props: {
     throttle: {
       type: Number,
@@ -20,115 +20,115 @@ export default defineComponent({
     color: {
       type: [String, Boolean],
       default:
-        "repeating-linear-gradient(to right, var(--color-green) 0%, var(--landing-green-label) 100%)",
+        'repeating-linear-gradient(to right, var(--color-green) 0%, var(--landing-green-label) 100%)',
     },
   },
   setup(props, { slots }) {
     const indicator = useLoadingIndicator({
       duration: props.duration,
       throttle: props.throttle,
-    });
+    })
 
-    const nuxtApp = useNuxtApp();
-    nuxtApp.hook("page:start", () => {
-      startLoading();
-      indicator.start();
-    });
-    nuxtApp.hook("page:finish", () => {
-      stopLoading();
-      indicator.finish();
-    });
-    onBeforeUnmount(() => indicator.clear);
+    const nuxtApp = useNuxtApp()
+    nuxtApp.hook('page:start', () => {
+      startLoading()
+      indicator.start()
+    })
+    nuxtApp.hook('page:finish', () => {
+      stopLoading()
+      indicator.finish()
+    })
+    onBeforeUnmount(() => indicator.clear)
 
-    const loading = useLoading();
+    const loading = useLoading()
 
     watch(loading, (newValue) => {
       if (newValue) {
-        indicator.start();
+        indicator.start()
       } else {
-        indicator.finish();
+        indicator.finish()
       }
-    });
+    })
 
     return () =>
       h(
-        "div",
+        'div',
         {
-          class: "nuxt-loading-indicator",
+          class: 'nuxt-loading-indicator',
           style: {
-            position: "fixed",
+            position: 'fixed',
             top: 0,
             right: 0,
             left: 0,
-            pointerEvents: "none",
+            pointerEvents: 'none',
             width: `${indicator.progress.value}%`,
             height: `${props.height}px`,
             opacity: indicator.isLoading.value ? 1 : 0,
             background: props.color || undefined,
             backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
-            transition: "width 0.1s, height 0.4s, opacity 0.4s",
+            transition: 'width 0.1s, height 0.4s, opacity 0.4s',
             zIndex: 999999,
           },
         },
         slots,
-      );
+      )
   },
-});
+})
 
 function useLoadingIndicator(opts: { duration: number; throttle: number }) {
-  const progress = ref(0);
-  const isLoading = ref(false);
-  const step = computed(() => 10000 / opts.duration);
+  const progress = ref(0)
+  const isLoading = ref(false)
+  const step = computed(() => 10000 / opts.duration)
 
-  let _timer: any = null;
-  let _throttle: any = null;
+  let _timer: any = null
+  let _throttle: any = null
 
   function start() {
-    clear();
-    progress.value = 0;
+    clear()
+    progress.value = 0
     if (opts.throttle && import.meta.client) {
       _throttle = setTimeout(() => {
-        isLoading.value = true;
-        _startTimer();
-      }, opts.throttle);
+        isLoading.value = true
+        _startTimer()
+      }, opts.throttle)
     } else {
-      isLoading.value = true;
-      _startTimer();
+      isLoading.value = true
+      _startTimer()
     }
   }
   function finish() {
-    progress.value = 100;
-    _hide();
+    progress.value = 100
+    _hide()
   }
 
   function clear() {
-    clearInterval(_timer);
-    clearTimeout(_throttle);
-    _timer = null;
-    _throttle = null;
+    clearInterval(_timer)
+    clearTimeout(_throttle)
+    _timer = null
+    _throttle = null
   }
 
   function _increase(num: number) {
-    progress.value = Math.min(100, progress.value + num);
+    progress.value = Math.min(100, progress.value + num)
   }
 
   function _hide() {
-    clear();
+    clear()
     if (import.meta.client) {
       setTimeout(() => {
-        isLoading.value = false;
+        isLoading.value = false
         setTimeout(() => {
-          progress.value = 0;
-        }, 400);
-      }, 500);
+          progress.value = 0
+        }, 400)
+      }, 500)
     }
   }
 
   function _startTimer() {
     if (import.meta.client) {
       _timer = setInterval(() => {
-        _increase(step.value);
-      }, 100);
+        _increase(step.value)
+      }, 100)
     }
   }
 
@@ -138,5 +138,5 @@ function useLoadingIndicator(opts: { duration: number; throttle: number }) {
     start,
     finish,
     clear,
-  };
+  }
 }
diff --git a/apps/frontend/src/components/ui/news/LatestNewsRow.vue b/apps/frontend/src/components/ui/news/LatestNewsRow.vue
index 957e701f0..d0d5cc8e0 100644
--- a/apps/frontend/src/components/ui/news/LatestNewsRow.vue
+++ b/apps/frontend/src/components/ui/news/LatestNewsRow.vue
@@ -25,10 +25,10 @@
 </template>
 
 <script setup lang="ts">
-import { NewspaperIcon } from "@modrinth/assets";
-import { articles as rawArticles } from "@modrinth/blog";
-import { ButtonStyled, NewsArticleCard } from "@modrinth/ui";
-import { computed,ref } from "vue";
+import { NewspaperIcon } from '@modrinth/assets'
+import { articles as rawArticles } from '@modrinth/blog'
+import { ButtonStyled, NewsArticleCard } from '@modrinth/ui'
+import { computed, ref } from 'vue'
 
 const articles = ref(
   rawArticles
@@ -43,7 +43,7 @@ const articles = ref(
       date: article.date,
     }))
     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
-);
+)
 
-const latestArticles = computed(() => articles.value.slice(0, 3));
+const latestArticles = computed(() => articles.value.slice(0, 3))
 </script>
diff --git a/apps/frontend/src/components/ui/report/ReportInfo.vue b/apps/frontend/src/components/ui/report/ReportInfo.vue
index 567f7b5c6..e3f22d959 100644
--- a/apps/frontend/src/components/ui/report/ReportInfo.vue
+++ b/apps/frontend/src/components/ui/report/ReportInfo.vue
@@ -103,15 +103,15 @@
 </template>
 
 <script setup>
-import { ReportIcon, UnknownIcon, VersionIcon } from "@modrinth/assets";
-import { Avatar, Badge, CopyCode, useRelativeTime } from "@modrinth/ui";
-import { formatProjectType } from "@modrinth/utils";
+import { ReportIcon, UnknownIcon, VersionIcon } from '@modrinth/assets'
+import { Avatar, Badge, CopyCode, useRelativeTime } from '@modrinth/ui'
+import { formatProjectType } from '@modrinth/utils'
 
-import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
-import { renderHighlightedString } from "~/helpers/highlight.js";
-import { getProjectTypeForUrl } from "~/helpers/projects.js";
+import ThreadSummary from '~/components/ui/thread/ThreadSummary.vue'
+import { renderHighlightedString } from '~/helpers/highlight.js'
+import { getProjectTypeForUrl } from '~/helpers/projects.js'
 
-const formatRelativeTime = useRelativeTime();
+const formatRelativeTime = useRelativeTime()
 
 defineProps({
   report: {
@@ -138,9 +138,9 @@ defineProps({
     type: Object,
     required: true,
   },
-});
+})
 
-const flags = useFeatureFlags();
+const flags = useFeatureFlags()
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/report/ReportView.vue b/apps/frontend/src/components/ui/report/ReportView.vue
index a396411a4..0c19d3157 100644
--- a/apps/frontend/src/components/ui/report/ReportView.vue
+++ b/apps/frontend/src/components/ui/report/ReportView.vue
@@ -21,10 +21,10 @@
   </div>
 </template>
 <script setup>
-import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import ReportInfo from "~/components/ui/report/ReportInfo.vue";
-import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
-import { addReportMessage } from "~/helpers/threads.js";
+import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
+import ReportInfo from '~/components/ui/report/ReportInfo.vue'
+import ConversationThread from '~/components/ui/thread/ConversationThread.vue'
+import { addReportMessage } from '~/helpers/threads.js'
 
 const props = defineProps({
   reportId: {
@@ -39,76 +39,76 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-});
+})
 
-const report = ref(null);
+const report = ref(null)
 
 await fetchReport().then((result) => {
-  report.value = result;
-});
+  report.value = result
+})
 
 const { data: rawThread } = await useAsyncData(`thread/${report.value.thread_id}`, () =>
   useBaseFetch(`thread/${report.value.thread_id}`),
-);
-const thread = computed(() => addReportMessage(rawThread.value, report.value));
+)
+const thread = computed(() => addReportMessage(rawThread.value, report.value))
 
 async function updateThread(newThread) {
-  rawThread.value = newThread;
-  report.value = await fetchReport();
+  rawThread.value = newThread
+  report.value = await fetchReport()
 }
 
 async function fetchReport() {
   const { data: rawReport } = await useAsyncData(`report/${props.reportId}`, () =>
     useBaseFetch(`report/${props.reportId}`),
-  );
-  rawReport.value.item_id = rawReport.value.item_id.replace(/"/g, "");
+  )
+  rawReport.value.item_id = rawReport.value.item_id.replace(/"/g, '')
 
-  const userIds = [];
-  userIds.push(rawReport.value.reporter);
-  if (rawReport.value.item_type === "user") {
-    userIds.push(rawReport.value.item_id);
+  const userIds = []
+  userIds.push(rawReport.value.reporter)
+  if (rawReport.value.item_type === 'user') {
+    userIds.push(rawReport.value.item_id)
   }
 
-  const versionId = rawReport.value.item_type === "version" ? rawReport.value.item_id : null;
+  const versionId = rawReport.value.item_type === 'version' ? rawReport.value.item_id : null
 
-  let users = [];
+  let users = []
   if (userIds.length > 0) {
     const { data: usersVal } = await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
       useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`),
-    );
-    users = usersVal.value;
+    )
+    users = usersVal.value
   }
 
-  let version = null;
+  let version = null
   if (versionId) {
     const { data: versionVal } = await useAsyncData(`version/${versionId}`, () =>
       useBaseFetch(`version/${versionId}`),
-    );
-    version = versionVal.value;
+    )
+    version = versionVal.value
   }
 
   const projectId = version
     ? version.project_id
-    : rawReport.value.item_type === "project"
+    : rawReport.value.item_type === 'project'
       ? rawReport.value.item_id
-      : null;
+      : null
 
-  let project = null;
+  let project = null
   if (projectId) {
     const { data: projectVal } = await useAsyncData(`project/${projectId}`, () =>
       useBaseFetch(`project/${projectId}`),
-    );
-    project = projectVal.value;
+    )
+    project = projectVal.value
   }
 
-  const reportData = rawReport.value;
-  reportData.project = project;
-  reportData.version = version;
-  reportData.reporterUser = users.find((user) => user.id === rawReport.value.reporter);
-  if (rawReport.value.item_type === "user") {
-    reportData.user = users.find((user) => user.id === rawReport.value.item_id);
+  const reportData = rawReport.value
+  reportData.project = project
+  reportData.version = version
+  reportData.reporterUser = users.find((user) => user.id === rawReport.value.reporter)
+  if (rawReport.value.item_type === 'user') {
+    reportData.user = users.find((user) => user.id === rawReport.value.item_id)
   }
-  return reportData;
+  return reportData
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/report/ReportsList.vue b/apps/frontend/src/components/ui/report/ReportsList.vue
index a310b81b3..f934010c1 100644
--- a/apps/frontend/src/components/ui/report/ReportsList.vue
+++ b/apps/frontend/src/components/ui/report/ReportsList.vue
@@ -24,11 +24,11 @@
   <p v-if="reports.length === 0">You don't have any active reports.</p>
 </template>
 <script setup>
-import { Chips } from "@modrinth/ui";
+import { Chips } from '@modrinth/ui'
 
-import ReportInfo from "~/components/ui/report/ReportInfo.vue";
-import { addReportMessage } from "~/helpers/threads.js";
-import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
+import ReportInfo from '~/components/ui/report/ReportInfo.vue'
+import { addReportMessage } from '~/helpers/threads.js'
+import { asEncodedJsonArray, fetchSegmented } from '~/utils/fetch-helpers.ts'
 
 const props = defineProps({
   moderation: {
@@ -39,34 +39,34 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-});
+})
 
-const viewMode = ref("open");
-const reasonFilter = ref("All");
-const reports = ref([]);
+const viewMode = ref('open')
+const reasonFilter = ref('All')
+const reports = ref([])
 
-const MAX_REPORTS = 1500;
+const MAX_REPORTS = 1500
 
-let { data: rawReports } = await useAsyncData("report", () =>
+let { data: rawReports } = await useAsyncData('report', () =>
   useBaseFetch(`report?count=${MAX_REPORTS}`),
-);
+)
 
 rawReports = rawReports.value.map((report) => {
-  report.item_id = report.item_id.replace(/"/g, "");
-  return report;
-});
+  report.item_id = report.item_id.replace(/"/g, '')
+  return report
+})
 
-const reporterUsers = rawReports.map((report) => report.reporter);
+const reporterUsers = rawReports.map((report) => report.reporter)
 const reportedUsers = rawReports
-  .filter((report) => report.item_type === "user")
-  .map((report) => report.item_id);
-const versionReports = rawReports.filter((report) => report.item_type === "version");
-const versionIds = [...new Set(versionReports.map((report) => report.item_id))];
-const userIds = [...new Set(reporterUsers.concat(reportedUsers))];
+  .filter((report) => report.item_type === 'user')
+  .map((report) => report.item_id)
+const versionReports = rawReports.filter((report) => report.item_type === 'version')
+const versionIds = [...new Set(versionReports.map((report) => report.item_id))]
+const userIds = [...new Set(reporterUsers.concat(reportedUsers))]
 const threadIds = [
   ...new Set(rawReports.filter((report) => report.thread_id).map((report) => report.thread_id)),
-];
-const reasons = ["All", ...new Set(rawReports.map((report) => report.report_type))];
+]
+const reasons = ['All', ...new Set(rawReports.map((report) => report.report_type))]
 
 const [{ data: users }, { data: versions }, { data: threads }] = await Promise.all([
   await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
@@ -78,44 +78,44 @@ const [{ data: users }, { data: versions }, { data: threads }] = await Promise.a
   await useAsyncData(`threads?ids=${JSON.stringify(threadIds)}`, () =>
     fetchSegmented(threadIds, (ids) => `threads?ids=${asEncodedJsonArray(ids)}`),
   ),
-]);
+])
 
 const reportedProjects = rawReports
-  .filter((report) => report.item_type === "project")
-  .map((report) => report.item_id);
-const versionProjects = versions.value.map((version) => version.project_id);
-const projectIds = [...new Set(reportedProjects.concat(versionProjects))];
+  .filter((report) => report.item_type === 'project')
+  .map((report) => report.item_id)
+const versionProjects = versions.value.map((version) => version.project_id)
+const projectIds = [...new Set(reportedProjects.concat(versionProjects))]
 
 const { data: projects } = await useAsyncData(`projects?ids=${JSON.stringify(projectIds)}`, () =>
   fetchSegmented(projectIds, (ids) => `projects?ids=${asEncodedJsonArray(ids)}`),
-);
+)
 
 reports.value = rawReports.map((report) => {
-  report.reporterUser = users.value.find((user) => user.id === report.reporter);
-  if (report.item_type === "user") {
-    report.user = users.value.find((user) => user.id === report.item_id);
-  } else if (report.item_type === "project") {
-    report.project = projects.value.find((project) => project.id === report.item_id);
-  } else if (report.item_type === "version") {
-    report.version = versions.value.find((version) => version.id === report.item_id);
-    report.project = projects.value.find((project) => project.id === report.version.project_id);
+  report.reporterUser = users.value.find((user) => user.id === report.reporter)
+  if (report.item_type === 'user') {
+    report.user = users.value.find((user) => user.id === report.item_id)
+  } else if (report.item_type === 'project') {
+    report.project = projects.value.find((project) => project.id === report.item_id)
+  } else if (report.item_type === 'version') {
+    report.version = versions.value.find((version) => version.id === report.item_id)
+    report.project = projects.value.find((project) => project.id === report.version.project_id)
   }
   if (report.thread_id) {
     report.thread = addReportMessage(
       threads.value.find((thread) => report.thread_id === thread.id),
       report,
-    );
+    )
   }
-  report.open = true;
-  return report;
-});
+  report.open = true
+  return report
+})
 
 const filteredReports = computed(() =>
   reports.value?.filter(
     (x) =>
       (props.moderation || x.reporterUser.id === props.auth.user.id) &&
-      (viewMode.value === "open" ? x.open : !x.open) &&
-      (reasonFilter.value === "All" || reasonFilter.value === x.report_type),
+      (viewMode.value === 'open' ? x.open : !x.open) &&
+      (reasonFilter.value === 'All' || reasonFilter.value === x.report_type),
   ),
-);
+)
 </script>
diff --git a/apps/frontend/src/components/ui/search/Categories.vue b/apps/frontend/src/components/ui/search/Categories.vue
index 7ef1efaf7..58b8f8b86 100644
--- a/apps/frontend/src/components/ui/search/Categories.vue
+++ b/apps/frontend/src/components/ui/search/Categories.vue
@@ -10,14 +10,14 @@
 </template>
 
 <script>
-import { formatCategory } from "@modrinth/utils";
+import { formatCategory } from '@modrinth/utils'
 
 export default {
   props: {
     categories: {
       type: Array,
       default() {
-        return [];
+        return []
       },
     },
     type: {
@@ -26,9 +26,9 @@ export default {
     },
   },
   setup() {
-    const tags = useTags();
+    const tags = useTags()
 
-    return { tags };
+    return { tags }
   },
   computed: {
     categoriesFiltered() {
@@ -37,11 +37,11 @@ export default {
         .filter(
           (x) =>
             this.categories.includes(x.name) && (!x.project_type || x.project_type === this.type),
-        );
+        )
     },
   },
   methods: { formatCategory },
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/search/SearchFilter.vue b/apps/frontend/src/components/ui/search/SearchFilter.vue
index caa5fb029..e3f2c98aa 100644
--- a/apps/frontend/src/components/ui/search/SearchFilter.vue
+++ b/apps/frontend/src/components/ui/search/SearchFilter.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import Checkbox from "~/components/ui/Checkbox.vue";
+import Checkbox from '~/components/ui/Checkbox.vue'
 
 export default {
   components: {
@@ -25,30 +25,30 @@ export default {
   props: {
     facetName: {
       type: String,
-      default: "",
+      default: '',
     },
     displayName: {
       type: String,
-      default: "",
+      default: '',
     },
     icon: {
       type: String,
-      default: "",
+      default: '',
     },
     activeFilters: {
       type: Array,
       default() {
-        return [];
+        return []
       },
     },
   },
-  emits: ["toggle"],
+  emits: ['toggle'],
   methods: {
     toggle() {
-      this.$emit("toggle", this.facetName);
+      this.$emit('toggle', this.facetName)
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/servers/BackupCreateModal.vue b/apps/frontend/src/components/ui/servers/BackupCreateModal.vue
index b773e3c2a..7ad0791cb 100644
--- a/apps/frontend/src/components/ui/servers/BackupCreateModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupCreateModal.vue
@@ -42,83 +42,83 @@
 </template>
 
 <script setup lang="ts">
-import { IssuesIcon, PlusIcon, XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { ModrinthServersFetchError, type ServerBackup } from "@modrinth/utils";
-import { computed,nextTick, ref } from "vue";
+import { IssuesIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { ModrinthServersFetchError, type ServerBackup } from '@modrinth/utils'
+import { computed, nextTick, ref } from 'vue'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const modal = ref<InstanceType<typeof NewModal>>();
-const input = ref<HTMLInputElement>();
-const isCreating = ref(false);
-const isRateLimited = ref(false);
-const backupName = ref("");
+const modal = ref<InstanceType<typeof NewModal>>()
+const input = ref<HTMLInputElement>()
+const isCreating = ref(false)
+const isRateLimited = ref(false)
+const backupName = ref('')
 const newBackupAmount = computed(() =>
   props.server.backups?.data?.length === undefined ? 1 : props.server.backups?.data?.length + 1,
-);
+)
 
-const trimmedName = computed(() => backupName.value.trim());
+const trimmedName = computed(() => backupName.value.trim())
 
 const nameExists = computed(() => {
-  if (!props.server.backups?.data) return false;
+  if (!props.server.backups?.data) return false
   return props.server.backups.data.some(
     (backup: ServerBackup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
-  );
-});
+  )
+})
 
 const focusInput = () => {
   nextTick(() => {
     setTimeout(() => {
-      input.value?.focus();
-    }, 100);
-  });
-};
+      input.value?.focus()
+    }, 100)
+  })
+}
 
 function show() {
-  backupName.value = "";
-  isCreating.value = false;
-  modal.value?.show();
+  backupName.value = ''
+  isCreating.value = false
+  modal.value?.show()
 }
 
 const hideModal = () => {
-  modal.value?.hide();
-};
+  modal.value?.hide()
+}
 
 const createBackup = async () => {
   if (backupName.value.trim().length === 0) {
-    backupName.value = `Backup #${newBackupAmount.value}`;
+    backupName.value = `Backup #${newBackupAmount.value}`
   }
 
-  isCreating.value = true;
-  isRateLimited.value = false;
+  isCreating.value = true
+  isRateLimited.value = false
   try {
-    await props.server.backups?.create(trimmedName.value);
-    hideModal();
-    await props.server.refresh();
+    await props.server.backups?.create(trimmedName.value)
+    hideModal()
+    await props.server.refresh()
   } catch (error) {
     if (error instanceof ModrinthServersFetchError && error?.statusCode === 429) {
-      isRateLimited.value = true;
+      isRateLimited.value = true
       addNotification({
-        type: "error",
-        title: "Error creating backup",
+        type: 'error',
+        title: 'Error creating backup',
         text: "You're creating backups too fast.",
-      });
+      })
     } else {
-      const message = error instanceof Error ? error.message : String(error);
-      addNotification({ type: "error", title: "Error creating backup", text: message });
+      const message = error instanceof Error ? error.message : String(error)
+      addNotification({ type: 'error', title: 'Error creating backup', text: message })
     }
   } finally {
-    isCreating.value = false;
+    isCreating.value = false
   }
-};
+}
 
 defineExpose({
   show,
   hide: hideModal,
-});
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/BackupDeleteModal.vue b/apps/frontend/src/components/ui/servers/BackupDeleteModal.vue
index c9db48317..fd99906b8 100644
--- a/apps/frontend/src/components/ui/servers/BackupDeleteModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupDeleteModal.vue
@@ -18,25 +18,25 @@
 </template>
 
 <script setup lang="ts">
-import { ConfirmModal } from "@modrinth/ui";
-import type { Backup } from "@modrinth/utils";
-import { ref } from "vue";
+import { ConfirmModal } from '@modrinth/ui'
+import type { Backup } from '@modrinth/utils'
+import { ref } from 'vue'
 
-import BackupItem from "~/components/ui/servers/BackupItem.vue";
+import BackupItem from '~/components/ui/servers/BackupItem.vue'
 
 const emit = defineEmits<{
-  (e: "delete", backup: Backup | undefined): void;
-}>();
+  (e: 'delete', backup: Backup | undefined): void
+}>()
 
-const modal = ref<InstanceType<typeof ConfirmModal>>();
-const currentBackup = ref<Backup | undefined>(undefined);
+const modal = ref<InstanceType<typeof ConfirmModal>>()
+const currentBackup = ref<Backup | undefined>(undefined)
 
 function show(backup: Backup) {
-  currentBackup.value = backup;
-  modal.value?.show();
+  currentBackup.value = backup
+  modal.value?.show()
 }
 
 defineExpose({
   show,
-});
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/BackupItem.vue b/apps/frontend/src/components/ui/servers/BackupItem.vue
index 8257e0588..242956f5f 100644
--- a/apps/frontend/src/components/ui/servers/BackupItem.vue
+++ b/apps/frontend/src/components/ui/servers/BackupItem.vue
@@ -12,160 +12,160 @@ import {
   SpinnerIcon,
   TrashIcon,
   XIcon,
-} from "@modrinth/assets";
-import { ButtonStyled, commonMessages, OverflowMenu, ProgressBar } from "@modrinth/ui";
-import type { Backup } from "@modrinth/utils";
-import { defineMessages, useVIntl } from "@vintl/vintl";
-import dayjs from "dayjs";
-import { computed,ref } from "vue";
+} from '@modrinth/assets'
+import { ButtonStyled, commonMessages, OverflowMenu, ProgressBar } from '@modrinth/ui'
+import type { Backup } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import dayjs from 'dayjs'
+import { computed, ref } from 'vue'
 
-const flags = useFeatureFlags();
-const { formatMessage } = useVIntl();
+const flags = useFeatureFlags()
+const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{
-  (e: "prepare" | "download" | "rename" | "restore" | "lock" | "retry"): void;
-  (e: "delete", skipConfirmation?: boolean): void;
-}>();
+  (e: 'prepare' | 'download' | 'rename' | 'restore' | 'lock' | 'retry'): void
+  (e: 'delete', skipConfirmation?: boolean): void
+}>()
 
 const props = withDefaults(
   defineProps<{
-    backup: Backup;
-    preview?: boolean;
-    kyrosUrl?: string;
-    jwt?: string;
+    backup: Backup
+    preview?: boolean
+    kyrosUrl?: string
+    jwt?: string
   }>(),
   {
     preview: false,
     kyrosUrl: undefined,
     jwt: undefined,
   },
-);
+)
 
 const backupQueued = computed(
   () =>
     props.backup.task?.create?.progress === 0 ||
     (props.backup.ongoing && !props.backup.task?.create),
-);
-const automated = computed(() => props.backup.automated);
-const failedToCreate = computed(() => props.backup.interrupted);
+)
+const automated = computed(() => props.backup.automated)
+const failedToCreate = computed(() => props.backup.interrupted)
 
-const preparedDownloadStates = ["ready", "done"];
-const inactiveStates = ["failed", "cancelled"];
+const preparedDownloadStates = ['ready', 'done']
+const inactiveStates = ['failed', 'cancelled']
 
 const hasPreparedDownload = computed(() => {
-  const fileState = props.backup.task?.file?.state ?? "";
-  return preparedDownloadStates.includes(fileState);
-});
+  const fileState = props.backup.task?.file?.state ?? ''
+  return preparedDownloadStates.includes(fileState)
+})
 
 const creating = computed(() => {
-  const task = props.backup.task?.create;
+  const task = props.backup.task?.create
   if (task && task.progress < 1 && !inactiveStates.includes(task.state)) {
-    return task;
+    return task
   }
   if (props.backup.ongoing) {
     return {
       progress: 0,
-      state: "ongoing",
-    };
+      state: 'ongoing',
+    }
   }
-  return undefined;
-});
+  return undefined
+})
 
 const restoring = computed(() => {
-  const task = props.backup.task?.restore;
+  const task = props.backup.task?.restore
   if (task && task.progress < 1 && !inactiveStates.includes(task.state)) {
-    return task;
+    return task
   }
-  return undefined;
-});
+  return undefined
+})
 
-const initiatedPrepare = ref(false);
+const initiatedPrepare = ref(false)
 
 const preparingFile = computed(() => {
   if (hasPreparedDownload.value) {
-    return false;
+    return false
   }
 
-  const task = props.backup.task?.file;
+  const task = props.backup.task?.file
   return (
     (!task && initiatedPrepare.value) ||
     (task && task.progress < 1 && !inactiveStates.includes(task.state))
-  );
-});
+  )
+})
 
-const failedToRestore = computed(() => props.backup.task?.restore?.state === "failed");
-const failedToPrepareFile = computed(() => props.backup.task?.file?.state === "failed");
+const failedToRestore = computed(() => props.backup.task?.restore?.state === 'failed')
+const failedToPrepareFile = computed(() => props.backup.task?.file?.state === 'failed')
 
 const messages = defineMessages({
   locked: {
-    id: "servers.backups.item.locked",
-    defaultMessage: "Locked",
+    id: 'servers.backups.item.locked',
+    defaultMessage: 'Locked',
   },
   lock: {
-    id: "servers.backups.item.lock",
-    defaultMessage: "Lock",
+    id: 'servers.backups.item.lock',
+    defaultMessage: 'Lock',
   },
   unlock: {
-    id: "servers.backups.item.unlock",
-    defaultMessage: "Unlock",
+    id: 'servers.backups.item.unlock',
+    defaultMessage: 'Unlock',
   },
   restore: {
-    id: "servers.backups.item.restore",
-    defaultMessage: "Restore",
+    id: 'servers.backups.item.restore',
+    defaultMessage: 'Restore',
   },
   rename: {
-    id: "servers.backups.item.rename",
-    defaultMessage: "Rename",
+    id: 'servers.backups.item.rename',
+    defaultMessage: 'Rename',
   },
   queuedForBackup: {
-    id: "servers.backups.item.queued-for-backup",
-    defaultMessage: "Queued for backup",
+    id: 'servers.backups.item.queued-for-backup',
+    defaultMessage: 'Queued for backup',
   },
   preparingDownload: {
-    id: "servers.backups.item.preparing-download",
-    defaultMessage: "Preparing download...",
+    id: 'servers.backups.item.preparing-download',
+    defaultMessage: 'Preparing download...',
   },
   prepareDownload: {
-    id: "servers.backups.item.prepare-download",
-    defaultMessage: "Prepare download",
+    id: 'servers.backups.item.prepare-download',
+    defaultMessage: 'Prepare download',
   },
   prepareDownloadAgain: {
-    id: "servers.backups.item.prepare-download-again",
-    defaultMessage: "Try preparing again",
+    id: 'servers.backups.item.prepare-download-again',
+    defaultMessage: 'Try preparing again',
   },
   alreadyPreparing: {
-    id: "servers.backups.item.already-preparing",
-    defaultMessage: "Already preparing backup for download",
+    id: 'servers.backups.item.already-preparing',
+    defaultMessage: 'Already preparing backup for download',
   },
   creatingBackup: {
-    id: "servers.backups.item.creating-backup",
-    defaultMessage: "Creating backup...",
+    id: 'servers.backups.item.creating-backup',
+    defaultMessage: 'Creating backup...',
   },
   restoringBackup: {
-    id: "servers.backups.item.restoring-backup",
-    defaultMessage: "Restoring from backup...",
+    id: 'servers.backups.item.restoring-backup',
+    defaultMessage: 'Restoring from backup...',
   },
   failedToCreateBackup: {
-    id: "servers.backups.item.failed-to-create-backup",
-    defaultMessage: "Failed to create backup",
+    id: 'servers.backups.item.failed-to-create-backup',
+    defaultMessage: 'Failed to create backup',
   },
   failedToRestoreBackup: {
-    id: "servers.backups.item.failed-to-restore-backup",
-    defaultMessage: "Failed to restore from backup",
+    id: 'servers.backups.item.failed-to-restore-backup',
+    defaultMessage: 'Failed to restore from backup',
   },
   failedToPrepareFile: {
-    id: "servers.backups.item.failed-to-prepare-backup",
-    defaultMessage: "Failed to prepare download",
+    id: 'servers.backups.item.failed-to-prepare-backup',
+    defaultMessage: 'Failed to prepare download',
   },
   automated: {
-    id: "servers.backups.item.automated",
-    defaultMessage: "Automated",
+    id: 'servers.backups.item.automated',
+    defaultMessage: 'Automated',
   },
   retry: {
-    id: "servers.backups.item.retry",
-    defaultMessage: "Retry",
+    id: 'servers.backups.item.retry',
+    defaultMessage: 'Retry',
   },
-});
+})
 </script>
 <template>
   <div
@@ -239,7 +239,7 @@ const messages = defineMessages({
     </div>
     <template v-else>
       <div class="col-span-2">
-        {{ dayjs(backup.created_at).format("MMMM D, YYYY [at] h:mm A") }}
+        {{ dayjs(backup.created_at).format('MMMM D, YYYY [at] h:mm A') }}
       </div>
       <div v-if="false">{{ 245 }} MiB</div>
     </template>
@@ -285,8 +285,8 @@ const messages = defineMessages({
             :disabled="!!preparingFile"
             @click="
               () => {
-                initiatedPrepare = true;
-                emit('prepare');
+                initiatedPrepare = true
+                emit('prepare')
               }
             "
           >
diff --git a/apps/frontend/src/components/ui/servers/BackupRenameModal.vue b/apps/frontend/src/components/ui/servers/BackupRenameModal.vue
index c1de24d1e..d6b78194b 100644
--- a/apps/frontend/src/components/ui/servers/BackupRenameModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupRenameModal.vue
@@ -45,98 +45,98 @@
 </template>
 
 <script setup lang="ts">
-import { IssuesIcon,SaveIcon, SpinnerIcon, XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import type { Backup } from "@modrinth/utils";
-import { computed,nextTick, ref } from "vue";
+import { IssuesIcon, SaveIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
+import type { Backup } from '@modrinth/utils'
+import { computed, nextTick, ref } from 'vue'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const modal = ref<InstanceType<typeof NewModal>>();
-const input = ref<HTMLInputElement>();
-const backupName = ref("");
-const originalName = ref("");
-const isRenaming = ref(false);
+const modal = ref<InstanceType<typeof NewModal>>()
+const input = ref<HTMLInputElement>()
+const backupName = ref('')
+const originalName = ref('')
+const isRenaming = ref(false)
 
-const currentBackup = ref<Backup | null>(null);
+const currentBackup = ref<Backup | null>(null)
 
-const trimmedName = computed(() => backupName.value.trim());
+const trimmedName = computed(() => backupName.value.trim())
 
 const nameExists = computed(() => {
   if (!props.server.backups?.data || trimmedName.value === originalName.value || isRenaming.value) {
-    return false;
+    return false
   }
 
   return props.server.backups.data.some(
     (backup: Backup) => backup.name.trim().toLowerCase() === trimmedName.value.toLowerCase(),
-  );
-});
+  )
+})
 
 const backupNumber = computed(
   () => (props.server.backups?.data?.findIndex((b) => b.id === currentBackup.value?.id) ?? 0) + 1,
-);
+)
 
 const focusInput = () => {
   nextTick(() => {
     setTimeout(() => {
-      input.value?.focus();
-    }, 100);
-  });
-};
+      input.value?.focus()
+    }, 100)
+  })
+}
 
 function show(backup: Backup) {
-  currentBackup.value = backup;
-  backupName.value = backup.name;
-  originalName.value = backup.name;
-  isRenaming.value = false;
-  modal.value?.show();
+  currentBackup.value = backup
+  backupName.value = backup.name
+  originalName.value = backup.name
+  isRenaming.value = false
+  modal.value?.show()
 }
 
 function hide() {
-  modal.value?.hide();
+  modal.value?.hide()
 }
 
 const renameBackup = async () => {
   if (!currentBackup.value) {
     addNotification({
-      type: "error",
-      title: "Error renaming backup",
-      text: "Current backup is null",
-    });
-    return;
+      type: 'error',
+      title: 'Error renaming backup',
+      text: 'Current backup is null',
+    })
+    return
   }
 
   if (trimmedName.value === originalName.value) {
-    hide();
-    return;
+    hide()
+    return
   }
 
-  isRenaming.value = true;
+  isRenaming.value = true
   try {
-    let newName = trimmedName.value;
+    let newName = trimmedName.value
 
     if (newName.length === 0) {
-      newName = `Backup #${backupNumber.value}`;
+      newName = `Backup #${backupNumber.value}`
     }
 
-    await props.server.backups?.rename(currentBackup.value.id, newName);
-    hide();
-    await props.server.refresh();
+    await props.server.backups?.rename(currentBackup.value.id, newName)
+    hide()
+    await props.server.refresh()
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    addNotification({ type: "error", title: "Error renaming backup", text: message });
+    const message = error instanceof Error ? error.message : String(error)
+    addNotification({ type: 'error', title: 'Error renaming backup', text: message })
   } finally {
-    hide();
-    isRenaming.value = false;
+    hide()
+    isRenaming.value = false
   }
-};
+}
 
 defineExpose({
   show,
   hide,
-});
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue b/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue
index fa9f5e914..eba969c51 100644
--- a/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupRestoreModal.vue
@@ -17,45 +17,45 @@
 </template>
 
 <script setup lang="ts">
-import type { NewModal } from "@modrinth/ui";
-import { ConfirmModal } from "@modrinth/ui";
-import type { Backup } from "@modrinth/utils";
-import { ref } from "vue";
+import type { NewModal } from '@modrinth/ui'
+import { ConfirmModal } from '@modrinth/ui'
+import type { Backup } from '@modrinth/utils'
+import { ref } from 'vue'
 
-import BackupItem from "~/components/ui/servers/BackupItem.vue";
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import BackupItem from '~/components/ui/servers/BackupItem.vue'
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const modal = ref<InstanceType<typeof NewModal>>();
-const currentBackup = ref<Backup | null>(null);
+const modal = ref<InstanceType<typeof NewModal>>()
+const currentBackup = ref<Backup | null>(null)
 
 function show(backup: Backup) {
-  currentBackup.value = backup;
-  modal.value?.show();
+  currentBackup.value = backup
+  modal.value?.show()
 }
 
 const restoreBackup = async () => {
   if (!currentBackup.value) {
     addNotification({
-      type: "error",
-      title: "Failed to restore backup",
-      text: "Current backup is null",
-    });
-    return;
+      type: 'error',
+      title: 'Failed to restore backup',
+      text: 'Current backup is null',
+    })
+    return
   }
 
   try {
-    await props.server.backups?.restore(currentBackup.value.id);
+    await props.server.backups?.restore(currentBackup.value.id)
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    addNotification({ type: "error", title: "Failed to restore backup", text: message });
+    const message = error instanceof Error ? error.message : String(error)
+    addNotification({ type: 'error', title: 'Failed to restore backup', text: message })
   }
-};
+}
 
 defineExpose({
   show,
-});
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
index 08b612b29..018f8c4a5 100644
--- a/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
+++ b/apps/frontend/src/components/ui/servers/BackupSettingsModal.vue
@@ -40,7 +40,7 @@
           <ButtonStyled color="brand">
             <button :disabled="!hasChanges || isSaving" @click="saveSettings">
               <SaveIcon class="h-5 w-5" />
-              {{ isSaving ? "Saving..." : "Save changes" }}
+              {{ isSaving ? 'Saving...' : 'Save changes' }}
             </button>
           </ButtonStyled>
           <ButtonStyled>
@@ -56,114 +56,114 @@
 </template>
 
 <script setup lang="ts">
-import { SaveIcon,XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { computed,ref } from "vue";
+import { SaveIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { computed, ref } from 'vue'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const modal = ref<InstanceType<typeof NewModal>>();
+const modal = ref<InstanceType<typeof NewModal>>()
 
-const initialSettings = ref<{ interval: number; enabled: boolean } | null>(null);
-const autoBackupEnabled = ref(false);
-const isLoadingSettings = ref(true);
-const isSaving = ref(false);
+const initialSettings = ref<{ interval: number; enabled: boolean } | null>(null)
+const autoBackupEnabled = ref(false)
+const isLoadingSettings = ref(true)
+const isSaving = ref(false)
 
 const backupIntervals = {
-  "Every 3 hours": 3,
-  "Every 6 hours": 6,
-  "Every 12 hours": 12,
+  'Every 3 hours': 3,
+  'Every 6 hours': 6,
+  'Every 12 hours': 12,
   Daily: 24,
-};
+}
 
-const backupIntervalsLabel = ref<keyof typeof backupIntervals>("Every 6 hours");
+const backupIntervalsLabel = ref<keyof typeof backupIntervals>('Every 6 hours')
 
 const autoBackupInterval = computed({
   get: () => backupIntervals[backupIntervalsLabel.value],
   set: (value) => {
     const [label] =
-      Object.entries(backupIntervals).find(([_, interval]) => interval === value) || [];
-    if (label) backupIntervalsLabel.value = label as keyof typeof backupIntervals;
+      Object.entries(backupIntervals).find(([_, interval]) => interval === value) || []
+    if (label) backupIntervalsLabel.value = label as keyof typeof backupIntervals
   },
-});
+})
 
 const hasChanges = computed(() => {
-  if (!initialSettings.value) return false;
+  if (!initialSettings.value) return false
 
   return (
     autoBackupEnabled.value !== initialSettings.value.enabled ||
     (initialSettings.value.enabled && autoBackupInterval.value !== initialSettings.value.interval)
-  );
-});
+  )
+})
 
 const fetchSettings = async () => {
-  isLoadingSettings.value = true;
+  isLoadingSettings.value = true
   try {
-    const settings = await props.server.backups?.getAutoBackup();
-    initialSettings.value = settings as { interval: number; enabled: boolean };
-    autoBackupEnabled.value = settings?.enabled ?? false;
-    autoBackupInterval.value = settings?.interval || 6;
-    return true;
+    const settings = await props.server.backups?.getAutoBackup()
+    initialSettings.value = settings as { interval: number; enabled: boolean }
+    autoBackupEnabled.value = settings?.enabled ?? false
+    autoBackupInterval.value = settings?.interval || 6
+    return true
   } catch (error) {
-    console.error("Error fetching backup settings:", error);
+    console.error('Error fetching backup settings:', error)
     addNotification({
-      group: "server",
-      title: "Error",
-      text: "Failed to load backup settings",
-      type: "error",
-    });
-    return false;
+      group: 'server',
+      title: 'Error',
+      text: 'Failed to load backup settings',
+      type: 'error',
+    })
+    return false
   } finally {
-    isLoadingSettings.value = false;
+    isLoadingSettings.value = false
   }
-};
+}
 
 const saveSettings = async () => {
-  isSaving.value = true;
+  isSaving.value = true
   try {
     await props.server.backups?.updateAutoBackup(
-      autoBackupEnabled.value ? "enable" : "disable",
+      autoBackupEnabled.value ? 'enable' : 'disable',
       autoBackupInterval.value,
-    );
+    )
 
     initialSettings.value = {
       enabled: autoBackupEnabled.value,
       interval: autoBackupInterval.value,
-    };
+    }
 
     addNotification({
-      group: "server",
-      title: "Success",
-      text: "Backup settings updated successfully",
-      type: "success",
-    });
+      group: 'server',
+      title: 'Success',
+      text: 'Backup settings updated successfully',
+      type: 'success',
+    })
 
-    modal.value?.hide();
+    modal.value?.hide()
   } catch (error) {
-    console.error("Error saving backup settings:", error);
+    console.error('Error saving backup settings:', error)
     addNotification({
-      group: "server",
-      title: "Error",
-      text: "Failed to save backup settings",
-      type: "error",
-    });
+      group: 'server',
+      title: 'Error',
+      text: 'Failed to save backup settings',
+      type: 'error',
+    })
   } finally {
-    isSaving.value = false;
+    isSaving.value = false
   }
-};
+}
 
 defineExpose({
   show: async () => {
-    const success = await fetchSettings();
+    const success = await fetchSettings()
     if (success) {
-      modal.value?.show();
+      modal.value?.show()
     }
   },
-});
+})
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
index 7f2dc29a5..ef752a36d 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -89,8 +89,8 @@
               noCompatibleVersions
                 ? `No compatible versions of this ${type.toLowerCase()} were found`
                 : versionFilter
-                  ? "Game version and platform is provided by the server"
-                  : "Incompatible game version and platform versions are unlocked"
+                  ? 'Game version and platform is provided by the server'
+                  : 'Incompatible game version and platform versions are unlocked'
             }}
           </span>
         </p>
@@ -133,8 +133,8 @@
             <div class="w-full truncate text-left">
               {{
                 filtersRef?.selectedPlatforms.length === 0
-                  ? "All platforms"
-                  : filtersRef?.selectedPlatforms.map((x) => formatCategory(x)).join(", ")
+                  ? 'All platforms'
+                  : filtersRef?.selectedPlatforms.map((x) => formatCategory(x)).join(', ')
               }}
             </div>
           </template>
@@ -143,8 +143,8 @@
             <div class="w-full truncate text-left">
               {{
                 filtersRef?.selectedGameVersions.length === 0
-                  ? "All game versions"
-                  : filtersRef?.selectedGameVersions.join(", ")
+                  ? 'All game versions'
+                  : filtersRef?.selectedGameVersions.join(', ')
               }}
             </div>
           </template>
@@ -156,19 +156,19 @@
             :disabled="gameVersions.length < 2 && platforms.length < 2"
             @click="
               () => {
-                versionFilter = !versionFilter;
-                setInitialFilters();
-                updateFiltersToUi();
+                versionFilter = !versionFilter
+                setInitialFilters()
+                updateFiltersToUi()
               }
             "
           >
             <LockOpenIcon />
             {{
               gameVersions.length < 2 && platforms.length < 2
-                ? "No other platforms or versions available"
+                ? 'No other platforms or versions available'
                 : versionFilter
-                  ? "Unlock"
-                  : "Return to compatibility"
+                  ? 'Unlock'
+                  : 'Return to compatibility'
             }}
           </button>
         </ButtonStyled>
@@ -235,81 +235,81 @@ import {
   GameIcon,
   LockOpenIcon,
   XIcon,
-} from "@modrinth/assets";
-import { Admonition, Avatar, ButtonStyled, CopyCode, NewModal } from "@modrinth/ui";
-import TagItem from "@modrinth/ui/src/components/base/TagItem.vue";
-import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from "@modrinth/utils";
-import { computed,ref } from "vue";
+} from '@modrinth/assets'
+import { Admonition, Avatar, ButtonStyled, CopyCode, NewModal } from '@modrinth/ui'
+import TagItem from '@modrinth/ui/src/components/base/TagItem.vue'
+import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from '@modrinth/utils'
+import { computed, ref } from 'vue'
 
-import Accordion from "~/components/ui/Accordion.vue";
-import Checkbox from "~/components/ui/Checkbox.vue";
+import Accordion from '~/components/ui/Accordion.vue'
+import Checkbox from '~/components/ui/Checkbox.vue'
 import ContentVersionFilter, {
   type ListedGameVersion,
   type ListedPlatform,
-} from "~/components/ui/servers/ContentVersionFilter.vue";
-import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
+} from '~/components/ui/servers/ContentVersionFilter.vue'
+import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
 
 const props = defineProps<{
-  type: "Mod" | "Plugin";
-  loader: string;
-  gameVersion: string;
-  modPack: boolean;
-  serverId: string;
-}>();
+  type: 'Mod' | 'Plugin'
+  loader: string
+  gameVersion: string
+  modPack: boolean
+  serverId: string
+}>()
 
 interface ContentItem extends Mod {
-  changing?: boolean;
+  changing?: boolean
 }
 
 interface EditVersion extends Version {
-  installed: boolean;
-  upgrade?: boolean;
+  installed: boolean
+  upgrade?: boolean
 }
 
-const modModal = ref();
-const modDetails = ref<ContentItem>();
-const currentVersions = ref<EditVersion[] | null>(null);
-const versionsLoading = ref(false);
-const versionsError = ref("");
-const showBetaAlphaReleases = ref(false);
-const unlockFilterAccordion = ref();
-const versionFilter = ref(true);
-const tags = useTags();
-const noCompatibleVersions = ref(false);
+const modModal = ref()
+const modDetails = ref<ContentItem>()
+const currentVersions = ref<EditVersion[] | null>(null)
+const versionsLoading = ref(false)
+const versionsError = ref('')
+const showBetaAlphaReleases = ref(false)
+const unlockFilterAccordion = ref()
+const versionFilter = ref(true)
+const tags = useTags()
+const noCompatibleVersions = ref(false)
 
 const { pluginLoaders, modLoaders } = tags.value.loaders.reduce(
   (acc, tag) => {
-    if (tag.supported_project_types.includes("plugin")) {
-      acc.pluginLoaders.push(tag.name);
+    if (tag.supported_project_types.includes('plugin')) {
+      acc.pluginLoaders.push(tag.name)
     }
-    if (tag.supported_project_types.includes("mod")) {
-      acc.modLoaders.push(tag.name);
+    if (tag.supported_project_types.includes('mod')) {
+      acc.modLoaders.push(tag.name)
     }
-    return acc;
+    return acc
   },
   { pluginLoaders: [] as string[], modLoaders: [] as string[] },
-);
+)
 
-const selectedVersion = ref();
-const filtersRef: Ref<InstanceType<typeof ContentVersionFilter> | null> = ref(null);
+const selectedVersion = ref()
+const filtersRef: Ref<InstanceType<typeof ContentVersionFilter> | null> = ref(null)
 interface SelectedContentFilters {
-  selectedGameVersions: string[];
-  selectedPlatforms: string[];
+  selectedGameVersions: string[]
+  selectedPlatforms: string[]
 }
 const selectedFilters = ref<SelectedContentFilters>({
   selectedGameVersions: [],
   selectedPlatforms: [],
-});
+})
 
 const backwardCompatPlatformMap = {
-  purpur: ["purpur", "paper", "spigot", "bukkit"],
-  paper: ["paper", "spigot", "bukkit"],
-  spigot: ["spigot", "bukkit"],
-};
+  purpur: ['purpur', 'paper', 'spigot', 'bukkit'],
+  paper: ['paper', 'spigot', 'bukkit'],
+  spigot: ['spigot', 'bukkit'],
+}
 
-const platforms = ref<ListedPlatform[]>([]);
-const gameVersions = ref<ListedGameVersion[]>([]);
-const initPlatform = ref<string>("");
+const platforms = ref<ListedPlatform[]>([])
+const gameVersions = ref<ListedGameVersion[]>([])
+const initPlatform = ref<string>('')
 
 const setInitialFilters = () => {
   selectedFilters.value = {
@@ -319,29 +319,29 @@ const setInitialFilters = () => {
         gameVersions.value[0]?.name,
     ],
     selectedPlatforms: [initPlatform.value],
-  };
-};
+  }
+}
 
 const updateFiltersToUi = () => {
-  if (!filtersRef.value) return;
-  filtersRef.value.selectedGameVersions = selectedFilters.value.selectedGameVersions;
-  filtersRef.value.selectedPlatforms = selectedFilters.value.selectedPlatforms;
+  if (!filtersRef.value) return
+  filtersRef.value.selectedGameVersions = selectedFilters.value.selectedGameVersions
+  filtersRef.value.selectedPlatforms = selectedFilters.value.selectedPlatforms
 
-  selectedVersion.value = filteredVersions.value[0];
-};
+  selectedVersion.value = filteredVersions.value[0]
+}
 
 const updateFiltersFromUi = (event: { g: string[]; l: string[] }) => {
   selectedFilters.value = {
     selectedGameVersions: event.g,
     selectedPlatforms: event.l,
-  };
-};
+  }
+}
 
 const filteredVersions = computed(() => {
-  if (!currentVersions.value) return [];
+  if (!currentVersions.value) return []
 
   const versionsWithoutReleaseFilter = currentVersions.value.filter((version: EditVersion) => {
-    if (version.installed) return true;
+    if (version.installed) return true
     return (
       filtersRef.value?.selectedPlatforms.every((platform) =>
         (
@@ -353,42 +353,40 @@ const filteredVersions = computed(() => {
       filtersRef.value?.selectedGameVersions.every((gameVersion) =>
         version.game_versions.includes(gameVersion),
       )
-    );
-  });
+    )
+  })
 
-  const versionTypes = new Set(
-    versionsWithoutReleaseFilter.map((v: EditVersion) => v.version_type),
-  );
-  const releaseVersions = versionTypes.has("release");
-  const betaVersions = versionTypes.has("beta");
-  const alphaVersions = versionTypes.has("alpha");
+  const versionTypes = new Set(versionsWithoutReleaseFilter.map((v: EditVersion) => v.version_type))
+  const releaseVersions = versionTypes.has('release')
+  const betaVersions = versionTypes.has('beta')
+  const alphaVersions = versionTypes.has('alpha')
 
   const versions = versionsWithoutReleaseFilter.filter((version: EditVersion) => {
-    if (showBetaAlphaReleases.value || version.installed) return true;
+    if (showBetaAlphaReleases.value || version.installed) return true
     return releaseVersions
-      ? version.version_type === "release"
+      ? version.version_type === 'release'
       : betaVersions
-        ? version.version_type === "beta"
+        ? version.version_type === 'beta'
         : alphaVersions
-          ? version.version_type === "alpha"
-          : false;
-  });
+          ? version.version_type === 'alpha'
+          : false
+  })
 
   return versions.map((version: EditVersion) => {
-    let suffix = "";
+    let suffix = ''
 
-    if (version.version_type === "alpha" && releaseVersions && betaVersions) {
-      suffix += " (alpha)";
-    } else if (version.version_type === "beta" && releaseVersions) {
-      suffix += " (beta)";
+    if (version.version_type === 'alpha' && releaseVersions && betaVersions) {
+      suffix += ' (alpha)'
+    } else if (version.version_type === 'beta' && releaseVersions) {
+      suffix += ' (beta)'
     }
 
     return {
       ...version,
       version_number: version.version_number + suffix,
-    };
-  });
-});
+    }
+  })
+})
 
 const formattedVersions = computed(() => {
   return {
@@ -400,134 +398,134 @@ const formattedVersions = computed(() => {
       .sort((firstLoader: string, secondLoader: string) => {
         const loaderList = backwardCompatPlatformMap[
           props.loader as keyof typeof backwardCompatPlatformMap
-        ] || [props.loader];
+        ] || [props.loader]
 
-        const firstLoaderPosition = loaderList.indexOf(firstLoader.toLowerCase());
-        const secondLoaderPosition = loaderList.indexOf(secondLoader.toLowerCase());
+        const firstLoaderPosition = loaderList.indexOf(firstLoader.toLowerCase())
+        const secondLoaderPosition = loaderList.indexOf(secondLoader.toLowerCase())
 
-        if (firstLoaderPosition === -1 && secondLoaderPosition === -1) return 0;
-        if (firstLoaderPosition === -1) return 1;
-        if (secondLoaderPosition === -1) return -1;
-        return firstLoaderPosition - secondLoaderPosition;
+        if (firstLoaderPosition === -1 && secondLoaderPosition === -1) return 0
+        if (firstLoaderPosition === -1) return 1
+        if (secondLoaderPosition === -1) return -1
+        return firstLoaderPosition - secondLoaderPosition
       })
       .map((loader: string) => formatCategory(loader)),
-  };
-});
+  }
+})
 
 async function show(mod: ContentItem) {
-  versionFilter.value = true;
-  modModal.value.show();
-  versionsLoading.value = true;
-  modDetails.value = mod;
-  versionsError.value = "";
-  currentVersions.value = null;
+  versionFilter.value = true
+  modModal.value.show()
+  versionsLoading.value = true
+  modDetails.value = mod
+  versionsError.value = ''
+  currentVersions.value = null
 
   try {
-    const result = await useBaseFetch(`project/${mod.project_id}/version`, {}, false);
+    const result = await useBaseFetch(`project/${mod.project_id}/version`, {}, false)
     if (
       Array.isArray(result) &&
       result.every(
         (item) =>
-          "id" in item &&
-          "version_number" in item &&
-          "version_type" in item &&
-          "loaders" in item &&
-          "game_versions" in item,
+          'id' in item &&
+          'version_number' in item &&
+          'version_type' in item &&
+          'loaders' in item &&
+          'game_versions' in item,
       )
     ) {
-      currentVersions.value = result as EditVersion[];
+      currentVersions.value = result as EditVersion[]
     } else {
-      throw new Error("Invalid version data received.");
+      throw new Error('Invalid version data received.')
     }
 
     // find the installed version and move it to the top of the list
     const currentModIndex = currentVersions.value.findIndex(
       (item: { id: string }) => item.id === mod.version_id,
-    );
+    )
     if (currentModIndex === -1) {
       currentVersions.value[currentModIndex] = {
         ...currentVersions.value[currentModIndex],
         installed: true,
         version_number: `${mod.version_number} (current) (external)`,
-      };
+      }
     } else {
-      currentVersions.value[currentModIndex].version_number = `${mod.version_number} (current)`;
-      currentVersions.value[currentModIndex].installed = true;
+      currentVersions.value[currentModIndex].version_number = `${mod.version_number} (current)`
+      currentVersions.value[currentModIndex].installed = true
     }
 
     // initially filter the platform and game versions for the server config
-    const platformSet = new Set<string>();
-    const gameVersionSet = new Set<string>();
+    const platformSet = new Set<string>()
+    const gameVersionSet = new Set<string>()
     for (const version of currentVersions.value) {
       for (const loader of version.loaders) {
-        platformSet.add(loader);
+        platformSet.add(loader)
       }
       for (const gameVersion of version.game_versions) {
-        gameVersionSet.add(gameVersion);
+        gameVersionSet.add(gameVersion)
       }
     }
     if (gameVersionSet.size > 0) {
       const filteredGameVersions = tags.value.gameVersions.filter((x) =>
         gameVersionSet.has(x.version),
-      );
+      )
 
       gameVersions.value = filteredGameVersions.map((x) => ({
         name: x.version,
-        release: x.version_type === "release",
-      }));
+        release: x.version_type === 'release',
+      }))
     }
     if (platformSet.size > 0) {
       const tempPlatforms = Array.from(platformSet).map((platform) => ({
         name: platform,
         isType:
-          props.type === "Plugin"
+          props.type === 'Plugin'
             ? pluginLoaders.includes(platform)
-            : props.type === "Mod"
+            : props.type === 'Mod'
               ? modLoaders.includes(platform)
               : false,
-      }));
-      platforms.value = tempPlatforms;
+      }))
+      platforms.value = tempPlatforms
     }
 
     // set default platform
-    const defaultPlatform = Array.from(platformSet)[0];
+    const defaultPlatform = Array.from(platformSet)[0]
     initPlatform.value = platformSet.has(props.loader)
       ? props.loader
       : props.loader in backwardCompatPlatformMap
         ? backwardCompatPlatformMap[props.loader as keyof typeof backwardCompatPlatformMap].find(
             (p) => platformSet.has(p),
           ) || defaultPlatform
-        : defaultPlatform;
+        : defaultPlatform
 
     // check if there's nothing compatible with the server config
     noCompatibleVersions.value =
       !platforms.value.some((p) => p.isType) ||
-      !gameVersions.value.some((v) => v.name === props.gameVersion);
+      !gameVersions.value.some((v) => v.name === props.gameVersion)
 
     if (noCompatibleVersions.value) {
-      unlockFilterAccordion.value.open();
-      versionFilter.value = false;
+      unlockFilterAccordion.value.open()
+      versionFilter.value = false
     }
 
-    setInitialFilters();
-    versionsLoading.value = false;
+    setInitialFilters()
+    versionsLoading.value = false
   } catch (error) {
-    console.error("Error loading versions:", error);
-    versionsError.value = error instanceof Error ? error.message : "Unknown";
+    console.error('Error loading versions:', error)
+    versionsError.value = error instanceof Error ? error.message : 'Unknown'
   }
 }
 
 const emit = defineEmits<{
-  changeVersion: [string];
-}>();
+  changeVersion: [string]
+}>()
 
 function emitChangeModVersion() {
-  if (!selectedVersion.value) return;
-  emit("changeVersion", selectedVersion.value.id.toString());
+  if (!selectedVersion.value) return
+  emit('changeVersion', selectedVersion.value.id.toString())
 }
 
 defineExpose({
   show,
   hide: () => modModal.value.hide(),
-});
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue b/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
index 59648bf31..0bbf55721 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionFilter.vue
@@ -57,114 +57,114 @@
 </template>
 
 <script setup lang="ts">
-import { FilterIcon } from "@modrinth/assets";
-import Checkbox from "@modrinth/ui/src/components/base/Checkbox.vue";
-import ManySelect from "@modrinth/ui/src/components/base/ManySelect.vue";
-import { formatCategory, type GameVersionTag,type Version } from "@modrinth/utils";
-import { computed,ref } from "vue";
-import { useRoute } from "vue-router";
+import { FilterIcon } from '@modrinth/assets'
+import Checkbox from '@modrinth/ui/src/components/base/Checkbox.vue'
+import ManySelect from '@modrinth/ui/src/components/base/ManySelect.vue'
+import { formatCategory, type GameVersionTag, type Version } from '@modrinth/utils'
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
 
 export type ListedGameVersion = {
-  name: string;
-  release: boolean;
-};
+  name: string
+  release: boolean
+}
 
 export type ListedPlatform = {
-  name: string;
-  isType: boolean;
-};
+  name: string
+  isType: boolean
+}
 
 const props = defineProps<{
-  versions: Version[];
-  gameVersions: GameVersionTag[];
-  listedGameVersions: ListedGameVersion[];
-  listedPlatforms: ListedPlatform[];
-  baseId?: string;
-  type: "Mod" | "Plugin";
+  versions: Version[]
+  gameVersions: GameVersionTag[]
+  listedGameVersions: ListedGameVersion[]
+  listedPlatforms: ListedPlatform[]
+  baseId?: string
+  type: 'Mod' | 'Plugin'
   platformTags: {
-    name: string;
-    supported_project_types: string[];
-  }[];
-  disabled?: boolean;
-}>();
+    name: string
+    supported_project_types: string[]
+  }[]
+  disabled?: boolean
+}>()
 
-const emit = defineEmits(["update:query"]);
-const route = useRoute();
+const emit = defineEmits(['update:query'])
+const route = useRoute()
 
-const showSnapshots = ref(false);
+const showSnapshots = ref(false)
 const hasAnySnapshots = computed(() => {
   return props.versions.some((x) =>
     props.gameVersions.some(
-      (y) => y.version_type !== "release" && x.game_versions.includes(y.version),
+      (y) => y.version_type !== 'release' && x.game_versions.includes(y.version),
     ),
-  );
-});
+  )
+})
 
 const hasOnlySnapshots = computed(() => {
   return props.versions.every((version) => {
     return version.game_versions.every((gv) => {
-      const matched = props.gameVersions.find((tag) => tag.version === gv);
-      return matched && matched.version_type !== "release";
-    });
-  });
-});
+      const matched = props.gameVersions.find((tag) => tag.version === gv)
+      return matched && matched.version_type !== 'release'
+    })
+  })
+})
 
 const hasAnyUnsupportedPlatforms = computed(() => {
-  return props.listedPlatforms.some((x) => !x.isType);
-});
+  return props.listedPlatforms.some((x) => !x.isType)
+})
 
 const hasOnlyUnsupportedPlatforms = computed(() => {
-  return props.listedPlatforms.every((x) => !x.isType);
-});
+  return props.listedPlatforms.every((x) => !x.isType)
+})
 
-const showSupportedPlatformsOnly = ref(true);
+const showSupportedPlatformsOnly = ref(true)
 
 const filterOptions = computed(() => {
-  const filters: Record<"gameVersion" | "platform", string[]> = {
+  const filters: Record<'gameVersion' | 'platform', string[]> = {
     gameVersion: [],
     platform: [],
-  };
+  }
 
   filters.gameVersion = props.listedGameVersions
     .filter((x) => {
-      return showSnapshots.value || hasOnlySnapshots.value ? true : x.release;
+      return showSnapshots.value || hasOnlySnapshots.value ? true : x.release
     })
-    .map((x) => x.name);
+    .map((x) => x.name)
 
   filters.platform = props.listedPlatforms
     .filter((x) => {
       return !showSupportedPlatformsOnly.value || hasOnlyUnsupportedPlatforms.value
         ? true
-        : x.isType;
+        : x.isType
     })
-    .map((x) => x.name);
+    .map((x) => x.name)
 
-  return filters;
-});
+  return filters
+})
 
-const selectedGameVersions = ref<string[]>([]);
-const selectedPlatforms = ref<string[]>([]);
+const selectedGameVersions = ref<string[]>([])
+const selectedPlatforms = ref<string[]>([])
 
-selectedGameVersions.value = route.query.g ? getArrayOrString(route.query.g) : [];
-selectedPlatforms.value = route.query.l ? getArrayOrString(route.query.l) : [];
+selectedGameVersions.value = route.query.g ? getArrayOrString(route.query.g) : []
+selectedPlatforms.value = route.query.l ? getArrayOrString(route.query.l) : []
 
 function updateFilters() {
-  emit("update:query", {
+  emit('update:query', {
     g: selectedGameVersions.value,
     l: selectedPlatforms.value,
-  });
+  })
 }
 
 defineExpose({
   selectedGameVersions,
   selectedPlatforms,
-});
+})
 
 function getArrayOrString(x: string | (string | null)[]): string[] {
-  if (typeof x === "string") {
-    return [x];
+  if (typeof x === 'string') {
+    return [x]
   } else {
-    return x.filter((item): item is string => item !== null);
+    return x.filter((item): item is string => item !== null)
   }
 }
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FileItem.vue b/apps/frontend/src/components/ui/servers/FileItem.vue
index cdf738022..b44dad9ca 100644
--- a/apps/frontend/src/components/ui/servers/FileItem.vue
+++ b/apps/frontend/src/components/ui/servers/FileItem.vue
@@ -75,11 +75,11 @@ import {
   PackageOpenIcon,
   RightArrowIcon,
   TrashIcon,
-} from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
-import { computed, ref,shallowRef } from "vue";
-import { renderToString } from "vue/server-renderer";
-import { useRoute,useRouter } from "vue-router";
+} from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
+import { computed, ref, shallowRef } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { useRoute, useRouter } from 'vue-router'
 
 import {
   UiServersIconsCodeFileIcon,
@@ -87,327 +87,324 @@ import {
   UiServersIconsEarthIcon,
   UiServersIconsImageFileIcon,
   UiServersIconsTextFileIcon,
-} from "#components";
-import PaletteIcon from "~/assets/icons/palette.svg?component";
+} from '#components'
+import PaletteIcon from '~/assets/icons/palette.svg?component'
 
 interface FileItemProps {
-  name: string;
-  type: "directory" | "file";
-  size?: number;
-  count?: number;
-  modified: number;
-  created: number;
-  path: string;
+  name: string
+  type: 'directory' | 'file'
+  size?: number
+  count?: number
+  modified: number
+  created: number
+  path: string
 }
 
-const props = defineProps<FileItemProps>();
+const props = defineProps<FileItemProps>()
 
 const emit = defineEmits<{
   (
-    e: "rename" | "move" | "download" | "delete" | "edit" | "extract",
+    e: 'rename' | 'move' | 'download' | 'delete' | 'edit' | 'extract',
     item: { name: string; type: string; path: string },
-  ): void;
-  (
-    e: "moveDirectTo",
-    item: { name: string; type: string; path: string; destination: string },
-  ): void;
-  (e: "contextmenu", x: number, y: number): void;
-}>();
+  ): void
+  (e: 'moveDirectTo', item: { name: string; type: string; path: string; destination: string }): void
+  (e: 'contextmenu', x: number, y: number): void
+}>()
 
-const isDragOver = ref(false);
-const isDragging = ref(false);
+const isDragOver = ref(false)
+const isDragging = ref(false)
 
 const codeExtensions = Object.freeze([
-  "json",
-  "json5",
-  "jsonc",
-  "java",
-  "kt",
-  "kts",
-  "sh",
-  "bat",
-  "ps1",
-  "yml",
-  "yaml",
-  "toml",
-  "js",
-  "ts",
-  "py",
-  "rb",
-  "php",
-  "html",
-  "css",
-  "cpp",
-  "c",
-  "h",
-  "rs",
-  "go",
-]);
+  'json',
+  'json5',
+  'jsonc',
+  'java',
+  'kt',
+  'kts',
+  'sh',
+  'bat',
+  'ps1',
+  'yml',
+  'yaml',
+  'toml',
+  'js',
+  'ts',
+  'py',
+  'rb',
+  'php',
+  'html',
+  'css',
+  'cpp',
+  'c',
+  'h',
+  'rs',
+  'go',
+])
 
-const textExtensions = Object.freeze(["txt", "md", "log", "cfg", "conf", "properties", "ini"]);
-const imageExtensions = Object.freeze(["png", "jpg", "jpeg", "gif", "svg", "webp"]);
-const supportedArchiveExtensions = Object.freeze(["zip"]);
-const units = Object.freeze(["B", "KB", "MB", "GB", "TB", "PB", "EB"]);
+const textExtensions = Object.freeze(['txt', 'md', 'log', 'cfg', 'conf', 'properties', 'ini'])
+const imageExtensions = Object.freeze(['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'])
+const supportedArchiveExtensions = Object.freeze(['zip'])
+const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
 
-const route = shallowRef(useRoute());
-const router = useRouter();
+const route = shallowRef(useRoute())
+const router = useRouter()
 
 const containerClasses = computed(() => [
-  "group m-0 p-0 focus:!outline-none flex w-full select-none items-center justify-between overflow-hidden border-0 border-b border-solid border-bg-raised p-3 last:border-none hover:bg-bg-raised focus:bg-bg-raised",
-  isEditableFile.value ? "cursor-pointer" : props.type === "directory" ? "cursor-pointer" : "",
-  isDragOver.value ? "bg-brand-highlight" : "",
-]);
+  'group m-0 p-0 focus:!outline-none flex w-full select-none items-center justify-between overflow-hidden border-0 border-b border-solid border-bg-raised p-3 last:border-none hover:bg-bg-raised focus:bg-bg-raised',
+  isEditableFile.value ? 'cursor-pointer' : props.type === 'directory' ? 'cursor-pointer' : '',
+  isDragOver.value ? 'bg-brand-highlight' : '',
+])
 
-const fileExtension = computed(() => props.name.split(".").pop()?.toLowerCase() || "");
+const fileExtension = computed(() => props.name.split('.').pop()?.toLowerCase() || '')
 
-const isZip = computed(() => fileExtension.value === "zip");
+const isZip = computed(() => fileExtension.value === 'zip')
 
 const menuOptions = computed(() => [
   {
-    id: "extract",
+    id: 'extract',
     shown: isZip.value,
-    action: () => emit("extract", { name: props.name, type: props.type, path: props.path }),
+    action: () => emit('extract', { name: props.name, type: props.type, path: props.path }),
   },
   {
     divider: true,
     shown: isZip.value,
   },
   {
-    id: "rename",
-    action: () => emit("rename", { name: props.name, type: props.type, path: props.path }),
+    id: 'rename',
+    action: () => emit('rename', { name: props.name, type: props.type, path: props.path }),
   },
   {
-    id: "move",
-    action: () => emit("move", { name: props.name, type: props.type, path: props.path }),
+    id: 'move',
+    action: () => emit('move', { name: props.name, type: props.type, path: props.path }),
   },
   {
-    id: "download",
-    action: () => emit("download", { name: props.name, type: props.type, path: props.path }),
-    shown: props.type !== "directory",
+    id: 'download',
+    action: () => emit('download', { name: props.name, type: props.type, path: props.path }),
+    shown: props.type !== 'directory',
   },
   {
-    id: "delete",
-    action: () => emit("delete", { name: props.name, type: props.type, path: props.path }),
-    color: "red" as const,
+    id: 'delete',
+    action: () => emit('delete', { name: props.name, type: props.type, path: props.path }),
+    color: 'red' as const,
   },
-]);
+])
 
 const iconComponent = computed(() => {
-  if (props.type === "directory") {
-    if (props.name === "config") return UiServersIconsCogFolderIcon;
-    if (props.name === "world") return UiServersIconsEarthIcon;
-    if (props.name === "resourcepacks") return PaletteIcon;
-    return FolderOpenIcon;
+  if (props.type === 'directory') {
+    if (props.name === 'config') return UiServersIconsCogFolderIcon
+    if (props.name === 'world') return UiServersIconsEarthIcon
+    if (props.name === 'resourcepacks') return PaletteIcon
+    return FolderOpenIcon
   }
 
-  const ext = fileExtension.value;
-  if (codeExtensions.includes(ext)) return UiServersIconsCodeFileIcon;
-  if (textExtensions.includes(ext)) return UiServersIconsTextFileIcon;
-  if (imageExtensions.includes(ext)) return UiServersIconsImageFileIcon;
-  if (supportedArchiveExtensions.includes(ext)) return FileArchiveIcon;
-  return FileIcon;
-});
+  const ext = fileExtension.value
+  if (codeExtensions.includes(ext)) return UiServersIconsCodeFileIcon
+  if (textExtensions.includes(ext)) return UiServersIconsTextFileIcon
+  if (imageExtensions.includes(ext)) return UiServersIconsImageFileIcon
+  if (supportedArchiveExtensions.includes(ext)) return FileArchiveIcon
+  return FileIcon
+})
 
 const subText = computed(() => {
-  if (props.type === "directory") {
-    return `${props.count} ${props.count === 1 ? "item" : "items"}`;
+  if (props.type === 'directory') {
+    return `${props.count} ${props.count === 1 ? 'item' : 'items'}`
   }
-  return formattedSize.value;
-});
+  return formattedSize.value
+})
 
 const formattedModifiedDate = computed(() => {
-  const date = new Date(props.modified * 1000);
-  return `${date.toLocaleDateString("en-US", {
-    month: "2-digit",
-    day: "2-digit",
-    year: "2-digit",
-  })}, ${date.toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "numeric",
+  const date = new Date(props.modified * 1000)
+  return `${date.toLocaleDateString('en-US', {
+    month: '2-digit',
+    day: '2-digit',
+    year: '2-digit',
+  })}, ${date.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
     hour12: true,
-  })}`;
-});
+  })}`
+})
 
 const formattedCreationDate = computed(() => {
-  const date = new Date(props.created * 1000);
-  return `${date.toLocaleDateString("en-US", {
-    month: "2-digit",
-    day: "2-digit",
-    year: "2-digit",
-  })}, ${date.toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "numeric",
+  const date = new Date(props.created * 1000)
+  return `${date.toLocaleDateString('en-US', {
+    month: '2-digit',
+    day: '2-digit',
+    year: '2-digit',
+  })}, ${date.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
     hour12: true,
-  })}`;
-});
+  })}`
+})
 
 const isEditableFile = computed(() => {
-  if (props.type === "file") {
-    const ext = fileExtension.value;
+  if (props.type === 'file') {
+    const ext = fileExtension.value
     return (
-      !props.name.includes(".") ||
+      !props.name.includes('.') ||
       textExtensions.includes(ext) ||
       codeExtensions.includes(ext) ||
       imageExtensions.includes(ext)
-    );
+    )
   }
-  return false;
-});
+  return false
+})
 
 const formattedSize = computed(() => {
-  if (props.size === undefined) return "";
-  const bytes = props.size;
-  if (bytes === 0) return "0 B";
+  if (props.size === undefined) return ''
+  const bytes = props.size
+  if (bytes === 0) return '0 B'
 
-  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
-  const size = (bytes / Math.pow(1024, exponent)).toFixed(2);
-  return `${size} ${units[exponent]}`;
-});
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+  const size = (bytes / Math.pow(1024, exponent)).toFixed(2)
+  return `${size} ${units[exponent]}`
+})
 
 const openContextMenu = (event: MouseEvent) => {
-  event.preventDefault();
-  emit("contextmenu", event.clientX, event.clientY);
-};
+  event.preventDefault()
+  emit('contextmenu', event.clientX, event.clientY)
+}
 
 const navigateToFolder = () => {
-  const currentPath = route.value.query.path?.toString() || "";
-  const newPath = currentPath.endsWith("/")
+  const currentPath = route.value.query.path?.toString() || ''
+  const newPath = currentPath.endsWith('/')
     ? `${currentPath}${props.name}`
-    : `${currentPath}/${props.name}`;
-  router.push({ query: { path: newPath, page: 1 } });
-};
+    : `${currentPath}/${props.name}`
+  router.push({ query: { path: newPath, page: 1 } })
+}
 
-const isNavigating = ref(false);
+const isNavigating = ref(false)
 
 const selectItem = () => {
-  if (isNavigating.value) return;
-  isNavigating.value = true;
+  if (isNavigating.value) return
+  isNavigating.value = true
 
-  if (props.type === "directory") {
-    navigateToFolder();
-  } else if (props.type === "file" && isEditableFile.value) {
-    emit("edit", { name: props.name, type: props.type, path: props.path });
+  if (props.type === 'directory') {
+    navigateToFolder()
+  } else if (props.type === 'file' && isEditableFile.value) {
+    emit('edit', { name: props.name, type: props.type, path: props.path })
   }
 
   setTimeout(() => {
-    isNavigating.value = false;
-  }, 500);
-};
+    isNavigating.value = false
+  }, 500)
+}
 
 const getDragIcon = async () => {
-  let iconToUse;
+  let iconToUse
 
-  if (props.type === "directory") {
-    if (props.name === "config") {
-      iconToUse = UiServersIconsCogFolderIcon;
-    } else if (props.name === "world") {
-      iconToUse = UiServersIconsEarthIcon;
-    } else if (props.name === "resourcepacks") {
-      iconToUse = PaletteIcon;
+  if (props.type === 'directory') {
+    if (props.name === 'config') {
+      iconToUse = UiServersIconsCogFolderIcon
+    } else if (props.name === 'world') {
+      iconToUse = UiServersIconsEarthIcon
+    } else if (props.name === 'resourcepacks') {
+      iconToUse = PaletteIcon
     } else {
-      iconToUse = FolderOpenIcon;
+      iconToUse = FolderOpenIcon
     }
   } else {
-    const ext = fileExtension.value;
+    const ext = fileExtension.value
     if (codeExtensions.includes(ext)) {
-      iconToUse = UiServersIconsCodeFileIcon;
+      iconToUse = UiServersIconsCodeFileIcon
     } else if (textExtensions.includes(ext)) {
-      iconToUse = UiServersIconsTextFileIcon;
+      iconToUse = UiServersIconsTextFileIcon
     } else if (imageExtensions.includes(ext)) {
-      iconToUse = UiServersIconsImageFileIcon;
+      iconToUse = UiServersIconsImageFileIcon
     } else {
-      iconToUse = FileIcon;
+      iconToUse = FileIcon
     }
   }
 
-  return await renderToString(h(iconToUse));
-};
+  return await renderToString(h(iconToUse))
+}
 
 const handleDragStart = async (event: DragEvent) => {
-  if (!event.dataTransfer) return;
-  isDragging.value = true;
+  if (!event.dataTransfer) return
+  isDragging.value = true
 
-  const dragGhost = document.createElement("div");
+  const dragGhost = document.createElement('div')
   dragGhost.className =
-    "fixed left-0 top-0 flex items-center max-w-[500px] flex-row gap-3 rounded-lg bg-bg-raised p-3 shadow-lg pointer-events-none";
+    'fixed left-0 top-0 flex items-center max-w-[500px] flex-row gap-3 rounded-lg bg-bg-raised p-3 shadow-lg pointer-events-none'
 
-  const iconContainer = document.createElement("div");
-  iconContainer.className = "flex size-6 items-center justify-center";
+  const iconContainer = document.createElement('div')
+  iconContainer.className = 'flex size-6 items-center justify-center'
 
-  const icon = document.createElement("div");
-  icon.className = "size-4";
-  icon.innerHTML = await getDragIcon();
-  iconContainer.appendChild(icon);
+  const icon = document.createElement('div')
+  icon.className = 'size-4'
+  icon.innerHTML = await getDragIcon()
+  iconContainer.appendChild(icon)
 
-  const nameSpan = document.createElement("span");
-  nameSpan.className = "font-bold truncate text-contrast";
-  nameSpan.textContent = props.name;
+  const nameSpan = document.createElement('span')
+  nameSpan.className = 'font-bold truncate text-contrast'
+  nameSpan.textContent = props.name
 
-  dragGhost.appendChild(iconContainer);
-  dragGhost.appendChild(nameSpan);
-  document.body.appendChild(dragGhost);
+  dragGhost.appendChild(iconContainer)
+  dragGhost.appendChild(nameSpan)
+  document.body.appendChild(dragGhost)
 
-  event.dataTransfer.setDragImage(dragGhost, 0, 0);
+  event.dataTransfer.setDragImage(dragGhost, 0, 0)
 
   requestAnimationFrame(() => {
-    document.body.removeChild(dragGhost);
-  });
+    document.body.removeChild(dragGhost)
+  })
 
   event.dataTransfer.setData(
-    "application/pyro-file-move",
+    'application/pyro-file-move',
     JSON.stringify({
       name: props.name,
       type: props.type,
       path: props.path,
     }),
-  );
-  event.dataTransfer.effectAllowed = "move";
-};
+  )
+  event.dataTransfer.effectAllowed = 'move'
+}
 
 const isChildPath = (parentPath: string, childPath: string) => {
-  return childPath.startsWith(parentPath + "/");
-};
+  return childPath.startsWith(parentPath + '/')
+}
 
 const handleDragEnd = () => {
-  isDragging.value = false;
-};
+  isDragging.value = false
+}
 
 const handleDragEnter = () => {
-  if (props.type !== "directory") return;
-  isDragOver.value = true;
-};
+  if (props.type !== 'directory') return
+  isDragOver.value = true
+}
 
 const handleDragOver = (event: DragEvent) => {
-  if (props.type !== "directory" || !event.dataTransfer) return;
-  event.dataTransfer.dropEffect = "move";
-};
+  if (props.type !== 'directory' || !event.dataTransfer) return
+  event.dataTransfer.dropEffect = 'move'
+}
 
 const handleDragLeave = () => {
-  isDragOver.value = false;
-};
+  isDragOver.value = false
+}
 
 const handleDrop = (event: DragEvent) => {
-  isDragOver.value = false;
-  if (props.type !== "directory" || !event.dataTransfer) return;
+  isDragOver.value = false
+  if (props.type !== 'directory' || !event.dataTransfer) return
 
   try {
-    const dragData = JSON.parse(event.dataTransfer.getData("application/pyro-file-move"));
+    const dragData = JSON.parse(event.dataTransfer.getData('application/pyro-file-move'))
 
-    if (dragData.path === props.path) return;
+    if (dragData.path === props.path) return
 
-    if (dragData.type === "directory" && isChildPath(dragData.path, props.path)) {
-      console.error("Cannot move a folder into its own subfolder");
-      return;
+    if (dragData.type === 'directory' && isChildPath(dragData.path, props.path)) {
+      console.error('Cannot move a folder into its own subfolder')
+      return
     }
 
-    emit("moveDirectTo", {
+    emit('moveDirectTo', {
       name: dragData.name,
       type: dragData.type,
       path: dragData.path,
       destination: props.path,
-    });
+    })
   } catch (error) {
-    console.error("Error handling file drop:", error);
+    console.error('Error handling file drop:', error)
   }
-};
+}
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FileVirtualList.vue b/apps/frontend/src/components/ui/servers/FileVirtualList.vue
index 40c41252f..a5ea9aa92 100644
--- a/apps/frontend/src/components/ui/servers/FileVirtualList.vue
+++ b/apps/frontend/src/components/ui/servers/FileVirtualList.vue
@@ -43,79 +43,79 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted,ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps<{
-  items: any[];
-}>();
+  items: any[]
+}>()
 
 const emit = defineEmits<{
   (
-    e: "delete" | "rename" | "download" | "move" | "edit" | "moveDirectTo" | "extract",
+    e: 'delete' | 'rename' | 'download' | 'move' | 'edit' | 'moveDirectTo' | 'extract',
     item: any,
-  ): void;
-  (e: "contextmenu", item: any, x: number, y: number): void;
-  (e: "loadMore"): void;
-}>();
+  ): void
+  (e: 'contextmenu', item: any, x: number, y: number): void
+  (e: 'loadMore'): void
+}>()
 
-const ITEM_HEIGHT = 61;
-const BUFFER_SIZE = 5;
+const ITEM_HEIGHT = 61
+const BUFFER_SIZE = 5
 
-const listContainer = ref<HTMLElement | null>(null);
-const windowScrollY = ref(0);
-const windowHeight = ref(0);
+const listContainer = ref<HTMLElement | null>(null)
+const windowScrollY = ref(0)
+const windowHeight = ref(0)
 
-const totalHeight = computed(() => props.items.length * ITEM_HEIGHT);
+const totalHeight = computed(() => props.items.length * ITEM_HEIGHT)
 
 const visibleRange = computed(() => {
-  if (!listContainer.value) return { start: 0, end: 0 };
+  if (!listContainer.value) return { start: 0, end: 0 }
 
-  const containerTop = listContainer.value.getBoundingClientRect().top + window.scrollY;
-  const relativeScrollTop = Math.max(0, windowScrollY.value - containerTop);
+  const containerTop = listContainer.value.getBoundingClientRect().top + window.scrollY
+  const relativeScrollTop = Math.max(0, windowScrollY.value - containerTop)
 
-  const start = Math.floor(relativeScrollTop / ITEM_HEIGHT);
-  const visibleCount = Math.ceil(windowHeight.value / ITEM_HEIGHT);
+  const start = Math.floor(relativeScrollTop / ITEM_HEIGHT)
+  const visibleCount = Math.ceil(windowHeight.value / ITEM_HEIGHT)
 
   return {
     start: Math.max(0, start - BUFFER_SIZE),
     end: Math.min(props.items.length, start + visibleCount + BUFFER_SIZE * 2),
-  };
-});
+  }
+})
 
 const visibleTop = computed(() => {
-  return visibleRange.value.start * ITEM_HEIGHT;
-});
+  return visibleRange.value.start * ITEM_HEIGHT
+})
 
 const visibleItems = computed(() => {
-  return props.items.slice(visibleRange.value.start, visibleRange.value.end);
-});
+  return props.items.slice(visibleRange.value.start, visibleRange.value.end)
+})
 
 const handleScroll = () => {
-  windowScrollY.value = window.scrollY;
+  windowScrollY.value = window.scrollY
 
-  if (!listContainer.value) return;
+  if (!listContainer.value) return
 
-  const containerBottom = listContainer.value.getBoundingClientRect().bottom;
-  const remainingScroll = containerBottom - window.innerHeight;
+  const containerBottom = listContainer.value.getBoundingClientRect().bottom
+  const remainingScroll = containerBottom - window.innerHeight
 
   if (remainingScroll < windowHeight.value * 0.2) {
-    emit("loadMore");
+    emit('loadMore')
   }
-};
+}
 
 const handleResize = () => {
-  windowHeight.value = window.innerHeight;
-};
+  windowHeight.value = window.innerHeight
+}
 
 onMounted(() => {
-  windowHeight.value = window.innerHeight;
-  window.addEventListener("scroll", handleScroll, { passive: true });
-  window.addEventListener("resize", handleResize, { passive: true });
-  handleScroll();
-});
+  windowHeight.value = window.innerHeight
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  window.addEventListener('resize', handleResize, { passive: true })
+  handleScroll()
+})
 
 onUnmounted(() => {
-  window.removeEventListener("scroll", handleScroll);
-  window.removeEventListener("resize", handleResize);
-});
+  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener('resize', handleResize)
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue b/apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue
index 01f90febd..b6fdb73a3 100644
--- a/apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue
@@ -33,64 +33,64 @@
 </template>
 
 <script setup lang="ts">
-import { PlusIcon, XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { computed, nextTick,ref } from "vue";
+import { PlusIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { computed, nextTick, ref } from 'vue'
 
 const props = defineProps<{
-  type: "file" | "directory";
-}>();
+  type: 'file' | 'directory'
+}>()
 
 const emit = defineEmits<{
-  (e: "create", name: string): void;
-}>();
+  (e: 'create', name: string): void
+}>()
 
-const modal = ref<typeof NewModal>();
-const displayType = computed(() => (props.type === "directory" ? "folder" : props.type));
-const createInput = ref<HTMLInputElement | null>(null);
-const itemName = ref("");
-const submitted = ref(false);
+const modal = ref<typeof NewModal>()
+const displayType = computed(() => (props.type === 'directory' ? 'folder' : props.type))
+const createInput = ref<HTMLInputElement | null>(null)
+const itemName = ref('')
+const submitted = ref(false)
 
 const error = computed(() => {
   if (!itemName.value) {
-    return "Name is required.";
+    return 'Name is required.'
   }
-  if (props.type === "file") {
-    const validPattern = /^[a-zA-Z0-9-_.\s]+$/;
+  if (props.type === 'file') {
+    const validPattern = /^[a-zA-Z0-9-_.\s]+$/
     if (!validPattern.test(itemName.value)) {
-      return "Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.";
+      return 'Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.'
     }
   } else {
-    const validPattern = /^[a-zA-Z0-9-_\s]+$/;
+    const validPattern = /^[a-zA-Z0-9-_\s]+$/
     if (!validPattern.test(itemName.value)) {
-      return "Name must contain only alphanumeric characters, dashes, underscores, or spaces.";
+      return 'Name must contain only alphanumeric characters, dashes, underscores, or spaces.'
     }
   }
-  return "";
-});
+  return ''
+})
 
 const handleSubmit = () => {
-  submitted.value = true;
+  submitted.value = true
   if (!error.value) {
-    emit("create", itemName.value);
-    hide();
+    emit('create', itemName.value)
+    hide()
   }
-};
+}
 
 const show = () => {
-  itemName.value = "";
-  submitted.value = false;
-  modal.value?.show();
+  itemName.value = ''
+  submitted.value = false
+  modal.value?.show()
   nextTick(() => {
     setTimeout(() => {
-      createInput.value?.focus();
-    }, 100);
-  });
-};
+      createInput.value?.focus()
+    }, 100)
+  })
+}
 
 const hide = () => {
-  modal.value?.hide();
-};
+  modal.value?.hide()
+}
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue b/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue
index 4c241fc03..e6cecb463 100644
--- a/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesDeleteItemModal.vue
@@ -42,36 +42,36 @@
 </template>
 
 <script setup lang="ts">
-import { FileIcon, FolderOpenIcon, TrashIcon, XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
+import { FileIcon, FolderOpenIcon, TrashIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
 
 defineProps<{
   item: {
-    name: string;
-    type: string;
-    count?: number;
-    size?: number;
-  } | null;
-}>();
+    name: string
+    type: string
+    count?: number
+    size?: number
+  } | null
+}>()
 
 const emit = defineEmits<{
-  (e: "delete"): void;
-}>();
+  (e: 'delete'): void
+}>()
 
-const modal = ref<typeof NewModal>();
+const modal = ref<typeof NewModal>()
 
 const handleSubmit = () => {
-  emit("delete");
-  hide();
-};
+  emit('delete')
+  hide()
+}
 
 const show = () => {
-  modal.value?.show();
-};
+  modal.value?.show()
+}
 
 const hide = () => {
-  modal.value?.hide();
-};
+  modal.value?.hide()
+}
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesImageViewer.vue b/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
index 1971b2c27..770de7c7a 100644
--- a/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
+++ b/apps/frontend/src/components/ui/servers/FilesImageViewer.vue
@@ -15,7 +15,7 @@
         class="flex h-full w-full flex-col items-center justify-center gap-8"
       >
         <UiServersIconsPanelErrorIcon />
-        <p class="m-0">{{ state.errorMessage || "Invalid or empty image file." }}</p>
+        <p class="m-0">{{ state.errorMessage || 'Invalid or empty image file.' }}</p>
       </div>
       <img
         v-show="isReady"
@@ -53,20 +53,20 @@
 </template>
 
 <script setup lang="ts">
-import { ZoomInIcon, ZoomOutIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { ZoomInIcon, ZoomOutIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-const ZOOM_MIN = 0.1;
-const ZOOM_MAX = 5;
-const ZOOM_IN_FACTOR = 1.2;
-const ZOOM_OUT_FACTOR = 0.8;
-const INITIAL_SCALE = 0.5;
-const MAX_IMAGE_DIMENSION = 4096;
+const ZOOM_MIN = 0.1
+const ZOOM_MAX = 5
+const ZOOM_IN_FACTOR = 1.2
+const ZOOM_OUT_FACTOR = 0.8
+const INITIAL_SCALE = 0.5
+const MAX_IMAGE_DIMENSION = 4096
 
 const props = defineProps<{
-  imageBlob: Blob;
-}>();
+  imageBlob: Blob
+}>()
 
 const state = ref({
   scale: INITIAL_SCALE,
@@ -77,102 +77,102 @@ const state = ref({
   startY: 0,
   isLoading: false,
   hasError: false,
-  errorMessage: "",
-});
+  errorMessage: '',
+})
 
-const imageRef = ref<HTMLImageElement | null>(null);
-const container = ref<HTMLElement | null>(null);
-const imageObjectUrl = ref("");
-const rafId = ref(0);
+const imageRef = ref<HTMLImageElement | null>(null)
+const container = ref<HTMLElement | null>(null)
+const imageObjectUrl = ref('')
+const rafId = ref(0)
 
-const isReady = computed(() => !state.value.isLoading && !state.value.hasError);
+const isReady = computed(() => !state.value.isLoading && !state.value.hasError)
 
 const imageStyle = computed(() => ({
   transform: `translate(-50%, -50%) scale(${state.value.scale}) translate(${state.value.translateX}px, ${state.value.translateY}px)`,
-  transition: state.value.isPanning ? "none" : "transform 0.3s ease-out",
-}));
+  transition: state.value.isPanning ? 'none' : 'transform 0.3s ease-out',
+}))
 
 const validateImageDimensions = (img: HTMLImageElement): boolean => {
   if (img.naturalWidth > MAX_IMAGE_DIMENSION || img.naturalHeight > MAX_IMAGE_DIMENSION) {
-    state.value.hasError = true;
-    state.value.errorMessage = `Image too large to view (max ${MAX_IMAGE_DIMENSION}x${MAX_IMAGE_DIMENSION} pixels)`;
-    return false;
+    state.value.hasError = true
+    state.value.errorMessage = `Image too large to view (max ${MAX_IMAGE_DIMENSION}x${MAX_IMAGE_DIMENSION} pixels)`
+    return false
   }
-  return true;
-};
+  return true
+}
 
 const updateImageUrl = (blob: Blob) => {
-  if (imageObjectUrl.value) URL.revokeObjectURL(imageObjectUrl.value);
-  imageObjectUrl.value = URL.createObjectURL(blob);
-};
+  if (imageObjectUrl.value) URL.revokeObjectURL(imageObjectUrl.value)
+  imageObjectUrl.value = URL.createObjectURL(blob)
+}
 
 const handleImageLoad = () => {
   if (!imageRef.value || !validateImageDimensions(imageRef.value)) {
-    state.value.isLoading = false;
-    return;
+    state.value.isLoading = false
+    return
   }
-  state.value.isLoading = false;
-  reset();
-};
+  state.value.isLoading = false
+  reset()
+}
 
 const handleImageError = () => {
-  state.value.isLoading = false;
-  state.value.hasError = true;
-  state.value.errorMessage = "Failed to load image";
-};
+  state.value.isLoading = false
+  state.value.hasError = true
+  state.value.errorMessage = 'Failed to load image'
+}
 
 const zoom = (factor: number) => {
-  const newScale = state.value.scale * factor;
-  state.value.scale = Math.max(ZOOM_MIN, Math.min(newScale, ZOOM_MAX));
-};
+  const newScale = state.value.scale * factor
+  state.value.scale = Math.max(ZOOM_MIN, Math.min(newScale, ZOOM_MAX))
+}
 
 const reset = () => {
-  state.value.scale = INITIAL_SCALE;
-  state.value.translateX = 0;
-  state.value.translateY = 0;
-};
+  state.value.scale = INITIAL_SCALE
+  state.value.translateX = 0
+  state.value.translateY = 0
+}
 
 const startPan = (e: MouseEvent) => {
-  state.value.isPanning = true;
-  state.value.startX = e.clientX - state.value.translateX;
-  state.value.startY = e.clientY - state.value.translateY;
-};
+  state.value.isPanning = true
+  state.value.startX = e.clientX - state.value.translateX
+  state.value.startY = e.clientY - state.value.translateY
+}
 
 const handlePan = (e: MouseEvent) => {
-  if (!state.value.isPanning) return;
-  cancelAnimationFrame(rafId.value);
+  if (!state.value.isPanning) return
+  cancelAnimationFrame(rafId.value)
   rafId.value = requestAnimationFrame(() => {
-    state.value.translateX = e.clientX - state.value.startX;
-    state.value.translateY = e.clientY - state.value.startY;
-  });
-};
+    state.value.translateX = e.clientX - state.value.startX
+    state.value.translateY = e.clientY - state.value.startY
+  })
+}
 
 const stopPan = () => {
-  state.value.isPanning = false;
-};
+  state.value.isPanning = false
+}
 
 const handleWheel = (e: WheelEvent) => {
-  const delta = e.deltaY * -0.001;
-  const factor = 1 + delta;
-  zoom(factor);
-};
+  const delta = e.deltaY * -0.001
+  const factor = 1 + delta
+  zoom(factor)
+}
 
 watch(
   () => props.imageBlob,
   (newBlob) => {
-    if (!newBlob) return;
-    state.value.isLoading = true;
-    state.value.hasError = false;
-    updateImageUrl(newBlob);
+    if (!newBlob) return
+    state.value.isLoading = true
+    state.value.hasError = false
+    updateImageUrl(newBlob)
   },
-);
+)
 
 onMounted(() => {
-  if (props.imageBlob) updateImageUrl(props.imageBlob);
-});
+  if (props.imageBlob) updateImageUrl(props.imageBlob)
+})
 
 onUnmounted(() => {
-  if (imageObjectUrl.value) URL.revokeObjectURL(imageObjectUrl.value);
-  cancelAnimationFrame(rafId.value);
-});
+  if (imageObjectUrl.value) URL.revokeObjectURL(imageObjectUrl.value)
+  cancelAnimationFrame(rafId.value)
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesLabelBar.vue b/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
index efbfcc00d..7465a705d 100644
--- a/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesLabelBar.vue
@@ -51,15 +51,15 @@
 </template>
 
 <script setup lang="ts">
-import ChevronDownIcon from "./icons/ChevronDownIcon.vue";
-import ChevronUpIcon from "./icons/ChevronUpIcon.vue";
+import ChevronDownIcon from './icons/ChevronDownIcon.vue'
+import ChevronUpIcon from './icons/ChevronUpIcon.vue'
 
 defineProps<{
-  sortField: string;
-  sortDesc: boolean;
-}>();
+  sortField: string
+  sortDesc: boolean
+}>()
 
 defineEmits<{
-  (e: "sort", field: string): void;
-}>();
+  (e: 'sort', field: string): void
+}>()
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesMoveItemModal.vue b/apps/frontend/src/components/ui/servers/FilesMoveItemModal.vue
index e7b453ca3..1e66ceac7 100644
--- a/apps/frontend/src/components/ui/servers/FilesMoveItemModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesMoveItemModal.vue
@@ -37,46 +37,46 @@
 </template>
 
 <script setup lang="ts">
-import { ArrowBigUpDashIcon, XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { computed,nextTick, ref } from "vue";
+import { ArrowBigUpDashIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { computed, nextTick, ref } from 'vue'
 
-const destinationInput = ref<HTMLInputElement | null>(null);
+const destinationInput = ref<HTMLInputElement | null>(null)
 
 const props = defineProps<{
-  item: { name: string } | null;
-  currentPath: string;
-}>();
+  item: { name: string } | null
+  currentPath: string
+}>()
 
 const emit = defineEmits<{
-  (e: "move", destination: string): void;
-}>();
+  (e: 'move', destination: string): void
+}>()
 
-const modal = ref<typeof NewModal>();
-const destination = ref("");
+const modal = ref<typeof NewModal>()
+const destination = ref('')
 const newpath = computed(() => {
-  const path = destination.value.replace("//", "/");
-  return path.startsWith("/") ? path : `/${path}`;
-});
+  const path = destination.value.replace('//', '/')
+  return path.startsWith('/') ? path : `/${path}`
+})
 
 const handleSubmit = () => {
-  emit("move", newpath.value);
-  hide();
-};
+  emit('move', newpath.value)
+  hide()
+}
 
 const show = () => {
-  destination.value = props.currentPath;
-  modal.value?.show();
+  destination.value = props.currentPath
+  modal.value?.show()
   nextTick(() => {
     setTimeout(() => {
-      destinationInput.value?.focus();
-    }, 100);
-  });
-};
+      destinationInput.value?.focus()
+    }, 100)
+  })
+}
 
 const hide = () => {
-  modal.value?.hide();
-};
+  modal.value?.hide()
+}
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesRenameItemModal.vue b/apps/frontend/src/components/ui/servers/FilesRenameItemModal.vue
index 380c8244b..4c4048f2d 100644
--- a/apps/frontend/src/components/ui/servers/FilesRenameItemModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesRenameItemModal.vue
@@ -32,63 +32,63 @@
 </template>
 
 <script setup lang="ts">
-import { EditIcon, XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { computed, nextTick,ref } from "vue";
+import { EditIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { computed, nextTick, ref } from 'vue'
 
 const props = defineProps<{
-  item: { name: string; type: string } | null;
-}>();
+  item: { name: string; type: string } | null
+}>()
 
 const emit = defineEmits<{
-  (e: "rename", newName: string): void;
-}>();
+  (e: 'rename', newName: string): void
+}>()
 
-const modal = ref<typeof NewModal>();
-const renameInput = ref<HTMLInputElement | null>(null);
-const itemName = ref("");
-const submitted = ref(false);
+const modal = ref<typeof NewModal>()
+const renameInput = ref<HTMLInputElement | null>(null)
+const itemName = ref('')
+const submitted = ref(false)
 
 const error = computed(() => {
   if (!itemName.value) {
-    return "Name is required.";
+    return 'Name is required.'
   }
-  if (props.item?.type === "file") {
-    const validPattern = /^[a-zA-Z0-9-_.\s]+$/;
+  if (props.item?.type === 'file') {
+    const validPattern = /^[a-zA-Z0-9-_.\s]+$/
     if (!validPattern.test(itemName.value)) {
-      return "Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.";
+      return 'Name must contain only alphanumeric characters, dashes, underscores, dots, or spaces.'
     }
   } else {
-    const validPattern = /^[a-zA-Z0-9-_\s]+$/;
+    const validPattern = /^[a-zA-Z0-9-_\s]+$/
     if (!validPattern.test(itemName.value)) {
-      return "Name must contain only alphanumeric characters, dashes, underscores, or spaces.";
+      return 'Name must contain only alphanumeric characters, dashes, underscores, or spaces.'
     }
   }
-  return "";
-});
+  return ''
+})
 
 const handleSubmit = () => {
-  submitted.value = true;
+  submitted.value = true
   if (!error.value) {
-    emit("rename", itemName.value);
-    hide();
+    emit('rename', itemName.value)
+    hide()
   }
-};
+}
 
 const show = (item: { name: string; type: string }) => {
-  itemName.value = item.name;
-  submitted.value = false;
-  modal.value?.show();
+  itemName.value = item.name
+  submitted.value = false
+  modal.value?.show()
   nextTick(() => {
     setTimeout(() => {
-      renameInput.value?.focus();
-    }, 100);
-  });
-};
+      renameInput.value?.focus()
+    }, 100)
+  })
+}
 
 const hide = () => {
-  modal.value?.hide();
-};
+  modal.value?.hide()
+}
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesUploadConflictModal.vue b/apps/frontend/src/components/ui/servers/FilesUploadConflictModal.vue
index 9b43a720f..336059c9c 100644
--- a/apps/frontend/src/components/ui/servers/FilesUploadConflictModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadConflictModal.vue
@@ -27,30 +27,30 @@
 </template>
 
 <script setup lang="ts">
-import { CheckIcon,XIcon } from "@modrinth/assets";
-import { ConfirmModal } from "@modrinth/ui";
-import { ref } from "vue";
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import { ConfirmModal } from '@modrinth/ui'
+import { ref } from 'vue'
 
-const path = ref("");
-const files = ref<string[]>([]);
+const path = ref('')
+const files = ref<string[]>([])
 
 const emit = defineEmits<{
-  (e: "proceed", path: string): void;
-}>();
+  (e: 'proceed', path: string): void
+}>()
 
-const modal = ref<typeof ConfirmModal>();
+const modal = ref<typeof ConfirmModal>()
 
-const hasMany = computed(() => files.value.length > 100);
+const hasMany = computed(() => files.value.length > 100)
 
 const show = (zipPath: string, conflictingFiles: string[]) => {
-  path.value = zipPath;
-  files.value = conflictingFiles;
-  modal.value?.show();
-};
+  path.value = zipPath
+  files.value = conflictingFiles
+  modal.value?.show()
+}
 
 const proceed = () => {
-  emit("proceed", path.value);
-};
+  emit('proceed', path.value)
+}
 
-defineExpose({ show });
+defineExpose({ show })
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue b/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
index 68fd5c92e..90dcb0cad 100644
--- a/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
@@ -16,7 +16,7 @@
       <div class="text-center">
         <UploadIcon class="mx-auto h-16 w-16" />
         <p class="mt-2 text-xl">
-          Drop {{ type ? type.toLocaleLowerCase() : "file" }}s here to upload
+          Drop {{ type ? type.toLocaleLowerCase() : 'file' }}s here to upload
         </p>
       </div>
     </div>
@@ -24,52 +24,52 @@
 </template>
 
 <script setup lang="ts">
-import { UploadIcon } from "@modrinth/assets";
-import { ref } from "vue";
+import { UploadIcon } from '@modrinth/assets'
+import { ref } from 'vue'
 
 const emit = defineEmits<{
-  (event: "filesDropped", files: File[]): void;
-}>();
+  (event: 'filesDropped', files: File[]): void
+}>()
 
 defineProps<{
-  overlayClass?: string;
-  type?: string;
-}>();
+  overlayClass?: string
+  type?: string
+}>()
 
-const isDragging = ref(false);
-const dragCounter = ref(0);
+const isDragging = ref(false)
+const dragCounter = ref(0)
 
 const handleDragEnter = (event: DragEvent) => {
-  event.preventDefault();
-  if (!event.dataTransfer?.types.includes("application/pyro-file-move")) {
-    dragCounter.value++;
-    isDragging.value = true;
+  event.preventDefault()
+  if (!event.dataTransfer?.types.includes('application/pyro-file-move')) {
+    dragCounter.value++
+    isDragging.value = true
   }
-};
+}
 
 const handleDragOver = (event: DragEvent) => {
-  event.preventDefault();
-};
+  event.preventDefault()
+}
 
 const handleDragLeave = (event: DragEvent) => {
-  event.preventDefault();
-  dragCounter.value--;
+  event.preventDefault()
+  dragCounter.value--
   if (dragCounter.value === 0) {
-    isDragging.value = false;
+    isDragging.value = false
   }
-};
+}
 
 const handleDrop = (event: DragEvent) => {
-  event.preventDefault();
-  isDragging.value = false;
-  dragCounter.value = 0;
+  event.preventDefault()
+  isDragging.value = false
+  dragCounter.value = 0
 
-  const isInternalMove = event.dataTransfer?.types.includes("application/pyro-file-move");
-  if (isInternalMove) return;
+  const isInternalMove = event.dataTransfer?.types.includes('application/pyro-file-move')
+  if (isInternalMove) return
 
-  const files = event.dataTransfer?.files;
+  const files = event.dataTransfer?.files
   if (files) {
-    emit("filesDropped", Array.from(files));
+    emit('filesDropped', Array.from(files))
   }
-};
+}
 </script>
diff --git a/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue b/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
index 476354ab7..6a5195b0f 100644
--- a/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
@@ -12,9 +12,9 @@
               <FolderOpenIcon class="size-4" />
               <span>
                 <span class="capitalize">
-                  {{ props.fileType ? props.fileType : "File" }} uploads
+                  {{ props.fileType ? props.fileType : 'File' }} uploads
                 </span>
-                <span>{{ activeUploads.length > 0 ? ` - ${activeUploads.length} left` : "" }}</span>
+                <span>{{ activeUploads.length > 0 ? ` - ${activeUploads.length} left` : '' }}</span>
               </span>
             </div>
           </div>
@@ -59,7 +59,7 @@
                 </template>
                 <template v-else-if="item.status === 'error-generic'">
                   <span class="text-red"
-                    >Failed - {{ item.error?.message || "An unexpected error occured." }}</span
+                    >Failed - {{ item.error?.message || 'An unexpected error occured.' }}</span
                   >
                 </template>
                 <template v-else-if="item.status === 'incorrect-type'">
@@ -101,118 +101,118 @@
 </template>
 
 <script setup lang="ts">
-import { CheckCircleIcon, FolderOpenIcon, XCircleIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
-import { computed, nextTick,ref, watch } from "vue";
+import { CheckCircleIcon, FolderOpenIcon, XCircleIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
+import { computed, nextTick, ref, watch } from 'vue'
 
-import type { FSModule } from "~/composables/servers/modules/fs.ts";
+import type { FSModule } from '~/composables/servers/modules/fs.ts'
 
 interface UploadItem {
-  file: File;
-  progress: number;
+  file: File
+  progress: number
   status:
-    | "pending"
-    | "uploading"
-    | "completed"
-    | "error-file-exists"
-    | "error-generic"
-    | "cancelled"
-    | "incorrect-type";
-  size: string;
-  uploader?: any;
-  error?: Error;
+    | 'pending'
+    | 'uploading'
+    | 'completed'
+    | 'error-file-exists'
+    | 'error-generic'
+    | 'cancelled'
+    | 'incorrect-type'
+  size: string
+  uploader?: any
+  error?: Error
 }
 
 interface Props {
-  currentPath: string;
-  fileType?: string;
-  marginBottom?: number;
-  acceptedTypes?: Array<string>;
-  fs: FSModule;
+  currentPath: string
+  fileType?: string
+  marginBottom?: number
+  acceptedTypes?: Array<string>
+  fs: FSModule
 }
 
 defineOptions({
   inheritAttrs: false,
-});
+})
 
-const props = defineProps<Props>();
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: "uploadComplete"): void;
-}>();
+  (e: 'uploadComplete'): void
+}>()
 
-const uploadStatusRef = ref<HTMLElement | null>(null);
-const statusContentRef = ref<HTMLElement | null>(null);
-const uploadQueue = ref<UploadItem[]>([]);
+const uploadStatusRef = ref<HTMLElement | null>(null)
+const statusContentRef = ref<HTMLElement | null>(null)
+const uploadQueue = ref<UploadItem[]>([])
 
-const isUploading = computed(() => uploadQueue.value.length > 0);
+const isUploading = computed(() => uploadQueue.value.length > 0)
 const activeUploads = computed(() =>
-  uploadQueue.value.filter((item) => item.status === "pending" || item.status === "uploading"),
-);
+  uploadQueue.value.filter((item) => item.status === 'pending' || item.status === 'uploading'),
+)
 
 const onUploadStatusEnter = (el: Element) => {
-  const height = (el as HTMLElement).scrollHeight + (props.marginBottom || 0);
-  (el as HTMLElement).style.height = "0";
-   
-  void (el as HTMLElement).offsetHeight;
-  (el as HTMLElement).style.height = `${height}px`;
-};
+  const height = (el as HTMLElement).scrollHeight + (props.marginBottom || 0)
+  ;(el as HTMLElement).style.height = '0'
+
+  void (el as HTMLElement).offsetHeight
+  ;(el as HTMLElement).style.height = `${height}px`
+}
 
 const onUploadStatusLeave = (el: Element) => {
-  const height = (el as HTMLElement).scrollHeight + (props.marginBottom || 0);
-  (el as HTMLElement).style.height = `${height}px`;
-   
-  void (el as HTMLElement).offsetHeight;
-  (el as HTMLElement).style.height = "0";
-};
+  const height = (el as HTMLElement).scrollHeight + (props.marginBottom || 0)
+  ;(el as HTMLElement).style.height = `${height}px`
+
+  void (el as HTMLElement).offsetHeight
+  ;(el as HTMLElement).style.height = '0'
+}
 
 watch(
   uploadQueue,
   () => {
-    if (!uploadStatusRef.value) return;
-    const el = uploadStatusRef.value;
-    const itemsHeight = uploadQueue.value.length * 32;
-    const headerHeight = 12;
-    const gap = 8;
-    const padding = 32;
-    const totalHeight = padding + headerHeight + gap + itemsHeight + (props.marginBottom || 0);
-    el.style.height = `${totalHeight}px`;
+    if (!uploadStatusRef.value) return
+    const el = uploadStatusRef.value
+    const itemsHeight = uploadQueue.value.length * 32
+    const headerHeight = 12
+    const gap = 8
+    const padding = 32
+    const totalHeight = padding + headerHeight + gap + itemsHeight + (props.marginBottom || 0)
+    el.style.height = `${totalHeight}px`
   },
   { deep: true },
-);
+)
 
 const formatFileSize = (bytes: number): string => {
-  if (bytes < 1024) return bytes + " B";
-  if (bytes < 1024 ** 2) return (bytes / 1024).toFixed(1) + " KB";
-  if (bytes < 1024 ** 3) return (bytes / 1024 ** 2).toFixed(1) + " MB";
-  return (bytes / 1024 ** 3).toFixed(1) + " GB";
-};
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 ** 2) return (bytes / 1024).toFixed(1) + ' KB'
+  if (bytes < 1024 ** 3) return (bytes / 1024 ** 2).toFixed(1) + ' MB'
+  return (bytes / 1024 ** 3).toFixed(1) + ' GB'
+}
 
 const cancelUpload = (item: UploadItem) => {
-  if (item.uploader && item.status === "uploading") {
-    item.uploader.cancel();
-    item.status = "cancelled";
+  if (item.uploader && item.status === 'uploading') {
+    item.uploader.cancel()
+    item.status = 'cancelled'
 
     setTimeout(async () => {
-      const index = uploadQueue.value.findIndex((qItem) => qItem.file.name === item.file.name);
+      const index = uploadQueue.value.findIndex((qItem) => qItem.file.name === item.file.name)
       if (index !== -1) {
-        uploadQueue.value.splice(index, 1);
-        await nextTick();
+        uploadQueue.value.splice(index, 1)
+        await nextTick()
       }
-    }, 5000);
+    }, 5000)
   }
-};
+}
 
-const badFileTypeMsg = "Upload had incorrect file type";
+const badFileTypeMsg = 'Upload had incorrect file type'
 const uploadFile = async (file: File) => {
   const uploadItem: UploadItem = {
     file,
     progress: 0,
-    status: "pending",
+    status: 'pending',
     size: formatFileSize(file.size),
-  };
+  }
 
-  uploadQueue.value.push(uploadItem);
+  uploadQueue.value.push(uploadItem)
 
   try {
     if (
@@ -220,82 +220,82 @@ const uploadFile = async (file: File) => {
       !props.acceptedTypes.includes(file.type) &&
       !props.acceptedTypes.some((type) => file.name.endsWith(type))
     ) {
-      throw new Error(badFileTypeMsg);
+      throw new Error(badFileTypeMsg)
     }
 
-    uploadItem.status = "uploading";
-    const filePath = `${props.currentPath}/${file.name}`.replace("//", "/");
-    const uploader = await props.fs.uploadFile(filePath, file);
-    uploadItem.uploader = uploader;
+    uploadItem.status = 'uploading'
+    const filePath = `${props.currentPath}/${file.name}`.replace('//', '/')
+    const uploader = await props.fs.uploadFile(filePath, file)
+    uploadItem.uploader = uploader
 
     if (uploader?.onProgress) {
       uploader.onProgress(({ progress }: { progress: number }) => {
-        const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
+        const index = uploadQueue.value.findIndex((item) => item.file.name === file.name)
         if (index !== -1) {
-          uploadQueue.value[index].progress = Math.round(progress);
+          uploadQueue.value[index].progress = Math.round(progress)
         }
-      });
+      })
     }
 
-    await uploader?.promise;
-    const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
-    if (index !== -1 && uploadQueue.value[index].status !== "cancelled") {
-      uploadQueue.value[index].status = "completed";
-      uploadQueue.value[index].progress = 100;
+    await uploader?.promise
+    const index = uploadQueue.value.findIndex((item) => item.file.name === file.name)
+    if (index !== -1 && uploadQueue.value[index].status !== 'cancelled') {
+      uploadQueue.value[index].status = 'completed'
+      uploadQueue.value[index].progress = 100
     }
 
-    await nextTick();
+    await nextTick()
 
     setTimeout(async () => {
-      const removeIndex = uploadQueue.value.findIndex((item) => item.file.name === file.name);
+      const removeIndex = uploadQueue.value.findIndex((item) => item.file.name === file.name)
       if (removeIndex !== -1) {
-        uploadQueue.value.splice(removeIndex, 1);
-        await nextTick();
+        uploadQueue.value.splice(removeIndex, 1)
+        await nextTick()
       }
-    }, 5000);
+    }, 5000)
 
-    emit("uploadComplete");
+    emit('uploadComplete')
   } catch (error) {
-    console.error("Error uploading file:", error);
-    const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
-    if (index !== -1 && uploadQueue.value[index].status !== "cancelled") {
-      const target = uploadQueue.value[index];
+    console.error('Error uploading file:', error)
+    const index = uploadQueue.value.findIndex((item) => item.file.name === file.name)
+    if (index !== -1 && uploadQueue.value[index].status !== 'cancelled') {
+      const target = uploadQueue.value[index]
 
       if (error instanceof Error) {
         if (error.message === badFileTypeMsg) {
-          target.status = "incorrect-type";
-        } else if (target.progress === 100 && error.message.includes("401")) {
-          target.status = "error-file-exists";
+          target.status = 'incorrect-type'
+        } else if (target.progress === 100 && error.message.includes('401')) {
+          target.status = 'error-file-exists'
         } else {
-          target.status = "error-generic";
-          target.error = error;
+          target.status = 'error-generic'
+          target.error = error
         }
       }
     }
 
     setTimeout(async () => {
-      const removeIndex = uploadQueue.value.findIndex((item) => item.file.name === file.name);
+      const removeIndex = uploadQueue.value.findIndex((item) => item.file.name === file.name)
       if (removeIndex !== -1) {
-        uploadQueue.value.splice(removeIndex, 1);
-        await nextTick();
+        uploadQueue.value.splice(removeIndex, 1)
+        await nextTick()
       }
-    }, 5000);
+    }, 5000)
 
-    if (error instanceof Error && error.message !== "Upload cancelled") {
+    if (error instanceof Error && error.message !== 'Upload cancelled') {
       addNotification({
-        group: "files",
-        title: "Upload failed",
+        group: 'files',
+        title: 'Upload failed',
         text: `Failed to upload ${file.name}`,
-        type: "error",
-      });
+        type: 'error',
+      })
     }
   }
-};
+}
 
 defineExpose({
   uploadFile,
   cancelUpload,
-});
+})
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue b/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue
index e7c4312a9..138089c62 100644
--- a/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue
@@ -6,7 +6,7 @@
     <form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
       <div class="flex flex-col gap-2">
         <div class="font-bold text-contrast">
-          {{ cf ? `How to get the modpack version's URL` : "URL of .zip file" }}
+          {{ cf ? `How to get the modpack version's URL` : 'URL of .zip file' }}
         </div>
         <ol v-if="cf" class="mb-1 mt-0 flex flex-col gap-1 pl-8 leading-normal text-secondary">
           <li>
@@ -58,13 +58,13 @@
           <button v-tooltip="error" :disabled="submitted || !!error" type="submit">
             <SpinnerIcon v-if="submitted" class="animate-spin" />
             <DownloadIcon v-else class="h-5 w-5" />
-            {{ submitted ? "Installing..." : "Install" }}
+            {{ submitted ? 'Installing...' : 'Install' }}
           </button>
         </ButtonStyled>
         <ButtonStyled>
           <button type="button" @click="hide">
             <XIcon class="h-5 w-5" />
-            {{ submitted ? "Close" : "Cancel" }}
+            {{ submitted ? 'Close' : 'Cancel' }}
           </button>
         </ButtonStyled>
       </div>
@@ -73,84 +73,84 @@
 </template>
 
 <script setup lang="ts">
-import { DownloadIcon, ExternalIcon, SpinnerIcon, XIcon } from "@modrinth/assets";
-import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
-import { ModrinthServersFetchError } from "@modrinth/utils";
-import { computed, nextTick,ref } from "vue";
+import { DownloadIcon, ExternalIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import { BackupWarning, ButtonStyled, NewModal } from '@modrinth/ui'
+import { ModrinthServersFetchError } from '@modrinth/utils'
+import { computed, nextTick, ref } from 'vue'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
-import { handleError } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
+import { handleError } from '~/composables/servers/modrinth-servers.ts'
 
-const cf = ref(false);
+const cf = ref(false)
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const modal = ref<typeof NewModal>();
-const urlInput = ref<HTMLInputElement | null>(null);
-const url = ref("");
-const submitted = ref(false);
+const modal = ref<typeof NewModal>()
+const urlInput = ref<HTMLInputElement | null>(null)
+const url = ref('')
+const submitted = ref(false)
 
-const trimmedUrl = computed(() => url.value.trim());
+const trimmedUrl = computed(() => url.value.trim())
 
-const regex = /https:\/\/(www\.)?curseforge\.com\/minecraft\/modpacks\/[^/]+\/files\/\d+/;
+const regex = /https:\/\/(www\.)?curseforge\.com\/minecraft\/modpacks\/[^/]+\/files\/\d+/
 
 const error = computed(() => {
   if (trimmedUrl.value.length === 0) {
-    return "URL is required.";
+    return 'URL is required.'
   }
   if (cf.value && !regex.test(trimmedUrl.value)) {
-    return "URL must be a CurseForge modpack version URL.";
-  } else if (!cf.value && !trimmedUrl.value.includes("/")) {
-    return "URL must be valid.";
+    return 'URL must be a CurseForge modpack version URL.'
+  } else if (!cf.value && !trimmedUrl.value.includes('/')) {
+    return 'URL must be valid.'
   }
-  return "";
-});
+  return ''
+})
 
 const handleSubmit = async () => {
-  submitted.value = true;
+  submitted.value = true
   if (!error.value) {
     // hide();
     try {
-      const dry = await props.server.fs.extractFile(trimmedUrl.value, true, true);
+      const dry = await props.server.fs.extractFile(trimmedUrl.value, true, true)
 
       if (!cf.value || dry.modpack_name) {
-        await props.server.fs.extractFile(trimmedUrl.value, true, false, true);
-        hide();
+        await props.server.fs.extractFile(trimmedUrl.value, true, false, true)
+        hide()
       } else {
-        submitted.value = false;
+        submitted.value = false
         handleError(
           new ModrinthServersFetchError(
-            "Could not find CurseForge modpack at that URL.",
+            'Could not find CurseForge modpack at that URL.',
             404,
             new Error(`No modpack found at ${url.value}`),
           ),
-        );
+        )
       }
     } catch (error) {
-      submitted.value = false;
-      console.error("Error installing:", error);
-      handleError(error);
+      submitted.value = false
+      console.error('Error installing:', error)
+      handleError(error)
     }
   }
-};
+}
 
 const show = (isCf: boolean) => {
-  cf.value = isCf;
-  url.value = "";
-  submitted.value = false;
-  modal.value?.show();
+  cf.value = isCf
+  url.value = ''
+  submitted.value = false
+  modal.value?.show()
   nextTick(() => {
     setTimeout(() => {
-      urlInput.value?.focus();
-    }, 100);
-  });
-};
+      urlInput.value?.focus()
+    }, 100)
+  })
+}
 
 const hide = () => {
-  modal.value?.hide();
-};
+  modal.value?.hide()
+}
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
diff --git a/apps/frontend/src/components/ui/servers/Globe.vue b/apps/frontend/src/components/ui/servers/Globe.vue
index de26e6fcb..05aff55b8 100644
--- a/apps/frontend/src/components/ui/servers/Globe.vue
+++ b/apps/frontend/src/components/ui/servers/Globe.vue
@@ -42,20 +42,20 @@
 </template>
 
 <script setup>
-import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
-import { onMounted, onUnmounted,ref } from "vue";
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { onMounted, onUnmounted, ref } from 'vue'
 
-const container = ref(null);
-const showLabels = ref(false);
+const container = ref(null)
+const showLabels = ref(false)
 
 const locations = ref([
   // Active locations
-  { name: "New York", lat: 40.7128, lng: -74.006, active: true, clicked: false },
-  { name: "Los Angeles", lat: 34.0522, lng: -118.2437, active: true, clicked: false },
-  { name: "Miami", lat: 25.7617, lng: -80.1918, active: true, clicked: false },
-  { name: "Spokane", lat: 47.667309, lng: -117.411922, active: true, clicked: false },
-  { name: "Dallas", lat: 32.78372, lng: -96.7947, active: true, clicked: false },
+  { name: 'New York', lat: 40.7128, lng: -74.006, active: true, clicked: false },
+  { name: 'Los Angeles', lat: 34.0522, lng: -118.2437, active: true, clicked: false },
+  { name: 'Miami', lat: 25.7617, lng: -80.1918, active: true, clicked: false },
+  { name: 'Spokane', lat: 47.667309, lng: -117.411922, active: true, clicked: false },
+  { name: 'Dallas', lat: 32.78372, lng: -96.7947, active: true, clicked: false },
   // Future Locations
   // { name: "London", lat: 51.5074, lng: -0.1278, active: false, clicked: false },
   // { name: "Frankfurt", lat: 50.1109, lng: 8.6821, active: false, clicked: false },
@@ -66,60 +66,60 @@ const locations = ref([
   // { name: "Sydney", lat: -33.8688, lng: 151.2093, active: false, clicked: false },
   // { name: "São Paulo", lat: -23.5505, lng: -46.6333, active: false, clicked: false },
   // { name: "Toronto", lat: 43.6532, lng: -79.3832, active: false, clicked: false },
-]);
+])
 
 const isLocationVisible = (location) => {
-  if (!location.screenPosition || !globe) return false;
+  if (!location.screenPosition || !globe) return false
 
-  const vector = latLngToVector3(location.lat, location.lng).clone();
-  vector.applyMatrix4(globe.matrixWorld);
+  const vector = latLngToVector3(location.lat, location.lng).clone()
+  vector.applyMatrix4(globe.matrixWorld)
 
-  const cameraVector = new THREE.Vector3();
-  camera.getWorldPosition(cameraVector);
+  const cameraVector = new THREE.Vector3()
+  camera.getWorldPosition(cameraVector)
 
-  const viewVector = vector.clone().sub(cameraVector).normalize();
+  const viewVector = vector.clone().sub(cameraVector).normalize()
 
-  const normal = vector.clone().normalize();
+  const normal = vector.clone().normalize()
 
-  const dotProduct = normal.dot(viewVector);
+  const dotProduct = normal.dot(viewVector)
 
-  return dotProduct < -0.15;
-};
+  return dotProduct < -0.15
+}
 
 const toggleLocationClicked = (location) => {
-  console.log("clicked", location.name);
-  locations.value.find((loc) => loc.name === location.name).clicked = !location.clicked;
-};
+  console.log('clicked', location.name)
+  locations.value.find((loc) => loc.name === location.name).clicked = !location.clicked
+}
 
-let scene, camera, renderer, globe, controls;
-let animationFrame;
+let scene, camera, renderer, globe, controls
+let animationFrame
 
 const init = () => {
-  scene = new THREE.Scene();
+  scene = new THREE.Scene()
   camera = new THREE.PerspectiveCamera(
     45,
     container.value.clientWidth / container.value.clientHeight,
     0.1,
     1000,
-  );
+  )
   renderer = new THREE.WebGLRenderer({
     antialias: true,
     alpha: true,
-    powerPreference: "low-power",
-  });
-  renderer.setPixelRatio(window.devicePixelRatio);
-  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
-  container.value.appendChild(renderer.domElement);
+    powerPreference: 'low-power',
+  })
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(container.value.clientWidth, container.value.clientHeight)
+  container.value.appendChild(renderer.domElement)
 
-  const geometry = new THREE.SphereGeometry(5, 64, 64);
-  const outlineTexture = new THREE.TextureLoader().load("/earth-outline.png");
-  outlineTexture.minFilter = THREE.LinearFilter;
-  outlineTexture.magFilter = THREE.LinearFilter;
+  const geometry = new THREE.SphereGeometry(5, 64, 64)
+  const outlineTexture = new THREE.TextureLoader().load('/earth-outline.png')
+  outlineTexture.minFilter = THREE.LinearFilter
+  outlineTexture.magFilter = THREE.LinearFilter
 
   const material = new THREE.ShaderMaterial({
     uniforms: {
       outlineTexture: { value: outlineTexture },
-      globeColor: { value: new THREE.Color("#60fbb5") },
+      globeColor: { value: new THREE.Color('#60fbb5') },
     },
     vertexShader: `
       varying vec2 vUv;
@@ -141,17 +141,17 @@ const init = () => {
     `,
     transparent: true,
     side: THREE.FrontSide,
-  });
+  })
 
-  globe = new THREE.Mesh(geometry, material);
-  scene.add(globe);
+  globe = new THREE.Mesh(geometry, material)
+  scene.add(globe)
 
-  const atmosphereGeometry = new THREE.SphereGeometry(5.2, 64, 64);
+  const atmosphereGeometry = new THREE.SphereGeometry(5.2, 64, 64)
   const atmosphereMaterial = new THREE.ShaderMaterial({
     transparent: true,
     side: THREE.BackSide,
     uniforms: {
-      color: { value: new THREE.Color("#56f690") },
+      color: { value: new THREE.Color('#56f690') },
       viewVector: { value: camera.position },
     },
     vertexShader: `
@@ -171,92 +171,92 @@ const init = () => {
         gl_FragColor = vec4(color, intensity * 0.4);
       }
     `,
-  });
+  })
 
-  const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
-  scene.add(atmosphere);
+  const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial)
+  scene.add(atmosphere)
 
-  const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
-  scene.add(ambientLight);
+  const ambientLight = new THREE.AmbientLight(0x404040, 0.5)
+  scene.add(ambientLight)
 
-  camera.position.z = 15;
+  camera.position.z = 15
 
-  controls = new OrbitControls(camera, renderer.domElement);
-  controls.enableDamping = true;
-  controls.dampingFactor = 0.05;
-  controls.rotateSpeed = 0.3;
-  controls.enableZoom = false;
-  controls.enablePan = false;
-  controls.autoRotate = true;
-  controls.autoRotateSpeed = 0.05;
-  controls.minPolarAngle = Math.PI * 0.3;
-  controls.maxPolarAngle = Math.PI * 0.7;
+  controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true
+  controls.dampingFactor = 0.05
+  controls.rotateSpeed = 0.3
+  controls.enableZoom = false
+  controls.enablePan = false
+  controls.autoRotate = true
+  controls.autoRotateSpeed = 0.05
+  controls.minPolarAngle = Math.PI * 0.3
+  controls.maxPolarAngle = Math.PI * 0.7
 
-  globe.rotation.y = Math.PI * 1.9;
-  globe.rotation.x = Math.PI * 0.15;
-};
+  globe.rotation.y = Math.PI * 1.9
+  globe.rotation.x = Math.PI * 0.15
+}
 
 const animate = () => {
-  animationFrame = requestAnimationFrame(animate);
-  controls.update();
+  animationFrame = requestAnimationFrame(animate)
+  controls.update()
 
   locations.value.forEach((location) => {
-    const position = latLngToVector3(location.lat, location.lng);
-    const vector = position.clone();
-    vector.applyMatrix4(globe.matrixWorld);
+    const position = latLngToVector3(location.lat, location.lng)
+    const vector = position.clone()
+    vector.applyMatrix4(globe.matrixWorld)
 
-    const coords = vector.project(camera);
+    const coords = vector.project(camera)
     const screenPosition = {
       x: (coords.x * 0.5 + 0.5) * container.value.clientWidth,
       y: (-coords.y * 0.5 + 0.5) * container.value.clientHeight,
-    };
-    location.screenPosition = screenPosition;
-  });
+    }
+    location.screenPosition = screenPosition
+  })
 
-  renderer.render(scene, camera);
-};
+  renderer.render(scene, camera)
+}
 
 const latLngToVector3 = (lat, lng) => {
-  const phi = (90 - lat) * (Math.PI / 180);
-  const theta = (lng + 180) * (Math.PI / 180);
-  const radius = 5;
+  const phi = (90 - lat) * (Math.PI / 180)
+  const theta = (lng + 180) * (Math.PI / 180)
+  const radius = 5
 
   return new THREE.Vector3(
     -radius * Math.sin(phi) * Math.cos(theta),
     radius * Math.cos(phi),
     radius * Math.sin(phi) * Math.sin(theta),
-  );
-};
+  )
+}
 
 const handleResize = () => {
-  if (!container.value) return;
-  camera.aspect = container.value.clientWidth / container.value.clientHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
-};
+  if (!container.value) return
+  camera.aspect = container.value.clientWidth / container.value.clientHeight
+  camera.updateProjectionMatrix()
+  renderer.setSize(container.value.clientWidth, container.value.clientHeight)
+}
 
 onMounted(() => {
-  init();
-  animate();
-  window.addEventListener("resize", handleResize);
+  init()
+  animate()
+  window.addEventListener('resize', handleResize)
 
   setTimeout(() => {
-    showLabels.value = true;
-  }, 1000);
-});
+    showLabels.value = true
+  }, 1000)
+})
 
 onUnmounted(() => {
   if (animationFrame) {
-    cancelAnimationFrame(animationFrame);
+    cancelAnimationFrame(animationFrame)
   }
-  window.removeEventListener("resize", handleResize);
+  window.removeEventListener('resize', handleResize)
   if (renderer) {
-    renderer.dispose();
+    renderer.dispose()
   }
   if (container.value) {
-    container.value.innerHTML = "";
+    container.value.innerHTML = ''
   }
-});
+})
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/InstallingTicker.vue b/apps/frontend/src/components/ui/servers/InstallingTicker.vue
index db2686861..11f696a5d 100644
--- a/apps/frontend/src/components/ui/servers/InstallingTicker.vue
+++ b/apps/frontend/src/components/ui/servers/InstallingTicker.vue
@@ -14,31 +14,31 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted,ref } from "vue";
+import { onMounted, onUnmounted, ref } from 'vue'
 
 const msgs = [
-  "Organizing files...",
-  "Downloading mods...",
-  "Configuring server...",
-  "Setting up environment...",
-  "Adding Java...",
-];
+  'Organizing files...',
+  'Downloading mods...',
+  'Configuring server...',
+  'Setting up environment...',
+  'Adding Java...',
+]
 
-const currentIndex = ref(0);
+const currentIndex = ref(0)
 
-let intervalId: NodeJS.Timeout | null = null;
+let intervalId: NodeJS.Timeout | null = null
 
 onMounted(() => {
   intervalId = setInterval(() => {
-    currentIndex.value = (currentIndex.value + 1) % msgs.length;
-  }, 3000);
-});
+    currentIndex.value = (currentIndex.value + 1) % msgs.length
+  }, 3000)
+})
 
 onUnmounted(() => {
   if (intervalId) {
-    clearInterval(intervalId);
+    clearInterval(intervalId)
   }
-});
+})
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/LoaderSelector.vue b/apps/frontend/src/components/ui/servers/LoaderSelector.vue
index b5f526555..54aa58b1b 100644
--- a/apps/frontend/src/components/ui/servers/LoaderSelector.vue
+++ b/apps/frontend/src/components/ui/servers/LoaderSelector.vue
@@ -60,36 +60,36 @@
 <script setup lang="ts">
 const props = defineProps<{
   data: {
-    loader: string | null;
-    loader_version: string | null;
-  };
-  ignoreCurrentInstallation?: boolean;
-  isInstalling?: boolean;
-}>();
+    loader: string | null
+    loader_version: string | null
+  }
+  ignoreCurrentInstallation?: boolean
+  isInstalling?: boolean
+}>()
 
 const emit = defineEmits<{
-  (e: "selectLoader", loader: string): void;
-}>();
+  (e: 'selectLoader', loader: string): void
+}>()
 
-const vanillaLoaders = [{ name: "Vanilla" as const, displayName: "Vanilla" }];
+const vanillaLoaders = [{ name: 'Vanilla' as const, displayName: 'Vanilla' }]
 
 const modLoaders = [
-  { name: "Fabric" as const, displayName: "Fabric" },
-  { name: "Quilt" as const, displayName: "Quilt" },
-  { name: "Forge" as const, displayName: "Forge" },
-  { name: "NeoForge" as const, displayName: "NeoForge" },
-];
+  { name: 'Fabric' as const, displayName: 'Fabric' },
+  { name: 'Quilt' as const, displayName: 'Quilt' },
+  { name: 'Forge' as const, displayName: 'Forge' },
+  { name: 'NeoForge' as const, displayName: 'NeoForge' },
+]
 
 const pluginLoaders = [
-  { name: "Paper" as const, displayName: "Paper" },
-  { name: "Purpur" as const, displayName: "Purpur" },
-];
+  { name: 'Paper' as const, displayName: 'Paper' },
+  { name: 'Purpur' as const, displayName: 'Purpur' },
+]
 
 const isCurrentLoader = (loaderName: string) => {
-  return props.data.loader?.toLowerCase() === loaderName.toLowerCase();
-};
+  return props.data.loader?.toLowerCase() === loaderName.toLowerCase()
+}
 
 const selectLoader = (loader: string) => {
-  emit("selectLoader", loader);
-};
+  emit('selectLoader', loader)
+}
 </script>
diff --git a/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue b/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
index c9e8a8aa5..d86f85330 100644
--- a/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
+++ b/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
@@ -33,39 +33,39 @@
     <ButtonStyled>
       <button :disabled="isInstalling" @click="onSelect">
         <DownloadIcon class="h-5 w-5" />
-        {{ isCurrentLoader ? "Reinstall" : "Install" }}
+        {{ isCurrentLoader ? 'Reinstall' : 'Install' }}
       </button>
     </ButtonStyled>
   </div>
 </template>
 
 <script setup lang="ts">
-import { CheckIcon, DownloadIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { CheckIcon, DownloadIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
 
 interface LoaderInfo {
-  name: "Vanilla" | "Fabric" | "Forge" | "Quilt" | "Paper" | "NeoForge" | "Purpur";
-  displayName: string;
+  name: 'Vanilla' | 'Fabric' | 'Forge' | 'Quilt' | 'Paper' | 'NeoForge' | 'Purpur'
+  displayName: string
 }
 
 interface Props {
-  loader: LoaderInfo;
-  currentLoader: string | null;
-  loaderVersion: string | null;
-  isInstalling?: boolean;
+  loader: LoaderInfo
+  currentLoader: string | null
+  loaderVersion: string | null
+  isInstalling?: boolean
 }
 
-const props = defineProps<Props>();
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: "select", loader: string): void;
-}>();
+  (e: 'select', loader: string): void
+}>()
 
 const isCurrentLoader = computed(() => {
-  return props.currentLoader?.toLowerCase() === props.loader.name.toLowerCase();
-});
+  return props.currentLoader?.toLowerCase() === props.loader.name.toLowerCase()
+})
 
 const onSelect = () => {
-  emit("select", props.loader.name);
-};
+  emit('select', props.loader.name)
+}
 </script>
diff --git a/apps/frontend/src/components/ui/servers/LogLine.vue b/apps/frontend/src/components/ui/servers/LogLine.vue
index f35fed281..6ada25b43 100644
--- a/apps/frontend/src/components/ui/servers/LogLine.vue
+++ b/apps/frontend/src/components/ui/servers/LogLine.vue
@@ -19,54 +19,54 @@
 </template>
 
 <script setup lang="ts">
-import Convert from "ansi-to-html";
-import DOMPurify from "dompurify";
-import { computed, onMounted, onUnmounted,ref } from "vue";
+import Convert from 'ansi-to-html'
+import DOMPurify from 'dompurify'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps<{
-  log: string;
-}>();
+  log: string
+}>()
 
 defineEmits<{
-  "show-full-log": [log: string];
-}>();
+  'show-full-log': [log: string]
+}>()
 
-const logContent = ref<HTMLElement | null>(null);
-const isOverflowing = ref(false);
+const logContent = ref<HTMLElement | null>(null)
+const isOverflowing = ref(false)
 
 const checkOverflow = () => {
   if (logContent.value && !isOverflowing.value) {
-    isOverflowing.value = logContent.value.scrollWidth > logContent.value.clientWidth;
+    isOverflowing.value = logContent.value.scrollWidth > logContent.value.clientWidth
   }
-};
+}
 
 const convert = new Convert({
-  fg: "#FFF",
-  bg: "#000",
+  fg: '#FFF',
+  bg: '#000',
   newline: false,
   escapeXML: true,
   stream: false,
-});
+})
 
 const sanitizedLog = computed(() =>
   DOMPurify.sanitize(convert.toHtml(props.log), {
-    ALLOWED_TAGS: ["span"],
-    ALLOWED_ATTR: ["style"],
+    ALLOWED_TAGS: ['span'],
+    ALLOWED_ATTR: ['style'],
     USE_PROFILES: { html: true },
   }),
-);
+)
 
 const preventSelection = (e: MouseEvent) => {
-  e.preventDefault();
-};
+  e.preventDefault()
+}
 
 onMounted(() => {
-  logContent.value?.addEventListener("mousedown", preventSelection);
-});
+  logContent.value?.addEventListener('mousedown', preventSelection)
+})
 
 onUnmounted(() => {
-  logContent.value?.removeEventListener("mousedown", preventSelection);
-});
+  logContent.value?.removeEventListener('mousedown', preventSelection)
+})
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
index 367c46646..1d43a3c80 100644
--- a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
+++ b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
@@ -62,7 +62,7 @@
           <button :disabled="!canTakeAction" @click="initiateAction('Stop')">
             <div class="flex gap-1">
               <StopCircleIcon class="h-5 w-5" />
-              <span>{{ isStoppingState ? "Stopping..." : "Stop" }}</span>
+              <span>{{ isStoppingState ? 'Stopping...' : 'Stop' }}</span>
             </div>
           </button>
         </ButtonStyled>
@@ -115,177 +115,177 @@ import {
   StopCircleIcon,
   UpdatedIcon,
   XIcon,
-} from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import type { PowerAction as ServerPowerAction, ServerState } from "@modrinth/utils";
-import { useStorage } from "@vueuse/core";
-import { computed,ref } from "vue";
-import { useRouter } from "vue-router";
+} from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
+import type { PowerAction as ServerPowerAction, ServerState } from '@modrinth/utils'
+import { useStorage } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-const flags = useFeatureFlags();
+const flags = useFeatureFlags()
 
 interface PowerAction {
-  action: ServerPowerAction;
-  nextState: ServerState;
+  action: ServerPowerAction
+  nextState: ServerState
 }
 
 const props = defineProps<{
-  isOnline: boolean;
-  isActioning: boolean;
-  isInstalling: boolean;
-  disabled: boolean;
-  serverName?: string;
-  serverData: object;
-  uptimeSeconds: number;
-}>();
+  isOnline: boolean
+  isActioning: boolean
+  isInstalling: boolean
+  disabled: boolean
+  serverName?: string
+  serverData: object
+  uptimeSeconds: number
+}>()
 
 const emit = defineEmits<{
-  (e: "action", action: ServerPowerAction): void;
-}>();
+  (e: 'action', action: ServerPowerAction): void
+}>()
 
-const router = useRouter();
-const serverId = router.currentRoute.value.params.id;
-const confirmActionModal = ref<InstanceType<typeof NewModal> | null>(null);
-const detailsModal = ref<InstanceType<typeof NewModal> | null>(null);
+const router = useRouter()
+const serverId = router.currentRoute.value.params.id
+const confirmActionModal = ref<InstanceType<typeof NewModal> | null>(null)
+const detailsModal = ref<InstanceType<typeof NewModal> | null>(null)
 
 const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
   powerDontAskAgain: false,
-});
+})
 
-const serverState = ref<ServerState>(props.isOnline ? "running" : "stopped");
-const powerAction = ref<PowerAction | null>(null);
-const dontAskAgain = ref(false);
-const startingDelay = ref(false);
+const serverState = ref<ServerState>(props.isOnline ? 'running' : 'stopped')
+const powerAction = ref<PowerAction | null>(null)
+const dontAskAgain = ref(false)
+const startingDelay = ref(false)
 
 const canTakeAction = computed(
   () => !props.isActioning && !startingDelay.value && !isTransitionState.value,
-);
-const isRunning = computed(() => serverState.value === "running");
+)
+const isRunning = computed(() => serverState.value === 'running')
 const isTransitionState = computed(() =>
-  ["starting", "stopping", "restarting"].includes(serverState.value),
-);
-const isStoppingState = computed(() => serverState.value === "stopping");
-const showStopButton = computed(() => isRunning.value || isStoppingState.value);
+  ['starting', 'stopping', 'restarting'].includes(serverState.value),
+)
+const isStoppingState = computed(() => serverState.value === 'stopping')
+const showStopButton = computed(() => isRunning.value || isStoppingState.value)
 
 const primaryActionText = computed(() => {
   const states: Partial<Record<ServerState, string>> = {
-    starting: "Starting...",
-    restarting: "Restarting...",
-    running: "Restart",
-    stopping: "Stopping...",
-    stopped: "Start",
-  };
-  return states[serverState.value];
-});
+    starting: 'Starting...',
+    restarting: 'Restarting...',
+    running: 'Restart',
+    stopping: 'Stopping...',
+    stopped: 'Start',
+  }
+  return states[serverState.value]
+})
 
 const confirmActionText = computed(() => {
-  if (!powerAction.value) return "";
-  return powerAction.value.action.charAt(0).toUpperCase() + powerAction.value.action.slice(1);
-});
+  if (!powerAction.value) return ''
+  return powerAction.value.action.charAt(0).toUpperCase() + powerAction.value.action.slice(1)
+})
 
 const menuOptions = computed(() => [
   ...(props.isInstalling
     ? []
     : [
         {
-          id: "kill",
-          label: "Kill server",
+          id: 'kill',
+          label: 'Kill server',
           icon: SlashIcon,
-          action: () => initiateAction("Kill"),
+          action: () => initiateAction('Kill'),
         },
       ]),
   {
-    id: "allServers",
-    label: "All servers",
+    id: 'allServers',
+    label: 'All servers',
     icon: ServerIcon,
-    action: () => router.push("/servers/manage"),
+    action: () => router.push('/servers/manage'),
   },
   {
-    id: "details",
-    label: "Details",
+    id: 'details',
+    label: 'Details',
     icon: InfoIcon,
     action: () => detailsModal.value?.show(),
   },
   {
-    id: "copy-id",
-    label: "Copy ID",
+    id: 'copy-id',
+    label: 'Copy ID',
     icon: ClipboardCopyIcon,
     action: () => copyId(),
     shown: flags.value.developerMode,
   },
-]);
+])
 
 async function copyId() {
-  await navigator.clipboard.writeText(serverId as string);
+  await navigator.clipboard.writeText(serverId as string)
 }
 
 function initiateAction(action: ServerPowerAction) {
-  if (!canTakeAction.value) return;
+  if (!canTakeAction.value) return
 
   const stateMap: Record<ServerPowerAction, ServerState> = {
-    Start: "starting",
-    Stop: "stopping",
-    Restart: "restarting",
-    Kill: "stopping",
-  };
-
-  if (action === "Start") {
-    emit("action", action);
-    serverState.value = stateMap[action];
-    startingDelay.value = true;
-    setTimeout(() => (startingDelay.value = false), 5000);
-    return;
+    Start: 'starting',
+    Stop: 'stopping',
+    Restart: 'restarting',
+    Kill: 'stopping',
   }
 
-  powerAction.value = { action, nextState: stateMap[action] };
+  if (action === 'Start') {
+    emit('action', action)
+    serverState.value = stateMap[action]
+    startingDelay.value = true
+    setTimeout(() => (startingDelay.value = false), 5000)
+    return
+  }
+
+  powerAction.value = { action, nextState: stateMap[action] }
 
   if (userPreferences.value.powerDontAskAgain) {
-    executePowerAction();
+    executePowerAction()
   } else {
-    confirmActionModal.value?.show();
+    confirmActionModal.value?.show()
   }
 }
 
 function handlePrimaryAction() {
-  initiateAction(isRunning.value ? "Restart" : "Start");
+  initiateAction(isRunning.value ? 'Restart' : 'Start')
 }
 
 function executePowerAction() {
-  if (!powerAction.value) return;
+  if (!powerAction.value) return
 
-  const { action, nextState } = powerAction.value;
-  emit("action", action);
-  serverState.value = nextState;
+  const { action, nextState } = powerAction.value
+  emit('action', action)
+  serverState.value = nextState
 
   if (dontAskAgain.value) {
-    userPreferences.value.powerDontAskAgain = true;
+    userPreferences.value.powerDontAskAgain = true
   }
 
-  if (action === "Start") {
-    startingDelay.value = true;
-    setTimeout(() => (startingDelay.value = false), 5000);
+  if (action === 'Start') {
+    startingDelay.value = true
+    setTimeout(() => (startingDelay.value = false), 5000)
   }
 
-  resetPowerAction();
+  resetPowerAction()
 }
 
 function resetPowerAction() {
-  confirmActionModal.value?.hide();
-  powerAction.value = null;
-  dontAskAgain.value = false;
+  confirmActionModal.value?.hide()
+  powerAction.value = null
+  dontAskAgain.value = false
 }
 
 function closeDetailsModal() {
-  detailsModal.value?.hide();
+  detailsModal.value?.hide()
 }
 
 watch(
   () => props.isOnline,
-  (online) => (serverState.value = online ? "running" : "stopped"),
-);
+  (online) => (serverState.value = online ? 'running' : 'stopped'),
+)
 
 watch(
   () => router.currentRoute.value.fullPath,
   () => closeDetailsModal(),
-);
+)
 </script>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerStatus.vue b/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
index dc02a4b50..b283b0082 100644
--- a/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
+++ b/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
@@ -39,37 +39,37 @@
 </template>
 
 <script setup lang="ts">
-import type { ServerState } from "@modrinth/utils";
-import { ref } from "vue";
+import type { ServerState } from '@modrinth/utils'
+import { ref } from 'vue'
 
 const STATUS_CLASSES = {
-  running: { main: "bg-brand", bg: "bg-bg-green" },
-  stopped: { main: "", bg: "" },
-  crashed: { main: "bg-brand-red", bg: "bg-bg-red" },
-  unknown: { main: "", bg: "" },
-} as const;
+  running: { main: 'bg-brand', bg: 'bg-bg-green' },
+  stopped: { main: '', bg: '' },
+  crashed: { main: 'bg-brand-red', bg: 'bg-bg-red' },
+  unknown: { main: '', bg: '' },
+} as const
 
 const STATUS_TEXTS: Partial<Record<ServerState, string>> = {
-  running: "Running",
-  stopped: "",
-  crashed: "Crashed",
-  unknown: "Unknown",
-} as const;
+  running: 'Running',
+  stopped: '',
+  crashed: 'Crashed',
+  unknown: 'Unknown',
+} as const
 
 defineProps<{
-  state: ServerState;
-}>();
+  state: ServerState
+}>()
 
-const isExpanded = ref(false);
+const isExpanded = ref(false)
 
 function getStatusClass(state: ServerState) {
   if (state in STATUS_CLASSES) {
-    return STATUS_CLASSES[state as keyof typeof STATUS_CLASSES];
+    return STATUS_CLASSES[state as keyof typeof STATUS_CLASSES]
   }
-  return STATUS_CLASSES.unknown;
+  return STATUS_CLASSES.unknown
 }
 
 function getStatusText(state: ServerState) {
-  return STATUS_TEXTS[state] ?? STATUS_TEXTS.unknown;
+  return STATUS_TEXTS[state] ?? STATUS_TEXTS.unknown
 }
 </script>
diff --git a/apps/frontend/src/components/ui/servers/PanelTerminal.vue b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
index 6aa13af80..1d6dff276 100644
--- a/apps/frontend/src/components/ui/servers/PanelTerminal.vue
+++ b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
@@ -21,7 +21,7 @@
           class="pointer-events-none absolute right-12 top-1/2 -translate-y-1/2 select-none whitespace-pre text-sm"
         >
           {{ pyroConsole.filteredOutput.value.length }}
-          {{ pyroConsole.filteredOutput.value.length === 1 ? "result" : "results" }}
+          {{ pyroConsole.filteredOutput.value.length === 1 ? 'result' : 'results' }}
         </span>
       </div>
     </div>
@@ -191,8 +191,8 @@
                           visibleStartIndex + index,
                           visibleStartIndex + index + 1,
                         ) === 1
-                          ? ""
-                          : "s"
+                          ? ''
+                          : 's'
                       }}
                       between
                     </span>
@@ -295,850 +295,847 @@
 </template>
 
 <script setup lang="ts">
-import { CopyIcon, EyeIcon,RightArrowIcon, SearchIcon, XIcon } from "@modrinth/assets";
-import { NewModal } from "@modrinth/ui";
-import ButtonStyled from "@modrinth/ui/src/components/base/ButtonStyled.vue";
-import { useDebounceFn } from "@vueuse/core";
-import DOMPurify from "dompurify";
-import { computed, nextTick,onMounted, onUnmounted, ref, watch } from "vue";
+import { CopyIcon, EyeIcon, RightArrowIcon, SearchIcon, XIcon } from '@modrinth/assets'
+import { NewModal } from '@modrinth/ui'
+import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'
+import { useDebounceFn } from '@vueuse/core'
+import DOMPurify from 'dompurify'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { useModrinthServersConsole } from "~/store/console.ts";
+import { useModrinthServersConsole } from '~/store/console.ts'
 
-const { $cosmetics } = useNuxtApp();
-const cosmetics = $cosmetics;
+const { $cosmetics } = useNuxtApp()
+const cosmetics = $cosmetics
 
 const props = defineProps<{
-  fullScreen: boolean;
-  loading?: boolean;
-}>();
+  fullScreen: boolean
+  loading?: boolean
+}>()
 
-const BUFFER_SIZE = 5;
-const BATCH_SIZE = 50;
-const LINE_HEIGHT = 32;
-const SEPARATOR_HEIGHT = 32;
-const SCROLL_END_DELAY = 150;
-const progressiveBlurIterations = ref(8);
+const BUFFER_SIZE = 5
+const BATCH_SIZE = 50
+const LINE_HEIGHT = 32
+const SEPARATOR_HEIGHT = 32
+const SCROLL_END_DELAY = 150
+const progressiveBlurIterations = ref(8)
 
-const pyroConsole = useModrinthServersConsole();
-const consoleOutput = computed(() => (props.loading ? [] : pyroConsole.output.value));
+const pyroConsole = useModrinthServersConsole()
+const consoleOutput = computed(() => (props.loading ? [] : pyroConsole.output.value))
 
-const scrollContainer = ref<HTMLElement | null>(null);
+const scrollContainer = ref<HTMLElement | null>(null)
 
-const isFullScreen = ref(props.fullScreen);
+const isFullScreen = ref(props.fullScreen)
 
-const initialBatch = ref(false);
-const isInitialLoad = ref(true);
+const initialBatch = ref(false)
+const isInitialLoad = ref(true)
 
-const startY = ref(0);
-const scrollTop = ref(0);
-const clientHeight = ref(0);
-const startScrollTop = ref(0);
-const bottomThreshold = ref(0);
-const isAutoScrolling = ref(false);
-const userHasScrolled = ref(false);
-const isScrolledToBottom = ref(true);
-const scrollEndTimeout = ref<NodeJS.Timeout | null>(null);
-const isScrolling = ref(false);
+const startY = ref(0)
+const scrollTop = ref(0)
+const clientHeight = ref(0)
+const startScrollTop = ref(0)
+const bottomThreshold = ref(0)
+const isAutoScrolling = ref(false)
+const userHasScrolled = ref(false)
+const isScrolledToBottom = ref(true)
+const scrollEndTimeout = ref<NodeJS.Timeout | null>(null)
+const isScrolling = ref(false)
 
-const scrollbarTrack = ref<HTMLElement | null>(null);
-const scrollbarThumb = ref<HTMLElement | null>(null);
-const isDragging = ref(false);
+const scrollbarTrack = ref<HTMLElement | null>(null)
+const scrollbarThumb = ref<HTMLElement | null>(null)
+const isDragging = ref(false)
 
-const searchInput = ref("");
+const searchInput = ref('')
 
-const viewLogModal = ref<InstanceType<typeof NewModal>>();
-const selectedLog = ref("");
-const selectionStart = ref<number | null>(null);
-const selectionEnd = ref<number | null>(null);
-const isSelecting = ref(false);
-const autoScrollSpeed = ref(0);
-const autoScrollInterval = ref<NodeJS.Timeout | null>(null);
-const lastClickIndex = ref<number | null>(null);
-const lastMouseEvent = ref<MouseEvent | null>(null);
+const viewLogModal = ref<InstanceType<typeof NewModal>>()
+const selectedLog = ref('')
+const selectionStart = ref<number | null>(null)
+const selectionEnd = ref<number | null>(null)
+const isSelecting = ref(false)
+const autoScrollSpeed = ref(0)
+const autoScrollInterval = ref<NodeJS.Timeout | null>(null)
+const lastClickIndex = ref<number | null>(null)
+const lastMouseEvent = ref<MouseEvent | null>(null)
 
-const lerp = (start: number, end: number, t: number) => start * (1 - t) + end * t;
+const lerp = (start: number, end: number, t: number) => start * (1 - t) + end * t
 
 const getBlurStyle = (i: number) => {
-  const properBlurIteration = i + 1;
-  const blur = lerp(0, 2 ** (properBlurIteration - 3), bottomThreshold.value);
-  const singular = 100 / progressiveBlurIterations.value;
-  let mask = "linear-gradient(";
+  const properBlurIteration = i + 1
+  const blur = lerp(0, 2 ** (properBlurIteration - 3), bottomThreshold.value)
+  const singular = 100 / progressiveBlurIterations.value
+  let mask = 'linear-gradient('
 
   switch (i) {
     case 0:
-      mask += `rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) ${singular}%`;
-      break;
+      mask += `rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) ${singular}%`
+      break
     case 1:
-      mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgb(0, 0, 0) ${singular * 2}%`;
-      break;
+      mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgb(0, 0, 0) ${singular * 2}%`
+      break
     case 2:
-      mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgba(0, 0, 0, 0) ${singular * 2}%, rgb(0, 0, 0) ${singular * 3}%`;
-      break;
+      mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgba(0, 0, 0, 0) ${singular * 2}%, rgb(0, 0, 0) ${singular * 3}%`
+      break
     default:
-      mask += `rgba(0, 0, 0, 0) ${singular * (i - 3)}%, rgb(0, 0, 0) ${singular * (i + 1 - 3)}%, rgb(0, 0, 0) ${singular * (i + 2 - 3)}%, rgba(0, 0, 0, 0) ${singular * (i + 3 - 3)}%`;
-      break;
+      mask += `rgba(0, 0, 0, 0) ${singular * (i - 3)}%, rgb(0, 0, 0) ${singular * (i + 1 - 3)}%, rgb(0, 0, 0) ${singular * (i + 2 - 3)}%, rgba(0, 0, 0, 0) ${singular * (i + 3 - 3)}%`
+      break
   }
 
-  mask += `)`;
+  mask += `)`
 
   return {
     backdropFilter: `blur(${blur}px)`,
     mask,
-    position: "absolute" as any,
+    position: 'absolute' as any,
     zIndex: progressiveBlurIterations.value - i,
-  };
-};
+  }
+}
 
 const updateSearch = useDebounceFn((value: string) => {
-  pyroConsole.setSearchQuery(value);
+  pyroConsole.setSearchQuery(value)
 
-  selectionStart.value = null;
-  selectionEnd.value = null;
-  lastClickIndex.value = null;
+  selectionStart.value = null
+  selectionEnd.value = null
+  lastClickIndex.value = null
 
   nextTick(() => {
-    if (!scrollContainer.value) return;
+    if (!scrollContainer.value) return
 
     if (!value) {
-      handleListScroll();
-      return;
+      handleListScroll()
+      return
     }
 
     if (pyroConsole.filteredOutput.value.length > 0) {
-      scrollContainer.value.scrollTop = 0;
-      handleListScroll();
+      scrollContainer.value.scrollTop = 0
+      handleListScroll()
     }
-  });
-}, 300);
+  })
+}, 300)
 
 const clearSearch = () => {
-  searchInput.value = "";
-  pyroConsole.setSearchQuery("");
-};
+  searchInput.value = ''
+  pyroConsole.setSearchQuery('')
+}
 
 const activeOutput = computed(() => {
-  return searchInput.value ? pyroConsole.filteredOutput.value : consoleOutput.value;
-});
+  return searchInput.value ? pyroConsole.filteredOutput.value : consoleOutput.value
+})
 
 const shouldShowSeparator = (currentIndex: number, nextIndex: number) => {
-  if (!searchInput.value || nextIndex >= activeOutput.value.length) return 0;
+  if (!searchInput.value || nextIndex >= activeOutput.value.length) return 0
 
-  const currentLine = activeOutput.value[currentIndex];
-  const nextLine = activeOutput.value[nextIndex];
+  const currentLine = activeOutput.value[currentIndex]
+  const nextLine = activeOutput.value[nextIndex]
 
-  const currentOriginalIndex = consoleOutput.value.indexOf(currentLine);
-  const nextOriginalIndex = consoleOutput.value.indexOf(nextLine);
+  const currentOriginalIndex = consoleOutput.value.indexOf(currentLine)
+  const nextOriginalIndex = consoleOutput.value.indexOf(nextLine)
 
-  const linesBetween = nextOriginalIndex - currentOriginalIndex - 1;
-  return linesBetween > 0 ? linesBetween : 0;
-};
+  const linesBetween = nextOriginalIndex - currentOriginalIndex - 1
+  return linesBetween > 0 ? linesBetween : 0
+}
 
 const totalHeight = computed(() => {
-  const baseHeight = activeOutput.value.length * LINE_HEIGHT;
-  if (!searchInput.value) return baseHeight;
+  const baseHeight = activeOutput.value.length * LINE_HEIGHT
+  if (!searchInput.value) return baseHeight
 
-  let separatorCount = 0;
+  let separatorCount = 0
   for (let i = 0; i < activeOutput.value.length - 1; i++) {
     if (shouldShowSeparator(i, i + 1)) {
-      separatorCount++;
+      separatorCount++
     }
   }
 
-  return baseHeight + separatorCount * SEPARATOR_HEIGHT;
-});
+  return baseHeight + separatorCount * SEPARATOR_HEIGHT
+})
 
 const getLineIndexForPosition = (position: number) => {
   if (!searchInput.value) {
-    return Math.floor(position / LINE_HEIGHT);
+    return Math.floor(position / LINE_HEIGHT)
   }
 
-  let accHeight = 0;
-  let index = 0;
+  let accHeight = 0
+  let index = 0
 
   while (index < activeOutput.value.length) {
     if (accHeight >= position) {
-      break;
+      break
     }
-    accHeight += LINE_HEIGHT;
+    accHeight += LINE_HEIGHT
     if (shouldShowSeparator(index, index + 1)) {
-      accHeight += SEPARATOR_HEIGHT;
+      accHeight += SEPARATOR_HEIGHT
     }
-    index++;
+    index++
   }
 
-  return index;
-};
+  return index
+}
 
 const getPositionForLineIndex = (index: number) => {
   if (!searchInput.value) {
-    return index * LINE_HEIGHT;
+    return index * LINE_HEIGHT
   }
 
-  let position = 0;
+  let position = 0
   for (let i = 0; i < index; i++) {
-    position += LINE_HEIGHT;
+    position += LINE_HEIGHT
     if (shouldShowSeparator(i, i + 1)) {
-      position += SEPARATOR_HEIGHT;
+      position += SEPARATOR_HEIGHT
     }
   }
 
-  return position;
-};
+  return position
+}
 
 const visibleStartIndex = computed(() => {
-  const rawPosition = Math.max(0, scrollTop.value - LINE_HEIGHT * BUFFER_SIZE);
-  return getLineIndexForPosition(rawPosition);
-});
+  const rawPosition = Math.max(0, scrollTop.value - LINE_HEIGHT * BUFFER_SIZE)
+  return getLineIndexForPosition(rawPosition)
+})
 
 const visibleEndIndex = computed(() => {
-  const rawPosition = scrollTop.value + clientHeight.value + LINE_HEIGHT * BUFFER_SIZE;
-  return Math.min(activeOutput.value.length - 1, getLineIndexForPosition(rawPosition));
-});
+  const rawPosition = scrollTop.value + clientHeight.value + LINE_HEIGHT * BUFFER_SIZE
+  return Math.min(activeOutput.value.length - 1, getLineIndexForPosition(rawPosition))
+})
 
 const offsetY = computed(() => {
-  return getPositionForLineIndex(visibleStartIndex.value);
-});
+  return getPositionForLineIndex(visibleStartIndex.value)
+})
 
 const visibleItems = computed(() => {
-  const start = visibleStartIndex.value;
-  const end = visibleEndIndex.value;
-  const items = [];
+  const start = visibleStartIndex.value
+  const end = visibleEndIndex.value
+  const items = []
 
   for (let i = start; i <= end; i += BATCH_SIZE) {
-    const chunk = activeOutput.value.slice(i, Math.min(i + BATCH_SIZE, end + 1));
-    items.push(...chunk);
+    const chunk = activeOutput.value.slice(i, Math.min(i + BATCH_SIZE, end + 1))
+    items.push(...chunk)
   }
 
-  return items;
-});
+  return items
+})
 
 const handleListScroll = () => {
-  if (!scrollContainer.value) return;
+  if (!scrollContainer.value) return
 
-  const container = scrollContainer.value;
-  scrollTop.value = container.scrollTop;
-  clientHeight.value = container.clientHeight;
+  const container = scrollContainer.value
+  scrollTop.value = container.scrollTop
+  clientHeight.value = container.clientHeight
 
-  const scrollHeight = container.scrollHeight;
-  const threshold = 32;
+  const scrollHeight = container.scrollHeight
+  const threshold = 32
 
-  isScrolling.value = true;
+  isScrolling.value = true
 
   if (scrollEndTimeout.value) {
-    clearTimeout(scrollEndTimeout.value);
+    clearTimeout(scrollEndTimeout.value)
   }
 
   scrollEndTimeout.value = setTimeout(() => {
     if (!isSelecting.value) {
-      isScrolling.value = false;
+      isScrolling.value = false
     }
-    const finalPosition = scrollHeight - container.scrollTop - clientHeight.value;
-    isScrolledToBottom.value = finalPosition <= threshold;
-    bottomThreshold.value = Math.min(1, finalPosition / 256);
-  }, SCROLL_END_DELAY);
+    const finalPosition = scrollHeight - container.scrollTop - clientHeight.value
+    isScrolledToBottom.value = finalPosition <= threshold
+    bottomThreshold.value = Math.min(1, finalPosition / 256)
+  }, SCROLL_END_DELAY)
 
-  isScrolledToBottom.value = scrollHeight - scrollTop.value - clientHeight.value <= threshold;
+  isScrolledToBottom.value = scrollHeight - scrollTop.value - clientHeight.value <= threshold
 
   if (!isScrolledToBottom.value && !isAutoScrolling.value) {
-    userHasScrolled.value = true;
+    userHasScrolled.value = true
   }
 
-  bottomThreshold.value = Math.min(1, (scrollHeight - scrollTop.value - clientHeight.value) / 256);
+  bottomThreshold.value = Math.min(1, (scrollHeight - scrollTop.value - clientHeight.value) / 256)
 
   if (searchInput.value) {
     nextTick(() => {
-      container.style.transform = "translateZ(0)";
+      container.style.transform = 'translateZ(0)'
       requestAnimationFrame(() => {
-        container.style.transform = "";
-      });
-    });
+        container.style.transform = ''
+      })
+    })
   }
-};
+}
 
 const updateClientHeight = () => {
   if (scrollContainer.value) {
-    clientHeight.value = scrollContainer.value.clientHeight;
+    clientHeight.value = scrollContainer.value.clientHeight
   }
-};
+}
 
 const scrollToBottom = () => {
-  if (!scrollContainer.value) return;
+  if (!scrollContainer.value) return
 
-  isAutoScrolling.value = true;
-  const container = scrollContainer.value;
+  isAutoScrolling.value = true
+  const container = scrollContainer.value
 
   nextTick(() => {
-    const maxScroll = container.scrollHeight - container.clientHeight;
-    container.scrollTop = maxScroll;
+    const maxScroll = container.scrollHeight - container.clientHeight
+    container.scrollTop = maxScroll
 
     setTimeout(() => {
       if (container.scrollTop < maxScroll) {
-        container.scrollTop = maxScroll;
+        container.scrollTop = maxScroll
       }
-      isAutoScrolling.value = false;
-      userHasScrolled.value = false;
-      isScrolledToBottom.value = true;
-      handleListScroll();
-    }, 50);
-  });
-};
+      isAutoScrolling.value = false
+      userHasScrolled.value = false
+      isScrolledToBottom.value = true
+      handleListScroll()
+    }, 50)
+  })
+}
 
 const getThumbHeight = () => {
-  if (!scrollContainer.value || !scrollbarTrack.value) return 30;
+  if (!scrollContainer.value || !scrollbarTrack.value) return 30
 
-  const contentHeight = scrollContainer.value.scrollHeight;
-  const viewportHeight = scrollContainer.value.clientHeight;
-  const trackHeight = scrollbarTrack.value.clientHeight;
+  const contentHeight = scrollContainer.value.scrollHeight
+  const viewportHeight = scrollContainer.value.clientHeight
+  const trackHeight = scrollbarTrack.value.clientHeight
 
-  const heightRatio = viewportHeight / contentHeight;
+  const heightRatio = viewportHeight / contentHeight
 
-  const minThumbHeight = Math.min(40, trackHeight / 2);
+  const minThumbHeight = Math.min(40, trackHeight / 2)
 
-  const proposedHeight = Math.max(heightRatio * trackHeight, minThumbHeight);
+  const proposedHeight = Math.max(heightRatio * trackHeight, minThumbHeight)
 
-  return Math.min(proposedHeight, trackHeight);
-};
+  return Math.min(proposedHeight, trackHeight)
+}
 
 const getThumbPosition = () => {
-  if (!scrollContainer.value || !scrollbarTrack.value) return 0;
+  if (!scrollContainer.value || !scrollbarTrack.value) return 0
 
-  const contentHeight = scrollContainer.value.scrollHeight;
-  const viewportHeight = scrollContainer.value.clientHeight;
-  const trackHeight = scrollbarTrack.value.clientHeight;
-  const scrollProgress = scrollTop.value / (contentHeight - viewportHeight);
+  const contentHeight = scrollContainer.value.scrollHeight
+  const viewportHeight = scrollContainer.value.clientHeight
+  const trackHeight = scrollbarTrack.value.clientHeight
+  const scrollProgress = scrollTop.value / (contentHeight - viewportHeight)
 
-  const thumbHeight = getThumbHeight();
-  const availableTrackSpace = trackHeight - thumbHeight;
+  const thumbHeight = getThumbHeight()
+  const availableTrackSpace = trackHeight - thumbHeight
 
-  return Math.max(0, Math.min(scrollProgress * availableTrackSpace, availableTrackSpace));
-};
+  return Math.max(0, Math.min(scrollProgress * availableTrackSpace, availableTrackSpace))
+}
 
 const startDragging = (event: MouseEvent) => {
-  event.preventDefault();
-  event.stopPropagation();
+  event.preventDefault()
+  event.stopPropagation()
 
-  if (!scrollContainer.value || !scrollbarTrack.value) return;
+  if (!scrollContainer.value || !scrollbarTrack.value) return
 
-  isDragging.value = true;
-  startY.value = event.clientY;
-  startScrollTop.value = scrollContainer.value.scrollTop;
+  isDragging.value = true
+  startY.value = event.clientY
+  startScrollTop.value = scrollContainer.value.scrollTop
 
-  window.addEventListener("mousemove", handleDragging);
-  window.addEventListener("mouseup", stopDragging);
+  window.addEventListener('mousemove', handleDragging)
+  window.addEventListener('mouseup', stopDragging)
 
-  document.body.style.userSelect = "none";
-  document.body.style.pointerEvents = "none";
-};
+  document.body.style.userSelect = 'none'
+  document.body.style.pointerEvents = 'none'
+}
 
 const handleDragging = (event: MouseEvent) => {
-  if (!isDragging.value || !scrollContainer.value || !scrollbarTrack.value) return;
+  if (!isDragging.value || !scrollContainer.value || !scrollbarTrack.value) return
 
-  const trackRect = scrollbarTrack.value.getBoundingClientRect();
-  const deltaY = event.clientY - startY.value;
+  const trackRect = scrollbarTrack.value.getBoundingClientRect()
+  const deltaY = event.clientY - startY.value
 
-  const trackHeight = trackRect.height;
-  const contentHeight = scrollContainer.value.scrollHeight;
-  const viewportHeight = scrollContainer.value.clientHeight;
-  const maxScroll = contentHeight - viewportHeight;
+  const trackHeight = trackRect.height
+  const contentHeight = scrollContainer.value.scrollHeight
+  const viewportHeight = scrollContainer.value.clientHeight
+  const maxScroll = contentHeight - viewportHeight
 
-  const moveRatio = deltaY / trackHeight;
-  const scrollDelta = moveRatio * maxScroll;
+  const moveRatio = deltaY / trackHeight
+  const scrollDelta = moveRatio * maxScroll
 
-  const newScrollTop = Math.max(0, Math.min(startScrollTop.value + scrollDelta, maxScroll));
-  scrollContainer.value.scrollTop = newScrollTop;
-};
+  const newScrollTop = Math.max(0, Math.min(startScrollTop.value + scrollDelta, maxScroll))
+  scrollContainer.value.scrollTop = newScrollTop
+}
 
 const stopDragging = () => {
-  isDragging.value = false;
+  isDragging.value = false
 
-  window.removeEventListener("mousemove", handleDragging);
-  window.removeEventListener("mouseup", stopDragging);
+  window.removeEventListener('mousemove', handleDragging)
+  window.removeEventListener('mouseup', stopDragging)
 
-  document.body.style.userSelect = "";
-  document.body.style.pointerEvents = "";
-};
+  document.body.style.userSelect = ''
+  document.body.style.pointerEvents = ''
+}
 
 const handleTrackClick = (event: MouseEvent) => {
   if (!scrollContainer.value || !scrollbarTrack.value || event.target === scrollbarThumb.value)
-    return;
+    return
 
-  const trackRect = scrollbarTrack.value.getBoundingClientRect();
-  const trackHeight = trackRect.height;
-  const clickRatio = (event.clientY - trackRect.top) / trackHeight;
+  const trackRect = scrollbarTrack.value.getBoundingClientRect()
+  const trackHeight = trackRect.height
+  const clickRatio = (event.clientY - trackRect.top) / trackHeight
 
-  const maxScroll = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight;
-  const newScrollTop = clickRatio * maxScroll;
+  const maxScroll = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight
+  const newScrollTop = clickRatio * maxScroll
 
-  scrollContainer.value.scrollTop = Math.max(0, Math.min(newScrollTop, maxScroll));
-};
+  scrollContainer.value.scrollTop = Math.max(0, Math.min(newScrollTop, maxScroll))
+}
 
 const setBodyScroll = (enabled: boolean) => {
   if (enabled) {
-    document.body.style.overflow = "";
-    document.body.style.position = "";
-    document.body.style.width = "";
+    document.body.style.overflow = ''
+    document.body.style.position = ''
+    document.body.style.width = ''
   } else {
-    document.body.style.overflow = "hidden";
-    document.body.style.position = "fixed";
-    document.body.style.width = "100%";
+    document.body.style.overflow = 'hidden'
+    document.body.style.position = 'fixed'
+    document.body.style.width = '100%'
   }
-};
+}
 
 const enterFullScreen = () => {
-  isFullScreen.value = true;
-  setBodyScroll(false);
+  isFullScreen.value = true
+  setBodyScroll(false)
   nextTick(() => {
-    updateClientHeight();
-  });
-};
+    updateClientHeight()
+  })
+}
 
 const exitFullScreen = () => {
-  isFullScreen.value = false;
-  setBodyScroll(true);
+  isFullScreen.value = false
+  setBodyScroll(true)
   nextTick(() => {
-    updateClientHeight();
-  });
-};
+    updateClientHeight()
+  })
+}
 
 const toggleFullscreen = () => {
   if (isFullScreen.value) {
-    exitFullScreen();
+    exitFullScreen()
   } else {
-    enterFullScreen();
+    enterFullScreen()
   }
-};
+}
 
 const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === "Escape") {
+  if (event.key === 'Escape') {
     if (selectionStart.value !== null || selectionEnd.value !== null) {
-      selectionStart.value = null;
-      selectionEnd.value = null;
-      lastClickIndex.value = null;
-      return;
+      selectionStart.value = null
+      selectionEnd.value = null
+      lastClickIndex.value = null
+      return
     }
 
     if (searchInput.value) {
-      clearSearch();
-      return;
+      clearSearch()
+      return
     }
 
     if (isFullScreen.value) {
-      exitFullScreen();
+      exitFullScreen()
     }
   }
-};
+}
 
 const handleGlobalMouseUp = () => {
   if (isSelecting.value) {
-    endLineSelection();
+    endLineSelection()
   }
-};
+}
 
 const handleClickOutside = (event: MouseEvent) => {
-  if (!event.target || !(event.target instanceof Node)) return;
-  const terminalElement = document.querySelector("[data-pyro-terminal]");
+  if (!event.target || !(event.target instanceof Node)) return
+  const terminalElement = document.querySelector('[data-pyro-terminal]')
   if (!terminalElement || !terminalElement.contains(event.target)) {
-    selectionStart.value = null;
-    selectionEnd.value = null;
-    lastClickIndex.value = null;
+    selectionStart.value = null
+    selectionEnd.value = null
+    lastClickIndex.value = null
   }
-};
+}
 
 const initializeTerminal = () => {
-  if (!scrollContainer.value) return;
+  if (!scrollContainer.value) return
 
-  updateClientHeight();
+  updateClientHeight()
 
   nextTick(() => {
     nextTick(() => {
-      const container = scrollContainer.value;
+      const container = scrollContainer.value
       if (container) {
-        container.scrollTop = container.scrollHeight;
-        handleListScroll();
-        initialBatch.value = true;
+        container.scrollTop = container.scrollHeight
+        handleListScroll()
+        initialBatch.value = true
       }
-    });
-  });
-};
+    })
+  })
+}
 
 const showFullLogMessage = (log: string) => {
-  selectedLog.value = log;
-  viewLogModal.value?.show();
-};
+  selectedLog.value = log
+  viewLogModal.value?.show()
+}
 
 const showSelectedLines = () => {
-  if (!hasSelection.value) return;
+  if (!hasSelection.value) return
 
-  const start = Math.min(selectionStart.value!, selectionEnd.value!);
-  const end = Math.max(selectionStart.value!, selectionEnd.value!);
-  const selectedLines = activeOutput.value.slice(start, end + 1);
+  const start = Math.min(selectionStart.value!, selectionEnd.value!)
+  const end = Math.max(selectionStart.value!, selectionEnd.value!)
+  const selectedLines = activeOutput.value.slice(start, end + 1)
 
-  selectedLog.value = selectedLines.join("\n");
-  viewLogModal.value?.show();
-};
+  selectedLog.value = selectedLines.join('\n')
+  viewLogModal.value?.show()
+}
 
 const virtualListStyle = computed(() => ({
   transform: `translateY(${offsetY.value}px)`,
-}));
+}))
 
 const isLineSelected = (index: number) => {
-  if (selectionStart.value === null || selectionEnd.value === null) return false;
-  const start = Math.min(selectionStart.value, selectionEnd.value);
-  const end = Math.max(selectionStart.value, selectionEnd.value);
-  return index >= start && index <= end;
-};
+  if (selectionStart.value === null || selectionEnd.value === null) return false
+  const start = Math.min(selectionStart.value, selectionEnd.value)
+  const end = Math.max(selectionStart.value, selectionEnd.value)
+  return index >= start && index <= end
+}
 
 const handleContextMenu = () => {
   if (isSelecting.value) {
-    endLineSelection();
+    endLineSelection()
   }
-};
+}
 
 const handleMouseDown = (event: MouseEvent) => {
   if (event.button === 2) {
     if (isSelecting.value) {
-      endLineSelection();
+      endLineSelection()
     }
-    return;
+    return
   }
 
-  const lineIndex = getLineIndexFromEvent(event);
-  if (lineIndex === null) return;
+  const lineIndex = getLineIndexFromEvent(event)
+  if (lineIndex === null) return
 
   if (event.shiftKey && lastClickIndex.value !== null) {
-    selectionStart.value = lastClickIndex.value;
-    selectionEnd.value = lineIndex;
-    isSelecting.value = false;
+    selectionStart.value = lastClickIndex.value
+    selectionEnd.value = lineIndex
+    isSelecting.value = false
   } else {
-    isSelecting.value = true;
-    selectionStart.value = lineIndex;
-    selectionEnd.value = lineIndex;
-    lastClickIndex.value = lineIndex;
-    startAutoScroll();
+    isSelecting.value = true
+    selectionStart.value = lineIndex
+    selectionEnd.value = lineIndex
+    lastClickIndex.value = lineIndex
+    startAutoScroll()
   }
-};
+}
 
 const updateLineSelection = (event: MouseEvent) => {
-  if (!isSelecting.value) return;
+  if (!isSelecting.value) return
 
-  const lineIndex = getLineIndexFromEvent(event);
-  if (lineIndex === null) return;
+  const lineIndex = getLineIndexFromEvent(event)
+  if (lineIndex === null) return
 
-  selectionEnd.value = lineIndex;
-  lastMouseEvent.value = event;
+  selectionEnd.value = lineIndex
+  lastMouseEvent.value = event
 
-  const rect = scrollContainer.value?.getBoundingClientRect();
-  if (!rect) return;
+  const rect = scrollContainer.value?.getBoundingClientRect()
+  if (!rect) return
 
-  const threshold = 80;
-  const y = event.clientY;
+  const threshold = 80
+  const y = event.clientY
 
-  const distanceFromTop = Math.max(0, threshold - (y - rect.top));
-  const distanceFromBottom = Math.max(0, threshold - (rect.bottom - y));
+  const distanceFromTop = Math.max(0, threshold - (y - rect.top))
+  const distanceFromBottom = Math.max(0, threshold - (rect.bottom - y))
 
   if (distanceFromTop > 0) {
-    autoScrollSpeed.value = -Math.min(20, distanceFromTop / 2);
+    autoScrollSpeed.value = -Math.min(20, distanceFromTop / 2)
   } else if (distanceFromBottom > 0) {
-    autoScrollSpeed.value = Math.min(20, distanceFromBottom / 2);
+    autoScrollSpeed.value = Math.min(20, distanceFromBottom / 2)
   } else {
-    autoScrollSpeed.value = 0;
+    autoScrollSpeed.value = 0
   }
-};
+}
 
 const endLineSelection = () => {
-  if (!isSelecting.value) return;
-  isSelecting.value = false;
-  stopAutoScroll();
-};
+  if (!isSelecting.value) return
+  isSelecting.value = false
+  stopAutoScroll()
+}
 
 const getLineIndexFromEvent = (event: MouseEvent): number | null => {
-  if (!scrollContainer.value) return null;
+  if (!scrollContainer.value) return null
 
-  const rect = scrollContainer.value.getBoundingClientRect();
-  const rawY = event.clientY - rect.top + scrollContainer.value.scrollTop;
+  const rect = scrollContainer.value.getBoundingClientRect()
+  const rawY = event.clientY - rect.top + scrollContainer.value.scrollTop
 
   if (searchInput.value) {
-    const adjustedY = Math.max(0, rawY - 48);
-    return Math.max(0, Math.min(getLineIndexForPosition(adjustedY), activeOutput.value.length - 1));
+    const adjustedY = Math.max(0, rawY - 48)
+    return Math.max(0, Math.min(getLineIndexForPosition(adjustedY), activeOutput.value.length - 1))
   }
 
-  const adjustedY = Math.max(0, rawY - 24);
-  return Math.floor(adjustedY / LINE_HEIGHT);
-};
+  const adjustedY = Math.max(0, rawY - 24)
+  return Math.floor(adjustedY / LINE_HEIGHT)
+}
 
 const startAutoScroll = () => {
-  if (autoScrollInterval.value) return;
+  if (autoScrollInterval.value) return
   autoScrollInterval.value = setInterval(() => {
-    if (!scrollContainer.value || autoScrollSpeed.value === 0) return;
-    scrollContainer.value.scrollTop += autoScrollSpeed.value;
+    if (!scrollContainer.value || autoScrollSpeed.value === 0) return
+    scrollContainer.value.scrollTop += autoScrollSpeed.value
     if (lastMouseEvent.value) {
-      updateLineSelection(lastMouseEvent.value);
+      updateLineSelection(lastMouseEvent.value)
     }
-  }, 16);
-};
+  }, 16)
+}
 
 const stopAutoScroll = () => {
   if (autoScrollInterval.value) {
-    clearInterval(autoScrollInterval.value);
-    autoScrollInterval.value = null;
+    clearInterval(autoScrollInterval.value)
+    autoScrollInterval.value = null
   }
-  autoScrollSpeed.value = 0;
-};
+  autoScrollSpeed.value = 0
+}
 
 const handleCopy = (event: KeyboardEvent) => {
-  if (!event.metaKey && !event.ctrlKey) return;
-  if (event.key !== "c") return;
-  if (selectionStart.value === null || selectionEnd.value === null) return;
+  if (!event.metaKey && !event.ctrlKey) return
+  if (event.key !== 'c') return
+  if (selectionStart.value === null || selectionEnd.value === null) return
 
-  event.preventDefault();
+  event.preventDefault()
 
-  const start = Math.min(selectionStart.value, selectionEnd.value);
-  const end = Math.max(selectionStart.value, selectionEnd.value);
-  const selectedLines = activeOutput.value.slice(start, end + 1);
+  const start = Math.min(selectionStart.value, selectionEnd.value)
+  const end = Math.max(selectionStart.value, selectionEnd.value)
+  const selectedLines = activeOutput.value.slice(start, end + 1)
 
-  navigator.clipboard.writeText(selectedLines.join("\n"));
+  navigator.clipboard.writeText(selectedLines.join('\n'))
 
-  selectionStart.value = null;
-  selectionEnd.value = null;
-  lastClickIndex.value = null;
-};
+  selectionStart.value = null
+  selectionEnd.value = null
+  lastClickIndex.value = null
+}
 
 const hasSelection = computed(
   () =>
     selectionStart.value !== null &&
     selectionEnd.value !== null &&
     selectionStart.value !== selectionEnd.value,
-);
+)
 
 const isSingleLineSelected = computed(
   () =>
     selectionStart.value !== null &&
     selectionEnd.value !== null &&
     selectionStart.value === selectionEnd.value,
-);
+)
 
 const copySelectedLines = () => {
-  if (!hasSelection.value && !isSingleLineSelected.value) return;
+  if (!hasSelection.value && !isSingleLineSelected.value) return
 
-  let selectedLines;
+  let selectedLines
   if (isSingleLineSelected.value) {
-    const index = selectionStart.value!;
-    selectedLines = [activeOutput.value[index]];
+    const index = selectionStart.value!
+    selectedLines = [activeOutput.value[index]]
   } else {
-    const start = Math.min(selectionStart.value!, selectionEnd.value!);
-    const end = Math.max(selectionStart.value!, selectionEnd.value!);
-    selectedLines = activeOutput.value.slice(start, end + 1);
+    const start = Math.min(selectionStart.value!, selectionEnd.value!)
+    const end = Math.max(selectionStart.value!, selectionEnd.value!)
+    selectedLines = activeOutput.value.slice(start, end + 1)
   }
 
-  navigator.clipboard.writeText(selectedLines.join("\n"));
+  navigator.clipboard.writeText(selectedLines.join('\n'))
 
-  selectionStart.value = null;
-  selectionEnd.value = null;
-  lastClickIndex.value = null;
-};
+  selectionStart.value = null
+  selectionEnd.value = null
+  lastClickIndex.value = null
+}
 
 const getSelectionPosition = () => {
-  if (!hasSelection.value || !scrollContainer.value) return { start: 0, end: 0 };
+  if (!hasSelection.value || !scrollContainer.value) return { start: 0, end: 0 }
 
-  const start = Math.min(selectionStart.value!, selectionEnd.value!);
-  const end = Math.max(selectionStart.value!, selectionEnd.value!);
+  const start = Math.min(selectionStart.value!, selectionEnd.value!)
+  const end = Math.max(selectionStart.value!, selectionEnd.value!)
 
-  const totalLines = activeOutput.value.length;
+  const totalLines = activeOutput.value.length
 
   return {
     start: (start / totalLines) * 100,
     end: ((end + 1) / totalLines) * 100,
-  };
-};
+  }
+}
 
 const jumpToLine = (line: string, event?: MouseEvent) => {
-  event?.preventDefault();
-  event?.stopPropagation();
+  event?.preventDefault()
+  event?.stopPropagation()
 
-  const index = pyroConsole.findLineIndex(line);
-  if (index === -1) return;
+  const index = pyroConsole.findLineIndex(line)
+  if (index === -1) return
 
-  const filteredLineIndex = pyroConsole.filteredOutput.value.indexOf(line);
-  if (filteredLineIndex === -1) return;
+  const filteredLineIndex = pyroConsole.filteredOutput.value.indexOf(line)
+  if (filteredLineIndex === -1) return
 
-  let filteredTargetPosition = 0;
+  let filteredTargetPosition = 0
   for (let i = 0; i < filteredLineIndex; i++) {
-    filteredTargetPosition += LINE_HEIGHT;
+    filteredTargetPosition += LINE_HEIGHT
     if (shouldShowSeparator(i, i + 1)) {
-      filteredTargetPosition += SEPARATOR_HEIGHT;
+      filteredTargetPosition += SEPARATOR_HEIGHT
     }
   }
 
-  const viewportHeight = scrollContainer.value?.clientHeight ?? 0;
-  const currentScrollPosition = scrollContainer.value?.scrollTop ?? 0;
-  const relativePosition = (filteredTargetPosition - currentScrollPosition) / viewportHeight;
+  const viewportHeight = scrollContainer.value?.clientHeight ?? 0
+  const currentScrollPosition = scrollContainer.value?.scrollTop ?? 0
+  const relativePosition = (filteredTargetPosition - currentScrollPosition) / viewportHeight
 
-  const targetLineRelativeOffset = relativePosition;
-  const targetLine = line;
+  const targetLineRelativeOffset = relativePosition
+  const targetLine = line
 
-  clearSearch();
+  clearSearch()
 
   nextTick(() => {
-    if (!scrollContainer.value) return;
+    if (!scrollContainer.value) return
 
-    const targetPosition = index * LINE_HEIGHT;
-    const containerHeight = scrollContainer.value.clientHeight;
-    const targetScrollTop = Math.max(
-      0,
-      targetPosition - containerHeight * targetLineRelativeOffset,
-    );
+    const targetPosition = index * LINE_HEIGHT
+    const containerHeight = scrollContainer.value.clientHeight
+    const targetScrollTop = Math.max(0, targetPosition - containerHeight * targetLineRelativeOffset)
 
-    scrollContainer.value.scrollTop = targetScrollTop;
+    scrollContainer.value.scrollTop = targetScrollTop
 
     requestAnimationFrame(() => {
-      handleListScroll();
+      handleListScroll()
 
-      const elements = scrollContainer.value?.getElementsByTagName("li");
-      if (!elements) return;
+      const elements = scrollContainer.value?.getElementsByTagName('li')
+      if (!elements) return
 
       const targetElement = Array.from(elements).find(
         (el) =>
-          el.textContent?.includes(targetLine) && !el.hasAttribute("data-pyro-terminal-separator"),
-      );
+          el.textContent?.includes(targetLine) && !el.hasAttribute('data-pyro-terminal-separator'),
+      )
 
       if (targetElement) {
-        targetElement.classList.add("jumped-line");
+        targetElement.classList.add('jumped-line')
         requestAnimationFrame(() => {
-          targetElement.classList.add("jumped-line-active");
+          targetElement.classList.add('jumped-line-active')
           setTimeout(() => {
-            targetElement.classList.remove("jumped-line-active");
-            targetElement.classList.remove("jumped-line");
-          }, 4000);
-        });
+            targetElement.classList.remove('jumped-line-active')
+            targetElement.classList.remove('jumped-line')
+          }, 4000)
+        })
       }
-    });
-  });
-};
+    })
+  })
+}
 
 const sanitizeUrl = (url: string): string => {
   try {
-    const parsed = new URL(url);
-    if (!["http:", "https:"].includes(parsed.protocol)) {
-      return "#";
+    const parsed = new URL(url)
+    if (!['http:', 'https:'].includes(parsed.protocol)) {
+      return '#'
     }
-    return parsed.toString();
+    return parsed.toString()
   } catch {
-    return "#";
+    return '#'
   }
-};
+}
 
 const detectedLinks = computed(() => {
-  const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g;
-  const matches = [...selectedLog.value.matchAll(urlRegex)].map((match) => match[0]);
-  return matches.filter((url) => sanitizeUrl(url) !== "#");
-});
+  const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g
+  const matches = [...selectedLog.value.matchAll(urlRegex)].map((match) => match[0])
+  return matches.filter((url) => sanitizeUrl(url) !== '#')
+})
 
 const processedLogWithLinks = computed(() => {
-  const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g;
+  const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g
   const sanitizedLog = DOMPurify.sanitize(selectedLog.value, {
     ALLOWED_TAGS: [],
     ALLOWED_ATTR: [],
-  });
+  })
 
   return sanitizedLog.replace(urlRegex, (url) => {
-    const safeUrl = sanitizeUrl(url);
-    if (safeUrl === "#") return url;
-    return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer nofollow" class="text-blue hover:underline">${url}</a>`;
-  });
-});
+    const safeUrl = sanitizeUrl(url)
+    if (safeUrl === '#') return url
+    return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer nofollow" class="text-blue hover:underline">${url}</a>`
+  })
+})
 
 watch(
   () => pyroConsole.filteredOutput.value,
   () => {
     nextTick(() => {
-      handleListScroll();
-    });
+      handleListScroll()
+    })
   },
-);
+)
 
 watch(searchInput, (value) => {
-  updateSearch(value);
-});
+  updateSearch(value)
+})
 
 watch(
   () => consoleOutput.value,
   (newOutput, oldOutput) => {
-    if (!oldOutput || newOutput.length <= oldOutput.length) return;
+    if (!oldOutput || newOutput.length <= oldOutput.length) return
 
-    const shouldScroll = isScrolledToBottom.value || !userHasScrolled.value || isInitialLoad.value;
+    const shouldScroll = isScrolledToBottom.value || !userHasScrolled.value || isInitialLoad.value
 
     if (shouldScroll) {
       if (isInitialLoad.value) {
         setTimeout(() => {
-          scrollToBottom();
-          isInitialLoad.value = false;
-        }, 100);
+          scrollToBottom()
+          isInitialLoad.value = false
+        }, 100)
       } else {
-        nextTick(scrollToBottom);
+        nextTick(scrollToBottom)
       }
     }
   },
-  { flush: "post" },
-);
+  { flush: 'post' },
+)
 
 watch(
   () => pyroConsole.filteredOutput.value,
   () => {
     if (searchInput.value && scrollContainer.value) {
       nextTick(() => {
-        handleListScroll();
-      });
+        handleListScroll()
+      })
     }
   },
-);
+)
 
 watch(
   () => props.fullScreen,
   (newValue) => {
-    isFullScreen.value = newValue;
+    isFullScreen.value = newValue
     nextTick(() => {
-      updateClientHeight();
-    });
+      updateClientHeight()
+    })
   },
-);
+)
 
 watch(isFullScreen, () => {
   nextTick(() => {
-    updateClientHeight();
-  });
-});
+    updateClientHeight()
+  })
+})
 
 onMounted(() => {
-  initializeTerminal();
+  initializeTerminal()
 
-  window.addEventListener("resize", updateClientHeight);
-  window.addEventListener("keydown", handleKeydown);
-  window.addEventListener("mouseup", handleGlobalMouseUp);
-  window.addEventListener("contextmenu", handleContextMenu);
-  window.addEventListener("click", handleClickOutside);
-});
+  window.addEventListener('resize', updateClientHeight)
+  window.addEventListener('keydown', handleKeydown)
+  window.addEventListener('mouseup', handleGlobalMouseUp)
+  window.addEventListener('contextmenu', handleContextMenu)
+  window.addEventListener('click', handleClickOutside)
+})
 
 onUnmounted(() => {
-  window.removeEventListener("resize", updateClientHeight);
-  window.removeEventListener("keydown", handleKeydown);
-  window.removeEventListener("mouseup", handleGlobalMouseUp);
-  window.removeEventListener("contextmenu", handleContextMenu);
-  window.removeEventListener("click", handleClickOutside);
-  stopDragging();
-  setBodyScroll(true);
+  window.removeEventListener('resize', updateClientHeight)
+  window.removeEventListener('keydown', handleKeydown)
+  window.removeEventListener('mouseup', handleGlobalMouseUp)
+  window.removeEventListener('contextmenu', handleContextMenu)
+  window.removeEventListener('click', handleClickOutside)
+  stopDragging()
+  setBodyScroll(true)
   if (scrollEndTimeout.value) {
-    clearTimeout(scrollEndTimeout.value);
+    clearTimeout(scrollEndTimeout.value)
   }
-});
+})
 
 onMounted(() => {
-  window.addEventListener("keydown", handleCopy);
-});
+  window.addEventListener('keydown', handleCopy)
+})
 
 onUnmounted(() => {
-  window.removeEventListener("keydown", handleCopy);
-  stopAutoScroll();
-});
+  window.removeEventListener('keydown', handleCopy)
+  stopAutoScroll()
+})
 </script>
 
 <style scoped>
@@ -1238,17 +1235,17 @@ html.dark-mode .progressive-gradient {
   transform: scale(0.4) translateY(2rem);
 }
 
-[data-pyro-terminal-selected="true"] {
+[data-pyro-terminal-selected='true'] {
   border-radius: 0;
 }
 
-[data-pyro-terminal-selected="true"].first-selected {
+[data-pyro-terminal-selected='true'].first-selected {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
   overflow: hidden !important;
 }
 
-[data-pyro-terminal-selected="true"].last-selected {
+[data-pyro-terminal-selected='true'].last-selected {
   border-bottom-left-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
   overflow: hidden !important;
@@ -1294,7 +1291,7 @@ html.dark-mode .progressive-gradient {
 }
 
 .selected-line::before {
-  content: "";
+  content: '';
   position: absolute;
   left: 0;
   top: -2px;
diff --git a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
index 587ce3051..deaf2f12a 100644
--- a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
@@ -8,7 +8,7 @@
     <div class="flex flex-col gap-4 md:w-[600px]">
       <div class="flex flex-col gap-2">
         <p class="m-0">
-          Select the version of {{ props.project?.title || "the modpack" }} you want to install on
+          Select the version of {{ props.project?.title || 'the modpack' }} you want to install on
           your server.
         </p>
         <p v-if="props.currentVersion" class="m-0 text-sm text-secondary">
@@ -51,7 +51,7 @@
               @click="handleReinstall"
             >
               <DownloadIcon class="size-4" />
-              {{ isLoading ? "Installing..." : hardReset ? "Erase and install" : "Install" }}
+              {{ isLoading ? 'Installing...' : hardReset ? 'Erase and install' : 'Install' }}
             </button>
           </ButtonStyled>
           <ButtonStyled>
@@ -67,38 +67,38 @@
 </template>
 
 <script setup lang="ts">
-import { DownloadIcon, XIcon } from "@modrinth/assets";
-import { ButtonStyled, NewModal } from "@modrinth/ui";
-import { ModrinthServersFetchError } from "@modrinth/utils";
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { ModrinthServersFetchError } from '@modrinth/utils'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-  project: any;
-  versions: any[];
-  currentVersion?: any;
-  currentVersionId?: string;
-  serverStatus?: string;
-}>();
+  server: ModrinthServer
+  project: any
+  versions: any[]
+  currentVersion?: any
+  currentVersionId?: string
+  serverStatus?: string
+}>()
 
 const emit = defineEmits<{
-  reinstall: [any?];
-}>();
+  reinstall: [any?]
+}>()
 
-const modal = ref();
-const hardReset = ref(false);
-const isLoading = ref(false);
-const selectedVersion = ref("");
+const modal = ref()
+const hardReset = ref(false)
+const isLoading = ref(false)
+const selectedVersion = ref('')
 
-const versionOptions = computed(() => props.versions?.map((v) => v.version_number) || []);
+const versionOptions = computed(() => props.versions?.map((v) => v.version_number) || [])
 
 const handleReinstall = async () => {
-  if (!selectedVersion.value || !props.project?.id) return;
+  if (!selectedVersion.value || !props.project?.id) return
 
-  isLoading.value = true;
+  isLoading.value = true
   try {
-    const versionId = props.versions.find((v) => v.version_number === selectedVersion.value)?.id;
+    const versionId = props.versions.find((v) => v.version_number === selectedVersion.value)?.id
 
     await props.server.general.reinstall(
       false,
@@ -106,56 +106,56 @@ const handleReinstall = async () => {
       versionId,
       undefined,
       hardReset.value,
-    );
+    )
 
-    emit("reinstall");
-    hide();
+    emit('reinstall')
+    hide()
   } catch (error) {
     if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
       addNotification({
-        group: "server",
-        title: "Cannot reinstall server",
-        text: "You are being rate limited. Please try again later.",
-        type: "error",
-      });
+        group: 'server',
+        title: 'Cannot reinstall server',
+        text: 'You are being rate limited. Please try again later.',
+        type: 'error',
+      })
     } else {
       addNotification({
-        group: "server",
-        title: "Reinstall Failed",
-        text: "An unexpected error occurred while reinstalling. Please try again later.",
-        type: "error",
-      });
+        group: 'server',
+        title: 'Reinstall Failed',
+        text: 'An unexpected error occurred while reinstalling. Please try again later.',
+        type: 'error',
+      })
     }
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
   }
-};
+}
 
 watch(
   () => props.serverStatus,
   (newStatus) => {
-    if (newStatus === "installing") {
-      hide();
+    if (newStatus === 'installing') {
+      hide()
     }
   },
-);
+)
 
 const onShow = () => {
-  hardReset.value = false;
+  hardReset.value = false
   selectedVersion.value =
-    props.currentVersion?.version_number ?? props.versions?.[0]?.version_number ?? "";
-};
+    props.currentVersion?.version_number ?? props.versions?.[0]?.version_number ?? ''
+}
 
 const onHide = () => {
-  hardReset.value = false;
-  selectedVersion.value = "";
-  isLoading.value = false;
-};
+  hardReset.value = false
+  selectedVersion.value = ''
+  isLoading.value = false
+}
 
-const show = () => modal.value?.show();
-const hide = () => modal.value?.hide();
+const show = () => modal.value?.show()
+const hide = () => modal.value?.hide()
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
index d90c59d76..38d67bacf 100644
--- a/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformMrpackModal.vue
@@ -110,12 +110,12 @@
                 <RightArrowIcon />
                 {{
                   isMrpackModalSecondPhase
-                    ? "Erase and install"
+                    ? 'Erase and install'
                     : loadingServerCheck
-                      ? "Loading..."
+                      ? 'Loading...'
                       : isDangerous
-                        ? "Erase and install"
-                        : "Install"
+                        ? 'Erase and install'
+                        : 'Install'
                 }}
               </button>
             </ButtonStyled>
@@ -125,15 +125,15 @@
                 @click="
                   () => {
                     if (isMrpackModalSecondPhase) {
-                      isMrpackModalSecondPhase = false;
+                      isMrpackModalSecondPhase = false
                     } else {
-                      hide();
+                      hide()
                     }
                   }
                 "
               >
                 <XIcon />
-                {{ isMrpackModalSecondPhase ? "Go back" : "Cancel" }}
+                {{ isMrpackModalSecondPhase ? 'Go back' : 'Cancel' }}
               </button>
             </ButtonStyled>
           </div>
@@ -150,200 +150,200 @@ import {
   ServerIcon,
   UploadIcon,
   XIcon,
-} from "@modrinth/assets";
-import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
-import { formatBytes, ModrinthServersFetchError } from "@modrinth/utils";
-import { onMounted, onUnmounted } from "vue";
+} from '@modrinth/assets'
+import { BackupWarning, ButtonStyled, NewModal } from '@modrinth/ui'
+import { formatBytes, ModrinthServersFetchError } from '@modrinth/utils'
+import { onMounted, onUnmounted } from 'vue'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers";
-import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers'
+import type { BackupInProgressReason } from '~/pages/servers/manage/[id].vue'
 
 const handleBeforeUnload = (event: BeforeUnloadEvent) => {
   if (isLoading.value) {
-    event.preventDefault();
-    return "Upload in progress. Are you sure you want to leave?";
+    event.preventDefault()
+    return 'Upload in progress. Are you sure you want to leave?'
   }
-};
+}
 
 onMounted(() => {
-  window.addEventListener("beforeunload", handleBeforeUnload);
-});
+  window.addEventListener('beforeunload', handleBeforeUnload)
+})
 
 onUnmounted(() => {
-  window.removeEventListener("beforeunload", handleBeforeUnload);
-});
+  window.removeEventListener('beforeunload', handleBeforeUnload)
+})
 
 const props = defineProps<{
-  server: ModrinthServer;
-  backupInProgress?: BackupInProgressReason;
-}>();
+  server: ModrinthServer
+  backupInProgress?: BackupInProgressReason
+}>()
 
 const emit = defineEmits<{
-  reinstall: [any?];
-}>();
+  reinstall: [any?]
+}>()
 
-const mrpackModal = ref();
-const isMrpackModalSecondPhase = ref(false);
-const hardReset = ref(false);
-const isLoading = ref(false);
-const loadingServerCheck = ref(false);
-const mrpackFile = ref<File | null>(null);
-const uploadProgress = ref(0);
-const uploadedBytes = ref(0);
-const totalBytes = ref(0);
+const mrpackModal = ref()
+const isMrpackModalSecondPhase = ref(false)
+const hardReset = ref(false)
+const isLoading = ref(false)
+const loadingServerCheck = ref(false)
+const mrpackFile = ref<File | null>(null)
+const uploadProgress = ref(0)
+const uploadedBytes = ref(0)
+const totalBytes = ref(0)
 
 const uploadPhrases = [
-  "Removing Herobrine...",
-  "Feeding parrots...",
-  "Teaching villagers new trades...",
-  "Convincing creepers to be friendly...",
-  "Polishing diamonds...",
-  "Training wolves to fetch...",
-  "Building pixel art...",
-  "Explaining redstone to beginners...",
-  "Collecting all the cats...",
-  "Negotiating with endermen...",
-  "Planting suspicious stew ingredients...",
-  "Calibrating TNT blast radius...",
-  "Teaching chickens to fly...",
-  "Sorting inventory alphabetically...",
-  "Convincing iron golems to smile...",
-];
+  'Removing Herobrine...',
+  'Feeding parrots...',
+  'Teaching villagers new trades...',
+  'Convincing creepers to be friendly...',
+  'Polishing diamonds...',
+  'Training wolves to fetch...',
+  'Building pixel art...',
+  'Explaining redstone to beginners...',
+  'Collecting all the cats...',
+  'Negotiating with endermen...',
+  'Planting suspicious stew ingredients...',
+  'Calibrating TNT blast radius...',
+  'Teaching chickens to fly...',
+  'Sorting inventory alphabetically...',
+  'Convincing iron golems to smile...',
+]
 
-const currentPhrase = ref("Uploading...");
-let phraseInterval: NodeJS.Timeout | null = null;
-const usedPhrases = ref(new Set<number>());
+const currentPhrase = ref('Uploading...')
+let phraseInterval: NodeJS.Timeout | null = null
+const usedPhrases = ref(new Set<number>())
 
 const getNextPhrase = () => {
   if (usedPhrases.value.size >= uploadPhrases.length) {
-    const currentPhraseIndex = uploadPhrases.indexOf(currentPhrase.value);
-    usedPhrases.value.clear();
+    const currentPhraseIndex = uploadPhrases.indexOf(currentPhrase.value)
+    usedPhrases.value.clear()
     if (currentPhraseIndex !== -1) {
-      usedPhrases.value.add(currentPhraseIndex);
+      usedPhrases.value.add(currentPhraseIndex)
     }
   }
   const availableIndices = uploadPhrases
     .map((_, index) => index)
-    .filter((index) => !usedPhrases.value.has(index));
+    .filter((index) => !usedPhrases.value.has(index))
 
-  const randomIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];
-  usedPhrases.value.add(randomIndex);
+  const randomIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)]
+  usedPhrases.value.add(randomIndex)
 
-  return uploadPhrases[randomIndex];
-};
+  return uploadPhrases[randomIndex]
+}
 
-const isDangerous = computed(() => hardReset.value);
-const canInstall = computed(() => !mrpackFile.value || isLoading.value || loadingServerCheck.value);
+const isDangerous = computed(() => hardReset.value)
+const canInstall = computed(() => !mrpackFile.value || isLoading.value || loadingServerCheck.value)
 
 const uploadMrpack = (event: Event) => {
-  const target = event.target as HTMLInputElement;
+  const target = event.target as HTMLInputElement
   if (!target.files || target.files.length === 0) {
-    return;
+    return
   }
-  mrpackFile.value = target.files[0];
-};
+  mrpackFile.value = target.files[0]
+}
 
 const handleReinstall = async () => {
   if (hardReset.value && !isMrpackModalSecondPhase.value) {
-    isMrpackModalSecondPhase.value = true;
-    return;
+    isMrpackModalSecondPhase.value = true
+    return
   }
 
   if (!mrpackFile.value) {
     addNotification({
-      group: "server",
-      title: "No file selected",
-      text: "Choose a .mrpack file before installing.",
-      type: "error",
-    });
-    return;
+      group: 'server',
+      title: 'No file selected',
+      text: 'Choose a .mrpack file before installing.',
+      type: 'error',
+    })
+    return
   }
 
-  isLoading.value = true;
-  uploadProgress.value = 0;
-  uploadProgress.value = 0;
-  uploadedBytes.value = 0;
-  totalBytes.value = mrpackFile.value.size;
+  isLoading.value = true
+  uploadProgress.value = 0
+  uploadProgress.value = 0
+  uploadedBytes.value = 0
+  totalBytes.value = mrpackFile.value.size
 
-  currentPhrase.value = getNextPhrase();
+  currentPhrase.value = getNextPhrase()
   phraseInterval = setInterval(() => {
-    currentPhrase.value = getNextPhrase();
-  }, 4500);
+    currentPhrase.value = getNextPhrase()
+  }, 4500)
 
   const { onProgress, promise } = props.server.general.reinstallFromMrpack(
     mrpackFile.value,
     hardReset.value,
-  );
+  )
 
   onProgress(({ loaded, total, progress }) => {
-    uploadProgress.value = progress;
-    uploadedBytes.value = loaded;
-    totalBytes.value = total;
+    uploadProgress.value = progress
+    uploadedBytes.value = loaded
+    totalBytes.value = total
 
     if (phraseInterval && progress >= 100) {
-      clearInterval(phraseInterval);
-      phraseInterval = null;
-      currentPhrase.value = "Installing modpack...";
+      clearInterval(phraseInterval)
+      phraseInterval = null
+      currentPhrase.value = 'Installing modpack...'
     }
-  });
+  })
 
   try {
-    await promise;
+    await promise
 
-    emit("reinstall", {
-      loader: "mrpack",
-      lVersion: "",
-      mVersion: "",
-    });
+    emit('reinstall', {
+      loader: 'mrpack',
+      lVersion: '',
+      mVersion: '',
+    })
 
-    await nextTick();
-    window.scrollTo(0, 0);
-    hide();
+    await nextTick()
+    window.scrollTo(0, 0)
+    hide()
   } catch (error) {
     if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
       addNotification({
-        group: "server",
-        title: "Cannot upload and install modpack to server",
-        text: "You are being rate limited. Please try again later.",
-        type: "error",
-      });
+        group: 'server',
+        title: 'Cannot upload and install modpack to server',
+        text: 'You are being rate limited. Please try again later.',
+        type: 'error',
+      })
     } else {
       addNotification({
-        group: "server",
-        title: "Modpack upload and install failed",
-        text: "An unexpected error occurred while uploading/installing. Please try again later.",
-        type: "error",
-      });
+        group: 'server',
+        title: 'Modpack upload and install failed',
+        text: 'An unexpected error occurred while uploading/installing. Please try again later.',
+        type: 'error',
+      })
     }
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
     if (phraseInterval) {
-      clearInterval(phraseInterval);
-      phraseInterval = null;
+      clearInterval(phraseInterval)
+      phraseInterval = null
     }
   }
-};
+}
 const onShow = () => {
-  hardReset.value = false;
-  isMrpackModalSecondPhase.value = false;
-  loadingServerCheck.value = false;
-  isLoading.value = false;
-  mrpackFile.value = null;
-  uploadProgress.value = 0;
-  uploadedBytes.value = 0;
-  totalBytes.value = 0;
-  currentPhrase.value = "Uploading...";
-  usedPhrases.value.clear();
+  hardReset.value = false
+  isMrpackModalSecondPhase.value = false
+  loadingServerCheck.value = false
+  isLoading.value = false
+  mrpackFile.value = null
+  uploadProgress.value = 0
+  uploadedBytes.value = 0
+  totalBytes.value = 0
+  currentPhrase.value = 'Uploading...'
+  usedPhrases.value.clear()
   if (phraseInterval) {
-    clearInterval(phraseInterval);
-    phraseInterval = null;
+    clearInterval(phraseInterval)
+    phraseInterval = null
   }
-};
+}
 
-const show = () => mrpackModal.value?.show();
-const hide = () => mrpackModal.value?.hide();
+const show = () => mrpackModal.value?.show()
+const hide = () => mrpackModal.value?.hide()
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
index 08c09afc4..f6e9b49ed 100644
--- a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
+++ b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
@@ -20,7 +20,7 @@
         }"
       >
         {{
-          "This will reinstall your server and erase all data. Are you sure you want to continue?"
+          'This will reinstall your server and erase all data. Are you sure you want to continue?'
         }}
       </p>
       <div v-if="!isSecondPhase" class="flex flex-col gap-4">
@@ -165,12 +165,12 @@
             <RightArrowIcon />
             {{
               isLoading
-                ? "Installing..."
+                ? 'Installing...'
                 : isSecondPhase
-                  ? "Erase and install"
+                  ? 'Erase and install'
                   : hardReset
-                    ? "Continue"
-                    : "Install"
+                    ? 'Continue'
+                    : 'Install'
             }}
           </button>
         </ButtonStyled>
@@ -180,15 +180,15 @@
             @click="
               () => {
                 if (isSecondPhase) {
-                  isSecondPhase = false;
+                  isSecondPhase = false
                 } else {
-                  hide();
+                  hide()
                 }
               }
             "
           >
             <XIcon />
-            {{ isSecondPhase ? "Go back" : "Cancel" }}
+            {{ isSecondPhase ? 'Go back' : 'Cancel' }}
           </button>
         </ButtonStyled>
       </div>
@@ -197,170 +197,169 @@
 </template>
 
 <script setup lang="ts">
-import { DropdownIcon, RightArrowIcon, ServerIcon, XIcon } from "@modrinth/assets";
-import { BackupWarning, ButtonStyled, NewModal, Toggle } from "@modrinth/ui";
-import { type Loaders, ModrinthServersFetchError } from "@modrinth/utils";
-import { $fetch } from "ofetch";
+import { DropdownIcon, RightArrowIcon, ServerIcon, XIcon } from '@modrinth/assets'
+import { BackupWarning, ButtonStyled, NewModal, Toggle } from '@modrinth/ui'
+import { type Loaders, ModrinthServersFetchError } from '@modrinth/utils'
+import { $fetch } from 'ofetch'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
-import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
+import type { BackupInProgressReason } from '~/pages/servers/manage/[id].vue'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 interface LoaderVersion {
-  id: string;
-  stable: boolean;
+  id: string
+  stable: boolean
   loaders: {
-    id: string;
-    url: string;
-    stable: boolean;
-  }[];
+    id: string
+    url: string
+    stable: boolean
+  }[]
 }
 
-type VersionMap = Record<string, LoaderVersion[]>;
-type VersionCache = Record<string, any>;
+type VersionMap = Record<string, LoaderVersion[]>
+type VersionCache = Record<string, any>
 
 const props = defineProps<{
-  server: ModrinthServer;
-  currentLoader: Loaders | undefined;
-  backupInProgress?: BackupInProgressReason;
-  initialSetup?: boolean;
-}>();
+  server: ModrinthServer
+  currentLoader: Loaders | undefined
+  backupInProgress?: BackupInProgressReason
+  initialSetup?: boolean
+}>()
 
 const emit = defineEmits<{
-  reinstall: [any?];
-}>();
+  reinstall: [any?]
+}>()
 
-const versionSelectModal = ref();
-const isSecondPhase = ref(false);
-const hardReset = ref(false);
-const isLoading = ref(false);
-const loadingServerCheck = ref(false);
-const serverCheckError = ref("");
-const showSnapshots = ref(false);
+const versionSelectModal = ref()
+const isSecondPhase = ref(false)
+const hardReset = ref(false)
+const isLoading = ref(false)
+const loadingServerCheck = ref(false)
+const serverCheckError = ref('')
+const showSnapshots = ref(false)
 
-const selectedLoader = ref<Loaders>("Vanilla");
-const selectedMCVersion = ref("");
-const selectedLoaderVersion = ref("");
+const selectedLoader = ref<Loaders>('Vanilla')
+const selectedMCVersion = ref('')
+const selectedLoaderVersion = ref('')
 
-const paperVersions = ref<Record<string, number[]>>({});
-const purpurVersions = ref<Record<string, string[]>>({});
-const loaderVersions = ref<VersionMap>({});
-const cachedVersions = ref<VersionCache>({});
+const paperVersions = ref<Record<string, number[]>>({})
+const purpurVersions = ref<Record<string, string[]>>({})
+const loaderVersions = ref<VersionMap>({})
+const cachedVersions = ref<VersionCache>({})
 
-const versionStrings = ["forge", "fabric", "quilt", "neo"] as const;
+const versionStrings = ['forge', 'fabric', 'quilt', 'neo'] as const
 
 const isSnapshotSelected = computed(() => {
   if (selectedMCVersion.value) {
-    const selected = tags.value.gameVersions.find((x) => x.version === selectedMCVersion.value);
-    if (selected?.version_type !== "release") {
-      return true;
+    const selected = tags.value.gameVersions.find((x) => x.version === selectedMCVersion.value)
+    if (selected?.version_type !== 'release') {
+      return true
     }
   }
-  return false;
-});
+  return false
+})
 
 const getLoaderVersions = async (loader: string) => {
   return await $fetch(
     `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/manifest.json`,
-  );
-};
+  )
+}
 
 const fetchLoaderVersions = async () => {
   const versions = await Promise.all(
     versionStrings.map(async (loader) => {
       const runFetch = async (iterations: number) => {
         if (iterations > 5) {
-          throw new Error("Failed to fetch loader versions");
+          throw new Error('Failed to fetch loader versions')
         }
         try {
-          const res = await getLoaderVersions(loader);
-          return { [loader]: (res as any).gameVersions };
+          const res = await getLoaderVersions(loader)
+          return { [loader]: (res as any).gameVersions }
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
         } catch (_) {
-          return await runFetch(iterations + 1);
+          return await runFetch(iterations + 1)
         }
-      };
+      }
       try {
-        return await runFetch(0);
+        return await runFetch(0)
       } catch (e) {
-        console.error(e);
-        return { [loader]: [] };
+        console.error(e)
+        return { [loader]: [] }
       }
     }),
-  );
+  )
 
-  loaderVersions.value = versions.reduce((acc, val) => ({ ...acc, ...val }), {});
-};
+  loaderVersions.value = versions.reduce((acc, val) => ({ ...acc, ...val }), {})
+}
 
 const fetchPaperVersions = async (mcVersion: string) => {
   try {
-    const res = await $fetch(`https://api.papermc.io/v2/projects/paper/versions/${mcVersion}`);
-    paperVersions.value[mcVersion] = (res as any).builds.sort((a: number, b: number) => b - a);
-    return res;
+    const res = await $fetch(`https://api.papermc.io/v2/projects/paper/versions/${mcVersion}`)
+    paperVersions.value[mcVersion] = (res as any).builds.sort((a: number, b: number) => b - a)
+    return res
   } catch (e) {
-    console.error(e);
-    return null;
+    console.error(e)
+    return null
   }
-};
+}
 
 const fetchPurpurVersions = async (mcVersion: string) => {
   try {
-    const res = await $fetch(`https://api.purpurmc.org/v2/purpur/${mcVersion}`);
+    const res = await $fetch(`https://api.purpurmc.org/v2/purpur/${mcVersion}`)
     purpurVersions.value[mcVersion] = (res as any).builds.all.sort(
       (a: string, b: string) => parseInt(b) - parseInt(a),
-    );
-    return res;
+    )
+    return res
   } catch (e) {
-    console.error(e);
-    return null;
+    console.error(e)
+    return null
   }
-};
+}
 
 const selectedLoaderVersions = computed<string[]>(() => {
-  const loader = selectedLoader.value.toLowerCase();
+  const loader = selectedLoader.value.toLowerCase()
 
-  if (loader === "paper") {
-    return paperVersions.value[selectedMCVersion.value]?.map((x) => `${x}`) || [];
+  if (loader === 'paper') {
+    return paperVersions.value[selectedMCVersion.value]?.map((x) => `${x}`) || []
   }
 
-  if (loader === "purpur") {
-    return purpurVersions.value[selectedMCVersion.value] || [];
+  if (loader === 'purpur') {
+    return purpurVersions.value[selectedMCVersion.value] || []
   }
 
-  if (loader === "vanilla") {
-    return [];
+  if (loader === 'vanilla') {
+    return []
   }
 
-  let apiLoader = loader;
-  if (loader === "neoforge") {
-    apiLoader = "neo";
+  let apiLoader = loader
+  if (loader === 'neoforge') {
+    apiLoader = 'neo'
   }
 
   const backwardsCompatibleVersion = loaderVersions.value[apiLoader]?.find(
-     
-    (x) => x.id === "${modrinth.gameVersion}",
-  );
+    (x) => x.id === '${modrinth.gameVersion}',
+  )
 
   if (backwardsCompatibleVersion) {
-    return backwardsCompatibleVersion.loaders.map((x) => x.id);
+    return backwardsCompatibleVersion.loaders.map((x) => x.id)
   }
 
   return (
     loaderVersions.value[apiLoader]
       ?.find((x) => x.id === selectedMCVersion.value)
       ?.loaders.map((x) => x.id) || []
-  );
-});
+  )
+})
 
 watch(selectedLoader, async () => {
   if (selectedMCVersion.value) {
-    selectedLoaderVersion.value = "";
-    serverCheckError.value = "";
+    selectedLoaderVersion.value = ''
+    serverCheckError.value = ''
 
-    await checkVersionAvailability(selectedMCVersion.value);
+    await checkVersionAvailability(selectedMCVersion.value)
   }
-});
+})
 
 watch(
   selectedLoaderVersions,
@@ -369,161 +368,161 @@ watch(
       newVersions.length > 0 &&
       (!selectedLoaderVersion.value || !newVersions.includes(selectedLoaderVersion.value))
     ) {
-      selectedLoaderVersion.value = String(newVersions[0]);
+      selectedLoaderVersion.value = String(newVersions[0])
     }
   },
   { immediate: true },
-);
+)
 
 const getLoaderVersion = async (loader: string, version: string) => {
   return await $fetch(
     `https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/versions/${version}.json`,
-  );
-};
+  )
+}
 
 const checkVersionAvailability = async (version: string) => {
-  if (!version || version.trim().length < 3) return;
+  if (!version || version.trim().length < 3) return
 
-  isLoading.value = true;
-  loadingServerCheck.value = true;
+  isLoading.value = true
+  loadingServerCheck.value = true
 
   try {
-    const mcRes = cachedVersions.value[version] || (await getLoaderVersion("minecraft", version));
+    const mcRes = cachedVersions.value[version] || (await getLoaderVersion('minecraft', version))
 
-    cachedVersions.value[version] = mcRes;
+    cachedVersions.value[version] = mcRes
 
     if (!mcRes.downloads?.server) {
-      serverCheckError.value = "We couldn't find a server.jar for this version.";
-      return;
+      serverCheckError.value = "We couldn't find a server.jar for this version."
+      return
     }
 
-    const loader = selectedLoader.value.toLowerCase();
-    if (loader === "paper" || loader === "purpur") {
-      const fetchFn = loader === "paper" ? fetchPaperVersions : fetchPurpurVersions;
-      const result = await fetchFn(version);
+    const loader = selectedLoader.value.toLowerCase()
+    if (loader === 'paper' || loader === 'purpur') {
+      const fetchFn = loader === 'paper' ? fetchPaperVersions : fetchPurpurVersions
+      const result = await fetchFn(version)
       if (!result) {
-        serverCheckError.value = `This Minecraft version is not supported by ${loader}.`;
-        return;
+        serverCheckError.value = `This Minecraft version is not supported by ${loader}.`
+        return
       }
     }
 
-    serverCheckError.value = "";
+    serverCheckError.value = ''
   } catch (error) {
-    console.error(error);
-    serverCheckError.value = "Failed to fetch versions.";
+    console.error(error)
+    serverCheckError.value = 'Failed to fetch versions.'
   } finally {
-    loadingServerCheck.value = false;
-    isLoading.value = false;
+    loadingServerCheck.value = false
+    isLoading.value = false
   }
-};
+}
 
-watch(selectedMCVersion, checkVersionAvailability);
+watch(selectedMCVersion, checkVersionAvailability)
 
 onMounted(() => {
-  fetchLoaderVersions();
-});
+  fetchLoaderVersions()
+})
 
-const tags = useTags();
+const tags = useTags()
 const mcVersions = computed(() =>
   tags.value.gameVersions
     .filter((x) =>
       showSnapshots.value
-        ? x.version_type === "snapshot" || x.version_type === "release"
-        : x.version_type === "release",
+        ? x.version_type === 'snapshot' || x.version_type === 'release'
+        : x.version_type === 'release',
     )
     .map((x) => x.version),
-);
+)
 
-const isDangerous = computed(() => hardReset.value);
+const isDangerous = computed(() => hardReset.value)
 const canInstall = computed(() => {
   const conds =
     !selectedMCVersion.value ||
     isLoading.value ||
     loadingServerCheck.value ||
-    serverCheckError.value.trim().length > 0;
+    serverCheckError.value.trim().length > 0
 
-  if (selectedLoader.value.toLowerCase() === "vanilla") {
-    return conds;
+  if (selectedLoader.value.toLowerCase() === 'vanilla') {
+    return conds
   }
 
-  return conds || !selectedLoaderVersion.value;
-});
+  return conds || !selectedLoaderVersion.value
+})
 
 const handleReinstall = async () => {
   if (hardReset.value && !isSecondPhase.value) {
-    isSecondPhase.value = true;
-    return;
+    isSecondPhase.value = true
+    return
   }
 
-  isLoading.value = true;
+  isLoading.value = true
 
   try {
     await props.server.general?.reinstall(
       true,
       selectedLoader.value,
       selectedMCVersion.value,
-      selectedLoader.value === "Vanilla" ? "" : selectedLoaderVersion.value,
+      selectedLoader.value === 'Vanilla' ? '' : selectedLoaderVersion.value,
       props.initialSetup ? true : hardReset.value,
-    );
+    )
 
-    emit("reinstall", {
+    emit('reinstall', {
       loader: selectedLoader.value,
       lVersion: selectedLoaderVersion.value,
       mVersion: selectedMCVersion.value,
-    });
+    })
 
-    hide();
+    hide()
   } catch (error) {
     if (error instanceof ModrinthServersFetchError && (error as any)?.statusCode === 429) {
       addNotification({
-        group: "server",
-        title: "Cannot reinstall server",
-        text: "You are being rate limited. Please try again later.",
-        type: "error",
-      });
+        group: 'server',
+        title: 'Cannot reinstall server',
+        text: 'You are being rate limited. Please try again later.',
+        type: 'error',
+      })
     } else {
       addNotification({
-        group: "server",
-        title: "Reinstall Failed",
-        text: "An unexpected error occurred while reinstalling. Please try again later.",
-        type: "error",
-      });
+        group: 'server',
+        title: 'Reinstall Failed',
+        text: 'An unexpected error occurred while reinstalling. Please try again later.',
+        type: 'error',
+      })
     }
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
   }
-};
+}
 
 const onShow = () => {
-  selectedMCVersion.value = props.server.general?.mc_version || "";
+  selectedMCVersion.value = props.server.general?.mc_version || ''
   if (isSnapshotSelected.value) {
-    showSnapshots.value = true;
+    showSnapshots.value = true
   }
-};
+}
 
 const onHide = () => {
-  hardReset.value = false;
-  isSecondPhase.value = false;
-  serverCheckError.value = "";
-  loadingServerCheck.value = false;
-  isLoading.value = false;
-  selectedMCVersion.value = "";
-  serverCheckError.value = "";
-  paperVersions.value = {};
-  purpurVersions.value = {};
-};
+  hardReset.value = false
+  isSecondPhase.value = false
+  serverCheckError.value = ''
+  loadingServerCheck.value = false
+  isLoading.value = false
+  selectedMCVersion.value = ''
+  serverCheckError.value = ''
+  paperVersions.value = {}
+  purpurVersions.value = {}
+}
 
 const show = (loader: Loaders) => {
   if (selectedLoader.value !== loader) {
-    selectedLoaderVersion.value = "";
+    selectedLoaderVersion.value = ''
   }
-  selectedLoader.value = loader;
-  selectedMCVersion.value = props.server.general?.mc_version || "";
-  versionSelectModal.value?.show();
-};
-const hide = () => versionSelectModal.value?.hide();
+  selectedLoader.value = loader
+  selectedMCVersion.value = props.server.general?.mc_version || ''
+  versionSelectModal.value?.show()
+}
+const hide = () => versionSelectModal.value?.hide()
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/SaveBanner.vue b/apps/frontend/src/components/ui/servers/SaveBanner.vue
index 07bc0825a..a947d4e3b 100644
--- a/apps/frontend/src/components/ui/servers/SaveBanner.vue
+++ b/apps/frontend/src/components/ui/servers/SaveBanner.vue
@@ -14,12 +14,12 @@
             </ButtonStyled>
             <ButtonStyled type="standard" :color="props.restart ? 'standard' : 'brand'">
               <button :disabled="props.isUpdating" @click="props.save">
-                {{ props.isUpdating ? "Saving..." : "Save" }}
+                {{ props.isUpdating ? 'Saving...' : 'Save' }}
               </button>
             </ButtonStyled>
             <ButtonStyled v-if="props.restart" type="standard" color="brand">
               <button :disabled="props.isUpdating" @click="saveAndRestart">
-                {{ props.isUpdating ? "Saving..." : "Save & restart" }}
+                {{ props.isUpdating ? 'Saving...' : 'Save & restart' }}
               </button>
             </ButtonStyled>
           </div>
@@ -30,23 +30,23 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled } from '@modrinth/ui'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  isUpdating: boolean;
-  restart?: boolean;
-  save: () => void;
-  reset: () => void;
-  isVisible: boolean;
-  server: ModrinthServer;
-}>();
+  isUpdating: boolean
+  restart?: boolean
+  save: () => void
+  reset: () => void
+  isVisible: boolean
+  server: ModrinthServer
+}>()
 
 const saveAndRestart = async () => {
-  props.save();
-  await props.server.general?.power("Restart");
-};
+  props.save()
+  await props.server.general?.power('Restart')
+}
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/ServerGameLabel.vue b/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
index 6c7fd043d..3076090b6 100644
--- a/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerGameLabel.vue
@@ -26,14 +26,14 @@
 </template>
 
 <script setup lang="ts">
-import { GameIcon } from "@modrinth/assets";
+import { GameIcon } from '@modrinth/assets'
 
 defineProps<{
-  game: string;
-  mcVersion: string;
-  isLink?: boolean;
-}>();
+  game: string
+  mcVersion: string
+  isLink?: boolean
+}>()
 
-const route = useNativeRoute();
-const serverId = route.params.id as string;
+const route = useNativeRoute()
+const serverId = route.params.id as string
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerIcon.vue b/apps/frontend/src/components/ui/servers/ServerIcon.vue
index 9e8d00b29..058c465bb 100644
--- a/apps/frontend/src/components/ui/servers/ServerIcon.vue
+++ b/apps/frontend/src/components/ui/servers/ServerIcon.vue
@@ -21,6 +21,6 @@
 
 <script setup lang="ts">
 defineProps<{
-  image: string | undefined;
-}>();
+  image: string | undefined
+}>()
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue b/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
index 56f257d32..60d3f367c 100644
--- a/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
+++ b/apps/frontend/src/components/ui/servers/ServerInfoLabels.vue
@@ -28,13 +28,13 @@
 
 <script setup lang="ts">
 interface ServerInfoLabelsProps {
-  serverData: Record<string, any>;
-  showGameLabel: boolean;
-  showLoaderLabel: boolean;
-  uptimeSeconds?: number;
-  column?: boolean;
-  linked?: boolean;
+  serverData: Record<string, any>
+  showGameLabel: boolean
+  showLoaderLabel: boolean
+  uptimeSeconds?: number
+  column?: boolean
+  linked?: boolean
 }
 
-defineProps<ServerInfoLabelsProps>();
+defineProps<ServerInfoLabelsProps>()
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerListing.vue b/apps/frontend/src/components/ui/servers/ServerListing.vue
index 00f8c0af7..8f5e7f165 100644
--- a/apps/frontend/src/components/ui/servers/ServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/ServerListing.vue
@@ -39,7 +39,7 @@
             style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
             alt="Server Icon"
           />
-          Using {{ projectData?.title || "Unknown" }}
+          Using {{ projectData?.title || 'Unknown' }}
         </div>
         <div v-else class="min-h-[20px]"></div>
 
@@ -101,37 +101,37 @@
 </template>
 
 <script setup lang="ts">
-import { ChevronRightIcon, LockIcon, SparklesIcon } from "@modrinth/assets";
-import { Avatar, CopyCode } from "@modrinth/ui";
-import type { Project, Server } from "@modrinth/utils";
+import { ChevronRightIcon, LockIcon, SparklesIcon } from '@modrinth/assets'
+import { Avatar, CopyCode } from '@modrinth/ui'
+import type { Project, Server } from '@modrinth/utils'
 
-import { useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
+import { useModrinthServers } from '~/composables/servers/modrinth-servers.ts'
 
-const props = defineProps<Partial<Server>>();
+const props = defineProps<Partial<Server>>()
 
-if (props.server_id && props.status === "available") {
+if (props.server_id && props.status === 'available') {
   // Necessary only to get server icon
-  await useModrinthServers(props.server_id, ["general"]);
+  await useModrinthServers(props.server_id, ['general'])
 }
 
-const showGameLabel = computed(() => !!props.game);
-const showLoaderLabel = computed(() => !!props.loader);
+const showGameLabel = computed(() => !!props.game)
+const showLoaderLabel = computed(() => !!props.loader)
 
-let projectData: Ref<Project | null>;
+let projectData: Ref<Project | null>
 if (props.upstream) {
   const { data } = await useAsyncData<Project>(
     `server-project-${props.server_id}`,
     async (): Promise<Project> => {
-      const result = await useBaseFetch(`project/${props.upstream?.project_id}`);
-      return result as Project;
+      const result = await useBaseFetch(`project/${props.upstream?.project_id}`)
+      return result as Project
     },
-  );
-  projectData = data;
+  )
+  projectData = data
 } else {
-  projectData = ref(null);
+  projectData = ref(null)
 }
 
-const image = useState<string | undefined>(`server-icon-${props.server_id}`, () => undefined);
-const iconUrl = computed(() => projectData.value?.icon_url || undefined);
-const isConfiguring = computed(() => props.flows?.intro);
+const image = useState<string | undefined>(`server-icon-${props.server_id}`, () => undefined)
+const iconUrl = computed(() => projectData.value?.icon_url || undefined)
+const isConfiguring = computed(() => props.flows?.intro)
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
index c9920099e..bac24c727 100644
--- a/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerLoaderLabel.vue
@@ -35,12 +35,12 @@
 
 <script setup lang="ts">
 defineProps<{
-  noSeparator?: boolean;
-  loader?: "Fabric" | "Quilt" | "Forge" | "NeoForge" | "Paper" | "Spigot" | "Bukkit" | "Vanilla";
-  loaderVersion?: string;
-  isLink?: boolean;
-}>();
+  noSeparator?: boolean
+  loader?: 'Fabric' | 'Quilt' | 'Forge' | 'NeoForge' | 'Paper' | 'Spigot' | 'Bukkit' | 'Vanilla'
+  loaderVersion?: string
+  isLink?: boolean
+}>()
 
-const route = useNativeRoute();
-const serverId = route.params.id as string;
+const route = useNativeRoute()
+const serverId = route.params.id as string
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerManageEmptyState.vue b/apps/frontend/src/components/ui/servers/ServerManageEmptyState.vue
index dd7cde956..fac041920 100644
--- a/apps/frontend/src/components/ui/servers/ServerManageEmptyState.vue
+++ b/apps/frontend/src/components/ui/servers/ServerManageEmptyState.vue
@@ -15,5 +15,5 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled } from '@modrinth/ui'
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerSidebar.vue b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
index db39f26d9..2f884e1a8 100644
--- a/apps/frontend/src/components/ui/servers/ServerSidebar.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
@@ -35,22 +35,22 @@
 </template>
 
 <script setup lang="ts">
-import { RightArrowIcon } from "@modrinth/assets";
-import type { RouteLocationNormalized } from "vue-router";
+import { RightArrowIcon } from '@modrinth/assets'
+import type { RouteLocationNormalized } from 'vue-router'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
-import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
+import type { BackupInProgressReason } from '~/pages/servers/manage/[id].vue'
 
-const emit = defineEmits(["reinstall"]);
+const emit = defineEmits(['reinstall'])
 
 defineProps<{
-  navLinks: { label: string; href: string; icon: Component; external?: boolean; shown?: boolean }[];
-  route: RouteLocationNormalized;
-  server: ModrinthServer;
-  backupInProgress?: BackupInProgressReason;
-}>();
+  navLinks: { label: string; href: string; icon: Component; external?: boolean; shown?: boolean }[]
+  route: RouteLocationNormalized
+  server: ModrinthServer
+  backupInProgress?: BackupInProgressReason
+}>()
 
 const onReinstall = (...args: any[]) => {
-  emit("reinstall", ...args);
-};
+  emit('reinstall', ...args)
+}
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerStats.vue b/apps/frontend/src/components/ui/servers/ServerStats.vue
index cb7623e27..f38f27038 100644
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ b/apps/frontend/src/components/ui/servers/ServerStats.vue
@@ -57,7 +57,7 @@
     >
       <div class="flex flex-row items-center gap-2">
         <h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">
-          {{ loading ? "0 B" : formatBytes(stats.storage_usage_bytes) }}
+          {{ loading ? '0 B' : formatBytes(stats.storage_usage_bytes) }}
         </h2>
       </div>
       <h3 class="text-base font-normal text-secondary">Storage usage</h3>
@@ -67,25 +67,25 @@
 </template>
 
 <script setup lang="ts">
-import { CpuIcon, DatabaseIcon, FolderOpenIcon, IssuesIcon } from "@modrinth/assets";
-import type { Stats } from "@modrinth/utils";
-import { useStorage } from "@vueuse/core";
-import { computed, ref, shallowRef } from "vue";
+import { CpuIcon, DatabaseIcon, FolderOpenIcon, IssuesIcon } from '@modrinth/assets'
+import type { Stats } from '@modrinth/utils'
+import { useStorage } from '@vueuse/core'
+import { computed, ref, shallowRef } from 'vue'
 
-const flags = useFeatureFlags();
-const route = useNativeRoute();
-const serverId = route.params.id;
-const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
+const flags = useFeatureFlags()
+const route = useNativeRoute()
+const serverId = route.params.id
+const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
 
-const chartsReady = ref(new Set<number>());
+const chartsReady = ref(new Set<number>())
 
 const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
   ramAsNumber: false,
-});
+})
 
 const props = withDefaults(defineProps<{ data?: Stats; loading?: boolean }>(), {
   loading: false,
-});
+})
 
 const stats = shallowRef(
   props.data?.current || {
@@ -94,76 +94,76 @@ const stats = shallowRef(
     ram_total_bytes: 1, // Avoid division by zero
     storage_usage_bytes: 0,
   },
-);
+)
 
 const onChartReady = (index: number) => {
-  chartsReady.value.add(index);
-};
+  chartsReady.value.add(index)
+}
 
 const formatBytes = (bytes: number) => {
-  const units = ["B", "KB", "MB", "GB"];
-  let value = bytes;
-  let unit = 0;
+  const units = ['B', 'KB', 'MB', 'GB']
+  let value = bytes
+  let unit = 0
   while (value >= 1024 && unit < units.length - 1) {
-    value /= 1024;
-    unit++;
+    value /= 1024
+    unit++
   }
-  return `${Math.round(value * 10) / 10} ${units[unit]}`;
-};
+  return `${Math.round(value * 10) / 10} ${units[unit]}`
+}
 
-const cpuData = ref<number[]>(Array(20).fill(0));
-const ramData = ref<number[]>(Array(20).fill(0));
+const cpuData = ref<number[]>(Array(20).fill(0))
+const ramData = ref<number[]>(Array(20).fill(0))
 
 const updateGraphData = (arr: number[], newValue: number) => {
-  arr.push(newValue);
-  arr.shift();
-};
+  arr.push(newValue)
+  arr.shift()
+}
 
 const metrics = computed(() => {
   if (props.loading) {
     return [
       {
-        title: "CPU usage",
-        value: "0.00%",
-        max: "100%",
+        title: 'CPU usage',
+        value: '0.00%',
+        max: '100%',
         icon: CpuIcon,
         data: cpuData.value,
         showGraph: false,
         warning: null,
       },
       {
-        title: "Memory usage",
-        value: "0.00%",
-        max: "100%",
+        title: 'Memory usage',
+        value: '0.00%',
+        max: '100%',
         icon: DatabaseIcon,
         data: ramData.value,
         showGraph: false,
         warning: null,
       },
-    ];
+    ]
   }
 
   const ramPercent = Math.min(
     (stats.value.ram_usage_bytes / stats.value.ram_total_bytes) * 100,
     100,
-  );
-  const cpuPercent = Math.min(stats.value.cpu_percent, 100);
+  )
+  const cpuPercent = Math.min(stats.value.cpu_percent, 100)
 
-  updateGraphData(cpuData.value, cpuPercent);
-  updateGraphData(ramData.value, ramPercent);
+  updateGraphData(cpuData.value, cpuPercent)
+  updateGraphData(ramData.value, ramPercent)
 
   return [
     {
-      title: "CPU usage",
+      title: 'CPU usage',
       value: `${cpuPercent.toFixed(2)}%`,
-      max: "100%",
+      max: '100%',
       icon: CpuIcon,
       data: cpuData.value,
       showGraph: true,
-      warning: cpuPercent >= 90 ? "CPU usage is very high" : null,
+      warning: cpuPercent >= 90 ? 'CPU usage is very high' : null,
     },
     {
-      title: "Memory usage",
+      title: 'Memory usage',
       value:
         userPreferences.value.ramAsNumber || flags.developerMode
           ? formatBytes(stats.value.ram_usage_bytes)
@@ -171,18 +171,18 @@ const metrics = computed(() => {
       max:
         userPreferences.value.ramAsNumber || flags.developerMode
           ? formatBytes(stats.value.ram_total_bytes)
-          : "100%",
+          : '100%',
       icon: DatabaseIcon,
       data: ramData.value,
       showGraph: true,
-      warning: ramPercent >= 90 ? "Memory usage is very high" : null,
+      warning: ramPercent >= 90 ? 'Memory usage is very high' : null,
     },
-  ];
-});
+  ]
+})
 
 const getChartOptions = (hasWarning: string | null, index: number) => ({
   chart: {
-    type: "area",
+    type: 'area',
     animations: { enabled: false },
     sparkline: { enabled: true },
     toolbar: { show: false },
@@ -197,9 +197,9 @@ const getChartOptions = (hasWarning: string | null, index: number) => ({
       updated: () => onChartReady(index),
     },
   },
-  stroke: { curve: "smooth", width: 3 },
+  stroke: { curve: 'smooth', width: 3 },
   fill: {
-    type: "gradient",
+    type: 'gradient',
     gradient: {
       shadeIntensity: 1,
       opacityFrom: 0.25,
@@ -212,7 +212,7 @@ const getChartOptions = (hasWarning: string | null, index: number) => ({
   xaxis: {
     labels: { show: false },
     axisBorder: { show: false },
-    type: "numeric",
+    type: 'numeric',
     tickAmount: 20,
     range: 20,
   },
@@ -222,20 +222,20 @@ const getChartOptions = (hasWarning: string | null, index: number) => ({
     max: 100,
     forceNiceScale: false,
   },
-  colors: [hasWarning ? "var(--color-orange)" : "var(--color-brand)"],
+  colors: [hasWarning ? 'var(--color-orange)' : 'var(--color-brand)'],
   dataLabels: {
     enabled: false,
   },
-});
+})
 
 watch(
   () => props.data?.current,
   (newStats) => {
     if (newStats) {
-      stats.value = newStats;
+      stats.value = newStats
     }
   },
-);
+)
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
index d27d44b9f..f617f74c2 100644
--- a/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerSubdomainLabel.vue
@@ -19,30 +19,30 @@
 </template>
 
 <script setup lang="ts">
-import { LinkIcon } from "@modrinth/assets";
-import { useStorage } from "@vueuse/core";
+import { LinkIcon } from '@modrinth/assets'
+import { useStorage } from '@vueuse/core'
 
 const props = defineProps<{
-  subdomain: string;
-  noSeparator?: boolean;
-}>();
+  subdomain: string
+  noSeparator?: boolean
+}>()
 
 const copySubdomain = () => {
-  navigator.clipboard.writeText(props.subdomain + ".modrinth.gg");
+  navigator.clipboard.writeText(props.subdomain + '.modrinth.gg')
   addNotification({
-    group: "servers",
-    title: "Custom URL copied",
+    group: 'servers',
+    title: 'Custom URL copied',
     text: "Your server's URL has been copied to your clipboard.",
-    type: "success",
-  });
-};
+    type: 'success',
+  })
+}
 
-const route = useNativeRoute();
-const serverId = computed(() => route.params.id as string);
+const route = useNativeRoute()
+const serverId = computed(() => route.params.id as string)
 
 const userPreferences = useStorage(`pyro-server-${serverId.value}-preferences`, {
   hideSubdomainLabel: false,
-});
+})
 
-const isHidden = computed(() => userPreferences.value.hideSubdomainLabel);
+const isHidden = computed(() => userPreferences.value.hideSubdomainLabel)
 </script>
diff --git a/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue b/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
index f90be6640..a889e3d6e 100644
--- a/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
+++ b/apps/frontend/src/components/ui/servers/ServerUptimeLabel.vue
@@ -17,49 +17,49 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue'
 
 const props = defineProps<{
-  uptimeSeconds: number;
-  noSeparator?: boolean;
-}>();
+  uptimeSeconds: number
+  noSeparator?: boolean
+}>()
 
 const formattedUptime = computed(() => {
-  const days = Math.floor(props.uptimeSeconds / (24 * 3600));
-  const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600);
-  const minutes = Math.floor((props.uptimeSeconds % 3600) / 60);
-  const seconds = props.uptimeSeconds % 60;
+  const days = Math.floor(props.uptimeSeconds / (24 * 3600))
+  const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600)
+  const minutes = Math.floor((props.uptimeSeconds % 3600) / 60)
+  const seconds = props.uptimeSeconds % 60
 
-  let formatted = "";
+  let formatted = ''
   if (days > 0) {
-    formatted += `${days}d `;
+    formatted += `${days}d `
   }
   if (hours > 0 || days > 0) {
-    formatted += `${hours}h `;
+    formatted += `${hours}h `
   }
-  formatted += `${minutes}m ${seconds}s`;
+  formatted += `${minutes}m ${seconds}s`
 
-  return formatted.trim();
-});
+  return formatted.trim()
+})
 
 const verboseUptime = computed(() => {
-  const days = Math.floor(props.uptimeSeconds / (24 * 3600));
-  const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600);
-  const minutes = Math.floor((props.uptimeSeconds % 3600) / 60);
-  const seconds = props.uptimeSeconds % 60;
+  const days = Math.floor(props.uptimeSeconds / (24 * 3600))
+  const hours = Math.floor((props.uptimeSeconds % (24 * 3600)) / 3600)
+  const minutes = Math.floor((props.uptimeSeconds % 3600) / 60)
+  const seconds = props.uptimeSeconds % 60
 
-  let verbose = "";
+  let verbose = ''
   if (days > 0) {
-    verbose += `${days} day${days > 1 ? "s" : ""} `;
+    verbose += `${days} day${days > 1 ? 's' : ''} `
   }
   if (hours > 0) {
-    verbose += `${hours} hour${hours > 1 ? "s" : ""} `;
+    verbose += `${hours} hour${hours > 1 ? 's' : ''} `
   }
   if (minutes > 0) {
-    verbose += `${minutes} minute${minutes > 1 ? "s" : ""} `;
+    verbose += `${minutes} minute${minutes > 1 ? 's' : ''} `
   }
-  verbose += `${seconds} second${seconds > 1 ? "s" : ""}`;
+  verbose += `${seconds} second${seconds > 1 ? 's' : ''}`
 
-  return verbose.trim();
-});
+  return verbose.trim()
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue b/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
index 85afeb2e4..3115a321b 100644
--- a/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
+++ b/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
@@ -42,7 +42,7 @@
                 v-if="typeof option.action === 'function'"
                 :ref="
                   (el) => {
-                    if (el) menuItemsRef[index] = el as HTMLElement;
+                    if (el) menuItemsRef[index] = el as HTMLElement
                   }
                 "
                 class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
@@ -58,7 +58,7 @@
                 v-else-if="typeof option.action === 'string' && option.action.startsWith('/')"
                 :ref="
                   (el) => {
-                    if (el) menuItemsRef[index] = el as HTMLElement;
+                    if (el) menuItemsRef[index] = el as HTMLElement
                   }
                 "
                 :to="option.action"
@@ -75,7 +75,7 @@
                 v-else-if="typeof option.action === 'string' && !option.action.startsWith('http')"
                 :ref="
                   (el) => {
-                    if (el) menuItemsRef[index] = el as HTMLElement;
+                    if (el) menuItemsRef[index] = el as HTMLElement
                   }
                 "
                 :href="option.action"
@@ -101,347 +101,347 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled } from "@modrinth/ui";
-import { onClickOutside, useElementHover } from "@vueuse/core";
-import { computed,nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { ButtonStyled } from '@modrinth/ui'
+import { onClickOutside, useElementHover } from '@vueuse/core'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
 interface Option {
-  id: string;
-  action?: (() => void) | string;
-  shown?: boolean;
-  color?: "standard" | "brand" | "red" | "orange" | "green" | "blue" | "purple";
+  id: string
+  action?: (() => void) | string
+  shown?: boolean
+  color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
 }
 
 type Divider = {
-  divider: true;
-  shown?: boolean;
-};
+  divider: true
+  shown?: boolean
+}
 
-type Item = Option | Divider;
+type Item = Option | Divider
 
 function isDivider(item: Item): item is Divider {
-  return (item as Divider).divider;
+  return (item as Divider).divider
 }
 
 const props = withDefaults(
   defineProps<{
-    options: Item[];
-    hoverable?: boolean;
+    options: Item[]
+    hoverable?: boolean
   }>(),
   {
     hoverable: false,
   },
-);
+)
 
 const emit = defineEmits<{
-  (e: "select", option: Option): void;
-}>();
+  (e: 'select', option: Option): void
+}>()
 
-const isOpen = ref(false);
-const selectedIndex = ref(-1);
-const menuRef = ref<HTMLElement | null>(null);
-const triggerRef = ref<HTMLElement | null>(null);
-const isMouseDown = ref(false);
-const typeAheadBuffer = ref("");
-const typeAheadTimeout = ref<number | null>(null);
-const menuItemsRef = ref<HTMLElement[]>([]);
+const isOpen = ref(false)
+const selectedIndex = ref(-1)
+const menuRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const isMouseDown = ref(false)
+const typeAheadBuffer = ref('')
+const typeAheadTimeout = ref<number | null>(null)
+const menuItemsRef = ref<HTMLElement[]>([])
 
-const hoveringTrigger = useElementHover(triggerRef);
-const hoveringMenu = useElementHover(menuRef);
+const hoveringTrigger = useElementHover(triggerRef)
+const hoveringMenu = useElementHover(menuRef)
 
-const hovering = computed(() => hoveringTrigger.value || hoveringMenu.value);
+const hovering = computed(() => hoveringTrigger.value || hoveringMenu.value)
 
 const menuStyle = ref({
-  top: "0px",
-  left: "0px",
-});
+  top: '0px',
+  left: '0px',
+})
 
-const filteredOptions = computed(() => props.options.filter((option) => option.shown !== false));
+const filteredOptions = computed(() => props.options.filter((option) => option.shown !== false))
 
 const calculateMenuPosition = () => {
-  if (!triggerRef.value || !menuRef.value) return { top: "0px", left: "0px" };
+  if (!triggerRef.value || !menuRef.value) return { top: '0px', left: '0px' }
 
-  const triggerRect = triggerRef.value.getBoundingClientRect();
-  const menuRect = menuRef.value.getBoundingClientRect();
-  const menuWidth = menuRect.width;
-  const menuHeight = menuRect.height;
-  const margin = 8;
+  const triggerRect = triggerRef.value.getBoundingClientRect()
+  const menuRect = menuRef.value.getBoundingClientRect()
+  const menuWidth = menuRect.width
+  const menuHeight = menuRect.height
+  const margin = 8
 
-  let top: number;
-  let left: number;
+  let top: number
+  let left: number
 
   // okay gang lets calculate this shit
   // from the top now yall
   // y
   if (triggerRect.bottom + menuHeight + margin <= window.innerHeight) {
-    top = triggerRect.bottom + margin;
+    top = triggerRect.bottom + margin
   } else if (triggerRect.top - menuHeight - margin >= 0) {
-    top = triggerRect.top - menuHeight - margin;
+    top = triggerRect.top - menuHeight - margin
   } else {
-    top = Math.max(margin, window.innerHeight - menuHeight - margin);
+    top = Math.max(margin, window.innerHeight - menuHeight - margin)
   }
 
   // x
   if (triggerRect.left + menuWidth + margin <= window.innerWidth) {
-    left = triggerRect.left;
+    left = triggerRect.left
   } else if (triggerRect.right - menuWidth - margin >= 0) {
-    left = triggerRect.right - menuWidth;
+    left = triggerRect.right - menuWidth
   } else {
-    left = Math.max(margin, window.innerWidth - menuWidth - margin);
+    left = Math.max(margin, window.innerWidth - menuWidth - margin)
   }
 
   return {
     top: `${top}px`,
     left: `${left}px`,
-  };
-};
+  }
+}
 
 const toggleMenu = (event: MouseEvent) => {
-  event.stopPropagation();
+  event.stopPropagation()
   if (!props.hoverable) {
     if (isOpen.value) {
-      closeMenu();
+      closeMenu()
     } else {
-      openMenu();
+      openMenu()
     }
   }
-};
+}
 
 const openMenu = () => {
-  isOpen.value = true;
-  disableBodyScroll();
+  isOpen.value = true
+  disableBodyScroll()
   nextTick(() => {
-    menuStyle.value = calculateMenuPosition();
-    document.addEventListener("mousemove", handleMouseMove);
-    focusFirstMenuItem();
-  });
-};
+    menuStyle.value = calculateMenuPosition()
+    document.addEventListener('mousemove', handleMouseMove)
+    focusFirstMenuItem()
+  })
+}
 
 const closeMenu = () => {
-  isOpen.value = false;
-  selectedIndex.value = -1;
-  enableBodyScroll();
-  document.removeEventListener("mousemove", handleMouseMove);
-};
+  isOpen.value = false
+  selectedIndex.value = -1
+  enableBodyScroll()
+  document.removeEventListener('mousemove', handleMouseMove)
+}
 
 const selectOption = (option: Option) => {
-  emit("select", option);
-  if (typeof option.action === "function") {
-    option.action();
+  emit('select', option)
+  if (typeof option.action === 'function') {
+    option.action()
   }
-  closeMenu();
-};
+  closeMenu()
+}
 
 const handleMouseDown = (event: MouseEvent) => {
-  event.preventDefault();
-  isMouseDown.value = true;
-};
+  event.preventDefault()
+  isMouseDown.value = true
+}
 
 const handleMouseEnter = () => {
   if (props.hoverable) {
-    openMenu();
+    openMenu()
   }
-};
+}
 
 const handleMouseLeave = () => {
   if (props.hoverable) {
     setTimeout(() => {
       if (!hovering.value) {
-        closeMenu();
+        closeMenu()
       }
-    }, 250);
+    }, 250)
   }
-};
+}
 
 const handleMouseMove = (event: MouseEvent) => {
-  if (!isOpen.value || !isMouseDown.value) return;
+  if (!isOpen.value || !isMouseDown.value) return
 
-  const menuRect = menuRef.value?.getBoundingClientRect();
-  if (!menuRect) return;
+  const menuRect = menuRef.value?.getBoundingClientRect()
+  if (!menuRect) return
 
-  const menuItems = menuRef.value?.querySelectorAll('[role="menuitem"]');
-  if (!menuItems) return;
+  const menuItems = menuRef.value?.querySelectorAll('[role="menuitem"]')
+  if (!menuItems) return
 
   for (let i = 0; i < menuItems.length; i++) {
-    const itemRect = (menuItems[i] as HTMLElement).getBoundingClientRect();
+    const itemRect = (menuItems[i] as HTMLElement).getBoundingClientRect()
     if (
       event.clientX >= itemRect.left &&
       event.clientX <= itemRect.right &&
       event.clientY >= itemRect.top &&
       event.clientY <= itemRect.bottom
     ) {
-      selectedIndex.value = i;
-      break;
+      selectedIndex.value = i
+      break
     }
   }
-};
+}
 
 const handleItemClick = (option: Option, index: number) => {
-  selectedIndex.value = index;
-  selectOption(option);
-};
+  selectedIndex.value = index
+  selectOption(option)
+}
 
 const handleMouseOver = (index: number) => {
-  selectedIndex.value = index;
-  menuItemsRef.value[selectedIndex.value].focus?.();
-};
+  selectedIndex.value = index
+  menuItemsRef.value[selectedIndex.value].focus?.()
+}
 
 // Scrolling is disabled for keyboard navigation
 const disableBodyScroll = () => {
   // Make opening not shift page when there's a vertical scrollbar
-  const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+  const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth
   if (scrollBarWidth > 0) {
-    document.body.style.paddingRight = `${scrollBarWidth}px`;
+    document.body.style.paddingRight = `${scrollBarWidth}px`
   } else {
-    document.body.style.paddingRight = "";
+    document.body.style.paddingRight = ''
   }
 
-  document.body.style.overflow = "hidden";
-};
+  document.body.style.overflow = 'hidden'
+}
 
 const enableBodyScroll = () => {
-  document.body.style.paddingRight = "";
-  document.body.style.overflow = "";
-};
+  document.body.style.paddingRight = ''
+  document.body.style.overflow = ''
+}
 
 const focusFirstMenuItem = () => {
   if (menuItemsRef.value.length > 0) {
-    menuItemsRef.value[0].focus?.();
+    menuItemsRef.value[0].focus?.()
   }
-};
+}
 
 const handleKeydown = (event: KeyboardEvent) => {
   if (!isOpen.value) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      openMenu();
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      openMenu()
     }
-    return;
+    return
   }
 
   switch (event.key) {
-    case "ArrowDown":
-      event.preventDefault();
-      selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length;
-      menuItemsRef.value[selectedIndex.value].focus?.();
-      break;
-    case "ArrowUp":
-      event.preventDefault();
+    case 'ArrowDown':
+      event.preventDefault()
+      selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
+      menuItemsRef.value[selectedIndex.value].focus?.()
+      break
+    case 'ArrowUp':
+      event.preventDefault()
       selectedIndex.value =
-        (selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length;
-      menuItemsRef.value[selectedIndex.value].focus?.();
-      break;
-    case "Home":
-      event.preventDefault();
+        (selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
+      menuItemsRef.value[selectedIndex.value].focus?.()
+      break
+    case 'Home':
+      event.preventDefault()
       if (menuItemsRef.value.length > 0) {
-        selectedIndex.value = 0;
-        menuItemsRef.value[selectedIndex.value].focus?.();
+        selectedIndex.value = 0
+        menuItemsRef.value[selectedIndex.value].focus?.()
       }
-      break;
-    case "End":
-      event.preventDefault();
+      break
+    case 'End':
+      event.preventDefault()
       if (menuItemsRef.value.length > 0) {
-        selectedIndex.value = filteredOptions.value.length - 1;
-        menuItemsRef.value[selectedIndex.value].focus?.();
+        selectedIndex.value = filteredOptions.value.length - 1
+        menuItemsRef.value[selectedIndex.value].focus?.()
       }
-      break;
-    case "Enter":
-    case " ":
-      event.preventDefault();
+      break
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
       if (selectedIndex.value >= 0) {
-        const option = filteredOptions.value[selectedIndex.value];
-        if (isDivider(option)) break;
-        selectOption(option);
+        const option = filteredOptions.value[selectedIndex.value]
+        if (isDivider(option)) break
+        selectOption(option)
       }
-      break;
-    case "Escape":
-      event.preventDefault();
-      closeMenu();
-      triggerRef.value?.focus?.();
-      break;
-    case "Tab":
-      event.preventDefault();
+      break
+    case 'Escape':
+      event.preventDefault()
+      closeMenu()
+      triggerRef.value?.focus?.()
+      break
+    case 'Tab':
+      event.preventDefault()
       if (menuItemsRef.value.length > 0) {
         if (event.shiftKey) {
           selectedIndex.value =
-            (selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length;
+            (selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
         } else {
-          selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length;
+          selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
         }
-        menuItemsRef.value[selectedIndex.value].focus?.();
+        menuItemsRef.value[selectedIndex.value].focus?.()
       }
-      break;
+      break
     default:
       if (event.key.length === 1) {
-        typeAheadBuffer.value += event.key.toLowerCase();
+        typeAheadBuffer.value += event.key.toLowerCase()
         const matchIndex = filteredOptions.value.findIndex(
           (option) =>
             !isDivider(option) && option.id.toLowerCase().startsWith(typeAheadBuffer.value),
-        );
+        )
         if (matchIndex !== -1) {
-          selectedIndex.value = matchIndex;
-          menuItemsRef.value[selectedIndex.value].focus?.();
+          selectedIndex.value = matchIndex
+          menuItemsRef.value[selectedIndex.value].focus?.()
         }
         if (typeAheadTimeout.value) {
-          clearTimeout(typeAheadTimeout.value);
+          clearTimeout(typeAheadTimeout.value)
         }
         typeAheadTimeout.value = setTimeout(() => {
-          typeAheadBuffer.value = "";
-        }, 1000) as unknown as number;
+          typeAheadBuffer.value = ''
+        }, 1000) as unknown as number
       }
-      break;
+      break
   }
-};
+}
 
 const handleResizeOrScroll = () => {
   if (isOpen.value) {
-    menuStyle.value = calculateMenuPosition();
+    menuStyle.value = calculateMenuPosition()
   }
-};
+}
 
 const throttle = (func: (...args: any[]) => void, limit: number): ((...args: any[]) => void) => {
-  let inThrottle: boolean;
+  let inThrottle: boolean
   return function (...args: any[]) {
     if (!inThrottle) {
-      func(...args);
-      inThrottle = true;
-      setTimeout(() => (inThrottle = false), limit);
+      func(...args)
+      inThrottle = true
+      setTimeout(() => (inThrottle = false), limit)
     }
-  };
-};
+  }
+}
 
-const throttledHandleResizeOrScroll = throttle(handleResizeOrScroll, 100);
+const throttledHandleResizeOrScroll = throttle(handleResizeOrScroll, 100)
 
 onMounted(() => {
-  triggerRef.value?.addEventListener("keydown", handleKeydown);
-  window.addEventListener("resize", throttledHandleResizeOrScroll);
-  window.addEventListener("scroll", throttledHandleResizeOrScroll);
-});
+  triggerRef.value?.addEventListener('keydown', handleKeydown)
+  window.addEventListener('resize', throttledHandleResizeOrScroll)
+  window.addEventListener('scroll', throttledHandleResizeOrScroll)
+})
 
 onUnmounted(() => {
-  triggerRef.value?.removeEventListener("keydown", handleKeydown);
-  window.removeEventListener("resize", throttledHandleResizeOrScroll);
-  window.removeEventListener("scroll", throttledHandleResizeOrScroll);
-  document.removeEventListener("mousemove", handleMouseMove);
+  triggerRef.value?.removeEventListener('keydown', handleKeydown)
+  window.removeEventListener('resize', throttledHandleResizeOrScroll)
+  window.removeEventListener('scroll', throttledHandleResizeOrScroll)
+  document.removeEventListener('mousemove', handleMouseMove)
   if (typeAheadTimeout.value) {
-    clearTimeout(typeAheadTimeout.value);
+    clearTimeout(typeAheadTimeout.value)
   }
-  enableBodyScroll();
-});
+  enableBodyScroll()
+})
 
 watch(isOpen, (newValue) => {
   if (newValue) {
     nextTick(() => {
-      menuRef.value?.addEventListener("keydown", handleKeydown);
-    });
+      menuRef.value?.addEventListener('keydown', handleKeydown)
+    })
   } else {
-    menuRef.value?.removeEventListener("keydown", handleKeydown);
+    menuRef.value?.removeEventListener('keydown', handleKeydown)
   }
-});
+})
 
 onClickOutside(menuRef, (event) => {
   if (!triggerRef.value?.contains(event.target as Node)) {
-    closeMenu();
+    closeMenu()
   }
-});
+})
 </script>
diff --git a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
index 5e53075a7..2ff0d3e8f 100644
--- a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
+++ b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
@@ -223,10 +223,10 @@
 </template>
 
 <script setup lang="ts">
-import { LoaderIcon } from "@modrinth/assets";
-import type { Loaders } from "@modrinth/utils";
+import { LoaderIcon } from '@modrinth/assets'
+import type { Loaders } from '@modrinth/utils'
 
 defineProps<{
-  loader: Loaders;
-}>();
+  loader: Loaders
+}>()
 </script>
diff --git a/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue b/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
index 51bf3ba0a..c15c4e9ad 100644
--- a/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
@@ -1,95 +1,95 @@
 <script setup lang="ts">
-import { ButtonStyled, ServersSpecs } from "@modrinth/ui";
-import { formatPrice } from "@modrinth/utils";
-import type { MessageDescriptor } from "@vintl/vintl";
+import { ButtonStyled, ServersSpecs } from '@modrinth/ui'
+import { formatPrice } from '@modrinth/utils'
+import type { MessageDescriptor } from '@vintl/vintl'
 
-const { formatMessage, locale } = useVIntl();
+const { formatMessage, locale } = useVIntl()
 
 const emit = defineEmits<{
-  (e: "select" | "scroll-to-faq"): void;
-}>();
+  (e: 'select' | 'scroll-to-faq'): void
+}>()
 
-type Plan = "small" | "medium" | "large";
+type Plan = 'small' | 'medium' | 'large'
 
 const plans: Record<
   Plan,
   {
-    buttonColor: "blue" | "green" | "purple";
-    accentText: string;
-    accentBg: string;
-    name: MessageDescriptor;
-    description: MessageDescriptor;
-    mostPopular: boolean;
+    buttonColor: 'blue' | 'green' | 'purple'
+    accentText: string
+    accentBg: string
+    name: MessageDescriptor
+    description: MessageDescriptor
+    mostPopular: boolean
   }
 > = {
   small: {
-    buttonColor: "blue",
-    accentText: "text-blue",
-    accentBg: "bg-bg-blue",
+    buttonColor: 'blue',
+    accentText: 'text-blue',
+    accentBg: 'bg-bg-blue',
     name: defineMessage({
-      id: "servers.plan.small.name",
-      defaultMessage: "Small",
+      id: 'servers.plan.small.name',
+      defaultMessage: 'Small',
     }),
     description: defineMessage({
-      id: "servers.plan.small.description",
-      defaultMessage: "Perfect for 1–5 friends with a few light mods.",
+      id: 'servers.plan.small.description',
+      defaultMessage: 'Perfect for 1–5 friends with a few light mods.',
     }),
     mostPopular: false,
   },
   medium: {
-    buttonColor: "green",
-    accentText: "text-green",
-    accentBg: "bg-bg-green",
+    buttonColor: 'green',
+    accentText: 'text-green',
+    accentBg: 'bg-bg-green',
     name: defineMessage({
-      id: "servers.plan.medium.name",
-      defaultMessage: "Medium",
+      id: 'servers.plan.medium.name',
+      defaultMessage: 'Medium',
     }),
     description: defineMessage({
-      id: "servers.plan.medium.description",
-      defaultMessage: "Great for 6–15 players and multiple mods.",
+      id: 'servers.plan.medium.description',
+      defaultMessage: 'Great for 6–15 players and multiple mods.',
     }),
     mostPopular: true,
   },
   large: {
-    buttonColor: "purple",
-    accentText: "text-purple",
-    accentBg: "bg-bg-purple",
+    buttonColor: 'purple',
+    accentText: 'text-purple',
+    accentBg: 'bg-bg-purple',
     name: defineMessage({
-      id: "servers.plan.large.name",
-      defaultMessage: "Large",
+      id: 'servers.plan.large.name',
+      defaultMessage: 'Large',
     }),
     description: defineMessage({
-      id: "servers.plan.large.description",
-      defaultMessage: "Ideal for 15–25 players, modpacks, or heavy modding.",
+      id: 'servers.plan.large.description',
+      defaultMessage: 'Ideal for 15–25 players, modpacks, or heavy modding.',
     }),
     mostPopular: false,
   },
-};
+}
 
 const props = defineProps<{
-  capacity?: number;
-  plan: Plan;
-  ram: number;
-  storage: number;
-  cpus: number;
-  price: number;
-  interval: "monthly" | "quarterly" | "yearly";
-  currency: string;
-  isUsa: boolean;
-}>();
+  capacity?: number
+  plan: Plan
+  ram: number
+  storage: number
+  cpus: number
+  price: number
+  interval: 'monthly' | 'quarterly' | 'yearly'
+  currency: string
+  isUsa: boolean
+}>()
 
 const outOfStock = computed(() => {
-  return !props.capacity || props.capacity === 0;
-});
+  return !props.capacity || props.capacity === 0
+})
 
 const billingMonths = computed(() => {
-  if (props.interval === "yearly") {
-    return 12;
-  } else if (props.interval === "quarterly") {
-    return 3;
+  if (props.interval === 'yearly') {
+    return 12
+  } else if (props.interval === 'quarterly') {
+    return 3
   }
-  return 1;
-});
+  return 1
+})
 </script>
 
 <template>
@@ -122,7 +122,7 @@ const billingMonths = computed(() => {
         </div>
         <span class="m-0 text-2xl font-bold text-contrast">
           {{ formatPrice(locale, price / billingMonths, currency, true) }}
-          {{ isUsa ? "" : currency }}
+          {{ isUsa ? '' : currency }}
           <span class="text-lg font-semibold text-secondary">
             / month<template v-if="interval !== 'monthly'">, billed {{ interval }}</template>
           </span>
diff --git a/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue b/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
index 0c2c65189..f69db8a47 100644
--- a/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
+++ b/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
@@ -1,112 +1,112 @@
 <script setup lang="ts">
-import { PlusIcon, XIcon } from "@modrinth/assets";
-import { Accordion, ButtonStyled, NewModal, ServerNotice, TagItem } from "@modrinth/ui";
-import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
-import { ref } from "vue";
+import { PlusIcon, XIcon } from '@modrinth/assets'
+import { Accordion, ButtonStyled, NewModal, ServerNotice, TagItem } from '@modrinth/ui'
+import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
+import { ref } from 'vue'
 
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
-const app = useNuxtApp() as unknown as { $notify: any };
+const app = useNuxtApp() as unknown as { $notify: any }
 
-const modal = ref<InstanceType<typeof NewModal>>();
+const modal = ref<InstanceType<typeof NewModal>>()
 
 const emit = defineEmits<{
-  (e: "close"): void;
-}>();
+  (e: 'close'): void
+}>()
 
-const notice = ref<ServerNoticeType>();
+const notice = ref<ServerNoticeType>()
 
-const assigned = ref<ServerNoticeType["assigned"]>([]);
+const assigned = ref<ServerNoticeType['assigned']>([])
 
-const assignedServers = computed(() => assigned.value.filter((n) => n.kind === "server") ?? []);
-const assignedNodes = computed(() => assigned.value.filter((n) => n.kind === "node") ?? []);
+const assignedServers = computed(() => assigned.value.filter((n) => n.kind === 'server') ?? [])
+const assignedNodes = computed(() => assigned.value.filter((n) => n.kind === 'node') ?? [])
 
-const inputField = ref("");
+const inputField = ref('')
 
 async function refresh() {
-  await useServersFetch("notices").then((res) => {
-    const notices = res as ServerNoticeType[];
-    assigned.value = notices.find((n) => n.id === notice.value?.id)?.assigned ?? [];
-  });
+  await useServersFetch('notices').then((res) => {
+    const notices = res as ServerNoticeType[]
+    assigned.value = notices.find((n) => n.id === notice.value?.id)?.assigned ?? []
+  })
 }
 
 async function assign(server: boolean = true) {
-  const input = inputField.value.trim();
+  const input = inputField.value.trim()
 
-  if (input !== "" && notice.value) {
+  if (input !== '' && notice.value) {
     await useServersFetch(
-      `notices/${notice.value.id}/assign?${server ? "server" : "node"}=${input}`,
+      `notices/${notice.value.id}/assign?${server ? 'server' : 'node'}=${input}`,
       {
-        method: "PUT",
+        method: 'PUT',
       },
     ).catch((err) => {
       app.$notify({
-        group: "main",
-        title: "Error assigning notice",
+        group: 'main',
+        title: 'Error assigning notice',
         text: err,
-        type: "error",
-      });
-    });
+        type: 'error',
+      })
+    })
   } else {
     app.$notify({
-      group: "main",
-      title: "Error assigning notice",
-      text: "No server or node specified",
-      type: "error",
-    });
+      group: 'main',
+      title: 'Error assigning notice',
+      text: 'No server or node specified',
+      type: 'error',
+    })
   }
-  await refresh();
+  await refresh()
 }
 
 async function unassignDetect() {
-  const input = inputField.value.trim();
+  const input = inputField.value.trim()
 
-  const server = assignedServers.value.some((assigned) => assigned.id === input);
-  const node = assignedNodes.value.some((assigned) => assigned.id === input);
+  const server = assignedServers.value.some((assigned) => assigned.id === input)
+  const node = assignedNodes.value.some((assigned) => assigned.id === input)
 
   if (!server && !node) {
     app.$notify({
-      group: "main",
-      title: "Error unassigning notice",
-      text: "ID is not an assigned server or node",
-      type: "error",
-    });
-    return;
+      group: 'main',
+      title: 'Error unassigning notice',
+      text: 'ID is not an assigned server or node',
+      type: 'error',
+    })
+    return
   }
 
-  await unassign(input, server);
+  await unassign(input, server)
 }
 
 async function unassign(id: string, server: boolean = true) {
   if (notice.value) {
     await useServersFetch(
-      `notices/${notice.value.id}/unassign?${server ? "server" : "node"}=${id}`,
+      `notices/${notice.value.id}/unassign?${server ? 'server' : 'node'}=${id}`,
       {
-        method: "PUT",
+        method: 'PUT',
       },
     ).catch((err) => {
       app.$notify({
-        group: "main",
-        title: "Error unassigning notice",
+        group: 'main',
+        title: 'Error unassigning notice',
         text: err,
-        type: "error",
-      });
-    });
+        type: 'error',
+      })
+    })
   }
-  await refresh();
+  await refresh()
 }
 
 function show(currentNotice: ServerNoticeType) {
-  notice.value = currentNotice;
-  assigned.value = currentNotice?.assigned ?? [];
-  modal.value?.show();
+  notice.value = currentNotice
+  assigned.value = currentNotice?.assigned ?? []
+  modal.value?.show()
 }
 
 function hide() {
-  modal.value?.hide();
+  modal.value?.hide()
 }
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
 <template>
   <NewModal ref="modal" :on-hide="() => emit('close')">
@@ -165,7 +165,7 @@ defineExpose({ show, hide });
                 :key="`node-${node.id}`"
                 :action="
                   () => {
-                    unassign(node.id, false);
+                    unassign(node.id, false)
                   }
                 "
               >
diff --git a/apps/frontend/src/components/ui/thread/ThreadMessage.vue b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
index 06f615fb8..5a8adff96 100644
--- a/apps/frontend/src/components/ui/thread/ThreadMessage.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
@@ -102,11 +102,11 @@ import {
   MoreHorizontalIcon,
   ScaleIcon,
   TrashIcon,
-} from "@modrinth/assets";
-import { AutoLink, Avatar, Badge, OverflowMenu, useRelativeTime } from "@modrinth/ui";
-import { renderString } from "@modrinth/utils";
+} from '@modrinth/assets'
+import { AutoLink, Avatar, Badge, OverflowMenu, useRelativeTime } from '@modrinth/ui'
+import { renderString } from '@modrinth/utils'
 
-import { isStaff } from "~/helpers/users.js";
+import { isStaff } from '~/helpers/users.js'
 
 const props = defineProps({
   message: {
@@ -137,34 +137,34 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-});
+})
 
-const emit = defineEmits(["update-thread"]);
+const emit = defineEmits(['update-thread'])
 
 const formattedMessage = computed(() => {
-  const body = renderString(props.message.body.body);
+  const body = renderString(props.message.body.body)
   if (props.forceCompact) {
-    const hasImage = body.includes("<img");
-    const noHtml = body.replace(/<\/?[^>]+(>|$)/g, "");
+    const hasImage = body.includes('<img')
+    const noHtml = body.replace(/<\/?[^>]+(>|$)/g, '')
     if (noHtml.trim()) {
-      return noHtml;
+      return noHtml
     } else if (hasImage) {
-      return "sent an image.";
+      return 'sent an image.'
     } else {
-      return "sent a message.";
+      return 'sent a message.'
     }
   }
-  return body;
-});
+  return body
+})
 
-const formatRelativeTime = useRelativeTime();
-const timeSincePosted = ref(formatRelativeTime(props.message.created));
+const formatRelativeTime = useRelativeTime()
+const timeSincePosted = ref(formatRelativeTime(props.message.created))
 
 async function deleteMessage() {
   await useBaseFetch(`message/${props.message.id}`, {
-    method: "DELETE",
-  });
-  emit("update-thread");
+    method: 'DELETE',
+  })
+  emit('update-thread')
 }
 </script>
 
@@ -189,9 +189,9 @@ async function deleteMessage() {
     --gap-size: var(--spacing-card-sm);
     display: grid;
     grid-template:
-      "icon author actions"
-      "icon body actions"
-      "date date date";
+      'icon author actions'
+      'icon body actions'
+      'date date date';
     grid-template-columns: min-content auto 1fr;
     column-gap: var(--gap-size);
     row-gap: var(--spacing-card-xs);
@@ -307,9 +307,9 @@ a:active + .message__author a,
 
     &.has-body {
       grid-template:
-        "icon author actions"
-        "icon body actions"
-        "date date date";
+        'icon author actions'
+        'icon body actions'
+        'date date date';
       grid-template-columns: min-content auto 1fr;
     }
   }
@@ -322,8 +322,8 @@ a:active + .message__author a,
 
     &.has-body {
       grid-template:
-        "icon author date actions"
-        "icon body body actions";
+        'icon author date actions'
+        'icon body body actions';
       grid-template-columns: min-content auto 1fr;
       grid-template-rows: min-content 1fr auto;
     }
diff --git a/apps/frontend/src/components/ui/thread/ThreadSummary.vue b/apps/frontend/src/components/ui/thread/ThreadSummary.vue
index 84014fe68..a9e97888c 100644
--- a/apps/frontend/src/components/ui/thread/ThreadSummary.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadSummary.vue
@@ -24,9 +24,9 @@
 </template>
 
 <script setup>
-import { ChevronRightIcon } from "@modrinth/assets";
+import { ChevronRightIcon } from '@modrinth/assets'
 
-import ThreadMessage from "~/components/ui/thread/ThreadMessage.vue";
+import ThreadMessage from '~/components/ui/thread/ThreadMessage.vue'
 
 const props = defineProps({
   thread: {
@@ -50,36 +50,36 @@ const props = defineProps({
     type: Array,
     required: false,
     default() {
-      return [];
+      return []
     },
   },
   auth: {
     type: Object,
     required: true,
   },
-});
+})
 
-const app = useNuxtApp();
+const app = useNuxtApp()
 
 const members = computed(() => {
-  const members = {};
+  const members = {}
   for (const member of props.thread.members) {
-    members[member.id] = member;
+    members[member.id] = member
   }
-  members[props.auth.user.id] = props.auth.user;
-  return members;
-});
+  members[props.auth.user.id] = props.auth.user
+  return members
+})
 
 const displayMessages = computed(() => {
   const sortedMessages = props.thread.messages
     .slice()
-    .sort((a, b) => app.$dayjs(a.created) - app.$dayjs(b.created));
+    .sort((a, b) => app.$dayjs(a.created) - app.$dayjs(b.created))
   if (props.messages.length > 0) {
-    return sortedMessages.filter((msg) => props.messages.includes(msg.id));
+    return sortedMessages.filter((msg) => props.messages.includes(msg.id))
   } else {
-    return sortedMessages.length > 0 ? [sortedMessages[sortedMessages.length - 1]] : [];
+    return sortedMessages.length > 0 ? [sortedMessages[sortedMessages.length - 1]] : []
   }
-});
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/composables/auth.js b/apps/frontend/src/composables/auth.js
index 978a4d844..db21bd43f 100644
--- a/apps/frontend/src/composables/auth.js
+++ b/apps/frontend/src/composables/auth.js
@@ -1,71 +1,71 @@
 export const useAuth = async (oldToken = null) => {
-  const auth = useState("auth", () => ({
+  const auth = useState('auth', () => ({
     user: null,
-    token: "",
+    token: '',
     headers: {},
-  }));
+  }))
 
   if (!auth.value.user || oldToken) {
-    auth.value = await initAuth(oldToken);
+    auth.value = await initAuth(oldToken)
   }
 
-  return auth;
-};
+  return auth
+}
 
 export const initAuth = async (oldToken = null) => {
   const auth = {
     user: null,
-    token: "",
-  };
-
-  if (oldToken === "none") {
-    return auth;
+    token: '',
   }
 
-  const route = useRoute();
-  const authCookie = useCookie("auth-token", {
+  if (oldToken === 'none') {
+    return auth
+  }
+
+  const route = useRoute()
+  const authCookie = useCookie('auth-token', {
     maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: "lax",
+    sameSite: 'lax',
     secure: true,
     httpOnly: false,
-    path: "/",
-  });
+    path: '/',
+  })
 
   if (oldToken) {
-    authCookie.value = oldToken;
+    authCookie.value = oldToken
   }
 
-  if (route.query.code && !route.fullPath.includes("new_account=true")) {
-    authCookie.value = route.query.code;
+  if (route.query.code && !route.fullPath.includes('new_account=true')) {
+    authCookie.value = route.query.code
   }
 
-  if (route.fullPath.includes("new_account=true") && route.path !== "/auth/welcome") {
-    const redirect = route.path.startsWith("/auth/") ? null : route.fullPath;
+  if (route.fullPath.includes('new_account=true') && route.path !== '/auth/welcome') {
+    const redirect = route.path.startsWith('/auth/') ? null : route.fullPath
 
     await navigateTo(
       `/auth/welcome?authToken=${route.query.code}${
-        redirect ? `&redirect=${encodeURIComponent(redirect)}` : ""
+        redirect ? `&redirect=${encodeURIComponent(redirect)}` : ''
       }`,
-    );
+    )
   }
 
   if (authCookie.value) {
-    auth.token = authCookie.value;
+    auth.token = authCookie.value
 
-    if (!auth.token || !auth.token.startsWith("mra_")) {
-      return auth;
+    if (!auth.token || !auth.token.startsWith('mra_')) {
+      return auth
     }
 
     try {
       auth.user = await useBaseFetch(
-        "user",
+        'user',
         {
           headers: {
             Authorization: auth.token,
           },
         },
         true,
-      );
+      )
     } catch {
       /* empty */
     }
@@ -74,67 +74,67 @@ export const initAuth = async (oldToken = null) => {
   if (!auth.user && auth.token) {
     try {
       const session = await useBaseFetch(
-        "session/refresh",
+        'session/refresh',
         {
-          method: "POST",
+          method: 'POST',
           headers: {
             Authorization: auth.token,
           },
         },
         true,
-      );
+      )
 
-      auth.token = session.session;
-      authCookie.value = auth.token;
+      auth.token = session.session
+      authCookie.value = auth.token
 
       auth.user = await useBaseFetch(
-        "user",
+        'user',
         {
           headers: {
             Authorization: auth.token,
           },
         },
         true,
-      );
+      )
     } catch {
-      authCookie.value = null;
+      authCookie.value = null
     }
   }
 
-  return auth;
-};
+  return auth
+}
 
-export const getAuthUrl = (provider, redirect = "/dashboard") => {
-  const config = useRuntimeConfig();
-  const route = useNativeRoute();
+export const getAuthUrl = (provider, redirect = '/dashboard') => {
+  const config = useRuntimeConfig()
+  const route = useNativeRoute()
 
   const fullURL = route.query.launcher
-    ? "https://launcher-files.modrinth.com"
-    : `${config.public.siteUrl}/auth/sign-in?redirect=${redirect}`;
+    ? 'https://launcher-files.modrinth.com'
+    : `${config.public.siteUrl}/auth/sign-in?redirect=${redirect}`
 
-  return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${encodeURIComponent(fullURL)}`;
-};
+  return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${encodeURIComponent(fullURL)}`
+}
 
 export const removeAuthProvider = async (provider) => {
-  startLoading();
+  startLoading()
   try {
-    const auth = await useAuth();
+    const auth = await useAuth()
 
-    await useBaseFetch("auth/provider", {
-      method: "DELETE",
+    await useBaseFetch('auth/provider', {
+      method: 'DELETE',
       body: {
         provider,
       },
-    });
-    await useAuth(auth.value.token);
+    })
+    await useAuth(auth.value.token)
   } catch (err) {
-    const data = useNuxtApp();
+    const data = useNuxtApp()
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data.description,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
-};
+  stopLoading()
+}
diff --git a/apps/frontend/src/composables/auth/scopes.ts b/apps/frontend/src/composables/auth/scopes.ts
index a9c54de0b..ea27e905d 100644
--- a/apps/frontend/src/composables/auth/scopes.ts
+++ b/apps/frontend/src/composables/auth/scopes.ts
@@ -1,576 +1,576 @@
 export const scopeMessages = defineMessages({
   userReadEmailLabel: {
-    id: "scopes.userReadEmail.label",
-    defaultMessage: "Read user email",
+    id: 'scopes.userReadEmail.label',
+    defaultMessage: 'Read user email',
   },
   userReadEmailDescription: {
-    id: "scopes.userReadEmail.description",
-    defaultMessage: "Read your email",
+    id: 'scopes.userReadEmail.description',
+    defaultMessage: 'Read your email',
   },
   userReadLabel: {
-    id: "scopes.userRead.label",
-    defaultMessage: "Read user data",
+    id: 'scopes.userRead.label',
+    defaultMessage: 'Read user data',
   },
   userReadDescription: {
-    id: "scopes.userRead.description",
-    defaultMessage: "Access your public profile information",
+    id: 'scopes.userRead.description',
+    defaultMessage: 'Access your public profile information',
   },
   userWriteLabel: {
-    id: "scopes.userWrite.label",
-    defaultMessage: "Write user data",
+    id: 'scopes.userWrite.label',
+    defaultMessage: 'Write user data',
   },
   userWriteDescription: {
-    id: "scopes.userWrite.description",
-    defaultMessage: "Write to your profile",
+    id: 'scopes.userWrite.description',
+    defaultMessage: 'Write to your profile',
   },
   userDeleteLabel: {
-    id: "scopes.userDelete.label",
-    defaultMessage: "Delete your account",
+    id: 'scopes.userDelete.label',
+    defaultMessage: 'Delete your account',
   },
   userDeleteDescription: {
-    id: "scopes.userDelete.description",
-    defaultMessage: "Delete your account",
+    id: 'scopes.userDelete.description',
+    defaultMessage: 'Delete your account',
   },
   userAuthWriteLabel: {
-    id: "scopes.userAuthWrite.label",
-    defaultMessage: "Write auth data",
+    id: 'scopes.userAuthWrite.label',
+    defaultMessage: 'Write auth data',
   },
   userAuthWriteDescription: {
-    id: "scopes.userAuthWrite.description",
-    defaultMessage: "Modify your authentication data",
+    id: 'scopes.userAuthWrite.description',
+    defaultMessage: 'Modify your authentication data',
   },
   notificationReadLabel: {
-    id: "scopes.notificationRead.label",
-    defaultMessage: "Read notifications",
+    id: 'scopes.notificationRead.label',
+    defaultMessage: 'Read notifications',
   },
   notificationReadDescription: {
-    id: "scopes.notificationRead.description",
-    defaultMessage: "Read your notifications",
+    id: 'scopes.notificationRead.description',
+    defaultMessage: 'Read your notifications',
   },
   notificationWriteLabel: {
-    id: "scopes.notificationWrite.label",
-    defaultMessage: "Write notifications",
+    id: 'scopes.notificationWrite.label',
+    defaultMessage: 'Write notifications',
   },
   notificationWriteDescription: {
-    id: "scopes.notificationWrite.description",
-    defaultMessage: "Delete/View your notifications",
+    id: 'scopes.notificationWrite.description',
+    defaultMessage: 'Delete/View your notifications',
   },
   payoutsReadLabel: {
-    id: "scopes.payoutsRead.label",
-    defaultMessage: "Read payouts",
+    id: 'scopes.payoutsRead.label',
+    defaultMessage: 'Read payouts',
   },
   payoutsReadDescription: {
-    id: "scopes.payoutsRead.description",
-    defaultMessage: "Read your payouts data",
+    id: 'scopes.payoutsRead.description',
+    defaultMessage: 'Read your payouts data',
   },
   payoutsWriteLabel: {
-    id: "scopes.payoutsWrite.label",
-    defaultMessage: "Write payouts",
+    id: 'scopes.payoutsWrite.label',
+    defaultMessage: 'Write payouts',
   },
   payoutsWriteDescription: {
-    id: "scopes.payoutsWrite.description",
-    defaultMessage: "Withdraw money",
+    id: 'scopes.payoutsWrite.description',
+    defaultMessage: 'Withdraw money',
   },
   analyticsLabel: {
-    id: "scopes.analytics.label",
-    defaultMessage: "Read analytics",
+    id: 'scopes.analytics.label',
+    defaultMessage: 'Read analytics',
   },
   analyticsDescription: {
-    id: "scopes.analytics.description",
-    defaultMessage: "Access your analytics data",
+    id: 'scopes.analytics.description',
+    defaultMessage: 'Access your analytics data',
   },
   projectCreateLabel: {
-    id: "scopes.projectCreate.label",
-    defaultMessage: "Create projects",
+    id: 'scopes.projectCreate.label',
+    defaultMessage: 'Create projects',
   },
   projectCreateDescription: {
-    id: "scopes.projectCreate.description",
-    defaultMessage: "Create new projects",
+    id: 'scopes.projectCreate.description',
+    defaultMessage: 'Create new projects',
   },
   projectReadLabel: {
-    id: "scopes.projectRead.label",
-    defaultMessage: "Read projects",
+    id: 'scopes.projectRead.label',
+    defaultMessage: 'Read projects',
   },
   projectReadDescription: {
-    id: "scopes.projectRead.description",
-    defaultMessage: "Read all your projects",
+    id: 'scopes.projectRead.description',
+    defaultMessage: 'Read all your projects',
   },
   projectWriteLabel: {
-    id: "scopes.projectWrite.label",
-    defaultMessage: "Write projects",
+    id: 'scopes.projectWrite.label',
+    defaultMessage: 'Write projects',
   },
   projectWriteDescription: {
-    id: "scopes.projectWrite.description",
-    defaultMessage: "Write to project data",
+    id: 'scopes.projectWrite.description',
+    defaultMessage: 'Write to project data',
   },
   projectDeleteLabel: {
-    id: "scopes.projectDelete.label",
-    defaultMessage: "Delete projects",
+    id: 'scopes.projectDelete.label',
+    defaultMessage: 'Delete projects',
   },
   projectDeleteDescription: {
-    id: "scopes.projectDelete.description",
-    defaultMessage: "Delete your projects",
+    id: 'scopes.projectDelete.description',
+    defaultMessage: 'Delete your projects',
   },
   versionCreateLabel: {
-    id: "scopes.versionCreate.label",
-    defaultMessage: "Create versions",
+    id: 'scopes.versionCreate.label',
+    defaultMessage: 'Create versions',
   },
   versionCreateDescription: {
-    id: "scopes.versionCreate.description",
-    defaultMessage: "Create new versions",
+    id: 'scopes.versionCreate.description',
+    defaultMessage: 'Create new versions',
   },
   versionReadLabel: {
-    id: "scopes.versionRead.label",
-    defaultMessage: "Read versions",
+    id: 'scopes.versionRead.label',
+    defaultMessage: 'Read versions',
   },
   versionReadDescription: {
-    id: "scopes.versionRead.description",
-    defaultMessage: "Read all versions",
+    id: 'scopes.versionRead.description',
+    defaultMessage: 'Read all versions',
   },
   versionWriteLabel: {
-    id: "scopes.versionWrite.label",
-    defaultMessage: "Write versions",
+    id: 'scopes.versionWrite.label',
+    defaultMessage: 'Write versions',
   },
   versionWriteDescription: {
-    id: "scopes.versionWrite.description",
-    defaultMessage: "Write to version data",
+    id: 'scopes.versionWrite.description',
+    defaultMessage: 'Write to version data',
   },
   versionDeleteLabel: {
-    id: "scopes.versionDelete.label",
-    defaultMessage: "Delete versions",
+    id: 'scopes.versionDelete.label',
+    defaultMessage: 'Delete versions',
   },
   versionDeleteDescription: {
-    id: "scopes.versionDelete.description",
-    defaultMessage: "Delete a version",
+    id: 'scopes.versionDelete.description',
+    defaultMessage: 'Delete a version',
   },
   reportCreateLabel: {
-    id: "scopes.reportCreate.label",
-    defaultMessage: "Create reports",
+    id: 'scopes.reportCreate.label',
+    defaultMessage: 'Create reports',
   },
   reportCreateDescription: {
-    id: "scopes.reportCreate.description",
-    defaultMessage: "Create reports",
+    id: 'scopes.reportCreate.description',
+    defaultMessage: 'Create reports',
   },
   reportReadLabel: {
-    id: "scopes.reportRead.label",
-    defaultMessage: "Read reports",
+    id: 'scopes.reportRead.label',
+    defaultMessage: 'Read reports',
   },
   reportReadDescription: {
-    id: "scopes.reportRead.description",
-    defaultMessage: "Read reports",
+    id: 'scopes.reportRead.description',
+    defaultMessage: 'Read reports',
   },
   reportWriteLabel: {
-    id: "scopes.reportWrite.label",
-    defaultMessage: "Write reports",
+    id: 'scopes.reportWrite.label',
+    defaultMessage: 'Write reports',
   },
   reportWriteDescription: {
-    id: "scopes.reportWrite.description",
-    defaultMessage: "Edit reports",
+    id: 'scopes.reportWrite.description',
+    defaultMessage: 'Edit reports',
   },
   reportDeleteLabel: {
-    id: "scopes.reportDelete.label",
-    defaultMessage: "Delete reports",
+    id: 'scopes.reportDelete.label',
+    defaultMessage: 'Delete reports',
   },
   reportDeleteDescription: {
-    id: "scopes.reportDelete.description",
-    defaultMessage: "Delete reports",
+    id: 'scopes.reportDelete.description',
+    defaultMessage: 'Delete reports',
   },
   threadReadLabel: {
-    id: "scopes.threadRead.label",
-    defaultMessage: "Read threads",
+    id: 'scopes.threadRead.label',
+    defaultMessage: 'Read threads',
   },
   threadReadDescription: {
-    id: "scopes.threadRead.description",
-    defaultMessage: "Read threads",
+    id: 'scopes.threadRead.description',
+    defaultMessage: 'Read threads',
   },
   threadWriteLabel: {
-    id: "scopes.threadWrite.label",
-    defaultMessage: "Write threads",
+    id: 'scopes.threadWrite.label',
+    defaultMessage: 'Write threads',
   },
   threadWriteDescription: {
-    id: "scopes.threadWrite.description",
-    defaultMessage: "Write to threads",
+    id: 'scopes.threadWrite.description',
+    defaultMessage: 'Write to threads',
   },
   patCreateLabel: {
-    id: "scopes.patCreate.label",
-    defaultMessage: "Create PATs",
+    id: 'scopes.patCreate.label',
+    defaultMessage: 'Create PATs',
   },
   patCreateDescription: {
-    id: "scopes.patCreate.description",
-    defaultMessage: "Create personal API tokens",
+    id: 'scopes.patCreate.description',
+    defaultMessage: 'Create personal API tokens',
   },
   patReadLabel: {
-    id: "scopes.patRead.label",
-    defaultMessage: "Read PATs",
+    id: 'scopes.patRead.label',
+    defaultMessage: 'Read PATs',
   },
   patReadDescription: {
-    id: "scopes.patRead.description",
-    defaultMessage: "View created API tokens",
+    id: 'scopes.patRead.description',
+    defaultMessage: 'View created API tokens',
   },
   patWriteLabel: {
-    id: "scopes.patWrite.label",
-    defaultMessage: "Write PATs",
+    id: 'scopes.patWrite.label',
+    defaultMessage: 'Write PATs',
   },
   patWriteDescription: {
-    id: "scopes.patWrite.description",
-    defaultMessage: "Edit personal API tokens",
+    id: 'scopes.patWrite.description',
+    defaultMessage: 'Edit personal API tokens',
   },
   patDeleteLabel: {
-    id: "scopes.patDelete.label",
-    defaultMessage: "Delete PATs",
+    id: 'scopes.patDelete.label',
+    defaultMessage: 'Delete PATs',
   },
   patDeleteDescription: {
-    id: "scopes.patDelete.description",
-    defaultMessage: "Delete your personal API tokens",
+    id: 'scopes.patDelete.description',
+    defaultMessage: 'Delete your personal API tokens',
   },
   sessionReadLabel: {
-    id: "scopes.sessionRead.label",
-    defaultMessage: "Read sessions",
+    id: 'scopes.sessionRead.label',
+    defaultMessage: 'Read sessions',
   },
   sessionReadDescription: {
-    id: "scopes.sessionRead.description",
-    defaultMessage: "Read active sessions",
+    id: 'scopes.sessionRead.description',
+    defaultMessage: 'Read active sessions',
   },
   sessionDeleteLabel: {
-    id: "scopes.sessionDelete.label",
-    defaultMessage: "Delete sessions",
+    id: 'scopes.sessionDelete.label',
+    defaultMessage: 'Delete sessions',
   },
   sessionDeleteDescription: {
-    id: "scopes.sessionDelete.description",
-    defaultMessage: "Delete sessions",
+    id: 'scopes.sessionDelete.description',
+    defaultMessage: 'Delete sessions',
   },
   performAnalyticsLabel: {
-    id: "scopes.performAnalytics.label",
-    defaultMessage: "Perform analytics",
+    id: 'scopes.performAnalytics.label',
+    defaultMessage: 'Perform analytics',
   },
   performAnalyticsDescription: {
-    id: "scopes.performAnalytics.description",
-    defaultMessage: "Perform analytics actions",
+    id: 'scopes.performAnalytics.description',
+    defaultMessage: 'Perform analytics actions',
   },
   collectionCreateLabel: {
-    id: "scopes.collectionCreate.label",
-    defaultMessage: "Create collections",
+    id: 'scopes.collectionCreate.label',
+    defaultMessage: 'Create collections',
   },
   collectionCreateDescription: {
-    id: "scopes.collectionCreate.description",
-    defaultMessage: "Create collections",
+    id: 'scopes.collectionCreate.description',
+    defaultMessage: 'Create collections',
   },
   collectionReadLabel: {
-    id: "scopes.collectionRead.label",
-    defaultMessage: "Read collections",
+    id: 'scopes.collectionRead.label',
+    defaultMessage: 'Read collections',
   },
   collectionReadDescription: {
-    id: "scopes.collectionRead.description",
-    defaultMessage: "Read collections",
+    id: 'scopes.collectionRead.description',
+    defaultMessage: 'Read collections',
   },
   collectionWriteLabel: {
-    id: "scopes.collectionWrite.label",
-    defaultMessage: "Write collections",
+    id: 'scopes.collectionWrite.label',
+    defaultMessage: 'Write collections',
   },
   collectionWriteDescription: {
-    id: "scopes.collectionWrite.description",
-    defaultMessage: "Write to collections",
+    id: 'scopes.collectionWrite.description',
+    defaultMessage: 'Write to collections',
   },
   collectionDeleteLabel: {
-    id: "scopes.collectionDelete.label",
-    defaultMessage: "Delete collections",
+    id: 'scopes.collectionDelete.label',
+    defaultMessage: 'Delete collections',
   },
   collectionDeleteDescription: {
-    id: "scopes.collectionDelete.description",
-    defaultMessage: "Delete collections",
+    id: 'scopes.collectionDelete.description',
+    defaultMessage: 'Delete collections',
   },
   organizationCreateLabel: {
-    id: "scopes.organizationCreate.label",
-    defaultMessage: "Create organizations",
+    id: 'scopes.organizationCreate.label',
+    defaultMessage: 'Create organizations',
   },
   organizationCreateDescription: {
-    id: "scopes.organizationCreate.description",
-    defaultMessage: "Create organizations",
+    id: 'scopes.organizationCreate.description',
+    defaultMessage: 'Create organizations',
   },
   organizationReadLabel: {
-    id: "scopes.organizationRead.label",
-    defaultMessage: "Read organizations",
+    id: 'scopes.organizationRead.label',
+    defaultMessage: 'Read organizations',
   },
   organizationReadDescription: {
-    id: "scopes.organizationRead.description",
-    defaultMessage: "Read organizations",
+    id: 'scopes.organizationRead.description',
+    defaultMessage: 'Read organizations',
   },
   organizationWriteLabel: {
-    id: "scopes.organizationWrite.label",
-    defaultMessage: "Write organizations",
+    id: 'scopes.organizationWrite.label',
+    defaultMessage: 'Write organizations',
   },
   organizationWriteDescription: {
-    id: "scopes.organizationWrite.description",
-    defaultMessage: "Write to organizations",
+    id: 'scopes.organizationWrite.description',
+    defaultMessage: 'Write to organizations',
   },
   organizationDeleteLabel: {
-    id: "scopes.organizationDelete.label",
-    defaultMessage: "Delete organizations",
+    id: 'scopes.organizationDelete.label',
+    defaultMessage: 'Delete organizations',
   },
   organizationDeleteDescription: {
-    id: "scopes.organizationDelete.description",
-    defaultMessage: "Delete organizations",
+    id: 'scopes.organizationDelete.description',
+    defaultMessage: 'Delete organizations',
   },
   sessionAccessLabel: {
-    id: "scopes.sessionAccess.label",
-    defaultMessage: "Access sessions",
+    id: 'scopes.sessionAccess.label',
+    defaultMessage: 'Access sessions',
   },
   sessionAccessDescription: {
-    id: "scopes.sessionAccess.description",
-    defaultMessage: "Access modrinth-issued sessions",
+    id: 'scopes.sessionAccess.description',
+    defaultMessage: 'Access modrinth-issued sessions',
   },
-});
+})
 
 const scopeDefinitions = [
   {
-    id: "USER_READ_EMAIL",
+    id: 'USER_READ_EMAIL',
     value: BigInt(1) << BigInt(0),
     label: scopeMessages.userReadEmailLabel,
     desc: scopeMessages.userReadEmailDescription,
   },
   {
-    id: "USER_READ",
+    id: 'USER_READ',
     value: BigInt(1) << BigInt(1),
     label: scopeMessages.userReadLabel,
     desc: scopeMessages.userReadDescription,
   },
   {
-    id: "USER_WRITE",
+    id: 'USER_WRITE',
     value: BigInt(1) << BigInt(2),
     label: scopeMessages.userWriteLabel,
     desc: scopeMessages.userWriteDescription,
   },
   {
-    id: "USER_DELETE",
+    id: 'USER_DELETE',
     value: BigInt(1) << BigInt(3),
     label: scopeMessages.userDeleteLabel,
     desc: scopeMessages.userDeleteDescription,
   },
   {
-    id: "USER_AUTH_WRITE",
+    id: 'USER_AUTH_WRITE',
     value: BigInt(1) << BigInt(4),
     label: scopeMessages.userAuthWriteLabel,
     desc: scopeMessages.userAuthWriteDescription,
   },
   {
-    id: "NOTIFICATION_READ",
+    id: 'NOTIFICATION_READ',
     value: BigInt(1) << BigInt(5),
     label: scopeMessages.notificationReadLabel,
     desc: scopeMessages.notificationReadDescription,
   },
   {
-    id: "NOTIFICATION_WRITE",
+    id: 'NOTIFICATION_WRITE',
     value: BigInt(1) << BigInt(6),
     label: scopeMessages.notificationWriteLabel,
     desc: scopeMessages.notificationWriteDescription,
   },
   {
-    id: "PAYOUTS_READ",
+    id: 'PAYOUTS_READ',
     value: BigInt(1) << BigInt(7),
     label: scopeMessages.payoutsReadLabel,
     desc: scopeMessages.payoutsReadDescription,
   },
   {
-    id: "PAYOUTS_WRITE",
+    id: 'PAYOUTS_WRITE',
     value: BigInt(1) << BigInt(8),
     label: scopeMessages.payoutsWriteLabel,
     desc: scopeMessages.payoutsWriteDescription,
   },
   {
-    id: "ANALYTICS",
+    id: 'ANALYTICS',
     value: BigInt(1) << BigInt(9),
     label: scopeMessages.analyticsLabel,
     desc: scopeMessages.analyticsDescription,
   },
   {
-    id: "PROJECT_CREATE",
+    id: 'PROJECT_CREATE',
     value: BigInt(1) << BigInt(10),
     label: scopeMessages.projectCreateLabel,
     desc: scopeMessages.projectCreateDescription,
   },
   {
-    id: "PROJECT_READ",
+    id: 'PROJECT_READ',
     value: BigInt(1) << BigInt(11),
     label: scopeMessages.projectReadLabel,
     desc: scopeMessages.projectReadDescription,
   },
   {
-    id: "PROJECT_WRITE",
+    id: 'PROJECT_WRITE',
     value: BigInt(1) << BigInt(12),
     label: scopeMessages.projectWriteLabel,
     desc: scopeMessages.projectWriteDescription,
   },
   {
-    id: "PROJECT_DELETE",
+    id: 'PROJECT_DELETE',
     value: BigInt(1) << BigInt(13),
     label: scopeMessages.projectDeleteLabel,
     desc: scopeMessages.projectDeleteDescription,
   },
   {
-    id: "VERSION_CREATE",
+    id: 'VERSION_CREATE',
     value: BigInt(1) << BigInt(14),
     label: scopeMessages.versionCreateLabel,
     desc: scopeMessages.versionCreateDescription,
   },
   {
-    id: "VERSION_READ",
+    id: 'VERSION_READ',
     value: BigInt(1) << BigInt(15),
     label: scopeMessages.versionReadLabel,
     desc: scopeMessages.versionReadDescription,
   },
   {
-    id: "VERSION_WRITE",
+    id: 'VERSION_WRITE',
     value: BigInt(1) << BigInt(16),
     label: scopeMessages.versionWriteLabel,
     desc: scopeMessages.versionWriteDescription,
   },
   {
-    id: "VERSION_DELETE",
+    id: 'VERSION_DELETE',
     value: BigInt(1) << BigInt(17),
     label: scopeMessages.versionDeleteLabel,
     desc: scopeMessages.versionDeleteDescription,
   },
   {
-    id: "REPORT_CREATE",
+    id: 'REPORT_CREATE',
     value: BigInt(1) << BigInt(18),
     label: scopeMessages.reportCreateLabel,
     desc: scopeMessages.reportCreateDescription,
   },
   {
-    id: "REPORT_READ",
+    id: 'REPORT_READ',
     value: BigInt(1) << BigInt(19),
     label: scopeMessages.reportReadLabel,
     desc: scopeMessages.reportReadDescription,
   },
   {
-    id: "REPORT_WRITE",
+    id: 'REPORT_WRITE',
     value: BigInt(1) << BigInt(20),
     label: scopeMessages.reportWriteLabel,
     desc: scopeMessages.reportWriteDescription,
   },
   {
-    id: "REPORT_DELETE",
+    id: 'REPORT_DELETE',
     value: BigInt(1) << BigInt(21),
     label: scopeMessages.reportDeleteLabel,
     desc: scopeMessages.reportDeleteDescription,
   },
   {
-    id: "THREAD_READ",
+    id: 'THREAD_READ',
     value: BigInt(1) << BigInt(22),
     label: scopeMessages.threadReadLabel,
     desc: scopeMessages.threadReadDescription,
   },
   {
-    id: "THREAD_WRITE",
+    id: 'THREAD_WRITE',
     value: BigInt(1) << BigInt(23),
     label: scopeMessages.threadWriteLabel,
     desc: scopeMessages.threadWriteDescription,
   },
   {
-    id: "PAT_CREATE",
+    id: 'PAT_CREATE',
     value: BigInt(1) << BigInt(24),
     label: scopeMessages.patCreateLabel,
     desc: scopeMessages.patCreateDescription,
   },
   {
-    id: "PAT_READ",
+    id: 'PAT_READ',
     value: BigInt(1) << BigInt(25),
     label: scopeMessages.patReadLabel,
     desc: scopeMessages.patReadDescription,
   },
   {
-    id: "PAT_WRITE",
+    id: 'PAT_WRITE',
     value: BigInt(1) << BigInt(26),
     label: scopeMessages.patWriteLabel,
     desc: scopeMessages.patWriteDescription,
   },
   {
-    id: "PAT_DELETE",
+    id: 'PAT_DELETE',
     value: BigInt(1) << BigInt(27),
     label: scopeMessages.patDeleteLabel,
     desc: scopeMessages.patDeleteDescription,
   },
   {
-    id: "SESSION_READ",
+    id: 'SESSION_READ',
     value: BigInt(1) << BigInt(28),
     label: scopeMessages.sessionReadLabel,
     desc: scopeMessages.sessionReadDescription,
   },
   {
-    id: "SESSION_DELETE",
+    id: 'SESSION_DELETE',
     value: BigInt(1) << BigInt(29),
     label: scopeMessages.sessionDeleteLabel,
     desc: scopeMessages.sessionDeleteDescription,
   },
   {
-    id: "PERFORM_ANALYTICS",
+    id: 'PERFORM_ANALYTICS',
     value: BigInt(1) << BigInt(30),
     label: scopeMessages.performAnalyticsLabel,
     desc: scopeMessages.performAnalyticsDescription,
   },
   {
-    id: "COLLECTION_CREATE",
+    id: 'COLLECTION_CREATE',
     value: BigInt(1) << BigInt(31),
     label: scopeMessages.collectionCreateLabel,
     desc: scopeMessages.collectionCreateDescription,
   },
   {
-    id: "COLLECTION_READ",
+    id: 'COLLECTION_READ',
     value: BigInt(1) << BigInt(32),
     label: scopeMessages.collectionReadLabel,
     desc: scopeMessages.collectionReadDescription,
   },
   {
-    id: "COLLECTION_WRITE",
+    id: 'COLLECTION_WRITE',
     value: BigInt(1) << BigInt(33),
     label: scopeMessages.collectionWriteLabel,
     desc: scopeMessages.collectionWriteDescription,
   },
   {
-    id: "COLLECTION_DELETE",
+    id: 'COLLECTION_DELETE',
     value: BigInt(1) << BigInt(34),
     label: scopeMessages.collectionDeleteLabel,
     desc: scopeMessages.collectionDeleteDescription,
   },
   {
-    id: "ORGANIZATION_CREATE",
+    id: 'ORGANIZATION_CREATE',
     value: BigInt(1) << BigInt(35),
     label: scopeMessages.organizationCreateLabel,
     desc: scopeMessages.organizationCreateDescription,
   },
   {
-    id: "ORGANIZATION_READ",
+    id: 'ORGANIZATION_READ',
     value: BigInt(1) << BigInt(36),
     label: scopeMessages.organizationReadLabel,
     desc: scopeMessages.organizationReadDescription,
   },
   {
-    id: "ORGANIZATION_WRITE",
+    id: 'ORGANIZATION_WRITE',
     value: BigInt(1) << BigInt(37),
     label: scopeMessages.organizationWriteLabel,
     desc: scopeMessages.organizationWriteDescription,
   },
   {
-    id: "ORGANIZATION_DELETE",
+    id: 'ORGANIZATION_DELETE',
     value: BigInt(1) << BigInt(38),
     label: scopeMessages.organizationDeleteLabel,
     desc: scopeMessages.organizationDeleteDescription,
   },
   {
-    id: "SESSION_ACCESS",
+    id: 'SESSION_ACCESS',
     value: BigInt(1) << BigInt(39),
     label: scopeMessages.sessionAccessLabel,
     desc: scopeMessages.sessionAccessDescription,
   },
-];
+]
 
 const Scopes = scopeDefinitions.reduce(
   (acc, scope) => {
-    acc[scope.id] = scope.value;
-    return acc;
+    acc[scope.id] = scope.value
+    return acc
   },
   {} as Record<string, bigint>,
-);
+)
 
 export const restrictedScopes = [
   Scopes.PAT_READ,
@@ -583,18 +583,18 @@ export const restrictedScopes = [
   Scopes.USER_AUTH_WRITE,
   Scopes.USER_DELETE,
   Scopes.PERFORM_ANALYTICS,
-];
+]
 
 export const scopeList = Object.entries(Scopes)
   .filter(([_, value]) => !restrictedScopes.includes(value))
-  .map(([key, _]) => key);
+  .map(([key, _]) => key)
 
 export const getScopeValue = (scope: string) => {
-  return Scopes[scope];
-};
+  return Scopes[scope]
+}
 
 export const encodeScopes = (scopes: string[]) => {
-  let scopeFlag = BigInt(0);
+  let scopeFlag = BigInt(0)
 
   // We iterate over the provided scopes
   for (const scope of scopes) {
@@ -602,77 +602,77 @@ export const encodeScopes = (scopes: string[]) => {
     for (const [scopeName, scopeFlagValue] of Object.entries(Scopes)) {
       // If the scope name is the same as the provided scope, add the scope flag to the scopeFlag variable
       if (scopeName === scope) {
-        scopeFlag = scopeFlag | scopeFlagValue;
+        scopeFlag = scopeFlag | scopeFlagValue
       }
     }
   }
 
-  return scopeFlag;
-};
+  return scopeFlag
+}
 
 export const decodeScopes = (scopes: bigint | number) => {
-  if (typeof scopes === "number") {
-    scopes = BigInt(scopes);
+  if (typeof scopes === 'number') {
+    scopes = BigInt(scopes)
   }
 
-  const authorizedScopes = [];
+  const authorizedScopes = []
 
   // We iterate over the entries of the Scopes object
   for (const [scopeName, scopeFlag] of Object.entries(Scopes)) {
     // If the scope flag is present in the provided number, add the scope name to the list
     if ((scopes & scopeFlag) === scopeFlag) {
-      authorizedScopes.push(scopeName);
+      authorizedScopes.push(scopeName)
     }
   }
 
-  return authorizedScopes;
-};
+  return authorizedScopes
+}
 
 export const hasScope = (scopes: bigint, scope: string) => {
-  const authorizedScopes = decodeScopes(scopes);
-  return authorizedScopes.includes(scope);
-};
+  const authorizedScopes = decodeScopes(scopes)
+  return authorizedScopes.includes(scope)
+}
 
 export const toggleScope = (scopes: bigint, scope: string) => {
-  const authorizedScopes = decodeScopes(scopes);
+  const authorizedScopes = decodeScopes(scopes)
   if (authorizedScopes.includes(scope)) {
-    return encodeScopes(authorizedScopes.filter((authorizedScope) => authorizedScope !== scope));
+    return encodeScopes(authorizedScopes.filter((authorizedScope) => authorizedScope !== scope))
   } else {
-    return encodeScopes([...authorizedScopes, scope]);
+    return encodeScopes([...authorizedScopes, scope])
   }
-};
+}
 
 export const useScopes = () => {
-  const { formatMessage } = useVIntl();
+  const { formatMessage } = useVIntl()
 
   const scopesToDefinitions = (scopes: bigint) => {
-    const authorizedScopes = decodeScopes(scopes);
+    const authorizedScopes = decodeScopes(scopes)
     return authorizedScopes.map((scope) => {
       const scopeDefinition = scopeDefinitions.find(
         (scopeDefinition) => scopeDefinition.id === scope,
-      );
+      )
       if (!scopeDefinition) {
-        throw new Error(`Scope ${scope} not found`);
+        throw new Error(`Scope ${scope} not found`)
       }
-      return formatMessage(scopeDefinition.desc);
-    });
-  };
+      return formatMessage(scopeDefinition.desc)
+    })
+  }
 
   const scopesToLabels = (scopes: bigint) => {
-    const authorizedScopes = decodeScopes(scopes);
+    const authorizedScopes = decodeScopes(scopes)
     return authorizedScopes.map((scope) => {
       const scopeDefinition = scopeDefinitions.find(
         (scopeDefinition) => scopeDefinition.id === scope,
-      );
+      )
       if (!scopeDefinition) {
-        throw new Error(`Scope ${scope} not found`);
+        throw new Error(`Scope ${scope} not found`)
       }
-      return formatMessage(scopeDefinition.label);
-    });
-  };
+      return formatMessage(scopeDefinition.label)
+    })
+  }
 
   return {
     scopesToDefinitions,
     scopesToLabels,
-  };
-};
+  }
+}
diff --git a/apps/frontend/src/composables/compact-number.ts b/apps/frontend/src/composables/compact-number.ts
index c635a389e..632b9568a 100644
--- a/apps/frontend/src/composables/compact-number.ts
+++ b/apps/frontend/src/composables/compact-number.ts
@@ -1,26 +1,26 @@
-const formatters = new WeakMap<object, Intl.NumberFormat>();
+const formatters = new WeakMap<object, Intl.NumberFormat>()
 
 export function useCompactNumber(truncate = false, fractionDigits = 2, locale?: string) {
-  const context = {};
+  const context = {}
 
-  let formatter = formatters.get(context);
+  let formatter = formatters.get(context)
 
   if (!formatter) {
     formatter = new Intl.NumberFormat(locale, {
-      notation: "compact",
+      notation: 'compact',
       maximumFractionDigits: fractionDigits,
-    });
-    formatters.set(context, formatter);
+    })
+    formatters.set(context, formatter)
   }
 
   function format(value: number): string {
-    let formattedValue = value;
+    let formattedValue = value
     if (truncate) {
-      const scale = Math.pow(10, fractionDigits);
-      formattedValue = Math.floor(value * scale) / scale;
+      const scale = Math.pow(10, fractionDigits)
+      formattedValue = Math.floor(value * scale) / scale
     }
-    return formatter!.format(formattedValue);
+    return formatter!.format(formattedValue)
   }
 
-  return format;
+  return format
 }
diff --git a/apps/frontend/src/composables/country.ts b/apps/frontend/src/composables/country.ts
index 008c1d7fc..241b6226e 100644
--- a/apps/frontend/src/composables/country.ts
+++ b/apps/frontend/src/composables/country.ts
@@ -1,37 +1,37 @@
-import { useRequestHeaders,useState } from "#imports";
+import { useRequestHeaders, useState } from '#imports'
 
 export const useUserCountry = () => {
-  const country = useState<string>("userCountry", () => "US");
-  const fromServer = useState<boolean>("userCountryFromServer", () => false);
+  const country = useState<string>('userCountry', () => 'US')
+  const fromServer = useState<boolean>('userCountryFromServer', () => false)
 
   if (import.meta.server) {
-    const headers = useRequestHeaders(["cf-ipcountry", "accept-language"]);
-    const cf = headers["cf-ipcountry"];
+    const headers = useRequestHeaders(['cf-ipcountry', 'accept-language'])
+    const cf = headers['cf-ipcountry']
     if (cf) {
-      country.value = cf.toUpperCase();
-      fromServer.value = true;
+      country.value = cf.toUpperCase()
+      fromServer.value = true
     } else {
-      const al = headers["accept-language"] || "";
-      const tag = al.split(",")[0];
-      const val = tag.split("-")[1]?.toLowerCase();
+      const al = headers['accept-language'] || ''
+      const tag = al.split(',')[0]
+      const val = tag.split('-')[1]?.toLowerCase()
       if (val) {
-        country.value = val;
-        fromServer.value = true;
+        country.value = val
+        fromServer.value = true
       }
     }
   }
 
   if (import.meta.client) {
     onMounted(() => {
-      if (fromServer.value) return;
+      if (fromServer.value) return
       // @ts-expect-error - ignore TS not knowing about navigator.userLanguage
-      const lang = navigator.language || navigator.userLanguage || "";
-      const region = lang.split("-")[1];
+      const lang = navigator.language || navigator.userLanguage || ''
+      const region = lang.split('-')[1]
       if (region) {
-        country.value = region.toUpperCase();
+        country.value = region.toUpperCase()
       }
-    });
+    })
   }
 
-  return country;
-};
+  return country
+}
diff --git a/apps/frontend/src/composables/display-names.ts b/apps/frontend/src/composables/display-names.ts
index b80105d73..cf7d31dec 100644
--- a/apps/frontend/src/composables/display-names.ts
+++ b/apps/frontend/src/composables/display-names.ts
@@ -1,81 +1,79 @@
-const safeTags = new Map<string, string>();
+const safeTags = new Map<string, string>()
 
 function safeTagFor(locale: string) {
-  let safeTag = safeTags.get(locale);
+  let safeTag = safeTags.get(locale)
   if (safeTag == null) {
-    safeTag = new Intl.Locale(locale).baseName;
-    safeTags.set(locale, safeTag);
+    safeTag = new Intl.Locale(locale).baseName
+    safeTags.set(locale, safeTag)
   }
-  return safeTag;
+  return safeTag
 }
 
 type DisplayNamesWrapper = Intl.DisplayNames & {
-  of(tag: string): string | undefined;
-};
+  of(tag: string): string | undefined
+}
 
-const displayNamesDicts = new Map<string, DisplayNamesWrapper>();
+const displayNamesDicts = new Map<string, DisplayNamesWrapper>()
 
 function getWrapperKey(locale: string, options: Intl.DisplayNamesOptions) {
-  return JSON.stringify({ ...options, locale });
+  return JSON.stringify({ ...options, locale })
 }
 
 export function createDisplayNames(
   locale: string,
-  options: Intl.DisplayNamesOptions = { type: "language" },
+  options: Intl.DisplayNamesOptions = { type: 'language' },
 ) {
-  const wrapperKey = getWrapperKey(locale, options);
-  let wrapper = displayNamesDicts.get(wrapperKey);
+  const wrapperKey = getWrapperKey(locale, options)
+  let wrapper = displayNamesDicts.get(wrapperKey)
 
   if (wrapper == null) {
-    const dict = new Intl.DisplayNames(locale, options);
+    const dict = new Intl.DisplayNames(locale, options)
 
-    const badTags: string[] = [];
+    const badTags: string[] = []
 
     wrapper = {
       resolvedOptions() {
-        return dict.resolvedOptions();
+        return dict.resolvedOptions()
       },
       of(tag: string) {
-        let attempt = 0;
+        let attempt = 0
 
-         
         lookupLoop: do {
-          let lookup: string;
+          let lookup: string
           switch (attempt) {
             case 0:
-              lookup = tag;
-              break;
+              lookup = tag
+              break
             case 1:
-              lookup = safeTagFor(tag);
-              break;
+              lookup = safeTagFor(tag)
+              break
             default:
-               
-              break lookupLoop;
+              break lookupLoop
           }
 
-          if (badTags.includes(lookup)) continue;
+          if (badTags.includes(lookup)) continue
 
           try {
-            return dict.of(lookup);
+            return dict.of(lookup)
           } catch {
             console.warn(
               `Failed to get display name for ${lookup} using dictionary for ${
                 this.resolvedOptions().locale
               }`,
-            );
-            badTags.push(lookup);
-            continue;
+            )
+            badTags.push(lookup)
+            continue
           }
-        } while (++attempt < 5);
+        } while (++attempt < 5)
 
-        return undefined;
+        return undefined
       },
-    };
+    }
 
-    displayNamesDicts.set(wrapperKey, wrapper);
+    displayNamesDicts.set(wrapperKey, wrapper)
   }
 
-  return wrapper;
+  return wrapper
 }
 
 export function useDisplayNames(
@@ -85,8 +83,8 @@ export function useDisplayNames(
     | (() => Intl.DisplayNamesOptions | undefined)
     | Ref<Intl.DisplayNamesOptions | undefined>,
 ) {
-  const $locale = toRef(locale);
-  const $options = toRef(options);
+  const $locale = toRef(locale)
+  const $options = toRef(options)
 
-  return computed(() => createDisplayNames($locale.value, $options.value));
+  return computed(() => createDisplayNames($locale.value, $options.value))
 }
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index df4c5d057..26112100a 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -1,20 +1,20 @@
-import type { CookieOptions } from "#app";
+import type { CookieOptions } from '#app'
 
-export type ProjectDisplayMode = "list" | "grid" | "gallery";
-export type DarkColorTheme = "dark" | "oled" | "retro";
+export type ProjectDisplayMode = 'list' | 'grid' | 'gallery'
+export type DarkColorTheme = 'dark' | 'oled' | 'retro'
 
 export interface NumberFlag {
-  min: number;
-  max: number;
+  min: number
+  max: number
 }
 
-export type BooleanFlag = boolean;
+export type BooleanFlag = boolean
 
-export type RadioFlag = ProjectDisplayMode | DarkColorTheme;
+export type RadioFlag = ProjectDisplayMode | DarkColorTheme
 
-export type FlagValue = BooleanFlag; /* | NumberFlag | RadioFlag */
+export type FlagValue = BooleanFlag /* | NumberFlag | RadioFlag */
 
-const validateValues = <K extends PropertyKey>(flags: Record<K, FlagValue>) => flags;
+const validateValues = <K extends PropertyKey>(flags: Record<K, FlagValue>) => flags
 
 export const DEFAULT_FEATURE_FLAGS = validateValues({
   // Developer flags
@@ -50,58 +50,58 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
   // dataPackSearchDisplayMode: 'list',
   // userProjectDisplayMode: 'list',
   // collectionProjectDisplayMode: 'list',
-} as const);
+} as const)
 
-export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS;
+export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
 
 export type AllFeatureFlags = {
-  [key in FeatureFlag]: (typeof DEFAULT_FEATURE_FLAGS)[key];
-};
+  [key in FeatureFlag]: (typeof DEFAULT_FEATURE_FLAGS)[key]
+}
 
-export type PartialFeatureFlags = Partial<AllFeatureFlags>;
+export type PartialFeatureFlags = Partial<AllFeatureFlags>
 
 const COOKIE_OPTIONS = {
   maxAge: 60 * 60 * 24 * 365 * 10,
-  sameSite: "lax",
+  sameSite: 'lax',
   secure: true,
   httpOnly: false,
-  path: "/",
-} satisfies CookieOptions<PartialFeatureFlags>;
+  path: '/',
+} satisfies CookieOptions<PartialFeatureFlags>
 
 export const useFeatureFlags = () =>
-  useState<AllFeatureFlags>("featureFlags", () => {
-    const config = useRuntimeConfig();
+  useState<AllFeatureFlags>('featureFlags', () => {
+    const config = useRuntimeConfig()
 
-    const savedFlags = useCookie<PartialFeatureFlags>("featureFlags", COOKIE_OPTIONS);
+    const savedFlags = useCookie<PartialFeatureFlags>('featureFlags', COOKIE_OPTIONS)
 
     if (!savedFlags.value) {
-      savedFlags.value = {};
+      savedFlags.value = {}
     }
 
-    const flags: AllFeatureFlags = JSON.parse(JSON.stringify(DEFAULT_FEATURE_FLAGS));
+    const flags: AllFeatureFlags = JSON.parse(JSON.stringify(DEFAULT_FEATURE_FLAGS))
 
-    const overrides = config.public.featureFlagOverrides as PartialFeatureFlags;
+    const overrides = config.public.featureFlagOverrides as PartialFeatureFlags
     for (const key in overrides) {
       if (key in flags) {
-        const flag = key as FeatureFlag;
-        const value = overrides[flag] as (typeof flags)[FeatureFlag];
-        flags[flag] = value;
+        const flag = key as FeatureFlag
+        const value = overrides[flag] as (typeof flags)[FeatureFlag]
+        flags[flag] = value
       }
     }
 
     for (const key in savedFlags.value) {
       if (key in flags) {
-        const flag = key as FeatureFlag;
-        const value = savedFlags.value[flag] as (typeof flags)[FeatureFlag];
-        flags[flag] = value;
+        const flag = key as FeatureFlag
+        const value = savedFlags.value[flag] as (typeof flags)[FeatureFlag]
+        flags[flag] = value
       }
     }
 
-    return flags;
-  });
+    return flags
+  })
 
 export const saveFeatureFlags = () => {
-  const flags = useFeatureFlags();
-  const cookie = useCookie<PartialFeatureFlags>("featureFlags", COOKIE_OPTIONS);
-  cookie.value = flags.value;
-};
+  const flags = useFeatureFlags()
+  const cookie = useCookie<PartialFeatureFlags>('featureFlags', COOKIE_OPTIONS)
+  cookie.value = flags.value
+}
diff --git a/apps/frontend/src/composables/fetch.js b/apps/frontend/src/composables/fetch.js
index 91f765ce3..de023582b 100644
--- a/apps/frontend/src/composables/fetch.js
+++ b/apps/frontend/src/composables/fetch.js
@@ -1,36 +1,36 @@
 export const useBaseFetch = async (url, options = {}, skipAuth = false) => {
-  const config = useRuntimeConfig();
-  let base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl;
+  const config = useRuntimeConfig()
+  let base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl
 
   if (!options.headers) {
-    options.headers = {};
+    options.headers = {}
   }
 
   if (import.meta.server) {
-    options.headers["x-ratelimit-key"] = config.rateLimitKey;
+    options.headers['x-ratelimit-key'] = config.rateLimitKey
   }
 
   if (!skipAuth) {
-    const auth = await useAuth();
+    const auth = await useAuth()
 
-    options.headers.Authorization = auth.value.token;
+    options.headers.Authorization = auth.value.token
   }
 
   if (options.apiVersion || options.internal) {
     // Base may end in /vD/ or /vD. We would need to replace the digit with the new version number
     // and keep the trailing slash if it exists
-    const baseVersion = base.match(/\/v\d\//);
+    const baseVersion = base.match(/\/v\d\//)
 
-    const replaceStr = options.internal ? `/_internal/` : `/v${options.apiVersion}/`;
+    const replaceStr = options.internal ? `/_internal/` : `/v${options.apiVersion}/`
 
     if (baseVersion) {
-      base = base.replace(baseVersion[0], replaceStr);
+      base = base.replace(baseVersion[0], replaceStr)
     } else {
-      base = base.replace(/\/v\d$/, replaceStr);
+      base = base.replace(/\/v\d$/, replaceStr)
     }
 
-    delete options.apiVersion;
+    delete options.apiVersion
   }
 
-  return await $fetch(`${base}${url}`, options);
-};
+  return await $fetch(`${base}${url}`, options)
+}
diff --git a/apps/frontend/src/composables/image-upload.ts b/apps/frontend/src/composables/image-upload.ts
index 5e7e74e81..c5e927777 100644
--- a/apps/frontend/src/composables/image-upload.ts
+++ b/apps/frontend/src/composables/image-upload.ts
@@ -1,46 +1,46 @@
 type ImageUploadContext = {
-  projectID?: string;
-  context: "project" | "version" | "thread_message" | "report";
-};
+  projectID?: string
+  context: 'project' | 'version' | 'thread_message' | 'report'
+}
 
 interface ImageUploadResponse {
-  id: string;
-  url: string;
+  id: string
+  url: string
 }
 
 export const useImageUpload = async (file: File, ctx: ImageUploadContext) => {
   // Make sure file is of type image/png, image/jpeg, image/gif, or image/webp
   if (
-    !file.type.startsWith("image/") ||
-    !["png", "jpeg", "gif", "webp"].includes(file.type.split("/")[1])
+    !file.type.startsWith('image/') ||
+    !['png', 'jpeg', 'gif', 'webp'].includes(file.type.split('/')[1])
   ) {
-    throw new Error("File is not an accepted image type");
+    throw new Error('File is not an accepted image type')
   }
 
   // Make sure file is less than 1MB
   if (file.size > 1024 * 1024) {
-    throw new Error("File exceeds the 1MiB size limit");
+    throw new Error('File exceeds the 1MiB size limit')
   }
 
-  const qs = new URLSearchParams();
-  if (ctx.projectID) qs.set("project_id", ctx.projectID);
-  qs.set("context", ctx.context);
-  qs.set("ext", file.type.split("/")[1]);
-  const url = `image?${qs.toString()}`;
+  const qs = new URLSearchParams()
+  if (ctx.projectID) qs.set('project_id', ctx.projectID)
+  qs.set('context', ctx.context)
+  qs.set('ext', file.type.split('/')[1])
+  const url = `image?${qs.toString()}`
 
   const response = (await useBaseFetch(url, {
-    method: "POST",
+    method: 'POST',
     body: file,
     apiVersion: 3,
-  })) as ImageUploadResponse;
+  })) as ImageUploadResponse
 
   // Type check to see if response has a url property and an id property
-  if (!response?.id || typeof response.id !== "string") {
-    throw new Error("Unexpected response from server");
+  if (!response?.id || typeof response.id !== 'string') {
+    throw new Error('Unexpected response from server')
   }
-  if (!response?.url || typeof response.url !== "string") {
-    throw new Error("Unexpected response from server");
+  if (!response?.url || typeof response.url !== 'string') {
+    throw new Error('Unexpected response from server')
   }
 
-  return response;
-};
+  return response
+}
diff --git a/apps/frontend/src/composables/loading.js b/apps/frontend/src/composables/loading.js
index eab1ef626..ef838521e 100644
--- a/apps/frontend/src/composables/loading.js
+++ b/apps/frontend/src/composables/loading.js
@@ -1,13 +1,13 @@
-export const useLoading = () => useState("loading", () => false);
+export const useLoading = () => useState('loading', () => false)
 
 export const startLoading = () => {
-  const loading = useLoading();
+  const loading = useLoading()
 
-  loading.value = true;
-};
+  loading.value = true
+}
 
 export const stopLoading = () => {
-  const loading = useLoading();
+  const loading = useLoading()
 
-  loading.value = false;
-};
+  loading.value = false
+}
diff --git a/apps/frontend/src/composables/notifs.js b/apps/frontend/src/composables/notifs.js
index 7ec7786c2..d5f8aba25 100644
--- a/apps/frontend/src/composables/notifs.js
+++ b/apps/frontend/src/composables/notifs.js
@@ -1,38 +1,38 @@
-export const useNotifications = () => useState("notifications", () => []);
+export const useNotifications = () => useState('notifications', () => [])
 
 export const addNotification = (notification) => {
-  const notifications = useNotifications();
+  const notifications = useNotifications()
 
   const existingNotif = notifications.value.find(
     (x) =>
       x.text === notification.text &&
       x.title === notification.title &&
       x.type === notification.type,
-  );
+  )
   if (existingNotif) {
-    setNotificationTimer(existingNotif);
-    existingNotif.count++;
+    setNotificationTimer(existingNotif)
+    existingNotif.count++
 
-    return;
+    return
   }
 
-  notification.id = new Date();
-  notification.count = 1;
+  notification.id = new Date()
+  notification.count = 1
 
-  setNotificationTimer(notification);
-  notifications.value.push(notification);
-};
+  setNotificationTimer(notification)
+  notifications.value.push(notification)
+}
 
 export const setNotificationTimer = (notification) => {
-  if (!notification) return;
+  if (!notification) return
 
-  const notifications = useNotifications();
+  const notifications = useNotifications()
 
   if (notification.timer) {
-    clearTimeout(notification.timer);
+    clearTimeout(notification.timer)
   }
 
   notification.timer = setTimeout(() => {
-    notifications.value.splice(notifications.value.indexOf(notification), 1);
-  }, 30000);
-};
+    notifications.value.splice(notifications.value.indexOf(notification), 1)
+  }, 30000)
+}
diff --git a/apps/frontend/src/composables/nuxt-accessors.ts b/apps/frontend/src/composables/nuxt-accessors.ts
index 5130f6268..fb6fe4b0b 100644
--- a/apps/frontend/src/composables/nuxt-accessors.ts
+++ b/apps/frontend/src/composables/nuxt-accessors.ts
@@ -1,7 +1,7 @@
 export function useTheme() {
-  return useNuxtApp().$theme;
+  return useNuxtApp().$theme
 }
 
 export function useCosmetics() {
-  return useNuxtApp().$cosmetics;
+  return useNuxtApp().$cosmetics
 }
diff --git a/apps/frontend/src/composables/nuxt-bugfest.ts b/apps/frontend/src/composables/nuxt-bugfest.ts
index d4391ca39..67e31806a 100644
--- a/apps/frontend/src/composables/nuxt-bugfest.ts
+++ b/apps/frontend/src/composables/nuxt-bugfest.ts
@@ -1 +1 @@
-export { useRoute as useNativeRoute, useRouter as useNativeRouter } from "vue-router";
+export { useRoute as useNativeRoute, useRouter as useNativeRouter } from 'vue-router'
diff --git a/apps/frontend/src/composables/query.js b/apps/frontend/src/composables/query.js
index 1b5095de6..0fb18fef5 100644
--- a/apps/frontend/src/composables/query.js
+++ b/apps/frontend/src/composables/query.js
@@ -1,7 +1,7 @@
 export const getArrayOrString = (x) => {
-  if (typeof x === "string" || x instanceof String) {
-    return [x];
+  if (typeof x === 'string' || x instanceof String) {
+    return [x]
   } else {
-    return x;
+    return x
   }
-};
+}
diff --git a/apps/frontend/src/composables/route-params.js b/apps/frontend/src/composables/route-params.js
index 848957821..4a9cb7d06 100644
--- a/apps/frontend/src/composables/route-params.js
+++ b/apps/frontend/src/composables/route-params.js
@@ -4,7 +4,7 @@
  * @param {string?} key The key of the route param to extract.
  * @returns {import('vue').Ref<string | string[] | undefined>}
  */
-export const useRouteId = (key = "id") => {
-  const route = useNativeRoute();
-  return route.params?.[key] || undefined;
-};
+export const useRouteId = (key = 'id') => {
+  const route = useNativeRoute()
+  return route.params?.[key] || undefined
+}
diff --git a/apps/frontend/src/composables/servers/modrinth-servers.ts b/apps/frontend/src/composables/servers/modrinth-servers.ts
index 5b4348588..11ca5b0a5 100644
--- a/apps/frontend/src/composables/servers/modrinth-servers.ts
+++ b/apps/frontend/src/composables/servers/modrinth-servers.ts
@@ -1,5 +1,5 @@
-import type { JWTAuth, ModuleError, ModuleName } from "@modrinth/utils";
-import { ModrinthServerError } from "@modrinth/utils";
+import type { JWTAuth, ModuleError, ModuleName } from '@modrinth/utils'
+import { ModrinthServerError } from '@modrinth/utils'
 
 import {
   BackupsModule,
@@ -9,61 +9,61 @@ import {
   NetworkModule,
   StartupModule,
   WSModule,
-} from "./modules/index.ts";
-import { useServersFetch } from "./servers-fetch.ts";
+} from './modules/index.ts'
+import { useServersFetch } from './servers-fetch.ts'
 
 export function handleError(err: any) {
   if (err instanceof ModrinthServerError && err.v1Error) {
     addNotification({
       title: err.v1Error?.context ?? `An error occurred`,
-      type: "error",
+      type: 'error',
       text: err.v1Error.description,
       errorCode: err.v1Error.error,
-    });
+    })
   } else {
     addNotification({
-      title: "An error occurred",
-      type: "error",
+      title: 'An error occurred',
+      type: 'error',
       text: err.message ?? (err.data ? err.data.description : err),
-    });
+    })
   }
 }
 
 export class ModrinthServer {
-  readonly serverId: string;
-  private errors: Partial<Record<ModuleName, ModuleError>> = {};
+  readonly serverId: string
+  private errors: Partial<Record<ModuleName, ModuleError>> = {}
 
-  readonly general: GeneralModule;
-  readonly content: ContentModule;
-  readonly backups: BackupsModule;
-  readonly network: NetworkModule;
-  readonly startup: StartupModule;
-  readonly ws: WSModule;
-  readonly fs: FSModule;
+  readonly general: GeneralModule
+  readonly content: ContentModule
+  readonly backups: BackupsModule
+  readonly network: NetworkModule
+  readonly startup: StartupModule
+  readonly ws: WSModule
+  readonly fs: FSModule
 
   constructor(serverId: string) {
-    this.serverId = serverId;
+    this.serverId = serverId
 
-    this.general = new GeneralModule(this);
-    this.content = new ContentModule(this);
-    this.backups = new BackupsModule(this);
-    this.network = new NetworkModule(this);
-    this.startup = new StartupModule(this);
-    this.ws = new WSModule(this);
-    this.fs = new FSModule(this);
+    this.general = new GeneralModule(this)
+    this.content = new ContentModule(this)
+    this.backups = new BackupsModule(this)
+    this.network = new NetworkModule(this)
+    this.startup = new StartupModule(this)
+    this.ws = new WSModule(this)
+    this.fs = new FSModule(this)
   }
 
   async createMissingFolders(path: string): Promise<void> {
-    if (path.startsWith("/")) {
-      path = path.substring(1);
+    if (path.startsWith('/')) {
+      path = path.substring(1)
     }
-    const folders = path.split("/");
-    let currentPath = "";
+    const folders = path.split('/')
+    let currentPath = ''
 
     for (const folder of folders) {
-      currentPath += "/" + folder;
+      currentPath += '/' + folder
       try {
-        await this.fs.createFileOrFolder(currentPath, "directory");
+        await this.fs.createFileOrFolder(currentPath, 'directory')
       } catch {
         // Folder might already exist, ignore error
       }
@@ -71,234 +71,234 @@ export class ModrinthServer {
   }
 
   async fetchConfigFile(fileName: string): Promise<any> {
-    return await useServersFetch(`servers/${this.serverId}/config/${fileName}`);
+    return await useServersFetch(`servers/${this.serverId}/config/${fileName}`)
   }
 
   constructServerProperties(properties: any): string {
-    let fileContent = `#Minecraft server properties\n#${new Date().toUTCString()}\n`;
+    let fileContent = `#Minecraft server properties\n#${new Date().toUTCString()}\n`
 
     for (const [key, value] of Object.entries(properties)) {
-      if (typeof value === "object") {
-        fileContent += `${key}=${JSON.stringify(value)}\n`;
-      } else if (typeof value === "boolean") {
-        fileContent += `${key}=${value ? "true" : "false"}\n`;
+      if (typeof value === 'object') {
+        fileContent += `${key}=${JSON.stringify(value)}\n`
+      } else if (typeof value === 'boolean') {
+        fileContent += `${key}=${value ? 'true' : 'false'}\n`
       } else {
-        fileContent += `${key}=${value}\n`;
+        fileContent += `${key}=${value}\n`
       }
     }
 
-    return fileContent;
+    return fileContent
   }
 
   async processImage(iconUrl: string | undefined): Promise<string | undefined> {
-    const sharedImage = useState<string | undefined>(`server-icon-${this.serverId}`);
+    const sharedImage = useState<string | undefined>(`server-icon-${this.serverId}`)
 
     if (sharedImage.value) {
-      return sharedImage.value;
+      return sharedImage.value
     }
 
     try {
-      const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`);
+      const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`)
       try {
         const fileData = await useServersFetch(`/download?path=/server-icon-original.png`, {
           override: auth,
           retry: 1, // Reduce retries for optional resources
-        });
+        })
 
         if (fileData instanceof Blob && import.meta.client) {
           const dataURL = await new Promise<string>((resolve) => {
-            const canvas = document.createElement("canvas");
-            const ctx = canvas.getContext("2d");
-            const img = new Image();
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')
+            const img = new Image()
             img.onload = () => {
-              canvas.width = 512;
-              canvas.height = 512;
-              ctx?.drawImage(img, 0, 0, 512, 512);
-              const dataURL = canvas.toDataURL("image/png");
-              sharedImage.value = dataURL;
-              resolve(dataURL);
-              URL.revokeObjectURL(img.src);
-            };
-            img.src = URL.createObjectURL(fileData);
-          });
-          return dataURL;
+              canvas.width = 512
+              canvas.height = 512
+              ctx?.drawImage(img, 0, 0, 512, 512)
+              const dataURL = canvas.toDataURL('image/png')
+              sharedImage.value = dataURL
+              resolve(dataURL)
+              URL.revokeObjectURL(img.src)
+            }
+            img.src = URL.createObjectURL(fileData)
+          })
+          return dataURL
         }
       } catch (error) {
         if (error instanceof ModrinthServerError) {
           if (error.statusCode && error.statusCode >= 500) {
-            console.debug("Service unavailable, skipping icon processing");
-            sharedImage.value = undefined;
-            return undefined;
+            console.debug('Service unavailable, skipping icon processing')
+            sharedImage.value = undefined
+            return undefined
           }
 
           if (error.statusCode === 404 && iconUrl) {
             try {
-              const response = await fetch(iconUrl);
-              if (!response.ok) throw new Error("Failed to fetch icon");
-              const file = await response.blob();
-              const originalFile = new File([file], "server-icon-original.png", {
-                type: "image/png",
-              });
+              const response = await fetch(iconUrl)
+              if (!response.ok) throw new Error('Failed to fetch icon')
+              const file = await response.blob()
+              const originalFile = new File([file], 'server-icon-original.png', {
+                type: 'image/png',
+              })
 
               if (import.meta.client) {
                 const dataURL = await new Promise<string>((resolve) => {
-                  const canvas = document.createElement("canvas");
-                  const ctx = canvas.getContext("2d");
-                  const img = new Image();
+                  const canvas = document.createElement('canvas')
+                  const ctx = canvas.getContext('2d')
+                  const img = new Image()
                   img.onload = () => {
-                    canvas.width = 64;
-                    canvas.height = 64;
-                    ctx?.drawImage(img, 0, 0, 64, 64);
+                    canvas.width = 64
+                    canvas.height = 64
+                    ctx?.drawImage(img, 0, 0, 64, 64)
                     canvas.toBlob(async (blob) => {
                       if (blob) {
-                        const scaledFile = new File([blob], "server-icon.png", {
-                          type: "image/png",
-                        });
+                        const scaledFile = new File([blob], 'server-icon.png', {
+                          type: 'image/png',
+                        })
                         await useServersFetch(`/create?path=/server-icon.png&type=file`, {
-                          method: "POST",
-                          contentType: "application/octet-stream",
+                          method: 'POST',
+                          contentType: 'application/octet-stream',
                           body: scaledFile,
                           override: auth,
-                        });
+                        })
                         await useServersFetch(`/create?path=/server-icon-original.png&type=file`, {
-                          method: "POST",
-                          contentType: "application/octet-stream",
+                          method: 'POST',
+                          contentType: 'application/octet-stream',
                           body: originalFile,
                           override: auth,
-                        });
+                        })
                       }
-                    }, "image/png");
-                    const dataURL = canvas.toDataURL("image/png");
-                    sharedImage.value = dataURL;
-                    resolve(dataURL);
-                    URL.revokeObjectURL(img.src);
-                  };
-                  img.src = URL.createObjectURL(file);
-                });
-                return dataURL;
+                    }, 'image/png')
+                    const dataURL = canvas.toDataURL('image/png')
+                    sharedImage.value = dataURL
+                    resolve(dataURL)
+                    URL.revokeObjectURL(img.src)
+                  }
+                  img.src = URL.createObjectURL(file)
+                })
+                return dataURL
               }
             } catch (externalError: any) {
-              console.debug("Could not process external icon:", externalError.message);
+              console.debug('Could not process external icon:', externalError.message)
             }
           }
         } else {
-          throw error;
+          throw error
         }
       }
     } catch (error: any) {
-      console.debug("Icon processing failed:", error.message);
+      console.debug('Icon processing failed:', error.message)
     }
 
-    sharedImage.value = undefined;
-    return undefined;
+    sharedImage.value = undefined
+    return undefined
   }
 
   async testNodeReachability(): Promise<boolean> {
     if (!this.general?.node?.instance) {
-      console.warn("No node instance available for ping test");
-      return false;
+      console.warn('No node instance available for ping test')
+      return false
     }
 
-    const wsUrl = `wss://${this.general.node.instance}/pingtest`;
+    const wsUrl = `wss://${this.general.node.instance}/pingtest`
 
     try {
       return await new Promise((resolve) => {
-        const socket = new WebSocket(wsUrl);
+        const socket = new WebSocket(wsUrl)
         const timeout = setTimeout(() => {
-          socket.close();
-          resolve(false);
-        }, 5000);
+          socket.close()
+          resolve(false)
+        }, 5000)
 
         socket.onopen = () => {
-          clearTimeout(timeout);
-          socket.send(performance.now().toString());
-        };
+          clearTimeout(timeout)
+          socket.send(performance.now().toString())
+        }
 
         socket.onmessage = () => {
-          clearTimeout(timeout);
-          socket.close();
-          resolve(true);
-        };
+          clearTimeout(timeout)
+          socket.close()
+          resolve(true)
+        }
 
         socket.onerror = () => {
-          clearTimeout(timeout);
-          resolve(false);
-        };
-      });
+          clearTimeout(timeout)
+          resolve(false)
+        }
+      })
     } catch (error) {
-      console.error(`Failed to ping node ${wsUrl}:`, error);
-      return false;
+      console.error(`Failed to ping node ${wsUrl}:`, error)
+      return false
     }
   }
 
   async refresh(
     modules: ModuleName[] = [],
     options?: {
-      preserveConnection?: boolean;
-      preserveInstallState?: boolean;
+      preserveConnection?: boolean
+      preserveInstallState?: boolean
     },
   ): Promise<void> {
     const modulesToRefresh =
       modules.length > 0
         ? modules
-        : (["general", "content", "backups", "network", "startup", "ws", "fs"] as ModuleName[]);
+        : (['general', 'content', 'backups', 'network', 'startup', 'ws', 'fs'] as ModuleName[])
 
     for (const module of modulesToRefresh) {
-      this.errors[module] = undefined;
+      this.errors[module] = undefined
 
       try {
         switch (module) {
-          case "general": {
+          case 'general': {
             if (options?.preserveConnection) {
-              const currentImage = this.general.image;
-              const currentMotd = this.general.motd;
-              const currentStatus = this.general.status;
+              const currentImage = this.general.image
+              const currentMotd = this.general.motd
+              const currentStatus = this.general.status
 
-              await this.general.fetch();
+              await this.general.fetch()
 
               if (currentImage) {
-                this.general.image = currentImage;
+                this.general.image = currentImage
               }
               if (currentMotd) {
-                this.general.motd = currentMotd;
+                this.general.motd = currentMotd
               }
-              if (options.preserveInstallState && currentStatus === "installing") {
-                this.general.status = "installing";
+              if (options.preserveInstallState && currentStatus === 'installing') {
+                this.general.status = 'installing'
               }
             } else {
-              await this.general.fetch();
+              await this.general.fetch()
             }
-            break;
+            break
           }
-          case "content":
-            await this.content.fetch();
-            break;
-          case "backups":
-            await this.backups.fetch();
-            break;
-          case "network":
-            await this.network.fetch();
-            break;
-          case "startup":
-            await this.startup.fetch();
-            break;
-          case "ws":
-            await this.ws.fetch();
-            break;
-          case "fs":
-            await this.fs.fetch();
-            break;
+          case 'content':
+            await this.content.fetch()
+            break
+          case 'backups':
+            await this.backups.fetch()
+            break
+          case 'network':
+            await this.network.fetch()
+            break
+          case 'startup':
+            await this.startup.fetch()
+            break
+          case 'ws':
+            await this.ws.fetch()
+            break
+          case 'fs':
+            await this.fs.fetch()
+            break
         }
       } catch (error) {
         if (error instanceof ModrinthServerError) {
-          if (error.statusCode === 404 && ["fs", "content"].includes(module)) {
-            console.debug(`Optional ${module} resource not found:`, error.message);
-            continue;
+          if (error.statusCode === 404 && ['fs', 'content'].includes(module)) {
+            console.debug(`Optional ${module} resource not found:`, error.message)
+            continue
           }
 
           if (error.statusCode && error.statusCode >= 500) {
-            console.debug(`Temporary ${module} unavailable:`, error.message);
-            continue;
+            console.debug(`Temporary ${module} unavailable:`, error.message)
+            continue
           }
         }
 
@@ -306,23 +306,23 @@ export class ModrinthServer {
           error:
             error instanceof ModrinthServerError
               ? error
-              : new ModrinthServerError("Unknown error", undefined, error as Error),
+              : new ModrinthServerError('Unknown error', undefined, error as Error),
           timestamp: Date.now(),
-        };
+        }
       }
     }
   }
 
   get moduleErrors() {
-    return this.errors;
+    return this.errors
   }
 }
 
 export const useModrinthServers = async (
   serverId: string,
-  includedModules: ModuleName[] = ["general"],
+  includedModules: ModuleName[] = ['general'],
 ) => {
-  const server = new ModrinthServer(serverId);
-  await server.refresh(includedModules);
-  return reactive(server);
-};
+  const server = new ModrinthServer(serverId)
+  await server.refresh(includedModules)
+  return reactive(server)
+}
diff --git a/apps/frontend/src/composables/servers/modules/backups.ts b/apps/frontend/src/composables/servers/modules/backups.ts
index d3d92b81e..160413ce2 100644
--- a/apps/frontend/src/composables/servers/modules/backups.ts
+++ b/apps/frontend/src/composables/servers/modules/backups.ts
@@ -1,80 +1,80 @@
-import type { AutoBackupSettings,Backup } from "@modrinth/utils";
+import type { AutoBackupSettings, Backup } from '@modrinth/utils'
 
-import { useServersFetch } from "../servers-fetch.ts";
-import { ServerModule } from "./base.ts";
+import { useServersFetch } from '../servers-fetch.ts'
+import { ServerModule } from './base.ts'
 
 export class BackupsModule extends ServerModule {
-  data: Backup[] = [];
+  data: Backup[] = []
 
   async fetch(): Promise<void> {
-    this.data = await useServersFetch<Backup[]>(`servers/${this.serverId}/backups`, {}, "backups");
+    this.data = await useServersFetch<Backup[]>(`servers/${this.serverId}/backups`, {}, 'backups')
   }
 
   async create(backupName: string): Promise<string> {
     const response = await useServersFetch<{ id: string }>(`servers/${this.serverId}/backups`, {
-      method: "POST",
+      method: 'POST',
       body: { name: backupName },
-    });
-    await this.fetch(); // Refresh this module
-    return response.id;
+    })
+    await this.fetch() // Refresh this module
+    return response.id
   }
 
   async rename(backupId: string, newName: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/backups/${backupId}/rename`, {
-      method: "POST",
+      method: 'POST',
       body: { name: newName },
-    });
-    await this.fetch(); // Refresh this module
+    })
+    await this.fetch() // Refresh this module
   }
 
   async delete(backupId: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/backups/${backupId}`, {
-      method: "DELETE",
-    });
-    await this.fetch(); // Refresh this module
+      method: 'DELETE',
+    })
+    await this.fetch() // Refresh this module
   }
 
   async restore(backupId: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/backups/${backupId}/restore`, {
-      method: "POST",
-    });
-    await this.fetch(); // Refresh this module
+      method: 'POST',
+    })
+    await this.fetch() // Refresh this module
   }
 
   async prepare(backupId: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/backups/${backupId}/prepare-download`, {
-      method: "POST",
-    });
+      method: 'POST',
+    })
   }
 
   async lock(backupId: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/backups/${backupId}/lock`, {
-      method: "POST",
-    });
-    await this.fetch(); // Refresh this module
+      method: 'POST',
+    })
+    await this.fetch() // Refresh this module
   }
 
   async unlock(backupId: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/backups/${backupId}/unlock`, {
-      method: "POST",
-    });
-    await this.fetch(); // Refresh this module
+      method: 'POST',
+    })
+    await this.fetch() // Refresh this module
   }
 
   async retry(backupId: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/backups/${backupId}/retry`, {
-      method: "POST",
-    });
+      method: 'POST',
+    })
   }
 
-  async updateAutoBackup(autoBackup: "enable" | "disable", interval: number): Promise<void> {
+  async updateAutoBackup(autoBackup: 'enable' | 'disable', interval: number): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/autobackup`, {
-      method: "POST",
+      method: 'POST',
       body: { set: autoBackup, interval },
-    });
+    })
   }
 
   async getAutoBackup(): Promise<AutoBackupSettings> {
-    return await useServersFetch(`servers/${this.serverId}/autobackup`);
+    return await useServersFetch(`servers/${this.serverId}/autobackup`)
   }
 }
diff --git a/apps/frontend/src/composables/servers/modules/base.ts b/apps/frontend/src/composables/servers/modules/base.ts
index 84495d749..a22a41173 100644
--- a/apps/frontend/src/composables/servers/modules/base.ts
+++ b/apps/frontend/src/composables/servers/modules/base.ts
@@ -1,15 +1,15 @@
-import type { ModrinthServer } from "../modrinth-servers.ts";
+import type { ModrinthServer } from '../modrinth-servers.ts'
 
 export abstract class ServerModule {
-  protected server: ModrinthServer;
+  protected server: ModrinthServer
 
   constructor(server: ModrinthServer) {
-    this.server = server;
+    this.server = server
   }
 
   protected get serverId(): string {
-    return this.server.serverId;
+    return this.server.serverId
   }
 
-  abstract fetch(): Promise<void>;
+  abstract fetch(): Promise<void>
 }
diff --git a/apps/frontend/src/composables/servers/modules/content.ts b/apps/frontend/src/composables/servers/modules/content.ts
index 5c1f06e7d..2d966bbcd 100644
--- a/apps/frontend/src/composables/servers/modules/content.ts
+++ b/apps/frontend/src/composables/servers/modules/content.ts
@@ -1,37 +1,37 @@
-import type { ContentType,Mod } from "@modrinth/utils";
+import type { ContentType, Mod } from '@modrinth/utils'
 
-import { useServersFetch } from "../servers-fetch.ts";
-import { ServerModule } from "./base.ts";
+import { useServersFetch } from '../servers-fetch.ts'
+import { ServerModule } from './base.ts'
 
 export class ContentModule extends ServerModule {
-  data: Mod[] = [];
+  data: Mod[] = []
 
   async fetch(): Promise<void> {
-    const mods = await useServersFetch<Mod[]>(`servers/${this.serverId}/mods`, {}, "content");
-    this.data = mods.sort((a, b) => (a?.name ?? "").localeCompare(b?.name ?? ""));
+    const mods = await useServersFetch<Mod[]>(`servers/${this.serverId}/mods`, {}, 'content')
+    this.data = mods.sort((a, b) => (a?.name ?? '').localeCompare(b?.name ?? ''))
   }
 
   async install(contentType: ContentType, projectId: string, versionId: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/mods`, {
-      method: "POST",
+      method: 'POST',
       body: {
         rinth_ids: { project_id: projectId, version_id: versionId },
         install_as: contentType,
       },
-    });
+    })
   }
 
   async remove(path: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/deleteMod`, {
-      method: "POST",
+      method: 'POST',
       body: { path },
-    });
+    })
   }
 
   async reinstall(replace: string, projectId: string, versionId: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/mods/update`, {
-      method: "POST",
+      method: 'POST',
       body: { replace, project_id: projectId, version_id: versionId },
-    });
+    })
   }
 }
diff --git a/apps/frontend/src/composables/servers/modules/fs.ts b/apps/frontend/src/composables/servers/modules/fs.ts
index c1bc48a68..e6c7620f4 100644
--- a/apps/frontend/src/composables/servers/modules/fs.ts
+++ b/apps/frontend/src/composables/servers/modules/fs.ts
@@ -4,23 +4,23 @@ import type {
   FileUploadQuery,
   FSQueuedOp,
   JWTAuth,
-} from "@modrinth/utils";
-import { ModrinthServerError } from "@modrinth/utils";
+} from '@modrinth/utils'
+import { ModrinthServerError } from '@modrinth/utils'
 
-import { useServersFetch } from "../servers-fetch.ts";
-import { ServerModule } from "./base.ts";
+import { useServersFetch } from '../servers-fetch.ts'
+import { ServerModule } from './base.ts'
 
 export class FSModule extends ServerModule {
-  auth!: JWTAuth;
-  ops: FilesystemOp[] = [];
-  queuedOps: FSQueuedOp[] = [];
-  opsQueuedForModification: string[] = [];
+  auth!: JWTAuth
+  ops: FilesystemOp[] = []
+  queuedOps: FSQueuedOp[] = []
+  opsQueuedForModification: string[] = []
 
   async fetch(): Promise<void> {
-    this.auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`, {}, "fs");
-    this.ops = [];
-    this.queuedOps = [];
-    this.opsQueuedForModification = [];
+    this.auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`, {}, 'fs')
+    this.ops = []
+    this.queuedOps = []
+    this.opsQueuedForModification = []
   }
 
   private async retryWithAuth<T>(
@@ -28,28 +28,28 @@ export class FSModule extends ServerModule {
     ignoreFailure: boolean = false,
   ): Promise<T> {
     try {
-      return await requestFn();
+      return await requestFn()
     } catch (error) {
       if (error instanceof ModrinthServerError && error.statusCode === 401) {
-        console.debug("Auth failed, refreshing JWT and retrying");
-        await this.fetch(); // Refresh auth
-        return await requestFn();
+        console.debug('Auth failed, refreshing JWT and retrying')
+        await this.fetch() // Refresh auth
+        return await requestFn()
       }
 
-      const available = await this.server.testNodeReachability();
+      const available = await this.server.testNodeReachability()
       if (!available && !ignoreFailure) {
         this.server.moduleErrors.general = {
           error: new ModrinthServerError(
-            "Unable to reach node. FS operation failed and subsequent ping test failed.",
+            'Unable to reach node. FS operation failed and subsequent ping test failed.',
             500,
             error as Error,
-            "fs",
+            'fs',
           ),
           timestamp: Date.now(),
-        };
+        }
       }
 
-      throw error;
+      throw error
     }
   }
 
@@ -60,132 +60,132 @@ export class FSModule extends ServerModule {
     ignoreFailure: boolean = false,
   ): Promise<DirectoryResponse> {
     return this.retryWithAuth(async () => {
-      const encodedPath = encodeURIComponent(path);
+      const encodedPath = encodeURIComponent(path)
       return await useServersFetch(`/list?path=${encodedPath}&page=${page}&page_size=${pageSize}`, {
         override: this.auth,
         retry: false,
-      });
-    }, ignoreFailure);
+      })
+    }, ignoreFailure)
   }
 
-  createFileOrFolder(path: string, type: "file" | "directory"): Promise<void> {
+  createFileOrFolder(path: string, type: 'file' | 'directory'): Promise<void> {
     return this.retryWithAuth(async () => {
-      const encodedPath = encodeURIComponent(path);
+      const encodedPath = encodeURIComponent(path)
       await useServersFetch(`/create?path=${encodedPath}&type=${type}`, {
-        method: "POST",
-        contentType: "application/octet-stream",
+        method: 'POST',
+        contentType: 'application/octet-stream',
         override: this.auth,
-      });
-    });
+      })
+    })
   }
 
   uploadFile(path: string, file: File): FileUploadQuery {
-    const encodedPath = encodeURIComponent(path);
-    const progressSubject = new EventTarget();
-    const abortController = new AbortController();
+    const encodedPath = encodeURIComponent(path)
+    const progressSubject = new EventTarget()
+    const abortController = new AbortController()
 
     const uploadPromise = new Promise((resolve, reject) => {
-      const xhr = new XMLHttpRequest();
+      const xhr = new XMLHttpRequest()
 
-      xhr.upload.addEventListener("progress", (e) => {
+      xhr.upload.addEventListener('progress', (e) => {
         if (e.lengthComputable) {
-          const progress = (e.loaded / e.total) * 100;
+          const progress = (e.loaded / e.total) * 100
           progressSubject.dispatchEvent(
-            new CustomEvent("progress", {
+            new CustomEvent('progress', {
               detail: { loaded: e.loaded, total: e.total, progress },
             }),
-          );
+          )
         }
-      });
+      })
 
       xhr.onload = () => {
         if (xhr.status >= 200 && xhr.status < 300) {
-          resolve(xhr.response);
+          resolve(xhr.response)
         } else {
-          reject(new Error(`Upload failed with status ${xhr.status}`));
+          reject(new Error(`Upload failed with status ${xhr.status}`))
         }
-      };
+      }
 
-      xhr.onerror = () => reject(new Error("Upload failed"));
-      xhr.onabort = () => reject(new Error("Upload cancelled"));
+      xhr.onerror = () => reject(new Error('Upload failed'))
+      xhr.onabort = () => reject(new Error('Upload cancelled'))
 
-      xhr.open("POST", `https://${this.auth.url}/create?path=${encodedPath}&type=file`);
-      xhr.setRequestHeader("Authorization", `Bearer ${this.auth.token}`);
-      xhr.setRequestHeader("Content-Type", "application/octet-stream");
-      xhr.send(file);
+      xhr.open('POST', `https://${this.auth.url}/create?path=${encodedPath}&type=file`)
+      xhr.setRequestHeader('Authorization', `Bearer ${this.auth.token}`)
+      xhr.setRequestHeader('Content-Type', 'application/octet-stream')
+      xhr.send(file)
 
-      abortController.signal.addEventListener("abort", () => xhr.abort());
-    });
+      abortController.signal.addEventListener('abort', () => xhr.abort())
+    })
 
     return {
       promise: uploadPromise,
       onProgress: (
         callback: (progress: { loaded: number; total: number; progress: number }) => void,
       ) => {
-        progressSubject.addEventListener("progress", ((e: CustomEvent) => {
-          callback(e.detail);
-        }) as EventListener);
+        progressSubject.addEventListener('progress', ((e: CustomEvent) => {
+          callback(e.detail)
+        }) as EventListener)
       },
       cancel: () => abortController.abort(),
-    } as FileUploadQuery;
+    } as FileUploadQuery
   }
 
   renameFileOrFolder(path: string, name: string): Promise<void> {
-    const pathName = path.split("/").slice(0, -1).join("/") + "/" + name;
+    const pathName = path.split('/').slice(0, -1).join('/') + '/' + name
     return this.retryWithAuth(async () => {
       await useServersFetch(`/move`, {
-        method: "POST",
+        method: 'POST',
         override: this.auth,
         body: { source: path, destination: pathName },
-      });
-    });
+      })
+    })
   }
 
   updateFile(path: string, content: string): Promise<void> {
-    const octetStream = new Blob([content], { type: "application/octet-stream" });
+    const octetStream = new Blob([content], { type: 'application/octet-stream' })
     return this.retryWithAuth(async () => {
       await useServersFetch(`/update?path=${path}`, {
-        method: "PUT",
-        contentType: "application/octet-stream",
+        method: 'PUT',
+        contentType: 'application/octet-stream',
         body: octetStream,
         override: this.auth,
-      });
-    });
+      })
+    })
   }
 
   moveFileOrFolder(path: string, newPath: string): Promise<void> {
     return this.retryWithAuth(async () => {
-      await this.server.createMissingFolders(newPath.substring(0, newPath.lastIndexOf("/")));
+      await this.server.createMissingFolders(newPath.substring(0, newPath.lastIndexOf('/')))
       await useServersFetch(`/move`, {
-        method: "POST",
+        method: 'POST',
         override: this.auth,
         body: { source: path, destination: newPath },
-      });
-    });
+      })
+    })
   }
 
   deleteFileOrFolder(path: string, recursive: boolean): Promise<void> {
-    const encodedPath = encodeURIComponent(path);
+    const encodedPath = encodeURIComponent(path)
     return this.retryWithAuth(async () => {
       await useServersFetch(`/delete?path=${encodedPath}&recursive=${recursive}`, {
-        method: "DELETE",
+        method: 'DELETE',
         override: this.auth,
-      });
-    });
+      })
+    })
   }
 
   downloadFile(path: string, raw: boolean = false, ignoreFailure: boolean = false): Promise<any> {
     return this.retryWithAuth(async () => {
-      const encodedPath = encodeURIComponent(path);
+      const encodedPath = encodeURIComponent(path)
       const fileData = await useServersFetch(`/download?path=${encodedPath}`, {
         override: this.auth,
-      });
+      })
 
       if (fileData instanceof Blob) {
-        return raw ? fileData : await fileData.text();
+        return raw ? fileData : await fileData.text()
       }
-      return fileData;
-    }, ignoreFailure);
+      return fileData
+    }, ignoreFailure)
   }
 
   extractFile(
@@ -195,54 +195,54 @@ export class FSModule extends ServerModule {
     silentQueue = false,
   ): Promise<{ modpack_name: string | null; conflicting_files: string[] }> {
     return this.retryWithAuth(async () => {
-      const encodedPath = encodeURIComponent(path);
+      const encodedPath = encodeURIComponent(path)
 
       if (!silentQueue) {
-        this.queuedOps.push({ op: "unarchive", src: path });
-        setTimeout(() => this.removeQueuedOp("unarchive", path), 4000);
+        this.queuedOps.push({ op: 'unarchive', src: path })
+        setTimeout(() => this.removeQueuedOp('unarchive', path), 4000)
       }
 
       try {
         return await useServersFetch(
           `/unarchive?src=${encodedPath}&trg=/&override=${override}&dry=${dry}`,
           {
-            method: "POST",
+            method: 'POST',
             override: this.auth,
             version: 1,
           },
           undefined,
-          "Error extracting file",
-        );
+          'Error extracting file',
+        )
       } catch (err) {
-        this.removeQueuedOp("unarchive", path);
-        throw err;
+        this.removeQueuedOp('unarchive', path)
+        throw err
       }
-    });
+    })
   }
 
-  modifyOp(id: string, action: "dismiss" | "cancel"): Promise<void> {
+  modifyOp(id: string, action: 'dismiss' | 'cancel'): Promise<void> {
     return this.retryWithAuth(async () => {
       await useServersFetch(
         `/ops/${action}?id=${id}`,
         {
-          method: "POST",
+          method: 'POST',
           override: this.auth,
           version: 1,
         },
         undefined,
-        `Error ${action === "dismiss" ? "dismissing" : "cancelling"} filesystem operation`,
-      );
+        `Error ${action === 'dismiss' ? 'dismissing' : 'cancelling'} filesystem operation`,
+      )
 
-      this.opsQueuedForModification = this.opsQueuedForModification.filter((x: string) => x !== id);
-      this.ops = this.ops.filter((x: FilesystemOp) => x.id !== id);
-    });
+      this.opsQueuedForModification = this.opsQueuedForModification.filter((x: string) => x !== id)
+      this.ops = this.ops.filter((x: FilesystemOp) => x.id !== id)
+    })
   }
 
-  removeQueuedOp(op: FSQueuedOp["op"], src: string): void {
-    this.queuedOps = this.queuedOps.filter((x: FSQueuedOp) => x.op !== op || x.src !== src);
+  removeQueuedOp(op: FSQueuedOp['op'], src: string): void {
+    this.queuedOps = this.queuedOps.filter((x: FSQueuedOp) => x.op !== op || x.src !== src)
   }
 
   clearQueuedOps(): void {
-    this.queuedOps = [];
+    this.queuedOps = []
   }
 }
diff --git a/apps/frontend/src/composables/servers/modules/general.ts b/apps/frontend/src/composables/servers/modules/general.ts
index fa8919942..481a67cd6 100644
--- a/apps/frontend/src/composables/servers/modules/general.ts
+++ b/apps/frontend/src/composables/servers/modules/general.ts
@@ -1,8 +1,8 @@
-import type { JWTAuth,PowerAction, Project, ServerGeneral } from "@modrinth/utils";
-import { $fetch } from "ofetch";
+import type { JWTAuth, PowerAction, Project, ServerGeneral } from '@modrinth/utils'
+import { $fetch } from 'ofetch'
 
-import { useServersFetch } from "../servers-fetch.ts";
-import { ServerModule } from "./base.ts";
+import { useServersFetch } from '../servers-fetch.ts'
+import { ServerModule } from './base.ts'
 
 export class GeneralModule extends ServerModule implements ServerGeneral {
   server_id!: string;
@@ -18,67 +18,67 @@ export class GeneralModule extends ServerModule implements ServerGeneral {
   loader_version!: string;
   mc_version!: string;
   upstream!: {
-    kind: "modpack" | "mod" | "resourcepack";
-    version_id: string;
-    project_id: string;
-  } | null;
+    kind: 'modpack' | 'mod' | 'resourcepack'
+    version_id: string
+    project_id: string
+  } | null
 
-  motd?: string;
-  image?: string;
-  project?: Project;
-  sftp_username!: string;
-  sftp_password!: string;
-  sftp_host!: string;
-  datacenter?: string;
-  notices?: any[];
-  node!: { token: string; instance: string };
-  flows?: { intro?: boolean };
+  motd?: string
+  image?: string
+  project?: Project
+  sftp_username!: string
+  sftp_password!: string
+  sftp_host!: string
+  datacenter?: string
+  notices?: any[]
+  node!: { token: string; instance: string }
+  flows?: { intro?: boolean }
 
   async fetch(): Promise<void> {
-    const data = await useServersFetch<ServerGeneral>(`servers/${this.serverId}`, {}, "general");
+    const data = await useServersFetch<ServerGeneral>(`servers/${this.serverId}`, {}, 'general')
 
     if (data.upstream?.project_id) {
       const project = await $fetch(
         `https://api.modrinth.com/v2/project/${data.upstream.project_id}`,
-      );
-      data.project = project as Project;
+      )
+      data.project = project as Project
     }
 
     if (import.meta.client) {
-      data.image = (await this.server.processImage(data.project?.icon_url)) ?? undefined;
+      data.image = (await this.server.processImage(data.project?.icon_url)) ?? undefined
     }
 
     try {
-      const motd = await this.getMotd();
-      if (motd === "A Minecraft Server") {
+      const motd = await this.getMotd()
+      if (motd === 'A Minecraft Server') {
         await this.setMotd(
-          `§b${data.project?.title || data.loader + " " + data.mc_version} §f♦ §aModrinth Servers`,
-        );
+          `§b${data.project?.title || data.loader + ' ' + data.mc_version} §f♦ §aModrinth Servers`,
+        )
       }
-      data.motd = motd;
+      data.motd = motd
     } catch {
-      console.error("[Modrinth Servers] [General] Failed to fetch MOTD.");
-      data.motd = undefined;
+      console.error('[Modrinth Servers] [General] Failed to fetch MOTD.')
+      data.motd = undefined
     }
 
     // Copy data to this module
-    Object.assign(this, data);
+    Object.assign(this, data)
   }
 
   async updateName(newName: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/name`, {
-      method: "POST",
+      method: 'POST',
       body: { name: newName },
-    });
+    })
   }
 
   async power(action: PowerAction): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/power`, {
-      method: "POST",
+      method: 'POST',
       body: { action },
-    });
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    await this.fetch(); // Refresh this module
+    })
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    await this.fetch() // Refresh this module
   }
 
   async reinstall(
@@ -88,20 +88,20 @@ export class GeneralModule extends ServerModule implements ServerGeneral {
     loaderVersionId?: string,
     hardReset: boolean = false,
   ): Promise<void> {
-    const hardResetParam = hardReset ? "true" : "false";
+    const hardResetParam = hardReset ? 'true' : 'false'
     if (loader) {
-      if (projectId.toLowerCase() === "neoforge") {
-        projectId = "NeoForge";
+      if (projectId.toLowerCase() === 'neoforge') {
+        projectId = 'NeoForge'
       }
       await useServersFetch(`servers/${this.serverId}/reinstall?hard=${hardResetParam}`, {
-        method: "POST",
+        method: 'POST',
         body: { loader: projectId, loader_version: loaderVersionId, game_version: versionId },
-      });
+      })
     } else {
       await useServersFetch(`servers/${this.serverId}/reinstall?hard=${hardResetParam}`, {
-        method: "POST",
+        method: 'POST',
         body: { project_id: projectId, version_id: versionId },
-      });
+      })
     }
   }
 
@@ -109,117 +109,117 @@ export class GeneralModule extends ServerModule implements ServerGeneral {
     mrpack: File,
     hardReset: boolean = false,
   ): {
-    promise: Promise<void>;
-    onProgress: (cb: (p: { loaded: number; total: number; progress: number }) => void) => void;
+    promise: Promise<void>
+    onProgress: (cb: (p: { loaded: number; total: number; progress: number }) => void) => void
   } {
-    const hardResetParam = hardReset ? "true" : "false";
+    const hardResetParam = hardReset ? 'true' : 'false'
 
-    const progressSubject = new EventTarget();
+    const progressSubject = new EventTarget()
 
     const uploadPromise = (async () => {
       try {
-        const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/reinstallFromMrpack`);
+        const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/reinstallFromMrpack`)
 
         await new Promise<void>((resolve, reject) => {
-          const xhr = new XMLHttpRequest();
+          const xhr = new XMLHttpRequest()
 
-          xhr.upload.addEventListener("progress", (e) => {
+          xhr.upload.addEventListener('progress', (e) => {
             if (e.lengthComputable) {
               progressSubject.dispatchEvent(
-                new CustomEvent("progress", {
+                new CustomEvent('progress', {
                   detail: {
                     loaded: e.loaded,
                     total: e.total,
                     progress: (e.loaded / e.total) * 100,
                   },
                 }),
-              );
+              )
             }
-          });
+          })
 
           xhr.onload = () =>
             xhr.status >= 200 && xhr.status < 300
               ? resolve()
-              : reject(new Error(`[pyroservers] XHR error status: ${xhr.status}`));
+              : reject(new Error(`[pyroservers] XHR error status: ${xhr.status}`))
 
-          xhr.onerror = () => reject(new Error("[pyroservers] .mrpack upload failed"));
-          xhr.onabort = () => reject(new Error("[pyroservers] .mrpack upload cancelled"));
-          xhr.ontimeout = () => reject(new Error("[pyroservers] .mrpack upload timed out"));
-          xhr.timeout = 30 * 60 * 1000;
+          xhr.onerror = () => reject(new Error('[pyroservers] .mrpack upload failed'))
+          xhr.onabort = () => reject(new Error('[pyroservers] .mrpack upload cancelled'))
+          xhr.ontimeout = () => reject(new Error('[pyroservers] .mrpack upload timed out'))
+          xhr.timeout = 30 * 60 * 1000
 
-          xhr.open("POST", `https://${auth.url}/reinstallMrpackMultiparted?hard=${hardResetParam}`);
-          xhr.setRequestHeader("Authorization", `Bearer ${auth.token}`);
+          xhr.open('POST', `https://${auth.url}/reinstallMrpackMultiparted?hard=${hardResetParam}`)
+          xhr.setRequestHeader('Authorization', `Bearer ${auth.token}`)
 
-          const formData = new FormData();
-          formData.append("file", mrpack);
-          xhr.send(formData);
-        });
+          const formData = new FormData()
+          formData.append('file', mrpack)
+          xhr.send(formData)
+        })
       } catch (err) {
-        console.error("Error reinstalling from mrpack:", err);
-        throw err;
+        console.error('Error reinstalling from mrpack:', err)
+        throw err
       }
-    })();
+    })()
 
     return {
       promise: uploadPromise,
       onProgress: (cb: (p: { loaded: number; total: number; progress: number }) => void) =>
-        progressSubject.addEventListener("progress", ((e: CustomEvent) =>
+        progressSubject.addEventListener('progress', ((e: CustomEvent) =>
           cb(e.detail)) as EventListener),
-    };
+    }
   }
 
   async suspend(status: boolean): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/suspend`, {
-      method: "POST",
+      method: 'POST',
       body: { suspended: status },
-    });
+    })
   }
 
   async endIntro(): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/flows/intro`, {
-      method: "DELETE",
+      method: 'DELETE',
       version: 1,
-    });
-    await this.fetch(); // Refresh this module
+    })
+    await this.fetch() // Refresh this module
   }
 
   async getMotd(): Promise<string | undefined> {
     try {
-      const props = await this.server.fs.downloadFile("/server.properties", false, true);
+      const props = await this.server.fs.downloadFile('/server.properties', false, true)
       if (props) {
-        const lines = props.split("\n");
+        const lines = props.split('\n')
         for (const line of lines) {
-          if (line.startsWith("motd=")) {
-            return line.slice(5);
+          if (line.startsWith('motd=')) {
+            return line.slice(5)
           }
         }
       }
     } catch {
-      return undefined;
+      return undefined
     }
-    return undefined;
+    return undefined
   }
 
   async setMotd(motd: string): Promise<void> {
     try {
-      const props = (await this.server.fetchConfigFile("ServerProperties")) as any;
+      const props = (await this.server.fetchConfigFile('ServerProperties')) as any
       if (props) {
-        props.motd = motd;
-        const newProps = this.server.constructServerProperties(props);
-        const octetStream = new Blob([newProps], { type: "application/octet-stream" });
-        const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`);
+        props.motd = motd
+        const newProps = this.server.constructServerProperties(props)
+        const octetStream = new Blob([newProps], { type: 'application/octet-stream' })
+        const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/fs`)
 
         await useServersFetch(`/update?path=/server.properties`, {
-          method: "PUT",
-          contentType: "application/octet-stream",
+          method: 'PUT',
+          contentType: 'application/octet-stream',
           body: octetStream,
           override: auth,
-        });
+        })
       }
     } catch {
       console.error(
-        "[Modrinth Servers] [General] Failed to set MOTD due to lack of server properties file.",
-      );
+        '[Modrinth Servers] [General] Failed to set MOTD due to lack of server properties file.',
+      )
     }
   }
 }
diff --git a/apps/frontend/src/composables/servers/modules/index.ts b/apps/frontend/src/composables/servers/modules/index.ts
index a3fc7f16e..c3980f97a 100644
--- a/apps/frontend/src/composables/servers/modules/index.ts
+++ b/apps/frontend/src/composables/servers/modules/index.ts
@@ -1,8 +1,8 @@
-export * from "./backups.ts";
-export * from "./base.ts";
-export * from "./content.ts";
-export * from "./fs.ts";
-export * from "./general.ts";
-export * from "./network.ts";
-export * from "./startup.ts";
-export * from "./ws.ts";
+export * from './backups.ts'
+export * from './base.ts'
+export * from './content.ts'
+export * from './fs.ts'
+export * from './general.ts'
+export * from './network.ts'
+export * from './startup.ts'
+export * from './ws.ts'
diff --git a/apps/frontend/src/composables/servers/modules/network.ts b/apps/frontend/src/composables/servers/modules/network.ts
index 03e1b5de3..403a46b6e 100644
--- a/apps/frontend/src/composables/servers/modules/network.ts
+++ b/apps/frontend/src/composables/servers/modules/network.ts
@@ -1,48 +1,48 @@
-import type { Allocation } from "@modrinth/utils";
+import type { Allocation } from '@modrinth/utils'
 
-import { useServersFetch } from "../servers-fetch.ts";
-import { ServerModule } from "./base.ts";
+import { useServersFetch } from '../servers-fetch.ts'
+import { ServerModule } from './base.ts'
 
 export class NetworkModule extends ServerModule {
-  allocations: Allocation[] = [];
+  allocations: Allocation[] = []
 
   async fetch(): Promise<void> {
     this.allocations = await useServersFetch<Allocation[]>(
       `servers/${this.serverId}/allocations`,
       {},
-      "network",
-    );
+      'network',
+    )
   }
 
   async reserveAllocation(name: string): Promise<Allocation> {
     return await useServersFetch<Allocation>(`servers/${this.serverId}/allocations?name=${name}`, {
-      method: "POST",
-    });
+      method: 'POST',
+    })
   }
 
   async updateAllocation(port: number, name: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/allocations/${port}?name=${name}`, {
-      method: "PUT",
-    });
+      method: 'PUT',
+    })
   }
 
   async deleteAllocation(port: number): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/allocations/${port}`, {
-      method: "DELETE",
-    });
+      method: 'DELETE',
+    })
   }
 
   async checkSubdomainAvailability(subdomain: string): Promise<boolean> {
     const result = (await useServersFetch(`subdomains/${subdomain}/isavailable`)) as {
-      available: boolean;
-    };
-    return result.available;
+      available: boolean
+    }
+    return result.available
   }
 
   async changeSubdomain(subdomain: string): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/subdomain`, {
-      method: "POST",
+      method: 'POST',
       body: { subdomain },
-    });
+    })
   }
 }
diff --git a/apps/frontend/src/composables/servers/modules/startup.ts b/apps/frontend/src/composables/servers/modules/startup.ts
index 65ff42845..b475c7b52 100644
--- a/apps/frontend/src/composables/servers/modules/startup.ts
+++ b/apps/frontend/src/composables/servers/modules/startup.ts
@@ -1,27 +1,27 @@
-import type { JDKBuild,JDKVersion, Startup } from "@modrinth/utils";
+import type { JDKBuild, JDKVersion, Startup } from '@modrinth/utils'
 
-import { useServersFetch } from "../servers-fetch.ts";
-import { ServerModule } from "./base.ts";
+import { useServersFetch } from '../servers-fetch.ts'
+import { ServerModule } from './base.ts'
 
 export class StartupModule extends ServerModule implements Startup {
-  invocation!: string;
-  original_invocation!: string;
-  jdk_version!: JDKVersion;
-  jdk_build!: JDKBuild;
+  invocation!: string
+  original_invocation!: string
+  jdk_version!: JDKVersion
+  jdk_build!: JDKBuild
 
   async fetch(): Promise<void> {
-    const data = await useServersFetch<Startup>(`servers/${this.serverId}/startup`, {}, "startup");
-    Object.assign(this, data);
+    const data = await useServersFetch<Startup>(`servers/${this.serverId}/startup`, {}, 'startup')
+    Object.assign(this, data)
   }
 
   async update(invocation: string, jdkVersion: JDKVersion, jdkBuild: JDKBuild): Promise<void> {
     await useServersFetch(`servers/${this.serverId}/startup`, {
-      method: "POST",
+      method: 'POST',
       body: {
         invocation: invocation || null,
         jdk_version: jdkVersion || null,
         jdk_build: jdkBuild || null,
       },
-    });
+    })
   }
 }
diff --git a/apps/frontend/src/composables/servers/modules/ws.ts b/apps/frontend/src/composables/servers/modules/ws.ts
index bbc11a03b..e53127608 100644
--- a/apps/frontend/src/composables/servers/modules/ws.ts
+++ b/apps/frontend/src/composables/servers/modules/ws.ts
@@ -1,14 +1,14 @@
-import type { JWTAuth } from "@modrinth/utils";
+import type { JWTAuth } from '@modrinth/utils'
 
-import { useServersFetch } from "../servers-fetch.ts";
-import { ServerModule } from "./base.ts";
+import { useServersFetch } from '../servers-fetch.ts'
+import { ServerModule } from './base.ts'
 
 export class WSModule extends ServerModule implements JWTAuth {
-  url!: string;
-  token!: string;
+  url!: string
+  token!: string
 
   async fetch(): Promise<void> {
-    const data = await useServersFetch<JWTAuth>(`servers/${this.serverId}/ws`, {}, "ws");
-    Object.assign(this, data);
+    const data = await useServersFetch<JWTAuth>(`servers/${this.serverId}/ws`, {}, 'ws')
+    Object.assign(this, data)
   }
 }
diff --git a/apps/frontend/src/composables/servers/servers-fetch.ts b/apps/frontend/src/composables/servers/servers-fetch.ts
index 708e31acc..b540c9723 100644
--- a/apps/frontend/src/composables/servers/servers-fetch.ts
+++ b/apps/frontend/src/composables/servers/servers-fetch.ts
@@ -1,18 +1,18 @@
-import type { V1ErrorInfo } from "@modrinth/utils";
-import { ModrinthServerError, ModrinthServersFetchError } from "@modrinth/utils";
-import { $fetch, FetchError } from "ofetch";
+import type { V1ErrorInfo } from '@modrinth/utils'
+import { ModrinthServerError, ModrinthServersFetchError } from '@modrinth/utils'
+import { $fetch, FetchError } from 'ofetch'
 
 export interface ServersFetchOptions {
-  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
-  contentType?: string;
-  body?: Record<string, any>;
-  version?: number;
+  method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
+  contentType?: string
+  body?: Record<string, any>
+  version?: number
   override?: {
-    url?: string;
-    token?: string;
-  };
-  retry?: number | boolean;
-  bypassAuth?: boolean;
+    url?: string
+    token?: string
+  }
+  retry?: number | boolean
+  bypassAuth?: boolean
 }
 
 export async function useServersFetch<T>(
@@ -21,91 +21,91 @@ export async function useServersFetch<T>(
   module?: string,
   errorContext?: string,
 ): Promise<T> {
-  const config = useRuntimeConfig();
-  const auth = await useAuth();
-  const authToken = auth.value?.token;
+  const config = useRuntimeConfig()
+  const auth = await useAuth()
+  const authToken = auth.value?.token
 
   if (!authToken && !options.bypassAuth) {
     const error = new ModrinthServersFetchError(
-      "[Modrinth Servers] Cannot fetch without auth",
+      '[Modrinth Servers] Cannot fetch without auth',
       10000,
-    );
-    throw new ModrinthServerError("Missing auth token", 401, error, module);
+    )
+    throw new ModrinthServerError('Missing auth token', 401, error, module)
   }
 
   const {
-    method = "GET",
-    contentType = "application/json",
+    method = 'GET',
+    contentType = 'application/json',
     body,
     version = 0,
     override,
-    retry = method === "GET" ? 3 : 0,
-  } = options;
+    retry = method === 'GET' ? 3 : 0,
+  } = options
 
-  const circuitBreakerKey = `${module || "default"}_${path}`;
-  const failureCount = useState<number>(`fetch_failures_${circuitBreakerKey}`, () => 0);
-  const lastFailureTime = useState<number>(`last_failure_${circuitBreakerKey}`, () => 0);
+  const circuitBreakerKey = `${module || 'default'}_${path}`
+  const failureCount = useState<number>(`fetch_failures_${circuitBreakerKey}`, () => 0)
+  const lastFailureTime = useState<number>(`last_failure_${circuitBreakerKey}`, () => 0)
 
-  const now = Date.now();
+  const now = Date.now()
   if (failureCount.value >= 3 && now - lastFailureTime.value < 30000) {
     const error = new ModrinthServersFetchError(
-      "[Modrinth Servers] Circuit breaker open - too many recent failures",
+      '[Modrinth Servers] Circuit breaker open - too many recent failures',
       503,
-    );
-    throw new ModrinthServerError("Service temporarily unavailable", 503, error, module);
+    )
+    throw new ModrinthServerError('Service temporarily unavailable', 503, error, module)
   }
 
   if (now - lastFailureTime.value > 30000) {
-    failureCount.value = 0;
+    failureCount.value = 0
   }
 
   const base = (import.meta.server ? config.pyroBaseUrl : config.public.pyroBaseUrl)?.replace(
     /\/$/,
-    "",
-  );
+    '',
+  )
 
   if (!base) {
     const error = new ModrinthServersFetchError(
-      "[Modrinth Servers] Cannot fetch without base url. Make sure to set a PYRO_BASE_URL in environment variables",
+      '[Modrinth Servers] Cannot fetch without base url. Make sure to set a PYRO_BASE_URL in environment variables',
       10001,
-    );
-    throw new ModrinthServerError("Configuration error: Missing PYRO_BASE_URL", 500, error, module);
+    )
+    throw new ModrinthServerError('Configuration error: Missing PYRO_BASE_URL', 500, error, module)
   }
 
-  const versionString = `v${version}`;
-  let newOverrideUrl = override?.url;
-  if (newOverrideUrl && newOverrideUrl.includes("v0") && version !== 0) {
-    newOverrideUrl = newOverrideUrl.replace("v0", versionString);
+  const versionString = `v${version}`
+  let newOverrideUrl = override?.url
+  if (newOverrideUrl && newOverrideUrl.includes('v0') && version !== 0) {
+    newOverrideUrl = newOverrideUrl.replace('v0', versionString)
   }
 
   const fullUrl = newOverrideUrl
-    ? `https://${newOverrideUrl}/${path.replace(/^\//, "")}`
+    ? `https://${newOverrideUrl}/${path.replace(/^\//, '')}`
     : version === 0
-      ? `${base}/modrinth/v${version}/${path.replace(/^\//, "")}`
-      : `${base}/v${version}/${path.replace(/^\//, "")}`;
+      ? `${base}/modrinth/v${version}/${path.replace(/^\//, '')}`
+      : `${base}/v${version}/${path.replace(/^\//, '')}`
 
   const headers: Record<string, string> = {
-    "User-Agent": "Modrinth/1.0 (https://modrinth.com)",
-    "X-Archon-Request": "true",
-    Vary: "Accept, Origin",
-  };
+    'User-Agent': 'Modrinth/1.0 (https://modrinth.com)',
+    'X-Archon-Request': 'true',
+    Vary: 'Accept, Origin',
+  }
 
   if (!options.bypassAuth) {
-    headers.Authorization = `Bearer ${override?.token ?? authToken}`;
-    headers["Access-Control-Allow-Headers"] = "Authorization";
+    headers.Authorization = `Bearer ${override?.token ?? authToken}`
+    headers['Access-Control-Allow-Headers'] = 'Authorization'
   }
 
-  if (contentType !== "none") {
-    headers["Content-Type"] = contentType;
+  if (contentType !== 'none') {
+    headers['Content-Type'] = contentType
   }
 
-  if (import.meta.client && typeof window !== "undefined") {
-    headers.Origin = window.location.origin;
+  if (import.meta.client && typeof window !== 'undefined') {
+    headers.Origin = window.location.origin
   }
 
-  let attempts = 0;
-  const maxAttempts = (typeof retry === "boolean" ? (retry ? 3 : 1) : retry) + 1;
-  let lastError: Error | null = null;
+  let attempts = 0
+  const maxAttempts = (typeof retry === 'boolean' ? (retry ? 3 : 1) : retry) + 1
+  let lastError: Error | null = null
 
   while (attempts < maxAttempts) {
     try {
@@ -113,31 +113,31 @@ export async function useServersFetch<T>(
         method,
         headers,
         body:
-          body && contentType === "application/json" ? JSON.stringify(body) : (body ?? undefined),
+          body && contentType === 'application/json' ? JSON.stringify(body) : (body ?? undefined),
         timeout: 10000,
-      });
+      })
 
-      failureCount.value = 0;
-      return response;
+      failureCount.value = 0
+      return response
     } catch (error) {
-      lastError = error as Error;
-      attempts++;
+      lastError = error as Error
+      attempts++
 
       if (error instanceof FetchError) {
-        const statusCode = error.response?.status;
-        const statusText = error.response?.statusText || "Unknown error";
+        const statusCode = error.response?.status
+        const statusText = error.response?.statusText || 'Unknown error'
 
         if (statusCode && statusCode >= 500) {
-          failureCount.value++;
-          lastFailureTime.value = now;
+          failureCount.value++
+          lastFailureTime.value = now
         }
 
-        let v1Error: V1ErrorInfo | undefined;
+        let v1Error: V1ErrorInfo | undefined
         if (error.data?.error && error.data?.description) {
           v1Error = {
             context: errorContext,
             ...error.data,
-          };
+          }
         }
 
         const errorMessages: { [key: number]: string } = {
@@ -157,14 +157,14 @@ export async function useServersFetch<T>(
         const message =
           statusCode && statusCode in errorMessages
             ? errorMessages[statusCode]
-            : `HTTP Error: ${statusCode || "unknown"} ${statusText}`;
+            : `HTTP Error: ${statusCode || 'unknown'} ${statusText}`
 
-        const isRetryable = statusCode ? [408, 429].includes(statusCode) : false;
+        const isRetryable = statusCode ? [408, 429].includes(statusCode) : false
         const is5xxRetryable =
-          statusCode && statusCode >= 500 && statusCode < 600 && method === "GET" && attempts === 1;
+          statusCode && statusCode >= 500 && statusCode < 600 && method === 'GET' && attempts === 1
 
         if (!(isRetryable || is5xxRetryable) || attempts >= maxAttempts) {
-          console.error("Fetch error:", error);
+          console.error('Fetch error:', error)
 
           const fetchError = new ModrinthServersFetchError(
             `[Modrinth Servers] ${error.message}`,
@@ -180,43 +180,43 @@ export async function useServersFetch<T>(
           );
         }
 
-        const baseDelay = statusCode && statusCode >= 500 ? 5000 : 1000;
-        const delay = Math.min(baseDelay * Math.pow(2, attempts - 1) + Math.random() * 1000, 15000);
-        console.warn(`Retrying request in ${delay}ms (attempt ${attempts}/${maxAttempts - 1})`);
-        await new Promise((resolve) => setTimeout(resolve, delay));
-        continue;
+        const baseDelay = statusCode && statusCode >= 500 ? 5000 : 1000
+        const delay = Math.min(baseDelay * Math.pow(2, attempts - 1) + Math.random() * 1000, 15000)
+        console.warn(`Retrying request in ${delay}ms (attempt ${attempts}/${maxAttempts - 1})`)
+        await new Promise((resolve) => setTimeout(resolve, delay))
+        continue
       }
 
-      console.error("Unexpected fetch error:", error);
+      console.error('Unexpected fetch error:', error)
       const fetchError = new ModrinthServersFetchError(
-        "[Modrinth Servers] An unexpected error occurred during the fetch operation.",
+        '[Modrinth Servers] An unexpected error occurred during the fetch operation.',
         undefined,
         error as Error,
-      );
+      )
       throw new ModrinthServerError(
-        "Unexpected error during fetch operation",
+        'Unexpected error during fetch operation',
         undefined,
         fetchError,
         module,
-      );
+      )
     }
   }
 
-  console.error("All retry attempts failed:", lastError);
+  console.error('All retry attempts failed:', lastError)
   if (lastError instanceof FetchError) {
-    const statusCode = lastError.response?.status;
+    const statusCode = lastError.response?.status
     const pyroError = new ModrinthServersFetchError(
-      "Maximum retry attempts reached",
+      'Maximum retry attempts reached',
       statusCode,
       lastError,
-    );
-    throw new ModrinthServerError("Maximum retry attempts reached", statusCode, pyroError, module);
+    )
+    throw new ModrinthServerError('Maximum retry attempts reached', statusCode, pyroError, module)
   }
 
   const fetchError = new ModrinthServersFetchError(
-    "Maximum retry attempts reached",
+    'Maximum retry attempts reached',
     undefined,
     lastError || undefined,
-  );
-  throw new ModrinthServerError("Maximum retry attempts reached", undefined, fetchError, module);
+  )
+  throw new ModrinthServerError('Maximum retry attempts reached', undefined, fetchError, module)
 }
diff --git a/apps/frontend/src/composables/tag.js b/apps/frontend/src/composables/tag.js
index e836a0469..cabf783b8 100644
--- a/apps/frontend/src/composables/tag.js
+++ b/apps/frontend/src/composables/tag.js
@@ -1,7 +1,7 @@
-import tags from "~/generated/state.json";
+import tags from '~/generated/state.json'
 
 export const useTags = () =>
-  useState("tags", () => ({
+  useState('tags', () => ({
     categories: tags.categories,
     loaders: tags.loaders,
     gameVersions: tags.gameVersions,
@@ -9,56 +9,56 @@ export const useTags = () =>
     reportTypes: tags.reportTypes,
     projectTypes: [
       {
-        actual: "mod",
-        id: "mod",
-        display: "mod",
+        actual: 'mod',
+        id: 'mod',
+        display: 'mod',
       },
       {
-        actual: "mod",
-        id: "plugin",
-        display: "plugin",
+        actual: 'mod',
+        id: 'plugin',
+        display: 'plugin',
       },
       {
-        actual: "mod",
-        id: "datapack",
-        display: "data pack",
+        actual: 'mod',
+        id: 'datapack',
+        display: 'data pack',
       },
       {
-        actual: "shader",
-        id: "shader",
-        display: "shader",
+        actual: 'shader',
+        id: 'shader',
+        display: 'shader',
       },
       {
-        actual: "resourcepack",
-        id: "resourcepack",
-        display: "resource pack",
+        actual: 'resourcepack',
+        id: 'resourcepack',
+        display: 'resource pack',
       },
       {
-        actual: "modpack",
-        id: "modpack",
-        display: "modpack",
+        actual: 'modpack',
+        id: 'modpack',
+        display: 'modpack',
       },
     ],
     loaderData: {
-      pluginLoaders: ["bukkit", "spigot", "paper", "purpur", "sponge", "folia"],
-      pluginPlatformLoaders: ["bungeecord", "waterfall", "velocity"],
+      pluginLoaders: ['bukkit', 'spigot', 'paper', 'purpur', 'sponge', 'folia'],
+      pluginPlatformLoaders: ['bungeecord', 'waterfall', 'velocity'],
       allPluginLoaders: [
-        "bukkit",
-        "spigot",
-        "paper",
-        "purpur",
-        "sponge",
-        "bungeecord",
-        "waterfall",
-        "velocity",
-        "folia",
+        'bukkit',
+        'spigot',
+        'paper',
+        'purpur',
+        'sponge',
+        'bungeecord',
+        'waterfall',
+        'velocity',
+        'folia',
       ],
-      dataPackLoaders: ["datapack"],
-      modLoaders: ["forge", "fabric", "quilt", "liteloader", "modloader", "rift", "neoforge"],
-      hiddenModLoaders: ["liteloader", "modloader", "rift"],
+      dataPackLoaders: ['datapack'],
+      modLoaders: ['forge', 'fabric', 'quilt', 'liteloader', 'modloader', 'rift', 'neoforge'],
+      hiddenModLoaders: ['liteloader', 'modloader', 'rift'],
     },
-    projectViewModes: ["list", "grid", "gallery"],
-    approvedStatuses: ["approved", "archived", "unlisted", "private"],
-    rejectedStatuses: ["rejected", "withheld"],
-    staffRoles: ["moderator", "admin"],
-  }));
+    projectViewModes: ['list', 'grid', 'gallery'],
+    approvedStatuses: ['approved', 'archived', 'unlisted', 'private'],
+    rejectedStatuses: ['rejected', 'withheld'],
+    staffRoles: ['moderator', 'admin'],
+  }))
diff --git a/apps/frontend/src/composables/use-client-try.ts b/apps/frontend/src/composables/use-client-try.ts
index 697fcae34..afd6ff47e 100644
--- a/apps/frontend/src/composables/use-client-try.ts
+++ b/apps/frontend/src/composables/use-client-try.ts
@@ -1,36 +1,36 @@
-type AsyncFunction<TArgs extends any[], TResult> = (...args: TArgs) => Promise<TResult>;
-type ErrorFunction = (err: any) => void | Promise<void>;
-type VoidFunction = () => void | Promise<void>;
+type AsyncFunction<TArgs extends any[], TResult> = (...args: TArgs) => Promise<TResult>
+type ErrorFunction = (err: any) => void | Promise<void>
+type VoidFunction = () => void | Promise<void>
 
 type useClientTry = <TArgs extends any[], TResult>(
   fn: AsyncFunction<TArgs, TResult>,
   onFail?: ErrorFunction,
   onFinish?: VoidFunction,
-) => (...args: TArgs) => Promise<TResult | undefined>;
+) => (...args: TArgs) => Promise<TResult | undefined>
 
 const defaultOnError: ErrorFunction = (error) => {
   addNotification({
-    group: "main",
-    title: "An error occurred",
-    text: error?.data?.description || error.message || error || "Unknown error",
-    type: "error",
-  });
-};
+    group: 'main',
+    title: 'An error occurred',
+    text: error?.data?.description || error.message || error || 'Unknown error',
+    type: 'error',
+  })
+}
 
 export const useClientTry: useClientTry =
   (fn, onFail = defaultOnError, onFinish) =>
   async (...args) => {
-    startLoading();
+    startLoading()
     try {
-      return await fn(...args);
+      return await fn(...args)
     } catch (err) {
       if (onFail) {
-        await onFail(err);
+        await onFail(err)
       } else {
-        console.error("[CLIENT TRY ERROR]", err);
+        console.error('[CLIENT TRY ERROR]', err)
       }
     } finally {
-      if (onFinish) await onFinish();
-      stopLoading();
+      if (onFinish) await onFinish()
+      stopLoading()
     }
-  };
+  }
diff --git a/apps/frontend/src/composables/user.js b/apps/frontend/src/composables/user.js
index a4764b903..1db5547ae 100644
--- a/apps/frontend/src/composables/user.js
+++ b/apps/frontend/src/composables/user.js
@@ -1,178 +1,178 @@
 export const useUser = async (force = false) => {
-  const user = useState("user", () => {});
+  const user = useState('user', () => {})
 
   if (!user.value || force || (user.value && Date.now() - user.value.lastUpdated > 300000)) {
-    user.value = await initUser();
+    user.value = await initUser()
   }
 
-  return user;
-};
+  return user
+}
 
 export const initUser = async () => {
-  const auth = (await useAuth()).value;
+  const auth = (await useAuth()).value
 
   const user = {
     collections: [],
     follows: [],
     subscriptions: [],
     lastUpdated: 0,
-  };
+  }
 
   if (auth.user && auth.user.id) {
     try {
       const headers = {
         Authorization: auth.token,
-      };
+      }
 
       const [follows, collections, subscriptions] = await Promise.all([
         useBaseFetch(`user/${auth.user.id}/follows`, { headers }, true),
         useBaseFetch(`user/${auth.user.id}/collections`, { apiVersion: 3, headers }, true),
         useBaseFetch(`billing/subscriptions`, { internal: true, headers }, true),
-      ]);
+      ])
 
-      user.collections = collections;
-      user.follows = follows;
-      user.subscriptions = subscriptions;
-      user.lastUpdated = Date.now();
+      user.collections = collections
+      user.follows = follows
+      user.subscriptions = subscriptions
+      user.lastUpdated = Date.now()
     } catch (err) {
-      console.error(err);
+      console.error(err)
     }
   }
 
-  return user;
-};
+  return user
+}
 
 export const initUserCollections = async () => {
-  const auth = (await useAuth()).value;
-  const user = (await useUser()).value;
+  const auth = (await useAuth()).value
+  const user = (await useUser()).value
 
   if (auth.user && auth.user.id) {
     try {
-      user.collections = await useBaseFetch(`user/${auth.user.id}/collections`, { apiVersion: 3 });
+      user.collections = await useBaseFetch(`user/${auth.user.id}/collections`, { apiVersion: 3 })
     } catch (err) {
-      console.error(err);
+      console.error(err)
     }
   }
-};
+}
 
 export const initUserFollows = async () => {
-  const auth = (await useAuth()).value;
-  const user = (await useUser()).value;
+  const auth = (await useAuth()).value
+  const user = (await useUser()).value
 
   if (auth.user && auth.user.id) {
     try {
-      user.follows = await useBaseFetch(`user/${auth.user.id}/follows`);
+      user.follows = await useBaseFetch(`user/${auth.user.id}/follows`)
     } catch (err) {
-      console.error(err);
+      console.error(err)
     }
   }
-};
+}
 
 export const initUserProjects = async () => {
-  const auth = (await useAuth()).value;
-  const user = (await useUser()).value;
+  const auth = (await useAuth()).value
+  const user = (await useUser()).value
 
   if (auth.user && auth.user.id) {
     try {
-      user.projects = await useBaseFetch(`user/${auth.user.id}/projects`);
+      user.projects = await useBaseFetch(`user/${auth.user.id}/projects`)
     } catch (err) {
-      console.error(err);
+      console.error(err)
     }
   }
-};
+}
 
 export const userCollectProject = async (collection, projectId) => {
-  const user = (await useUser()).value;
-  await initUserCollections();
+  const user = (await useUser()).value
+  await initUserCollections()
 
-  const collectionId = collection.id;
+  const collectionId = collection.id
 
-  const latestCollection = user.collections.find((x) => x.id === collectionId);
+  const latestCollection = user.collections.find((x) => x.id === collectionId)
   if (!latestCollection) {
-    throw new Error("This collection was not found. Has it been deleted?");
+    throw new Error('This collection was not found. Has it been deleted?')
   }
 
-  const add = !latestCollection.projects.includes(projectId);
+  const add = !latestCollection.projects.includes(projectId)
   const projects = add
     ? [...latestCollection.projects, projectId]
-    : [...latestCollection.projects].filter((x) => x !== projectId);
+    : [...latestCollection.projects].filter((x) => x !== projectId)
 
-  const idx = user.collections.findIndex((x) => x.id === latestCollection.id);
+  const idx = user.collections.findIndex((x) => x.id === latestCollection.id)
   if (idx >= 0) {
-    user.collections[idx].projects = projects;
+    user.collections[idx].projects = projects
   }
 
   await useBaseFetch(`collection/${collection.id}`, {
-    method: "PATCH",
+    method: 'PATCH',
     body: {
       new_projects: projects,
     },
     apiVersion: 3,
-  });
-};
+  })
+}
 
 export const userFollowProject = async (project) => {
-  const user = (await useUser()).value;
+  const user = (await useUser()).value
 
   if (user.follows.find((x) => x.id === project.id)) {
-    user.follows = user.follows.filter((x) => x.id !== project.id);
-    project.followers--;
+    user.follows = user.follows.filter((x) => x.id !== project.id)
+    project.followers--
 
     setTimeout(() => {
       useBaseFetch(`project/${project.id}/follow`, {
-        method: "DELETE",
-      });
-    });
+        method: 'DELETE',
+      })
+    })
   } else {
-    user.follows = user.follows.concat(project);
-    project.followers++;
+    user.follows = user.follows.concat(project)
+    project.followers++
 
     setTimeout(() => {
       useBaseFetch(`project/${project.id}/follow`, {
-        method: "POST",
-      });
-    });
+        method: 'POST',
+      })
+    })
   }
-};
+}
 export const resendVerifyEmail = async () => {
-  const app = useNuxtApp();
+  const app = useNuxtApp()
 
-  startLoading();
+  startLoading()
   try {
-    await useBaseFetch("auth/email/resend_verify", {
-      method: "POST",
-    });
+    await useBaseFetch('auth/email/resend_verify', {
+      method: 'POST',
+    })
 
-    const auth = await useAuth();
+    const auth = await useAuth()
     app.$notify({
-      group: "main",
-      title: "Email sent",
+      group: 'main',
+      title: 'Email sent',
       text: `An email with a link to verify your account has been sent to ${auth.value.user.email}.`,
-      type: "success",
-    });
+      type: 'success',
+    })
   } catch (err) {
     app.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data.description,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
-};
+  stopLoading()
+}
 
 export const logout = async () => {
-  startLoading();
-  const auth = await useAuth();
+  startLoading()
+  const auth = await useAuth()
   try {
     await useBaseFetch(`session/${auth.value.token}`, {
-      method: "DELETE",
-    });
+      method: 'DELETE',
+    })
   } catch {
     /* empty */
   }
 
-  await useAuth("none");
-  useCookie("auth-token").value = null;
-  stopLoading();
-};
+  await useAuth('none')
+  useCookie('auth-token').value = null
+  stopLoading()
+}
diff --git a/apps/frontend/src/composables/util.ts b/apps/frontend/src/composables/util.ts
index 5bf1f4dd8..58d72cdb7 100644
--- a/apps/frontend/src/composables/util.ts
+++ b/apps/frontend/src/composables/util.ts
@@ -1,12 +1,12 @@
 export const useNotificationRightwards = () => {
-  const isVisible = useState("moderation-checklist-notifications", () => false);
+  const isVisible = useState('moderation-checklist-notifications', () => false)
 
   const setVisible = (visible: boolean) => {
-    isVisible.value = visible;
-  };
+    isVisible.value = visible
+  }
 
   return {
     isVisible: readonly(isVisible),
     setVisible,
-  };
-};
+  }
+}
diff --git a/apps/frontend/src/composables/vue.ts b/apps/frontend/src/composables/vue.ts
index cf49bc462..89fc0ae95 100644
--- a/apps/frontend/src/composables/vue.ts
+++ b/apps/frontend/src/composables/vue.ts
@@ -4,11 +4,11 @@
  * @returns A computed reference that changes when component becomes mounted or unmounted.
  */
 export function useMountedValue<T>(getter: (isMounted: boolean) => T) {
-  const mounted = ref(getCurrentInstance()?.isMounted ?? false);
+  const mounted = ref(getCurrentInstance()?.isMounted ?? false)
 
-  onMounted(() => (mounted.value = true));
+  onMounted(() => (mounted.value = true))
 
-  onUnmounted(() => (mounted.value = false));
+  onUnmounted(() => (mounted.value = false))
 
-  return computed(() => getter(mounted.value));
+  return computed(() => getter(mounted.value))
 }
diff --git a/apps/frontend/src/error.vue b/apps/frontend/src/error.vue
index 6d010f34b..b6e4b7556 100644
--- a/apps/frontend/src/error.vue
+++ b/apps/frontend/src/error.vue
@@ -49,12 +49,12 @@
 </template>
 
 <script setup>
-import { SadRinthbot } from "@modrinth/assets";
-import { defineMessage, useVIntl } from "@vintl/vintl";
+import { SadRinthbot } from '@modrinth/assets'
+import { defineMessage, useVIntl } from '@vintl/vintl'
 
-import Logo404 from "~/assets/images/404.svg";
+import Logo404 from '~/assets/images/404.svg'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 const props = defineProps({
   error: {
@@ -62,73 +62,73 @@ const props = defineProps({
     default() {
       return {
         statusCode: 1000,
-        message: "Unknown error",
-      };
+        message: 'Unknown error',
+      }
     },
   },
-});
+})
 
-const is404 = computed(() => props.error.statusCode === 404);
+const is404 = computed(() => props.error.statusCode === 404)
 const errorMessages = computed(
   () =>
     routeMessages.find((x) => x.match(route))?.messages[props.error.statusCode] ??
     messages[props.error.statusCode] ??
     messages.default,
-);
+)
 
-const route = useRoute();
+const route = useRoute()
 
 watch(route, () => {
-  console.log(route);
-});
+  console.log(route)
+})
 
 const messages = {
   404: {
     title: defineMessage({
-      id: "error.generic.404.title",
-      defaultMessage: "Page not found",
+      id: 'error.generic.404.title',
+      defaultMessage: 'Page not found',
     }),
     subtitle: defineMessage({
-      id: "error.generic.404.subtitle",
+      id: 'error.generic.404.subtitle',
       defaultMessage: "The page you were looking for doesn't seem to exist.",
     }),
   },
   default: {
     title: defineMessage({
-      id: "error.generic.default.title",
-      defaultMessage: "Uh oh!",
+      id: 'error.generic.default.title',
+      defaultMessage: 'Uh oh!',
     }),
     subtitle: defineMessage({
-      id: "error.generic.default.subtitle",
-      defaultMessage: "Something went wrong.",
+      id: 'error.generic.default.subtitle',
+      defaultMessage: 'Something went wrong.',
     }),
     list_title: defineMessage({
-      id: "error.generic.default.list_title",
-      defaultMessage: "Please try again in a few minutes.",
+      id: 'error.generic.default.list_title',
+      defaultMessage: 'Please try again in a few minutes.',
     }),
     list_items: [
       defineMessage({
-        id: "error.generic.default.list_item.1",
-        defaultMessage: "Check if Modrinth is down on our <status-link>Status page</status-link>.",
+        id: 'error.generic.default.list_item.1',
+        defaultMessage: 'Check if Modrinth is down on our <status-link>Status page</status-link>.',
       }),
       defineMessage({
-        id: "error.generic.default.list_item.2",
+        id: 'error.generic.default.list_item.2',
         defaultMessage:
-          "If this keeps happening, you may want to let the Modrinth Team know by joining our <discord-link>Discord server</discord-link>.",
+          'If this keeps happening, you may want to let the Modrinth Team know by joining our <discord-link>Discord server</discord-link>.',
       }),
     ],
   },
-};
+}
 
 const PROJECT_PATH_PREFIXES = [
-  "/mod/",
-  "/datapack/",
-  "/resourcepack/",
-  "/plugin/",
-  "/shader/",
-  "/modpack/",
-  "/project/",
-];
+  '/mod/',
+  '/datapack/',
+  '/resourcepack/',
+  '/plugin/',
+  '/shader/',
+  '/modpack/',
+  '/project/',
+]
 
 const routeMessages = [
   {
@@ -136,25 +136,25 @@ const routeMessages = [
     messages: {
       404: {
         title: defineMessage({
-          id: "error.project.404.title",
-          defaultMessage: "Project not found",
+          id: 'error.project.404.title',
+          defaultMessage: 'Project not found',
         }),
         list_title: defineMessage({
-          id: "error.project.404.list_title",
-          defaultMessage: "Why?",
+          id: 'error.project.404.list_title',
+          defaultMessage: 'Why?',
         }),
         list_items: [
           defineMessage({
-            id: "error.project.404.list_item.1",
+            id: 'error.project.404.list_item.1',
             defaultMessage: "You may have mistyped the project's URL.",
           }),
           defineMessage({
-            id: "error.project.404.list_item.2",
+            id: 'error.project.404.list_item.2',
             defaultMessage:
               "The project's owner may have changed the URL, made the project private, or deleted it.",
           }),
           defineMessage({
-            id: "error.project.404.list_item.3",
+            id: 'error.project.404.list_item.3',
             defaultMessage:
               "The project may have been taken down by Modrinth's moderation team for violating our <tou-link>Terms of Use</tou-link>.",
           }),
@@ -163,28 +163,28 @@ const routeMessages = [
     },
   },
   {
-    match: (route) => route.path.startsWith("/user/"),
+    match: (route) => route.path.startsWith('/user/'),
     messages: {
       404: {
         title: defineMessage({
-          id: "error.user.404.title",
-          defaultMessage: "User not found",
+          id: 'error.user.404.title',
+          defaultMessage: 'User not found',
         }),
         list_title: defineMessage({
-          id: "error.user.404.list_title",
-          defaultMessage: "Why?",
+          id: 'error.user.404.list_title',
+          defaultMessage: 'Why?',
         }),
         list_items: [
           defineMessage({
-            id: "error.user.404.list_item.1",
+            id: 'error.user.404.list_item.1',
             defaultMessage: "You may have mistyped the user's username.",
           }),
           defineMessage({
-            id: "error.user.404.list_item.2",
-            defaultMessage: "The user may have changed their username or deleted their account.",
+            id: 'error.user.404.list_item.2',
+            defaultMessage: 'The user may have changed their username or deleted their account.',
           }),
           defineMessage({
-            id: "error.user.404.list_item.3",
+            id: 'error.user.404.list_item.3',
             defaultMessage:
               "The user's account may have been terminated for violating Modrinth's <tou-link>Terms of Use</tou-link>.",
           }),
@@ -193,28 +193,28 @@ const routeMessages = [
     },
   },
   {
-    match: (route) => route.path.startsWith("/organization/"),
+    match: (route) => route.path.startsWith('/organization/'),
     messages: {
       404: {
         title: defineMessage({
-          id: "error.organization.404.title",
-          defaultMessage: "Organization not found",
+          id: 'error.organization.404.title',
+          defaultMessage: 'Organization not found',
         }),
         list_title: defineMessage({
-          id: "error.organization.404.list_title",
-          defaultMessage: "Why?",
+          id: 'error.organization.404.list_title',
+          defaultMessage: 'Why?',
         }),
         list_items: [
           defineMessage({
-            id: "error.organization.404.list_item.1",
+            id: 'error.organization.404.list_item.1',
             defaultMessage: "You may have mistyped the organization's URL.",
           }),
           defineMessage({
-            id: "error.organization.404.list_item.2",
+            id: 'error.organization.404.list_item.2',
             defaultMessage: "The organization's owner may have changed the URL or deleted it.",
           }),
           defineMessage({
-            id: "error.organization.404.list_item.3",
+            id: 'error.organization.404.list_item.3',
             defaultMessage:
               "The organization may have been removed by Modrinth's moderation team for violating our <tou-link>Terms of Use</tou-link>.",
           }),
@@ -223,28 +223,28 @@ const routeMessages = [
     },
   },
   {
-    match: (route) => route.path.startsWith("/collection/"),
+    match: (route) => route.path.startsWith('/collection/'),
     messages: {
       404: {
         title: defineMessage({
-          id: "error.collection.404.title",
-          defaultMessage: "Collection not found",
+          id: 'error.collection.404.title',
+          defaultMessage: 'Collection not found',
         }),
         list_title: defineMessage({
-          id: "error.collection.404.list_title",
-          defaultMessage: "Why?",
+          id: 'error.collection.404.list_title',
+          defaultMessage: 'Why?',
         }),
         list_items: [
           defineMessage({
-            id: "error.collection.404.list_item.1",
+            id: 'error.collection.404.list_item.1',
             defaultMessage: "You may have mistyped the collection's URL.",
           }),
           defineMessage({
-            id: "error.collection.404.list_item.2",
-            defaultMessage: "The collection may be private.",
+            id: 'error.collection.404.list_item.2',
+            defaultMessage: 'The collection may be private.',
           }),
           defineMessage({
-            id: "error.collection.404.list_item.3",
+            id: 'error.collection.404.list_item.3',
             defaultMessage:
               "The collection may have been taken down by Modrinth's moderation team for violating our <tou-link>Terms of Use</tou-link>.",
           }),
@@ -252,7 +252,7 @@ const routeMessages = [
       },
     },
   },
-];
+]
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/helpers/events.ts b/apps/frontend/src/helpers/events.ts
index 997108780..901676ea9 100644
--- a/apps/frontend/src/helpers/events.ts
+++ b/apps/frontend/src/helpers/events.ts
@@ -4,7 +4,7 @@
  * @returns Whether any of the modifier keys is pressed.
  */
 export function isModifierKeyDown(
-  e: Pick<KeyboardEvent, "ctrlKey" | "altKey" | "metaKey" | "shiftKey">,
+  e: Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'metaKey' | 'shiftKey'>,
 ) {
-  return e.ctrlKey || e.altKey || e.metaKey || e.shiftKey;
+  return e.ctrlKey || e.altKey || e.metaKey || e.shiftKey
 }
diff --git a/apps/frontend/src/helpers/fileUtils.js b/apps/frontend/src/helpers/fileUtils.js
index 3f97618a8..11e23b8a8 100644
--- a/apps/frontend/src/helpers/fileUtils.js
+++ b/apps/frontend/src/helpers/fileUtils.js
@@ -1,32 +1,32 @@
-import { formatBytes } from "@modrinth/utils";
+import { formatBytes } from '@modrinth/utils'
 
 export const fileIsValid = (file, validationOptions) => {
-  const { maxSize, alertOnInvalid } = validationOptions;
+  const { maxSize, alertOnInvalid } = validationOptions
   if (maxSize !== null && maxSize !== undefined && file.size > maxSize) {
     if (alertOnInvalid) {
-      alert(`File ${file.name} is too big! Must be less than ${formatBytes(maxSize)}`);
+      alert(`File ${file.name} is too big! Must be less than ${formatBytes(maxSize)}`)
     }
-    return false;
+    return false
   }
 
-  return true;
-};
+  return true
+}
 
 export const acceptFileFromProjectType = (projectType) => {
   switch (projectType) {
-    case "mod":
-      return ".jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip";
-    case "plugin":
-      return ".jar,.zip,application/java-archive,application/x-java-archive,application/zip";
-    case "resourcepack":
-      return ".zip,application/zip";
-    case "shader":
-      return ".zip,application/zip";
-    case "datapack":
-      return ".zip,application/zip";
-    case "modpack":
-      return ".mrpack,application/x-modrinth-modpack+zip,application/zip";
+    case 'mod':
+      return '.jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip'
+    case 'plugin':
+      return '.jar,.zip,application/java-archive,application/x-java-archive,application/zip'
+    case 'resourcepack':
+      return '.zip,application/zip'
+    case 'shader':
+      return '.zip,application/zip'
+    case 'datapack':
+      return '.zip,application/zip'
+    case 'modpack':
+      return '.mrpack,application/x-modrinth-modpack+zip,application/zip'
     default:
-      return "*";
+      return '*'
   }
-};
+}
diff --git a/apps/frontend/src/helpers/highlight.js b/apps/frontend/src/helpers/highlight.js
index cd281efee..4949e2a62 100644
--- a/apps/frontend/src/helpers/highlight.js
+++ b/apps/frontend/src/helpers/highlight.js
@@ -1,51 +1,51 @@
 // Configs
-import { configuredXss, md } from "@modrinth/utils";
-import hljs from "highlight.js/lib/core";
-import gradle from "highlight.js/lib/languages/gradle";
+import { configuredXss, md } from '@modrinth/utils'
+import hljs from 'highlight.js/lib/core'
+import gradle from 'highlight.js/lib/languages/gradle'
 // Coding
-import groovy from "highlight.js/lib/languages/groovy";
-import ini from "highlight.js/lib/languages/ini";
-import java from "highlight.js/lib/languages/java";
+import groovy from 'highlight.js/lib/languages/groovy'
+import ini from 'highlight.js/lib/languages/ini'
+import java from 'highlight.js/lib/languages/java'
 // Scripting
-import javascript from "highlight.js/lib/languages/javascript";
-import json from "highlight.js/lib/languages/json";
-import kotlin from "highlight.js/lib/languages/kotlin";
-import lua from "highlight.js/lib/languages/lua";
-import properties from "highlight.js/lib/languages/properties";
-import python from "highlight.js/lib/languages/python";
-import scala from "highlight.js/lib/languages/scala";
-import xml from "highlight.js/lib/languages/xml";
-import yaml from "highlight.js/lib/languages/yaml";
+import javascript from 'highlight.js/lib/languages/javascript'
+import json from 'highlight.js/lib/languages/json'
+import kotlin from 'highlight.js/lib/languages/kotlin'
+import lua from 'highlight.js/lib/languages/lua'
+import properties from 'highlight.js/lib/languages/properties'
+import python from 'highlight.js/lib/languages/python'
+import scala from 'highlight.js/lib/languages/scala'
+import xml from 'highlight.js/lib/languages/xml'
+import yaml from 'highlight.js/lib/languages/yaml'
 
 /* REGISTRATION */
 // Scripting
-hljs.registerLanguage("javascript", javascript);
-hljs.registerLanguage("python", python);
-hljs.registerLanguage("lua", lua);
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('lua', lua)
 // Coding
-hljs.registerLanguage("java", java);
-hljs.registerLanguage("kotlin", kotlin);
-hljs.registerLanguage("scala", scala);
-hljs.registerLanguage("groovy", groovy);
+hljs.registerLanguage('java', java)
+hljs.registerLanguage('kotlin', kotlin)
+hljs.registerLanguage('scala', scala)
+hljs.registerLanguage('groovy', groovy)
 // Configs
-hljs.registerLanguage("gradle", gradle);
-hljs.registerLanguage("json", json);
-hljs.registerLanguage("ini", ini);
-hljs.registerLanguage("yaml", yaml);
-hljs.registerLanguage("xml", xml);
-hljs.registerLanguage("properties", properties);
+hljs.registerLanguage('gradle', gradle)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('ini', ini)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('properties', properties)
 
 /* ALIASES */
 // Scripting
-hljs.registerAliases(["js"], { languageName: "javascript" });
-hljs.registerAliases(["py"], { languageName: "python" });
+hljs.registerAliases(['js'], { languageName: 'javascript' })
+hljs.registerAliases(['py'], { languageName: 'python' })
 // Coding
-hljs.registerAliases(["kt"], { languageName: "kotlin" });
+hljs.registerAliases(['kt'], { languageName: 'kotlin' })
 // Configs
-hljs.registerAliases(["json5"], { languageName: "json" });
-hljs.registerAliases(["toml"], { languageName: "ini" });
-hljs.registerAliases(["yml"], { languageName: "yaml" });
-hljs.registerAliases(["html", "htm", "xhtml", "mcui", "fxml"], { languageName: "xml" });
+hljs.registerAliases(['json5'], { languageName: 'json' })
+hljs.registerAliases(['toml'], { languageName: 'ini' })
+hljs.registerAliases(['yml'], { languageName: 'yaml' })
+hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], { languageName: 'xml' })
 
 export const renderHighlightedString = (string) =>
   configuredXss.process(
@@ -53,13 +53,13 @@ export const renderHighlightedString = (string) =>
       highlight: function (str, lang) {
         if (lang && hljs.getLanguage(lang)) {
           try {
-            return hljs.highlight(str, { language: lang }).value;
+            return hljs.highlight(str, { language: lang }).value
           } catch {
             /* empty */
           }
         }
 
-        return "";
+        return ''
       },
     }).render(string),
-  );
+  )
diff --git a/apps/frontend/src/helpers/infer.js b/apps/frontend/src/helpers/infer.js
index 5de8914d5..e113ec0b0 100644
--- a/apps/frontend/src/helpers/infer.js
+++ b/apps/frontend/src/helpers/infer.js
@@ -1,230 +1,222 @@
-import { parse as parseTOML } from "@ltd/j-toml";
-import yaml from "js-yaml";
-import JSZip from "jszip";
-import { satisfies } from "semver";
+import { parse as parseTOML } from '@ltd/j-toml'
+import yaml from 'js-yaml'
+import JSZip from 'jszip'
+import { satisfies } from 'semver'
 
 export const inferVersionInfo = async function (rawFile, project, gameVersions) {
   function versionType(number) {
-    if (number.includes("alpha")) {
-      return "alpha";
+    if (number.includes('alpha')) {
+      return 'alpha'
     } else if (
-      number.includes("beta") ||
+      number.includes('beta') ||
       number.match(/[^A-z](rc)[^A-z]/) || // includes `rc`
       number.match(/[^A-z](pre)[^A-z]/) // includes `pre`
     ) {
-      return "beta";
+      return 'beta'
     } else {
-      return "release";
+      return 'release'
     }
   }
 
   function getGameVersionsMatchingSemverRange(range, gameVersions) {
     if (!range) {
-      return [];
+      return []
     }
-    const ranges = Array.isArray(range) ? range : [range];
+    const ranges = Array.isArray(range) ? range : [range]
     return gameVersions.filter((version) => {
-      const semverVersion = version.split(".").length === 2 ? `${version}.0` : version; // add patch version if missing (e.g. 1.16 -> 1.16.0)
-      return ranges.some((v) => satisfies(semverVersion, v));
-    });
+      const semverVersion = version.split('.').length === 2 ? `${version}.0` : version // add patch version if missing (e.g. 1.16 -> 1.16.0)
+      return ranges.some((v) => satisfies(semverVersion, v))
+    })
   }
 
   function getGameVersionsMatchingMavenRange(range, gameVersions) {
     if (!range) {
-      return [];
+      return []
     }
-    const ranges = [];
+    const ranges = []
 
-    while (range.startsWith("[") || range.startsWith("(")) {
-      let index = range.indexOf(")");
-      const index2 = range.indexOf("]");
+    while (range.startsWith('[') || range.startsWith('(')) {
+      let index = range.indexOf(')')
+      const index2 = range.indexOf(']')
       if (index === -1 || (index2 !== -1 && index2 < index)) {
-        index = index2;
+        index = index2
       }
-      if (index === -1) break;
-      ranges.push(range.substring(0, index + 1));
-      range = range.substring(index + 1).trim();
-      if (range.startsWith(",")) {
-        range = range.substring(1).trim();
+      if (index === -1) break
+      ranges.push(range.substring(0, index + 1))
+      range = range.substring(index + 1).trim()
+      if (range.startsWith(',')) {
+        range = range.substring(1).trim()
       }
     }
 
     if (range) {
-      ranges.push(range);
+      ranges.push(range)
     }
 
-    const LESS_THAN_EQUAL = /^\(,(.*)]$/;
-    const LESS_THAN = /^\(,(.*)\)$/;
-    const EQUAL = /^\[(.*)]$/;
-    const GREATER_THAN_EQUAL = /^\[(.*),\)$/;
-    const GREATER_THAN = /^\((.*),\)$/;
-    const BETWEEN = /^\((.*),(.*)\)$/;
-    const BETWEEN_EQUAL = /^\[(.*),(.*)]$/;
-    const BETWEEN_LESS_THAN_EQUAL = /^\((.*),(.*)]$/;
-    const BETWEEN_GREATER_THAN_EQUAL = /^\[(.*),(.*)\)$/;
+    const LESS_THAN_EQUAL = /^\(,(.*)]$/
+    const LESS_THAN = /^\(,(.*)\)$/
+    const EQUAL = /^\[(.*)]$/
+    const GREATER_THAN_EQUAL = /^\[(.*),\)$/
+    const GREATER_THAN = /^\((.*),\)$/
+    const BETWEEN = /^\((.*),(.*)\)$/
+    const BETWEEN_EQUAL = /^\[(.*),(.*)]$/
+    const BETWEEN_LESS_THAN_EQUAL = /^\((.*),(.*)]$/
+    const BETWEEN_GREATER_THAN_EQUAL = /^\[(.*),(.*)\)$/
 
-    const semverRanges = [];
+    const semverRanges = []
 
     for (const range of ranges) {
-      let result;
+      let result
       if ((result = range.match(LESS_THAN_EQUAL))) {
-        semverRanges.push(`<=${result[1]}`);
+        semverRanges.push(`<=${result[1]}`)
       } else if ((result = range.match(LESS_THAN))) {
-        semverRanges.push(`<${result[1]}`);
+        semverRanges.push(`<${result[1]}`)
       } else if ((result = range.match(EQUAL))) {
-        semverRanges.push(`${result[1]}`);
+        semverRanges.push(`${result[1]}`)
       } else if ((result = range.match(GREATER_THAN_EQUAL))) {
-        semverRanges.push(`>=${result[1]}`);
+        semverRanges.push(`>=${result[1]}`)
       } else if ((result = range.match(GREATER_THAN))) {
-        semverRanges.push(`>${result[1]}`);
+        semverRanges.push(`>${result[1]}`)
       } else if ((result = range.match(BETWEEN))) {
-        semverRanges.push(`>${result[1]} <${result[2]}`);
+        semverRanges.push(`>${result[1]} <${result[2]}`)
       } else if ((result = range.match(BETWEEN_EQUAL))) {
-        semverRanges.push(`>=${result[1]} <=${result[2]}`);
+        semverRanges.push(`>=${result[1]} <=${result[2]}`)
       } else if ((result = range.match(BETWEEN_LESS_THAN_EQUAL))) {
-        semverRanges.push(`>${result[1]} <=${result[2]}`);
+        semverRanges.push(`>${result[1]} <=${result[2]}`)
       } else if ((result = range.match(BETWEEN_GREATER_THAN_EQUAL))) {
-        semverRanges.push(`>=${result[1]} <${result[2]}`);
+        semverRanges.push(`>=${result[1]} <${result[2]}`)
       }
     }
-    return getGameVersionsMatchingSemverRange(semverRanges, gameVersions);
+    return getGameVersionsMatchingSemverRange(semverRanges, gameVersions)
   }
 
   const simplifiedGameVersions = gameVersions
-    .filter((it) => it.version_type === "release")
-    .map((it) => it.version);
+    .filter((it) => it.version_type === 'release')
+    .map((it) => it.version)
 
   const inferFunctions = {
     // NeoForge
-    "META-INF/neoforge.mods.toml": (file) => {
-      const metadata = parseTOML(file, { joiner: "\n" });
+    'META-INF/neoforge.mods.toml': (file) => {
+      const metadata = parseTOML(file, { joiner: '\n' })
       if (!metadata.mods || metadata.mods.length === 0) {
-        return {};
+        return {}
       }
 
       const neoForgeDependency = Object.values(metadata.dependencies)
         .flat()
-        .find((dependency) => dependency.modId === "neoforge");
+        .find((dependency) => dependency.modId === 'neoforge')
       if (!neoForgeDependency) {
-        return {};
+        return {}
       }
 
       // https://docs.neoforged.net/docs/gettingstarted/versioning/#neoforge
       const mcVersionRange = neoForgeDependency.versionRange
-        .replace("-beta", "")
+        .replace('-beta', '')
         .replace(/(\d+)(?:\.(\d+))?(?:\.(\d+)?)?/g, (_match, major, minor) => {
-          return `1.${major}${minor ? "." + minor : ""}`;
-        });
-      const gameVersions = getGameVersionsMatchingMavenRange(
-        mcVersionRange,
-        simplifiedGameVersions,
-      );
+          return `1.${major}${minor ? '.' + minor : ''}`
+        })
+      const gameVersions = getGameVersionsMatchingMavenRange(mcVersionRange, simplifiedGameVersions)
 
-      const versionNum = metadata.mods[0].version;
+      const versionNum = metadata.mods[0].version
       return {
         name: `${project.title} ${versionNum}`,
         version_number: versionNum,
-        loaders: ["neoforge"],
+        loaders: ['neoforge'],
         version_type: versionType(versionNum),
         game_versions: gameVersions,
-      };
+      }
     },
     // Forge 1.13+
-    "META-INF/mods.toml": async (file, zip) => {
-      const metadata = parseTOML(file, { joiner: "\n" });
+    'META-INF/mods.toml': async (file, zip) => {
+      const metadata = parseTOML(file, { joiner: '\n' })
 
       if (metadata.mods && metadata.mods.length > 0) {
-        let versionNum = metadata.mods[0].version;
+        let versionNum = metadata.mods[0].version
 
         // ${file.jarVersion} -> Implementation-Version from manifest
-        const manifestFile = zip.file("META-INF/MANIFEST.MF");
-        if (
-           
-          metadata.mods[0].version.includes("${file.jarVersion}") &&
-          manifestFile !== null
-        ) {
-          const manifestText = await manifestFile.async("text");
-          const regex = /Implementation-Version: (.*)$/m;
-          const match = manifestText.match(regex);
+        const manifestFile = zip.file('META-INF/MANIFEST.MF')
+        if (metadata.mods[0].version.includes('${file.jarVersion}') && manifestFile !== null) {
+          const manifestText = await manifestFile.async('text')
+          const regex = /Implementation-Version: (.*)$/m
+          const match = manifestText.match(regex)
           if (match) {
-             
-            versionNum = versionNum.replace("${file.jarVersion}", match[1]);
+            versionNum = versionNum.replace('${file.jarVersion}', match[1])
           }
         }
 
-        let gameVersions = [];
+        let gameVersions = []
         const mcDependencies = Object.values(metadata.dependencies)
           .flat()
-          .filter((dependency) => dependency.modId === "minecraft");
+          .filter((dependency) => dependency.modId === 'minecraft')
 
         if (mcDependencies.length > 0) {
           gameVersions = getGameVersionsMatchingMavenRange(
             mcDependencies[0].versionRange,
             simplifiedGameVersions,
-          );
+          )
         }
 
         return {
           name: `${project.title} ${versionNum}`,
           version_number: versionNum,
           version_type: versionType(versionNum),
-          loaders: ["forge"],
+          loaders: ['forge'],
           game_versions: gameVersions,
-        };
+        }
       } else {
-        return {};
+        return {}
       }
     },
     // Old Forge
-    "mcmod.info": (file) => {
-      const metadata = JSON.parse(file);
+    'mcmod.info': (file) => {
+      const metadata = JSON.parse(file)
 
       return {
-        name: metadata.version ? `${project.title} ${metadata.version}` : "",
+        name: metadata.version ? `${project.title} ${metadata.version}` : '',
         version_number: metadata.version,
         version_type: versionType(metadata.version),
-        loaders: ["forge"],
+        loaders: ['forge'],
         game_versions: simplifiedGameVersions.filter((version) =>
           version.startsWith(metadata.mcversion),
         ),
-      };
+      }
     },
     // Fabric
-    "fabric.mod.json": (file) => {
-      const metadata = JSON.parse(file);
+    'fabric.mod.json': (file) => {
+      const metadata = JSON.parse(file)
 
       return {
         name: `${project.title} ${metadata.version}`,
         version_number: metadata.version,
-        loaders: ["fabric"],
+        loaders: ['fabric'],
         version_type: versionType(metadata.version),
         game_versions: metadata.depends
           ? getGameVersionsMatchingSemverRange(metadata.depends.minecraft, simplifiedGameVersions)
           : [],
-      };
+      }
     },
     // Quilt
-    "quilt.mod.json": (file) => {
-      const metadata = JSON.parse(file);
+    'quilt.mod.json': (file) => {
+      const metadata = JSON.parse(file)
 
       return {
         name: `${project.title} ${metadata.quilt_loader.version}`,
         version_number: metadata.quilt_loader.version,
-        loaders: ["quilt"],
+        loaders: ['quilt'],
         version_type: versionType(metadata.quilt_loader.version),
         game_versions: metadata.quilt_loader.depends
           ? getGameVersionsMatchingSemverRange(
-              metadata.quilt_loader.depends.find((x) => x.id === "minecraft")
-                ? metadata.quilt_loader.depends.find((x) => x.id === "minecraft").versions
+              metadata.quilt_loader.depends.find((x) => x.id === 'minecraft')
+                ? metadata.quilt_loader.depends.find((x) => x.id === 'minecraft').versions
                 : [],
               simplifiedGameVersions,
             )
           : [],
-      };
+      }
     },
     // Bukkit + Other Forks
-    "plugin.yml": (file) => {
-      const metadata = yaml.load(file);
+    'plugin.yml': (file) => {
+      const metadata = yaml.load(file)
 
       return {
         name: `${project.title} ${metadata.version}`,
@@ -234,65 +226,65 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
         loaders: [],
         game_versions: gameVersions
           .filter(
-            (x) => x.version.startsWith(metadata["api-version"]) && x.version_type === "release",
+            (x) => x.version.startsWith(metadata['api-version']) && x.version_type === 'release',
           )
           .map((x) => x.version),
-      };
+      }
     },
     // Paper 1.19.3+
-    "paper-plugin.yml": (file) => {
-      const metadata = yaml.load(file);
+    'paper-plugin.yml': (file) => {
+      const metadata = yaml.load(file)
 
       return {
         name: `${project.title} ${metadata.version}`,
         version_number: metadata.version,
         version_type: versionType(metadata.version),
-        loaders: ["paper"],
+        loaders: ['paper'],
         game_versions: gameVersions
           .filter(
-            (x) => x.version.startsWith(metadata["api-version"]) && x.version_type === "release",
+            (x) => x.version.startsWith(metadata['api-version']) && x.version_type === 'release',
           )
           .map((x) => x.version),
-      };
+      }
     },
     // Bungeecord + Waterfall
-    "bungee.yml": (file) => {
-      const metadata = yaml.load(file);
+    'bungee.yml': (file) => {
+      const metadata = yaml.load(file)
 
       return {
         name: `${project.title} ${metadata.version}`,
         version_number: metadata.version,
         version_type: versionType(metadata.version),
-        loaders: ["bungeecord"],
-      };
+        loaders: ['bungeecord'],
+      }
     },
     // Velocity
-    "velocity-plugin.json": (file) => {
-      const metadata = JSON.parse(file);
+    'velocity-plugin.json': (file) => {
+      const metadata = JSON.parse(file)
 
       return {
         name: `${project.title} ${metadata.version}`,
         version_number: metadata.version,
         version_type: versionType(metadata.version),
-        loaders: ["velocity"],
-      };
+        loaders: ['velocity'],
+      }
     },
     // Modpacks
-    "modrinth.index.json": (file) => {
-      const metadata = JSON.parse(file);
+    'modrinth.index.json': (file) => {
+      const metadata = JSON.parse(file)
 
-      const loaders = [];
-      if ("forge" in metadata.dependencies) {
-        loaders.push("forge");
+      const loaders = []
+      if ('forge' in metadata.dependencies) {
+        loaders.push('forge')
       }
-      if ("neoforge" in metadata.dependencies) {
-        loaders.push("neoforge");
+      if ('neoforge' in metadata.dependencies) {
+        loaders.push('neoforge')
       }
-      if ("fabric-loader" in metadata.dependencies) {
-        loaders.push("fabric");
+      if ('fabric-loader' in metadata.dependencies) {
+        loaders.push('fabric')
       }
-      if ("quilt-loader" in metadata.dependencies) {
-        loaders.push("quilt");
+      if ('quilt-loader' in metadata.dependencies) {
+        loaders.push('quilt')
       }
 
       return {
@@ -303,199 +295,199 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
         game_versions: gameVersions
           .filter((x) => x.version === metadata.dependencies.minecraft)
           .map((x) => x.version),
-      };
+      }
     },
     // Resource Packs + Data Packs
-    "pack.mcmeta": (file) => {
-      const metadata = JSON.parse(file);
+    'pack.mcmeta': (file) => {
+      const metadata = JSON.parse(file)
 
       function getRange(versionA, versionB) {
-        const startingIndex = gameVersions.findIndex((x) => x.version === versionA);
-        const endingIndex = gameVersions.findIndex((x) => x.version === versionB);
+        const startingIndex = gameVersions.findIndex((x) => x.version === versionA)
+        const endingIndex = gameVersions.findIndex((x) => x.version === versionB)
 
-        const final = [];
-        const filterOnlyRelease = gameVersions[startingIndex].version_type === "release";
+        const final = []
+        const filterOnlyRelease = gameVersions[startingIndex].version_type === 'release'
 
         for (let i = startingIndex; i >= endingIndex; i--) {
-          if (gameVersions[i].version_type === "release" || !filterOnlyRelease) {
-            final.push(gameVersions[i].version);
+          if (gameVersions[i].version_type === 'release' || !filterOnlyRelease) {
+            final.push(gameVersions[i].version)
           }
         }
 
-        return final;
+        return final
       }
 
-      const loaders = [];
-      let newGameVersions = [];
+      const loaders = []
+      let newGameVersions = []
 
-      if (project.actualProjectType === "mod") {
-        loaders.push("datapack");
+      if (project.actualProjectType === 'mod') {
+        loaders.push('datapack')
 
         switch (metadata.pack.pack_format) {
           case 4:
-            newGameVersions = getRange("1.13", "1.14.4");
-            break;
+            newGameVersions = getRange('1.13', '1.14.4')
+            break
           case 5:
-            newGameVersions = getRange("1.15", "1.16.1");
-            break;
+            newGameVersions = getRange('1.15', '1.16.1')
+            break
           case 6:
-            newGameVersions = getRange("1.16.2", "1.16.5");
-            break;
+            newGameVersions = getRange('1.16.2', '1.16.5')
+            break
           case 7:
-            newGameVersions = getRange("1.17", "1.17.1");
-            break;
+            newGameVersions = getRange('1.17', '1.17.1')
+            break
           case 8:
-            newGameVersions = getRange("1.18", "1.18.1");
-            break;
+            newGameVersions = getRange('1.18', '1.18.1')
+            break
           case 9:
-            newGameVersions.push("1.18.2");
-            break;
+            newGameVersions.push('1.18.2')
+            break
           case 10:
-            newGameVersions = getRange("1.19", "1.19.3");
-            break;
+            newGameVersions = getRange('1.19', '1.19.3')
+            break
           case 11:
-            newGameVersions = getRange("23w03a", "23w05a");
-            break;
+            newGameVersions = getRange('23w03a', '23w05a')
+            break
           case 12:
-            newGameVersions.push("1.19.4");
-            break;
+            newGameVersions.push('1.19.4')
+            break
           default:
         }
       }
 
-      if (project.actualProjectType === "resourcepack") {
-        loaders.push("minecraft");
+      if (project.actualProjectType === 'resourcepack') {
+        loaders.push('minecraft')
 
         switch (metadata.pack.pack_format) {
           case 1:
-            newGameVersions = getRange("1.6.1", "1.8.9");
-            break;
+            newGameVersions = getRange('1.6.1', '1.8.9')
+            break
           case 2:
-            newGameVersions = getRange("1.9", "1.10.2");
-            break;
+            newGameVersions = getRange('1.9', '1.10.2')
+            break
           case 3:
-            newGameVersions = getRange("1.11", "1.12.2");
-            break;
+            newGameVersions = getRange('1.11', '1.12.2')
+            break
           case 4:
-            newGameVersions = getRange("1.13", "1.14.4");
-            break;
+            newGameVersions = getRange('1.13', '1.14.4')
+            break
           case 5:
-            newGameVersions = getRange("1.15", "1.16.1");
-            break;
+            newGameVersions = getRange('1.15', '1.16.1')
+            break
           case 6:
-            newGameVersions = getRange("1.16.2", "1.16.5");
-            break;
+            newGameVersions = getRange('1.16.2', '1.16.5')
+            break
           case 7:
-            newGameVersions = getRange("1.17", "1.17.1");
-            break;
+            newGameVersions = getRange('1.17', '1.17.1')
+            break
           case 8:
-            newGameVersions = getRange("1.18", "1.18.2");
-            break;
+            newGameVersions = getRange('1.18', '1.18.2')
+            break
           case 9:
-            newGameVersions = getRange("1.19", "1.19.2");
-            break;
+            newGameVersions = getRange('1.19', '1.19.2')
+            break
           case 11:
-            newGameVersions = getRange("22w42a", "22w44a");
-            break;
+            newGameVersions = getRange('22w42a', '22w44a')
+            break
           case 12:
-            newGameVersions.push("1.19.3");
-            break;
+            newGameVersions.push('1.19.3')
+            break
           case 13:
-            newGameVersions.push("1.19.4");
-            break;
+            newGameVersions.push('1.19.4')
+            break
           case 14:
-            newGameVersions = getRange("23w14a", "23w16a");
-            break;
+            newGameVersions = getRange('23w14a', '23w16a')
+            break
           case 15:
-            newGameVersions = getRange("1.20", "1.20.1");
-            break;
+            newGameVersions = getRange('1.20', '1.20.1')
+            break
           case 16:
-            newGameVersions.push("23w31a");
-            break;
+            newGameVersions.push('23w31a')
+            break
           case 17:
-            newGameVersions = getRange("23w32a", "1.20.2-pre1");
-            break;
+            newGameVersions = getRange('23w32a', '1.20.2-pre1')
+            break
           case 18:
-            newGameVersions.push("1.20.2");
-            break;
+            newGameVersions.push('1.20.2')
+            break
           case 19:
-            newGameVersions.push("23w42a");
-            break;
+            newGameVersions.push('23w42a')
+            break
           case 20:
-            newGameVersions = getRange("23w43a", "23w44a");
-            break;
+            newGameVersions = getRange('23w43a', '23w44a')
+            break
           case 21:
-            newGameVersions = getRange("23w45a", "23w46a");
-            break;
+            newGameVersions = getRange('23w45a', '23w46a')
+            break
           case 22:
-            newGameVersions = getRange("1.20.3", "1.20.4");
-            break;
+            newGameVersions = getRange('1.20.3', '1.20.4')
+            break
           case 24:
-            newGameVersions = getRange("24w03a", "24w04a");
-            break;
+            newGameVersions = getRange('24w03a', '24w04a')
+            break
           case 25:
-            newGameVersions = getRange("24w05a", "24w05b");
-            break;
+            newGameVersions = getRange('24w05a', '24w05b')
+            break
           case 26:
-            newGameVersions = getRange("24w06a", "24w07a");
-            break;
+            newGameVersions = getRange('24w06a', '24w07a')
+            break
           case 28:
-            newGameVersions = getRange("24w09a", "24w10a");
-            break;
+            newGameVersions = getRange('24w09a', '24w10a')
+            break
           case 29:
-            newGameVersions.push("24w11a");
-            break;
+            newGameVersions.push('24w11a')
+            break
           case 30:
-            newGameVersions.push("24w12a");
-            break;
+            newGameVersions.push('24w12a')
+            break
           case 31:
-            newGameVersions = getRange("24w13a", "1.20.5-pre3");
-            break;
+            newGameVersions = getRange('24w13a', '1.20.5-pre3')
+            break
           case 32:
-            newGameVersions = getRange("1.20.5", "1.20.6");
-            break;
+            newGameVersions = getRange('1.20.5', '1.20.6')
+            break
           case 33:
-            newGameVersions = getRange("24w18a", "24w20a");
-            break;
+            newGameVersions = getRange('24w18a', '24w20a')
+            break
           case 34:
-            newGameVersions = getRange("1.21", "1.21.1");
-            break;
+            newGameVersions = getRange('1.21', '1.21.1')
+            break
           case 35:
-            newGameVersions.push("24w33a");
-            break;
+            newGameVersions.push('24w33a')
+            break
           case 36:
-            newGameVersions = getRange("24w34a", "24w35a");
-            break;
+            newGameVersions = getRange('24w34a', '24w35a')
+            break
           case 37:
-            newGameVersions.push("24w36a");
-            break;
+            newGameVersions.push('24w36a')
+            break
           case 38:
-            newGameVersions.push("24w37a");
-            break;
+            newGameVersions.push('24w37a')
+            break
           case 39:
-            newGameVersions = getRange("24w38a", "24w39a");
-            break;
+            newGameVersions = getRange('24w38a', '24w39a')
+            break
           case 40:
-            newGameVersions.push("24w40a");
-            break;
+            newGameVersions.push('24w40a')
+            break
           case 41:
-            newGameVersions = getRange("1.21.2-pre1", "1.21.2-pre2");
-            break;
+            newGameVersions = getRange('1.21.2-pre1', '1.21.2-pre2')
+            break
           case 42:
-            newGameVersions = getRange("1.21.2", "1.21.3");
-            break;
+            newGameVersions = getRange('1.21.2', '1.21.3')
+            break
           case 43:
-            newGameVersions.push("24w44a");
-            break;
+            newGameVersions.push('24w44a')
+            break
           case 44:
-            newGameVersions.push("24w45a");
-            break;
+            newGameVersions.push('24w45a')
+            break
           case 45:
-            newGameVersions.push("24w46a");
-            break;
+            newGameVersions.push('24w46a')
+            break
           case 46:
-            newGameVersions.push("1.21.4");
-            break;
+            newGameVersions.push('1.21.4')
+            break
           default:
         }
       }
@@ -503,20 +495,20 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
       return {
         loaders,
         game_versions: newGameVersions,
-      };
+      }
     },
-  };
+  }
 
-  const zipReader = new JSZip();
+  const zipReader = new JSZip()
 
-  const zip = await zipReader.loadAsync(rawFile);
+  const zip = await zipReader.loadAsync(rawFile)
 
   for (const fileName in inferFunctions) {
-    const file = zip.file(fileName);
+    const file = zip.file(fileName)
 
     if (file !== null) {
-      const text = await file.async("text");
-      return inferFunctions[fileName](text, zip);
+      const text = await file.async('text')
+      return inferFunctions[fileName](text, zip)
     }
   }
-};
+}
diff --git a/apps/frontend/src/helpers/moderation.ts b/apps/frontend/src/helpers/moderation.ts
index 35fb4c49f..fbfdd655b 100644
--- a/apps/frontend/src/helpers/moderation.ts
+++ b/apps/frontend/src/helpers/moderation.ts
@@ -1,4 +1,4 @@
-import type { ExtendedReport, OwnershipTarget } from "@modrinth/moderation";
+import type { ExtendedReport, OwnershipTarget } from '@modrinth/moderation'
 import type {
   Organization,
   Project,
@@ -7,39 +7,39 @@ import type {
   Thread,
   User,
   Version,
-} from "@modrinth/utils";
+} from '@modrinth/utils'
 
 export const useModerationCache = () => ({
-  threads: useState<Map<string, Thread>>("moderation-report-cache-threads", () => new Map()),
-  users: useState<Map<string, User>>("moderation-report-cache-users", () => new Map()),
-  projects: useState<Map<string, Project>>("moderation-report-cache-projects", () => new Map()),
-  versions: useState<Map<string, Version>>("moderation-report-cache-versions", () => new Map()),
-  teams: useState<Map<string, TeamMember[]>>("moderation-report-cache-teams", () => new Map()),
-  orgs: useState<Map<string, Organization>>("moderation-report-cache-orgs", () => new Map()),
-});
+  threads: useState<Map<string, Thread>>('moderation-report-cache-threads', () => new Map()),
+  users: useState<Map<string, User>>('moderation-report-cache-users', () => new Map()),
+  projects: useState<Map<string, Project>>('moderation-report-cache-projects', () => new Map()),
+  versions: useState<Map<string, Version>>('moderation-report-cache-versions', () => new Map()),
+  teams: useState<Map<string, TeamMember[]>>('moderation-report-cache-teams', () => new Map()),
+  orgs: useState<Map<string, Organization>>('moderation-report-cache-orgs', () => new Map()),
+})
 
 // TODO: @AlexTMjugador - backend should do all of these functions.
 export async function enrichReportBatch(reports: Report[]): Promise<ExtendedReport[]> {
-  if (reports.length === 0) return [];
+  if (reports.length === 0) return []
 
-  const cache = useModerationCache();
+  const cache = useModerationCache()
 
   const threadIDs = reports
     .map((r) => r.thread_id)
     .filter(Boolean)
-    .filter((id) => !cache.threads.value.has(id));
+    .filter((id) => !cache.threads.value.has(id))
   const userIDs = [
-    ...reports.filter((r) => r.item_type === "user").map((r) => r.item_id),
+    ...reports.filter((r) => r.item_type === 'user').map((r) => r.item_id),
     ...reports.map((r) => r.reporter),
-  ].filter((id) => !cache.users.value.has(id));
+  ].filter((id) => !cache.users.value.has(id))
   const versionIDs = reports
-    .filter((r) => r.item_type === "version")
+    .filter((r) => r.item_type === 'version')
     .map((r) => r.item_id)
-    .filter((id) => !cache.versions.value.has(id));
+    .filter((id) => !cache.versions.value.has(id))
   const projectIDs = reports
-    .filter((r) => r.item_type === "project")
+    .filter((r) => r.item_type === 'project')
     .map((r) => r.item_id)
-    .filter((id) => !cache.projects.value.has(id));
+    .filter((id) => !cache.projects.value.has(id))
 
   const [newThreads, newVersions, newUsers] = await Promise.all([
     threadIDs.length > 0
@@ -58,41 +58,41 @@ export async function enrichReportBatch(reports: Report[]): Promise<ExtendedRepo
           (ids) => `users?ids=${asEncodedJsonArray(ids)}`,
         ) as Promise<User[]>)
       : Promise.resolve([]),
-  ]);
+  ])
 
-  newThreads.forEach((t) => cache.threads.value.set(t.id, t));
-  newVersions.forEach((v) => cache.versions.value.set(v.id, v));
-  newUsers.forEach((u) => cache.users.value.set(u.id, u));
+  newThreads.forEach((t) => cache.threads.value.set(t.id, t))
+  newVersions.forEach((v) => cache.versions.value.set(v.id, v))
+  newUsers.forEach((u) => cache.users.value.set(u.id, u))
 
-  const allVersions = [...newVersions, ...Array.from(cache.versions.value.values())];
+  const allVersions = [...newVersions, ...Array.from(cache.versions.value.values())]
   const fullProjectIds = new Set([
     ...projectIDs,
     ...allVersions
       .filter((v) => versionIDs.includes(v.id))
       .map((v) => v.project_id)
       .filter(Boolean),
-  ]);
+  ])
 
   const uncachedProjectIds = Array.from(fullProjectIds).filter(
     (id) => !cache.projects.value.has(id),
-  );
+  )
   const newProjects =
     uncachedProjectIds.length > 0
       ? ((await fetchSegmented(
           uncachedProjectIds,
           (ids) => `projects?ids=${asEncodedJsonArray(ids)}`,
         )) as Project[])
-      : [];
+      : []
 
-  newProjects.forEach((p) => cache.projects.value.set(p.id, p));
+  newProjects.forEach((p) => cache.projects.value.set(p.id, p))
 
-  const allProjects = [...newProjects, ...Array.from(cache.projects.value.values())];
+  const allProjects = [...newProjects, ...Array.from(cache.projects.value.values())]
   const teamIds = [...new Set(allProjects.map((p) => p.team).filter(Boolean))].filter(
-    (id) => !cache.teams.value.has(id || "invalid team id"),
-  );
+    (id) => !cache.teams.value.has(id || 'invalid team id'),
+  )
   const orgIds = [...new Set(allProjects.map((p) => p.organization).filter(Boolean))].filter(
     (id) => !cache.orgs.value.has(id),
-  );
+  )
 
   const [newTeams, newOrgs] = await Promise.all([
     teamIds.length > 0
@@ -105,66 +105,66 @@ export async function enrichReportBatch(reports: Report[]): Promise<ExtendedRepo
           apiVersion: 3,
         }) as Promise<Organization[]>)
       : Promise.resolve([]),
-  ]);
+  ])
 
   newTeams.forEach((team) => {
-    if (team.length > 0) cache.teams.value.set(team[0].team_id, team);
-  });
-  newOrgs.forEach((org) => cache.orgs.value.set(org.id, org));
+    if (team.length > 0) cache.teams.value.set(team[0].team_id, team)
+  })
+  newOrgs.forEach((org) => cache.orgs.value.set(org.id, org))
 
   return reports.map((report) => {
-    const thread = cache.threads.value.get(report.thread_id) || ({} as Thread);
+    const thread = cache.threads.value.get(report.thread_id) || ({} as Thread)
     const version =
-      report.item_type === "version" ? cache.versions.value.get(report.item_id) : undefined;
+      report.item_type === 'version' ? cache.versions.value.get(report.item_id) : undefined
 
     const project =
-      report.item_type === "project"
+      report.item_type === 'project'
         ? cache.projects.value.get(report.item_id)
-        : report.item_type === "version" && version
+        : report.item_type === 'version' && version
           ? cache.projects.value.get(version.project_id)
-          : undefined;
+          : undefined
 
-    let target: OwnershipTarget | undefined;
+    let target: OwnershipTarget | undefined
 
-    if (report.item_type === "user") {
-      const targetUser = cache.users.value.get(report.item_id);
+    if (report.item_type === 'user') {
+      const targetUser = cache.users.value.get(report.item_id)
       if (targetUser) {
         target = {
           name: targetUser.username,
           slug: targetUser.username,
           avatar_url: targetUser.avatar_url,
-          type: "user",
-        };
+          type: 'user',
+        }
       }
     } else if (project) {
-      let owner: TeamMember | null = null;
-      let org: Organization | null = null;
+      let owner: TeamMember | null = null
+      let org: Organization | null = null
 
       if (project.team) {
-        const teamMembers = cache.teams.value.get(project.team);
+        const teamMembers = cache.teams.value.get(project.team)
         if (teamMembers) {
-          owner = teamMembers.find((member) => member.role === "Owner") || null;
+          owner = teamMembers.find((member) => member.role === 'Owner') || null
         }
       }
 
       if (project.organization) {
-        org = cache.orgs.value.get(project.organization) || null;
+        org = cache.orgs.value.get(project.organization) || null
       }
 
       if (org) {
         target = {
           name: org.name,
           avatar_url: org.icon_url,
-          type: "organization",
+          type: 'organization',
           slug: org.slug,
-        };
+        }
       } else if (owner) {
         target = {
           name: owner.user.username,
           avatar_url: owner.user.avatar_url,
-          type: "user",
+          type: 'user',
           slug: owner.user.username,
-        };
+        }
       }
     }
 
@@ -173,23 +173,23 @@ export async function enrichReportBatch(reports: Report[]): Promise<ExtendedRepo
       thread,
       reporter_user: cache.users.value.get(report.reporter) || ({} as User),
       project,
-      user: report.item_type === "user" ? cache.users.value.get(report.item_id) : undefined,
+      user: report.item_type === 'user' ? cache.users.value.get(report.item_id) : undefined,
       version,
       target,
-    };
-  });
+    }
+  })
 }
 
 // Doesn't need to be in @modrinth/moderation because it is specific to the frontend.
 export interface ModerationProject {
-  project: any;
-  owner: TeamMember | null;
-  org: Organization | null;
+  project: any
+  owner: TeamMember | null
+  org: Organization | null
 }
 
 export async function enrichProjectBatch(projects: any[]): Promise<ModerationProject[]> {
-  const teamIds = [...new Set(projects.map((p) => p.team_id).filter(Boolean))];
-  const orgIds = [...new Set(projects.map((p) => p.organization).filter(Boolean))];
+  const teamIds = [...new Set(projects.map((p) => p.team_id).filter(Boolean))]
+  const orgIds = [...new Set(projects.map((p) => p.organization).filter(Boolean))]
 
   const [teamsData, orgsData]: [TeamMember[][], Organization[]] = await Promise.all([
     teamIds.length > 0
@@ -200,37 +200,37 @@ export async function enrichProjectBatch(projects: any[]): Promise<ModerationPro
           apiVersion: 3,
         })
       : Promise.resolve([]),
-  ]);
+  ])
 
-  const cache = useModerationCache();
+  const cache = useModerationCache()
 
   teamsData.forEach((team) => {
-    if (team.length > 0) cache.teams.value.set(team[0].team_id, team);
-  });
+    if (team.length > 0) cache.teams.value.set(team[0].team_id, team)
+  })
 
   orgsData.forEach((org: Organization) => {
-    cache.orgs.value.set(org.id, org);
-  });
+    cache.orgs.value.set(org.id, org)
+  })
 
   return projects.map((project) => {
-    let owner: TeamMember | null = null;
-    let org: Organization | null = null;
+    let owner: TeamMember | null = null
+    let org: Organization | null = null
 
     if (project.team_id) {
-      const teamMembers = cache.teams.value.get(project.team_id);
+      const teamMembers = cache.teams.value.get(project.team_id)
       if (teamMembers) {
-        owner = teamMembers.find((member) => member.role === "Owner") || null;
+        owner = teamMembers.find((member) => member.role === 'Owner') || null
       }
     }
 
     if (project.organization) {
-      org = cache.orgs.value.get(project.organization) || null;
+      org = cache.orgs.value.get(project.organization) || null
     }
 
     return {
       project,
       owner,
       org,
-    } as ModerationProject;
-  });
+    } as ModerationProject
+  })
 }
diff --git a/apps/frontend/src/helpers/notifications.ts b/apps/frontend/src/helpers/notifications.ts
index 789a07d30..0cde418e1 100644
--- a/apps/frontend/src/helpers/notifications.ts
+++ b/apps/frontend/src/helpers/notifications.ts
@@ -1,41 +1,41 @@
-import { useNuxtApp } from "#imports";
+import { useNuxtApp } from '#imports'
 
 // TODO: There needs to be a standardized way to get these types, eg; @modrinth/types generated from api schema. Later problem.
-type Project = { id: string };
-type Version = { id: string; project_id: string };
-type Report = { id: string; item_type: "project" | "user" | "version"; item_id: string };
-type Thread = { id: string };
-type User = { id: string };
-type Organization = { id: string };
+type Project = { id: string }
+type Version = { id: string; project_id: string }
+type Report = { id: string; item_type: 'project' | 'user' | 'version'; item_id: string }
+type Thread = { id: string }
+type User = { id: string }
+type Organization = { id: string }
 
 export type NotificationAction = {
-  title: string;
-  action_route: [string, string];
-};
+  title: string
+  action_route: [string, string]
+}
 
 export type NotificationBody = {
-  project_id?: string;
-  version_id?: string;
-  report_id?: string;
-  thread_id?: string;
-  invited_by?: string;
-  organization_id?: string;
-};
+  project_id?: string
+  version_id?: string
+  report_id?: string
+  thread_id?: string
+  invited_by?: string
+  organization_id?: string
+}
 
 export type Notification = {
-  id: string;
-  user_id: string;
-  type: "project_update" | "team_invite" | "status_change" | "moderator_message";
-  title: string;
-  text: string;
-  link: string;
-  read: boolean;
-  created: string;
-  actions: NotificationAction[];
-  body?: NotificationBody;
-  extra_data?: Record<string, unknown>;
-  grouped_notifs?: Notification[];
-};
+  id: string
+  user_id: string
+  type: 'project_update' | 'team_invite' | 'status_change' | 'moderator_message'
+  title: string
+  text: string
+  link: string
+  read: boolean
+  created: string
+  actions: NotificationAction[]
+  body?: NotificationBody
+  extra_data?: Record<string, unknown>
+  grouped_notifs?: Notification[]
+}
 
 async function getBulk<T extends { id: string }>(
   type: string,
@@ -43,14 +43,14 @@ async function getBulk<T extends { id: string }>(
   apiVersion = 2,
 ): Promise<T[]> {
   if (!ids || ids.length === 0) {
-    return [];
+    return []
   }
-  const url = `${type}?ids=${encodeURIComponent(JSON.stringify([...new Set(ids)]))}`;
+  const url = `${type}?ids=${encodeURIComponent(JSON.stringify([...new Set(ids)]))}`
   try {
-    const res = await useBaseFetch(url, { apiVersion });
-    return Array.isArray(res) ? res : [];
+    const res = await useBaseFetch(url, { apiVersion })
+    return Array.isArray(res) ? res : []
   } catch {
-    return [];
+    return []
   }
 }
 
@@ -64,98 +64,98 @@ export async function fetchExtraNotificationData(
     users: [] as string[],
     versions: [] as string[],
     organizations: [] as string[],
-  };
+  }
 
   for (const notification of notifications) {
     if (notification.body) {
-      if (notification.body.project_id) bulk.projects.push(notification.body.project_id);
-      if (notification.body.version_id) bulk.versions.push(notification.body.version_id);
-      if (notification.body.report_id) bulk.reports.push(notification.body.report_id);
-      if (notification.body.thread_id) bulk.threads.push(notification.body.thread_id);
-      if (notification.body.invited_by) bulk.users.push(notification.body.invited_by);
+      if (notification.body.project_id) bulk.projects.push(notification.body.project_id)
+      if (notification.body.version_id) bulk.versions.push(notification.body.version_id)
+      if (notification.body.report_id) bulk.reports.push(notification.body.report_id)
+      if (notification.body.thread_id) bulk.threads.push(notification.body.thread_id)
+      if (notification.body.invited_by) bulk.users.push(notification.body.invited_by)
       if (notification.body.organization_id)
-        bulk.organizations.push(notification.body.organization_id);
+        bulk.organizations.push(notification.body.organization_id)
     }
   }
 
-  const reports = (await getBulk<Report>("reports", bulk.reports)).filter(Boolean);
+  const reports = (await getBulk<Report>('reports', bulk.reports)).filter(Boolean)
   for (const r of reports) {
-    if (!r?.item_type) continue;
-    if (r.item_type === "project") bulk.projects.push(r.item_id);
-    else if (r.item_type === "user") bulk.users.push(r.item_id);
-    else if (r.item_type === "version") bulk.versions.push(r.item_id);
+    if (!r?.item_type) continue
+    if (r.item_type === 'project') bulk.projects.push(r.item_id)
+    else if (r.item_type === 'user') bulk.users.push(r.item_id)
+    else if (r.item_type === 'version') bulk.versions.push(r.item_id)
   }
 
-  const versions = (await getBulk<Version>("versions", bulk.versions)).filter(Boolean);
-  for (const v of versions) bulk.projects.push(v.project_id);
+  const versions = (await getBulk<Version>('versions', bulk.versions)).filter(Boolean)
+  for (const v of versions) bulk.projects.push(v.project_id)
 
   const [projects, threads, users, organizations] = await Promise.all([
-    getBulk<Project>("projects", bulk.projects),
-    getBulk<Thread>("threads", bulk.threads),
-    getBulk<User>("users", bulk.users),
-    getBulk<Organization>("organizations", bulk.organizations, 3),
-  ]);
+    getBulk<Project>('projects', bulk.projects),
+    getBulk<Thread>('threads', bulk.threads),
+    getBulk<User>('users', bulk.users),
+    getBulk<Organization>('organizations', bulk.organizations, 3),
+  ])
 
   for (const n of notifications) {
-    n.extra_data = {};
+    n.extra_data = {}
     if (n.body) {
       if (n.body.project_id)
-        n.extra_data.project = projects.find((x) => x.id === n.body!.project_id);
+        n.extra_data.project = projects.find((x) => x.id === n.body!.project_id)
       if (n.body.organization_id)
-        n.extra_data.organization = organizations.find((x) => x.id === n.body!.organization_id);
+        n.extra_data.organization = organizations.find((x) => x.id === n.body!.organization_id)
       if (n.body.report_id) {
-        n.extra_data.report = reports.find((x) => x.id === n.body!.report_id);
-        const t = (n.extra_data.report as Report | undefined)?.item_type;
-        if (t === "project")
+        n.extra_data.report = reports.find((x) => x.id === n.body!.report_id)
+        const t = (n.extra_data.report as Report | undefined)?.item_type
+        if (t === 'project')
           n.extra_data.project = projects.find(
             (x) => x.id === (n.extra_data?.report as Report | undefined)?.item_id,
-          );
-        else if (t === "user")
+          )
+        else if (t === 'user')
           n.extra_data.user = users.find(
             (x) => x.id === (n.extra_data?.report as Report | undefined)?.item_id,
-          );
-        else if (t === "version") {
+          )
+        else if (t === 'version') {
           n.extra_data.version = versions.find(
             (x) => x.id === (n.extra_data?.report as Report | undefined)?.item_id,
-          );
+          )
           n.extra_data.project = projects.find(
             (x) => x.id === (n.extra_data?.version as Version | undefined)?.project_id,
-          );
+          )
         }
       }
-      if (n.body.thread_id) n.extra_data.thread = threads.find((x) => x.id === n.body!.thread_id);
+      if (n.body.thread_id) n.extra_data.thread = threads.find((x) => x.id === n.body!.thread_id)
       if (n.body.invited_by)
-        n.extra_data.invited_by = users.find((x) => x.id === n.body!.invited_by);
+        n.extra_data.invited_by = users.find((x) => x.id === n.body!.invited_by)
       if (n.body.version_id)
-        n.extra_data.version = versions.find((x) => x.id === n.body!.version_id);
+        n.extra_data.version = versions.find((x) => x.id === n.body!.version_id)
     }
   }
-  return notifications;
+  return notifications
 }
 
 export function groupNotifications(notifications: Notification[]): Notification[] {
-  const grouped: Notification[] = [];
+  const grouped: Notification[] = []
   for (let i = 0; i < notifications.length; i++) {
-    const current = notifications[i];
-    const next = notifications[i + 1];
+    const current = notifications[i]
+    const next = notifications[i + 1]
     if (current.body && i < notifications.length - 1 && isSimilar(current, next)) {
-      current.grouped_notifs = [next];
-      let j = i + 2;
+      current.grouped_notifs = [next]
+      let j = i + 2
       while (j < notifications.length && isSimilar(current, notifications[j])) {
-        current.grouped_notifs.push(notifications[j]);
-        j++;
+        current.grouped_notifs.push(notifications[j])
+        j++
       }
-      grouped.push(current);
-      i = j - 1;
+      grouped.push(current)
+      i = j - 1
     } else {
-      grouped.push(current);
+      grouped.push(current)
     }
   }
-  return grouped;
+  return grouped
 }
 
 function isSimilar(a: Notification, b: Notification | undefined): boolean {
-  return !!a?.body?.project_id && a.body!.project_id === b?.body?.project_id;
+  return !!a?.body?.project_id && a.body!.project_id === b?.body?.project_id
 }
 
 export async function markAsRead(
@@ -163,23 +163,23 @@ export async function markAsRead(
 ): Promise<(notifications: Notification[]) => Notification[]> {
   try {
     await useBaseFetch(`notifications?ids=${JSON.stringify([...new Set(ids)])}`, {
-      method: "PATCH",
-    });
+      method: 'PATCH',
+    })
     return (notifications: Notification[]) => {
-      const newNotifs = notifications ?? [];
+      const newNotifs = notifications ?? []
       newNotifs.forEach((n) => {
-        if (ids.includes(n.id)) n.read = true;
-      });
-      return newNotifs;
-    };
+        if (ids.includes(n.id)) n.read = true
+      })
+      return newNotifs
+    }
   } catch (err: any) {
-    const app: any = useNuxtApp();
+    const app: any = useNuxtApp()
     app.$notify({
-      group: "main",
-      title: "Error marking notification as read",
+      group: 'main',
+      title: 'Error marking notification as read',
       text: err?.data?.description ?? err,
-      type: "error",
-    });
-    return () => [];
+      type: 'error',
+    })
+    return () => []
   }
 }
diff --git a/apps/frontend/src/helpers/package.js b/apps/frontend/src/helpers/package.js
index 9d8509e05..202f4102c 100644
--- a/apps/frontend/src/helpers/package.js
+++ b/apps/frontend/src/helpers/package.js
@@ -1,5 +1,5 @@
-import TOML from "@ltd/j-toml";
-import JSZip from "jszip";
+import TOML from '@ltd/j-toml'
+import JSZip from 'jszip'
 
 export const createDataPackVersion = async function (
   project,
@@ -12,13 +12,13 @@ export const createDataPackVersion = async function (
   // force version to start with number, as required by FML
   const newVersionNumber = version.version_number.match(/^\d/)
     ? version.version_number
-    : `1-${version.version_number}`;
+    : `1-${version.version_number}`
 
-  const newSlug = `mr_${project.slug.replace("-", "_").replace(/\W/g, "")}`.substring(0, 63);
+  const newSlug = `mr_${project.slug.replace('-', '_').replace(/\W/g, '')}`.substring(0, 63)
 
-  const iconPath = `${project.slug}_pack.png`;
+  const iconPath = `${project.slug}_pack.png`
 
-  const config = useRuntimeConfig();
+  const config = useRuntimeConfig()
 
   const fabricModJson = {
     schemaVersion: 1,
@@ -32,16 +32,16 @@ export const createDataPackVersion = async function (
     },
     license: project.license.id,
     icon: iconPath,
-    environment: "*",
+    environment: '*',
     depends: {
-      "fabric-resource-loader-v0": "*",
+      'fabric-resource-loader-v0': '*',
     },
-  };
+  }
 
   const quiltModJson = {
     schema_version: 1,
     quilt_loader: {
-      group: "com.modrinth",
+      group: 'com.modrinth',
       id: newSlug,
       version: newVersionNumber,
       metadata: {
@@ -61,32 +61,32 @@ export const createDataPackVersion = async function (
         },
         icon: iconPath,
       },
-      intermediate_mappings: "net.fabricmc:intermediary",
+      intermediate_mappings: 'net.fabricmc:intermediary',
       depends: [
         {
-          id: "quilt_resource_loader",
-          versions: "*",
-          unless: "fabric-resource-loader-v0",
+          id: 'quilt_resource_loader',
+          versions: '*',
+          unless: 'fabric-resource-loader-v0',
         },
       ],
     },
-  };
+  }
 
-  const cutoffIndex = allGameVersions.findIndex((x) => x.version === "1.18.2");
+  const cutoffIndex = allGameVersions.findIndex((x) => x.version === '1.18.2')
 
-  let maximumIndex = Number.MIN_VALUE;
+  let maximumIndex = Number.MIN_VALUE
   for (const val of version.game_versions) {
-    const index = allGameVersions.findIndex((x) => x.version === val);
+    const index = allGameVersions.findIndex((x) => x.version === val)
     if (index > maximumIndex) {
-      maximumIndex = index;
+      maximumIndex = index
     }
   }
 
-  const newForge = maximumIndex < cutoffIndex;
+  const newForge = maximumIndex < cutoffIndex
 
   const forgeModsToml = {
-    modLoader: newForge ? "lowcodefml" : "javafml",
-    loaderVersion: newForge ? "[40,)" : "[25,)",
+    modLoader: newForge ? 'lowcodefml' : 'javafml',
+    loaderVersion: newForge ? '[40,)' : '[25,)',
     license: project.license.id,
     showAsResourcePack: false,
     mods: [
@@ -96,119 +96,119 @@ export const createDataPackVersion = async function (
         displayName: project.title,
         description: project.description,
         logoFile: iconPath,
-        updateJSONURL: `${config.public.apiBaseUrl.replace("/v2/", "")}/updates/${
+        updateJSONURL: `${config.public.apiBaseUrl.replace('/v2/', '')}/updates/${
           project.id
         }/forge_updates.json`,
-        credits: "Generated by Modrinth",
-        authors: members.map((x) => x.name).join(", "),
+        credits: 'Generated by Modrinth',
+        authors: members.map((x) => x.name).join(', '),
         displayURL: `${config.public.siteUrl}/${project.project_type}/${
           project.slug ?? project.id
         }`,
       },
     ],
-  };
+  }
 
   if (project.source_url) {
-    quiltModJson.quilt_loader.metadata.contact.sources = project.source_url;
-    fabricModJson.contact.sources = project.source_url;
+    quiltModJson.quilt_loader.metadata.contact.sources = project.source_url
+    fabricModJson.contact.sources = project.source_url
   }
 
   if (project.issues_url) {
-    quiltModJson.quilt_loader.metadata.contact.issues = project.issues_url;
-    fabricModJson.contact.issues = project.issues_url;
-    forgeModsToml.issueTrackerURL = project.issues_url;
+    quiltModJson.quilt_loader.metadata.contact.issues = project.issues_url
+    fabricModJson.contact.issues = project.issues_url
+    forgeModsToml.issueTrackerURL = project.issues_url
   }
 
   const neoModsToml = {
     ...forgeModsToml,
-    modLoader: "javafml",
-    loaderVersion: "[1,)",
+    modLoader: 'javafml',
+    loaderVersion: '[1,)',
     mods: forgeModsToml.mods.map((mod) => ({
       ...mod,
-      updateJSONURL: mod.updateJSONURL + "?neoforge=only",
+      updateJSONURL: mod.updateJSONURL + '?neoforge=only',
     })),
-  };
-
-  const primaryFileData = await (await fetch(primaryFile.url)).blob();
-
-  const primaryZipReader = new JSZip();
-  await primaryZipReader.loadAsync(primaryFileData);
-
-  if (loaders.includes("fabric")) {
-    primaryZipReader.file("fabric.mod.json", JSON.stringify(fabricModJson));
   }
-  if (loaders.includes("quilt")) {
-    primaryZipReader.file("quilt.mod.json", JSON.stringify(quiltModJson));
+
+  const primaryFileData = await (await fetch(primaryFile.url)).blob()
+
+  const primaryZipReader = new JSZip()
+  await primaryZipReader.loadAsync(primaryFileData)
+
+  if (loaders.includes('fabric')) {
+    primaryZipReader.file('fabric.mod.json', JSON.stringify(fabricModJson))
   }
-  if (loaders.includes("forge")) {
-    primaryZipReader.file("META-INF/mods.toml", TOML.stringify(forgeModsToml, { newline: "\n" }));  
+  if (loaders.includes('quilt')) {
+    primaryZipReader.file('quilt.mod.json', JSON.stringify(quiltModJson))
   }
-  if (loaders.includes("neoforge")) {
+  if (loaders.includes('forge')) {
+    primaryZipReader.file('META-INF/mods.toml', TOML.stringify(forgeModsToml, { newline: '\n' }))
+  }
+  if (loaders.includes('neoforge')) {
     primaryZipReader.file(
-      "META-INF/neoforge.mods.toml",
-      TOML.stringify(neoModsToml, { newline: "\n" }),  
-    );
+      'META-INF/neoforge.mods.toml',
+      TOML.stringify(neoModsToml, { newline: '\n' }),
+    )
   }
 
-  if (!newForge && loaders.includes("forge")) {
+  if (!newForge && loaders.includes('forge')) {
     const classFile = new Uint8Array(
       await (
-        await fetch("https://cdn.modrinth.com/wrapper/ModrinthWrapperRestiched.class")
+        await fetch('https://cdn.modrinth.com/wrapper/ModrinthWrapperRestiched.class')
       ).arrayBuffer(),
-    );
+    )
 
-    let binary = "";
+    let binary = ''
     for (let i = 0; i < classFile.byteLength; i++) {
-      binary += String.fromCharCode(classFile[i]);
+      binary += String.fromCharCode(classFile[i])
     }
 
-    let sanitizedId = project.id;
+    let sanitizedId = project.id
 
     if (project.id.match(/^(\d+)/g)) {
-      sanitizedId = "_" + sanitizedId;
+      sanitizedId = '_' + sanitizedId
     }
 
-    sanitizedId = sanitizedId.substring(0, 8);
+    sanitizedId = sanitizedId.substring(0, 8)
 
     binary = binary
       .replace(
-        String.fromCharCode(32) + "needs1to1be1changed1modrinth1mod",
+        String.fromCharCode(32) + 'needs1to1be1changed1modrinth1mod',
         String.fromCharCode(newSlug.length) + newSlug,
       )
-      .replace("/wrappera/", `/${sanitizedId}/`);
+      .replace('/wrappera/', `/${sanitizedId}/`)
 
-    const newArr = [];
+    const newArr = []
     for (let i = 0; i < binary.length; i++) {
-      newArr.push(binary.charCodeAt(i));
+      newArr.push(binary.charCodeAt(i))
     }
 
     primaryZipReader.file(
       `com/modrinth/${sanitizedId}/ModrinthWrapper.class`,
       new Uint8Array(newArr),
-    );
+    )
   }
 
-  const resourcePack = version.files.find((x) => x.file_type === "required-resource-pack");
+  const resourcePack = version.files.find((x) => x.file_type === 'required-resource-pack')
 
-  const resourcePackData = resourcePack ? await (await fetch(resourcePack.url)).blob() : null;
+  const resourcePackData = resourcePack ? await (await fetch(resourcePack.url)).blob() : null
 
   if (resourcePackData) {
-    const resourcePackReader = new JSZip();
-    await resourcePackReader.loadAsync(resourcePackData);
+    const resourcePackReader = new JSZip()
+    await resourcePackReader.loadAsync(resourcePackData)
 
     for (const [path, file] of Object.entries(resourcePackReader.files)) {
-      if (!primaryZipReader.file(path) && !path.includes(".mcassetsroot")) {
-        primaryZipReader.file(path, await file.async("uint8array"));
+      if (!primaryZipReader.file(path) && !path.includes('.mcassetsroot')) {
+        primaryZipReader.file(path, await file.async('uint8array'))
       }
     }
   }
 
-  if (primaryZipReader.file("pack.png")) {
-    primaryZipReader.file(iconPath, await primaryZipReader.file("pack.png").async("uint8array"));
+  if (primaryZipReader.file('pack.png')) {
+    primaryZipReader.file(iconPath, await primaryZipReader.file('pack.png').async('uint8array'))
   }
 
   return await primaryZipReader.generateAsync({
-    type: "blob",
-    mimeType: "application/java-archive",
-  });
-};
+    type: 'blob',
+    mimeType: 'application/java-archive',
+  })
+}
diff --git a/apps/frontend/src/helpers/projects.js b/apps/frontend/src/helpers/projects.js
index 5591b1b23..87143566d 100644
--- a/apps/frontend/src/helpers/projects.js
+++ b/apps/frontend/src/helpers/projects.js
@@ -1,135 +1,135 @@
 export const getProjectTypeForUrl = (type, categories) => {
-  return getProjectTypeForUrlShorthand(type, categories);
-};
+  return getProjectTypeForUrlShorthand(type, categories)
+}
 
 export const getProjectTypeForUrlShorthand = (type, categories, overrideTags) => {
-  const tags = overrideTags ?? useTags().value;
+  const tags = overrideTags ?? useTags().value
 
-  if (type === "mod") {
+  if (type === 'mod') {
     const isMod = categories.some((category) => {
-      return tags.loaderData.modLoaders.includes(category);
-    });
+      return tags.loaderData.modLoaders.includes(category)
+    })
 
     const isPlugin = categories.some((category) => {
-      return tags.loaderData.allPluginLoaders.includes(category);
-    });
+      return tags.loaderData.allPluginLoaders.includes(category)
+    })
 
     const isDataPack = categories.some((category) => {
-      return tags.loaderData.dataPackLoaders.includes(category);
-    });
+      return tags.loaderData.dataPackLoaders.includes(category)
+    })
 
     if (isDataPack) {
-      return "datapack";
+      return 'datapack'
     } else if (isPlugin) {
-      return "plugin";
+      return 'plugin'
     } else if (isMod) {
-      return "mod";
+      return 'mod'
     } else {
-      return "mod";
+      return 'mod'
     }
   } else {
-    return type;
+    return type
   }
-};
+}
 
 export const getProjectLink = (project) => {
   return `/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
     project.slug ? project.slug : project.id
-  }`;
-};
+  }`
+}
 
 export const getVersionLink = (project, version) => {
   if (version) {
-    return getProjectLink(project) + "/version/" + version.id;
+    return getProjectLink(project) + '/version/' + version.id
   } else {
-    return getProjectLink(project);
+    return getProjectLink(project)
   }
-};
+}
 
 export const isApproved = (project) => {
-  return project && APPROVED_PROJECT_STATUSES.includes(project.status);
-};
+  return project && APPROVED_PROJECT_STATUSES.includes(project.status)
+}
 
 export const isListed = (project) => {
-  return project && LISTED_PROJECT_STATUSES.includes(project.status);
-};
+  return project && LISTED_PROJECT_STATUSES.includes(project.status)
+}
 
 export const isUnlisted = (project) => {
-  return project && UNLISTED_PROJECT_STATUSES.includes(project.status);
-};
+  return project && UNLISTED_PROJECT_STATUSES.includes(project.status)
+}
 
 export const isPrivate = (project) => {
-  return project && PRIVATE_PROJECT_STATUSES.includes(project.status);
-};
+  return project && PRIVATE_PROJECT_STATUSES.includes(project.status)
+}
 
 export const isRejected = (project) => {
-  return project && REJECTED_PROJECT_STATUSES.includes(project.status);
-};
+  return project && REJECTED_PROJECT_STATUSES.includes(project.status)
+}
 
 export const isUnderReview = (project) => {
-  return project && UNDER_REVIEW_PROJECT_STATUSES.includes(project.status);
-};
+  return project && UNDER_REVIEW_PROJECT_STATUSES.includes(project.status)
+}
 
 export const isDraft = (project) => {
-  return project && DRAFT_PROJECT_STATUSES.includes(project.status);
-};
+  return project && DRAFT_PROJECT_STATUSES.includes(project.status)
+}
 
-export const APPROVED_PROJECT_STATUSES = ["approved", "archived", "unlisted", "private"];
-export const LISTED_PROJECT_STATUSES = ["approved", "archived"];
-export const UNLISTED_PROJECT_STATUSES = ["unlisted", "withheld"];
-export const PRIVATE_PROJECT_STATUSES = ["private", "rejected", "processing"];
-export const REJECTED_PROJECT_STATUSES = ["rejected", "withheld"];
-export const UNDER_REVIEW_PROJECT_STATUSES = ["processing"];
-export const DRAFT_PROJECT_STATUSES = ["draft"];
+export const APPROVED_PROJECT_STATUSES = ['approved', 'archived', 'unlisted', 'private']
+export const LISTED_PROJECT_STATUSES = ['approved', 'archived']
+export const UNLISTED_PROJECT_STATUSES = ['unlisted', 'withheld']
+export const PRIVATE_PROJECT_STATUSES = ['private', 'rejected', 'processing']
+export const REJECTED_PROJECT_STATUSES = ['rejected', 'withheld']
+export const UNDER_REVIEW_PROJECT_STATUSES = ['processing']
+export const DRAFT_PROJECT_STATUSES = ['draft']
 
 export function getVersionsToDisplay(project) {
-  return formatVersionsForDisplay(project.game_versions.slice());
+  return formatVersionsForDisplay(project.game_versions.slice())
 }
 
 export function formatVersionsForDisplay(gameVersions, overrideTags) {
-  const tags = overrideTags ?? useTags().value;
+  const tags = overrideTags ?? useTags().value
 
-  const inputVersions = gameVersions.slice();
-  const allVersions = tags.gameVersions.slice();
+  const inputVersions = gameVersions.slice()
+  const allVersions = tags.gameVersions.slice()
 
-  const allSnapshots = allVersions.filter((version) => version.version_type === "snapshot");
-  const allReleases = allVersions.filter((version) => version.version_type === "release");
+  const allSnapshots = allVersions.filter((version) => version.version_type === 'snapshot')
+  const allReleases = allVersions.filter((version) => version.version_type === 'release')
   const allLegacy = allVersions.filter(
-    (version) => version.version_type !== "snapshot" && version.version_type !== "release",
-  );
+    (version) => version.version_type !== 'snapshot' && version.version_type !== 'release',
+  )
 
   {
     const indices = allVersions.reduce((map, gameVersion, index) => {
-      map[gameVersion.version] = index;
-      return map;
-    }, {});
-    inputVersions.sort((a, b) => indices[a] - indices[b]);
+      map[gameVersion.version] = index
+      return map
+    }, {})
+    inputVersions.sort((a, b) => indices[a] - indices[b])
   }
 
   const releaseVersions = inputVersions.filter((projVer) =>
     allReleases.some((gameVer) => gameVer.version === projVer),
-  );
+  )
 
   const latestReleaseVersionDate = Date.parse(
     allReleases.find((version) => version.version === releaseVersions[0])?.date,
-  );
+  )
   const latestSnapshot = inputVersions.find((projVer) =>
     allSnapshots.some(
       (gameVer) =>
         gameVer.version === projVer &&
         (!latestReleaseVersionDate || latestReleaseVersionDate < Date.parse(gameVer.date)),
     ),
-  );
+  )
 
   const allReleasesGrouped = groupVersions(
     allReleases.map((release) => release.version),
     false,
-  );
-  const projectVersionsGrouped = groupVersions(releaseVersions, true);
+  )
+  const projectVersionsGrouped = groupVersions(releaseVersions, true)
 
   const releaseVersionsAsRanges = projectVersionsGrouped.map(({ major, minor }) => {
     if (minor.length === 1) {
-      return formatVersion(major, minor[0]);
+      return formatVersion(major, minor[0])
     }
 
     if (
@@ -137,18 +137,18 @@ export function formatVersionsForDisplay(gameVersions, overrideTags) {
         .find((x) => x.major === major)
         .minor.every((value, index) => value === minor[index])
     ) {
-      return `${major}.x`;
+      return `${major}.x`
     }
 
-    return `${formatVersion(major, minor[0])}–${formatVersion(major, minor[minor.length - 1])}`;
-  });
+    return `${formatVersion(major, minor[0])}–${formatVersion(major, minor[minor.length - 1])}`
+  })
 
   const legacyVersionsAsRanges = groupConsecutiveIndices(
     inputVersions.filter((projVer) => allLegacy.some((gameVer) => gameVer.version === projVer)),
     allLegacy,
-  );
+  )
 
-  let output = [...legacyVersionsAsRanges];
+  let output = [...legacyVersionsAsRanges]
 
   // show all snapshots if there's no release versions
   if (releaseVersionsAsRanges.length === 0) {
@@ -157,101 +157,101 @@ export function formatVersionsForDisplay(gameVersions, overrideTags) {
         allSnapshots.some((gameVer) => gameVer.version === projVer),
       ),
       allSnapshots,
-    );
-    output = [...snapshotVersionsAsRanges, ...output];
+    )
+    output = [...snapshotVersionsAsRanges, ...output]
   } else {
-    output = [...releaseVersionsAsRanges, ...output];
+    output = [...releaseVersionsAsRanges, ...output]
   }
 
   if (latestSnapshot && !output.includes(latestSnapshot)) {
-    output = [latestSnapshot, ...output];
+    output = [latestSnapshot, ...output]
   }
-  return output;
+  return output
 }
 
-const mcVersionRegex = /^([0-9]+.[0-9]+)(.[0-9]+)?$/;
+const mcVersionRegex = /^([0-9]+.[0-9]+)(.[0-9]+)?$/
 
 function groupVersions(versions, consecutive = false) {
   return versions
     .slice()
     .reverse()
     .reduce((ranges, version) => {
-      const matchesVersion = version.match(mcVersionRegex);
+      const matchesVersion = version.match(mcVersionRegex)
 
       if (matchesVersion) {
-        const majorVersion = matchesVersion[1];
-        const minorVersion = matchesVersion[2];
-        const minorNumeric = minorVersion ? parseInt(minorVersion.replace(".", "")) : 0;
+        const majorVersion = matchesVersion[1]
+        const minorVersion = matchesVersion[2]
+        const minorNumeric = minorVersion ? parseInt(minorVersion.replace('.', '')) : 0
 
-        let prevInRange;
+        let prevInRange
         if (
           (prevInRange = ranges.find(
             (x) =>
               x.major === majorVersion && (!consecutive || x.minor.at(-1) === minorNumeric - 1),
           ))
         ) {
-          prevInRange.minor.push(minorNumeric);
-          return ranges;
+          prevInRange.minor.push(minorNumeric)
+          return ranges
         }
 
-        return [...ranges, { major: majorVersion, minor: [minorNumeric] }];
+        return [...ranges, { major: majorVersion, minor: [minorNumeric] }]
       }
 
-      return ranges;
+      return ranges
     }, [])
-    .reverse();
+    .reverse()
 }
 
 function groupConsecutiveIndices(versions, referenceList) {
   if (!versions || versions.length === 0) {
-    return [];
+    return []
   }
 
-  const referenceMap = new Map();
+  const referenceMap = new Map()
   referenceList.forEach((item, index) => {
-    referenceMap.set(item.version, index);
-  });
+    referenceMap.set(item.version, index)
+  })
 
-  const sortedList = versions.slice().sort((a, b) => referenceMap.get(a) - referenceMap.get(b));
+  const sortedList = versions.slice().sort((a, b) => referenceMap.get(a) - referenceMap.get(b))
 
-  const ranges = [];
-  let start = sortedList[0];
-  let previous = sortedList[0];
+  const ranges = []
+  let start = sortedList[0]
+  let previous = sortedList[0]
 
   for (let i = 1; i < sortedList.length; i++) {
-    const current = sortedList[i];
+    const current = sortedList[i]
     if (referenceMap.get(current) !== referenceMap.get(previous) + 1) {
-      ranges.push(validateRange(`${previous}–${start}`));
-      start = current;
+      ranges.push(validateRange(`${previous}–${start}`))
+      start = current
     }
-    previous = current;
+    previous = current
   }
 
-  ranges.push(validateRange(`${previous}–${start}`));
+  ranges.push(validateRange(`${previous}–${start}`))
 
-  return ranges;
+  return ranges
 }
 
 function validateRange(range) {
   switch (range) {
-    case "rd-132211–b1.8.1":
-      return "All legacy versions";
-    case "a1.0.4–b1.8.1":
-      return "All alpha and beta versions";
-    case "a1.0.4–a1.2.6":
-      return "All alpha versions";
-    case "b1.0–b1.8.1":
-      return "All beta versions";
-    case "rd-132211–inf20100618":
-      return "All pre-alpha versions";
+    case 'rd-132211–b1.8.1':
+      return 'All legacy versions'
+    case 'a1.0.4–b1.8.1':
+      return 'All alpha and beta versions'
+    case 'a1.0.4–a1.2.6':
+      return 'All alpha versions'
+    case 'b1.0–b1.8.1':
+      return 'All beta versions'
+    case 'rd-132211–inf20100618':
+      return 'All pre-alpha versions'
   }
-  const splitRange = range.split("–");
+  const splitRange = range.split('–')
   if (splitRange && splitRange[0] === splitRange[1]) {
-    return splitRange[0];
+    return splitRange[0]
   }
-  return range;
+  return range
 }
 
 function formatVersion(major, minor) {
-  return minor === 0 ? major : `${major}.${minor}`;
+  return minor === 0 ? major : `${major}.${minor}`
 }
diff --git a/apps/frontend/src/helpers/teams.js b/apps/frontend/src/helpers/teams.js
index bf3f32818..eedddc16f 100644
--- a/apps/frontend/src/helpers/teams.js
+++ b/apps/frontend/src/helpers/teams.js
@@ -1,16 +1,16 @@
 export const acceptTeamInvite = async (teamId) => {
   await useBaseFetch(`team/${teamId}/join`, {
     apiVersion: 3,
-    method: "POST",
-  });
-};
+    method: 'POST',
+  })
+}
 export const removeSelfFromTeam = async (teamId) => {
-  const auth = await useAuth();
-  await removeTeamMember(teamId, auth.value.user.id);
-};
+  const auth = await useAuth()
+  await removeTeamMember(teamId, auth.value.user.id)
+}
 export const removeTeamMember = async (teamId, userId) => {
   await useBaseFetch(`team/${teamId}/members/${userId}`, {
     apiVersion: 3,
-    method: "DELETE",
-  });
-};
+    method: 'DELETE',
+  })
+}
diff --git a/apps/frontend/src/helpers/threads.js b/apps/frontend/src/helpers/threads.js
index 9e75bd241..5dbd5f47c 100644
--- a/apps/frontend/src/helpers/threads.js
+++ b/apps/frontend/src/helpers/threads.js
@@ -1,26 +1,26 @@
 export function addReportMessage(thread, report) {
   if (!thread || !report) {
-    return thread;
+    return thread
   }
   if (
     !thread.members.some((user) => {
-      return user.id === report.reporterUser.id;
+      return user.id === report.reporterUser.id
     })
   ) {
-    thread.members.push(report.reporterUser);
+    thread.members.push(report.reporterUser)
   }
-  if (!thread.messages.some((message) => message.id === "original")) {
+  if (!thread.messages.some((message) => message.id === 'original')) {
     thread.messages.push({
-      id: "original",
+      id: 'original',
       author_id: report.reporterUser.id,
       body: {
-        type: "text",
+        type: 'text',
         body: report.body,
         private: false,
         replying_to: null,
       },
       created: report.created,
-    });
+    })
   }
-  return thread;
+  return thread
 }
diff --git a/apps/frontend/src/helpers/users.js b/apps/frontend/src/helpers/users.js
index 0cff8a4c6..c30523fcb 100644
--- a/apps/frontend/src/helpers/users.js
+++ b/apps/frontend/src/helpers/users.js
@@ -1,9 +1,9 @@
 export const getUserLink = (user) => {
-  return `/user/${user.username}`;
-};
+  return `/user/${user.username}`
+}
 
 export const isStaff = (user) => {
-  return user && STAFF_ROLES.includes(user.role);
-};
+  return user && STAFF_ROLES.includes(user.role)
+}
 
-export const STAFF_ROLES = ["moderator", "admin"];
+export const STAFF_ROLES = ['moderator', 'admin']
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index ad14c4a99..6d1635a31 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -532,8 +532,8 @@
             :title="formatMessage(commonMessages.notificationsLabel)"
             @click="
               () => {
-                isMobileMenuOpen = false;
-                isBrowseMenuOpen = false;
+                isMobileMenuOpen = false
+                isBrowseMenuOpen = false
               }
             "
           >
@@ -704,7 +704,7 @@ import {
   TwitterIcon,
   UserIcon,
   XIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 import {
   Avatar,
   Button,
@@ -712,250 +712,250 @@ import {
   commonMessages,
   OverflowMenu,
   PagewideBanner,
-} from "@modrinth/ui";
-import { isAdmin, isStaff } from "@modrinth/utils";
+} from '@modrinth/ui'
+import { isAdmin, isStaff } from '@modrinth/utils'
 
-import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
-import ModalCreation from "~/components/ui/ModalCreation.vue";
-import OrganizationCreateModal from "~/components/ui/OrganizationCreateModal.vue";
-import TeleportOverflowMenu from "~/components/ui/servers/TeleportOverflowMenu.vue";
-import { errors as generatedStateErrors } from "~/generated/state.json";
-import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
+import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
+import ModalCreation from '~/components/ui/ModalCreation.vue'
+import OrganizationCreateModal from '~/components/ui/OrganizationCreateModal.vue'
+import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
+import { errors as generatedStateErrors } from '~/generated/state.json'
+import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
-const app = useNuxtApp();
-const auth = await useAuth();
-const user = await useUser();
+const app = useNuxtApp()
+const auth = await useAuth()
+const user = await useUser()
 
-const cosmetics = useCosmetics();
-const flags = useFeatureFlags();
+const cosmetics = useCosmetics()
+const flags = useFeatureFlags()
 
-const config = useRuntimeConfig();
-const route = useNativeRoute();
-const router = useNativeRouter();
-const link = config.public.siteUrl + route.path.replace(/\/+$/, "");
+const config = useRuntimeConfig()
+const route = useNativeRoute()
+const router = useNativeRouter()
+const link = config.public.siteUrl + route.path.replace(/\/+$/, '')
 
-const basePopoutId = useId();
+const basePopoutId = useId()
 
 const verifyEmailBannerMessages = defineMessages({
   title: {
-    id: "layout.banner.account-action",
-    defaultMessage: "Account action required",
+    id: 'layout.banner.account-action',
+    defaultMessage: 'Account action required',
   },
   description: {
-    id: "layout.banner.verify-email.description",
+    id: 'layout.banner.verify-email.description',
     defaultMessage:
-      "For security reasons, Modrinth needs you to verify the email address associated with your account.",
+      'For security reasons, Modrinth needs you to verify the email address associated with your account.',
   },
   action: {
-    id: "layout.banner.verify-email.action",
-    defaultMessage: "Re-send verification email",
+    id: 'layout.banner.verify-email.action',
+    defaultMessage: 'Re-send verification email',
   },
-});
+})
 
 const addEmailBannerMessages = defineMessages({
   title: {
-    id: "layout.banner.account-action",
-    defaultMessage: "Account action required",
+    id: 'layout.banner.account-action',
+    defaultMessage: 'Account action required',
   },
   description: {
-    id: "layout.banner.add-email.description",
+    id: 'layout.banner.add-email.description',
     defaultMessage:
-      "For security reasons, Modrinth needs you to register an email address to your account.",
+      'For security reasons, Modrinth needs you to register an email address to your account.',
   },
   action: {
-    id: "layout.banner.add-email.button",
-    defaultMessage: "Visit account settings",
+    id: 'layout.banner.add-email.button',
+    defaultMessage: 'Visit account settings',
   },
-});
+})
 
 const subscriptionPaymentFailedBannerMessages = defineMessages({
   title: {
-    id: "layout.banner.subscription-payment-failed.title",
-    defaultMessage: "Billing action required.",
+    id: 'layout.banner.subscription-payment-failed.title',
+    defaultMessage: 'Billing action required.',
   },
   description: {
-    id: "layout.banner.subscription-payment-failed.description",
+    id: 'layout.banner.subscription-payment-failed.description',
     defaultMessage:
-      "One or more subscriptions failed to renew. Please update your payment method to prevent losing access!",
+      'One or more subscriptions failed to renew. Please update your payment method to prevent losing access!',
   },
   action: {
-    id: "layout.banner.subscription-payment-failed.button",
-    defaultMessage: "Update billing info",
+    id: 'layout.banner.subscription-payment-failed.button',
+    defaultMessage: 'Update billing info',
   },
-});
+})
 
 const stagingBannerMessages = defineMessages({
   title: {
-    id: "layout.banner.staging.title",
-    defaultMessage: "You’re viewing Modrinth’s staging environment",
+    id: 'layout.banner.staging.title',
+    defaultMessage: 'You’re viewing Modrinth’s staging environment',
   },
   description: {
-    id: "layout.banner.staging.description",
+    id: 'layout.banner.staging.description',
     defaultMessage:
-      "The staging environment is completely separate from the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance.",
+      'The staging environment is completely separate from the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance.',
   },
-});
+})
 
 const failedToBuildBannerMessages = defineMessages({
   title: {
-    id: "layout.banner.build-fail.title",
-    defaultMessage: "Error generating state from API when building.",
+    id: 'layout.banner.build-fail.title',
+    defaultMessage: 'Error generating state from API when building.',
   },
   description: {
-    id: "layout.banner.build-fail.description",
+    id: 'layout.banner.build-fail.description',
     defaultMessage:
       "This deploy of Modrinth's frontend failed to generate state from the API. This may be due to an outage or an error in configuration. Rebuild when the API is available. Error codes: {errors}; Current API URL is: {url}",
   },
-});
+})
 
 const navMenuMessages = defineMessages({
   home: {
-    id: "layout.nav.home",
-    defaultMessage: "Home",
+    id: 'layout.nav.home',
+    defaultMessage: 'Home',
   },
   search: {
-    id: "layout.nav.search",
-    defaultMessage: "Search",
+    id: 'layout.nav.search',
+    defaultMessage: 'Search',
   },
-});
+})
 
 const messages = defineMessages({
   toggleMenu: {
-    id: "layout.menu-toggle.action",
-    defaultMessage: "Toggle menu",
+    id: 'layout.menu-toggle.action',
+    defaultMessage: 'Toggle menu',
   },
   yourAvatarAlt: {
-    id: "layout.avatar.alt",
-    defaultMessage: "Your avatar",
+    id: 'layout.avatar.alt',
+    defaultMessage: 'Your avatar',
   },
   getModrinthApp: {
-    id: "layout.action.get-modrinth-app",
-    defaultMessage: "Get Modrinth App",
+    id: 'layout.action.get-modrinth-app',
+    defaultMessage: 'Get Modrinth App',
   },
   changeTheme: {
-    id: "layout.action.change-theme",
-    defaultMessage: "Change theme",
+    id: 'layout.action.change-theme',
+    defaultMessage: 'Change theme',
   },
-});
+})
 
 const footerMessages = defineMessages({
   openSource: {
-    id: "layout.footer.open-source",
-    defaultMessage: "Modrinth is <github-link>open source</github-link>.",
+    id: 'layout.footer.open-source',
+    defaultMessage: 'Modrinth is <github-link>open source</github-link>.',
   },
   legalDisclaimer: {
-    id: "layout.footer.legal-disclaimer",
+    id: 'layout.footer.legal-disclaimer',
     defaultMessage:
-      "NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT.",
+      'NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT.',
   },
-});
+})
 
 useHead({
   link: [
     {
-      rel: "canonical",
+      rel: 'canonical',
       href: link,
     },
   ],
-});
+})
 useSeoMeta({
-  title: "Modrinth",
+  title: 'Modrinth',
   description: () =>
     formatMessage({
-      id: "layout.meta.description",
+      id: 'layout.meta.description',
       defaultMessage:
-        "Download Minecraft mods, plugins, datapacks, shaders, resourcepacks, and modpacks on Modrinth. " +
-        "Discover and publish projects on Modrinth with a modern, easy to use interface and API.",
+        'Download Minecraft mods, plugins, datapacks, shaders, resourcepacks, and modpacks on Modrinth. ' +
+        'Discover and publish projects on Modrinth with a modern, easy to use interface and API.',
     }),
-  publisher: "Modrinth",
-  themeColor: "#1bd96a",
-  colorScheme: "dark light",
+  publisher: 'Modrinth',
+  themeColor: '#1bd96a',
+  colorScheme: 'dark light',
 
   // OpenGraph
-  ogTitle: "Modrinth",
-  ogSiteName: "Modrinth",
+  ogTitle: 'Modrinth',
+  ogSiteName: 'Modrinth',
   ogDescription: () =>
     formatMessage({
-      id: "layout.meta.og-description",
-      defaultMessage: "Discover and publish Minecraft content!",
+      id: 'layout.meta.og-description',
+      defaultMessage: 'Discover and publish Minecraft content!',
     }),
-  ogType: "website",
-  ogImage: "https://cdn.modrinth.com/modrinth-new.png",
+  ogType: 'website',
+  ogImage: 'https://cdn.modrinth.com/modrinth-new.png',
   ogUrl: link,
 
   // Twitter
-  twitterCard: "summary",
-  twitterSite: "@modrinth",
-});
+  twitterCard: 'summary',
+  twitterSite: '@modrinth',
+})
 
-const developerModeCounter = ref(0);
+const developerModeCounter = ref(0)
 
-const isMobileMenuOpen = ref(false);
-const isBrowseMenuOpen = ref(false);
+const isMobileMenuOpen = ref(false)
+const isBrowseMenuOpen = ref(false)
 const navRoutes = computed(() => [
   {
-    id: "mods",
-    label: formatMessage(getProjectTypeMessage("mod", true)),
-    href: "/mods",
+    id: 'mods',
+    label: formatMessage(getProjectTypeMessage('mod', true)),
+    href: '/mods',
   },
   {
-    label: formatMessage(getProjectTypeMessage("plugin", true)),
-    href: "/plugins",
+    label: formatMessage(getProjectTypeMessage('plugin', true)),
+    href: '/plugins',
   },
   {
-    label: formatMessage(getProjectTypeMessage("datapack", true)),
-    href: "/datapacks",
+    label: formatMessage(getProjectTypeMessage('datapack', true)),
+    href: '/datapacks',
   },
   {
-    label: formatMessage(getProjectTypeMessage("shader", true)),
-    href: "/shaders",
+    label: formatMessage(getProjectTypeMessage('shader', true)),
+    href: '/shaders',
   },
   {
-    label: formatMessage(getProjectTypeMessage("resourcepack", true)),
-    href: "/resourcepacks",
+    label: formatMessage(getProjectTypeMessage('resourcepack', true)),
+    href: '/resourcepacks',
   },
   {
-    label: formatMessage(getProjectTypeMessage("modpack", true)),
-    href: "/modpacks",
+    label: formatMessage(getProjectTypeMessage('modpack', true)),
+    href: '/modpacks',
   },
-]);
+])
 
 const userMenuOptions = computed(() => {
   let options = [
     {
-      id: "profile",
+      id: 'profile',
       link: `/user/${auth.value.user.username}`,
     },
     {
-      id: "plus",
-      link: "/plus",
-      color: "purple",
+      id: 'plus',
+      link: '/plus',
+      color: 'purple',
       shown: !flags.value.hidePlusPromoInUserMenu && !isPermission(auth.value.user.badges, 1 << 0),
     },
     {
-      id: "notifications",
-      link: "/dashboard/notifications",
+      id: 'notifications',
+      link: '/dashboard/notifications',
     },
     {
-      id: "saved",
-      link: "/dashboard/collections",
+      id: 'saved',
+      link: '/dashboard/collections',
     },
     {
-      id: "servers",
-      link: "/servers/manage",
+      id: 'servers',
+      link: '/servers/manage',
     },
     {
-      id: "flags",
-      link: "/flags",
+      id: 'flags',
+      link: '/flags',
       shown: flags.value.developerMode,
     },
     {
-      id: "settings",
-      link: "/settings",
+      id: 'settings',
+      link: '/settings',
     },
-  ];
+  ]
 
   // TODO: Only show if user has projects
   options = [
@@ -964,22 +964,22 @@ const userMenuOptions = computed(() => {
       divider: true,
     },
     {
-      id: "projects",
-      link: "/dashboard/projects",
+      id: 'projects',
+      link: '/dashboard/projects',
     },
     {
-      id: "organizations",
-      link: "/dashboard/organizations",
+      id: 'organizations',
+      link: '/dashboard/organizations',
     },
     {
-      id: "revenue",
-      link: "/dashboard/revenue",
+      id: 'revenue',
+      link: '/dashboard/revenue',
     },
     {
-      id: "analytics",
-      link: "/dashboard/analytics",
+      id: 'analytics',
+      link: '/dashboard/analytics',
     },
-  ];
+  ]
 
   options = [
     ...options,
@@ -987,129 +987,129 @@ const userMenuOptions = computed(() => {
       divider: true,
     },
     {
-      id: "sign-out",
-      color: "danger",
+      id: 'sign-out',
+      color: 'danger',
       action: () => logoutUser(),
       hoverFilled: true,
     },
-  ];
-  return options;
-});
+  ]
+  return options
+})
 
 const isDiscovering = computed(
-  () => route.name && route.name.startsWith("search-") && !route.query.sid,
-);
+  () => route.name && route.name.startsWith('search-') && !route.query.sid,
+)
 
 const isDiscoveringSubpage = computed(
-  () => route.name && route.name.startsWith("type-id") && !route.query.sid,
-);
+  () => route.name && route.name.startsWith('type-id') && !route.query.sid,
+)
 
-const rCount = ref(0);
+const rCount = ref(0)
 
-const randomProjects = ref([]);
-const disableRandomProjects = ref(false);
+const randomProjects = ref([])
+const disableRandomProjects = ref(false)
 
 const disableRandomProjectsForRoute = computed(
   () =>
-    route.name.startsWith("servers") ||
-    route.name.includes("settings") ||
-    route.name.includes("admin"),
-);
+    route.name.startsWith('servers') ||
+    route.name.includes('settings') ||
+    route.name.includes('admin'),
+)
 
 async function onKeyDown(event) {
   if (disableRandomProjects.value || disableRandomProjectsForRoute.value) {
-    return;
+    return
   }
 
-  if (event.key === "r") {
-    rCount.value++;
+  if (event.key === 'r') {
+    rCount.value++
 
     if (randomProjects.value.length < 3) {
-      randomProjects.value = await useBaseFetch("projects_random?count=50").catch((err) => {
-        console.error(err);
-        return [];
-      });
+      randomProjects.value = await useBaseFetch('projects_random?count=50').catch((err) => {
+        console.error(err)
+        return []
+      })
     }
   }
 
   if (rCount.value >= 40) {
-    rCount.value = 0;
-    const randomProject = randomProjects.value[0];
-    await router.push(`/project/${randomProject.slug}`);
-    randomProjects.value.splice(0, 1);
+    rCount.value = 0
+    const randomProject = randomProjects.value[0]
+    await router.push(`/project/${randomProject.slug}`)
+    randomProjects.value.splice(0, 1)
   }
 }
 
 function onKeyUp(event) {
-  if (event.key === "r") {
-    rCount.value = 0;
+  if (event.key === 'r') {
+    rCount.value = 0
   }
 }
 
 onMounted(() => {
   if (window && import.meta.client) {
-    window.history.scrollRestoration = "auto";
+    window.history.scrollRestoration = 'auto'
   }
 
-  runAnalytics();
+  runAnalytics()
 
-  window.addEventListener("keydown", onKeyDown);
-  window.addEventListener("keyup", onKeyUp);
-});
+  window.addEventListener('keydown', onKeyDown)
+  window.addEventListener('keyup', onKeyUp)
+})
 
 watch(
   () => route.path,
   () => {
-    isMobileMenuOpen.value = false;
-    isBrowseMenuOpen.value = false;
+    isMobileMenuOpen.value = false
+    isBrowseMenuOpen.value = false
 
     if (import.meta.client) {
-      document.body.style.overflowY = "scroll";
-      document.body.setAttribute("tabindex", "-1");
-      document.body.removeAttribute("tabindex");
+      document.body.style.overflowY = 'scroll'
+      document.body.setAttribute('tabindex', '-1')
+      document.body.removeAttribute('tabindex')
     }
 
-    runAnalytics();
+    runAnalytics()
   },
-);
+)
 
 function developerModeIncrement() {
   if (developerModeCounter.value >= 5) {
-    flags.value.developerMode = !flags.value.developerMode;
-    developerModeCounter.value = 0;
-    saveFeatureFlags();
+    flags.value.developerMode = !flags.value.developerMode
+    developerModeCounter.value = 0
+    saveFeatureFlags()
     if (flags.value.developerMode) {
       app.$notify({
-        group: "main",
-        title: "Developer mode activated",
-        text: "Developer mode has been enabled",
-        type: "success",
-      });
+        group: 'main',
+        title: 'Developer mode activated',
+        text: 'Developer mode has been enabled',
+        type: 'success',
+      })
     } else {
       app.$notify({
-        group: "main",
-        title: "Developer mode deactivated",
-        text: "Developer mode has been disabled",
-        type: "success",
-      });
+        group: 'main',
+        title: 'Developer mode deactivated',
+        text: 'Developer mode has been disabled',
+        type: 'success',
+      })
     }
   } else {
-    developerModeCounter.value++;
+    developerModeCounter.value++
   }
 }
 
 async function logoutUser() {
-  await logout();
+  await logout()
 }
 
 function runAnalytics() {
-  const config = useRuntimeConfig();
-  const replacedUrl = config.public.apiBaseUrl.replace("v2/", "");
+  const config = useRuntimeConfig()
+  const replacedUrl = config.public.apiBaseUrl.replace('v2/', '')
 
   try {
     setTimeout(() => {
       $fetch(`${replacedUrl}analytics/view`, {
-        method: "POST",
+        method: 'POST',
         body: {
           url: window.location.href,
         },
@@ -1118,103 +1118,103 @@ function runAnalytics() {
         },
       })
         .then(() => {})
-        .catch(() => {});
-    });
+        .catch(() => {})
+    })
   } catch (e) {
-    console.error(`Sending analytics failed (CORS error? If so, ignore)`, e);
+    console.error(`Sending analytics failed (CORS error? If so, ignore)`, e)
   }
 }
 function toggleMobileMenu() {
-  isMobileMenuOpen.value = !isMobileMenuOpen.value;
+  isMobileMenuOpen.value = !isMobileMenuOpen.value
   if (isMobileMenuOpen.value) {
-    isBrowseMenuOpen.value = false;
+    isBrowseMenuOpen.value = false
   }
 }
 function toggleBrowseMenu() {
-  isBrowseMenuOpen.value = !isBrowseMenuOpen.value;
+  isBrowseMenuOpen.value = !isBrowseMenuOpen.value
 
   if (isBrowseMenuOpen.value) {
-    isMobileMenuOpen.value = false;
+    isMobileMenuOpen.value = false
   }
 }
 
-const { cycle: changeTheme } = useTheme();
+const { cycle: changeTheme } = useTheme()
 
 function hideStagingBanner() {
-  cosmetics.value.hideStagingBanner = true;
+  cosmetics.value.hideStagingBanner = true
 }
 
 const socialLinks = [
   {
     label: formatMessage(
-      defineMessage({ id: "layout.footer.social.discord", defaultMessage: "Discord" }),
+      defineMessage({ id: 'layout.footer.social.discord', defaultMessage: 'Discord' }),
     ),
-    href: "https://discord.modrinth.com",
+    href: 'https://discord.modrinth.com',
     icon: DiscordIcon,
   },
   {
     label: formatMessage(
-      defineMessage({ id: "layout.footer.social.bluesky", defaultMessage: "Bluesky" }),
+      defineMessage({ id: 'layout.footer.social.bluesky', defaultMessage: 'Bluesky' }),
     ),
-    href: "https://bsky.app/profile/modrinth.com",
+    href: 'https://bsky.app/profile/modrinth.com',
     icon: BlueskyIcon,
   },
   {
     label: formatMessage(
-      defineMessage({ id: "layout.footer.social.mastodon", defaultMessage: "Mastodon" }),
+      defineMessage({ id: 'layout.footer.social.mastodon', defaultMessage: 'Mastodon' }),
     ),
-    href: "https://floss.social/@modrinth",
+    href: 'https://floss.social/@modrinth',
     icon: MastodonIcon,
-    rel: "me",
+    rel: 'me',
   },
   {
-    label: formatMessage(defineMessage({ id: "layout.footer.social.x", defaultMessage: "X" })),
-    href: "https://x.com/modrinth",
+    label: formatMessage(defineMessage({ id: 'layout.footer.social.x', defaultMessage: 'X' })),
+    href: 'https://x.com/modrinth',
     icon: TwitterIcon,
   },
   {
     label: formatMessage(
-      defineMessage({ id: "layout.footer.social.github", defaultMessage: "GitHub" }),
+      defineMessage({ id: 'layout.footer.social.github', defaultMessage: 'GitHub' }),
     ),
-    href: "https://github.com/modrinth",
+    href: 'https://github.com/modrinth',
     icon: GithubIcon,
   },
-];
+]
 
 const footerLinks = [
   {
-    label: formatMessage(defineMessage({ id: "layout.footer.about", defaultMessage: "About" })),
+    label: formatMessage(defineMessage({ id: 'layout.footer.about', defaultMessage: 'About' })),
     links: [
       {
-        href: "/news",
+        href: '/news',
         label: formatMessage(
-          defineMessage({ id: "layout.footer.about.news", defaultMessage: "News" }),
+          defineMessage({ id: 'layout.footer.about.news', defaultMessage: 'News' }),
         ),
       },
       {
-        href: "/news/changelog",
+        href: '/news/changelog',
         label: formatMessage(
-          defineMessage({ id: "layout.footer.about.changelog", defaultMessage: "Changelog" }),
+          defineMessage({ id: 'layout.footer.about.changelog', defaultMessage: 'Changelog' }),
         ),
       },
       {
-        href: "https://status.modrinth.com",
+        href: 'https://status.modrinth.com',
         label: formatMessage(
-          defineMessage({ id: "layout.footer.about.status", defaultMessage: "Status" }),
+          defineMessage({ id: 'layout.footer.about.status', defaultMessage: 'Status' }),
         ),
       },
       {
-        href: "https://careers.modrinth.com",
+        href: 'https://careers.modrinth.com',
         label: formatMessage(
-          defineMessage({ id: "layout.footer.about.careers", defaultMessage: "Careers" }),
+          defineMessage({ id: 'layout.footer.about.careers', defaultMessage: 'Careers' }),
         ),
       },
       {
-        href: "/legal/cmp-info",
+        href: '/legal/cmp-info',
         label: formatMessage(
           defineMessage({
-            id: "layout.footer.about.rewards-program",
-            defaultMessage: "Rewards Program",
+            id: 'layout.footer.about.rewards-program',
+            defaultMessage: 'Rewards Program',
           }),
         ),
       },
@@ -1222,27 +1222,27 @@ const footerLinks = [
   },
   {
     label: formatMessage(
-      defineMessage({ id: "layout.footer.products", defaultMessage: "Products" }),
+      defineMessage({ id: 'layout.footer.products', defaultMessage: 'Products' }),
     ),
     links: [
       {
-        href: "/plus",
+        href: '/plus',
         label: formatMessage(
-          defineMessage({ id: "layout.footer.products.plus", defaultMessage: "Modrinth+" }),
+          defineMessage({ id: 'layout.footer.products.plus', defaultMessage: 'Modrinth+' }),
         ),
       },
       {
-        href: "/app",
+        href: '/app',
         label: formatMessage(
-          defineMessage({ id: "layout.footer.products.app", defaultMessage: "Modrinth App" }),
+          defineMessage({ id: 'layout.footer.products.app', defaultMessage: 'Modrinth App' }),
         ),
       },
       {
-        href: "/servers",
+        href: '/servers',
         label: formatMessage(
           defineMessage({
-            id: "layout.footer.products.servers",
-            defaultMessage: "Modrinth Servers",
+            id: 'layout.footer.products.servers',
+            defaultMessage: 'Modrinth Servers',
           }),
         ),
       },
@@ -1250,93 +1250,93 @@ const footerLinks = [
   },
   {
     label: formatMessage(
-      defineMessage({ id: "layout.footer.resources", defaultMessage: "Resources" }),
+      defineMessage({ id: 'layout.footer.resources', defaultMessage: 'Resources' }),
     ),
     links: [
       {
-        href: "https://support.modrinth.com",
+        href: 'https://support.modrinth.com',
         label: formatMessage(
           defineMessage({
-            id: "layout.footer.resources.help-center",
-            defaultMessage: "Help Center",
+            id: 'layout.footer.resources.help-center',
+            defaultMessage: 'Help Center',
           }),
         ),
       },
       {
-        href: "https://crowdin.com/project/modrinth",
+        href: 'https://crowdin.com/project/modrinth',
         label: formatMessage(
-          defineMessage({ id: "layout.footer.resources.translate", defaultMessage: "Translate" }),
+          defineMessage({ id: 'layout.footer.resources.translate', defaultMessage: 'Translate' }),
         ),
       },
       {
-        href: "https://github.com/modrinth/code/issues",
+        href: 'https://github.com/modrinth/code/issues',
         label: formatMessage(
           defineMessage({
-            id: "layout.footer.resources.report-issues",
-            defaultMessage: "Report issues",
+            id: 'layout.footer.resources.report-issues',
+            defaultMessage: 'Report issues',
           }),
         ),
       },
       {
-        href: "https://docs.modrinth.com/api/",
+        href: 'https://docs.modrinth.com/api/',
         label: formatMessage(
           defineMessage({
-            id: "layout.footer.resources.api-docs",
-            defaultMessage: "API documentation",
+            id: 'layout.footer.resources.api-docs',
+            defaultMessage: 'API documentation',
           }),
         ),
       },
     ],
   },
   {
-    label: formatMessage(defineMessage({ id: "layout.footer.legal", defaultMessage: "Legal" })),
+    label: formatMessage(defineMessage({ id: 'layout.footer.legal', defaultMessage: 'Legal' })),
     links: [
       {
-        href: "/legal/rules",
+        href: '/legal/rules',
         label: formatMessage(
-          defineMessage({ id: "layout.footer.legal.rules", defaultMessage: "Content Rules" }),
+          defineMessage({ id: 'layout.footer.legal.rules', defaultMessage: 'Content Rules' }),
         ),
       },
       {
-        href: "/legal/terms",
+        href: '/legal/terms',
         label: formatMessage(
-          defineMessage({ id: "layout.footer.legal.terms-of-use", defaultMessage: "Terms of Use" }),
+          defineMessage({ id: 'layout.footer.legal.terms-of-use', defaultMessage: 'Terms of Use' }),
         ),
       },
       {
-        href: "/legal/privacy",
+        href: '/legal/privacy',
         label: formatMessage(
           defineMessage({
-            id: "layout.footer.legal.privacy-policy",
-            defaultMessage: "Privacy Policy",
+            id: 'layout.footer.legal.privacy-policy',
+            defaultMessage: 'Privacy Policy',
           }),
         ),
       },
       {
-        href: "/legal/security",
+        href: '/legal/security',
         label: formatMessage(
           defineMessage({
-            id: "layout.footer.legal.security-notice",
-            defaultMessage: "Security Notice",
+            id: 'layout.footer.legal.security-notice',
+            defaultMessage: 'Security Notice',
           }),
         ),
       },
       {
-        href: "/legal/copyright",
+        href: '/legal/copyright',
         label: formatMessage(
           defineMessage({
-            id: "layout.footer.legal.copyright-policy",
-            defaultMessage: "Copyright Policy and DMCA",
+            id: 'layout.footer.legal.copyright-policy',
+            defaultMessage: 'Copyright Policy and DMCA',
           }),
         ),
       },
     ],
   },
-];
+]
 </script>
 
 <style lang="scss">
-@import "~/assets/styles/global.scss";
+@import '~/assets/styles/global.scss';
 // @import '@modrinth/assets';
 
 .layout {
@@ -1505,7 +1505,7 @@ const footerLinks = [
         &::after {
           background-color: var(--color-brand);
           border-radius: var(--size-rounded-max);
-          content: "";
+          content: '';
           height: 0.5rem;
           position: absolute;
           left: 1.5rem;
diff --git a/apps/frontend/src/layouts/empty.vue b/apps/frontend/src/layouts/empty.vue
index 257037c03..6366d0350 100644
--- a/apps/frontend/src/layouts/empty.vue
+++ b/apps/frontend/src/layouts/empty.vue
@@ -1,4 +1,4 @@
 <template><slot id="main" /></template>
 <style lang="scss">
-@import "~/assets/styles/global.scss";
+@import '~/assets/styles/global.scss';
 </style>
diff --git a/apps/frontend/src/middleware/auth.ts b/apps/frontend/src/middleware/auth.ts
index 62d17006a..a5f32e5d7 100644
--- a/apps/frontend/src/middleware/auth.ts
+++ b/apps/frontend/src/middleware/auth.ts
@@ -1,33 +1,33 @@
-const whitelistedParams = ["flow", "error"];
+const whitelistedParams = ['flow', 'error']
 
 export default defineNuxtRouteMiddleware(async (_to, from) => {
-  const config = useRuntimeConfig();
-  const auth = await useAuth();
+  const config = useRuntimeConfig()
+  const auth = await useAuth()
 
-  if (auth.value.user) return;
+  if (auth.value.user) return
 
-  const fullPath = from.fullPath;
+  const fullPath = from.fullPath
 
-  const url = new URL(fullPath, config.public.apiBaseUrl);
+  const url = new URL(fullPath, config.public.apiBaseUrl)
 
-  const extractedParams = Object.create(null) as Record<string, string>;
+  const extractedParams = Object.create(null) as Record<string, string>
 
   for (const param of whitelistedParams) {
-    const val = url.searchParams.get(param);
+    const val = url.searchParams.get(param)
     if (val != null) {
-      extractedParams[param] = val;
-      url.searchParams.delete(param);
+      extractedParams[param] = val
+      url.searchParams.delete(param)
     }
   }
 
   return await navigateTo(
     {
-      path: "/auth/sign-in",
+      path: '/auth/sign-in',
       query: {
         redirect: `${url.pathname}${url.search}`,
         ...extractedParams,
       },
     },
     { replace: true },
-  );
-});
+  )
+})
diff --git a/apps/frontend/src/middleware/launcher-auth.ts b/apps/frontend/src/middleware/launcher-auth.ts
index 14942e7f1..b3579463f 100644
--- a/apps/frontend/src/middleware/launcher-auth.ts
+++ b/apps/frontend/src/middleware/launcher-auth.ts
@@ -1,5 +1,5 @@
 export default defineNuxtRouteMiddleware((to) => {
   if (to.query.launcher) {
-    setPageLayout("empty");
+    setPageLayout('empty')
   }
-});
+})
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 2f1f2577e..30609b939 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -157,7 +157,7 @@
       <template #title>
         <Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" no-shadow />
         <span class="text-lg font-extrabold text-contrast">
-          {{ project.license.name ? project.license.name : "License" }}
+          {{ project.license.name ? project.license.name : 'License' }}
         </span>
       </template>
       <div
@@ -191,12 +191,12 @@
       ref="downloadModal"
       :on-show="
         () => {
-          navigateTo({ query: route.query, hash: '#download' });
+          navigateTo({ query: route.query, hash: '#download' })
         }
       "
       :on-hide="
         () => {
-          navigateTo({ query: route.query, hash: '' });
+          navigateTo({ query: route.query, hash: '' })
         }
       "
     >
@@ -250,7 +250,7 @@
                 {{
                   currentGameVersion
                     ? `Game version: ${currentGameVersion}`
-                    : "Error: no game versions found"
+                    : 'Error: no game versions found'
                 }}
                 <InfoIcon
                   v-tooltip="`${project.title} is only available for ${currentGameVersion}`"
@@ -265,7 +265,7 @@
               @on-open="
                 () => {
                   if (platformAccordion) {
-                    platformAccordion.close();
+                    platformAccordion.close()
                   }
                 }
               "
@@ -273,7 +273,7 @@
               <template #title>
                 <GameIcon aria-hidden="true" />
                 {{
-                  currentGameVersion ? `Game version: ${currentGameVersion}` : "Select game version"
+                  currentGameVersion ? `Game version: ${currentGameVersion}` : 'Select game version'
                 }}
               </template>
               <div class="iconified-input mb-2 flex w-full">
@@ -313,10 +313,10 @@
                     }"
                     @click="
                       () => {
-                        userSelectedGameVersion = gameVersion;
-                        gameVersionAccordion.close();
+                        userSelectedGameVersion = gameVersion
+                        gameVersionAccordion.close()
                         if (!currentPlatform && platformAccordion) {
-                          platformAccordion.open();
+                          platformAccordion.open()
                         }
 
                         navigateTo({
@@ -326,7 +326,7 @@
                             ...(userSelectedPlatform && { loader: userSelectedPlatform }),
                           },
                           hash: route.hash,
-                        });
+                        })
                       }
                     "
                   >
@@ -349,7 +349,7 @@
                 {{
                   currentPlatform
                     ? `Platform: ${formatCategory(currentPlatform)}`
-                    : "Error: no platforms found"
+                    : 'Error: no platforms found'
                 }}
                 <InfoIcon
                   v-tooltip="
@@ -366,7 +366,7 @@
               @on-open="
                 () => {
                   if (gameVersionAccordion) {
-                    gameVersionAccordion.close();
+                    gameVersionAccordion.close()
                   }
                 }
               "
@@ -376,7 +376,7 @@
                 {{
                   currentPlatform
                     ? `Platform: ${formatCategory(currentPlatform)}`
-                    : "Select platform"
+                    : 'Select platform'
                 }}
               </template>
               <ScrollablePanel :class="project.loaders.length > 4 ? 'h-[15rem]' : ''">
@@ -396,11 +396,11 @@
                     }"
                     @click="
                       () => {
-                        userSelectedPlatform = platform;
+                        userSelectedPlatform = platform
 
-                        platformAccordion.close();
+                        platformAccordion.close()
                         if (!currentGameVersion && gameVersionAccordion) {
-                          gameVersionAccordion.open();
+                          gameVersionAccordion.open()
                         }
 
                         navigateTo({
@@ -410,7 +410,7 @@
                             ...(userSelectedPlatform && { loader: userSelectedPlatform }),
                           },
                           hash: route.hash,
-                        });
+                        })
                       }
                     "
                   >
@@ -458,8 +458,8 @@
             :link="`/servers#plan`"
             @close="
               () => {
-                flags.showProjectPageDownloadModalServersPromo = false;
-                saveFeatureFlags();
+                flags.showProjectPageDownloadModalServersPromo = false
+                saveFeatureFlags()
               }
             "
           />
@@ -524,8 +524,8 @@
                   :to="`/servers?project=${project.id}#plan`"
                   @click="
                     () => {
-                      flags.showProjectPageCreateServersTooltip = false;
-                      saveFeatureFlags();
+                      flags.showProjectPageCreateServersTooltip = false
+                      saveFeatureFlags()
                     }
                   "
                 >
@@ -550,8 +550,8 @@
                         v-tooltip="`Don't show again`"
                         @click="
                           () => {
-                            flags.showProjectPageCreateServersTooltip = false;
-                            saveFeatureFlags();
+                            flags.showProjectPageCreateServersTooltip = false
+                            saveFeatureFlags()
                           }
                         "
                       >
@@ -690,8 +690,8 @@
                   {
                     id: 'moderation-checklist',
                     action: () => {
-                      moderationStore.setSingleProject(project.id);
-                      showModerationChecklist = true;
+                      moderationStore.setSingleProject(project.id)
+                      showModerationChecklist = true
                     },
                     color: 'orange',
                     hoverOnly: true,
@@ -919,7 +919,7 @@ import {
   VersionIcon,
   WrenchIcon,
   XIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 import {
   Avatar,
   ButtonStyled,
@@ -938,159 +938,159 @@ import {
   ServersPromo,
   TagItem,
   useRelativeTime,
-} from "@modrinth/ui";
-import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
-import { formatCategory, formatProjectType, renderString } from "@modrinth/utils";
-import { useLocalStorage } from "@vueuse/core";
-import dayjs from "dayjs";
-import { Tooltip } from "floating-vue";
+} from '@modrinth/ui'
+import VersionSummary from '@modrinth/ui/src/components/version/VersionSummary.vue'
+import { formatCategory, formatProjectType, renderString } from '@modrinth/utils'
+import { useLocalStorage } from '@vueuse/core'
+import dayjs from 'dayjs'
+import { Tooltip } from 'floating-vue'
 
-import { navigateTo } from "#app";
-import Accordion from "~/components/ui/Accordion.vue";
-import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
-import AutomaticAccordion from "~/components/ui/AutomaticAccordion.vue";
-import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
-import MessageBanner from "~/components/ui/MessageBanner.vue";
-import ModerationChecklist from "~/components/ui/moderation/checklist/ModerationChecklist.vue";
-import NavStack from "~/components/ui/NavStack.vue";
-import NavStackItem from "~/components/ui/NavStackItem.vue";
-import NavTabs from "~/components/ui/NavTabs.vue";
-import ProjectMemberHeader from "~/components/ui/ProjectMemberHeader.vue";
-import { saveFeatureFlags } from "~/composables/featureFlags.ts";
-import { userCollectProject } from "~/composables/user.js";
-import { useModerationStore } from "~/store/moderation.ts";
-import { reportProject } from "~/utils/report-helpers.ts";
+import { navigateTo } from '#app'
+import Accordion from '~/components/ui/Accordion.vue'
+import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
+import AutomaticAccordion from '~/components/ui/AutomaticAccordion.vue'
+import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
+import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
+import MessageBanner from '~/components/ui/MessageBanner.vue'
+import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
+import NavTabs from '~/components/ui/NavTabs.vue'
+import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
+import { saveFeatureFlags } from '~/composables/featureFlags.ts'
+import { userCollectProject } from '~/composables/user.js'
+import { useModerationStore } from '~/store/moderation.ts'
+import { reportProject } from '~/utils/report-helpers.ts'
 
-const data = useNuxtApp();
-const route = useNativeRoute();
-const config = useRuntimeConfig();
-const moderationStore = useModerationStore();
+const data = useNuxtApp()
+const route = useNativeRoute()
+const config = useRuntimeConfig()
+const moderationStore = useModerationStore()
 
-const auth = await useAuth();
-const user = await useUser();
+const auth = await useAuth()
+const user = await useUser()
 
-const tags = useTags();
-const flags = useFeatureFlags();
-const cosmetics = useCosmetics();
+const tags = useTags()
+const flags = useFeatureFlags()
+const cosmetics = useCosmetics()
 
-const { formatMessage } = useVIntl();
-const { setVisible } = useNotificationRightwards();
+const { formatMessage } = useVIntl()
+const { setVisible } = useNotificationRightwards()
 
-const settingsModal = ref();
-const downloadModal = ref();
-const overTheTopDownloadAnimation = ref();
+const settingsModal = ref()
+const downloadModal = ref()
+const overTheTopDownloadAnimation = ref()
 
-const userSelectedGameVersion = ref(null);
-const userSelectedPlatform = ref(null);
-const showAllVersions = ref(false);
+const userSelectedGameVersion = ref(null)
+const userSelectedPlatform = ref(null)
+const showAllVersions = ref(false)
 
-const gameVersionFilterInput = ref();
+const gameVersionFilterInput = ref()
 
-const versionFilter = ref("");
+const versionFilter = ref('')
 
-const baseId = useId();
+const baseId = useId()
 
 const currentGameVersion = computed(() => {
   return (
     userSelectedGameVersion.value ||
     (project.value.game_versions.length === 1 && project.value.game_versions[0])
-  );
-});
+  )
+})
 
 const possibleGameVersions = computed(() => {
   return versions.value
     .filter((x) => !currentPlatform.value || x.loaders.includes(currentPlatform.value))
-    .flatMap((x) => x.game_versions);
-});
+    .flatMap((x) => x.game_versions)
+})
 
 const possiblePlatforms = computed(() => {
   return versions.value
     .filter((x) => !currentGameVersion.value || x.game_versions.includes(currentGameVersion.value))
-    .flatMap((x) => x.loaders);
-});
+    .flatMap((x) => x.loaders)
+})
 
 const currentPlatform = computed(() => {
   return (
     userSelectedPlatform.value || (project.value.loaders.length === 1 && project.value.loaders[0])
-  );
-});
+  )
+})
 
 function installWithApp() {
   setTimeout(() => {
-    getModrinthAppAccordion.value.open();
-  }, 1500);
+    getModrinthAppAccordion.value.open()
+  }, 1500)
 }
 
-const gameVersionAccordion = ref();
-const platformAccordion = ref();
-const getModrinthAppAccordion = ref();
+const gameVersionAccordion = ref()
+const platformAccordion = ref()
+const getModrinthAppAccordion = ref()
 
-const formatRelativeTime = useRelativeTime();
+const formatRelativeTime = useRelativeTime()
 
 const detailsMessages = defineMessages({
   title: {
-    id: "project.about.details.title",
-    defaultMessage: "Details",
+    id: 'project.about.details.title',
+    defaultMessage: 'Details',
   },
   licensed: {
-    id: "project.about.details.licensed",
-    defaultMessage: "Licensed {license}",
+    id: 'project.about.details.licensed',
+    defaultMessage: 'Licensed {license}',
   },
   created: {
-    id: "project.about.details.created",
-    defaultMessage: "Created {date}",
+    id: 'project.about.details.created',
+    defaultMessage: 'Created {date}',
   },
   submitted: {
-    id: "project.about.details.submitted",
-    defaultMessage: "Submitted {date}",
+    id: 'project.about.details.submitted',
+    defaultMessage: 'Submitted {date}',
   },
   published: {
-    id: "project.about.details.published",
-    defaultMessage: "Published {date}",
+    id: 'project.about.details.published',
+    defaultMessage: 'Published {date}',
   },
   updated: {
-    id: "project.about.details.updated",
-    defaultMessage: "Updated {date}",
+    id: 'project.about.details.updated',
+    defaultMessage: 'Updated {date}',
   },
-});
+})
 
-const modalLicense = ref(null);
-const licenseText = ref("");
+const modalLicense = ref(null)
+const licenseText = ref('')
 
 const createdDate = computed(() =>
-  project.value.published ? formatRelativeTime(project.value.published) : "unknown",
-);
+  project.value.published ? formatRelativeTime(project.value.published) : 'unknown',
+)
 const submittedDate = computed(() =>
-  project.value.queued ? formatRelativeTime(project.value.queued) : "unknown",
-);
+  project.value.queued ? formatRelativeTime(project.value.queued) : 'unknown',
+)
 const publishedDate = computed(() =>
-  project.value.approved ? formatRelativeTime(project.value.approved) : "unknown",
-);
+  project.value.approved ? formatRelativeTime(project.value.approved) : 'unknown',
+)
 const updatedDate = computed(() =>
-  project.value.updated ? formatRelativeTime(project.value.updated) : "unknown",
-);
+  project.value.updated ? formatRelativeTime(project.value.updated) : 'unknown',
+)
 
 const licenseIdDisplay = computed(() => {
-  const id = project.value.license.id;
+  const id = project.value.license.id
 
-  if (id === "LicenseRef-All-Rights-Reserved") {
-    return "ARR";
-  } else if (id.includes("LicenseRef")) {
-    return id.replaceAll("LicenseRef-", "").replaceAll("-", " ");
+  if (id === 'LicenseRef-All-Rights-Reserved') {
+    return 'ARR'
+  } else if (id.includes('LicenseRef')) {
+    return id.replaceAll('LicenseRef-', '').replaceAll('-', ' ')
   } else {
-    return id;
+    return id
   }
-});
+})
 
 async function getLicenseData(event) {
-  modalLicense.value.show(event);
+  modalLicense.value.show(event)
 
   try {
-    const text = await useBaseFetch(`tag/license/${project.value.license.id}`);
-    licenseText.value = text.body || "License text could not be retrieved.";
+    const text = await useBaseFetch(`tag/license/${project.value.license.id}`)
+    licenseText.value = text.body || 'License text could not be retrieved.'
   } catch {
-    licenseText.value = "License text could not be retrieved.";
+    licenseText.value = 'License text could not be retrieved.'
   }
 }
 
@@ -1099,81 +1099,81 @@ const filteredVersions = computed(() => {
     (x) =>
       x.game_versions.includes(currentGameVersion.value) &&
       x.loaders.includes(currentPlatform.value),
-  );
-});
+  )
+})
 
 const filteredRelease = computed(() => {
-  return filteredVersions.value.find((x) => x.version_type === "release");
-});
+  return filteredVersions.value.find((x) => x.version_type === 'release')
+})
 
 const filteredBeta = computed(() => {
   return filteredVersions.value.find(
     (x) =>
-      x.version_type === "beta" &&
+      x.version_type === 'beta' &&
       (!filteredRelease.value ||
         dayjs(x.date_published).isAfter(dayjs(filteredRelease.value.date_published))),
-  );
-});
+  )
+})
 
 const filteredAlpha = computed(() => {
   return filteredVersions.value.find(
     (x) =>
-      x.version_type === "alpha" &&
+      x.version_type === 'alpha' &&
       (!filteredRelease.value ||
         dayjs(x.date_published).isAfter(dayjs(filteredRelease.value.date_published))) &&
       (!filteredBeta.value ||
         dayjs(x.date_published).isAfter(dayjs(filteredBeta.value.date_published))),
-  );
-});
+  )
+})
 
 const messages = defineMessages({
   downloadsStat: {
-    id: "project.stats.downloads-label",
-    defaultMessage: "download{count, plural, one {} other {s}}",
+    id: 'project.stats.downloads-label',
+    defaultMessage: 'download{count, plural, one {} other {s}}',
   },
   followersStat: {
-    id: "project.stats.followers-label",
-    defaultMessage: "follower{count, plural, one {} other {s}}",
+    id: 'project.stats.followers-label',
+    defaultMessage: 'follower{count, plural, one {} other {s}}',
   },
   descriptionTab: {
-    id: "project.description.title",
-    defaultMessage: "Description",
+    id: 'project.description.title',
+    defaultMessage: 'Description',
   },
   galleryTab: {
-    id: "project.gallery.title",
-    defaultMessage: "Gallery",
+    id: 'project.gallery.title',
+    defaultMessage: 'Gallery',
   },
   versionsTab: {
-    id: "project.versions.title",
-    defaultMessage: "Versions",
+    id: 'project.versions.title',
+    defaultMessage: 'Versions',
   },
   moderationTab: {
-    id: "project.moderation.title",
-    defaultMessage: "Moderation",
+    id: 'project.moderation.title',
+    defaultMessage: 'Moderation',
   },
-});
+})
 
-const displayCollectionsSearch = ref("");
+const displayCollectionsSearch = ref('')
 const collections = computed(() =>
   user.value && user.value.collections
     ? user.value.collections.filter((x) =>
         x.name.toLowerCase().includes(displayCollectionsSearch.value.toLowerCase()),
       )
     : [],
-);
+)
 
 if (
   !route.params.id ||
   !(
     tags.value.projectTypes.find((x) => x.id === route.params.type) ||
-    route.params.type === "project"
+    route.params.type === 'project'
   )
 ) {
   throw createError({
     fatal: true,
     statusCode: 404,
-    message: "The page could not be found",
-  });
+    message: 'The page could not be found',
+  })
 }
 
 let project,
@@ -1189,9 +1189,9 @@ let project,
   membersError,
   dependenciesError,
   featuredVersionsError,
-  versionsError;
+  versionsError
 try {
-  [
+  ;[
     { data: project, error: projectError, refresh: resetProject },
     { data: allMembers, error: membersError, refresh: resetMembers },
     { data: dependencies, error: dependenciesError },
@@ -1202,15 +1202,15 @@ try {
     useAsyncData(`project/${route.params.id}`, () => useBaseFetch(`project/${route.params.id}`), {
       transform: (project) => {
         if (project) {
-          project.actualProjectType = JSON.parse(JSON.stringify(project.project_type));
+          project.actualProjectType = JSON.parse(JSON.stringify(project.project_type))
           project.project_type = data.$getProjectTypeForUrl(
             project.project_type,
             project.loaders,
             tags.value,
-          );
+          )
         }
 
-        return project;
+        return project
       },
     }),
     useAsyncData(
@@ -1219,11 +1219,11 @@ try {
       {
         transform: (members) => {
           members.forEach((it, index) => {
-            members[index].avatar_url = it.user.avatar_url;
-            members[index].name = it.user.username;
-          });
+            members[index].avatar_url = it.user.avatar_url
+            members[index].name = it.user.username
+          })
 
-          return members;
+          return members
         },
       },
     ),
@@ -1239,16 +1239,16 @@ try {
     useAsyncData(`project/${route.params.id}/organization`, () =>
       useBaseFetch(`project/${route.params.id}/organization`, { apiVersion: 3 }),
     ),
-  ]);
+  ])
 
-  versions = shallowRef(toRaw(versions));
-  featuredVersions = shallowRef(toRaw(featuredVersions));
+  versions = shallowRef(toRaw(versions))
+  featuredVersions = shallowRef(toRaw(featuredVersions))
 } catch (err) {
   throw createError({
     fatal: true,
     statusCode: err.statusCode ?? 500,
-    message: "Error loading project data" + (err.message ? `: ${err.message}` : ""),
-  });
+    message: 'Error loading project data' + (err.message ? `: ${err.message}` : ''),
+  })
 }
 
 function handleError(err, project = false) {
@@ -1256,72 +1256,72 @@ function handleError(err, project = false) {
     throw createError({
       fatal: true,
       statusCode: err.value.statusCode,
-      message: err.value.statusCode === 404 && project ? "Project not found" : err.value.message,
-    });
+      message: err.value.statusCode === 404 && project ? 'Project not found' : err.value.message,
+    })
   }
 }
 
-handleError(projectError, true);
-handleError(membersError);
-handleError(dependenciesError);
-handleError(featuredVersionsError);
-handleError(versionsError);
+handleError(projectError, true)
+handleError(membersError)
+handleError(dependenciesError)
+handleError(featuredVersionsError)
+handleError(versionsError)
 
 if (!project.value) {
   throw createError({
     fatal: true,
     statusCode: 404,
-    message: "Project not found",
-  });
+    message: 'Project not found',
+  })
 }
 
 if (project.value.project_type !== route.params.type || route.params.id !== project.value.slug) {
-  let path = route.fullPath.split("/");
-  path.splice(0, 3);
-  path = path.filter((x) => x);
+  let path = route.fullPath.split('/')
+  path.splice(0, 3)
+  path = path.filter((x) => x)
 
   await navigateTo(
     `/${project.value.project_type}/${project.value.slug}${
-      path.length > 0 ? `/${path.join("/")}` : ""
+      path.length > 0 ? `/${path.join('/')}` : ''
     }`,
     { redirectCode: 301, replace: true },
-  );
+  )
 }
 
 // Members should be an array of all members, without the accepted ones, and with the user with the Owner role at the start
 // The rest of the members should be sorted by role, then by name
 const members = computed(() => {
-  const acceptedMembers = allMembers.value.filter((x) => x.accepted);
+  const acceptedMembers = allMembers.value.filter((x) => x.accepted)
   const owner = acceptedMembers.find((x) =>
     organization.value
       ? organization.value.members.some(
           (orgMember) => orgMember.user.id === x.user.id && orgMember.is_owner,
         )
       : x.is_owner,
-  );
+  )
 
-  const rest = acceptedMembers.filter((x) => !owner || x.user.id !== owner.user.id) || [];
+  const rest = acceptedMembers.filter((x) => !owner || x.user.id !== owner.user.id) || []
 
   rest.sort((a, b) => {
     if (a.role === b.role) {
-      return a.user.username.localeCompare(b.user.username);
+      return a.user.username.localeCompare(b.user.username)
     } else {
-      return a.role.localeCompare(b.role);
+      return a.role.localeCompare(b.role)
     }
-  });
+  })
 
-  return owner ? [owner, ...rest] : rest;
-});
+  return owner ? [owner, ...rest] : rest
+})
 
 const isMember = computed(
   () => auth.value.user && allMembers.value.some((x) => x.user.id === auth.value.user.id),
-);
+)
 
 const currentMember = computed(() => {
-  let val = auth.value.user ? allMembers.value.find((x) => x.user.id === auth.value.user.id) : null;
+  let val = auth.value.user ? allMembers.value.find((x) => x.user.id === auth.value.user.id) : null
 
   if (!val && auth.value.user && organization.value && organization.value.members) {
-    val = organization.value.members.find((x) => x.user.id === auth.value.user.id);
+    val = organization.value.members.find((x) => x.user.id === auth.value.user.id)
   }
 
   if (!val && auth.value.user && tags.value.staffRoles.includes(auth.value.user.role)) {
@@ -1329,195 +1329,195 @@ const currentMember = computed(() => {
       team_id: project.team_id,
       user: auth.value.user,
       role: auth.value.role,
-      permissions: auth.value.user.role === "admin" ? 1023 : 12,
+      permissions: auth.value.user.role === 'admin' ? 1023 : 12,
       accepted: true,
       payouts_split: 0,
       avatar_url: auth.value.user.avatar_url,
       name: auth.value.user.username,
-    };
+    }
   }
 
-  return val;
-});
+  return val
+})
 
-versions.value = data.$computeVersions(versions.value, allMembers.value);
+versions.value = data.$computeVersions(versions.value, allMembers.value)
 
 // Q: Why do this instead of computing the versions of featuredVersions?
 // A: It will incorrectly generate the version slugs because it doesn't have the full context of
 //    all the versions. For example, if version 1.1.0 for Forge is featured but 1.1.0 for Fabric
 //    is not, but the Fabric one was uploaded first, the Forge version would link to the Fabric
 ///   version
-const featuredIds = featuredVersions.value.map((x) => x.id);
-featuredVersions.value = versions.value.filter((version) => featuredIds.includes(version.id));
+const featuredIds = featuredVersions.value.map((x) => x.id)
+featuredVersions.value = versions.value.filter((version) => featuredIds.includes(version.id))
 
 featuredVersions.value.sort((a, b) => {
-  const aLatest = a.game_versions[a.game_versions.length - 1];
-  const bLatest = b.game_versions[b.game_versions.length - 1];
-  const gameVersions = tags.value.gameVersions.map((e) => e.version);
-  return gameVersions.indexOf(aLatest) - gameVersions.indexOf(bLatest);
-});
+  const aLatest = a.game_versions[a.game_versions.length - 1]
+  const bLatest = b.game_versions[b.game_versions.length - 1]
+  const gameVersions = tags.value.gameVersions.map((e) => e.version)
+  return gameVersions.indexOf(aLatest) - gameVersions.indexOf(bLatest)
+})
 
 const projectTypeDisplay = computed(() =>
   formatProjectType(
     data.$getProjectTypeForDisplay(project.value.project_type, project.value.loaders),
   ),
-);
+)
 
 const following = computed(
   () =>
     user.value && user.value.follows && user.value.follows.find((x) => x.id === project.value.id),
-);
+)
 
-const title = computed(() => `${project.value.title} - Minecraft ${projectTypeDisplay.value}`);
+const title = computed(() => `${project.value.title} - Minecraft ${projectTypeDisplay.value}`)
 const description = computed(
   () =>
     `${project.value.description} - Download the Minecraft ${projectTypeDisplay.value} ${
       project.value.title
-    } by ${members.value.find((x) => x.is_owner)?.user?.username || "a Creator"} on Modrinth`,
-);
+    } by ${members.value.find((x) => x.is_owner)?.user?.username || 'a Creator'} on Modrinth`,
+)
 
 const canCreateServerFrom = computed(() => {
-  return project.value.project_type === "modpack" && project.value.server_side !== "unsupported";
-});
+  return project.value.project_type === 'modpack' && project.value.server_side !== 'unsupported'
+})
 
-if (!route.name.startsWith("type-id-settings")) {
+if (!route.name.startsWith('type-id-settings')) {
   useSeoMeta({
     title: () => title.value,
     description: () => description.value,
     ogTitle: () => title.value,
     ogDescription: () => project.value.description,
-    ogImage: () => project.value.icon_url ?? "https://cdn.modrinth.com/placeholder.png",
+    ogImage: () => project.value.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
     robots: () =>
-      project.value.status === "approved" || project.value.status === "archived"
-        ? "all"
-        : "noindex",
-  });
+      project.value.status === 'approved' || project.value.status === 'archived'
+        ? 'all'
+        : 'noindex',
+  })
 }
 
-const onUserCollectProject = useClientTry(userCollectProject);
+const onUserCollectProject = useClientTry(userCollectProject)
 
-const { version, loader } = route.query;
+const { version, loader } = route.query
 if (version !== undefined && project.value.game_versions.includes(version)) {
-  userSelectedGameVersion.value = version;
+  userSelectedGameVersion.value = version
 }
 if (loader !== undefined && project.value.loaders.includes(loader)) {
-  userSelectedPlatform.value = loader;
+  userSelectedPlatform.value = loader
 }
 
 watch(downloadModal, (modal) => {
-  if (!modal) return;
+  if (!modal) return
 
   // route.hash returns everything in the hash string, including the # itself
-  if (route.hash === "#download") {
-    modal.show();
+  if (route.hash === '#download') {
+    modal.show()
   }
-});
+})
 
 async function setProcessing() {
-  startLoading();
+  startLoading()
 
   try {
     await useBaseFetch(`project/${project.value.id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: {
-        status: "processing",
+        status: 'processing',
       },
-    });
+    })
 
-    project.value.status = "processing";
+    project.value.status = 'processing'
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
 
-  stopLoading();
+  stopLoading()
 }
 
 async function patchProject(resData, quiet = false) {
-  let result = false;
-  startLoading();
+  let result = false
+  startLoading()
 
   try {
     await useBaseFetch(`project/${project.value.id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: resData,
-    });
+    })
 
     for (const key in resData) {
-      project.value[key] = resData[key];
+      project.value[key] = resData[key]
     }
 
     if (resData.license_id) {
-      project.value.license.id = resData.license_id;
+      project.value.license.id = resData.license_id
     }
     if (resData.license_url) {
-      project.value.license.url = resData.license_url;
+      project.value.license.url = resData.license_url
     }
 
-    result = true;
+    result = true
     if (!quiet) {
       data.$notify({
-        group: "main",
-        title: "Project updated",
-        text: "Your project has been updated.",
-        type: "success",
-      });
-      window.scrollTo({ top: 0, behavior: "smooth" });
+        group: 'main',
+        title: 'Project updated',
+        text: 'Your project has been updated.',
+        type: 'success',
+      })
+      window.scrollTo({ top: 0, behavior: 'smooth' })
     }
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
-    window.scrollTo({ top: 0, behavior: "smooth" });
+      type: 'error',
+    })
+    window.scrollTo({ top: 0, behavior: 'smooth' })
   }
 
-  stopLoading();
+  stopLoading()
 
-  return result;
+  return result
 }
 
 async function patchIcon(icon) {
-  let result = false;
-  startLoading();
+  let result = false
+  startLoading()
 
   try {
     await useBaseFetch(
       `project/${project.value.id}/icon?ext=${
-        icon.type.split("/")[icon.type.split("/").length - 1]
+        icon.type.split('/')[icon.type.split('/').length - 1]
       }`,
       {
-        method: "PATCH",
+        method: 'PATCH',
         body: icon,
       },
-    );
-    await resetProject();
-    result = true;
+    )
+    await resetProject()
+    result = true
     data.$notify({
-      group: "main",
-      title: "Project icon updated",
+      group: 'main',
+      title: 'Project icon updated',
       text: "Your project's icon has been updated.",
-      type: "success",
-    });
+      type: 'success',
+    })
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
 
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    window.scrollTo({ top: 0, behavior: 'smooth' })
   }
 
-  stopLoading();
-  return result;
+  stopLoading()
+  return result
 }
 
 async function updateMembers() {
@@ -1527,79 +1527,79 @@ async function updateMembers() {
     {
       transform: (members) => {
         members.forEach((it, index) => {
-          members[index].avatar_url = it.user.avatar_url;
-          members[index].name = it.user.username;
-        });
+          members[index].avatar_url = it.user.avatar_url
+          members[index].name = it.user.username
+        })
 
-        return members;
+        return members
       },
     },
-  );
+  )
 }
 
 async function copyId() {
-  await navigator.clipboard.writeText(project.value.id);
+  await navigator.clipboard.writeText(project.value.id)
 }
 
 async function copyPermalink() {
-  await navigator.clipboard.writeText(`${config.public.siteUrl}/project/${project.value.id}`);
+  await navigator.clipboard.writeText(`${config.public.siteUrl}/project/${project.value.id}`)
 }
 
-const collapsedChecklist = ref(false);
+const collapsedChecklist = ref(false)
 
 const showModerationChecklist = useLocalStorage(
   `show-moderation-checklist-${project.value.id}`,
   false,
-);
-const collapsedModerationChecklist = useLocalStorage("collapsed-moderation-checklist", false);
+)
+const collapsedModerationChecklist = useLocalStorage('collapsed-moderation-checklist', false)
 
 watch(
   showModerationChecklist,
   (newValue) => {
-    setVisible(newValue);
+    setVisible(newValue)
   },
   { immediate: true },
-);
+)
 
 if (import.meta.client && history && history.state && history.state.showChecklist) {
-  showModerationChecklist.value = true;
+  showModerationChecklist.value = true
 }
 
 function closeDownloadModal(event) {
-  downloadModal.value.hide(event);
-  userSelectedPlatform.value = null;
-  userSelectedGameVersion.value = null;
-  showAllVersions.value = false;
+  downloadModal.value.hide(event)
+  userSelectedPlatform.value = null
+  userSelectedGameVersion.value = null
+  showAllVersions.value = false
 }
 
 function triggerDownloadAnimation() {
-  overTheTopDownloadAnimation.value = true;
-  setTimeout(() => (overTheTopDownloadAnimation.value = false), 500);
+  overTheTopDownloadAnimation.value = true
+  setTimeout(() => (overTheTopDownloadAnimation.value = false), 500)
 }
 
 function onDownload(event) {
-  triggerDownloadAnimation();
+  triggerDownloadAnimation()
   setTimeout(() => {
-    closeDownloadModal(event);
-  }, 400);
+    closeDownloadModal(event)
+  }, 400)
 }
 
 async function deleteVersion(id) {
-  if (!id) return;
+  if (!id) return
 
-  startLoading();
+  startLoading()
 
   await useBaseFetch(`version/${id}`, {
-    method: "DELETE",
-  });
+    method: 'DELETE',
+  })
 
-  versions.value = versions.value.filter((x) => x.id !== id);
+  versions.value = versions.value.filter((x) => x.id !== id)
 
-  stopLoading();
+  stopLoading()
 }
 
 const navLinks = computed(() => {
-  const projectUrl = `/${project.value.project_type}/${project.value.slug ? project.value.slug : project.value.id}`;
+  const projectUrl = `/${project.value.project_type}/${project.value.slug ? project.value.slug : project.value.id}`
 
   return [
     {
@@ -1612,7 +1612,7 @@ const navLinks = computed(() => {
       shown: project.value.gallery.length > 0 || !!currentMember.value,
     },
     {
-      label: "Changelog",
+      label: 'Changelog',
       href: `${projectUrl}/changelog`,
       shown: versions.value.length > 0,
     },
@@ -1627,8 +1627,8 @@ const navLinks = computed(() => {
       href: `${projectUrl}/moderation`,
       shown: !!currentMember.value,
     },
-  ];
-});
+  ]
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1769,7 +1769,7 @@ const navLinks = computed(() => {
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-bottom: 6px solid var(--color-button-bg);
-    content: " ";
+    content: ' ';
     position: absolute;
     top: -7px;
     left: 17px;
@@ -1780,7 +1780,7 @@ const navLinks = computed(() => {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-bottom: 5px solid var(--color-raised-bg);
-    content: " ";
+    content: ' ';
     position: absolute;
     top: -5px;
     left: 18px;
diff --git a/apps/frontend/src/pages/[type]/[id]/changelog.vue b/apps/frontend/src/pages/[type]/[id]/changelog.vue
index 331962632..5b5bc5ea5 100644
--- a/apps/frontend/src/pages/[type]/[id]/changelog.vue
+++ b/apps/frontend/src/pages/[type]/[id]/changelog.vue
@@ -43,7 +43,7 @@
               </span>
               <span>
                 on
-                {{ $dayjs(version.date_published).format("MMM D, YYYY") }}</span
+                {{ $dayjs(version.date_published).format('MMM D, YYYY') }}</span
               >
             </div>
             <a
@@ -73,52 +73,52 @@
   </div>
 </template>
 <script setup>
-import { DownloadIcon } from "@modrinth/assets";
-import { Pagination } from "@modrinth/ui";
-import VersionFilterControl from "@modrinth/ui/src/components/version/VersionFilterControl.vue";
+import { DownloadIcon } from '@modrinth/assets'
+import { Pagination } from '@modrinth/ui'
+import VersionFilterControl from '@modrinth/ui/src/components/version/VersionFilterControl.vue'
 
-import { renderHighlightedString } from "~/helpers/highlight.js";
+import { renderHighlightedString } from '~/helpers/highlight.js'
 
 const props = defineProps({
   project: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
   versions: {
     type: Array,
     default() {
-      return [];
+      return []
     },
   },
   members: {
     type: Array,
     default() {
-      return [];
+      return []
     },
   },
-});
+})
 
-const title = `${props.project.title} - Changelog`;
-const description = `View the changelog of ${props.project.title}'s ${props.versions.length} versions.`;
+const title = `${props.project.title} - Changelog`
+const description = `View the changelog of ${props.project.title}'s ${props.versions.length} versions.`
 
 useSeoMeta({
   title,
   description,
   ogTitle: title,
   ogDescription: description,
-});
+})
 
-const router = useNativeRouter();
-const route = useNativeRoute();
-const tags = useTags();
+const router = useNativeRouter()
+const route = useNativeRoute()
+const tags = useTags()
 
-const currentPage = ref(Number(route.query.page ?? 1));
+const currentPage = ref(Number(route.query.page ?? 1))
 const filteredVersions = computed(() => {
-  const selectedGameVersions = getArrayOrString(route.query.g) ?? [];
-  const selectedLoaders = getArrayOrString(route.query.l) ?? [];
-  const selectedVersionTypes = getArrayOrString(route.query.c) ?? [];
+  const selectedGameVersions = getArrayOrString(route.query.g) ?? []
+  const selectedLoaders = getArrayOrString(route.query.l) ?? []
+  const selectedVersionTypes = getArrayOrString(route.query.c) ?? []
 
   return props.versions.filter(
     (projectVersion) =>
@@ -130,25 +130,25 @@ const filteredVersions = computed(() => {
         selectedLoaders.some((loader) => projectVersion.loaders.includes(loader))) &&
       (selectedVersionTypes.length === 0 ||
         selectedVersionTypes.includes(projectVersion.version_type)),
-  );
-});
+  )
+})
 
 function switchPage(page) {
-  currentPage.value = page;
+  currentPage.value = page
 
   router.replace({
     query: {
       ...route.query,
       page: currentPage.value !== 1 ? currentPage.value : undefined,
     },
-  });
+  })
 }
 
 function updateQuery(newQueries) {
   if (newQueries.page) {
-    currentPage.value = Number(newQueries.page);
+    currentPage.value = Number(newQueries.page)
   } else if (newQueries.page === undefined) {
-    currentPage.value = 1;
+    currentPage.value = 1
   }
 
   router.replace({
@@ -156,7 +156,7 @@ function updateQuery(newQueries) {
       ...route.query,
       ...newQueries,
     },
-  });
+  })
 }
 </script>
 
@@ -204,7 +204,7 @@ function updateQuery(newQueries) {
     background-color: var(--color);
 
     &:before {
-      content: "";
+      content: '';
       width: 1rem;
       height: 1rem;
       position: absolute;
diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue
index e36f1d19d..b56ec78e7 100644
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -9,7 +9,7 @@
         <div class="gallery-file-input">
           <div class="file-header">
             <ImageIcon aria-hidden="true" />
-            <strong>{{ editFile ? editFile.name : "Current image" }}</strong>
+            <strong>{{ editFile ? editFile.name : 'Current image' }}</strong>
             <FileInput
               v-if="editIndex === -1"
               class="iconified-button raised-button"
@@ -20,8 +20,8 @@
               aria-label="Replace image"
               @change="
                 (x) => {
-                  editFile = x[0];
-                  showPreviewImage();
+                  editFile = x[0]
+                  showPreviewImage()
                 }
               "
             >
@@ -237,20 +237,20 @@
         <div class="gallery-bottom">
           <div class="gallery-created">
             <CalendarIcon aria-hidden="true" aria-label="Date created" />
-            {{ $dayjs(item.created).format("MMMM D, YYYY") }}
+            {{ $dayjs(item.created).format('MMMM D, YYYY') }}
           </div>
           <div v-if="currentMember" class="gallery-buttons input-group">
             <button
               class="iconified-button"
               @click="
                 () => {
-                  resetEdit();
-                  editIndex = index;
-                  editTitle = item.title;
-                  editDescription = item.description;
-                  editFeatured = item.featured;
-                  editOrder = item.ordering;
-                  $refs.modal_edit_item.show();
+                  resetEdit()
+                  editIndex = index
+                  editTitle = item.title
+                  editDescription = item.description
+                  editFeatured = item.featured
+                  editOrder = item.ordering
+                  $refs.modal_edit_item.show()
                 }
               "
             >
@@ -261,8 +261,8 @@
               class="iconified-button"
               @click="
                 () => {
-                  deleteIndex = index;
-                  $refs.modal_confirm.show();
+                  deleteIndex = index
+                  $refs.modal_confirm.show()
                 }
               "
             >
@@ -294,25 +294,25 @@ import {
   TrashIcon,
   UploadIcon,
   XIcon,
-} from "@modrinth/assets";
-import { ConfirmModal } from "@modrinth/ui";
+} from '@modrinth/assets'
+import { ConfirmModal } from '@modrinth/ui'
 
-import DropArea from "~/components/ui/DropArea.vue";
-import FileInput from "~/components/ui/FileInput.vue";
-import Modal from "~/components/ui/Modal.vue";
-import { isPermission } from "~/utils/permissions.ts";
+import DropArea from '~/components/ui/DropArea.vue'
+import FileInput from '~/components/ui/FileInput.vue'
+import Modal from '~/components/ui/Modal.vue'
+import { isPermission } from '~/utils/permissions.ts'
 
 const props = defineProps({
   project: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
   currentMember: {
     type: Object,
     default() {
-      return null;
+      return null
     },
   },
   resetProject: {
@@ -320,17 +320,17 @@ const props = defineProps({
     required: true,
     default: () => {},
   },
-});
+})
 
-const title = `${props.project.title} - Gallery`;
-const description = `View ${props.project.gallery.length} images of ${props.project.title} on Modrinth.`;
+const title = `${props.project.title} - Gallery`
+const description = `View ${props.project.gallery.length} images of ${props.project.title} on Modrinth.`
 
 useSeoMeta({
   title,
   description,
   ogTitle: title,
   ogDescription: description,
-});
+})
 </script>
 
 <script>
@@ -344,162 +344,162 @@ export default defineNuxtComponent({
       deleteIndex: -1,
 
       editIndex: -1,
-      editTitle: "",
-      editDescription: "",
+      editTitle: '',
+      editDescription: '',
       editFeatured: false,
       editOrder: null,
       editFile: null,
       previewImage: null,
       shouldPreventActions: false,
-    };
+    }
   },
   computed: {
     acceptFileTypes() {
-      return "image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp";
+      return 'image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp'
     },
   },
   mounted() {
     this._keyListener = function (e) {
       if (this.expandedGalleryItem) {
-        e.preventDefault();
-        if (e.key === "Escape") {
-          this.expandedGalleryItem = null;
-        } else if (e.key === "ArrowLeft") {
-          e.stopPropagation();
-          this.previousImage();
-        } else if (e.key === "ArrowRight") {
-          e.stopPropagation();
-          this.nextImage();
+        e.preventDefault()
+        if (e.key === 'Escape') {
+          this.expandedGalleryItem = null
+        } else if (e.key === 'ArrowLeft') {
+          e.stopPropagation()
+          this.previousImage()
+        } else if (e.key === 'ArrowRight') {
+          e.stopPropagation()
+          this.nextImage()
         }
       }
-    };
+    }
 
-    document.addEventListener("keydown", this._keyListener.bind(this));
+    document.addEventListener('keydown', this._keyListener.bind(this))
   },
   methods: {
     nextImage() {
-      this.expandedGalleryIndex++;
+      this.expandedGalleryIndex++
       if (this.expandedGalleryIndex >= this.project.gallery.length) {
-        this.expandedGalleryIndex = 0;
+        this.expandedGalleryIndex = 0
       }
-      this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex];
+      this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex]
     },
     previousImage() {
-      this.expandedGalleryIndex--;
+      this.expandedGalleryIndex--
       if (this.expandedGalleryIndex < 0) {
-        this.expandedGalleryIndex = this.project.gallery.length - 1;
+        this.expandedGalleryIndex = this.project.gallery.length - 1
       }
-      this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex];
+      this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex]
     },
     expandImage(item, index) {
-      this.expandedGalleryItem = item;
-      this.expandedGalleryIndex = index;
-      this.zoomedIn = false;
+      this.expandedGalleryItem = item
+      this.expandedGalleryIndex = index
+      this.zoomedIn = false
     },
     resetEdit() {
-      this.editIndex = -1;
-      this.editTitle = "";
-      this.editDescription = "";
-      this.editFeatured = false;
-      this.editOrder = null;
-      this.editFile = null;
-      this.previewImage = null;
+      this.editIndex = -1
+      this.editTitle = ''
+      this.editDescription = ''
+      this.editFeatured = false
+      this.editOrder = null
+      this.editFile = null
+      this.previewImage = null
     },
     handleFiles(files) {
-      this.resetEdit();
-      this.editFile = files[0];
+      this.resetEdit()
+      this.editFile = files[0]
 
-      this.showPreviewImage();
-      this.$refs.modal_edit_item.show();
+      this.showPreviewImage()
+      this.$refs.modal_edit_item.show()
     },
     showPreviewImage() {
-      const reader = new FileReader();
+      const reader = new FileReader()
       if (this.editFile instanceof Blob) {
-        reader.readAsDataURL(this.editFile);
+        reader.readAsDataURL(this.editFile)
         reader.onload = (event) => {
-          this.previewImage = event.target.result;
-        };
+          this.previewImage = event.target.result
+        }
       }
     },
     async createGalleryItem() {
-      this.shouldPreventActions = true;
-      startLoading();
+      this.shouldPreventActions = true
+      startLoading()
 
       try {
         let url = `project/${this.project.id}/gallery?ext=${
           this.editFile
-            ? this.editFile.type.split("/")[this.editFile.type.split("/").length - 1]
+            ? this.editFile.type.split('/')[this.editFile.type.split('/').length - 1]
             : null
-        }&featured=${this.editFeatured}`;
+        }&featured=${this.editFeatured}`
 
         if (this.editTitle) {
-          url += `&title=${encodeURIComponent(this.editTitle)}`;
+          url += `&title=${encodeURIComponent(this.editTitle)}`
         }
         if (this.editDescription) {
-          url += `&description=${encodeURIComponent(this.editDescription)}`;
+          url += `&description=${encodeURIComponent(this.editDescription)}`
         }
         if (this.editOrder) {
-          url += `&ordering=${this.editOrder}`;
+          url += `&ordering=${this.editOrder}`
         }
 
         await useBaseFetch(url, {
-          method: "POST",
+          method: 'POST',
           body: this.editFile,
-        });
-        await this.resetProject();
+        })
+        await this.resetProject()
 
-        this.$refs.modal_edit_item.hide();
+        this.$refs.modal_edit_item.hide()
       } catch (err) {
         this.$notify({
-          group: "main",
-          title: "An error occurred",
+          group: 'main',
+          title: 'An error occurred',
           text: err.data ? err.data.description : err,
-          type: "error",
-        });
+          type: 'error',
+        })
       }
 
-      stopLoading();
-      this.shouldPreventActions = false;
+      stopLoading()
+      this.shouldPreventActions = false
     },
     async editGalleryItem() {
-      this.shouldPreventActions = true;
-      startLoading();
+      this.shouldPreventActions = true
+      startLoading()
 
       try {
         let url = `project/${this.project.id}/gallery?url=${encodeURIComponent(
           this.project.gallery[this.editIndex].url,
-        )}&featured=${this.editFeatured}`;
+        )}&featured=${this.editFeatured}`
 
         if (this.editTitle) {
-          url += `&title=${encodeURIComponent(this.editTitle)}`;
+          url += `&title=${encodeURIComponent(this.editTitle)}`
         }
         if (this.editDescription) {
-          url += `&description=${encodeURIComponent(this.editDescription)}`;
+          url += `&description=${encodeURIComponent(this.editDescription)}`
         }
         if (this.editOrder) {
-          url += `&ordering=${this.editOrder}`;
+          url += `&ordering=${this.editOrder}`
         }
 
         await useBaseFetch(url, {
-          method: "PATCH",
-        });
+          method: 'PATCH',
+        })
 
-        await this.resetProject();
-        this.$refs.modal_edit_item.hide();
+        await this.resetProject()
+        this.$refs.modal_edit_item.hide()
       } catch (err) {
         this.$notify({
-          group: "main",
-          title: "An error occurred",
+          group: 'main',
+          title: 'An error occurred',
           text: err.data ? err.data.description : err,
-          type: "error",
-        });
+          type: 'error',
+        })
       }
 
-      stopLoading();
-      this.shouldPreventActions = false;
+      stopLoading()
+      this.shouldPreventActions = false
     },
     async deleteGalleryImage() {
-      startLoading();
+      startLoading()
 
       try {
         await useBaseFetch(
@@ -507,24 +507,24 @@ export default defineNuxtComponent({
             this.project.gallery[this.deleteIndex].url,
           )}`,
           {
-            method: "DELETE",
+            method: 'DELETE',
           },
-        );
+        )
 
-        await this.resetProject();
+        await this.resetProject()
       } catch (err) {
         this.$notify({
-          group: "main",
-          title: "An error occurred",
+          group: 'main',
+          title: 'An error occurred',
           text: err.data ? err.data.description : err,
-          type: "error",
-        });
+          type: 'error',
+        })
       }
 
-      stopLoading();
+      stopLoading()
     },
   },
-});
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/[type]/[id]/index.vue b/apps/frontend/src/pages/[type]/[id]/index.vue
index 9c81a6e13..591b2865e 100644
--- a/apps/frontend/src/pages/[type]/[id]/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/index.vue
@@ -7,32 +7,32 @@
 </template>
 
 <script setup>
-import { ProjectPageDescription } from "@modrinth/ui";
+import { ProjectPageDescription } from '@modrinth/ui'
 
 defineProps({
   project: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
   versions: {
     type: Array,
     default() {
-      return {};
+      return {}
     },
   },
   members: {
     type: Array,
     default() {
-      return {};
+      return {}
     },
   },
   organization: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/[type]/[id]/moderation.vue b/apps/frontend/src/pages/[type]/[id]/moderation.vue
index 6dbd02248..7fecc9d04 100644
--- a/apps/frontend/src/pages/[type]/[id]/moderation.vue
+++ b/apps/frontend/src/pages/[type]/[id]/moderation.vue
@@ -99,10 +99,10 @@
   </div>
 </template>
 <script setup>
-import { CheckIcon, IssuesIcon,XIcon } from "@modrinth/assets";
-import { Badge } from "@modrinth/ui";
+import { CheckIcon, IssuesIcon, XIcon } from '@modrinth/assets'
+import { Badge } from '@modrinth/ui'
 
-import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
+import ConversationThread from '~/components/ui/thread/ConversationThread.vue'
 import {
   getProjectLink,
   isApproved,
@@ -110,19 +110,19 @@ import {
   isPrivate,
   isRejected,
   isUnderReview,
-} from "~/helpers/projects.js";
+} from '~/helpers/projects.js'
 
 const props = defineProps({
   project: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
   currentMember: {
     type: Object,
     default() {
-      return null;
+      return null
     },
   },
   resetProject: {
@@ -130,39 +130,39 @@ const props = defineProps({
     required: true,
     default: () => {},
   },
-});
+})
 
-const app = useNuxtApp();
-const auth = await useAuth();
+const app = useNuxtApp()
+const auth = await useAuth()
 
 const { data: thread } = await useAsyncData(`thread/${props.project.thread_id}`, () =>
   useBaseFetch(`thread/${props.project.thread_id}`),
-);
+)
 async function setStatus(status) {
-  startLoading();
+  startLoading()
 
   try {
-    const data = {};
-    data.status = status;
+    const data = {}
+    data.status = status
     await useBaseFetch(`project/${props.project.id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: data,
-    });
+    })
 
-    const project = props.project;
-    project.status = status;
-    await props.resetProject();
-    thread.value = await useBaseFetch(`thread/${thread.value.id}`);
+    const project = props.project
+    project.status = status
+    await props.resetProject()
+    thread.value = await useBaseFetch(`thread/${thread.value.id}`)
   } catch (err) {
     app.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
 
-  stopLoading();
+  stopLoading()
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue b/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
index 75ee9b51e..7dbcc6e0a 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
@@ -15,16 +15,16 @@
 </template>
 
 <script setup>
-import ChartDisplay from "~/components/ui/charts/ChartDisplay.vue";
+import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
 
 const props = defineProps({
   project: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
-});
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/description.vue b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
index 4da6ca263..fb5771e9a 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/description.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/description.vue
@@ -38,49 +38,49 @@
 </template>
 
 <script lang="ts" setup>
-import { SaveIcon } from "@modrinth/assets";
-import { MarkdownEditor } from "@modrinth/ui";
-import { type Project, type TeamMember, TeamMemberPermission } from "@modrinth/utils";
-import { computed, ref } from "vue";
+import { SaveIcon } from '@modrinth/assets'
+import { MarkdownEditor } from '@modrinth/ui'
+import { type Project, type TeamMember, TeamMemberPermission } from '@modrinth/utils'
+import { computed, ref } from 'vue'
 
-import { useImageUpload } from "~/composables/image-upload.ts";
+import { useImageUpload } from '~/composables/image-upload.ts'
 
 const props = defineProps<{
-  project: Project;
-  allMembers: TeamMember[];
-  currentMember: TeamMember | undefined;
-  patchProject: (payload: object, quiet?: boolean) => object;
-}>();
+  project: Project
+  allMembers: TeamMember[]
+  currentMember: TeamMember | undefined
+  patchProject: (payload: object, quiet?: boolean) => object
+}>()
 
-const description = ref(props.project.body);
+const description = ref(props.project.body)
 
 const patchRequestPayload = computed(() => {
   const payload: {
-    body?: string;
-  } = {};
+    body?: string
+  } = {}
 
   if (description.value !== props.project.body) {
-    payload.body = description.value;
+    payload.body = description.value
   }
 
-  return payload;
-});
+  return payload
+})
 
 const hasChanges = computed(() => {
-  return Object.keys(patchRequestPayload.value).length > 0;
-});
+  return Object.keys(patchRequestPayload.value).length > 0
+})
 
 function saveChanges() {
-  props.patchProject(patchRequestPayload.value);
+  props.patchProject(patchRequestPayload.value)
 }
 
 async function onUploadHandler(file: File) {
   const response = await useImageUpload(file, {
-    context: "project",
+    context: 'project',
     projectID: props.project.id,
-  });
+  })
 
-  return response.url;
+  return response.url
 }
 </script>
 
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
index 1a8570d2e..fa71c900f 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue
@@ -164,12 +164,12 @@
                   class="good"
                 />
                 <XIcon v-else class="bad" />
-                {{ hasModifiedVisibility() ? "Will be v" : "V" }}isible in search
+                {{ hasModifiedVisibility() ? 'Will be v' : 'V' }}isible in search
               </li>
               <li>
                 <XIcon v-if="visibility === 'unlisted' || visibility === 'private'" class="bad" />
                 <CheckIcon v-else class="good" />
-                {{ hasModifiedVisibility() ? "Will be v" : "V" }}isible on profile
+                {{ hasModifiedVisibility() ? 'Will be v' : 'V' }}isible on profile
               </li>
               <li>
                 <CheckIcon v-if="visibility !== 'private'" class="good" />
@@ -183,7 +183,7 @@
                   }"
                   class="warn"
                 />
-                {{ hasModifiedVisibility() ? "Will be v" : "V" }}isible via URL
+                {{ hasModifiedVisibility() ? 'Will be v' : 'V' }}isible via URL
               </li>
             </ul>
           </div>
@@ -239,12 +239,12 @@
 </template>
 
 <script setup>
-import { CheckIcon,IssuesIcon, SaveIcon, TrashIcon, UploadIcon, XIcon } from "@modrinth/assets";
-import { Avatar,ConfirmModal } from "@modrinth/ui";
-import { formatProjectStatus, formatProjectType } from "@modrinth/utils";
-import { Multiselect } from "vue-multiselect";
+import { CheckIcon, IssuesIcon, SaveIcon, TrashIcon, UploadIcon, XIcon } from '@modrinth/assets'
+import { Avatar, ConfirmModal } from '@modrinth/ui'
+import { formatProjectStatus, formatProjectType } from '@modrinth/utils'
+import { Multiselect } from 'vue-multiselect'
 
-import FileInput from "~/components/ui/FileInput.vue";
+import FileInput from '~/components/ui/FileInput.vue'
 
 const props = defineProps({
   project: {
@@ -272,134 +272,134 @@ const props = defineProps({
     required: true,
     default: () => {},
   },
-});
+})
 
-const tags = useTags();
-const router = useNativeRouter();
+const tags = useTags()
+const router = useNativeRouter()
 
-const name = ref(props.project.title);
-const slug = ref(props.project.slug);
-const summary = ref(props.project.description);
-const icon = ref(null);
-const previewImage = ref(null);
-const clientSide = ref(props.project.client_side);
-const serverSide = ref(props.project.server_side);
-const deletedIcon = ref(false);
+const name = ref(props.project.title)
+const slug = ref(props.project.slug)
+const summary = ref(props.project.description)
+const icon = ref(null)
+const previewImage = ref(null)
+const clientSide = ref(props.project.client_side)
+const serverSide = ref(props.project.server_side)
+const deletedIcon = ref(false)
 const visibility = ref(
   tags.value.approvedStatuses.includes(props.project.status)
     ? props.project.status
     : props.project.requested_status,
-);
+)
 
 const hasPermission = computed(() => {
-  const EDIT_DETAILS = 1 << 2;
-  return (props.currentMember.permissions & EDIT_DETAILS) === EDIT_DETAILS;
-});
+  const EDIT_DETAILS = 1 << 2
+  return (props.currentMember.permissions & EDIT_DETAILS) === EDIT_DETAILS
+})
 
 const hasDeletePermission = computed(() => {
-  const DELETE_PROJECT = 1 << 7;
-  return (props.currentMember.permissions & DELETE_PROJECT) === DELETE_PROJECT;
-});
+  const DELETE_PROJECT = 1 << 7
+  return (props.currentMember.permissions & DELETE_PROJECT) === DELETE_PROJECT
+})
 
-const sideTypes = ["required", "optional", "unsupported"];
+const sideTypes = ['required', 'optional', 'unsupported']
 
 const patchData = computed(() => {
-  const data = {};
+  const data = {}
 
   if (name.value !== props.project.title) {
-    data.title = name.value.trim();
+    data.title = name.value.trim()
   }
   if (slug.value !== props.project.slug) {
-    data.slug = slug.value.trim();
+    data.slug = slug.value.trim()
   }
   if (summary.value !== props.project.description) {
-    data.description = summary.value.trim();
+    data.description = summary.value.trim()
   }
   if (clientSide.value !== props.project.client_side) {
-    data.client_side = clientSide.value;
+    data.client_side = clientSide.value
   }
   if (serverSide.value !== props.project.server_side) {
-    data.server_side = serverSide.value;
+    data.server_side = serverSide.value
   }
   if (tags.value.approvedStatuses.includes(props.project.status)) {
     if (visibility.value !== props.project.status) {
-      data.status = visibility.value;
+      data.status = visibility.value
     }
   } else if (visibility.value !== props.project.requested_status) {
-    data.requested_status = visibility.value;
+    data.requested_status = visibility.value
   }
 
-  return data;
-});
+  return data
+})
 
 const hasChanges = computed(() => {
-  return Object.keys(patchData.value).length > 0 || deletedIcon.value || icon.value;
-});
+  return Object.keys(patchData.value).length > 0 || deletedIcon.value || icon.value
+})
 
 const hasModifiedVisibility = () => {
   const originalVisibility = tags.value.approvedStatuses.includes(props.project.status)
     ? props.project.status
-    : props.project.requested_status;
+    : props.project.requested_status
 
-  return originalVisibility !== visibility.value;
-};
+  return originalVisibility !== visibility.value
+}
 
 const saveChanges = async () => {
   if (hasChanges.value) {
-    await props.patchProject(patchData.value);
+    await props.patchProject(patchData.value)
   }
 
   if (deletedIcon.value) {
-    await deleteIcon();
-    deletedIcon.value = false;
+    await deleteIcon()
+    deletedIcon.value = false
   } else if (icon.value) {
-    await props.patchIcon(icon.value);
-    icon.value = null;
+    await props.patchIcon(icon.value)
+    icon.value = null
   }
-};
+}
 
 const showPreviewImage = (files) => {
-  const reader = new FileReader();
-  icon.value = files[0];
-  deletedIcon.value = false;
-  reader.readAsDataURL(icon.value);
+  const reader = new FileReader()
+  icon.value = files[0]
+  deletedIcon.value = false
+  reader.readAsDataURL(icon.value)
   reader.onload = (event) => {
-    previewImage.value = event.target.result;
-  };
-};
+    previewImage.value = event.target.result
+  }
+}
 
 const deleteProject = async () => {
   await useBaseFetch(`project/${props.project.id}`, {
-    method: "DELETE",
-  });
-  await initUserProjects();
-  await router.push("/dashboard/projects");
+    method: 'DELETE',
+  })
+  await initUserProjects()
+  await router.push('/dashboard/projects')
   addNotification({
-    group: "main",
-    title: "Project deleted",
-    text: "Your project has been deleted.",
-    type: "success",
-  });
-};
+    group: 'main',
+    title: 'Project deleted',
+    text: 'Your project has been deleted.',
+    type: 'success',
+  })
+}
 
 const markIconForDeletion = () => {
-  deletedIcon.value = true;
-  icon.value = null;
-  previewImage.value = null;
-};
+  deletedIcon.value = true
+  icon.value = null
+  previewImage.value = null
+}
 
 const deleteIcon = async () => {
   await useBaseFetch(`project/${props.project.id}/icon`, {
-    method: "DELETE",
-  });
-  await props.resetProject();
+    method: 'DELETE',
+  })
+  await props.resetProject()
   addNotification({
-    group: "main",
-    title: "Project icon removed",
+    group: 'main',
+    title: 'Project icon removed',
     text: "Your project's icon has been removed.",
-    type: "success",
-  });
-};
+    type: 'success',
+  })
+}
 </script>
 <style lang="scss" scoped>
 .visibility-info {
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/license.vue b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
index 5e1081d52..3f107728d 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/license.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/license.vue
@@ -154,8 +154,8 @@
 </template>
 
 <script setup lang="ts">
-import { SaveIcon } from "@modrinth/assets";
-import { Checkbox, DropdownSelect } from "@modrinth/ui";
+import { SaveIcon } from '@modrinth/assets'
+import { Checkbox, DropdownSelect } from '@modrinth/ui'
 import {
   type BuiltinLicense,
   builtinLicenses,
@@ -163,99 +163,99 @@ import {
   type Project,
   type TeamMember,
   TeamMemberPermission,
-} from "@modrinth/utils";
-import { computed, type Ref,ref } from "vue";
+} from '@modrinth/utils'
+import { computed, type Ref, ref } from 'vue'
 
 const props = defineProps<{
-  project: Project;
-  currentMember: TeamMember | undefined;
-  patchProject: (payload: object, quiet?: boolean) => object;
-}>();
+  project: Project
+  currentMember: TeamMember | undefined
+  patchProject: (payload: object, quiet?: boolean) => object
+}>()
 
-const licenseUrl = ref(props.project.license.url);
+const licenseUrl = ref(props.project.license.url)
 const license: Ref<{
-  friendly: string;
-  short: string;
-  requiresOnlyOrLater?: boolean;
+  friendly: string
+  short: string
+  requiresOnlyOrLater?: boolean
 }> = ref({
-  friendly: "",
-  short: "",
+  friendly: '',
+  short: '',
   requiresOnlyOrLater: false,
-});
+})
 
-const allowOrLater = ref(props.project.license.id.includes("-or-later"));
-const nonSpdxLicense = ref(props.project.license.id.includes("LicenseRef-"));
+const allowOrLater = ref(props.project.license.id.includes('-or-later'))
+const nonSpdxLicense = ref(props.project.license.id.includes('LicenseRef-'))
 
-const oldLicenseId = props.project.license.id;
+const oldLicenseId = props.project.license.id
 const trimmedLicenseId = oldLicenseId
-  .replaceAll("-only", "")
-  .replaceAll("-or-later", "")
-  .replaceAll("LicenseRef-", "");
+  .replaceAll('-only', '')
+  .replaceAll('-or-later', '')
+  .replaceAll('LicenseRef-', '')
 
 license.value = builtinLicenses.find((x) => x.short === trimmedLicenseId) ?? {
-  friendly: "Custom",
-  short: oldLicenseId.replaceAll("LicenseRef-", ""),
-  requiresOnlyOrLater: oldLicenseId.includes("-or-later"),
-};
+  friendly: 'Custom',
+  short: oldLicenseId.replaceAll('LicenseRef-', ''),
+  requiresOnlyOrLater: oldLicenseId.includes('-or-later'),
+}
 
-if (oldLicenseId === "LicenseRef-Unknown") {
+if (oldLicenseId === 'LicenseRef-Unknown') {
   // Mark it as not having a license, forcing the user to select one
   license.value = {
-    friendly: "",
-    short: oldLicenseId.replaceAll("LicenseRef-", ""),
+    friendly: '',
+    short: oldLicenseId.replaceAll('LicenseRef-', ''),
     requiresOnlyOrLater: false,
-  };
+  }
 }
 
 const hasPermission = computed(() => {
-  return (props.currentMember?.permissions ?? 0) & TeamMemberPermission.EDIT_DETAILS;
-});
+  return (props.currentMember?.permissions ?? 0) & TeamMemberPermission.EDIT_DETAILS
+})
 
 const licenseId = computed(() => {
-  let id = "";
+  let id = ''
 
   if (
-    (nonSpdxLicense.value && license.value.friendly === "Custom") ||
-    license.value.short === "All-Rights-Reserved" ||
-    license.value.short === "Unknown"
+    (nonSpdxLicense.value && license.value.friendly === 'Custom') ||
+    license.value.short === 'All-Rights-Reserved' ||
+    license.value.short === 'Unknown'
   ) {
-    id += "LicenseRef-";
+    id += 'LicenseRef-'
   }
 
-  id += license.value.short;
+  id += license.value.short
   if (license.value.requiresOnlyOrLater) {
-    id += allowOrLater.value ? "-or-later" : "-only";
+    id += allowOrLater.value ? '-or-later' : '-only'
   }
 
-  if (nonSpdxLicense.value && license.value.friendly === "Custom") {
-    id = id.replaceAll(" ", "-");
+  if (nonSpdxLicense.value && license.value.friendly === 'Custom') {
+    id = id.replaceAll(' ', '-')
   }
 
-  return id;
-});
+  return id
+})
 
 const patchRequestPayload = computed(() => {
   const payload: {
-    license_id?: string;
-    license_url?: string | null; // null = remove url
-  } = {};
+    license_id?: string
+    license_url?: string | null // null = remove url
+  } = {}
 
   if (licenseId.value !== props.project.license.id) {
-    payload.license_id = licenseId.value;
+    payload.license_id = licenseId.value
   }
 
   if (licenseUrl.value !== props.project.license.url) {
-    payload.license_url = licenseUrl.value ? licenseUrl.value : null;
+    payload.license_url = licenseUrl.value ? licenseUrl.value : null
   }
 
-  return payload;
-});
+  return payload
+})
 
 const hasChanges = computed(() => {
-  return Object.keys(patchRequestPayload.value).length > 0;
-});
+  return Object.keys(patchRequestPayload.value).length > 0
+})
 
 function saveChanges() {
-  props.patchProject(patchRequestPayload.value);
+  props.patchProject(patchRequestPayload.value)
 }
 </script>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/links.vue b/apps/frontend/src/pages/[type]/[id]/settings/links.vue
index 3ef77ed89..04b689655 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/links.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/links.vue
@@ -122,67 +122,67 @@
 </template>
 
 <script setup>
-import { SaveIcon } from "@modrinth/assets";
-import { DropdownSelect } from "@modrinth/ui";
+import { SaveIcon } from '@modrinth/assets'
+import { DropdownSelect } from '@modrinth/ui'
 
-const tags = useTags();
+const tags = useTags()
 
 const props = defineProps({
   project: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
   currentMember: {
     type: Object,
     default() {
-      return null;
+      return null
     },
   },
   patchProject: {
     type: Function,
     default() {
-      return () => {};
+      return () => {}
     },
   },
-});
+})
 
-const issuesUrl = ref(props.project.issues_url);
-const sourceUrl = ref(props.project.source_url);
-const wikiUrl = ref(props.project.wiki_url);
-const discordUrl = ref(props.project.discord_url);
+const issuesUrl = ref(props.project.issues_url)
+const sourceUrl = ref(props.project.source_url)
+const wikiUrl = ref(props.project.wiki_url)
+const discordUrl = ref(props.project.discord_url)
 
-const rawDonationLinks = JSON.parse(JSON.stringify(props.project.donation_urls));
+const rawDonationLinks = JSON.parse(JSON.stringify(props.project.donation_urls))
 rawDonationLinks.push({
   id: null,
   platform: null,
   url: null,
-});
-const donationLinks = ref(rawDonationLinks);
+})
+const donationLinks = ref(rawDonationLinks)
 
 const hasPermission = computed(() => {
-  const EDIT_DETAILS = 1 << 2;
-  return (props.currentMember.permissions & EDIT_DETAILS) === EDIT_DETAILS;
-});
+  const EDIT_DETAILS = 1 << 2
+  return (props.currentMember.permissions & EDIT_DETAILS) === EDIT_DETAILS
+})
 
 const patchData = computed(() => {
-  const data = {};
+  const data = {}
 
   if (checkDifference(issuesUrl.value, props.project.issues_url)) {
-    data.issues_url = issuesUrl.value === "" ? null : issuesUrl.value.trim();
+    data.issues_url = issuesUrl.value === '' ? null : issuesUrl.value.trim()
   }
   if (checkDifference(sourceUrl.value, props.project.source_url)) {
-    data.source_url = sourceUrl.value === "" ? null : sourceUrl.value.trim();
+    data.source_url = sourceUrl.value === '' ? null : sourceUrl.value.trim()
   }
   if (checkDifference(wikiUrl.value, props.project.wiki_url)) {
-    data.wiki_url = wikiUrl.value === "" ? null : wikiUrl.value.trim();
+    data.wiki_url = wikiUrl.value === '' ? null : wikiUrl.value.trim()
   }
   if (checkDifference(discordUrl.value, props.project.discord_url)) {
-    data.discord_url = discordUrl.value === "" ? null : discordUrl.value.trim();
+    data.discord_url = discordUrl.value === '' ? null : discordUrl.value.trim()
   }
 
-  const validDonationLinks = donationLinks.value.filter((link) => link.url && link.id);
+  const validDonationLinks = donationLinks.value.filter((link) => link.url && link.id)
 
   if (
     validDonationLinks !== props.project.donation_urls &&
@@ -192,70 +192,70 @@ const patchData = computed(() => {
       validDonationLinks.length === 0
     )
   ) {
-    data.donation_urls = validDonationLinks;
+    data.donation_urls = validDonationLinks
   }
 
   if (data.donation_urls) {
     data.donation_urls.forEach((link) => {
-      const platform = tags.value.donationPlatforms.find((platform) => platform.short === link.id);
-      link.platform = platform.name;
-    });
+      const platform = tags.value.donationPlatforms.find((platform) => platform.short === link.id)
+      link.platform = platform.name
+    })
   }
 
-  return data;
-});
+  return data
+})
 
 const hasChanges = computed(() => {
-  return Object.keys(patchData.value).length > 0;
-});
+  return Object.keys(patchData.value).length > 0
+})
 
 async function saveChanges() {
   if (patchData.value && (await props.patchProject(patchData.value))) {
-    donationLinks.value = JSON.parse(JSON.stringify(props.project.donation_urls));
+    donationLinks.value = JSON.parse(JSON.stringify(props.project.donation_urls))
     donationLinks.value.push({
       id: null,
       platform: null,
       url: null,
-    });
+    })
   }
 }
 
 function updateDonationLinks() {
-  const links = donationLinks.value;
+  const links = donationLinks.value
   links.forEach((link) => {
     if (link.url) {
-      const url = link.url.toLowerCase();
-      if (url.includes("patreon.com")) {
-        link.id = "patreon";
-      } else if (url.includes("ko-fi.com")) {
-        link.id = "ko-fi";
-      } else if (url.includes("paypal.com") || url.includes("paypal.me")) {
-        link.id = "paypal";
-      } else if (url.includes("buymeacoffee.com") || url.includes("buymeacoff.ee")) {
-        link.id = "bmac";
-      } else if (url.includes("github.com/sponsors")) {
-        link.id = "github";
+      const url = link.url.toLowerCase()
+      if (url.includes('patreon.com')) {
+        link.id = 'patreon'
+      } else if (url.includes('ko-fi.com')) {
+        link.id = 'ko-fi'
+      } else if (url.includes('paypal.com') || url.includes('paypal.me')) {
+        link.id = 'paypal'
+      } else if (url.includes('buymeacoffee.com') || url.includes('buymeacoff.ee')) {
+        link.id = 'bmac'
+      } else if (url.includes('github.com/sponsors')) {
+        link.id = 'github'
       }
     }
-  });
+  })
   if (!links.find((link) => !(link.url && link.id))) {
     links.push({
       id: null,
       platform: null,
       url: null,
-    });
+    })
   }
-  donationLinks.value = links;
+  donationLinks.value = links
 }
 
 function checkDifference(newLink, existingLink) {
-  if (newLink === "" && existingLink !== null) {
-    return true;
+  if (newLink === '' && existingLink !== null) {
+    return true
   }
   if (!newLink && !existingLink) {
-    return false;
+    return false
   }
-  return newLink !== existingLink;
+  return newLink !== existingLink
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/members.vue b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
index d5a4cc238..5e7b7b933 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
@@ -528,35 +528,35 @@ import {
   UserPlusIcon,
   UsersIcon,
   UserXIcon,
-} from "@modrinth/assets";
-import { Avatar, Badge, Card, Checkbox, ConfirmModal } from "@modrinth/ui";
-import { Multiselect } from "vue-multiselect";
+} from '@modrinth/assets'
+import { Avatar, Badge, Card, Checkbox, ConfirmModal } from '@modrinth/ui'
+import { Multiselect } from 'vue-multiselect'
 
-import { removeSelfFromTeam } from "~/helpers/teams.js";
+import { removeSelfFromTeam } from '~/helpers/teams.js'
 
 const props = defineProps({
   project: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
   organization: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
   allMembers: {
     type: Array,
     default() {
-      return [];
+      return []
     },
   },
   currentMember: {
     type: Object,
     default() {
-      return null;
+      return null
     },
   },
   resetProject: {
@@ -574,39 +574,39 @@ const props = defineProps({
     required: true,
     default: () => {},
   },
-});
+})
 
-const cosmetics = useCosmetics();
-const auth = await useAuth();
+const cosmetics = useCosmetics()
+const auth = await useAuth()
 
-const allTeamMembers = ref([]);
-const allOrgMembers = ref([]);
+const allTeamMembers = ref([])
+const allOrgMembers = ref([])
 
 const acceptedOrgMembers = computed(() => {
-  return props.organization?.members?.filter((x) => x.accepted) || [];
-});
+  return props.organization?.members?.filter((x) => x.accepted) || []
+})
 
 function initMembers() {
-  const orgMembers = props.organization?.members || [];
+  const orgMembers = props.organization?.members || []
 
   const selectedMembersForOrg = orgMembers.map((partialOrgMember) => {
-    const foundMember = props.allMembers.find((tM) => tM.user.id === partialOrgMember.user.id);
-    const returnVal = foundMember ?? partialOrgMember;
+    const foundMember = props.allMembers.find((tM) => tM.user.id === partialOrgMember.user.id)
+    const returnVal = foundMember ?? partialOrgMember
 
     // If replacing a partial with a full member, we need to mark as such.
-    returnVal.override = !!foundMember;
-    returnVal.oldOverride = !!foundMember;
+    returnVal.override = !!foundMember
+    returnVal.oldOverride = !!foundMember
 
-    returnVal.is_owner = partialOrgMember.is_owner;
+    returnVal.is_owner = partialOrgMember.is_owner
 
-    return returnVal;
-  });
+    return returnVal
+  })
 
-  allOrgMembers.value = selectedMembersForOrg;
+  allOrgMembers.value = selectedMembersForOrg
 
   allTeamMembers.value = props.allMembers.filter(
     (x) => !selectedMembersForOrg.some((y) => y.user.id === x.user.id),
-  );
+  )
 }
 
 watch(
@@ -617,128 +617,128 @@ watch(
     () => props.currentMember,
   ],
   initMembers,
-);
-initMembers();
+)
+initMembers()
 
-const currentUsername = ref("");
-const openTeamMembers = ref([]);
-const selectedOrganization = ref(null);
+const currentUsername = ref('')
+const openTeamMembers = ref([])
+const selectedOrganization = ref(null)
 
-const { data: organizations } = useAsyncData("organizations", () => {
-  return useBaseFetch("user/" + auth.value?.user.id + "/organizations", {
+const { data: organizations } = useAsyncData('organizations', () => {
+  return useBaseFetch('user/' + auth.value?.user.id + '/organizations', {
     apiVersion: 3,
-  });
-});
+  })
+})
 
-const UPLOAD_VERSION = 1 << 0;
-const DELETE_VERSION = 1 << 1;
-const EDIT_DETAILS = 1 << 2;
-const EDIT_BODY = 1 << 3;
-const MANAGE_INVITES = 1 << 4;
-const REMOVE_MEMBER = 1 << 5;
-const EDIT_MEMBER = 1 << 6;
-const DELETE_PROJECT = 1 << 7;
-const VIEW_ANALYTICS = 1 << 8;
-const VIEW_PAYOUTS = 1 << 9;
+const UPLOAD_VERSION = 1 << 0
+const DELETE_VERSION = 1 << 1
+const EDIT_DETAILS = 1 << 2
+const EDIT_BODY = 1 << 3
+const MANAGE_INVITES = 1 << 4
+const REMOVE_MEMBER = 1 << 5
+const EDIT_MEMBER = 1 << 6
+const DELETE_PROJECT = 1 << 7
+const VIEW_ANALYTICS = 1 << 8
+const VIEW_PAYOUTS = 1 << 9
 
 const onAddToOrg = useClientTry(async () => {
-  if (!selectedOrganization.value) return;
+  if (!selectedOrganization.value) return
 
   await useBaseFetch(`organization/${selectedOrganization.value.id}/projects`, {
-    method: "POST",
+    method: 'POST',
     body: JSON.stringify({
       project_id: props.project.id,
     }),
     apiVersion: 3,
-  });
+  })
 
-  await updateMembers();
+  await updateMembers()
 
   addNotification({
-    group: "main",
-    title: "Project transferred",
-    text: "Your project has been transferred to the organization.",
-    type: "success",
-  });
-});
+    group: 'main',
+    title: 'Project transferred',
+    text: 'Your project has been transferred to the organization.',
+    type: 'success',
+  })
+})
 
 const onRemoveFromOrg = useClientTry(async () => {
-  if (!props.project.organization || !auth.value?.user?.id) return;
+  if (!props.project.organization || !auth.value?.user?.id) return
 
   await useBaseFetch(`organization/${props.project.organization}/projects/${props.project.id}`, {
-    method: "DELETE",
+    method: 'DELETE',
     body: JSON.stringify({
       new_owner: auth.value.user.id,
     }),
     apiVersion: 3,
-  });
+  })
 
-  await updateMembers();
+  await updateMembers()
 
   addNotification({
-    group: "main",
-    title: "Project removed",
-    text: "Your project has been removed from the organization.",
-    type: "success",
-  });
-});
+    group: 'main',
+    title: 'Project removed',
+    text: 'Your project has been removed from the organization.',
+    type: 'success',
+  })
+})
 
 const leaveProject = async () => {
-  await removeSelfFromTeam(props.project.team);
-  navigateTo("/dashboard/projects");
-};
+  await removeSelfFromTeam(props.project.team)
+  navigateTo('/dashboard/projects')
+}
 
 const inviteTeamMember = async () => {
-  startLoading();
+  startLoading()
 
   try {
-    const user = await useBaseFetch(`user/${currentUsername.value}`);
+    const user = await useBaseFetch(`user/${currentUsername.value}`)
     const data = {
       user_id: user.id.trim(),
-    };
+    }
     await useBaseFetch(`team/${props.project.team}/members`, {
-      method: "POST",
+      method: 'POST',
       body: data,
-    });
-    currentUsername.value = "";
-    await updateMembers();
+    })
+    currentUsername.value = ''
+    await updateMembers()
   } catch (err) {
     addNotification({
-      group: "main",
-      title: "An error occurred",
-      text: err?.data?.description || err?.message || err || "Unknown error",
-      type: "error",
-    });
+      group: 'main',
+      title: 'An error occurred',
+      text: err?.data?.description || err?.message || err || 'Unknown error',
+      type: 'error',
+    })
   }
 
-  stopLoading();
-};
+  stopLoading()
+}
 
 const removeTeamMember = async (index) => {
-  startLoading();
+  startLoading()
 
   try {
     await useBaseFetch(
       `team/${props.project.team}/members/${allTeamMembers.value[index].user.id}`,
       {
-        method: "DELETE",
+        method: 'DELETE',
       },
-    );
-    await updateMembers();
+    )
+    await updateMembers()
   } catch (err) {
     addNotification({
-      group: "main",
-      title: "An error occurred",
-      text: err?.data?.description || err?.message || err || "Unknown error",
-      type: "error",
-    });
+      group: 'main',
+      title: 'An error occurred',
+      text: err?.data?.description || err?.message || err || 'Unknown error',
+      type: 'error',
+    })
   }
 
-  stopLoading();
-};
+  stopLoading()
+}
 
 const updateTeamMember = async (index) => {
-  startLoading();
+  startLoading()
 
   try {
     const data = !allTeamMembers.value[index].is_owner
@@ -750,107 +750,107 @@ const updateTeamMember = async (index) => {
       : {
           payouts_split: allTeamMembers.value[index].payouts_split,
           role: allTeamMembers.value[index].role,
-        };
+        }
 
     await useBaseFetch(
       `team/${props.project.team}/members/${allTeamMembers.value[index].user.id}`,
       {
-        method: "PATCH",
+        method: 'PATCH',
         body: data,
       },
-    );
-    await updateMembers();
+    )
+    await updateMembers()
     addNotification({
-      group: "main",
-      title: "Member(s) updated",
+      group: 'main',
+      title: 'Member(s) updated',
       text: "Your project's member(s) has been updated.",
-      type: "success",
-    });
+      type: 'success',
+    })
   } catch (err) {
     addNotification({
-      group: "main",
-      title: "An error occurred",
-      text: err?.data?.description || err?.message || err || "Unknown error",
-      type: "error",
-    });
+      group: 'main',
+      title: 'An error occurred',
+      text: err?.data?.description || err?.message || err || 'Unknown error',
+      type: 'error',
+    })
   }
 
-  stopLoading();
-};
+  stopLoading()
+}
 
 const transferOwnership = async (index) => {
-  startLoading();
+  startLoading()
 
   try {
     await useBaseFetch(`team/${props.project.team}/owner`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: {
         user_id: allTeamMembers.value[index].user.id,
       },
-    });
-    await updateMembers();
+    })
+    await updateMembers()
   } catch (err) {
     addNotification({
-      group: "main",
-      title: "An error occurred",
-      text: err?.data?.description || err?.message || err || "Unknown error",
-      type: "error",
-    });
+      group: 'main',
+      title: 'An error occurred',
+      text: err?.data?.description || err?.message || err || 'Unknown error',
+      type: 'error',
+    })
   }
 
-  stopLoading();
-};
+  stopLoading()
+}
 
 async function updateOrgMember(index) {
-  startLoading();
+  startLoading()
 
   try {
     if (allOrgMembers.value[index].override && !allOrgMembers.value[index].oldOverride) {
       await useBaseFetch(`team/${props.project.team}/members`, {
-        method: "POST",
+        method: 'POST',
         body: {
           permissions: allOrgMembers.value[index].permissions,
           role: allOrgMembers.value[index].role,
           payouts_split: allOrgMembers.value[index].payouts_split,
           user_id: allOrgMembers.value[index].user.id,
         },
-      });
+      })
     } else if (!allOrgMembers.value[index].override && allOrgMembers.value[index].oldOverride) {
       await useBaseFetch(
         `team/${props.project.team}/members/${allOrgMembers.value[index].user.id}`,
         {
-          method: "DELETE",
+          method: 'DELETE',
         },
-      );
+      )
     } else {
       await useBaseFetch(
         `team/${props.project.team}/members/${allOrgMembers.value[index].user.id}`,
         {
-          method: "PATCH",
+          method: 'PATCH',
           body: {
             permissions: allOrgMembers.value[index].permissions,
             role: allOrgMembers.value[index].role,
             payouts_split: allOrgMembers.value[index].payouts_split,
           },
         },
-      );
+      )
     }
-    await updateMembers();
+    await updateMembers()
   } catch (err) {
     addNotification({
-      group: "main",
-      title: "An error occurred",
-      text: err?.data?.description || err?.message || err || "Unknown error",
-      type: "error",
-    });
+      group: 'main',
+      title: 'An error occurred',
+      text: err?.data?.description || err?.message || err || 'Unknown error',
+      type: 'error',
+    })
   }
 
-  stopLoading();
+  stopLoading()
 }
 
 const updateMembers = async () => {
-  await Promise.all([props.resetProject(), props.resetOrganization(), props.resetMembers()]);
-};
+  await Promise.all([props.resetProject(), props.resetOrganization(), props.resetMembers()])
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
index 0a9204473..ddfa44822 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/tags.vue
@@ -113,10 +113,10 @@
 </template>
 
 <script>
-import { SaveIcon,StarIcon } from "@modrinth/assets";
-import { formatCategory, formatCategoryHeader, formatProjectType } from "@modrinth/utils";
+import { SaveIcon, StarIcon } from '@modrinth/assets'
+import { formatCategory, formatCategoryHeader, formatProjectType } from '@modrinth/utils'
 
-import Checkbox from "~/components/ui/Checkbox.vue";
+import Checkbox from '~/components/ui/Checkbox.vue'
 
 export default defineNuxtComponent({
   components: {
@@ -128,19 +128,19 @@ export default defineNuxtComponent({
     project: {
       type: Object,
       default() {
-        return {};
+        return {}
       },
     },
     allMembers: {
       type: Array,
       default() {
-        return [];
+        return []
       },
     },
     currentMember: {
       type: Object,
       default() {
-        return null;
+        return null
       },
     },
     patchProject: {
@@ -148,12 +148,12 @@ export default defineNuxtComponent({
       default() {
         return () => {
           this.$notify({
-            group: "main",
-            title: "An error occurred",
-            text: "Patch project function not found",
-            type: "error",
-          });
-        };
+            group: 'main',
+            title: 'An error occurred',
+            text: 'Patch project function not found',
+            type: 'error',
+          })
+        }
       },
     },
   },
@@ -170,57 +170,57 @@ export default defineNuxtComponent({
           x.project_type === this.project.actualProjectType &&
           this.project.categories.includes(x.name),
       ),
-    };
+    }
   },
   computed: {
     categoryLists() {
-      const lists = {};
+      const lists = {}
       this.$sortedCategories().forEach((x) => {
         if (x.project_type === this.project.actualProjectType) {
-          const header = x.header;
+          const header = x.header
           if (!lists[header]) {
-            lists[header] = [];
+            lists[header] = []
           }
-          lists[header].push(x);
+          lists[header].push(x)
         }
-      });
-      return lists;
+      })
+      return lists
     },
     patchData() {
-      const data = {};
+      const data = {}
       // Promote selected categories to featured if there are less than 3 featured
-      const newFeaturedTags = this.featuredTags.slice();
+      const newFeaturedTags = this.featuredTags.slice()
       if (newFeaturedTags.length < 1 && this.selectedTags.length > newFeaturedTags.length) {
-        const nonFeaturedCategories = this.selectedTags.filter((x) => !newFeaturedTags.includes(x));
+        const nonFeaturedCategories = this.selectedTags.filter((x) => !newFeaturedTags.includes(x))
 
         nonFeaturedCategories
           .slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
-          .forEach((x) => newFeaturedTags.push(x));
+          .forEach((x) => newFeaturedTags.push(x))
       }
       // Convert selected and featured categories to backend-usable arrays
-      const categories = newFeaturedTags.map((x) => x.name);
+      const categories = newFeaturedTags.map((x) => x.name)
       const additionalCategories = this.selectedTags
         .filter((x) => !newFeaturedTags.includes(x))
-        .map((x) => x.name);
+        .map((x) => x.name)
 
       if (
         categories.length !== this.project.categories.length ||
         categories.some((value) => !this.project.categories.includes(value))
       ) {
-        data.categories = categories;
+        data.categories = categories
       }
 
       if (
         additionalCategories.length !== this.project.additional_categories.length ||
         additionalCategories.some((value) => !this.project.additional_categories.includes(value))
       ) {
-        data.additional_categories = additionalCategories;
+        data.additional_categories = additionalCategories
       }
 
-      return data;
+      return data
     },
     hasChanges() {
-      return Object.keys(this.patchData).length > 0;
+      return Object.keys(this.patchData).length > 0
     },
   },
   methods: {
@@ -229,28 +229,28 @@ export default defineNuxtComponent({
     formatCategory,
     toggleCategory(category) {
       if (this.selectedTags.includes(category)) {
-        this.selectedTags = this.selectedTags.filter((x) => x !== category);
+        this.selectedTags = this.selectedTags.filter((x) => x !== category)
         if (this.featuredTags.includes(category)) {
-          this.featuredTags = this.featuredTags.filter((x) => x !== category);
+          this.featuredTags = this.featuredTags.filter((x) => x !== category)
         }
       } else {
-        this.selectedTags.push(category);
+        this.selectedTags.push(category)
       }
     },
     toggleFeaturedCategory(category) {
       if (this.featuredTags.includes(category)) {
-        this.featuredTags = this.featuredTags.filter((x) => x !== category);
+        this.featuredTags = this.featuredTags.filter((x) => x !== category)
       } else {
-        this.featuredTags.push(category);
+        this.featuredTags.push(category)
       }
     },
     saveChanges() {
       if (this.hasChanges) {
-        this.patchProject(this.patchData);
+        this.patchProject(this.patchData)
       }
     },
   },
-});
+})
 </script>
 <style lang="scss" scoped>
 .label__title {
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version]-new.vue b/apps/frontend/src/pages/[type]/[id]/version/[version]-new.vue
index c24e9a767..f7af415b5 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version]-new.vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version]-new.vue
@@ -46,7 +46,7 @@
           </div>
           <div class="flex flex-grow flex-col">
             <span class="font-extrabold text-contrast">{{
-              file.primary ? "Primary file" : "Supplementary resource"
+              file.primary ? 'Primary file' : 'Supplementary resource'
             }}</span>
             <span class="text-sm font-semibold text-secondary"
               >{{ file.filename }} • {{ formatBytes(file.size) }}</span
@@ -82,83 +82,83 @@ import {
   FileIcon,
   MoreVerticalIcon,
   ShareIcon,
-} from "@modrinth/assets";
-import { ButtonStyled, VersionChannelIndicator } from "@modrinth/ui";
-import { formatBytes, renderHighlightedString } from "@modrinth/utils";
+} from '@modrinth/assets'
+import { ButtonStyled, VersionChannelIndicator } from '@modrinth/ui'
+import { formatBytes, renderHighlightedString } from '@modrinth/utils'
 
-const router = useRouter();
+const router = useRouter()
 
 const props = defineProps<{
-  project: Project;
-  versions: Version[];
-  featuredVersions: Version[];
-  members: User[];
-  currentMember: User;
-  dependencies: Dependency[];
-  resetProject: (opts?: { dedupe?: "cancel" | "defer" }) => Promise<void>;
-}>();
+  project: Project
+  versions: Version[]
+  featuredVersions: Version[]
+  members: User[]
+  currentMember: User
+  dependencies: Dependency[]
+  resetProject: (opts?: { dedupe?: 'cancel' | 'defer' }) => Promise<void>
+}>()
 
 const version = computed(() => {
-  let version: Version | undefined;
+  let version: Version | undefined
 
-  if (route.params.version === "latest") {
-    let versionList = props.versions;
+  if (route.params.version === 'latest') {
+    let versionList = props.versions
     if (route.query.loader) {
-      versionList = versionList.filter((x) => x.loaders.includes(route.query.loader));
+      versionList = versionList.filter((x) => x.loaders.includes(route.query.loader))
     }
     if (route.query.version) {
-      versionList = versionList.filter((x) => x.game_versions.includes(route.query.version));
+      versionList = versionList.filter((x) => x.game_versions.includes(route.query.version))
     }
-    version = versionList.reduce((a, b) => (a.date_published > b.date_published ? a : b));
+    version = versionList.reduce((a, b) => (a.date_published > b.date_published ? a : b))
   } else {
     version = props.versions.find(
       (x) => x.id === route.params.version || x.displayUrlEnding === route.params.version,
-    );
+    )
   }
 
   if (!version) {
     throw createError({
       fatal: true,
       statusCode: 404,
-      message: "Version not found",
-    });
+      message: 'Version not found',
+    })
   }
 
-  return version;
-});
+  return version
+})
 
 // const data = useNuxtApp();
-const route = useNativeRoute();
+const route = useNativeRoute()
 
 // const auth = await useAuth();
 // const tags = useTags();
 
 const versionsListLink = computed(() => {
   if (router.options.history.state.back) {
-    if (router.options.history.state.back.includes("/versions")) {
-      return router.options.history.state.back;
+    if (router.options.history.state.back.includes('/versions')) {
+      return router.options.history.state.back
     }
   }
   return `/${props.project.project_type}/${
     props.project.slug ? props.project.slug : props.project.id
-  }/versions`;
-});
+  }/versions`
+})
 
 const hasBackLink = computed(
   () =>
-    router.options.history.state.back && router.options.history.state.back.endsWith("/versions"),
-);
+    router.options.history.state.back && router.options.history.state.back.endsWith('/versions'),
+)
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 const messages = defineMessages({
   backToVersions: {
-    id: "project.version.back-to-versions",
-    defaultMessage: "Back to versions",
+    id: 'project.version.back-to-versions',
+    defaultMessage: 'Back to versions',
   },
   allVersions: {
-    id: "project.version.all-versions",
-    defaultMessage: "All versions",
+    id: 'project.version.all-versions',
+    defaultMessage: 'All versions',
   },
-});
+})
 </script>
 <style lang="scss"></style>
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 188ef6ee1..4eec903fc 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -230,7 +230,7 @@
         />
         <nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
           <span class="project-title">
-            {{ dependency.project ? dependency.project.title : "Unknown Project" }}
+            {{ dependency.project ? dependency.project.title : 'Unknown Project' }}
           </span>
           <span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
             Version {{ dependency.version.version_number }} is
@@ -242,7 +242,7 @@
         </nuxt-link>
         <div v-else class="info">
           <span class="project-title">
-            {{ dependency.project ? dependency.project.title : "Unknown Project" }}
+            {{ dependency.project ? dependency.project.title : 'Unknown Project' }}
           </span>
           <span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
             Version {{ dependency.version.version_number }} is
@@ -385,9 +385,9 @@
             :disabled="primaryFile.hashes.sha1 === file.hashes.sha1"
             @click="
               () => {
-                deleteFiles.push(file.hashes.sha1);
-                version.files.splice(index, 1);
-                oldFileTypes.splice(index, 1);
+                deleteFiles.push(file.hashes.sha1)
+                version.files.splice(index, 1)
+                oldFileTypes.splice(index, 1)
               }
             "
           >
@@ -432,8 +432,8 @@
               class="raised-button"
               @click="
                 () => {
-                  newFiles.splice(index, 1);
-                  newFileTypes.splice(index, 1);
+                  newFiles.splice(index, 1)
+                  newFileTypes.splice(index, 1)
                 }
               "
             >
@@ -458,8 +458,8 @@
             @change="
               (x) =>
                 x.forEach((y) => {
-                  newFiles.push(y);
-                  newFileTypes.push(null);
+                  newFiles.push(y)
+                  newFileTypes.push(null)
                 })
             "
           >
@@ -586,7 +586,7 @@
         <div v-if="!isEditing">
           <h4>Publication date</h4>
           <span>
-            {{ $dayjs(version.date_published).format("MMMM D, YYYY [at] h:mm A") }}
+            {{ $dayjs(version.date_published).format('MMMM D, YYYY [at] h:mm A') }}
           </span>
         </div>
         <div v-if="!isEditing && version.author">
@@ -646,7 +646,7 @@ import {
   TrashIcon,
   UploadIcon,
   XIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 import {
   Avatar,
   Badge,
@@ -655,21 +655,21 @@ import {
   ConfirmModal,
   CopyCode,
   MarkdownEditor,
-} from "@modrinth/ui";
-import { formatBytes, formatCategory } from "@modrinth/utils";
-import { Multiselect } from "vue-multiselect";
+} from '@modrinth/ui'
+import { formatBytes, formatCategory } from '@modrinth/utils'
+import { Multiselect } from 'vue-multiselect'
 
-import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
-import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import FileInput from "~/components/ui/FileInput.vue";
-import Modal from "~/components/ui/Modal.vue";
-import Categories from "~/components/ui/search/Categories.vue";
-import { useImageUpload } from "~/composables/image-upload.ts";
-import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
-import { renderHighlightedString } from "~/helpers/highlight.js";
-import { inferVersionInfo } from "~/helpers/infer.js";
-import { createDataPackVersion } from "~/helpers/package.js";
-import { reportVersion } from "~/utils/report-helpers.ts";
+import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
+import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
+import FileInput from '~/components/ui/FileInput.vue'
+import Modal from '~/components/ui/Modal.vue'
+import Categories from '~/components/ui/search/Categories.vue'
+import { useImageUpload } from '~/composables/image-upload.ts'
+import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
+import { renderHighlightedString } from '~/helpers/highlight.js'
+import { inferVersionInfo } from '~/helpers/infer.js'
+import { createDataPackVersion } from '~/helpers/package.js'
+import { reportVersion } from '~/utils/report-helpers.ts'
 
 export default defineNuxtComponent({
   components: {
@@ -706,37 +706,37 @@ export default defineNuxtComponent({
     project: {
       type: Object,
       default() {
-        return {};
+        return {}
       },
     },
     versions: {
       type: Array,
       default() {
-        return [];
+        return []
       },
     },
     featuredVersions: {
       type: Array,
       default() {
-        return [];
+        return []
       },
     },
     members: {
       type: Array,
       default() {
-        return [{}];
+        return [{}]
       },
     },
     currentMember: {
       type: Object,
       default() {
-        return null;
+        return null
       },
     },
     dependencies: {
       type: Object,
       default() {
-        return {};
+        return {}
       },
     },
     resetProject: {
@@ -746,101 +746,101 @@ export default defineNuxtComponent({
     },
   },
   async setup(props) {
-    const data = useNuxtApp();
-    const route = useNativeRoute();
+    const data = useNuxtApp()
+    const route = useNativeRoute()
 
-    const auth = await useAuth();
-    const tags = useTags();
-    const flags = useFeatureFlags();
+    const auth = await useAuth()
+    const tags = useTags()
+    const flags = useFeatureFlags()
 
-    const path = route.name.split("-");
-    const mode = path[path.length - 1];
+    const path = route.name.split('-')
+    const mode = path[path.length - 1]
 
     const fileTypes = [
       {
-        display: "Required resource pack",
-        value: "required-resource-pack",
+        display: 'Required resource pack',
+        value: 'required-resource-pack',
       },
       {
-        display: "Optional resource pack",
-        value: "optional-resource-pack",
+        display: 'Optional resource pack',
+        value: 'optional-resource-pack',
       },
-    ];
-    let oldFileTypes = [];
+    ]
+    let oldFileTypes = []
 
-    let isCreating = false;
-    let isEditing = false;
+    let isCreating = false
+    let isEditing = false
 
-    let version = {};
-    let primaryFile = {};
-    let alternateFile = {};
+    let version = {}
+    let primaryFile = {}
+    let alternateFile = {}
 
-    let replaceFile = null;
+    let replaceFile = null
 
-    if (mode === "edit") {
-      isEditing = true;
+    if (mode === 'edit') {
+      isEditing = true
     }
 
-    if (route.params.version === "create") {
-      isCreating = true;
-      isEditing = true;
+    if (route.params.version === 'create') {
+      isCreating = true
+      isEditing = true
 
       version = {
-        id: "none",
+        id: 'none',
         project_id: props.project.id,
         author_id: props.currentMember.user.id,
-        name: "",
-        version_number: "",
-        changelog: "",
+        name: '',
+        version_number: '',
+        changelog: '',
         date_published: Date.now(),
         downloads: 0,
-        version_type: "release",
+        version_type: 'release',
         files: [],
         dependencies: [],
         game_versions: [],
         loaders: [],
         featured: false,
-      };
+      }
       // For navigation from versions page / upload file prompt
       if (import.meta.client && history.state && history.state.newPrimaryFile) {
-        replaceFile = history.state.newPrimaryFile;
+        replaceFile = history.state.newPrimaryFile
 
         try {
           const inferredData = await inferVersionInfo(
             replaceFile,
             props.project,
             tags.value.gameVersions,
-          );
+          )
 
           version = {
             ...version,
             ...inferredData,
-          };
+          }
         } catch (err) {
-          console.error("Error parsing version file data", err);
+          console.error('Error parsing version file data', err)
         }
       }
-    } else if (route.params.version === "latest") {
-      let versionList = props.versions;
+    } else if (route.params.version === 'latest') {
+      let versionList = props.versions
       if (route.query.loader) {
-        versionList = versionList.filter((x) => x.loaders.includes(route.query.loader));
+        versionList = versionList.filter((x) => x.loaders.includes(route.query.loader))
       }
       if (route.query.version) {
-        versionList = versionList.filter((x) => x.game_versions.includes(route.query.version));
+        versionList = versionList.filter((x) => x.game_versions.includes(route.query.version))
       }
       if (versionList.length === 0) {
         throw createError({
           fatal: true,
           statusCode: 404,
-          message: "No version matches the filters",
-        });
+          message: 'No version matches the filters',
+        })
       }
-      version = versionList.reduce((a, b) => (a.date_published > b.date_published ? a : b));
+      version = versionList.reduce((a, b) => (a.date_published > b.date_published ? a : b))
     } else {
-      version = props.versions.find((x) => x.id === route.params.version);
+      version = props.versions.find((x) => x.id === route.params.version)
 
       if (!version) {
-        version = props.versions.find((x) => x.displayUrlEnding === route.params.version);
+        version = props.versions.find((x) => x.displayUrlEnding === route.params.version)
       }
     }
 
@@ -848,60 +848,58 @@ export default defineNuxtComponent({
       throw createError({
         fatal: true,
         statusCode: 404,
-        message: "Version not found",
-      });
+        message: 'Version not found',
+      })
     }
 
-    version = JSON.parse(JSON.stringify(version));
-    primaryFile = version.files.find((file) => file.primary) ?? version.files[0];
+    version = JSON.parse(JSON.stringify(version))
+    primaryFile = version.files.find((file) => file.primary) ?? version.files[0]
     alternateFile = version.files.find(
-      (file) => file.file_type && file.file_type.includes("resource-pack"),
-    );
+      (file) => file.file_type && file.file_type.includes('resource-pack'),
+    )
 
     for (const dependency of version.dependencies) {
-      dependency.version = props.dependencies.versions.find((x) => x.id === dependency.version_id);
+      dependency.version = props.dependencies.versions.find((x) => x.id === dependency.version_id)
 
       if (dependency.version) {
         dependency.project = props.dependencies.projects.find(
           (x) => x.id === dependency.version.project_id,
-        );
+        )
       }
 
       if (!dependency.project) {
-        dependency.project = props.dependencies.projects.find(
-          (x) => x.id === dependency.project_id,
-        );
+        dependency.project = props.dependencies.projects.find((x) => x.id === dependency.project_id)
       }
 
       dependency.link = dependency.project
         ? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
-            dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ""
+            dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
           }`
-        : "";
+        : ''
     }
 
-    oldFileTypes = version.files.map((x) => fileTypes.find((y) => y.value === x.file_type));
+    oldFileTypes = version.files.map((x) => fileTypes.find((y) => y.value === x.file_type))
 
     const title = computed(
-      () => `${isCreating ? "Create Version" : version.name} - ${props.project.title}`,
-    );
+      () => `${isCreating ? 'Create Version' : version.name} - ${props.project.title}`,
+    )
     const description = computed(
       () =>
         `Download ${props.project.title} ${
           version.version_number
         } on Modrinth. Supports ${data.$formatVersion(version.game_versions)} ${version.loaders
           .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
-          .join(" & ")}. Published on ${data
+          .join(' & ')}. Published on ${data
           .$dayjs(version.date_published)
-          .format("MMM D, YYYY")}. ${version.downloads} downloads.`,
-    );
+          .format('MMM D, YYYY')}. ${version.downloads} downloads.`,
+    )
 
     useSeoMeta({
       title,
       description,
       ogTitle: title,
       ogDescription: description,
-    });
+    })
 
     return {
       auth,
@@ -916,13 +914,13 @@ export default defineNuxtComponent({
       alternateFile: ref(alternateFile),
       replaceFile: ref(replaceFile),
       uploadedImageIds: ref([]),
-    };
+    }
   },
   data() {
     return {
-      dependencyAddMode: "project",
-      newDependencyType: "required",
-      newDependencyId: "",
+      dependencyAddMode: 'project',
+      newDependencyType: 'required',
+      newDependencyId: '',
 
       showSnapshots: false,
 
@@ -932,102 +930,102 @@ export default defineNuxtComponent({
 
       newFileTypes: [],
 
-      packageLoaders: ["forge", "fabric", "quilt", "neoforge"],
+      packageLoaders: ['forge', 'fabric', 'quilt', 'neoforge'],
 
       showKnownErrors: false,
       shouldPreventActions: false,
-    };
+    }
   },
   computed: {
     fieldErrors() {
       return (
-        this.version.version_number === "" ||
+        this.version.version_number === '' ||
         this.version.game_versions.length === 0 ||
-        (this.version.loaders.length === 0 && this.project.project_type !== "resourcepack") ||
+        (this.version.loaders.length === 0 && this.project.project_type !== 'resourcepack') ||
         (this.newFiles.length === 0 && this.version.files.length === 0 && !this.replaceFile)
-      );
+      )
     },
     deps() {
-      const order = ["required", "optional", "incompatible", "embedded"];
+      const order = ['required', 'optional', 'incompatible', 'embedded']
       return [...this.version.dependencies].sort(
         (a, b) => order.indexOf(a.dependency_type) - order.indexOf(b.dependency_type),
-      );
+      )
     },
   },
   watch: {
-    "$route.path"() {
-      const path = this.$route.name.split("-");
-      const mode = path[path.length - 1];
+    '$route.path'() {
+      const path = this.$route.name.split('-')
+      const mode = path[path.length - 1]
 
-      this.isEditing = mode === "edit" || this.$route.params.version === "create";
+      this.isEditing = mode === 'edit' || this.$route.params.version === 'create'
     },
   },
   methods: {
     formatBytes,
     formatCategory,
     async onImageUpload(file) {
-      const response = await useImageUpload(file, { context: "version" });
+      const response = await useImageUpload(file, { context: 'version' })
 
-      this.uploadedImageIds.push(response.id);
-      this.uploadedImageIds = this.uploadedImageIds.slice(-10);
+      this.uploadedImageIds.push(response.id)
+      this.uploadedImageIds = this.uploadedImageIds.slice(-10)
 
-      return response.url;
+      return response.url
     },
     getPreviousLink() {
       if (this.$router.options.history.state.back) {
-        if (this.$router.options.history.state.back.includes("/versions")) {
-          return this.$router.options.history.state.back;
+        if (this.$router.options.history.state.back.includes('/versions')) {
+          return this.$router.options.history.state.back
         }
       }
       return `/${this.project.project_type}/${
         this.project.slug ? this.project.slug : this.project.id
-      }/versions`;
+      }/versions`
     },
     getPreviousLabel() {
       return this.$router.options.history.state.back &&
-        this.$router.options.history.state.back.endsWith("/versions")
-        ? "Back to versions"
-        : "All versions";
+        this.$router.options.history.state.back.endsWith('/versions')
+        ? 'Back to versions'
+        : 'All versions'
     },
     acceptFileFromProjectType,
     renderHighlightedString,
     async addDependency(dependencyAddMode, newDependencyId, newDependencyType, hideErrors) {
       try {
-        if (dependencyAddMode === "project") {
-          const project = await useBaseFetch(`project/${newDependencyId}`);
+        if (dependencyAddMode === 'project') {
+          const project = await useBaseFetch(`project/${newDependencyId}`)
 
           if (this.version.dependencies.some((dep) => project.id === dep.project_id)) {
             this.$notify({
-              group: "main",
-              title: "Dependency already added",
-              text: "You cannot add the same dependency twice.",
-              type: "error",
-            });
+              group: 'main',
+              title: 'Dependency already added',
+              text: 'You cannot add the same dependency twice.',
+              type: 'error',
+            })
           } else {
             this.version.dependencies.push({
               project,
               project_id: project.id,
               dependency_type: newDependencyType,
               link: `/${project.project_type}/${project.slug ?? project.id}`,
-            });
+            })
 
-            this.$emit("update:dependencies", {
+            this.$emit('update:dependencies', {
               projects: this.dependencies.projects.concat([project]),
               versions: this.dependencies.versions,
-            });
+            })
           }
-        } else if (dependencyAddMode === "version") {
-          const version = await useBaseFetch(`version/${this.newDependencyId}`);
+        } else if (dependencyAddMode === 'version') {
+          const version = await useBaseFetch(`version/${this.newDependencyId}`)
 
-          const project = await useBaseFetch(`project/${version.project_id}`);
+          const project = await useBaseFetch(`project/${version.project_id}`)
 
           if (this.version.dependencies.some((dep) => version.id === dep.version_id)) {
             this.$notify({
-              group: "main",
-              title: "Dependency already added",
-              text: "You cannot add the same dependency twice.",
-              type: "error",
-            });
+              group: 'main',
+              title: 'Dependency already added',
+              text: 'You cannot add the same dependency twice.',
+              type: 'error',
+            })
           } else {
             this.version.dependencies.push({
               version,
@@ -1038,44 +1036,44 @@ export default defineNuxtComponent({
               link: `/${project.project_type}/${project.slug ?? project.id}/version/${encodeURI(
                 version.version_number,
               )}`,
-            });
+            })
 
-            this.$emit("update:dependencies", {
+            this.$emit('update:dependencies', {
               projects: this.dependencies.projects.concat([project]),
               versions: this.dependencies.versions.concat([version]),
-            });
+            })
           }
         }
 
-        this.newDependencyId = "";
+        this.newDependencyId = ''
       } catch {
         if (!hideErrors) {
           this.$notify({
-            group: "main",
-            title: "Invalid Dependency",
-            text: "The specified dependency could not be found",
-            type: "error",
-          });
+            group: 'main',
+            title: 'Invalid Dependency',
+            text: 'The specified dependency could not be found',
+            type: 'error',
+          })
         }
       }
     },
     async saveEditedVersion() {
-      startLoading();
+      startLoading()
 
       if (this.fieldErrors) {
-        this.showKnownErrors = true;
+        this.showKnownErrors = true
 
-        stopLoading();
-        return;
+        stopLoading()
+        return
       }
 
       try {
         if (this.newFiles.length > 0) {
-          const formData = new FormData();
-          const fileParts = this.newFiles.map((f, idx) => `${f.name}-${idx}`);
+          const formData = new FormData()
+          const fileParts = this.newFiles.map((f, idx) => `${f.name}-${idx}`)
 
           formData.append(
-            "data",
+            'data',
             JSON.stringify({
               file_types: this.newFileTypes.reduce(
                 (acc, x, i) => ({
@@ -1085,19 +1083,19 @@ export default defineNuxtComponent({
                 {},
               ),
             }),
-          );
+          )
 
           for (let i = 0; i < this.newFiles.length; i++) {
-            formData.append(fileParts[i], new Blob([this.newFiles[i]]), this.newFiles[i].name);
+            formData.append(fileParts[i], new Blob([this.newFiles[i]]), this.newFiles[i].name)
           }
 
           await useBaseFetch(`version/${this.version.id}/file`, {
-            method: "POST",
+            method: 'POST',
             body: formData,
             headers: {
-              "Content-Disposition": formData,
+              'Content-Disposition': formData,
             },
-          });
+          })
         }
 
         const body = {
@@ -1108,33 +1106,33 @@ export default defineNuxtComponent({
           dependencies: this.version.dependencies,
           game_versions: this.version.game_versions,
           loaders: this.version.loaders,
-          primary_file: ["sha1", this.primaryFile.hashes.sha1],
+          primary_file: ['sha1', this.primaryFile.hashes.sha1],
           featured: this.version.featured,
           file_types: this.oldFileTypes.map((x, i) => {
             return {
-              algorithm: "sha1",
+              algorithm: 'sha1',
               hash: this.version.files[i].hashes.sha1,
               file_type: x ? x.value : null,
-            };
+            }
           }),
-        };
+        }
 
-        if (this.project.project_type === "modpack") {
-          delete body.dependencies;
+        if (this.project.project_type === 'modpack') {
+          delete body.dependencies
         }
 
         await useBaseFetch(`version/${this.version.id}`, {
-          method: "PATCH",
+          method: 'PATCH',
           body,
-        });
+        })
 
         for (const hash of this.deleteFiles) {
           await useBaseFetch(`version_file/${hash}?version_id=${this.version.id}`, {
-            method: "DELETE",
-          });
+            method: 'DELETE',
+          })
         }
 
-        await this.resetProjectVersions();
+        await this.resetProjectVersions()
 
         await this.$router.replace(
           `/${this.project.project_type}/${
@@ -1142,55 +1140,55 @@ export default defineNuxtComponent({
           }/version/${encodeURI(
             this.versions.find((x) => x.id === this.version.id).displayUrlEnding,
           )}`,
-        );
+        )
       } catch (err) {
         this.$notify({
-          group: "main",
-          title: "An error occurred",
+          group: 'main',
+          title: 'An error occurred',
           text: err.data ? err.data.description : err,
-          type: "error",
-        });
-        window.scrollTo({ top: 0, behavior: "smooth" });
+          type: 'error',
+        })
+        window.scrollTo({ top: 0, behavior: 'smooth' })
       }
-      stopLoading();
+      stopLoading()
     },
     reportVersion,
     async createVersion() {
-      this.shouldPreventActions = true;
-      startLoading();
+      this.shouldPreventActions = true
+      startLoading()
       if (this.fieldErrors) {
-        this.showKnownErrors = true;
-        this.shouldPreventActions = false;
+        this.showKnownErrors = true
+        this.shouldPreventActions = false
 
-        stopLoading();
-        return;
+        stopLoading()
+        return
       }
 
       try {
-        await this.createVersionRaw(this.version);
+        await this.createVersionRaw(this.version)
       } catch (err) {
         this.$notify({
-          group: "main",
-          title: "An error occurred",
+          group: 'main',
+          title: 'An error occurred',
           text: err.data ? err.data.description : err,
-          type: "error",
-        });
-        window.scrollTo({ top: 0, behavior: "smooth" });
+          type: 'error',
+        })
+        window.scrollTo({ top: 0, behavior: 'smooth' })
       }
 
-      stopLoading();
-      this.shouldPreventActions = false;
+      stopLoading()
+      this.shouldPreventActions = false
     },
     async createVersionRaw(version) {
-      const formData = new FormData();
+      const formData = new FormData()
 
-      const fileParts = this.newFiles.map((f, idx) => `${f.name}-${idx}`);
+      const fileParts = this.newFiles.map((f, idx) => `${f.name}-${idx}`)
       if (this.replaceFile) {
-        fileParts.unshift(this.replaceFile.name.concat("-primary"));
+        fileParts.unshift(this.replaceFile.name.concat('-primary'))
       }
 
-      if (this.project.project_type === "resourcepack") {
-        version.loaders = ["minecraft"];
+      if (this.project.project_type === 'resourcepack') {
+        version.loaders = ['minecraft']
       }
 
       const newVersion = {
@@ -1211,16 +1209,16 @@ export default defineNuxtComponent({
           }),
           {},
         ),
-      };
+      }
 
-      formData.append("data", JSON.stringify(newVersion));
+      formData.append('data', JSON.stringify(newVersion))
 
       if (this.replaceFile) {
         formData.append(
-          this.replaceFile.name.concat("-primary"),
+          this.replaceFile.name.concat('-primary'),
           new Blob([this.replaceFile]),
           this.replaceFile.name,
-        );
+        )
       }
 
       for (let i = 0; i < this.newFiles.length; i++) {
@@ -1228,39 +1226,39 @@ export default defineNuxtComponent({
           fileParts[this.replaceFile ? i + 1 : i],
           new Blob([this.newFiles[i]]),
           this.newFiles[i].name,
-        );
+        )
       }
 
-      const data = await useBaseFetch("version", {
-        method: "POST",
+      const data = await useBaseFetch('version', {
+        method: 'POST',
         body: formData,
         headers: {
-          "Content-Disposition": formData,
+          'Content-Disposition': formData,
         },
-      });
+      })
 
-      await this.resetProjectVersions();
+      await this.resetProjectVersions()
 
       await this.$router.push(
         `/${this.project.project_type}/${
           this.project.slug ? this.project.slug : this.project.project_id
         }/version/${data.id}`,
-      );
+      )
     },
     async deleteVersion() {
-      startLoading();
+      startLoading()
 
       await useBaseFetch(`version/${this.version.id}`, {
-        method: "DELETE",
-      });
+        method: 'DELETE',
+      })
 
-      await this.resetProjectVersions();
-      await this.$router.replace(`/${this.project.project_type}/${this.project.id}/versions`);
-      stopLoading();
+      await this.resetProjectVersions()
+      await this.$router.replace(`/${this.project.project_type}/${this.project.id}/versions`)
+      stopLoading()
     },
     async createDataPackVersion() {
-      this.shouldPreventActions = true;
-      startLoading();
+      this.shouldPreventActions = true
+      startLoading()
       try {
         const blob = await createDataPackVersion(
           this.project,
@@ -1269,14 +1267,14 @@ export default defineNuxtComponent({
           this.members,
           this.tags.gameVersions,
           this.packageLoaders,
-        );
+        )
 
-        this.newFiles = [];
-        this.newFileTypes = [];
+        this.newFiles = []
+        this.newFileTypes = []
         this.replaceFile = new File(
           [blob],
           `${this.project.slug}-${this.version.version_number}.jar`,
-        );
+        )
 
         await this.createVersionRaw({
           project_id: this.project.id,
@@ -1289,26 +1287,26 @@ export default defineNuxtComponent({
           game_versions: this.version.game_versions,
           loaders: this.packageLoaders,
           featured: this.version.featured,
-        });
+        })
 
-        this.$refs.modal_package_mod.hide();
+        this.$refs.modal_package_mod.hide()
 
         this.$notify({
-          group: "main",
-          title: "Packaging Success",
-          text: "Your data pack was successfully packaged as a mod! Make sure to playtest to check for errors.",
-          type: "success",
-        });
+          group: 'main',
+          title: 'Packaging Success',
+          text: 'Your data pack was successfully packaged as a mod! Make sure to playtest to check for errors.',
+          type: 'success',
+        })
       } catch (err) {
         this.$notify({
-          group: "main",
-          title: "An error occurred",
+          group: 'main',
+          title: 'An error occurred',
           text: err.data ? err.data.description : err,
-          type: "error",
-        });
+          type: 'error',
+        })
       }
-      stopLoading();
-      this.shouldPreventActions = false;
+      stopLoading()
+      this.shouldPreventActions = false
     },
     async resetProjectVersions() {
       const [versions, featuredVersions, dependencies] = await Promise.all([
@@ -1316,21 +1314,21 @@ export default defineNuxtComponent({
         useBaseFetch(`project/${this.version.project_id}/version?featured=true`),
         useBaseFetch(`project/${this.version.project_id}/dependencies`),
         this.resetProject(),
-      ]);
+      ])
 
-      const newCreatedVersions = this.$computeVersions(versions, this.members);
-      const featuredIds = featuredVersions.map((x) => x.id);
-      this.$emit("update:versions", newCreatedVersions);
+      const newCreatedVersions = this.$computeVersions(versions, this.members)
+      const featuredIds = featuredVersions.map((x) => x.id)
+      this.$emit('update:versions', newCreatedVersions)
       this.$emit(
-        "update:featuredVersions",
+        'update:featuredVersions',
         newCreatedVersions.filter((version) => featuredIds.includes(version.id)),
-      );
-      this.$emit("update:dependencies", dependencies);
+      )
+      this.$emit('update:dependencies', dependencies)
 
-      return newCreatedVersions;
+      return newCreatedVersions
     },
   },
-});
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1342,20 +1340,20 @@ export default defineNuxtComponent({
   display: grid;
 
   grid-template:
-    "title" auto
-    "changelog" auto
-    "dependencies" auto
-    "metadata" auto
-    "files" auto
+    'title' auto
+    'changelog' auto
+    'dependencies' auto
+    'metadata' auto
+    'files' auto
     / 1fr;
 
   @media (min-width: 1200px) {
     grid-template:
-      "title title" auto
-      "changelog metadata" auto
-      "dependencies metadata" auto
-      "files metadata" auto
-      "dummy metadata" 1fr
+      'title title' auto
+      'changelog metadata' auto
+      'dependencies metadata' auto
+      'files metadata' auto
+      'dummy metadata' 1fr
       / 1fr 20rem;
   }
 
@@ -1372,13 +1370,13 @@ export default defineNuxtComponent({
       gap: var(--spacing-card-md);
 
       h2,
-      input[type="text"] {
+      input[type='text'] {
         margin: 0;
         font-size: var(--font-size-2xl);
         font-weight: bold;
       }
 
-      input[type="text"] {
+      input[type='text'] {
         max-width: 100%;
         min-width: 0;
         flex-grow: 1;
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version]/edit.vue b/apps/frontend/src/pages/[type]/[id]/version/[version]/edit.vue
index 1e4f44ee3..c65911597 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version]/edit.vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version]/edit.vue
@@ -3,6 +3,6 @@
 </template>
 <script setup>
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 </script>
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index a6ffd9f7a..eb8cf7833 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -66,7 +66,7 @@
                 hoverFilled: true,
                 link: getPrimaryFile(version).url,
                 action: () => {
-                  emit('onDownload');
+                  emit('onDownload')
                 },
               },
               {
@@ -102,14 +102,14 @@
               {
                 id: 'copy-id',
                 action: () => {
-                  copyToClipboard(version.id);
+                  copyToClipboard(version.id)
                 },
                 shown: currentMember || flags.developerMode,
               },
               {
                 id: 'copy-maven',
                 action: () => {
-                  copyToClipboard(`maven.modrinth:${project.slug}:${version.id}`);
+                  copyToClipboard(`maven.modrinth:${project.slug}:${version.id}`)
                 },
                 shown: flags.developerMode,
               },
@@ -126,8 +126,8 @@
                 color: 'red',
                 hoverFilled: true,
                 action: () => {
-                  selectedVersion = version.id;
-                  deleteVersionModal.show();
+                  selectedVersion = version.id
+                  deleteVersionModal.show()
                 },
                 shown: currentMember,
               },
@@ -191,76 +191,76 @@ import {
   ShareIcon,
   TrashIcon,
   UploadIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 import {
   ButtonStyled,
   ConfirmModal,
   FileInput,
   OverflowMenu,
   ProjectPageVersions,
-} from "@modrinth/ui";
+} from '@modrinth/ui'
 
-import DropArea from "~/components/ui/DropArea.vue";
-import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
+import DropArea from '~/components/ui/DropArea.vue'
+import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
 
 const props = defineProps({
   project: {
     type: Object,
     default() {
-      return {};
+      return {}
     },
   },
   versions: {
     type: Array,
     default() {
-      return [];
+      return []
     },
   },
   currentMember: {
     type: Object,
     default() {
-      return null;
+      return null
     },
   },
-});
+})
 
-const tags = useTags();
-const flags = useFeatureFlags();
-const auth = await useAuth();
+const tags = useTags()
+const flags = useFeatureFlags()
+const auth = await useAuth()
 
-const deleteVersionModal = ref();
-const selectedVersion = ref(null);
+const deleteVersionModal = ref()
+const selectedVersion = ref(null)
 
-const emit = defineEmits(["onDownload", "deleteVersion"]);
+const emit = defineEmits(['onDownload', 'deleteVersion'])
 
-const router = useNativeRouter();
+const router = useNativeRouter()
 
-const baseDropdownId = useId();
+const baseDropdownId = useId()
 
 function getPrimaryFile(version) {
-  return version.files.find((x) => x.primary) || version.files[0];
+  return version.files.find((x) => x.primary) || version.files[0]
 }
 
 async function handleFiles(files) {
   await router.push({
-    name: "type-id-version-version",
+    name: 'type-id-version-version',
     params: {
       type: props.project.project_type,
       id: props.project.slug ? props.project.slug : props.project.id,
-      version: "create",
+      version: 'create',
     },
     state: {
       newPrimaryFile: files[0],
     },
-  });
+  })
 }
 
 async function copyToClipboard(text) {
-  await navigator.clipboard.writeText(text);
+  await navigator.clipboard.writeText(text)
 }
 
 function deleteVersion() {
-  emit("deleteVersion", selectedVersion.value);
-  selectedVersion.value = null;
+  emit('deleteVersion', selectedVersion.value)
+  selectedVersion.value = null
 }
 </script>
diff --git a/apps/frontend/src/pages/admin/billing/[id].vue b/apps/frontend/src/pages/admin/billing/[id].vue
index ec6e96b94..4e4666be9 100644
--- a/apps/frontend/src/pages/admin/billing/[id].vue
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -126,7 +126,7 @@
             </span>
             <div class="mb-4 mt-2 flex w-full items-center gap-1 text-sm text-secondary">
               {{ formatCategory(subscription.interval) }} ⋅ {{ subscription.status }} ⋅
-              {{ dayjs(subscription.created).format("MMMM D, YYYY [at] h:mma") }} ({{
+              {{ dayjs(subscription.created).format('MMMM D, YYYY [at] h:mma') }} ({{
                 formatRelativeTime(subscription.created)
               }})
             </div>
@@ -194,13 +194,13 @@
                   <span v-else-if="charge.status === 'cancelled'" class="font-bold">Ends:</span>
                   <span v-else-if="charge.type === 'refund'" class="font-bold">Issued:</span>
                   <span v-else class="font-bold">Due:</span>
-                  {{ dayjs(charge.due).format("MMMM D, YYYY [at] h:mma") }}
+                  {{ dayjs(charge.due).format('MMMM D, YYYY [at] h:mma') }}
                   <span class="text-secondary">({{ formatRelativeTime(charge.due) }}) </span>
                 </span>
                 <span v-if="charge.last_attempt != null" class="text-sm text-secondary">
                   <span v-if="charge.status === 'failed'" class="font-bold">Last attempt:</span>
                   <span v-else class="font-bold">Charged:</span>
-                  {{ dayjs(charge.last_attempt).format("MMMM D, YYYY [at] h:mma") }}
+                  {{ dayjs(charge.last_attempt).format('MMMM D, YYYY [at] h:mma') }}
                   <span class="text-secondary"
                     >({{ formatRelativeTime(charge.last_attempt) }})
                   </span>
@@ -212,7 +212,7 @@
                   ⋅
                   {{ formatPrice(vintl.locale, charge.amount, charge.currency_code) }}
                   ⋅
-                  {{ dayjs(charge.due).format("YYYY-MM-DD h:mma") }}
+                  {{ dayjs(charge.due).format('YYYY-MM-DD h:mma') }}
                   <template v-if="charge.subscription_interval">
                     ⋅ {{ charge.subscription_interval }}
                   </template>
@@ -259,7 +259,7 @@ import {
   ServerIcon,
   UserIcon,
   XIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 import {
   Avatar,
   ButtonStyled,
@@ -268,41 +268,41 @@ import {
   NewModal,
   Toggle,
   useRelativeTime,
-} from "@modrinth/ui";
-import { formatCategory, formatPrice } from "@modrinth/utils";
-import dayjs from "dayjs";
+} from '@modrinth/ui'
+import { formatCategory, formatPrice } from '@modrinth/utils'
+import dayjs from 'dayjs'
 
-import ModrinthServersIcon from "~/components/ui/servers/ModrinthServersIcon.vue";
-import { products } from "~/generated/state.json";
+import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
+import { products } from '~/generated/state.json'
 
-const route = useRoute();
-const vintl = useVIntl();
+const route = useRoute()
+const vintl = useVIntl()
 
-const { formatMessage } = vintl;
-const formatRelativeTime = useRelativeTime();
+const { formatMessage } = vintl
+const formatRelativeTime = useRelativeTime()
 
 const messages = defineMessages({
   userNotFoundError: {
-    id: "admin.billing.error.not-found",
-    defaultMessage: "User not found",
+    id: 'admin.billing.error.not-found',
+    defaultMessage: 'User not found',
   },
-});
+})
 
 const { data: user } = await useAsyncData(`user/${route.params.id}`, () =>
   useBaseFetch(`user/${route.params.id}`),
-);
+)
 
 if (!user.value) {
   throw createError({
     fatal: true,
     statusCode: 404,
     message: formatMessage(messages.userNotFoundError),
-  });
+  })
 }
 
-let subscriptions, charges, refreshCharges;
+let subscriptions, charges, refreshCharges
 try {
-  [{ data: subscriptions }, { data: charges, refresh: refreshCharges }] = await Promise.all([
+  ;[{ data: subscriptions }, { data: charges, refresh: refreshCharges }] = await Promise.all([
     useAsyncData(`billing/subscriptions?user_id=${route.params.id}`, () =>
       useBaseFetch(`billing/subscriptions?user_id=${user.value.id}`, {
         internal: true,
@@ -313,13 +313,13 @@ try {
         internal: true,
       }),
     ),
-  ]);
+  ])
 } catch {
   throw createError({
     fatal: true,
     statusCode: 404,
     message: formatMessage(messages.userNotFoundError),
-  });
+  })
 }
 
 const subscriptionCharges = computed(() => {
@@ -333,103 +333,103 @@ const subscriptionCharges = computed(() => {
       product: products.find((product) =>
         product.prices.some((price) => price.id === subscription.price_id),
       ),
-    };
-  });
-});
+    }
+  })
+})
 
-const refunding = ref(false);
-const refundModal = ref();
-const selectedCharge = ref(null);
-const refundType = ref("full");
-const refundTypes = ref(["full", "partial", "none"]);
-const refundAmount = ref(0);
-const unprovision = ref(true);
+const refunding = ref(false)
+const refundModal = ref()
+const selectedCharge = ref(null)
+const refundType = ref('full')
+const refundTypes = ref(['full', 'partial', 'none'])
+const refundAmount = ref(0)
+const unprovision = ref(true)
 
-const modifying = ref(false);
-const modifyModal = ref();
-const cancel = ref(false);
+const modifying = ref(false)
+const modifyModal = ref()
+const cancel = ref(false)
 
 function showRefundModal(charge) {
-  selectedCharge.value = charge;
-  refundType.value = "full";
-  refundAmount.value = 0;
-  unprovision.value = true;
-  refundModal.value.show();
+  selectedCharge.value = charge
+  refundType.value = 'full'
+  refundAmount.value = 0
+  unprovision.value = true
+  refundModal.value.show()
 }
 
 function showModifyModal(charge) {
-  selectedCharge.value = charge;
-  cancel.value = false;
-  modifyModal.value.show();
+  selectedCharge.value = charge
+  cancel.value = false
+  modifyModal.value.show()
 }
 
 async function refundCharge() {
-  refunding.value = true;
+  refunding.value = true
   try {
     await useBaseFetch(`billing/charge/${selectedCharge.value.id}/refund`, {
-      method: "POST",
+      method: 'POST',
       body: JSON.stringify({
         type: refundType.value,
         amount: refundAmount.value,
         unprovision: unprovision.value,
       }),
       internal: true,
-    });
-    await refreshCharges();
-    refundModal.value.hide();
+    })
+    await refreshCharges()
+    refundModal.value.hide()
   } catch (err) {
     addNotification({
-      title: "Error refunding",
+      title: 'Error refunding',
       text: err.data?.description ?? err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  refunding.value = false;
+  refunding.value = false
 }
 
 async function modifyCharge() {
-  modifying.value = true;
+  modifying.value = true
   try {
     await useBaseFetch(`billing/subscription/${selectedCharge.value.id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: JSON.stringify({
         cancelled: cancel.value,
       }),
       internal: true,
-    });
+    })
     addNotification({
-      title: "Resubscription request submitted",
-      text: "If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.",
-      type: "success",
-    });
-    await refreshCharges();
+      title: 'Resubscription request submitted',
+      text: 'If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.',
+      type: 'success',
+    })
+    await refreshCharges()
   } catch (err) {
     addNotification({
-      title: "Error reattempting charge",
+      title: 'Error reattempting charge',
       text: err.data?.description ?? err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  modifying.value = false;
+  modifying.value = false
 }
 
 const chargeStatuses = {
   open: {
-    color: "bg-blue",
+    color: 'bg-blue',
   },
   processing: {
-    color: "bg-orange",
+    color: 'bg-orange',
   },
   succeeded: {
-    color: "bg-green",
+    color: 'bg-green',
   },
   failed: {
-    color: "bg-red",
+    color: 'bg-red',
   },
   cancelled: {
-    color: "bg-red",
+    color: 'bg-red',
   },
-};
+}
 </script>
 <style scoped>
 .page {
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index b0b70b28c..77d91d0e6 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -2,7 +2,7 @@
   <NewModal ref="createNoticeModal">
     <template #title>
       <span class="text-lg font-extrabold text-contrast">{{
-        editingNotice ? `Editing notice #${editingNotice?.id}` : "Creating a notice"
+        editingNotice ? `Editing notice #${editingNotice?.id}` : 'Creating a notice'
       }}</span>
     </template>
     <div class="flex w-[700px] flex-col gap-3">
@@ -35,7 +35,7 @@
       <div class="flex flex-col gap-2">
         <label for="notice-message" class="flex flex-col gap-1">
           <span class="text-lg font-semibold text-contrast">
-            {{ newNoticeSurvey ? "Survey ID" : "Message" }}
+            {{ newNoticeSurvey ? 'Survey ID' : 'Message' }}
             <span class="text-brand-red">*</span>
           </span>
         </label>
@@ -155,7 +155,7 @@
             </div>
             <div class="text-sm">
               <span v-if="notice.announce_at">
-                {{ dayjs(notice.announce_at).format("MMM D, YYYY [at] h:mm A") }} ({{
+                {{ dayjs(notice.announce_at).format('MMM D, YYYY [at] h:mm A') }} ({{
                   formatRelativeTime(notice.announce_at)
                 }})
               </span>
@@ -227,16 +227,16 @@
               >
               <span v-else-if="!notice.assigned.some((n) => n.kind === 'server')">
                 Assigned to
-                {{ notice.assigned.filter((n) => n.kind === "node").length }} nodes
+                {{ notice.assigned.filter((n) => n.kind === 'node').length }} nodes
               </span>
               <span v-else-if="!notice.assigned.some((n) => n.kind === 'node')">
                 Assigned to
-                {{ notice.assigned.filter((n) => n.kind === "server").length }} servers
+                {{ notice.assigned.filter((n) => n.kind === 'server').length }} servers
               </span>
               <span v-else>
                 Assigned to
-                {{ notice.assigned.filter((n) => n.kind === "server").length }} servers and
-                {{ notice.assigned.filter((n) => n.kind === "node").length }} nodes
+                {{ notice.assigned.filter((n) => n.kind === 'server').length }} servers and
+                {{ notice.assigned.filter((n) => n.kind === 'node').length }} nodes
               </span>
               •
               <button
@@ -258,7 +258,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { EditIcon, PlusIcon, SaveIcon, SettingsIcon, TrashIcon, XIcon } from "@modrinth/assets";
+import { EditIcon, PlusIcon, SaveIcon, SettingsIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import {
   ButtonStyled,
   commonMessages,
@@ -269,141 +269,141 @@ import {
   TeleportDropdownMenu,
   Toggle,
   useRelativeTime,
-} from "@modrinth/ui";
-import { NOTICE_LEVELS } from "@modrinth/ui/src/utils/notices.ts";
-import type { ServerNotice as ServerNoticeType } from "@modrinth/utils";
-import { useVIntl } from "@vintl/vintl";
-import dayjs from "dayjs";
-import { computed } from "vue";
+} from '@modrinth/ui'
+import { NOTICE_LEVELS } from '@modrinth/ui/src/utils/notices.ts'
+import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
+import { useVIntl } from '@vintl/vintl'
+import dayjs from 'dayjs'
+import { computed } from 'vue'
 
-import AssignNoticeModal from "~/components/ui/servers/notice/AssignNoticeModal.vue";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import AssignNoticeModal from '~/components/ui/servers/notice/AssignNoticeModal.vue'
+import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
-const { formatMessage } = useVIntl();
-const formatRelativeTime = useRelativeTime();
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
 
-const app = useNuxtApp() as unknown as { $notify: any };
+const app = useNuxtApp() as unknown as { $notify: any }
 
-const notices = ref<ServerNoticeType[]>([]);
-const createNoticeModal = ref<InstanceType<typeof NewModal>>();
-const assignNoticeModal = ref<InstanceType<typeof AssignNoticeModal>>();
+const notices = ref<ServerNoticeType[]>([])
+const createNoticeModal = ref<InstanceType<typeof NewModal>>()
+const assignNoticeModal = ref<InstanceType<typeof AssignNoticeModal>>()
 
-await refreshNotices();
+await refreshNotices()
 
 async function refreshNotices() {
-  await useServersFetch("notices").then((res) => {
-    notices.value = res as ServerNoticeType[];
+  await useServersFetch('notices').then((res) => {
+    notices.value = res as ServerNoticeType[]
     notices.value.sort((a, b) => {
-      const dateDiff = dayjs(b.announce_at).diff(dayjs(a.announce_at));
+      const dateDiff = dayjs(b.announce_at).diff(dayjs(a.announce_at))
       if (dateDiff === 0) {
-        return b.id - a.id;
+        return b.id - a.id
       }
 
-      return dateDiff;
-    });
-  });
+      return dateDiff
+    })
+  })
 }
 
 const levelOptions = Object.keys(NOTICE_LEVELS).map((x) => ({
   id: x,
   ...NOTICE_LEVELS[x],
-}));
+}))
 
-const DATE_TIME_FORMAT = "YYYY-MM-DDTHH:mm";
+const DATE_TIME_FORMAT = 'YYYY-MM-DDTHH:mm'
 
-const newNoticeLevel = ref(levelOptions[0]);
-const newNoticeDismissable = ref(false);
-const newNoticeMessage = ref("");
-const newNoticeScheduledDate = ref<string>();
-const newNoticeTitle = ref<string>();
-const newNoticeExpiresDate = ref<string>();
+const newNoticeLevel = ref(levelOptions[0])
+const newNoticeDismissable = ref(false)
+const newNoticeMessage = ref('')
+const newNoticeScheduledDate = ref<string>()
+const newNoticeTitle = ref<string>()
+const newNoticeExpiresDate = ref<string>()
 
 function openNewNoticeModal() {
-  newNoticeLevel.value = levelOptions[0];
-  newNoticeDismissable.value = false;
-  newNoticeMessage.value = "";
-  newNoticeScheduledDate.value = undefined;
-  newNoticeExpiresDate.value = undefined;
-  editingNotice.value = undefined;
-  createNoticeModal.value?.show();
+  newNoticeLevel.value = levelOptions[0]
+  newNoticeDismissable.value = false
+  newNoticeMessage.value = ''
+  newNoticeScheduledDate.value = undefined
+  newNoticeExpiresDate.value = undefined
+  editingNotice.value = undefined
+  createNoticeModal.value?.show()
 }
 
-const editingNotice = ref<undefined | ServerNoticeType>();
+const editingNotice = ref<undefined | ServerNoticeType>()
 
 function startEditing(notice: ServerNoticeType, assignments: boolean = false) {
-  newNoticeLevel.value = levelOptions.find((x) => x.id === notice.level) ?? levelOptions[0];
-  newNoticeDismissable.value = notice.dismissable;
-  newNoticeMessage.value = notice.message;
-  newNoticeTitle.value = notice.title;
-  newNoticeScheduledDate.value = dayjs(notice.announce_at).format(DATE_TIME_FORMAT);
+  newNoticeLevel.value = levelOptions.find((x) => x.id === notice.level) ?? levelOptions[0]
+  newNoticeDismissable.value = notice.dismissable
+  newNoticeMessage.value = notice.message
+  newNoticeTitle.value = notice.title
+  newNoticeScheduledDate.value = dayjs(notice.announce_at).format(DATE_TIME_FORMAT)
   newNoticeExpiresDate.value = notice.expires
     ? dayjs(notice.expires).format(DATE_TIME_FORMAT)
-    : undefined;
-  editingNotice.value = notice;
+    : undefined
+  editingNotice.value = notice
   if (assignments) {
-    assignNoticeModal.value?.show?.(notice);
+    assignNoticeModal.value?.show?.(notice)
   } else {
-    createNoticeModal.value?.show();
+    createNoticeModal.value?.show()
   }
 }
 
 async function deleteNotice(notice: ServerNoticeType) {
   await useServersFetch(`notices/${notice.id}`, {
-    method: "DELETE",
+    method: 'DELETE',
   })
     .then(() => {
       app.$notify({
-        group: "main",
+        group: 'main',
         title: `Successfully deleted notice #${notice.id}`,
-        type: "success",
-      });
+        type: 'success',
+      })
     })
     .catch((err) => {
       app.$notify({
-        group: "main",
-        title: "Error deleting notice",
+        group: 'main',
+        title: 'Error deleting notice',
         text: err,
-        type: "error",
-      });
-    });
-  await refreshNotices();
+        type: 'error',
+      })
+    })
+  await refreshNotices()
 }
 
-const trimmedMessage = computed(() => newNoticeMessage.value?.trim());
-const trimmedTitle = computed(() => newNoticeTitle.value?.trim());
-const newNoticeSurvey = computed(() => newNoticeLevel.value.id === "survey");
+const trimmedMessage = computed(() => newNoticeMessage.value?.trim())
+const trimmedTitle = computed(() => newNoticeTitle.value?.trim())
+const newNoticeSurvey = computed(() => newNoticeLevel.value.id === 'survey')
 
 const noticeSubmitError = computed(() => {
-  let error: undefined | string;
+  let error: undefined | string
   if (!trimmedMessage.value || trimmedMessage.value.length === 0) {
-    error = "Notice message is required";
+    error = 'Notice message is required'
   }
   if (!newNoticeLevel.value) {
-    error = "Notice level is required";
+    error = 'Notice level is required'
   }
-  return error;
-});
+  return error
+})
 
 function validateSubmission(message: string) {
   if (noticeSubmitError.value) {
     addNotification({
-      group: "main",
+      group: 'main',
       title: message,
       text: noticeSubmitError.value,
-      type: "error",
-    });
-    return false;
+      type: 'error',
+    })
+    return false
   }
-  return true;
+  return true
 }
 
 async function saveChanges() {
-  if (!validateSubmission("Error saving notice")) {
-    return;
+  if (!validateSubmission('Error saving notice')) {
+    return
   }
 
   await useServersFetch(`notices/${editingNotice.value?.id}`, {
-    method: "PATCH",
+    method: 'PATCH',
     body: {
       message: newNoticeMessage.value,
       title: newNoticeSurvey.value ? undefined : trimmedTitle.value,
@@ -418,23 +418,23 @@ async function saveChanges() {
     },
   }).catch((err) => {
     app.$notify({
-      group: "main",
-      title: "Error saving changes to notice",
+      group: 'main',
+      title: 'Error saving changes to notice',
       text: err,
-      type: "error",
-    });
-  });
-  await refreshNotices();
-  createNoticeModal.value?.hide();
+      type: 'error',
+    })
+  })
+  await refreshNotices()
+  createNoticeModal.value?.hide()
 }
 
 async function createNotice() {
-  if (!validateSubmission("Error creating notice")) {
-    return;
+  if (!validateSubmission('Error creating notice')) {
+    return
   }
 
-  await useServersFetch("notices", {
-    method: "POST",
+  await useServersFetch('notices', {
+    method: 'POST',
     body: {
       message: newNoticeMessage.value,
       title: newNoticeSurvey.value ? undefined : trimmedTitle.value,
@@ -449,54 +449,54 @@ async function createNotice() {
     },
   }).catch((err) => {
     app.$notify({
-      group: "main",
-      title: "Error creating notice",
+      group: 'main',
+      title: 'Error creating notice',
       text: err,
-      type: "error",
-    });
-  });
-  await refreshNotices();
-  createNoticeModal.value?.hide();
+      type: 'error',
+    })
+  })
+  await refreshNotices()
+  createNoticeModal.value?.hide()
 }
 
 const messages = defineMessages({
   createNotice: {
-    id: "servers.notices.create-notice",
-    defaultMessage: "Create notice",
+    id: 'servers.notices.create-notice',
+    defaultMessage: 'Create notice',
   },
   noNotices: {
-    id: "servers.notices.no-notices",
-    defaultMessage: "No notices",
+    id: 'servers.notices.no-notices',
+    defaultMessage: 'No notices',
   },
   dismissable: {
-    id: "servers.notice.dismissable",
-    defaultMessage: "Dismissable",
+    id: 'servers.notice.dismissable',
+    defaultMessage: 'Dismissable',
   },
   undismissable: {
-    id: "servers.notice.undismissable",
-    defaultMessage: "Undismissable",
+    id: 'servers.notice.undismissable',
+    defaultMessage: 'Undismissable',
   },
   id: {
-    id: "servers.notice.id",
-    defaultMessage: "ID",
+    id: 'servers.notice.id',
+    defaultMessage: 'ID',
   },
   begins: {
-    id: "servers.notice.begins",
-    defaultMessage: "Begins",
+    id: 'servers.notice.begins',
+    defaultMessage: 'Begins',
   },
   expires: {
-    id: "servers.notice.expires",
-    defaultMessage: "Expires",
+    id: 'servers.notice.expires',
+    defaultMessage: 'Expires',
   },
   actions: {
-    id: "servers.notice.actions",
-    defaultMessage: "Actions",
+    id: 'servers.notice.actions',
+    defaultMessage: 'Actions',
   },
   level: {
-    id: "servers.notice.level",
-    defaultMessage: "Level",
+    id: 'servers.notice.level',
+    defaultMessage: 'Level',
   },
-});
+})
 </script>
 <style lang="scss" scoped>
 .page {
diff --git a/apps/frontend/src/pages/admin/user_email.vue b/apps/frontend/src/pages/admin/user_email.vue
index f6e4463eb..1183d5490 100644
--- a/apps/frontend/src/pages/admin/user_email.vue
+++ b/apps/frontend/src/pages/admin/user_email.vue
@@ -32,30 +32,30 @@
   </div>
 </template>
 <script setup lang="ts">
-import { MailIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { MailIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
 
-const userEmail = ref("");
+const userEmail = ref('')
 
 async function getUserFromEmail() {
-  startLoading();
+  startLoading()
 
   try {
     const result = await useBaseFetch(`user_email?email=${encodeURIComponent(userEmail.value)}`, {
-      method: "GET",
+      method: 'GET',
       apiVersion: 3,
-    });
+    })
 
-    await navigateTo(`/user/${result.username}`);
+    await navigateTo(`/user/${result.username}`)
   } catch (err) {
-    console.error(err);
+    console.error(err)
     addNotification({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data.description,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 </script>
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index acf4b95d4..694bf7a0b 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -7,157 +7,157 @@ import {
   SearchIcon,
   SendIcon,
   TrashIcon,
-} from "@modrinth/assets";
-import { Avatar, Badge,Checkbox } from "@modrinth/ui";
+} from '@modrinth/assets'
+import { Avatar, Badge, Checkbox } from '@modrinth/ui'
 
-import ATLauncher from "~/assets/images/external/atlauncher.svg?component";
-import CurseForge from "~/assets/images/external/curseforge.svg?component";
-import PrismIcon from "~/assets/images/external/prism.svg?component";
-import LogoAnimated from "~/components/brand/LogoAnimated.vue";
-import LatestNewsRow from "~/components/ui/news/LatestNewsRow.vue";
-import { homePageProjects } from "~/generated/state.json";
+import ATLauncher from '~/assets/images/external/atlauncher.svg?component'
+import CurseForge from '~/assets/images/external/curseforge.svg?component'
+import PrismIcon from '~/assets/images/external/prism.svg?component'
+import LogoAnimated from '~/components/brand/LogoAnimated.vue'
+import LatestNewsRow from '~/components/ui/news/LatestNewsRow.vue'
+import { homePageProjects } from '~/generated/state.json'
 
 interface LauncherPlatform {
-  install_urls: string[];
+  install_urls: string[]
 }
 
 interface LauncherUpdates {
   platforms: {
-    "darwin-aarch64": LauncherPlatform;
-    "windows-x86_64": LauncherPlatform;
-    "linux-x86_64": LauncherPlatform;
-  };
+    'darwin-aarch64': LauncherPlatform
+    'windows-x86_64': LauncherPlatform
+    'linux-x86_64': LauncherPlatform
+  }
 }
 
-type OSType = "Mac" | "Windows" | "Linux" | null;
+type OSType = 'Mac' | 'Windows' | 'Linux' | null
 
-const downloadWindows = ref<HTMLAnchorElement | null>(null);
-const downloadLinux = ref<HTMLAnchorElement | null>(null);
-const downloadSection = ref<HTMLElement | null>(null);
-const windowsLink = ref<string | null>(null);
+const downloadWindows = ref<HTMLAnchorElement | null>(null)
+const downloadLinux = ref<HTMLAnchorElement | null>(null)
+const downloadSection = ref<HTMLElement | null>(null)
+const windowsLink = ref<string | null>(null)
 
 const linuxLinks = reactive({
   appImage: null as string | null,
   deb: null as string | null,
   rpm: null as string | null,
-  thirdParty: "https://support.modrinth.com/en/articles/9298760",
-});
+  thirdParty: 'https://support.modrinth.com/en/articles/9298760',
+})
 
 const macLinks = reactive({
   universal: null as string | null,
-});
+})
 
-const newProjects = homePageProjects.slice(0, 40);
-const val = Math.ceil(newProjects.length / 6);
+const newProjects = homePageProjects.slice(0, 40)
+const val = Math.ceil(newProjects.length / 6)
 const rows = [
   newProjects.slice(0, val),
   newProjects.slice(val, val * 2),
   newProjects.slice(val * 2, val * 3),
   newProjects.slice(val * 3, val * 4),
   newProjects.slice(val * 4, val * 5),
-];
+]
 
 const { data: launcherUpdates } = await useFetch<LauncherUpdates>(
-  "https://launcher-files.modrinth.com/updates.json?new",
+  'https://launcher-files.modrinth.com/updates.json?new',
   {
     server: false,
     getCachedData(key, nuxtApp) {
-      const cached = (nuxtApp.ssrContext?.cache as any)?.[key] || nuxtApp.payload.data[key];
-      if (!cached) return;
+      const cached = (nuxtApp.ssrContext?.cache as any)?.[key] || nuxtApp.payload.data[key]
+      if (!cached) return
 
-      const now = Date.now();
-      const cacheTime = cached._cacheTime || 0;
-      const maxAge = 5 * 60 * 1000;
+      const now = Date.now()
+      const cacheTime = cached._cacheTime || 0
+      const maxAge = 5 * 60 * 1000
 
       if (now - cacheTime > maxAge) {
-        return null;
+        return null
       }
 
-      return cached;
+      return cached
     },
     transform(data) {
       return {
         ...data,
         _cacheTime: Date.now(),
-      };
+      }
     },
   },
-);
+)
 
 const platform = computed<string>(() => {
   if (import.meta.server) {
-    const headers = useRequestHeaders();
-    return headers["user-agent"] || "";
+    const headers = useRequestHeaders()
+    return headers['user-agent'] || ''
   } else {
-    return navigator.userAgent || "";
+    return navigator.userAgent || ''
   }
-});
+})
 const os = computed<OSType>(() => {
-  if (platform.value.includes("Mac")) {
-    return "Mac";
-  } else if (platform.value.includes("Win")) {
-    return "Windows";
-  } else if (platform.value.includes("Linux")) {
-    return "Linux";
+  if (platform.value.includes('Mac')) {
+    return 'Mac'
+  } else if (platform.value.includes('Win')) {
+    return 'Windows'
+  } else if (platform.value.includes('Linux')) {
+    return 'Linux'
   } else {
-    return null;
+    return null
   }
-});
+})
 const downloadLauncher = computed(() => {
-  if (os.value === "Windows") {
+  if (os.value === 'Windows') {
     return () => {
-      downloadWindows.value?.click();
-    };
-  } else if (os.value === "Linux") {
+      downloadWindows.value?.click()
+    }
+  } else if (os.value === 'Linux') {
     return () => {
-      downloadLinux.value?.click();
-    };
+      downloadLinux.value?.click()
+    }
   } else {
     return () => {
-      scrollToSection();
-    };
+      scrollToSection()
+    }
   }
-});
+})
 
 const handleDownload = () => {
-  downloadLauncher.value();
-};
+  downloadLauncher.value()
+}
 
 watch(
   launcherUpdates,
   (newData) => {
     if (newData?.platforms) {
-      macLinks.universal = newData.platforms["darwin-aarch64"]?.install_urls[0] || null;
-      windowsLink.value = newData.platforms["windows-x86_64"]?.install_urls[0] || null;
-      linuxLinks.appImage = newData.platforms["linux-x86_64"]?.install_urls[1] || null;
-      linuxLinks.deb = newData.platforms["linux-x86_64"]?.install_urls[0] || null;
-      linuxLinks.rpm = newData.platforms["linux-x86_64"]?.install_urls[2] || null;
+      macLinks.universal = newData.platforms['darwin-aarch64']?.install_urls[0] || null
+      windowsLink.value = newData.platforms['windows-x86_64']?.install_urls[0] || null
+      linuxLinks.appImage = newData.platforms['linux-x86_64']?.install_urls[1] || null
+      linuxLinks.deb = newData.platforms['linux-x86_64']?.install_urls[0] || null
+      linuxLinks.rpm = newData.platforms['linux-x86_64']?.install_urls[2] || null
     }
   },
   { immediate: true },
-);
+)
 
 const scrollToSection = () => {
   nextTick(() => {
     if (downloadSection.value) {
       window.scrollTo({
         top: downloadSection.value.offsetTop,
-        behavior: "smooth",
-      });
+        behavior: 'smooth',
+      })
     }
-  });
-};
+  })
+}
 
-const title = "Download the Modrinth App!";
+const title = 'Download the Modrinth App!'
 const description =
-  "The Modrinth App is a unique, open source launcher that allows you to play your favorite mods, and keep them up to date, all in one neat little package.";
+  'The Modrinth App is a unique, open source launcher that allows you to play your favorite mods, and keep them up to date, all in one neat little package.'
 
 useSeoMeta({
   title,
   description,
   ogTitle: title,
   ogDescription: description,
-});
+})
 </script>
 
 <template>
@@ -166,7 +166,7 @@ useSeoMeta({
       <h1 class="main-header">
         Download Modrinth <br v-if="os" />
         App
-        {{ os ? `for ${os}` : "" }}
+        {{ os ? `for ${os}` : '' }}
       </h1>
       <h2 class="main-subheader">
         The Modrinth App is a unique, open source launcher that allows you to play your favorite
@@ -500,7 +500,7 @@ useSeoMeta({
               </div>
               <div class="cell important">Modrinth App</div>
               <div class="cell important">Small</div>
-              <div class="cell important">{{ "< 150 MB" }}</div>
+              <div class="cell important">{{ '< 150 MB' }}</div>
             </div>
             <div class="row">
               <div class="cell">
@@ -939,7 +939,7 @@ useSeoMeta({
 <style scoped lang="scss">
 .landing-hero {
   position: relative;
-  background: #0f1121 url("https://cdn-raw.modrinth.com/app-landing/cube-black.png") no-repeat
+  background: #0f1121 url('https://cdn-raw.modrinth.com/app-landing/cube-black.png') no-repeat
     center 4rem;
   background-size: cover;
   padding: 6rem 1rem 12rem 1rem;
@@ -1950,7 +1950,7 @@ useSeoMeta({
   border-radius: var(--radius-lg);
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     inset: 0;
     padding: 1px;
@@ -2124,7 +2124,7 @@ useSeoMeta({
   }
 
   .landing-hero {
-    background: url("https://cdn-raw.modrinth.com/app-landing/cube-light.png") no-repeat center 4rem;
+    background: url('https://cdn-raw.modrinth.com/app-landing/cube-light.png') no-repeat center 4rem;
     background-size: cover;
   }
 
diff --git a/apps/frontend/src/pages/auth.vue b/apps/frontend/src/pages/auth.vue
index 8edb3eea8..b43a9338b 100644
--- a/apps/frontend/src/pages/auth.vue
+++ b/apps/frontend/src/pages/auth.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
-  middleware: ["launcher-auth"],
-});
+  middleware: ['launcher-auth'],
+})
 </script>
 <template>
   <NuxtPage class="auth-container universal-card" />
diff --git a/apps/frontend/src/pages/auth/authorize.vue b/apps/frontend/src/pages/auth/authorize.vue
index 9d1331fe7..cf4a19f4c 100644
--- a/apps/frontend/src/pages/auth/authorize.vue
+++ b/apps/frontend/src/pages/auth/authorize.vue
@@ -80,161 +80,159 @@
 </template>
 
 <script setup>
-import { CheckIcon,XIcon } from "@modrinth/assets";
-import { Avatar, Button, commonMessages } from "@modrinth/ui";
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import { Avatar, Button, commonMessages } from '@modrinth/ui'
 
-import { useAuth } from "@/composables/auth.js";
-import { useScopes } from "@/composables/auth/scopes.ts";
-import { useBaseFetch } from "@/composables/fetch.js";
+import { useAuth } from '@/composables/auth.js'
+import { useScopes } from '@/composables/auth/scopes.ts'
+import { useBaseFetch } from '@/composables/fetch.js'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
   appInfo: {
-    id: "auth.authorize.app-info",
+    id: 'auth.authorize.app-info',
     defaultMessage:
-      "<strong>{appName}</strong> by <creator-link>{creator}</creator-link> will be able to:",
+      '<strong>{appName}</strong> by <creator-link>{creator}</creator-link> will be able to:',
   },
   authorize: {
-    id: "auth.authorize.action.authorize",
-    defaultMessage: "Authorize",
+    id: 'auth.authorize.action.authorize',
+    defaultMessage: 'Authorize',
   },
   decline: {
-    id: "auth.authorize.action.decline",
-    defaultMessage: "Decline",
+    id: 'auth.authorize.action.decline',
+    defaultMessage: 'Decline',
   },
   noRedirectUrlError: {
-    id: "auth.authorize.error.no-redirect-url",
-    defaultMessage: "No redirect location found in response",
+    id: 'auth.authorize.error.no-redirect-url',
+    defaultMessage: 'No redirect location found in response',
   },
   redirectUrl: {
-    id: "auth.authorize.redirect-url",
-    defaultMessage: "You will be redirected to <redirect-url>{url}</redirect-url>",
+    id: 'auth.authorize.redirect-url',
+    defaultMessage: 'You will be redirected to <redirect-url>{url}</redirect-url>',
   },
   title: {
-    id: "auth.authorize.authorize-app-name",
-    defaultMessage: "Authorize {appName}",
+    id: 'auth.authorize.authorize-app-name',
+    defaultMessage: 'Authorize {appName}',
   },
-});
+})
 
-const data = useNuxtApp();
+const data = useNuxtApp()
 
-const router = useNativeRoute();
-const auth = await useAuth();
-const { scopesToDefinitions } = useScopes();
+const router = useNativeRoute()
+const auth = await useAuth()
+const { scopesToDefinitions } = useScopes()
 
-const clientId = router.query?.client_id || false;
-const redirectUri = router.query?.redirect_uri || false;
-const scope = router.query?.scope || false;
-const state = router.query?.state || false;
+const clientId = router.query?.client_id || false
+const redirectUri = router.query?.redirect_uri || false
+const scope = router.query?.scope || false
+const state = router.query?.state || false
 
 const getFlowIdAuthorization = async () => {
   const query = {
     client_id: clientId,
     redirect_uri: redirectUri,
     scope,
-  };
+  }
   if (state) {
-    query.state = state;
+    query.state = state
   }
 
-  const authorization = await useBaseFetch("oauth/authorize", {
-    method: "GET",
+  const authorization = await useBaseFetch('oauth/authorize', {
+    method: 'GET',
     internal: true,
     query,
-  }); // This will contain the flow_id and oauth_client_id for accepting the oauth on behalf of the user
+  }) // This will contain the flow_id and oauth_client_id for accepting the oauth on behalf of the user
 
-  if (typeof authorization === "string") {
+  if (typeof authorization === 'string') {
     await navigateTo(authorization, {
       external: true,
-    });
+    })
   }
 
-  return authorization;
-};
+  return authorization
+}
 
 const {
   data: authorizationData,
   pending,
   error,
-} = await useAsyncData("authorization", getFlowIdAuthorization);
+} = await useAsyncData('authorization', getFlowIdAuthorization)
 
-const { data: app } = await useAsyncData("oauth/app/" + clientId, () =>
-  useBaseFetch("oauth/app/" + clientId, {
-    method: "GET",
+const { data: app } = await useAsyncData('oauth/app/' + clientId, () =>
+  useBaseFetch('oauth/app/' + clientId, {
+    method: 'GET',
     internal: true,
   }),
-);
+)
 
-const scopeDefinitions = scopesToDefinitions(
-  BigInt(authorizationData.value?.requested_scopes || 0),
-);
+const scopeDefinitions = scopesToDefinitions(BigInt(authorizationData.value?.requested_scopes || 0))
 
-const { data: createdBy } = await useAsyncData("user/" + app.value.created_by, () =>
-  useBaseFetch("user/" + app.value.created_by, {
-    method: "GET",
+const { data: createdBy } = await useAsyncData('user/' + app.value.created_by, () =>
+  useBaseFetch('user/' + app.value.created_by, {
+    method: 'GET',
     apiVersion: 3,
   }),
-);
+)
 
 const onAuthorize = async () => {
   try {
-    const res = await useBaseFetch("oauth/accept", {
-      method: "POST",
+    const res = await useBaseFetch('oauth/accept', {
+      method: 'POST',
       internal: true,
       body: {
         flow: authorizationData.value.flow_id,
       },
-    });
+    })
 
-    if (typeof res === "string") {
+    if (typeof res === 'string') {
       navigateTo(res, {
         external: true,
-      });
-      return;
+      })
+      return
     }
 
-    throw new Error(formatMessage(messages.noRedirectUrlError));
+    throw new Error(formatMessage(messages.noRedirectUrlError))
   } catch {
     data.$notify({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-};
+}
 
 const onReject = async () => {
   try {
-    const res = await useBaseFetch("oauth/reject", {
-      method: "POST",
+    const res = await useBaseFetch('oauth/reject', {
+      method: 'POST',
       body: {
         flow: authorizationData.value.flow_id,
       },
-    });
+    })
 
-    if (typeof res === "string") {
+    if (typeof res === 'string') {
       navigateTo(res, {
         external: true,
-      });
-      return;
+      })
+      return
     }
 
-    throw new Error(formatMessage(messages.noRedirectUrlError));
+    throw new Error(formatMessage(messages.noRedirectUrlError))
   } catch {
     data.$notify({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-};
+}
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 295c66b8d..d0ef14293 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -67,166 +67,166 @@
   </div>
 </template>
 <script setup>
-import { KeyIcon,MailIcon, SendIcon } from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
+import { KeyIcon, MailIcon, SendIcon } from '@modrinth/assets'
+import { commonMessages } from '@modrinth/ui'
 
-import HCaptcha from "@/components/ui/HCaptcha.vue";
+import HCaptcha from '@/components/ui/HCaptcha.vue'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 const methodChoiceMessages = defineMessages({
   description: {
-    id: "auth.reset-password.method-choice.description",
+    id: 'auth.reset-password.method-choice.description',
     defaultMessage:
       "Enter your email below and we'll send a recovery link to allow you to recover your account.",
   },
   emailUsernameLabel: {
-    id: "auth.reset-password.method-choice.email-username.label",
-    defaultMessage: "Email or username",
+    id: 'auth.reset-password.method-choice.email-username.label',
+    defaultMessage: 'Email or username',
   },
   emailUsernamePlaceholder: {
-    id: "auth.reset-password.method-choice.email-username.placeholder",
-    defaultMessage: "Email",
+    id: 'auth.reset-password.method-choice.email-username.placeholder',
+    defaultMessage: 'Email',
   },
   action: {
-    id: "auth.reset-password.method-choice.action",
-    defaultMessage: "Send recovery email",
+    id: 'auth.reset-password.method-choice.action',
+    defaultMessage: 'Send recovery email',
   },
-});
+})
 
 const postChallengeMessages = defineMessages({
   description: {
-    id: "auth.reset-password.post-challenge.description",
-    defaultMessage: "Enter your new password below to gain access to your account.",
+    id: 'auth.reset-password.post-challenge.description',
+    defaultMessage: 'Enter your new password below to gain access to your account.',
   },
   confirmPasswordLabel: {
-    id: "auth.reset-password.post-challenge.confirm-password.label",
-    defaultMessage: "Confirm password",
+    id: 'auth.reset-password.post-challenge.confirm-password.label',
+    defaultMessage: 'Confirm password',
   },
   action: {
-    id: "auth.reset-password.post-challenge.action",
-    defaultMessage: "Reset password",
+    id: 'auth.reset-password.post-challenge.action',
+    defaultMessage: 'Reset password',
   },
-});
+})
 
 // NOTE(Brawaru): Vite uses esbuild for minification so can't combine these
 // because it'll keep the original prop names compared to consts, which names
 // will be mangled.
 const emailSentNotificationMessages = defineMessages({
   title: {
-    id: "auth.reset-password.notification.email-sent.title",
-    defaultMessage: "Email sent",
+    id: 'auth.reset-password.notification.email-sent.title',
+    defaultMessage: 'Email sent',
   },
   text: {
-    id: "auth.reset-password.notification.email-sent.text",
+    id: 'auth.reset-password.notification.email-sent.text',
     defaultMessage:
-      "An email with instructions has been sent to you if the email was previously saved on your account.",
+      'An email with instructions has been sent to you if the email was previously saved on your account.',
   },
-});
+})
 
 const passwordResetNotificationMessages = defineMessages({
   title: {
-    id: "auth.reset-password.notification.password-reset.title",
-    defaultMessage: "Password successfully reset",
+    id: 'auth.reset-password.notification.password-reset.title',
+    defaultMessage: 'Password successfully reset',
   },
   text: {
-    id: "auth.reset-password.notification.password-reset.text",
-    defaultMessage: "You can now log-in into your account with your new password.",
+    id: 'auth.reset-password.notification.password-reset.text',
+    defaultMessage: 'You can now log-in into your account with your new password.',
   },
-});
+})
 
 const messages = defineMessages({
   title: {
-    id: "auth.reset-password.title",
-    defaultMessage: "Reset Password",
+    id: 'auth.reset-password.title',
+    defaultMessage: 'Reset Password',
   },
   longTitle: {
-    id: "auth.reset-password.title.long",
-    defaultMessage: "Reset your password",
+    id: 'auth.reset-password.title.long',
+    defaultMessage: 'Reset your password',
   },
-});
+})
 
 useHead({
   title: () => `${formatMessage(messages.title)} - Modrinth`,
-});
+})
 
-const auth = await useAuth();
+const auth = await useAuth()
 if (auth.value.user) {
-  await navigateTo("/dashboard");
+  await navigateTo('/dashboard')
 }
 
-const route = useNativeRoute();
+const route = useNativeRoute()
 
-const step = ref("choose_method");
+const step = ref('choose_method')
 
 if (route.query.flow) {
-  step.value = "passed_challenge";
+  step.value = 'passed_challenge'
 }
 
-const captcha = ref();
+const captcha = ref()
 
-const email = ref("");
-const token = ref("");
+const email = ref('')
+const token = ref('')
 
 async function recovery() {
-  startLoading();
+  startLoading()
   try {
-    await useBaseFetch("auth/password/reset", {
-      method: "POST",
+    await useBaseFetch('auth/password/reset', {
+      method: 'POST',
       body: {
         username: email.value,
         challenge: token.value,
       },
-    });
+    })
 
     addNotification({
-      group: "main",
+      group: 'main',
       title: formatMessage(emailSentNotificationMessages.title),
       text: formatMessage(emailSentNotificationMessages.text),
-      type: "success",
-    });
+      type: 'success',
+    })
   } catch (err) {
     addNotification({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
-    captcha.value?.reset();
+      type: 'error',
+    })
+    captcha.value?.reset()
   }
-  stopLoading();
+  stopLoading()
 }
 
-const newPassword = ref("");
-const confirmNewPassword = ref("");
+const newPassword = ref('')
+const confirmNewPassword = ref('')
 
 async function changePassword() {
-  startLoading();
+  startLoading()
   try {
-    await useBaseFetch("auth/password", {
-      method: "PATCH",
+    await useBaseFetch('auth/password', {
+      method: 'PATCH',
       body: {
         new_password: newPassword.value,
         flow: route.query.flow,
       },
-    });
+    })
 
     addNotification({
-      group: "main",
+      group: 'main',
       title: formatMessage(passwordResetNotificationMessages.title),
       text: formatMessage(passwordResetNotificationMessages.text),
-      type: "success",
-    });
-    await navigateTo("/auth/sign-in");
+      type: 'success',
+    })
+    await navigateTo('/auth/sign-in')
   } catch (err) {
     addNotification({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
-    captcha.value?.reset();
+      type: 'error',
+    })
+    captcha.value?.reset()
   }
-  stopLoading();
+  stopLoading()
 }
 </script>
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index b94f15101..cb70c2188 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -139,147 +139,147 @@ import {
   SSOGoogleIcon,
   SSOMicrosoftIcon,
   SSOSteamIcon,
-} from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
+} from '@modrinth/assets'
+import { commonMessages } from '@modrinth/ui'
 
-import HCaptcha from "@/components/ui/HCaptcha.vue";
+import HCaptcha from '@/components/ui/HCaptcha.vue'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
   additionalOptionsLabel: {
-    id: "auth.sign-in.additional-options",
+    id: 'auth.sign-in.additional-options',
     defaultMessage:
-      "<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>",
+      '<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>',
   },
   emailUsernameLabel: {
-    id: "auth.sign-in.email-username.label",
-    defaultMessage: "Email or username",
+    id: 'auth.sign-in.email-username.label',
+    defaultMessage: 'Email or username',
   },
   passwordLabel: {
-    id: "auth.sign-in.password.label",
-    defaultMessage: "Password",
+    id: 'auth.sign-in.password.label',
+    defaultMessage: 'Password',
   },
   signInWithLabel: {
-    id: "auth.sign-in.sign-in-with",
-    defaultMessage: "Sign in with",
+    id: 'auth.sign-in.sign-in-with',
+    defaultMessage: 'Sign in with',
   },
   signInTitle: {
-    id: "auth.sign-in.title",
-    defaultMessage: "Sign In",
+    id: 'auth.sign-in.title',
+    defaultMessage: 'Sign In',
   },
   twoFactorCodeInputPlaceholder: {
-    id: "auth.sign-in.2fa.placeholder",
-    defaultMessage: "Enter code...",
+    id: 'auth.sign-in.2fa.placeholder',
+    defaultMessage: 'Enter code...',
   },
   twoFactorCodeLabel: {
-    id: "auth.sign-in.2fa.label",
-    defaultMessage: "Enter two-factor code",
+    id: 'auth.sign-in.2fa.label',
+    defaultMessage: 'Enter two-factor code',
   },
   twoFactorCodeLabelDescription: {
-    id: "auth.sign-in.2fa.description",
-    defaultMessage: "Please enter a two-factor code to proceed.",
+    id: 'auth.sign-in.2fa.description',
+    defaultMessage: 'Please enter a two-factor code to proceed.',
   },
   usePasswordLabel: {
-    id: "auth.sign-in.use-password",
-    defaultMessage: "Or use a password",
+    id: 'auth.sign-in.use-password',
+    defaultMessage: 'Or use a password',
   },
-});
+})
 
 useHead({
   title() {
-    return `${formatMessage(messages.signInTitle)} - Modrinth`;
+    return `${formatMessage(messages.signInTitle)} - Modrinth`
   },
-});
+})
 
-const auth = await useAuth();
-const route = useNativeRoute();
+const auth = await useAuth()
+const route = useNativeRoute()
 
-const redirectTarget = route.query.redirect || "";
-const subtleLauncherRedirectUri = ref();
+const redirectTarget = route.query.redirect || ''
+const subtleLauncherRedirectUri = ref()
 
-if (route.query.code && !route.fullPath.includes("new_account=true")) {
-  await finishSignIn();
+if (route.query.code && !route.fullPath.includes('new_account=true')) {
+  await finishSignIn()
 }
 
 if (auth.value.user) {
-  await finishSignIn();
+  await finishSignIn()
 }
 
-const captcha = ref();
+const captcha = ref()
 
-const email = ref("");
-const password = ref("");
-const token = ref("");
+const email = ref('')
+const password = ref('')
+const token = ref('')
 
-const flow = ref(route.query.flow);
+const flow = ref(route.query.flow)
 
 async function beginPasswordSignIn() {
-  startLoading();
+  startLoading()
   try {
-    const res = await useBaseFetch("auth/login", {
-      method: "POST",
+    const res = await useBaseFetch('auth/login', {
+      method: 'POST',
       body: {
         username: email.value,
         password: password.value,
         challenge: token.value,
       },
-    });
+    })
 
     if (res.flow) {
-      flow.value = res.flow;
+      flow.value = res.flow
     } else {
-      await finishSignIn(res.session);
+      await finishSignIn(res.session)
     }
   } catch (err) {
     addNotification({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
-    captcha.value?.reset();
+      type: 'error',
+    })
+    captcha.value?.reset()
   }
-  stopLoading();
+  stopLoading()
 }
 
-const twoFactorCode = ref(null);
+const twoFactorCode = ref(null)
 async function begin2FASignIn() {
-  startLoading();
+  startLoading()
   try {
-    const res = await useBaseFetch("auth/login/2fa", {
-      method: "POST",
+    const res = await useBaseFetch('auth/login/2fa', {
+      method: 'POST',
       body: {
         flow: flow.value,
         code: twoFactorCode.value ? twoFactorCode.value.toString() : twoFactorCode.value,
       },
-    });
+    })
 
-    await finishSignIn(res.session);
+    await finishSignIn(res.session)
   } catch (err) {
     addNotification({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
-    captcha.value?.reset();
+      type: 'error',
+    })
+    captcha.value?.reset()
   }
-  stopLoading();
+  stopLoading()
 }
 
 async function finishSignIn(token) {
   if (route.query.launcher) {
     if (!token) {
-      token = auth.value.token;
+      token = auth.value.token
     }
 
     const usesLocalhostRedirectionScheme =
-      ["4", "6"].includes(route.query.ipver) && Number(route.query.port) < 65536;
+      ['4', '6'].includes(route.query.ipver) && Number(route.query.port) < 65536
 
     const redirectUrl = usesLocalhostRedirectionScheme
-      ? `http://${route.query.ipver === "4" ? "127.0.0.1" : "[::1]"}:${route.query.port}/?code=${token}`
-      : `https://launcher-files.modrinth.com/?code=${token}`;
+      ? `http://${route.query.ipver === '4' ? '127.0.0.1' : '[::1]'}:${route.query.port}/?code=${token}`
+      : `https://launcher-files.modrinth.com/?code=${token}`
 
     if (usesLocalhostRedirectionScheme) {
       // When using this redirection scheme, the auth token is very visible in the URL to the user.
@@ -289,28 +289,28 @@ async function finishSignIn(token) {
       // token hidden from very casual observation and keeping the protocol as close to OAuth's
       // standard flows as possible, let's execute the redirect within an iframe that visually
       // covers the entire page.
-      subtleLauncherRedirectUri.value = redirectUrl;
+      subtleLauncherRedirectUri.value = redirectUrl
     } else {
       await navigateTo(redirectUrl, {
         external: true,
-      });
+      })
     }
 
-    return;
+    return
   }
 
   if (token) {
-    await useAuth(token);
-    await useUser();
+    await useAuth(token)
+    await useUser()
   }
 
   if (route.query.redirect) {
-    const redirect = decodeURIComponent(route.query.redirect);
+    const redirect = decodeURIComponent(route.query.redirect)
     await navigateTo(redirect, {
       replace: true,
-    });
+    })
   } else {
-    await navigateTo("/dashboard");
+    await navigateTo('/dashboard')
   }
 }
 </script>
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index f5a941c0e..b85edb76f 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -144,101 +144,101 @@ import {
   SSOMicrosoftIcon,
   SSOSteamIcon,
   UserIcon,
-} from "@modrinth/assets";
-import { Checkbox, commonMessages } from "@modrinth/ui";
+} from '@modrinth/assets'
+import { Checkbox, commonMessages } from '@modrinth/ui'
 
-import HCaptcha from "@/components/ui/HCaptcha.vue";
+import HCaptcha from '@/components/ui/HCaptcha.vue'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
   title: {
-    id: "auth.sign-up.title",
-    defaultMessage: "Sign Up",
+    id: 'auth.sign-up.title',
+    defaultMessage: 'Sign Up',
   },
   signUpWithTitle: {
-    id: "auth.sign-up.title.sign-up-with",
-    defaultMessage: "Sign up with",
+    id: 'auth.sign-up.title.sign-up-with',
+    defaultMessage: 'Sign up with',
   },
   createAccountTitle: {
-    id: "auth.sign-up.title.create-account",
-    defaultMessage: "Or create an account yourself",
+    id: 'auth.sign-up.title.create-account',
+    defaultMessage: 'Or create an account yourself',
   },
   emailLabel: {
-    id: "auth.sign-up.email.label",
-    defaultMessage: "Email",
+    id: 'auth.sign-up.email.label',
+    defaultMessage: 'Email',
   },
   usernameLabel: {
-    id: "auth.sign-up.label.username",
-    defaultMessage: "Username",
+    id: 'auth.sign-up.label.username',
+    defaultMessage: 'Username',
   },
   passwordLabel: {
-    id: "auth.sign-up.password.label",
-    defaultMessage: "Password",
+    id: 'auth.sign-up.password.label',
+    defaultMessage: 'Password',
   },
   confirmPasswordLabel: {
-    id: "auth.sign-up.confirm-password.label",
-    defaultMessage: "Confirm password",
+    id: 'auth.sign-up.confirm-password.label',
+    defaultMessage: 'Confirm password',
   },
   subscribeLabel: {
-    id: "auth.sign-up.subscribe.label",
-    defaultMessage: "Subscribe to updates about Modrinth",
+    id: 'auth.sign-up.subscribe.label',
+    defaultMessage: 'Subscribe to updates about Modrinth',
   },
   legalDisclaimer: {
-    id: "auth.sign-up.legal-dislaimer",
+    id: 'auth.sign-up.legal-dislaimer',
     defaultMessage:
       "By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
   },
   createAccountButton: {
-    id: "auth.sign-up.action.create-account",
-    defaultMessage: "Create account",
+    id: 'auth.sign-up.action.create-account',
+    defaultMessage: 'Create account',
   },
   alreadyHaveAccountLabel: {
-    id: "auth.sign-up.sign-in-option.title",
-    defaultMessage: "Already have an account?",
+    id: 'auth.sign-up.sign-in-option.title',
+    defaultMessage: 'Already have an account?',
   },
-});
+})
 
 useHead({
   title: () => `${formatMessage(messages.title)} - Modrinth`,
-});
+})
 
-const auth = await useAuth();
-const route = useNativeRoute();
+const auth = await useAuth()
+const route = useNativeRoute()
 
-const redirectTarget = route.query.redirect;
+const redirectTarget = route.query.redirect
 
 if (auth.value.user) {
-  await navigateTo("/dashboard");
+  await navigateTo('/dashboard')
 }
 
-const captcha = ref();
+const captcha = ref()
 
-const email = ref("");
-const username = ref("");
-const password = ref("");
-const confirmPassword = ref("");
-const token = ref("");
-const subscribe = ref(false);
+const email = ref('')
+const username = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const token = ref('')
+const subscribe = ref(false)
 
 async function createAccount() {
-  startLoading();
+  startLoading()
   try {
     if (confirmPassword.value !== password.value) {
       addNotification({
-        group: "main",
+        group: 'main',
         title: formatMessage(commonMessages.errorNotificationTitle),
         text: formatMessage({
-          id: "auth.sign-up.notification.password-mismatch.text",
-          defaultMessage: "Passwords do not match!",
+          id: 'auth.sign-up.notification.password-mismatch.text',
+          defaultMessage: 'Passwords do not match!',
         }),
-        type: "error",
-      });
-      captcha.value?.reset();
+        type: 'error',
+      })
+      captcha.value?.reset()
     }
 
-    const res = await useBaseFetch("auth/create", {
-      method: "POST",
+    const res = await useBaseFetch('auth/create', {
+      method: 'POST',
       body: {
         username: username.value,
         password: password.value,
@@ -246,30 +246,30 @@ async function createAccount() {
         challenge: token.value,
         sign_up_newsletter: subscribe.value,
       },
-    });
+    })
 
-    await useAuth(res.session);
-    await useUser();
+    await useAuth(res.session)
+    await useUser()
 
     if (route.query.launcher) {
-      await navigateTo({ path: "/auth/sign-in", query: route.query });
-      return;
+      await navigateTo({ path: '/auth/sign-in', query: route.query })
+      return
     }
 
     if (route.query.redirect) {
-      await navigateTo(route.query.redirect);
+      await navigateTo(route.query.redirect)
     } else {
-      await navigateTo("/dashboard");
+      await navigateTo('/dashboard')
     }
   } catch (err) {
     addNotification({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
-    captcha.value?.reset();
+      type: 'error',
+    })
+    captcha.value?.reset()
   }
-  stopLoading();
+  stopLoading()
 }
 </script>
diff --git a/apps/frontend/src/pages/auth/verify-email.vue b/apps/frontend/src/pages/auth/verify-email.vue
index c62434be2..c974c5658 100644
--- a/apps/frontend/src/pages/auth/verify-email.vue
+++ b/apps/frontend/src/pages/auth/verify-email.vue
@@ -52,101 +52,101 @@
   </div>
 </template>
 <script setup>
-import { RightArrowIcon,SettingsIcon } from "@modrinth/assets";
+import { RightArrowIcon, SettingsIcon } from '@modrinth/assets'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
   title: {
-    id: "auth.verify-email.title",
-    defaultMessage: "Verify Email",
+    id: 'auth.verify-email.title',
+    defaultMessage: 'Verify Email',
   },
   accountSettings: {
-    id: "auth.verify-email.action.account-settings",
-    defaultMessage: "Account settings",
+    id: 'auth.verify-email.action.account-settings',
+    defaultMessage: 'Account settings',
   },
   signIn: {
-    id: "auth.verify-email.action.sign-in",
-    defaultMessage: "Sign in",
+    id: 'auth.verify-email.action.sign-in',
+    defaultMessage: 'Sign in',
   },
-});
+})
 
 const alreadyVerifiedMessages = defineMessages({
   title: {
-    id: "auth.verify-email.already-verified.title",
-    defaultMessage: "Email already verified",
+    id: 'auth.verify-email.already-verified.title',
+    defaultMessage: 'Email already verified',
   },
   description: {
-    id: "auth.verify-email.already-verified.description",
-    defaultMessage: "Your email is already verified!",
+    id: 'auth.verify-email.already-verified.description',
+    defaultMessage: 'Your email is already verified!',
   },
-});
+})
 
 const postVerificationMessages = defineMessages({
   title: {
-    id: "auth.verify-email.post-verification.title",
-    defaultMessage: "Email verification",
+    id: 'auth.verify-email.post-verification.title',
+    defaultMessage: 'Email verification',
   },
   description: {
-    id: "auth.verify-email.post-verification.description",
-    defaultMessage: "Your email address has been successfully verified!",
+    id: 'auth.verify-email.post-verification.description',
+    defaultMessage: 'Your email address has been successfully verified!',
   },
-});
+})
 
 const failedVerificationMessages = defineMessages({
   title: {
-    id: "auth.verify-email.failed-verification.title",
-    defaultMessage: "Email verification failed",
+    id: 'auth.verify-email.failed-verification.title',
+    defaultMessage: 'Email verification failed',
   },
   description: {
-    id: "auth.verify-email.failed-verification.description",
+    id: 'auth.verify-email.failed-verification.description',
     defaultMessage:
-      "We were unable to verify your email. Try re-sending the verification email through your dashboard by signing in.",
+      'We were unable to verify your email. Try re-sending the verification email through your dashboard by signing in.',
   },
   loggedInDescription: {
-    id: "auth.verify-email.failed-verification.description.logged-in",
+    id: 'auth.verify-email.failed-verification.description.logged-in',
     defaultMessage:
-      "We were unable to verify your email. Try re-sending the verification email through the button below.",
+      'We were unable to verify your email. Try re-sending the verification email through the button below.',
   },
   action: {
-    id: "auth.verify-email.failed-verification.action",
-    defaultMessage: "Resend verification email",
+    id: 'auth.verify-email.failed-verification.action',
+    defaultMessage: 'Resend verification email',
   },
-});
+})
 
 useHead({
   title: () => `${formatMessage(messages.title)} - Modrinth`,
-});
+})
 
-const auth = await useAuth();
+const auth = await useAuth()
 
-const success = ref(false);
-const route = useNativeRoute();
+const success = ref(false)
+const route = useNativeRoute()
 
 if (route.query.flow) {
   try {
-    const emailVerified = useState("emailVerified", () => null);
+    const emailVerified = useState('emailVerified', () => null)
 
     if (emailVerified.value === null) {
-      await useBaseFetch("auth/email/verify", {
-        method: "POST",
+      await useBaseFetch('auth/email/verify', {
+        method: 'POST',
         body: {
           flow: route.query.flow,
         },
-      });
-      emailVerified.value = true;
-      success.value = true;
+      })
+      emailVerified.value = true
+      success.value = true
     }
 
     if (emailVerified.value) {
-      success.value = true;
+      success.value = true
 
       if (auth.value.token) {
-        await useAuth(auth.value.token);
+        await useAuth(auth.value.token)
       }
     }
   } catch {
-    success.value = false;
+    success.value = false
   }
 }
 </script>
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index f46c77597..c7cd54da6 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -47,8 +47,8 @@
                       transparent
                       @click="
                         () => {
-                          deletedIcon = true;
-                          previewImage = null;
+                          deletedIcon = true
+                          previewImage = null
                         }
                       "
                     >
@@ -94,8 +94,8 @@
                 :multiple="false"
                 :display-name="
                   (s) => {
-                    if (s === 'listed') return formatMessage(commonMessages.publicLabel);
-                    return formatMessage(commonMessages[`${s}Label`]);
+                    if (s === 'listed') return formatMessage(commonMessages.publicLabel)
+                    return formatMessage(commonMessages[`${s}Label`])
                   }
                 "
                 :searchable="false"
@@ -261,7 +261,7 @@
                 return {
                   label: formatMessage(getProjectTypeMessage(x, true)),
                   href: `/collection/${collection.id}/${x}s`,
-                };
+                }
               }),
             ]"
           />
@@ -325,8 +325,8 @@
               class="iconified-button remove-btn"
               @click="
                 () => {
-                  removeProjects = [project];
-                  saveChanges();
+                  removeProjects = [project]
+                  saveChanges()
                 }
               "
             >
@@ -379,7 +379,7 @@ import {
   UpdatedIcon,
   UploadIcon,
   XIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 import {
   Avatar,
   Button,
@@ -389,150 +389,150 @@ import {
   FileInput,
   PopoutMenu,
   useRelativeTime,
-} from "@modrinth/ui";
-import { isAdmin } from "@modrinth/utils";
-import UpToDate from "assets/images/illustrations/up_to_date.svg";
+} from '@modrinth/ui'
+import { isAdmin } from '@modrinth/utils'
+import UpToDate from 'assets/images/illustrations/up_to_date.svg'
 
-import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
-import NavRow from "~/components/ui/NavRow.vue";
-import ProjectCard from "~/components/ui/ProjectCard.vue";
-import { addNotification } from "~/composables/notifs.js";
+import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
+import NavRow from '~/components/ui/NavRow.vue'
+import ProjectCard from '~/components/ui/ProjectCard.vue'
+import { addNotification } from '~/composables/notifs.js'
 
-const vintl = useVIntl();
-const { formatMessage } = vintl;
-const formatRelativeTime = useRelativeTime();
-const formatCompactNumber = useCompactNumber();
+const vintl = useVIntl()
+const { formatMessage } = vintl
+const formatRelativeTime = useRelativeTime()
+const formatCompactNumber = useCompactNumber()
 
 const messages = defineMessages({
   collectionDescription: {
-    id: "collection.description",
-    defaultMessage: "{description} - View the collection {name} by {username} on Modrinth",
+    id: 'collection.description',
+    defaultMessage: '{description} - View the collection {name} by {username} on Modrinth',
   },
   collectionLabel: {
-    id: "collection.label.collection",
-    defaultMessage: "Collection",
+    id: 'collection.label.collection',
+    defaultMessage: 'Collection',
   },
   collectionTitle: {
-    id: "collection.title",
-    defaultMessage: "{name} - Collection",
+    id: 'collection.title',
+    defaultMessage: '{name} - Collection',
   },
   editIconButton: {
-    id: "collection.button.edit-icon",
-    defaultMessage: "Edit icon",
+    id: 'collection.button.edit-icon',
+    defaultMessage: 'Edit icon',
   },
   deleteIconButton: {
-    id: "collection.button.delete-icon",
-    defaultMessage: "Delete icon",
+    id: 'collection.button.delete-icon',
+    defaultMessage: 'Delete icon',
   },
   createdAtLabel: {
-    id: "collection.label.created-at",
-    defaultMessage: "Created {ago}",
+    id: 'collection.label.created-at',
+    defaultMessage: 'Created {ago}',
   },
   collectionNotFoundError: {
-    id: "collection.error.not-found",
-    defaultMessage: "Collection not found",
+    id: 'collection.error.not-found',
+    defaultMessage: 'Collection not found',
   },
   curatedByLabel: {
-    id: "collection.label.curated-by",
-    defaultMessage: "Curated by",
+    id: 'collection.label.curated-by',
+    defaultMessage: 'Curated by',
   },
   deleteModalDescription: {
-    id: "collection.delete-modal.description",
-    defaultMessage: "This will remove this collection forever. This action cannot be undone.",
+    id: 'collection.delete-modal.description',
+    defaultMessage: 'This will remove this collection forever. This action cannot be undone.',
   },
   deleteModalTitle: {
-    id: "collection.delete-modal.title",
-    defaultMessage: "Are you sure you want to delete this collection?",
+    id: 'collection.delete-modal.title',
+    defaultMessage: 'Are you sure you want to delete this collection?',
   },
   followingCollectionDescription: {
-    id: "collection.description.following",
+    id: 'collection.description.following',
     defaultMessage: "Auto-generated collection of all the projects you're following.",
   },
   noProjectsLabel: {
-    id: "collection.label.no-projects",
-    defaultMessage: "This collection has no projects!",
+    id: 'collection.label.no-projects',
+    defaultMessage: 'This collection has no projects!',
   },
   noProjectsAuthLabel: {
-    id: "collection.label.no-projects-auth",
+    id: 'collection.label.no-projects-auth',
     defaultMessage:
       "You don't have any projects.\nWould you like to <create-link>add one</create-link>?",
   },
   ownerLabel: {
-    id: "collection.label.owner",
-    defaultMessage: "Owner",
+    id: 'collection.label.owner',
+    defaultMessage: 'Owner',
   },
   projectsCountLabel: {
-    id: "collection.label.projects-count",
+    id: 'collection.label.projects-count',
     defaultMessage:
-      "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}",
+      '{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}',
   },
   removeProjectButton: {
-    id: "collection.button.remove-project",
-    defaultMessage: "Remove project",
+    id: 'collection.button.remove-project',
+    defaultMessage: 'Remove project',
   },
   unfollowProjectButton: {
-    id: "collection.button.unfollow-project",
-    defaultMessage: "Unfollow project",
+    id: 'collection.button.unfollow-project',
+    defaultMessage: 'Unfollow project',
   },
   updatedAtLabel: {
-    id: "collection.label.updated-at",
-    defaultMessage: "Updated {ago}",
+    id: 'collection.label.updated-at',
+    defaultMessage: 'Updated {ago}',
   },
-});
+})
 
-const data = useNuxtApp();
-const route = useNativeRoute();
-const auth = await useAuth();
-const cosmetics = useCosmetics();
-const tags = useTags();
+const data = useNuxtApp()
+const route = useNativeRoute()
+const auth = await useAuth()
+const cosmetics = useCosmetics()
+const tags = useTags()
 
-const isEditing = ref(false);
+const isEditing = ref(false)
 
 function cycleSearchDisplayMode() {
   cosmetics.value.searchDisplayMode.collection = data.$cycleValue(
     cosmetics.value.searchDisplayMode.collection,
     tags.value.projectViewModes,
-  );
+  )
 }
 
-let collection, refreshCollection, creator, projects, refreshProjects;
+let collection, refreshCollection, creator, projects, refreshProjects
 
 try {
-  if (route.params.id === "following") {
+  if (route.params.id === 'following') {
     collection = ref({
-      id: "following",
-      icon_url: "https://cdn.modrinth.com/follow-collection.png",
+      id: 'following',
+      icon_url: 'https://cdn.modrinth.com/follow-collection.png',
       name: formatMessage(commonMessages.followedProjectsLabel),
       description: formatMessage(messages.followingCollectionDescription),
-      status: "private",
+      status: 'private',
       user: auth.value.user.id,
       created: auth.value.user.created,
       updated: auth.value.user.created,
-    });
-    [{ data: projects, refresh: refreshProjects }] = await Promise.all([
+    })
+    ;[{ data: projects, refresh: refreshProjects }] = await Promise.all([
       useAsyncData(
         `user/${auth.value.user.id}/follows`,
         () => useBaseFetch(`user/${auth.value.user.id}/follows`),
         {
           transform: (projects) => {
             for (const project of projects) {
-              project.categories = project.categories.concat(project.loaders);
+              project.categories = project.categories.concat(project.loaders)
             }
 
-            return projects;
+            return projects
           },
         },
       ),
-    ]);
-    creator = ref(auth.value.user);
-    refreshCollection = async () => {};
+    ])
+    creator = ref(auth.value.user)
+    refreshCollection = async () => {}
   } else {
     const val = await useAsyncData(`collection/${route.params.id}`, () =>
       useBaseFetch(`collection/${route.params.id}`, { apiVersion: 3 }),
-    );
-    collection = val.data;
-    refreshCollection = val.refresh;
-    [{ data: creator }, { data: projects, refresh: refreshProjects }] = await Promise.all([
+    )
+    collection = val.data
+    refreshCollection = val.refresh
+    ;[{ data: creator }, { data: projects, refresh: refreshProjects }] = await Promise.all([
       await useAsyncData(`user/${collection.value.user}`, () =>
         useBaseFetch(`user/${collection.value.user}`),
       ),
@@ -545,22 +545,22 @@ try {
         {
           transform: (projects) => {
             for (const project of projects) {
-              project.categories = project.categories.concat(project.loaders);
+              project.categories = project.categories.concat(project.loaders)
             }
 
-            return projects;
+            return projects
           },
         },
       ),
-    ]);
+    ])
   }
 } catch (err) {
-  console.error(err);
+  console.error(err)
   throw createError({
     fatal: true,
     statusCode: 404,
     message: formatMessage(messages.collectionNotFoundError),
-  });
+  })
 }
 
 if (!collection.value) {
@@ -568,12 +568,12 @@ if (!collection.value) {
     fatal: true,
     statusCode: 404,
     message: formatMessage(messages.collectionNotFoundError),
-  });
+  })
 }
 
 const title = computed(() =>
   formatMessage(messages.collectionTitle, { name: collection.value.name }),
-);
+)
 
 useSeoMeta({
   title,
@@ -585,65 +585,65 @@ useSeoMeta({
     }),
   ogTitle: title,
   ogDescription: collection.value.description,
-  ogImage: collection.value.icon_url ?? "https://cdn.modrinth.com/placeholder.png",
-  robots: collection.value.status === "listed" ? "all" : "noindex",
-});
+  ogImage: collection.value.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
+  robots: collection.value.status === 'listed' ? 'all' : 'noindex',
+})
 
 const canEdit = computed(
   () =>
     auth.value.user &&
     (auth.value.user.id === collection.value.user || isAdmin(auth.value.user)) &&
-    collection.value.id !== "following",
-);
+    collection.value.id !== 'following',
+)
 
 const projectTypes = computed(() => {
   const projectSet = new Set(
     projects.value?.map((project) => project?.project_type).filter((x) => x !== undefined) || [],
-  );
-  projectSet.delete("project");
-  return Array.from(projectSet);
-});
+  )
+  projectSet.delete('project')
+  return Array.from(projectSet)
+})
 
-const icon = ref(null);
-const deletedIcon = ref(false);
-const previewImage = ref(null);
+const icon = ref(null)
+const deletedIcon = ref(false)
+const previewImage = ref(null)
 
-const name = ref(collection.value.name);
-const summary = ref(collection.value.description);
-const visibility = ref(collection.value.status);
-const removeProjects = ref([]);
+const name = ref(collection.value.name)
+const summary = ref(collection.value.description)
+const visibility = ref(collection.value.status)
+const removeProjects = ref([])
 
 async function unfollowProject(project) {
-  await userFollowProject(project);
-  projects.value = projects.value.filter((x) => x.id !== project.id);
+  await userFollowProject(project)
+  projects.value = projects.value.filter((x) => x.id !== project.id)
 }
 
 async function saveChanges() {
-  startLoading();
+  startLoading()
   try {
     if (deletedIcon.value) {
       await useBaseFetch(`collection/${collection.value.id}/icon`, {
-        method: "DELETE",
+        method: 'DELETE',
         apiVersion: 3,
-      });
+      })
     } else if (icon.value) {
-      const ext = icon.value?.type?.split("/").pop();
-      if (!ext) throw new Error("Invalid file type");
+      const ext = icon.value?.type?.split('/').pop()
+      if (!ext) throw new Error('Invalid file type')
       await useBaseFetch(`collection/${collection.value.id}/icon?ext=${ext}`, {
-        method: "PATCH",
+        method: 'PATCH',
         body: icon.value,
         apiVersion: 3,
-      });
+      })
     }
 
-    const projectsToRemove = removeProjects.value?.map((p) => p.id) ?? [];
+    const projectsToRemove = removeProjects.value?.map((p) => p.id) ?? []
     const newProjects = projects.value
       .filter((p) => !projectsToRemove.includes(p.id))
-      .map((p) => p.id);
-    const newProjectIds = projectsToRemove.length > 0 ? newProjects : undefined;
+      .map((p) => p.id)
+    const newProjectIds = projectsToRemove.length > 0 ? newProjects : undefined
 
     await useBaseFetch(`collection/${collection.value.id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: {
         name: name.value,
         description: summary.value || null,
@@ -651,61 +651,61 @@ async function saveChanges() {
         new_projects: newProjectIds,
       },
       apiVersion: 3,
-    });
+    })
 
-    await refreshCollection();
-    await refreshProjects();
+    await refreshCollection()
+    await refreshProjects()
 
-    name.value = collection.value.name;
-    summary.value = collection.value.description;
-    visibility.value = collection.value.status;
-    removeProjects.value = [];
+    name.value = collection.value.name
+    summary.value = collection.value.description
+    visibility.value = collection.value.status
+    removeProjects.value = []
 
-    isEditing.value = false;
+    isEditing.value = false
   } catch (err) {
     addNotification({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  await initUserCollections();
-  stopLoading();
+  await initUserCollections()
+  stopLoading()
 }
 
 async function deleteCollection() {
-  startLoading();
+  startLoading()
   try {
     await useBaseFetch(`collection/${collection.value.id}`, {
-      method: "DELETE",
+      method: 'DELETE',
       apiVersion: 3,
-    });
+    })
     if (auth.value.user.id === collection.value.user) {
-      await navigateTo("/dashboard/collections");
+      await navigateTo('/dashboard/collections')
     } else {
-      await navigateTo(`/user/${collection.value.user}/collections`);
+      await navigateTo(`/user/${collection.value.user}/collections`)
     }
   } catch (err) {
     addNotification({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  await initUserCollections();
-  stopLoading();
+  await initUserCollections()
+  stopLoading()
 }
 
 function showPreviewImage(files) {
-  const reader = new FileReader();
-  icon.value = files[0];
-  deletedIcon.value = false;
-  reader.readAsDataURL(icon.value);
+  const reader = new FileReader()
+  icon.value = files[0]
+  deletedIcon.value = false
+  reader.readAsDataURL(icon.value)
   reader.onload = (event) => {
-    previewImage.value = event.target.result;
-  };
+    previewImage.value = event.target.result
+  }
 }
 </script>
 
diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index c7f4a2806..2eaf575ff 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -51,17 +51,17 @@ import {
   ListIcon,
   OrganizationIcon,
   ReportIcon,
-} from "@modrinth/assets";
-import { commonMessages } from "@modrinth/ui";
+} from '@modrinth/assets'
+import { commonMessages } from '@modrinth/ui'
 
-import NavStack from "~/components/ui/NavStack.vue";
-import NavStackItem from "~/components/ui/NavStackItem.vue";
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
-const route = useNativeRoute();
+const route = useNativeRoute()
 </script>
diff --git a/apps/frontend/src/pages/dashboard/analytics.vue b/apps/frontend/src/pages/dashboard/analytics.vue
index 9a6e65a50..708f7a37d 100644
--- a/apps/frontend/src/pages/dashboard/analytics.vue
+++ b/apps/frontend/src/pages/dashboard/analytics.vue
@@ -5,20 +5,20 @@
 </template>
 
 <script setup>
-import ChartDisplay from "~/components/ui/charts/ChartDisplay.vue";
+import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
 useHead({
-  title: "Analytics - Modrinth",
-});
+  title: 'Analytics - Modrinth',
+})
 
-const auth = await useAuth();
-const id = auth.value?.user?.id;
+const auth = await useAuth()
+const id = auth.value?.user?.id
 
 const { data: projects } = await useAsyncData(`user/${id}/projects`, () =>
   useBaseFetch(`user/${id}/projects`),
-);
+)
 </script>
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
index cd7d1ea28..26570d3bd 100644
--- a/apps/frontend/src/pages/dashboard/index.vue
+++ b/apps/frontend/src/pages/dashboard/index.vue
@@ -42,7 +42,7 @@
             class="goto-link view-more-notifs mt-4"
             to="/dashboard/notifications"
           >
-            View {{ extraNotifs }} more notification{{ extraNotifs === 1 ? "" : "s" }}
+            View {{ extraNotifs }} more notification{{ extraNotifs === 1 ? '' : 's' }}
             <ChevronRightIcon />
           </nuxt-link>
         </template>
@@ -68,7 +68,7 @@
             <span
               >from
               {{ downloadsProjectCount }}
-              project{{ downloadsProjectCount === 1 ? "" : "s" }}</span
+              project{{ downloadsProjectCount === 1 ? '' : 's' }}</span
             >
             <!--          <NuxtLink class="goto-link" to="/dashboard/analytics"-->
             <!--            >View breakdown-->
@@ -85,7 +85,7 @@
             <span>
               <span
                 >from {{ followersProjectCount }} project{{
-                  followersProjectCount === 1 ? "" : "s"
+                  followersProjectCount === 1 ? '' : 's'
                 }}</span
               ></span
             >
@@ -96,58 +96,58 @@
   </div>
 </template>
 <script setup>
-import { ChevronRightIcon, HistoryIcon } from "@modrinth/assets";
-import { Avatar } from "@modrinth/ui";
+import { ChevronRightIcon, HistoryIcon } from '@modrinth/assets'
+import { Avatar } from '@modrinth/ui'
 
-import NotificationItem from "~/components/ui/NotificationItem.vue";
-import { fetchExtraNotificationData, groupNotifications } from "~/helpers/notifications.ts";
+import NotificationItem from '~/components/ui/NotificationItem.vue'
+import { fetchExtraNotificationData, groupNotifications } from '~/helpers/notifications.ts'
 
 useHead({
-  title: "Dashboard - Modrinth",
-});
+  title: 'Dashboard - Modrinth',
+})
 
-const auth = await useAuth();
+const auth = await useAuth()
 
 const [{ data: projects }] = await Promise.all([
   useAsyncData(`user/${auth.value.user.id}/projects`, () =>
     useBaseFetch(`user/${auth.value.user.id}/projects`),
   ),
-]);
+])
 
 const downloadsProjectCount = computed(
   () => projects.value.filter((project) => project.downloads > 0).length,
-);
+)
 const followersProjectCount = computed(
   () => projects.value.filter((project) => project.followers > 0).length,
-);
+)
 
 const { data, refresh } = await useAsyncData(async () => {
-  const notifications = await useBaseFetch(`user/${auth.value.user.id}/notifications`);
+  const notifications = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
 
-  const filteredNotifications = notifications.filter((notif) => !notif.read);
-  const slice = filteredNotifications.slice(0, 30); // send first 30 notifs to be grouped before trimming to 3
+  const filteredNotifications = notifications.filter((notif) => !notif.read)
+  const slice = filteredNotifications.slice(0, 30) // send first 30 notifs to be grouped before trimming to 3
 
   return fetchExtraNotificationData(slice).then((notifications) => {
-    notifications = groupNotifications(notifications).slice(0, 3);
-    return { notifications, extraNotifs: filteredNotifications.length - slice.length };
-  });
-});
+    notifications = groupNotifications(notifications).slice(0, 3)
+    return { notifications, extraNotifs: filteredNotifications.length - slice.length }
+  })
+})
 
 const notifications = computed(() => {
   if (data.value === null) {
-    return [];
+    return []
   }
-  return data.value.notifications;
-});
+  return data.value.notifications
+})
 
-const extraNotifs = computed(() => (data.value ? data.value.extraNotifs : 0));
+const extraNotifs = computed(() => (data.value ? data.value.extraNotifs : 0))
 </script>
 <style lang="scss">
 .dashboard-overview {
   display: grid;
   grid-template:
-    "header header"
-    "notifications analytics" / 1fr auto;
+    'header header'
+    'notifications analytics' / 1fr auto;
   gap: var(--spacing-card-md);
 
   > .universal-card {
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index 8907f110f..8ce40ef8d 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -56,86 +56,86 @@
   </div>
 </template>
 <script setup>
-import { CheckCheckIcon,HistoryIcon } from "@modrinth/assets";
-import { Button, Chips,Pagination } from "@modrinth/ui";
-import { formatProjectType } from "@modrinth/utils";
+import { CheckCheckIcon, HistoryIcon } from '@modrinth/assets'
+import { Button, Chips, Pagination } from '@modrinth/ui'
+import { formatProjectType } from '@modrinth/utils'
 
-import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
-import NotificationItem from "~/components/ui/NotificationItem.vue";
+import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
+import NotificationItem from '~/components/ui/NotificationItem.vue'
 import {
   fetchExtraNotificationData,
   groupNotifications,
   markAsRead,
-} from "~/helpers/notifications.ts";
+} from '~/helpers/notifications.ts'
 
 useHead({
-  title: "Notifications - Modrinth",
-});
+  title: 'Notifications - Modrinth',
+})
 
-const auth = await useAuth();
-const route = useNativeRoute();
-const router = useNativeRouter();
+const auth = await useAuth()
+const route = useNativeRoute()
+const router = useNativeRouter()
 
-const history = computed(() => route.name === "dashboard-notifications-history");
-const selectedType = ref("all");
-const page = ref(1);
-const perPage = ref(50);
+const history = computed(() => route.name === 'dashboard-notifications-history')
+const selectedType = ref('all')
+const page = ref(1)
+const perPage = ref(50)
 
 const { data, pending, error, refresh } = await useAsyncData(
   async () => {
-    const pageNum = page.value - 1;
-    const showRead = history.value;
-    const notifications = await useBaseFetch(`user/${auth.value.user.id}/notifications`);
+    const pageNum = page.value - 1
+    const showRead = history.value
+    const notifications = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
 
     const typesInFeed = [
       ...new Set(notifications.filter((n) => showRead || !n.read).map((n) => n.type)),
-    ];
+    ]
 
     const filtered = notifications.filter(
       (n) =>
-        (selectedType.value === "all" || n.type === selectedType.value) && (showRead || !n.read),
-    );
+        (selectedType.value === 'all' || n.type === selectedType.value) && (showRead || !n.read),
+    )
 
-    const pages = Math.max(1, Math.ceil(filtered.length / perPage.value));
+    const pages = Math.max(1, Math.ceil(filtered.length / perPage.value))
 
     return fetchExtraNotificationData(
       filtered.slice(pageNum * perPage.value, pageNum * perPage.value + perPage.value),
     ).then((notifs) => ({
       notifications: notifs,
-      notifTypes: typesInFeed.length > 1 ? ["all", ...typesInFeed] : typesInFeed,
+      notifTypes: typesInFeed.length > 1 ? ['all', ...typesInFeed] : typesInFeed,
       pages,
       hasRead: notifications.some((n) => n.read),
-    }));
+    }))
   },
   { watch: [page, history, selectedType] },
-);
+)
 
 const notifications = computed(() =>
   data.value ? groupNotifications(data.value.notifications, history.value) : [],
-);
+)
 
-const notifTypes = computed(() => data.value?.notifTypes || []);
-const pages = computed(() => data.value?.pages ?? 1);
+const notifTypes = computed(() => data.value?.notifTypes || [])
+const pages = computed(() => data.value?.pages ?? 1)
 
 function updateRoute() {
-  router.push(history.value ? "/dashboard/notifications" : "/dashboard/notifications/history");
-  selectedType.value = "all";
-  page.value = 1;
+  router.push(history.value ? '/dashboard/notifications' : '/dashboard/notifications/history')
+  selectedType.value = 'all'
+  page.value = 1
 }
 
 async function readAll() {
   const ids = notifications.value.flatMap((n) => [
     n.id,
     ...(n.grouped_notifs ? n.grouped_notifs.map((g) => g.id) : []),
-  ]);
+  ])
 
-  await markAsRead(ids);
-  await refresh();
+  await markAsRead(ids)
+  await refresh()
 }
 
 function changePage(newPage) {
-  page.value = newPage;
-  if (import.meta.client) window.scrollTo({ top: 0, behavior: "smooth" });
+  page.value = newPage
+  if (import.meta.client) window.scrollTo({ top: 0, behavior: 'smooth' })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/dashboard/report/[id].vue b/apps/frontend/src/pages/dashboard/report/[id].vue
index 8c5b908a4..ae1a88829 100644
--- a/apps/frontend/src/pages/dashboard/report/[id].vue
+++ b/apps/frontend/src/pages/dashboard/report/[id].vue
@@ -6,12 +6,12 @@
   />
 </template>
 <script setup>
-import ReportView from "~/components/ui/report/ReportView.vue";
+import ReportView from '~/components/ui/report/ReportView.vue'
 
-const route = useNativeRoute();
-const auth = await useAuth();
+const route = useNativeRoute()
+const auth = await useAuth()
 
 useHead({
   title: `Report ${route.params.id} - Modrinth`,
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/dashboard/reports.vue b/apps/frontend/src/pages/dashboard/reports.vue
index a09f4fb5b..63489d019 100644
--- a/apps/frontend/src/pages/dashboard/reports.vue
+++ b/apps/frontend/src/pages/dashboard/reports.vue
@@ -7,10 +7,10 @@
   </div>
 </template>
 <script setup>
-import ReportsList from "~/components/ui/report/ReportsList.vue";
+import ReportsList from '~/components/ui/report/ReportsList.vue'
 
-const auth = await useAuth();
+const auth = await useAuth()
 useHead({
-  title: "Active reports - Modrinth",
-});
+  title: 'Active reports - Modrinth',
+})
 </script>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index bded3c849..98ff6550c 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -148,68 +148,68 @@ import {
   TransferIcon,
   UnknownIcon,
   XIcon,
-} from "@modrinth/assets";
-import { formatDate } from "@modrinth/utils";
-import dayjs from "dayjs";
-import { computed } from "vue";
+} from '@modrinth/assets'
+import { formatDate } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed } from 'vue'
 
-const auth = await useAuth();
-const minWithdraw = ref(0.01);
+const auth = await useAuth()
+const minWithdraw = ref(0.01)
 
 const { data: userBalance } = await useAsyncData(`payout/balance`, () =>
   useBaseFetch(`payout/balance`, { apiVersion: 3 }),
-);
+)
 
 const deadlineEnding = computed(() => {
-  let deadline = dayjs().subtract(2, "month").endOf("month").add(60, "days");
-  if (deadline.isBefore(dayjs().startOf("day"))) {
-    deadline = dayjs().subtract(1, "month").endOf("month").add(60, "days");
+  let deadline = dayjs().subtract(2, 'month').endOf('month').add(60, 'days')
+  if (deadline.isBefore(dayjs().startOf('day'))) {
+    deadline = dayjs().subtract(1, 'month').endOf('month').add(60, 'days')
   }
-  return deadline;
-});
+  return deadline
+})
 
 const availableSoonDates = computed(() => {
   // Get the next 3 dates from userBalance.dates that are from now to the deadline + 4 months to make sure we get all the pending ones.
   const dates = Object.keys(userBalance.value.dates)
     .filter((date) => {
-      const dateObj = dayjs(date);
+      const dateObj = dayjs(date)
       return (
-        dateObj.isAfter(dayjs()) && dateObj.isBefore(dayjs(deadlineEnding.value).add(4, "month"))
-      );
+        dateObj.isAfter(dayjs()) && dateObj.isBefore(dayjs(deadlineEnding.value).add(4, 'month'))
+      )
     })
-    .sort((a, b) => dayjs(a).diff(dayjs(b)));
+    .sort((a, b) => dayjs(a).diff(dayjs(b)))
 
   return dates.reduce((acc, date) => {
-    acc[date] = userBalance.value.dates[date];
-    return acc;
-  }, {});
-});
+    acc[date] = userBalance.value.dates[date]
+    return acc
+  }, {})
+})
 
-const availableSoonDateKeys = computed(() => Object.keys(availableSoonDates.value));
+const availableSoonDateKeys = computed(() => Object.keys(availableSoonDates.value))
 
 async function updateVenmo() {
-  startLoading();
+  startLoading()
   try {
     const data = {
       venmo_handle: auth.value.user.payout_data.venmo_handle ?? null,
-    };
+    }
 
     await useBaseFetch(`user/${auth.value.user.id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: data,
       apiVersion: 3,
-    });
-    await useAuth(auth.value.token);
+    })
+    await useAuth(auth.value.token)
   } catch (err) {
-    const data = useNuxtApp();
+    const data = useNuxtApp()
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index 70932163f..89f9649f9 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -57,8 +57,8 @@
                   {{
                     getRangeOfMethod(method)
                       .map($formatMoney)
-                      .map((i) => i.replace(".00", ""))
-                      .join("–")
+                      .map((i) => i.replace('.00', ''))
+                      .join('–')
                   }}
                 </span>
               </div>
@@ -194,29 +194,29 @@ import {
   SearchIcon,
   TransferIcon,
   XIcon,
-} from "@modrinth/assets";
-import { Breadcrumbs,Checkbox, Chips } from "@modrinth/ui";
-import { formatMoney, formatWallet } from "@modrinth/utils";
-import { all } from "iso-3166-1";
-import { Multiselect } from "vue-multiselect";
+} from '@modrinth/assets'
+import { Breadcrumbs, Checkbox, Chips } from '@modrinth/ui'
+import { formatMoney, formatWallet } from '@modrinth/utils'
+import { all } from 'iso-3166-1'
+import { Multiselect } from 'vue-multiselect'
 
-import VenmoIcon from "~/assets/images/external/venmo.svg?component";
+import VenmoIcon from '~/assets/images/external/venmo.svg?component'
 
-const auth = await useAuth();
-const data = useNuxtApp();
+const auth = await useAuth()
+const data = useNuxtApp()
 
 const countries = computed(() =>
   all().map((x) => ({
     id: x.alpha2,
-    name: x.alpha2 === "TW" ? "Taiwan" : x.country,
+    name: x.alpha2 === 'TW' ? 'Taiwan' : x.country,
   })),
-);
-const search = ref("");
+)
+const search = ref('')
 
-const amount = ref("");
+const amount = ref('')
 const country = ref(
-  countries.value.find((x) => x.id === (auth.value.user.payout_data.paypal_region ?? "US")),
-);
+  countries.value.find((x) => x.id === (auth.value.user.payout_data.paypal_region ?? 'US')),
+)
 
 const [{ data: userBalance }, { data: payoutMethods, refresh: refreshPayoutMethods }] =
   await Promise.all([
@@ -224,18 +224,18 @@ const [{ data: userBalance }, { data: payoutMethods, refresh: refreshPayoutMetho
     useAsyncData(`payout/methods?country=${country.value.id}`, () =>
       useBaseFetch(`payout/methods?country=${country.value.id}`, { apiVersion: 3 }),
     ),
-  ]);
+  ])
 
-const selectedMethodId = ref(payoutMethods.value[0].id);
+const selectedMethodId = ref(payoutMethods.value[0].id)
 const selectedMethod = computed(() =>
   payoutMethods.value.find((x) => x.id === selectedMethodId.value),
-);
+)
 
 const parsedAmount = computed(() => {
-  const regex = /^\$?(\d*(\.\d{2})?)$/gm;
-  const matches = regex.exec(amount.value);
-  return matches && matches[1] ? parseFloat(matches[1]) : 0.0;
-});
+  const regex = /^\$?(\d*(\.\d{2})?)$/gm
+  const matches = regex.exec(amount.value)
+  return matches && matches[1] ? parseFloat(matches[1]) : 0.0
+})
 const fees = computed(() => {
   return Math.min(
     Math.max(
@@ -243,137 +243,137 @@ const fees = computed(() => {
       selectedMethod.value.fee.percentage * parsedAmount.value,
     ),
     selectedMethod.value.fee.max ?? Number.MAX_VALUE,
-  );
-});
+  )
+})
 
 const getIntervalRange = (intervalType) => {
   if (!intervalType) {
-    return [];
+    return []
   }
 
-  const { min, max, values } = intervalType;
+  const { min, max, values } = intervalType
   if (values) {
-    const first = values[0];
-    const last = values.slice(-1)[0];
-    return first === last ? [first] : [first, last];
+    const first = values[0]
+    const last = values.slice(-1)[0]
+    return first === last ? [first] : [first, last]
   }
 
-  return min === max ? [min] : [min, max];
-};
+  return min === max ? [min] : [min, max]
+}
 
 const getRangeOfMethod = (method) => {
-  return getIntervalRange(method.interval?.fixed || method.interval?.standard);
-};
+  return getIntervalRange(method.interval?.fixed || method.interval?.standard)
+}
 
 const maxWithdrawAmount = computed(() => {
-  const interval = selectedMethod.value.interval;
-  return interval?.standard ? interval.standard.max : (interval?.fixed?.values.slice(-1)[0] ?? 0);
-});
+  const interval = selectedMethod.value.interval
+  return interval?.standard ? interval.standard.max : (interval?.fixed?.values.slice(-1)[0] ?? 0)
+})
 
 const minWithdrawAmount = computed(() => {
-  const interval = selectedMethod.value.interval;
-  return interval?.standard ? interval.standard.min : (interval?.fixed?.values?.[0] ?? fees.value);
-});
+  const interval = selectedMethod.value.interval
+  return interval?.standard ? interval.standard.min : (interval?.fixed?.values?.[0] ?? fees.value)
+})
 
 const withdrawAccount = computed(() => {
-  if (selectedMethod.value.type === "paypal") {
-    return auth.value.user.payout_data.paypal_address;
-  } else if (selectedMethod.value.type === "venmo") {
-    return auth.value.user.payout_data.venmo_handle;
+  if (selectedMethod.value.type === 'paypal') {
+    return auth.value.user.payout_data.paypal_address
+  } else if (selectedMethod.value.type === 'venmo') {
+    return auth.value.user.payout_data.venmo_handle
   } else {
-    return auth.value.user.email;
+    return auth.value.user.email
   }
-});
+})
 const knownErrors = computed(() => {
-  const errors = [];
-  if (selectedMethod.value.type === "paypal" && !auth.value.user.payout_data.paypal_address) {
-    errors.push("Please link your PayPal account in the dashboard to proceed.");
+  const errors = []
+  if (selectedMethod.value.type === 'paypal' && !auth.value.user.payout_data.paypal_address) {
+    errors.push('Please link your PayPal account in the dashboard to proceed.')
   }
-  if (selectedMethod.value.type === "venmo" && !auth.value.user.payout_data.venmo_handle) {
-    errors.push("Please set your Venmo handle in the dashboard to proceed.");
+  if (selectedMethod.value.type === 'venmo' && !auth.value.user.payout_data.venmo_handle) {
+    errors.push('Please set your Venmo handle in the dashboard to proceed.')
   }
-  if (selectedMethod.value.type === "tremendous") {
+  if (selectedMethod.value.type === 'tremendous') {
     if (!auth.value.user.email) {
-      errors.push("Please set your email address in your account settings to proceed.");
+      errors.push('Please set your email address in your account settings to proceed.')
     }
     if (!auth.value.user.email_verified) {
-      errors.push("Please verify your email address to proceed.");
+      errors.push('Please verify your email address to proceed.')
     }
   }
 
   if (!parsedAmount.value && amount.value.length > 0) {
-    errors.push(`${amount.value} is not a valid amount`);
+    errors.push(`${amount.value} is not a valid amount`)
   } else if (
     parsedAmount.value > userBalance.value.available ||
     parsedAmount.value > maxWithdrawAmount.value
   ) {
-    const maxAmount = Math.min(userBalance.value.available, maxWithdrawAmount.value);
-    errors.push(`The amount must be no more than ${data.$formatMoney(maxAmount)}`);
+    const maxAmount = Math.min(userBalance.value.available, maxWithdrawAmount.value)
+    errors.push(`The amount must be no more than ${data.$formatMoney(maxAmount)}`)
   } else if (parsedAmount.value <= fees.value || parsedAmount.value < minWithdrawAmount.value) {
-    const minAmount = Math.max(fees.value + 0.01, minWithdrawAmount.value);
-    errors.push(`The amount must be at least ${data.$formatMoney(minAmount)}`);
+    const minAmount = Math.max(fees.value + 0.01, minWithdrawAmount.value)
+    errors.push(`The amount must be at least ${data.$formatMoney(minAmount)}`)
   }
 
-  return errors;
-});
+  return errors
+})
 
-const agreedTransfer = ref(false);
-const agreedFees = ref(false);
-const agreedTerms = ref(false);
+const agreedTransfer = ref(false)
+const agreedFees = ref(false)
+const agreedTerms = ref(false)
 
 watch(country, async () => {
-  await refreshPayoutMethods();
+  await refreshPayoutMethods()
   if (payoutMethods.value && payoutMethods.value[0]) {
-    selectedMethodId.value = payoutMethods.value[0].id;
+    selectedMethodId.value = payoutMethods.value[0].id
   }
-});
+})
 
 watch(selectedMethod, () => {
   if (selectedMethod.value.interval?.fixed) {
-    amount.value = selectedMethod.value.interval.fixed.values[0];
+    amount.value = selectedMethod.value.interval.fixed.values[0]
   }
   if (maxWithdrawAmount.value === minWithdrawAmount.value) {
-    amount.value = maxWithdrawAmount.value;
+    amount.value = maxWithdrawAmount.value
   }
-  agreedTransfer.value = false;
-  agreedFees.value = false;
-  agreedTerms.value = false;
-});
+  agreedTransfer.value = false
+  agreedFees.value = false
+  agreedTerms.value = false
+})
 
 async function withdraw() {
-  startLoading();
+  startLoading()
   try {
-    const auth = await useAuth();
+    const auth = await useAuth()
 
     await useBaseFetch(`payout`, {
-      method: "POST",
+      method: 'POST',
       body: {
         amount: parsedAmount.value,
         method: selectedMethod.value.type,
         method_id: selectedMethod.value.id,
       },
       apiVersion: 3,
-    });
-    await useAuth(auth.value.token);
-    await navigateTo("/dashboard/revenue");
+    })
+    await useAuth(auth.value.token)
+    await navigateTo('/dashboard/revenue')
     data.$notify({
-      group: "main",
-      title: "Withdrawal complete",
+      group: 'main',
+      title: 'Withdrawal complete',
       text:
-        selectedMethod.value.type === "tremendous"
-          ? "An email has been sent to your account with further instructions on how to redeem your payout!"
+        selectedMethod.value.type === 'tremendous'
+          ? 'An email has been sent to your account with further instructions on how to redeem your payout!'
           : `Payment has been sent to your ${formatWallet(selectedMethod.value.type)} account!`,
-      type: "success",
-    });
+      type: 'success',
+    })
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 </script>
 
diff --git a/apps/frontend/src/pages/flags.vue b/apps/frontend/src/pages/flags.vue
index 265679273..7a62e6bd8 100644
--- a/apps/frontend/src/pages/flags.vue
+++ b/apps/frontend/src/pages/flags.vue
@@ -3,9 +3,9 @@ import {
   DEFAULT_FEATURE_FLAGS,
   type FeatureFlag,
   saveFeatureFlags,
-} from "~/composables/featureFlags.ts";
+} from '~/composables/featureFlags.ts'
 
-const flags = shallowReactive(useFeatureFlags().value);
+const flags = shallowReactive(useFeatureFlags().value)
 </script>
 
 <template>
@@ -19,7 +19,7 @@ const flags = shallowReactive(useFeatureFlags().value);
       >
         <label :for="`toggle-${flag}`">
           <span class="label__title">
-            {{ flag.replaceAll("_", " ") }}
+            {{ flag.replaceAll('_', ' ') }}
           </span>
           <span class="label__description">
             <p>
diff --git a/apps/frontend/src/pages/frog.vue b/apps/frontend/src/pages/frog.vue
index e91b221cb..ebb60b636 100644
--- a/apps/frontend/src/pages/frog.vue
+++ b/apps/frontend/src/pages/frog.vue
@@ -1,52 +1,52 @@
 <script setup lang="ts">
-import { useRelativeTime } from "@modrinth/ui";
+import { useRelativeTime } from '@modrinth/ui'
 
-const vintl = useVIntl();
-const { formatMessage } = vintl;
+const vintl = useVIntl()
+const { formatMessage } = vintl
 
 const messages = defineMessages({
   frogTitle: {
-    id: "frog.title",
-    defaultMessage: "Frog",
+    id: 'frog.title',
+    defaultMessage: 'Frog',
   },
   frogDescription: {
-    id: "frog",
+    id: 'frog',
     defaultMessage: "You've been frogged! 🐸",
   },
   frogAltText: {
-    id: "frog.altText",
-    defaultMessage: "A photorealistic painting of a frog labyrinth",
+    id: 'frog.altText',
+    defaultMessage: 'A photorealistic painting of a frog labyrinth',
   },
   frogSinceOpened: {
-    id: "frog.sinceOpened",
-    defaultMessage: "This page was opened {ago}",
+    id: 'frog.sinceOpened',
+    defaultMessage: 'This page was opened {ago}',
   },
   frogFroggedPeople: {
-    id: "frog.froggedPeople",
+    id: 'frog.froggedPeople',
     defaultMessage:
-      "{count, plural, one {{count} more person} other {{count} more people}} were also frogged!",
+      '{count, plural, one {{count} more person} other {{count} more people}} were also frogged!',
   },
-});
+})
 
-const formatCompactNumber = useCompactNumber();
+const formatCompactNumber = useCompactNumber()
 
-const formatRelativeTime = useRelativeTime();
+const formatRelativeTime = useRelativeTime()
 
-const pageOpen = useState("frogPageOpen", () => Date.now());
-const peopleFrogged = useState("frogPeopleFrogged", () => Math.round(Math.random() * 100_000_000));
-const peopleFroggedCount = computed(() => formatCompactNumber(peopleFrogged.value));
+const pageOpen = useState('frogPageOpen', () => Date.now())
+const peopleFrogged = useState('frogPeopleFrogged', () => Math.round(Math.random() * 100_000_000))
+const peopleFroggedCount = computed(() => formatCompactNumber(peopleFrogged.value))
 
-let interval: ReturnType<typeof setTimeout>;
+let interval: ReturnType<typeof setTimeout>
 
-const formattedOpenedCounter = ref(formatRelativeTime(Date.now()));
+const formattedOpenedCounter = ref(formatRelativeTime(Date.now()))
 
 onMounted(() => {
   interval = setInterval(() => {
-    formattedOpenedCounter.value = formatRelativeTime(pageOpen.value);
-  }, 1000);
-});
+    formattedOpenedCounter.value = formatRelativeTime(pageOpen.value)
+  }, 1000)
+})
 
-onUnmounted(() => clearInterval(interval));
+onUnmounted(() => clearInterval(interval))
 </script>
 
 <template>
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index 9975b2abb..531edb740 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -171,7 +171,7 @@
                       {{ notification.title }} has been updated!
                     </nuxt-link>
                     <p class="notif-desc">
-                      Version {{ ["1.1.2", "1.0.3", "15.1"][index] }} has been released for
+                      Version {{ ['1.1.2', '1.0.3', '15.1'][index] }} has been released for
                       {{
                         $capitalizeString(
                           notification.display_categories[
@@ -432,27 +432,27 @@ import {
   LogInIcon,
   ModrinthIcon,
   SearchIcon,
-} from "@modrinth/assets";
-import { Avatar, ButtonStyled, useRelativeTime } from "@modrinth/ui";
-import { ref } from "vue";
-import { Multiselect } from "vue-multiselect";
+} from '@modrinth/assets'
+import { Avatar, ButtonStyled, useRelativeTime } from '@modrinth/ui'
+import { ref } from 'vue'
+import { Multiselect } from 'vue-multiselect'
 
-import ATLauncherLogo from "~/assets/images/external/atlauncher.svg?component";
-import PrismLauncherLogo from "~/assets/images/external/prism.svg?component";
-import LatestNewsRow from "~/components/ui/news/LatestNewsRow.vue";
-import ProjectCard from "~/components/ui/ProjectCard.vue";
-import { homePageNotifs,homePageProjects, homePageSearch } from "~/generated/state.json";
+import ATLauncherLogo from '~/assets/images/external/atlauncher.svg?component'
+import PrismLauncherLogo from '~/assets/images/external/prism.svg?component'
+import LatestNewsRow from '~/components/ui/news/LatestNewsRow.vue'
+import ProjectCard from '~/components/ui/ProjectCard.vue'
+import { homePageNotifs, homePageProjects, homePageSearch } from '~/generated/state.json'
 
-const formatRelativeTime = useRelativeTime();
+const formatRelativeTime = useRelativeTime()
 
-const searchQuery = ref("leave");
-const sortType = ref("relevance");
+const searchQuery = ref('leave')
+const sortType = ref('relevance')
 
-const auth = await useAuth();
-const tags = useTags();
+const auth = await useAuth()
+const tags = useTags()
 
-const newProjects = homePageProjects?.slice(0, 40);
-const val = Math.ceil(newProjects?.length / 3);
+const newProjects = homePageProjects?.slice(0, 40)
+const val = Math.ceil(newProjects?.length / 3)
 const rows = ref(
   newProjects.length > 0
     ? [
@@ -461,17 +461,17 @@ const rows = ref(
         newProjects.slice(val * 2, val * 3),
       ]
     : undefined,
-);
+)
 
-const notifications = ref(homePageNotifs?.hits ?? []);
-const searchProjects = ref(homePageSearch?.hits ?? []);
+const notifications = ref(homePageNotifs?.hits ?? [])
+const searchProjects = ref(homePageSearch?.hits ?? [])
 
 async function updateSearchProjects() {
   const res = await useBaseFetch(
     `search?limit=3&query=${searchQuery.value}&index=${sortType.value}`,
-  );
+  )
 
-  searchProjects.value = res?.hits ?? [];
+  searchProjects.value = res?.hits ?? []
 }
 </script>
 
@@ -518,7 +518,7 @@ async function updateSearchProjects() {
   width: 100%;
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     z-index: 1;
     inset: 0;
@@ -722,7 +722,7 @@ async function updateSearchProjects() {
         z-index: 1;
 
         &:after {
-          content: "";
+          content: '';
           position: absolute;
           z-index: -1;
           inset: 0 0 -0.75rem -0.75rem;
@@ -996,7 +996,7 @@ async function updateSearchProjects() {
   border-radius: 1rem;
 
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     inset: 0;
     padding: 1px;
diff --git a/apps/frontend/src/pages/legal.vue b/apps/frontend/src/pages/legal.vue
index 0457980b4..5eb83ca21 100644
--- a/apps/frontend/src/pages/legal.vue
+++ b/apps/frontend/src/pages/legal.vue
@@ -50,12 +50,12 @@ import {
   LockIcon,
   ScaleIcon,
   ShieldIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 
-import NavStack from "~/components/ui/NavStack.vue";
-import NavStackItem from "~/components/ui/NavStackItem.vue";
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
 
-const route = useNativeRoute();
+const route = useNativeRoute()
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/legal/ccpa.vue b/apps/frontend/src/pages/legal/ccpa.vue
index 885f67d1c..f300d92f0 100644
--- a/apps/frontend/src/pages/legal/ccpa.vue
+++ b/apps/frontend/src/pages/legal/ccpa.vue
@@ -455,12 +455,12 @@
 
 <script setup>
 const description =
-  "The California Privacy Notice of Modrinth, an open source modding platform focused on Minecraft.";
+  'The California Privacy Notice of Modrinth, an open source modding platform focused on Minecraft.'
 
 useSeoMeta({
-  title: "California Privacy Notice - Modrinth",
+  title: 'California Privacy Notice - Modrinth',
   description,
-  ogTitle: "California Privacy Notice",
+  ogTitle: 'California Privacy Notice',
   ogDescription: description,
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/legal/cmp-info.vue b/apps/frontend/src/pages/legal/cmp-info.vue
index b6c372834..e9b19b80c 100644
--- a/apps/frontend/src/pages/legal/cmp-info.vue
+++ b/apps/frontend/src/pages/legal/cmp-info.vue
@@ -162,31 +162,31 @@
 </template>
 
 <script lang="ts" setup>
-import { formatDate, formatMoney } from "@modrinth/utils";
-import dayjs from "dayjs";
-import { computed, ref } from "vue";
+import { formatDate, formatMoney } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed, ref } from 'vue'
 
 const description =
-  "Information about the Rewards Program of Modrinth, an open source modding platform focused on Minecraft.";
+  'Information about the Rewards Program of Modrinth, an open source modding platform focused on Minecraft.'
 
 useSeoMeta({
-  title: "Rewards Program Information - Modrinth",
+  title: 'Rewards Program Information - Modrinth',
   description,
-  ogTitle: "Rewards Program Information",
+  ogTitle: 'Rewards Program Information',
   ogDescription: description,
-});
+})
 
-const rawSelectedDate = ref(dayjs().format("YYYY-MM-DD"));
-const selectedDate = computed(() => dayjs(rawSelectedDate.value));
-const endOfMonthDate = computed(() => selectedDate.value.endOf("month"));
-const withdrawalDate = computed(() => endOfMonthDate.value.add(60, "days"));
+const rawSelectedDate = ref(dayjs().format('YYYY-MM-DD'))
+const selectedDate = computed(() => dayjs(rawSelectedDate.value))
+const endOfMonthDate = computed(() => selectedDate.value.endOf('month'))
+const withdrawalDate = computed(() => endOfMonthDate.value.add(60, 'days'))
 
-const { data: transparencyInformation } = await useAsyncData("payout/platform_revenue", () =>
-  useBaseFetch("payout/platform_revenue", {
+const { data: transparencyInformation } = await useAsyncData('payout/platform_revenue', () =>
+  useBaseFetch('payout/platform_revenue', {
     apiVersion: 3,
   }),
-);
+)
 
-const platformRevenue = (transparencyInformation.value as any)?.all_time;
-const platformRevenueData = (transparencyInformation.value as any)?.data?.slice(0, 5) ?? [];
+const platformRevenue = (transparencyInformation.value as any)?.all_time
+const platformRevenueData = (transparencyInformation.value as any)?.data?.slice(0, 5) ?? []
 </script>
diff --git a/apps/frontend/src/pages/legal/cmp.vue b/apps/frontend/src/pages/legal/cmp.vue
index 2369d56ed..0fa9b97a5 100644
--- a/apps/frontend/src/pages/legal/cmp.vue
+++ b/apps/frontend/src/pages/legal/cmp.vue
@@ -75,12 +75,12 @@
 
 <script setup>
 const description =
-  "The Rewards Program Terms of Modrinth, an open source modding platform focused on Minecraft.";
+  'The Rewards Program Terms of Modrinth, an open source modding platform focused on Minecraft.'
 
 useSeoMeta({
-  title: "Rewards Program Terms - Modrinth",
+  title: 'Rewards Program Terms - Modrinth',
   description,
-  ogTitle: "Rewards Program Terms",
+  ogTitle: 'Rewards Program Terms',
   ogDescription: description,
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/legal/copyright.vue b/apps/frontend/src/pages/legal/copyright.vue
index 90039a099..c956ff9a3 100644
--- a/apps/frontend/src/pages/legal/copyright.vue
+++ b/apps/frontend/src/pages/legal/copyright.vue
@@ -103,12 +103,12 @@
 
 <script setup>
 const description =
-  "The Copyright Policy of Modrinth, an open source modding platform focused on Minecraft.";
+  'The Copyright Policy of Modrinth, an open source modding platform focused on Minecraft.'
 
 useSeoMeta({
-  title: "Copyright Policy - Modrinth",
+  title: 'Copyright Policy - Modrinth',
   description,
-  ogTitle: "Copyright Policy",
+  ogTitle: 'Copyright Policy',
   ogDescription: description,
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/legal/privacy.vue b/apps/frontend/src/pages/legal/privacy.vue
index aa6dcd0b5..17660bfa4 100644
--- a/apps/frontend/src/pages/legal/privacy.vue
+++ b/apps/frontend/src/pages/legal/privacy.vue
@@ -311,12 +311,12 @@
 
 <script setup>
 const description =
-  "The Privacy Policy of Modrinth, an open source modding platform focused on Minecraft.";
+  'The Privacy Policy of Modrinth, an open source modding platform focused on Minecraft.'
 
 useSeoMeta({
-  title: "Privacy Policy - Modrinth",
+  title: 'Privacy Policy - Modrinth',
   description,
-  ogTitle: "Privacy Policy",
+  ogTitle: 'Privacy Policy',
   ogDescription: description,
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/legal/rules.vue b/apps/frontend/src/pages/legal/rules.vue
index d78802329..37312bb6c 100644
--- a/apps/frontend/src/pages/legal/rules.vue
+++ b/apps/frontend/src/pages/legal/rules.vue
@@ -177,12 +177,12 @@
 
 <script setup>
 const description =
-  "The Content Rules of Modrinth, an open source modding platform focused on Minecraft.";
+  'The Content Rules of Modrinth, an open source modding platform focused on Minecraft.'
 
 useSeoMeta({
-  title: "Content Rules - Modrinth",
+  title: 'Content Rules - Modrinth',
   description,
-  ogTitle: "Content Rules",
+  ogTitle: 'Content Rules',
   ogDescription: description,
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/legal/security.vue b/apps/frontend/src/pages/legal/security.vue
index dd7d6e5b3..94c4ee33e 100644
--- a/apps/frontend/src/pages/legal/security.vue
+++ b/apps/frontend/src/pages/legal/security.vue
@@ -54,12 +54,12 @@
 
 <script setup>
 const description =
-  "The Security Notice of Modrinth, an open source modding platform focused on Minecraft.";
+  'The Security Notice of Modrinth, an open source modding platform focused on Minecraft.'
 
 useSeoMeta({
-  title: "Security Notice - Modrinth",
+  title: 'Security Notice - Modrinth',
   description,
-  ogTitle: "Security Notice",
+  ogTitle: 'Security Notice',
   ogDescription: description,
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/legal/terms.vue b/apps/frontend/src/pages/legal/terms.vue
index 8565f4739..b24495a03 100644
--- a/apps/frontend/src/pages/legal/terms.vue
+++ b/apps/frontend/src/pages/legal/terms.vue
@@ -548,12 +548,12 @@
 
 <script setup>
 const description =
-  "The Terms of Use of Modrinth, an open source modding platform focused on Minecraft.";
+  'The Terms of Use of Modrinth, an open source modding platform focused on Minecraft.'
 
 useSeoMeta({
-  title: "Terms of Use - Modrinth",
+  title: 'Terms of Use - Modrinth',
   description,
-  ogTitle: "Terms of Use",
+  ogTitle: 'Terms of Use',
   ogDescription: description,
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/moderation.vue b/apps/frontend/src/pages/moderation.vue
index 06c2a3aea..26f9388f2 100644
--- a/apps/frontend/src/pages/moderation.vue
+++ b/apps/frontend/src/pages/moderation.vue
@@ -17,69 +17,69 @@
 </template>
 
 <script setup lang="ts">
-import { Chips } from "@modrinth/ui";
-import { defineMessages, useVIntl } from "@vintl/vintl";
+import { Chips } from '@modrinth/ui'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 
-import NavTabs from "@/components/ui/NavTabs.vue";
+import NavTabs from '@/components/ui/NavTabs.vue'
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
-const { formatMessage } = useVIntl();
-const route = useRoute();
-const router = useRouter();
+const { formatMessage } = useVIntl()
+const route = useRoute()
+const router = useRouter()
 
 const messages = defineMessages({
   projectsTitle: {
-    id: "moderation.page.projects",
-    defaultMessage: "Projects",
+    id: 'moderation.page.projects',
+    defaultMessage: 'Projects',
   },
   technicalReviewTitle: {
-    id: "moderation.page.technicalReview",
-    defaultMessage: "Technical Review",
+    id: 'moderation.page.technicalReview',
+    defaultMessage: 'Technical Review',
   },
   reportsTitle: {
-    id: "moderation.page.reports",
-    defaultMessage: "Reports",
+    id: 'moderation.page.reports',
+    defaultMessage: 'Reports',
   },
-});
+})
 
 const moderationLinks = [
-  { label: formatMessage(messages.projectsTitle), href: "/moderation" },
-  { label: formatMessage(messages.technicalReviewTitle), href: "/moderation/technical-review" },
-  { label: formatMessage(messages.reportsTitle), href: "/moderation/reports" },
-];
+  { label: formatMessage(messages.projectsTitle), href: '/moderation' },
+  { label: formatMessage(messages.technicalReviewTitle), href: '/moderation/technical-review' },
+  { label: formatMessage(messages.reportsTitle), href: '/moderation/reports' },
+]
 
 const mobileNavOptions = [
   formatMessage(messages.projectsTitle),
   formatMessage(messages.technicalReviewTitle),
   formatMessage(messages.reportsTitle),
-];
+]
 
 const selectedChip = computed({
   get() {
-    const path = route.path;
-    if (path === "/moderation/technical-review") {
-      return formatMessage(messages.technicalReviewTitle);
-    } else if (path.startsWith("/moderation/reports/")) {
-      return formatMessage(messages.reportsTitle);
+    const path = route.path
+    if (path === '/moderation/technical-review') {
+      return formatMessage(messages.technicalReviewTitle)
+    } else if (path.startsWith('/moderation/reports/')) {
+      return formatMessage(messages.reportsTitle)
     } else {
-      return formatMessage(messages.projectsTitle);
+      return formatMessage(messages.projectsTitle)
     }
   },
   set(value: string) {
-    navigateToPage(value);
+    navigateToPage(value)
   },
-});
+})
 
 function navigateToPage(selectedOption: string) {
   if (selectedOption === formatMessage(messages.technicalReviewTitle)) {
-    router.push("/moderation/technical-review");
+    router.push('/moderation/technical-review')
   } else if (selectedOption === formatMessage(messages.reportsTitle)) {
-    router.push("/moderation/reports");
+    router.push('/moderation/reports')
   } else {
-    router.push("/moderation");
+    router.push('/moderation')
   }
 }
 </script>
diff --git a/apps/frontend/src/pages/moderation/reports/[id].vue b/apps/frontend/src/pages/moderation/reports/[id].vue
index b3908eb02..ad2248f78 100644
--- a/apps/frontend/src/pages/moderation/reports/[id].vue
+++ b/apps/frontend/src/pages/moderation/reports/[id].vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import type { Report } from "@modrinth/utils";
+import type { Report } from '@modrinth/utils'
 
-import ModerationReportCard from "~/components/ui/moderation/ModerationReportCard.vue";
-import { enrichReportBatch } from "~/helpers/moderation.ts";
+import ModerationReportCard from '~/components/ui/moderation/ModerationReportCard.vue'
+import { enrichReportBatch } from '~/helpers/moderation.ts'
 
-const { params } = useRoute();
-const reportId = params.id as string;
+const { params } = useRoute()
+const reportId = params.id as string
 
 const { data: report } = await useAsyncData(`moderation-report-${reportId}`, async () => {
   try {
-    const report = (await useBaseFetch(`report/${reportId}`, { apiVersion: 3 })) as Report;
-    const enrichedReport = (await enrichReportBatch([report]))[0];
-    return enrichedReport;
+    const report = (await useBaseFetch(`report/${reportId}`, { apiVersion: 3 })) as Report
+    const enrichedReport = (await enrichReportBatch([report]))[0]
+    return enrichedReport
   } catch (error) {
-    console.error("Error fetching report:", error);
+    console.error('Error fetching report:', error)
     throw createError({
       statusCode: 404,
-      statusMessage: "Report not found",
-    });
+      statusMessage: 'Report not found',
+    })
   }
-});
+})
 </script>
 
 <template>
diff --git a/apps/frontend/src/pages/moderation/technical-review-mockup.vue b/apps/frontend/src/pages/moderation/technical-review-mockup.vue
index b829f61c5..2505df41f 100644
--- a/apps/frontend/src/pages/moderation/technical-review-mockup.vue
+++ b/apps/frontend/src/pages/moderation/technical-review-mockup.vue
@@ -76,86 +76,86 @@
 </template>
 
 <script setup lang="ts">
-import { FilterIcon,SearchIcon, SortAscIcon, SortDescIcon, XIcon } from "@modrinth/assets";
-import type { ExtendedDelphiReport,OwnershipTarget } from "@modrinth/moderation";
-import { Button, DropdownSelect, Pagination } from "@modrinth/ui";
-import type { DelphiReport, Organization, Project, TeamMember, Version } from "@modrinth/utils";
-import { defineMessages, useVIntl } from "@vintl/vintl";
-import { useLocalStorage } from "@vueuse/core";
-import Fuse from "fuse.js";
+import { FilterIcon, SearchIcon, SortAscIcon, SortDescIcon, XIcon } from '@modrinth/assets'
+import type { ExtendedDelphiReport, OwnershipTarget } from '@modrinth/moderation'
+import { Button, DropdownSelect, Pagination } from '@modrinth/ui'
+import type { DelphiReport, Organization, Project, TeamMember, Version } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { useLocalStorage } from '@vueuse/core'
+import Fuse from 'fuse.js'
 
-import DelphiReportCard from "~/components/ui/moderation/ModerationDelphiReportCard.vue";
-import { asEncodedJsonArray, fetchSegmented } from "~/utils/fetch-helpers.ts";
+import DelphiReportCard from '~/components/ui/moderation/ModerationDelphiReportCard.vue'
+import { asEncodedJsonArray, fetchSegmented } from '~/utils/fetch-helpers.ts'
 
-const { formatMessage } = useVIntl();
-const route = useRoute();
-const router = useRouter();
+const { formatMessage } = useVIntl()
+const route = useRoute()
+const router = useRouter()
 
 const messages = defineMessages({
   searchPlaceholder: {
-    id: "moderation.technical.search.placeholder",
-    defaultMessage: "Search tech reviews...",
+    id: 'moderation.technical.search.placeholder',
+    defaultMessage: 'Search tech reviews...',
   },
   filterBy: {
-    id: "moderation.filter.by",
-    defaultMessage: "Filter by",
+    id: 'moderation.filter.by',
+    defaultMessage: 'Filter by',
   },
   sortBy: {
-    id: "moderation.sort.by",
-    defaultMessage: "Sort by",
+    id: 'moderation.sort.by',
+    defaultMessage: 'Sort by',
   },
-});
+})
 
 async function getProjectQuicklyForMock(projectId: string): Promise<Project> {
-  return (await useBaseFetch(`project/${projectId}`)) as Project;
+  return (await useBaseFetch(`project/${projectId}`)) as Project
 }
 
 async function getVersionQuicklyForMock(versionId: string): Promise<Version> {
-  return (await useBaseFetch(`version/${versionId}`)) as Version;
+  return (await useBaseFetch(`version/${versionId}`)) as Version
 }
 
 const mockDelphiReports: DelphiReport[] = [
   {
-    project: await getProjectQuicklyForMock("7MoE34WK"),
-    version: await getVersionQuicklyForMock("cTkKLWgA"),
-    trace_type: "url_usage",
-    file_path: "me/decce/gnetum/ASMEventHandlerHelper.java",
+    project: await getProjectQuicklyForMock('7MoE34WK'),
+    version: await getVersionQuicklyForMock('cTkKLWgA'),
+    trace_type: 'url_usage',
+    file_path: 'me/decce/gnetum/ASMEventHandlerHelper.java',
     priority_score: 29,
-    status: "pending",
-    detected_at: "2025-04-01T12:00:00Z",
+    status: 'pending',
+    detected_at: '2025-04-01T12:00:00Z',
   } as DelphiReport,
   {
-    project: await getProjectQuicklyForMock("7MoE34WK"),
-    version: await getVersionQuicklyForMock("cTkKLWgA"),
-    trace_type: "url_usage",
-    file_path: "me/decce/gnetum/SomeOtherFile.java",
+    project: await getProjectQuicklyForMock('7MoE34WK'),
+    version: await getVersionQuicklyForMock('cTkKLWgA'),
+    trace_type: 'url_usage',
+    file_path: 'me/decce/gnetum/SomeOtherFile.java',
     priority_score: 48,
-    status: "rejected",
-    detected_at: "2025-03-02T12:00:00Z",
+    status: 'rejected',
+    detected_at: '2025-03-02T12:00:00Z',
   } as DelphiReport,
   {
-    project: await getProjectQuicklyForMock("7MoE34WK"),
-    version: await getVersionQuicklyForMock("cTkKLWgA"),
-    trace_type: "url_usage",
-    file_path: "me/decce/gnetum/YetAnotherFile.java",
+    project: await getProjectQuicklyForMock('7MoE34WK'),
+    version: await getVersionQuicklyForMock('cTkKLWgA'),
+    trace_type: 'url_usage',
+    file_path: 'me/decce/gnetum/YetAnotherFile.java',
     priority_score: 15,
-    status: "approved",
-    detected_at: "2025-02-03T12:00:00Z",
+    status: 'approved',
+    detected_at: '2025-02-03T12:00:00Z',
   } as DelphiReport,
-];
+]
 
-const { data: allReports } = await useAsyncData("moderation-tech-reviews", async () => {
+const { data: allReports } = await useAsyncData('moderation-tech-reviews', async () => {
   // TODO: replace with actual API call
-  const delphiReports = mockDelphiReports;
+  const delphiReports = mockDelphiReports
 
   if (delphiReports.length === 0) {
-    return [];
+    return []
   }
 
-  const teamIds = [...new Set(delphiReports.map((report) => report.project.team).filter(Boolean))];
+  const teamIds = [...new Set(delphiReports.map((report) => report.project.team).filter(Boolean))]
   const orgIds = [
     ...new Set(delphiReports.map((report) => report.project.organization).filter(Boolean)),
-  ];
+  ]
 
   const [teamsData, orgsData]: [TeamMember[][], Organization[]] = await Promise.all([
     teamIds.length > 0
@@ -166,222 +166,222 @@ const { data: allReports } = await useAsyncData("moderation-tech-reviews", async
           apiVersion: 3,
         })
       : Promise.resolve([]),
-  ]);
+  ])
 
-  const orgTeamIds = orgsData.map((org) => org.team_id).filter(Boolean);
+  const orgTeamIds = orgsData.map((org) => org.team_id).filter(Boolean)
   const orgTeamsData: TeamMember[][] =
     orgTeamIds.length > 0
       ? await fetchSegmented(orgTeamIds, (ids) => `teams?ids=${asEncodedJsonArray(ids)}`)
-      : [];
+      : []
 
-  const teamMap = new Map<string, TeamMember[]>();
-  const orgMap = new Map<string, Organization>();
+  const teamMap = new Map<string, TeamMember[]>()
+  const orgMap = new Map<string, Organization>()
 
   teamsData.forEach((team) => {
-    let teamId = null;
+    let teamId = null
     for (const member of team) {
-      teamId = member.team_id;
+      teamId = member.team_id
       if (!teamMap.has(teamId)) {
-        teamMap.set(teamId, team);
-        break;
+        teamMap.set(teamId, team)
+        break
       }
     }
-  });
+  })
 
   orgTeamsData.forEach((team) => {
-    let teamId = null;
+    let teamId = null
     for (const member of team) {
-      teamId = member.team_id;
+      teamId = member.team_id
       if (!teamMap.has(teamId)) {
-        teamMap.set(teamId, team);
-        break;
+        teamMap.set(teamId, team)
+        break
       }
     }
-  });
+  })
 
   orgsData.forEach((org: Organization) => {
-    orgMap.set(org.id, org);
-  });
+    orgMap.set(org.id, org)
+  })
 
   const extendedReports: ExtendedDelphiReport[] = delphiReports.map((report) => {
-    let target: OwnershipTarget | undefined;
-    const project = report.project;
+    let target: OwnershipTarget | undefined
+    const project = report.project
 
     if (project) {
-      let owner: TeamMember | null = null;
-      let org: Organization | null = null;
+      let owner: TeamMember | null = null
+      let org: Organization | null = null
 
       if (project.team) {
-        const teamMembers = teamMap.get(project.team);
+        const teamMembers = teamMap.get(project.team)
         if (teamMembers) {
-          owner = teamMembers.find((member) => member.role === "Owner") || null;
+          owner = teamMembers.find((member) => member.role === 'Owner') || null
         }
       }
 
       if (project.organization) {
-        org = orgMap.get(project.organization) || null;
+        org = orgMap.get(project.organization) || null
       }
 
       if (org) {
         target = {
           name: org.name,
           avatar_url: org.icon_url,
-          type: "organization",
+          type: 'organization',
           slug: org.slug,
-        };
+        }
       } else if (owner) {
         target = {
           name: owner.user.username,
           avatar_url: owner.user.avatar_url,
-          type: "user",
+          type: 'user',
           slug: owner.user.username,
-        };
+        }
       }
     }
 
     return {
       ...report,
       target,
-    };
-  });
+    }
+  })
 
-  extendedReports.sort((a, b) => b.priority_score - a.priority_score);
+  extendedReports.sort((a, b) => b.priority_score - a.priority_score)
 
-  return extendedReports;
-});
+  return extendedReports
+})
 
-const query = ref(route.query.q?.toString() || "");
+const query = ref(route.query.q?.toString() || '')
 watch(
   query,
   (newQuery) => {
-    const currentQuery = { ...route.query };
+    const currentQuery = { ...route.query }
     if (newQuery) {
-      currentQuery.q = newQuery;
+      currentQuery.q = newQuery
     } else {
-      delete currentQuery.q;
+      delete currentQuery.q
     }
 
     router.replace({
       path: route.path,
       query: currentQuery,
-    });
+    })
   },
   { immediate: false },
-);
+)
 
 watch(
   () => route.query.q,
   (newQueryParam) => {
-    const newValue = newQueryParam?.toString() || "";
+    const newValue = newQueryParam?.toString() || ''
     if (query.value !== newValue) {
-      query.value = newValue;
+      query.value = newValue
     }
   },
-);
+)
 
-const currentFilterType = useLocalStorage("moderation-tech-reviews-filter-type", () => "Pending");
-const filterTypes: readonly string[] = readonly(["All", "Pending", "Approved", "Rejected"]);
+const currentFilterType = useLocalStorage('moderation-tech-reviews-filter-type', () => 'Pending')
+const filterTypes: readonly string[] = readonly(['All', 'Pending', 'Approved', 'Rejected'])
 
-const currentSortType = useLocalStorage("moderation-tech-reviews-sort-type", () => "Priority");
-const sortTypes: readonly string[] = readonly(["Priority", "Oldest", "Newest"]);
+const currentSortType = useLocalStorage('moderation-tech-reviews-sort-type', () => 'Priority')
+const sortTypes: readonly string[] = readonly(['Priority', 'Oldest', 'Newest'])
 
-const currentPage = ref(1);
-const itemsPerPage = 15;
-const totalPages = computed(() => Math.ceil((filteredReports.value?.length || 0) / itemsPerPage));
+const currentPage = ref(1)
+const itemsPerPage = 15
+const totalPages = computed(() => Math.ceil((filteredReports.value?.length || 0) / itemsPerPage))
 
 const fuse = computed(() => {
-  if (!allReports.value || allReports.value.length === 0) return null;
+  if (!allReports.value || allReports.value.length === 0) return null
   return new Fuse(allReports.value, {
     keys: [
       {
-        name: "version.id",
+        name: 'version.id',
         weight: 3,
       },
       {
-        name: "version.version_number",
+        name: 'version.version_number',
         weight: 3,
       },
       {
-        name: "project.title",
+        name: 'project.title',
         weight: 3,
       },
       {
-        name: "project.slug",
+        name: 'project.slug',
         weight: 3,
       },
       {
-        name: "version.files.filename",
+        name: 'version.files.filename',
         weight: 2,
       },
       {
-        name: "trace_type",
+        name: 'trace_type',
         weight: 2,
       },
       {
-        name: "content",
+        name: 'content',
         weight: 0.5,
       },
-      "file_path",
-      "project.id",
-      "target.name",
-      "target.slug",
+      'file_path',
+      'project.id',
+      'target.name',
+      'target.slug',
     ],
     includeScore: true,
     threshold: 0.4,
-  });
-});
+  })
+})
 
 const filteredReports = computed(() => {
-  if (!allReports.value) return [];
+  if (!allReports.value) return []
 
-  let filtered;
+  let filtered
 
   if (query.value && fuse.value) {
-    const results = fuse.value.search(query.value);
-    filtered = results.map((result) => result.item);
+    const results = fuse.value.search(query.value)
+    filtered = results.map((result) => result.item)
   } else {
-    filtered = [...allReports.value];
+    filtered = [...allReports.value]
   }
 
-  if (currentFilterType.value === "Pending") {
-    filtered = filtered.filter((report) => report.status === "pending");
-  } else if (currentFilterType.value === "Approved") {
-    filtered = filtered.filter((report) => report.status === "approved");
-  } else if (currentFilterType.value === "Rejected") {
-    filtered = filtered.filter((report) => report.status === "rejected");
+  if (currentFilterType.value === 'Pending') {
+    filtered = filtered.filter((report) => report.status === 'pending')
+  } else if (currentFilterType.value === 'Approved') {
+    filtered = filtered.filter((report) => report.status === 'approved')
+  } else if (currentFilterType.value === 'Rejected') {
+    filtered = filtered.filter((report) => report.status === 'rejected')
   }
 
-  if (currentSortType.value === "Priority") {
-    filtered.sort((a, b) => b.priority_score - a.priority_score);
-  } else if (currentSortType.value === "Oldest") {
+  if (currentSortType.value === 'Priority') {
+    filtered.sort((a, b) => b.priority_score - a.priority_score)
+  } else if (currentSortType.value === 'Oldest') {
     filtered.sort((a, b) => {
-      const dateA = new Date(a.detected_at).getTime();
-      const dateB = new Date(b.detected_at).getTime();
-      return dateA - dateB;
-    });
+      const dateA = new Date(a.detected_at).getTime()
+      const dateB = new Date(b.detected_at).getTime()
+      return dateA - dateB
+    })
   } else {
     filtered.sort((a, b) => {
-      const dateA = new Date(a.detected_at).getTime();
-      const dateB = new Date(b.detected_at).getTime();
-      return dateB - dateA;
-    });
+      const dateA = new Date(a.detected_at).getTime()
+      const dateB = new Date(b.detected_at).getTime()
+      return dateB - dateA
+    })
   }
 
-  return filtered;
-});
+  return filtered
+})
 
 const paginatedReports = computed(() => {
-  if (!filteredReports.value) return [];
-  const start = (currentPage.value - 1) * itemsPerPage;
-  const end = start + itemsPerPage;
-  return filteredReports.value.slice(start, end);
-});
+  if (!filteredReports.value) return []
+  const start = (currentPage.value - 1) * itemsPerPage
+  const end = start + itemsPerPage
+  return filteredReports.value.slice(start, end)
+})
 
 function updateSearchResults() {
-  currentPage.value = 1;
+  currentPage.value = 1
 }
 
 function goToPage(page: number) {
-  currentPage.value = page;
+  currentPage.value = page
 }
 </script>
diff --git a/apps/frontend/src/pages/news/article/[slug].vue b/apps/frontend/src/pages/news/article/[slug].vue
index 6a9a03f53..f47f82b96 100644
--- a/apps/frontend/src/pages/news/article/[slug].vue
+++ b/apps/frontend/src/pages/news/article/[slug].vue
@@ -1,42 +1,42 @@
 <script setup lang="ts">
-import { GitGraphIcon,RssIcon } from "@modrinth/assets";
-import { articles as rawArticles } from "@modrinth/blog";
-import { Avatar, ButtonStyled } from "@modrinth/ui";
-import type { User } from "@modrinth/utils";
-import dayjs from "dayjs";
-import { computed } from "vue";
+import { GitGraphIcon, RssIcon } from '@modrinth/assets'
+import { articles as rawArticles } from '@modrinth/blog'
+import { Avatar, ButtonStyled } from '@modrinth/ui'
+import type { User } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import { computed } from 'vue'
 
-import NewsletterButton from "~/components/ui/NewsletterButton.vue";
-import ShareArticleButtons from "~/components/ui/ShareArticleButtons.vue";
+import NewsletterButton from '~/components/ui/NewsletterButton.vue'
+import ShareArticleButtons from '~/components/ui/ShareArticleButtons.vue'
 
-const config = useRuntimeConfig();
-const route = useRoute();
+const config = useRuntimeConfig()
+const route = useRoute()
 
-const rawArticle = rawArticles.find((article) => article.slug === route.params.slug);
+const rawArticle = rawArticles.find((article) => article.slug === route.params.slug)
 
 if (!rawArticle) {
   throw createError({
     fatal: true,
     statusCode: 404,
-    message: "The requested article could not be found.",
-  });
+    message: 'The requested article could not be found.',
+  })
 }
 
-const authorsUrl = `users?ids=${JSON.stringify(rawArticle.authors)}`;
+const authorsUrl = `users?ids=${JSON.stringify(rawArticle.authors)}`
 
 const [authors, html] = await Promise.all([
   rawArticle.authors
     ? useAsyncData(authorsUrl, () => useBaseFetch(authorsUrl)).then((data) => {
-        const users = data.data as Ref<User[]>;
+        const users = data.data as Ref<User[]>
         users.value.sort((a, b) => {
-          return rawArticle.authors.indexOf(a.id) - rawArticle.authors.indexOf(b.id);
-        });
+          return rawArticle.authors.indexOf(a.id) - rawArticle.authors.indexOf(b.id)
+        })
 
-        return users;
+        return users
       })
     : Promise.resolve(),
   rawArticle.html(),
-]);
+])
 
 const article = computed(() => ({
   ...rawArticle,
@@ -48,32 +48,32 @@ const article = computed(() => ({
   summary: rawArticle.summary,
   date: rawArticle.date,
   html,
-}));
+}))
 
-const authorCount = computed(() => authors?.value?.length ?? 0);
+const authorCount = computed(() => authors?.value?.length ?? 0)
 
-const articleTitle = computed(() => article.value.title);
-const articleUrl = computed(() => `https://modrinth.com/news/article/${route.params.slug}`);
+const articleTitle = computed(() => article.value.title)
+const articleUrl = computed(() => `https://modrinth.com/news/article/${route.params.slug}`)
 
 const thumbnailPath = computed(() =>
   article.value.thumbnail
     ? `${config.public.siteUrl}${article.value.thumbnail}`
     : `${config.public.siteUrl}/news/default.jpg`,
-);
+)
 
-const dayjsDate = computed(() => dayjs(article.value.date));
+const dayjsDate = computed(() => dayjs(article.value.date))
 
 useSeoMeta({
   title: () => `${articleTitle.value} - Modrinth News`,
   ogTitle: () => articleTitle.value,
   description: () => article.value.summary,
   ogDescription: () => article.value.summary,
-  ogType: "article",
+  ogType: 'article',
   ogImage: () => thumbnailPath.value,
   articlePublishedTime: () => dayjsDate.value.toISOString(),
-  twitterCard: "summary_large_image",
+  twitterCard: 'summary_large_image',
   twitterImage: () => thumbnailPath.value,
-});
+})
 </script>
 
 <template>
@@ -125,10 +125,10 @@ useSeoMeta({
           </nuxt-link>
         </template>
         <span class="hidden md:block">•</span>
-        <span class="hidden md:block"> {{ dayjsDate.format("MMMM D, YYYY") }}</span>
+        <span class="hidden md:block"> {{ dayjsDate.format('MMMM D, YYYY') }}</span>
       </div>
       <span class="text-sm text-secondary sm:text-base md:hidden">
-        Posted on {{ dayjsDate.format("MMMM D, YYYY") }}</span
+        Posted on {{ dayjsDate.format('MMMM D, YYYY') }}</span
       >
       <ShareArticleButtons :title="article.title" :url="articleUrl" />
       <img
diff --git a/apps/frontend/src/pages/news/changelog.vue b/apps/frontend/src/pages/news/changelog.vue
index ee4019663..5f0b822e9 100644
--- a/apps/frontend/src/pages/news/changelog.vue
+++ b/apps/frontend/src/pages/news/changelog.vue
@@ -7,18 +7,18 @@
 </template>
 
 <script lang="ts" setup>
-const config = useRuntimeConfig();
+const config = useRuntimeConfig()
 
 useSeoMeta({
-  title: "Modrinth Changelog",
-  ogTitle: "Modrinth Changelog",
+  title: 'Modrinth Changelog',
+  ogTitle: 'Modrinth Changelog',
   description: "Keep up-to-date on what's new with Modrinth.",
   ogDescription: "Keep up-to-date on what's new with Modrinth.",
-  ogType: "website",
+  ogType: 'website',
   ogImage: () => `${config.public.siteUrl}/news/changelog.webp`,
-  twitterCard: "summary_large_image",
+  twitterCard: 'summary_large_image',
   twitterImage: () => `${config.public.siteUrl}/news/changelog.webp`,
-});
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/news/changelog/[product]/[date].vue b/apps/frontend/src/pages/news/changelog/[product]/[date].vue
index ff3887ba0..5c3ffc5cd 100644
--- a/apps/frontend/src/pages/news/changelog/[product]/[date].vue
+++ b/apps/frontend/src/pages/news/changelog/[product]/[date].vue
@@ -1,33 +1,33 @@
 <script setup lang="ts">
-import { ChevronLeftIcon } from "@modrinth/assets";
-import { ChangelogEntry, Timeline } from "@modrinth/ui";
-import { getChangelog } from "@modrinth/utils";
+import { ChevronLeftIcon } from '@modrinth/assets'
+import { ChangelogEntry, Timeline } from '@modrinth/ui'
+import { getChangelog } from '@modrinth/utils'
 
-const route = useRoute();
+const route = useRoute()
 
 const changelogEntry = computed(() =>
   route.params.date
     ? getChangelog().find((x) => {
         if (x.product === route.params.product) {
-          console.log("Found matching product!");
+          console.log('Found matching product!')
 
           if (x.version && x.version === route.params.date) {
-            console.log("Found matching version!");
-            return x;
+            console.log('Found matching version!')
+            return x
           } else if (x.date.unix() === Number(route.params.date as string)) {
-            console.log("Found matching date!");
-            return x;
+            console.log('Found matching date!')
+            return x
           }
         }
-        return undefined;
+        return undefined
       })
     : undefined,
-);
+)
 
-const isFirst = computed(() => changelogEntry.value?.date === getChangelog()[0].date);
+const isFirst = computed(() => changelogEntry.value?.date === getChangelog()[0].date)
 
 if (!changelogEntry.value) {
-  createError({ statusCode: 404, statusMessage: "Version not found" });
+  createError({ statusCode: 404, statusMessage: 'Version not found' })
 }
 </script>
 
diff --git a/apps/frontend/src/pages/news/changelog/index.vue b/apps/frontend/src/pages/news/changelog/index.vue
index b872e34bd..e3d55c046 100644
--- a/apps/frontend/src/pages/news/changelog/index.vue
+++ b/apps/frontend/src/pages/news/changelog/index.vue
@@ -1,33 +1,33 @@
 <script setup lang="ts">
-import { ChangelogEntry } from "@modrinth/ui";
-import Timeline from "@modrinth/ui/src/components/base/Timeline.vue";
-import { getChangelog,type Product } from "@modrinth/utils";
+import { ChangelogEntry } from '@modrinth/ui'
+import Timeline from '@modrinth/ui/src/components/base/Timeline.vue'
+import { getChangelog, type Product } from '@modrinth/utils'
 
-import NavTabs from "~/components/ui/NavTabs.vue";
+import NavTabs from '~/components/ui/NavTabs.vue'
 
-const route = useRoute();
+const route = useRoute()
 
-const filter = ref<Product | undefined>(undefined);
-const allChangelogEntries = ref(getChangelog());
+const filter = ref<Product | undefined>(undefined)
+const allChangelogEntries = ref(getChangelog())
 
 function updateFilter() {
   if (route.query.filter) {
-    filter.value = route.query.filter as Product;
+    filter.value = route.query.filter as Product
   } else {
-    filter.value = undefined;
+    filter.value = undefined
   }
 }
 
-updateFilter();
+updateFilter()
 
 watch(
   () => route.query,
   () => updateFilter(),
-);
+)
 
 const changelogEntries = computed(() =>
   allChangelogEntries.value.filter((x) => !filter.value || x.product === filter.value),
-);
+)
 </script>
 
 <template>
diff --git a/apps/frontend/src/pages/news/index.vue b/apps/frontend/src/pages/news/index.vue
index 8bd6c4333..b7a2197dd 100644
--- a/apps/frontend/src/pages/news/index.vue
+++ b/apps/frontend/src/pages/news/index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ChevronRightIcon, GitGraphIcon,RssIcon } from "@modrinth/assets";
-import { articles as rawArticles } from "@modrinth/blog";
-import { ButtonStyled, NewsArticleCard } from "@modrinth/ui";
-import dayjs from "dayjs";
-import { computed, ref } from "vue";
+import { ChevronRightIcon, GitGraphIcon, RssIcon } from '@modrinth/assets'
+import { articles as rawArticles } from '@modrinth/blog'
+import { ButtonStyled, NewsArticleCard } from '@modrinth/ui'
+import dayjs from 'dayjs'
+import { computed, ref } from 'vue'
 
-import NewsletterButton from "~/components/ui/NewsletterButton.vue";
+import NewsletterButton from '~/components/ui/NewsletterButton.vue'
 
 const articles = ref(
   rawArticles
@@ -20,21 +20,21 @@ const articles = ref(
       date: article.date,
     }))
     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
-);
+)
 
-const featuredArticle = computed(() => articles.value?.[0]);
-const config = useRuntimeConfig();
+const featuredArticle = computed(() => articles.value?.[0])
+const config = useRuntimeConfig()
 
 useSeoMeta({
-  title: "Modrinth News",
-  ogTitle: "Modrinth News",
-  description: "Keep up-to-date on the latest news from Modrinth.",
-  ogDescription: "Keep up-to-date on the latest news from Modrinth.",
-  ogType: "website",
+  title: 'Modrinth News',
+  ogTitle: 'Modrinth News',
+  description: 'Keep up-to-date on the latest news from Modrinth.',
+  ogDescription: 'Keep up-to-date on the latest news from Modrinth.',
+  ogType: 'website',
   ogImage: () => `${config.public.siteUrl}/news/thumbnail.webp`,
-  twitterCard: "summary_large_image",
+  twitterCard: 'summary_large_image',
   twitterImage: () => `${config.public.siteUrl}/news/thumbnail.webp`,
-});
+})
 </script>
 
 <template>
@@ -81,7 +81,7 @@ useSeoMeta({
               </h3>
               <p class="m-0 text-lg leading-tight">{{ featuredArticle?.summary }}</p>
               <div class="mt-auto text-secondary">
-                {{ dayjs(featuredArticle?.date).format("MMMM D, YYYY") }}
+                {{ dayjs(featuredArticle?.date).format('MMMM D, YYYY') }}
               </div>
             </div>
           </article>
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index e2b7779f3..c838f055a 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -170,7 +170,7 @@
                     />
                   </span>
                   <span class="details-list__item__text--style-secondary">
-                    {{ member.role ? member.role : "Member" }}
+                    {{ member.role ? member.role : 'Member' }}
                   </span>
                 </div>
               </nuxt-link>
@@ -264,7 +264,7 @@ import {
   SettingsIcon,
   UsersIcon,
   XIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 import {
   Avatar,
   Breadcrumbs,
@@ -272,33 +272,33 @@ import {
   commonMessages,
   ContentPageHeader,
   OverflowMenu,
-} from "@modrinth/ui";
+} from '@modrinth/ui'
 
-import UpToDate from "~/assets/images/illustrations/up_to_date.svg?component";
-import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
-import ModalCreation from "~/components/ui/ModalCreation.vue";
-import NavStack from "~/components/ui/NavStack.vue";
-import NavStackItem from "~/components/ui/NavStackItem.vue";
-import NavTabs from "~/components/ui/NavTabs.vue";
-import ProjectCard from "~/components/ui/ProjectCard.vue";
-import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
+import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
+import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
+import ModalCreation from '~/components/ui/ModalCreation.vue'
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
+import NavTabs from '~/components/ui/NavTabs.vue'
+import ProjectCard from '~/components/ui/ProjectCard.vue'
+import { acceptTeamInvite, removeTeamMember } from '~/helpers/teams.js'
 
-const vintl = useVIntl();
-const { formatMessage } = vintl;
+const vintl = useVIntl()
+const { formatMessage } = vintl
 
-const formatCompactNumber = useCompactNumber(true);
+const formatCompactNumber = useCompactNumber(true)
 
-const auth = await useAuth();
-const user = await useUser();
-const cosmetics = useCosmetics();
-const route = useNativeRoute();
-const tags = useTags();
-const config = useRuntimeConfig();
+const auth = await useAuth()
+const user = await useUser()
+const cosmetics = useCosmetics()
+const route = useNativeRoute()
+const tags = useTags()
+const config = useRuntimeConfig()
 
-let orgId = useRouteId();
+let orgId = useRouteId()
 
 // hacky way to show the edit button on the corner of the card.
-const routeHasSettings = computed(() => route.path.includes("settings"));
+const routeHasSettings = computed(() => route.path.includes('settings'))
 
 const [
   { data: organization, refresh: refreshOrganization },
@@ -313,162 +313,162 @@ const [
     {
       transform: (projects) => {
         for (const project of projects) {
-          project.categories = project.categories.concat(project.loaders);
+          project.categories = project.categories.concat(project.loaders)
 
           if (project.mrpack_loaders) {
-            project.categories = project.categories.concat(project.mrpack_loaders);
+            project.categories = project.categories.concat(project.mrpack_loaders)
           }
 
-          const singleplayer = project.singleplayer && project.singleplayer[0];
-          const clientAndServer = project.client_and_server && project.client_and_server[0];
-          const clientOnly = project.client_only && project.client_only[0];
-          const serverOnly = project.server_only && project.server_only[0];
+          const singleplayer = project.singleplayer && project.singleplayer[0]
+          const clientAndServer = project.client_and_server && project.client_and_server[0]
+          const clientOnly = project.client_only && project.client_only[0]
+          const serverOnly = project.server_only && project.server_only[0]
 
           // quick and dirty hack to show envs as legacy
           if (singleplayer && clientAndServer && !clientOnly && !serverOnly) {
-            project.client_side = "required";
-            project.server_side = "required";
+            project.client_side = 'required'
+            project.server_side = 'required'
           } else if (singleplayer && clientAndServer && clientOnly && !serverOnly) {
-            project.client_side = "required";
-            project.server_side = "unsupported";
+            project.client_side = 'required'
+            project.server_side = 'unsupported'
           } else if (singleplayer && clientAndServer && !clientOnly && serverOnly) {
-            project.client_side = "unsupported";
-            project.server_side = "required";
+            project.client_side = 'unsupported'
+            project.server_side = 'required'
           } else if (singleplayer && clientAndServer && clientOnly && serverOnly) {
-            project.client_side = "optional";
-            project.server_side = "optional";
+            project.client_side = 'optional'
+            project.server_side = 'optional'
           }
         }
 
-        return projects;
+        return projects
       },
     },
   ),
-]);
+])
 
 const refresh = async () => {
-  await Promise.all([refreshOrganization(), refreshProjects()]);
-};
+  await Promise.all([refreshOrganization(), refreshProjects()])
+}
 
 if (!organization.value) {
   throw createError({
     fatal: true,
     statusCode: 404,
-    message: "Organization not found",
-  });
+    message: 'Organization not found',
+  })
 }
 
 // Filter accepted, sort by role, then by name and Owner role always goes first
 const acceptedMembers = computed(() => {
-  const acceptedMembers = organization.value.members?.filter((x) => x.accepted);
-  const owner = acceptedMembers.find((x) => x.is_owner);
-  const rest = acceptedMembers.filter((x) => !x.is_owner) || [];
+  const acceptedMembers = organization.value.members?.filter((x) => x.accepted)
+  const owner = acceptedMembers.find((x) => x.is_owner)
+  const rest = acceptedMembers.filter((x) => !x.is_owner) || []
 
   rest.sort((a, b) => {
     if (a.role === b.role) {
-      return a.user.username.localeCompare(b.user.username);
+      return a.user.username.localeCompare(b.user.username)
     } else {
-      return a.role.localeCompare(b.role);
+      return a.role.localeCompare(b.role)
     }
-  });
+  })
 
-  return [owner, ...rest];
-});
+  return [owner, ...rest]
+})
 
 const currentMember = computed(() => {
   if (auth.value.user && organization.value) {
-    const member = organization.value.members.find((x) => x.user.id === auth.value.user.id);
+    const member = organization.value.members.find((x) => x.user.id === auth.value.user.id)
 
     if (member) {
-      return member;
+      return member
     }
 
     if (tags.value.staffRoles.includes(auth.value.user.role)) {
       return {
         user: auth.value.user,
         role: auth.value.user.role,
-        permissions: auth.value.user.role === "admin" ? 1023 : 12,
+        permissions: auth.value.user.role === 'admin' ? 1023 : 12,
         accepted: true,
         payouts_split: 0,
         avatar_url: auth.value.user.avatar_url,
         name: auth.value.user.username,
-      };
+      }
     }
   }
 
-  return null;
-});
+  return null
+})
 
 const hasPermission = computed(() => {
-  const EDIT_DETAILS = 1 << 2;
-  return currentMember.value && (currentMember.value.permissions & EDIT_DETAILS) === EDIT_DETAILS;
-});
+  const EDIT_DETAILS = 1 << 2
+  return currentMember.value && (currentMember.value.permissions & EDIT_DETAILS) === EDIT_DETAILS
+})
 
 const isInvited = computed(() => {
-  return currentMember.value?.accepted === false;
-});
+  return currentMember.value?.accepted === false
+})
 
 const projectTypes = computed(() => {
-  const obj = {};
+  const obj = {}
 
   for (const project of projects.value) {
-    obj[project.project_types[0] ?? "project"] = true;
+    obj[project.project_types[0] ?? 'project'] = true
   }
 
-  delete obj.project;
+  delete obj.project
 
-  return Object.keys(obj);
-});
+  return Object.keys(obj)
+})
 const sumDownloads = computed(() => {
-  let sum = 0;
+  let sum = 0
 
   for (const project of projects.value) {
-    sum += project.downloads;
+    sum += project.downloads
   }
 
-  return sum;
-});
+  return sum
+})
 
 const patchIcon = async (icon) => {
-  const ext = icon.name.split(".").pop();
+  const ext = icon.name.split('.').pop()
   await useBaseFetch(`organization/${organization.value.id}/icon`, {
-    method: "PATCH",
+    method: 'PATCH',
     body: icon,
     query: { ext },
     apiVersion: 3,
-  });
-};
+  })
+}
 
 const deleteIcon = async () => {
   await useBaseFetch(`organization/${organization.value.id}/icon`, {
-    method: "DELETE",
+    method: 'DELETE',
     apiVersion: 3,
-  });
-};
+  })
+}
 
 const patchOrganization = async (id, newData) => {
   await useBaseFetch(`organization/${id}`, {
-    method: "PATCH",
+    method: 'PATCH',
     body: newData,
     apiVersion: 3,
-  });
+  })
 
   if (newData.slug) {
-    orgId = newData.slug;
+    orgId = newData.slug
   }
-};
+}
 
 const onAcceptInvite = useClientTry(async () => {
-  await acceptTeamInvite(organization.value.team_id);
-  await refreshOrganization();
-});
+  await acceptTeamInvite(organization.value.team_id)
+  await refreshOrganization()
+})
 
 const onDeclineInvite = useClientTry(async () => {
-  await removeTeamMember(organization.value.team_id, auth.value?.user.id);
-  await refreshOrganization();
-});
+  await removeTeamMember(organization.value.team_id, auth.value?.user.id)
+  await refreshOrganization()
+})
 
-provide("organizationContext", {
+provide('organizationContext', {
   organization,
   projects,
   refresh,
@@ -477,18 +477,18 @@ provide("organizationContext", {
   patchIcon,
   deleteIcon,
   patchOrganization,
-});
+})
 
-const title = `${organization.value.name} - Organization`;
-const description = `${organization.value.description} - View the organization ${organization.value.name} on Modrinth`;
+const title = `${organization.value.name} - Organization`
+const description = `${organization.value.description} - View the organization ${organization.value.name} on Modrinth`
 
 useSeoMeta({
   title,
   description,
   ogTitle: title,
   ogDescription: organization.value.description,
-  ogImage: organization.value.icon_url ?? "https://cdn.modrinth.com/placeholder.png",
-});
+  ogImage: organization.value.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
+})
 
 const navLinks = computed(() => [
   {
@@ -500,20 +500,20 @@ const navLinks = computed(() => [
       return {
         label: formatMessage(getProjectTypeMessage(x, true)),
         href: `/organization/${organization.value.slug}/${x}s`,
-      };
+      }
     })
     .slice()
     .sort((a, b) => a.label.localeCompare(b.label)),
-]);
+])
 
 async function copyId() {
-  await navigator.clipboard.writeText(organization.value.id);
+  await navigator.clipboard.writeText(organization.value.id)
 }
 
 async function copyPermalink() {
   await navigator.clipboard.writeText(
     `${config.public.siteUrl}/organization/${organization.value.id}`,
-  );
+  )
 }
 </script>
 
@@ -564,8 +564,8 @@ async function copyPermalink() {
     margin-left: -0.5rem;
     border-radius: var(--radius-lg);
     grid-template:
-      "avatar name" auto
-      "avatar role" auto
+      'avatar name' auto
+      'avatar role' auto
       / auto 1fr;
 
     p {
diff --git a/apps/frontend/src/pages/organization/[id]/settings/analytics.vue b/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
index f78ef4b74..bd8eb73ea 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
@@ -15,9 +15,9 @@
 </template>
 
 <script setup>
-import ChartDisplay from "~/components/ui/charts/ChartDisplay.vue";
+import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
 
-const { projects } = inject("organizationContext");
+const { projects } = inject('organizationContext')
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/pages/organization/[id]/settings/index.vue b/apps/frontend/src/pages/organization/[id]/settings/index.vue
index 209eec3c6..e19804531 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/index.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/index.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { SaveIcon, TrashIcon,UploadIcon } from "@modrinth/assets";
-import { Avatar, Button, ConfirmModal,FileInput } from "@modrinth/ui";
+import { SaveIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
+import { Avatar, Button, ConfirmModal, FileInput } from '@modrinth/ui'
 
 const {
   organization,
@@ -9,93 +9,93 @@ const {
   deleteIcon,
   patchIcon,
   patchOrganization,
-} = inject("organizationContext");
+} = inject('organizationContext')
 
-const icon = ref(null);
-const deletedIcon = ref(false);
-const previewImage = ref(null);
+const icon = ref(null)
+const deletedIcon = ref(false)
+const previewImage = ref(null)
 
-const name = ref(organization.value.name);
-const slug = ref(organization.value.slug);
+const name = ref(organization.value.name)
+const slug = ref(organization.value.slug)
 
-const summary = ref(organization.value.description);
+const summary = ref(organization.value.description)
 
 const patchData = computed(() => {
-  const data = {};
+  const data = {}
   if (name.value !== organization.value.name) {
-    data.name = name.value;
+    data.name = name.value
   }
   if (slug.value !== organization.value.slug) {
-    data.slug = slug.value;
+    data.slug = slug.value
   }
   if (summary.value !== organization.value.description) {
-    data.description = summary.value;
+    data.description = summary.value
   }
-  return data;
-});
+  return data
+})
 
 const hasChanges = computed(() => {
-  return Object.keys(patchData.value).length > 0 || deletedIcon.value || icon.value;
-});
+  return Object.keys(patchData.value).length > 0 || deletedIcon.value || icon.value
+})
 
 const markIconForDeletion = () => {
-  deletedIcon.value = true;
-  icon.value = null;
-  previewImage.value = null;
-};
+  deletedIcon.value = true
+  icon.value = null
+  previewImage.value = null
+}
 
 const showPreviewImage = (files) => {
-  const reader = new FileReader();
+  const reader = new FileReader()
 
-  icon.value = files[0];
-  deletedIcon.value = false;
+  icon.value = files[0]
+  deletedIcon.value = false
 
-  reader.readAsDataURL(icon.value);
+  reader.readAsDataURL(icon.value)
   reader.onload = (event) => {
-    previewImage.value = event.target.result;
-  };
-};
+    previewImage.value = event.target.result
+  }
+}
 
-const orgId = useRouteId();
+const orgId = useRouteId()
 
 const onSaveChanges = useClientTry(async () => {
   if (hasChanges.value) {
-    await patchOrganization(orgId, patchData.value);
+    await patchOrganization(orgId, patchData.value)
   }
 
   if (deletedIcon.value) {
-    await deleteIcon();
-    deletedIcon.value = false;
+    await deleteIcon()
+    deletedIcon.value = false
   } else if (icon.value) {
-    await patchIcon(icon.value);
-    icon.value = null;
+    await patchIcon(icon.value)
+    icon.value = null
   }
 
-  await refreshOrganization();
+  await refreshOrganization()
 
   addNotification({
-    group: "main",
-    title: "Organization updated",
-    text: "Your organization has been updated.",
-    type: "success",
-  });
-});
+    group: 'main',
+    title: 'Organization updated',
+    text: 'Your organization has been updated.',
+    type: 'success',
+  })
+})
 
 const onDeleteOrganization = useClientTry(async () => {
   await useBaseFetch(`organization/${orgId}`, {
-    method: "DELETE",
+    method: 'DELETE',
     apiVersion: 3,
-  });
+  })
 
   addNotification({
-    group: "main",
-    title: "Organization deleted",
-    text: "Your organization has been deleted.",
-    type: "success",
-  });
+    group: 'main',
+    title: 'Organization deleted',
+    text: 'Your organization has been deleted.',
+    type: 'success',
+  })
 
-  await navigateTo("/dashboard/organizations");
-});
+  await navigateTo('/dashboard/organizations')
+})
 </script>
 
 <template>
diff --git a/apps/frontend/src/pages/organization/[id]/settings/members.vue b/apps/frontend/src/pages/organization/[id]/settings/members.vue
index 7b05c7ce2..8c5cacabe 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/members.vue
@@ -226,28 +226,28 @@ import {
   TransferIcon,
   UserPlusIcon,
   UserXIcon as UserRemoveIcon,
-} from "@modrinth/assets";
-import { Avatar, Badge, Button, Checkbox } from "@modrinth/ui";
-import { ref } from "vue";
+} from '@modrinth/assets'
+import { Avatar, Badge, Button, Checkbox } from '@modrinth/ui'
+import { ref } from 'vue'
 
-import { removeTeamMember } from "~/helpers/teams.js";
-import { isPermission } from "~/utils/permissions.ts";
+import { removeTeamMember } from '~/helpers/teams.js'
+import { isPermission } from '~/utils/permissions.ts'
 
-const { organization, refresh: refreshOrganization, currentMember } = inject("organizationContext");
+const { organization, refresh: refreshOrganization, currentMember } = inject('organizationContext')
 
-const auth = await useAuth();
+const auth = await useAuth()
 
-const currentUsername = ref("");
-const openTeamMembers = ref([]);
+const currentUsername = ref('')
+const openTeamMembers = ref([])
 
-const allTeamMembers = ref(organization.value.members);
+const allTeamMembers = ref(organization.value.members)
 
 watch(
   () => organization.value,
   () => {
-    allTeamMembers.value = organization.value.members;
+    allTeamMembers.value = organization.value.members
   },
-);
+)
 
 const projectPermissions = {
   UPLOAD_VERSION: 1 << 0,
@@ -260,7 +260,7 @@ const projectPermissions = {
   DELETE_PROJECT: 1 << 7,
   VIEW_ANALYTICS: 1 << 8,
   VIEW_PAYOUTS: 1 << 9,
-};
+}
 
 const organizationPermissions = {
   EDIT_DETAILS: 1 << 0,
@@ -271,49 +271,49 @@ const organizationPermissions = {
   REMOVE_PROJECT: 1 << 5,
   DELETE_ORGANIZATION: 1 << 6,
   EDIT_MEMBER_DEFAULT_PERMISSIONS: 1 << 7,
-};
+}
 
 const permToLabel = (key) => {
-  const o = key.split("_").join(" ");
-  return o.charAt(0).toUpperCase() + o.slice(1).toLowerCase();
-};
+  const o = key.split('_').join(' ')
+  return o.charAt(0).toUpperCase() + o.slice(1).toLowerCase()
+}
 
 const leaveProject = async (teamId, uid) => {
-  await removeTeamMember(teamId, uid);
-  await navigateTo(`/organization/${organization.value.id}`);
-};
+  await removeTeamMember(teamId, uid)
+  await navigateTo(`/organization/${organization.value.id}`)
+}
 
-const onLeaveProject = useClientTry(leaveProject);
+const onLeaveProject = useClientTry(leaveProject)
 
 const onInviteTeamMember = useClientTry(async (teamId, username) => {
-  const user = await useBaseFetch(`user/${username}`);
+  const user = await useBaseFetch(`user/${username}`)
   const data = {
     user_id: user.id.trim(),
-  };
+  }
   await useBaseFetch(`team/${teamId}/members`, {
-    method: "POST",
+    method: 'POST',
     body: data,
-  });
-  await refreshOrganization();
-  currentUsername.value = "";
+  })
+  await refreshOrganization()
+  currentUsername.value = ''
   addNotification({
-    group: "main",
-    title: "Member invited",
+    group: 'main',
+    title: 'Member invited',
     text: `${user.username} has been invited to the organization.`,
-    type: "success",
-  });
-});
+    type: 'success',
+  })
+})
 
 const onRemoveMember = useClientTry(async (teamId, member) => {
-  await removeTeamMember(teamId, member.user.id);
-  await refreshOrganization();
+  await removeTeamMember(teamId, member.user.id)
+  await refreshOrganization()
   addNotification({
-    group: "main",
-    title: "Member removed",
+    group: 'main',
+    title: 'Member removed',
     text: `${member.user.username} has been removed from the organization.`,
-    type: "success",
-  });
-});
+    type: 'success',
+  })
+})
 
 const onUpdateTeamMember = useClientTry(async (teamId, member) => {
   const data = !member.is_owner
@@ -326,36 +326,36 @@ const onUpdateTeamMember = useClientTry(async (teamId, member) => {
     : {
         payouts_split: member.payouts_split,
         role: member.role,
-      };
+      }
   await useBaseFetch(`team/${teamId}/members/${member.user.id}`, {
-    method: "PATCH",
+    method: 'PATCH',
     body: data,
-  });
-  await refreshOrganization();
+  })
+  await refreshOrganization()
   addNotification({
-    group: "main",
-    title: "Member updated",
+    group: 'main',
+    title: 'Member updated',
     text: `${member.user.username} has been updated.`,
-    type: "success",
-  });
-});
+    type: 'success',
+  })
+})
 
 const onTransferOwnership = useClientTry(async (teamId, uid) => {
   const data = {
     user_id: uid,
-  };
+  }
   await useBaseFetch(`team/${teamId}/owner`, {
-    method: "PATCH",
+    method: 'PATCH',
     body: data,
-  });
-  await refreshOrganization();
+  })
+  await refreshOrganization()
   addNotification({
-    group: "main",
-    title: "Ownership transferred",
+    group: 'main',
+    title: 'Ownership transferred',
     text: `The ownership of ${organization.value.name} has been successfully transferred.`,
-    type: "success",
-  });
-});
+    type: 'success',
+  })
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/organization/[id]/settings/projects.vue b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
index 3d7597e4b..58cbe59fa 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
@@ -120,7 +120,7 @@
         <p>
           Changes will be applied to
           <strong>{{ selectedProjects.length }}</strong> project{{
-            selectedProjects.length > 1 ? "s" : ""
+            selectedProjects.length > 1 ? 's' : ''
           }}.
         </p>
         <ul>
@@ -273,7 +273,7 @@
               <BoxIcon />
               <span>{{
                 formatProjectType(
-                  $getProjectTypeForDisplay(project.project_types[0] ?? "project", project.loaders),
+                  $getProjectTypeForDisplay(project.project_types[0] ?? 'project', project.loaders),
                 )
               }}</span>
             </div>
@@ -309,19 +309,19 @@ import {
   SortDescIcon,
   TrashIcon,
   XIcon,
-} from "@modrinth/assets";
-import { Avatar, Badge, Button, Checkbox, commonMessages,CopyCode, Modal } from "@modrinth/ui";
-import { formatProjectType } from "@modrinth/utils";
-import { Multiselect } from "vue-multiselect";
+} from '@modrinth/assets'
+import { Avatar, Badge, Button, Checkbox, commonMessages, CopyCode, Modal } from '@modrinth/ui'
+import { formatProjectType } from '@modrinth/utils'
+import { Multiselect } from 'vue-multiselect'
 
-import ModalCreation from "~/components/ui/ModalCreation.vue";
-import OrganizationProjectTransferModal from "~/components/ui/OrganizationProjectTransferModal.vue";
+import ModalCreation from '~/components/ui/ModalCreation.vue'
+import OrganizationProjectTransferModal from '~/components/ui/OrganizationProjectTransferModal.vue'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
-const { organization, projects, refresh } = inject("organizationContext");
+const { organization, projects, refresh } = inject('organizationContext')
 
-const auth = await useAuth();
+const auth = await useAuth()
 
 const { data: userProjects, refresh: refreshUserProjects } = await useAsyncData(
   `user/${auth.value.user.id}/projects`,
@@ -329,197 +329,197 @@ const { data: userProjects, refresh: refreshUserProjects } = await useAsyncData(
   {
     watch: [auth],
   },
-);
+)
 
-const usersOwnedProjects = ref([]);
+const usersOwnedProjects = ref([])
 
 watch(
   () => userProjects.value,
   async () => {
-    if (!userProjects.value) return;
-    if (!userProjects.value.length) return;
+    if (!userProjects.value) return
+    if (!userProjects.value.length) return
 
-    const projects = userProjects.value.filter((project) => project.organization === null);
+    const projects = userProjects.value.filter((project) => project.organization === null)
 
-    const teamIds = projects.map((project) => project?.team).filter((x) => x);
+    const teamIds = projects.map((project) => project?.team).filter((x) => x)
     // Shape of teams is member[][]
     const teams = await useBaseFetch(`teams?ids=${JSON.stringify(teamIds)}`, {
       apiVersion: 3,
-    });
+    })
     // for each team id, figure out if the user is a member, and is_owner. Then filter the projects to only include those that are owned by the user
     const ownedTeamIds = teamIds.filter((_tid, i) => {
-      const team = teams?.[i];
-      if (!team) return false;
-      const member = team.find((member) => member.user.id === auth.value.user.id);
-      return member && member.is_owner;
-    });
-    const ownedProjects = projects.filter((project) => ownedTeamIds.includes(project.team));
-    usersOwnedProjects.value = ownedProjects;
+      const team = teams?.[i]
+      if (!team) return false
+      const member = team.find((member) => member.user.id === auth.value.user.id)
+      return member && member.is_owner
+    })
+    const ownedProjects = projects.filter((project) => ownedTeamIds.includes(project.team))
+    usersOwnedProjects.value = ownedProjects
   }, // watch options
   { immediate: true, deep: true },
-);
+)
 
 const onProjectTransferSubmit = async (projects) => {
   try {
     for (const project of projects) {
       await useBaseFetch(`organization/${organization.value.id}/projects`, {
-        method: "POST",
+        method: 'POST',
         body: JSON.stringify({
           project_id: project.id,
         }),
         apiVersion: 3,
-      });
+      })
     }
 
-    await refresh();
-    await refreshUserProjects();
+    await refresh()
+    await refreshUserProjects()
 
     addNotification({
-      group: "main",
-      title: "Success",
-      text: "Transferred selected projects to organization.",
-      type: "success",
-    });
+      group: 'main',
+      title: 'Success',
+      text: 'Transferred selected projects to organization.',
+      type: 'success',
+    })
   } catch (err) {
     addNotification({
-      group: "main",
-      title: "An error occurred",
-      text: err?.data?.description || err?.message || err || "Unknown error",
-      type: "error",
-    });
-    console.error(err);
+      group: 'main',
+      title: 'An error occurred',
+      text: err?.data?.description || err?.message || err || 'Unknown error',
+      type: 'error',
+    })
+    console.error(err)
   }
-};
+}
 
-const EDIT_DETAILS = 1 << 2;
+const EDIT_DETAILS = 1 << 2
 
 const updateSort = (inputProjects, sort, descending) => {
-  let sortedArray = inputProjects;
+  let sortedArray = inputProjects
   switch (sort) {
-    case "Name":
+    case 'Name':
       sortedArray = inputProjects.slice().sort((a, b) => {
-        return a.name.localeCompare(b.name);
-      });
-      break;
-    case "Status":
+        return a.name.localeCompare(b.name)
+      })
+      break
+    case 'Status':
       sortedArray = inputProjects.slice().sort((a, b) => {
         if (a.status < b.status) {
-          return -1;
+          return -1
         }
         if (a.status > b.status) {
-          return 1;
+          return 1
         }
-        return 0;
-      });
-      break;
-    case "Type":
+        return 0
+      })
+      break
+    case 'Type':
       sortedArray = inputProjects.slice().sort((a, b) => {
         if (a.project_type < b.project_type) {
-          return -1;
+          return -1
         }
         if (a.project_type > b.project_type) {
-          return 1;
+          return 1
         }
-        return 0;
-      });
-      break;
+        return 0
+      })
+      break
     default:
-      break;
+      break
   }
 
   if (descending) {
-    sortedArray = sortedArray.reverse();
+    sortedArray = sortedArray.reverse()
   }
 
-  return sortedArray;
-};
+  return sortedArray
+}
 
-const sortedProjects = ref(updateSort(projects.value, "Name"));
-const selectedProjects = ref([]);
-const sortBy = ref("Name");
-const descending = ref(false);
-const editLinksModal = ref(null);
+const sortedProjects = ref(updateSort(projects.value, 'Name'))
+const selectedProjects = ref([])
+const sortBy = ref('Name')
+const descending = ref(false)
+const editLinksModal = ref(null)
 
 watch(
   () => projects.value,
   (newVal) => {
-    sortedProjects.value = updateSort(newVal, sortBy.value, descending.value);
+    sortedProjects.value = updateSort(newVal, sortBy.value, descending.value)
   },
-);
+)
 
 const emptyLinksData = {
   showAffected: false,
   source: {
-    val: "",
+    val: '',
     clear: false,
   },
   discord: {
-    val: "",
+    val: '',
     clear: false,
   },
   wiki: {
-    val: "",
+    val: '',
     clear: false,
   },
   issues: {
-    val: "",
+    val: '',
     clear: false,
   },
-};
+}
 
-const editLinks = ref(emptyLinksData);
+const editLinks = ref(emptyLinksData)
 
 const updateDescending = () => {
-  descending.value = !descending.value;
-  sortedProjects.value = updateSort(sortedProjects.value, sortBy.value, descending.value);
-};
+  descending.value = !descending.value
+  sortedProjects.value = updateSort(sortedProjects.value, sortBy.value, descending.value)
+}
 
 const onBulkEditLinks = useClientTry(async () => {
-  const linkData = editLinks.value;
+  const linkData = editLinks.value
 
-  const baseData = {};
+  const baseData = {}
 
   if (linkData.issues.clear) {
-    baseData.issues_url = null;
+    baseData.issues_url = null
   } else if (linkData.issues.val.trim().length > 0) {
-    baseData.issues_url = linkData.issues.val.trim();
+    baseData.issues_url = linkData.issues.val.trim()
   }
 
   if (linkData.source.clear) {
-    baseData.source_url = null;
+    baseData.source_url = null
   } else if (linkData.source.val.trim().length > 0) {
-    baseData.source_url = linkData.source.val.trim();
+    baseData.source_url = linkData.source.val.trim()
   }
 
   if (linkData.wiki.clear) {
-    baseData.wiki_url = null;
+    baseData.wiki_url = null
   } else if (linkData.wiki.val.trim().length > 0) {
-    baseData.wiki_url = linkData.wiki.val.trim();
+    baseData.wiki_url = linkData.wiki.val.trim()
   }
 
   if (linkData.discord.clear) {
-    baseData.discord_url = null;
+    baseData.discord_url = null
   } else if (linkData.discord.val.trim().length > 0) {
-    baseData.discord_url = linkData.discord.val.trim();
+    baseData.discord_url = linkData.discord.val.trim()
   }
 
   await useBaseFetch(`projects?ids=${JSON.stringify(selectedProjects.value.map((x) => x.id))}`, {
-    method: "PATCH",
+    method: 'PATCH',
     body: JSON.stringify(baseData),
-  });
+  })
 
-  editLinksModal.value.hide();
+  editLinksModal.value.hide()
 
   addNotification({
-    group: "main",
-    title: "Success",
+    group: 'main',
+    title: 'Success',
     text: "Bulk edited selected project's links.",
-    type: "success",
-  });
+    type: 'success',
+  })
 
-  selectedProjects.value = [];
-  editLinks.value = emptyLinksData;
-});
+  selectedProjects.value = []
+  editLinks.value = emptyLinksData
+})
 </script>
 <style lang="scss" scoped>
 .table {
@@ -552,7 +552,7 @@ const onBulkEditLinks = useClientTry(async () => {
 
     .table-row {
       display: grid;
-      grid-template: "checkbox icon name type settings" "checkbox icon id status settings";
+      grid-template: 'checkbox icon name type settings' 'checkbox icon id status settings';
       grid-template-columns:
         min-content min-content minmax(min-content, 2fr)
         minmax(min-content, 1fr) min-content;
@@ -589,7 +589,7 @@ const onBulkEditLinks = useClientTry(async () => {
     }
 
     .table-head {
-      grid-template: "checkbox settings";
+      grid-template: 'checkbox settings';
       grid-template-columns: min-content minmax(min-content, 1fr);
 
       :nth-child(2),
@@ -605,7 +605,7 @@ const onBulkEditLinks = useClientTry(async () => {
   @media screen and (max-width: 560px) {
     .table-row {
       display: grid;
-      grid-template: "checkbox icon name settings" "checkbox icon id settings" "checkbox icon type settings" "checkbox icon status settings";
+      grid-template: 'checkbox icon name settings' 'checkbox icon id settings' 'checkbox icon type settings' 'checkbox icon status settings';
       grid-template-columns: min-content min-content minmax(min-content, 1fr) min-content;
 
       :nth-child(5) {
@@ -614,7 +614,7 @@ const onBulkEditLinks = useClientTry(async () => {
     }
 
     .table-head {
-      grid-template: "checkbox settings";
+      grid-template: 'checkbox settings';
       grid-template-columns: min-content minmax(min-content, 1fr);
     }
   }
@@ -653,7 +653,7 @@ const onBulkEditLinks = useClientTry(async () => {
   width: -moz-fit-content;
 }
 
-.label-button[data-active="true"] {
+.label-button[data-active='true'] {
   --background-color: var(--color-red);
   --text-color: var(--color-brand-inverted);
 }
diff --git a/apps/frontend/src/pages/plus.vue b/apps/frontend/src/pages/plus.vue
index 3524bbeaa..4986d9e56 100644
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -86,67 +86,61 @@
   </div>
 </template>
 <script setup>
-import {
-  HeartIcon,
-  ModrinthPlusIcon,
-  SettingsIcon,
-  SparklesIcon,
-  StarIcon,
-} from "@modrinth/assets";
-import { PurchaseModal } from "@modrinth/ui";
-import { calculateSavings, formatPrice, getCurrency } from "@modrinth/utils";
+import { HeartIcon, ModrinthPlusIcon, SettingsIcon, SparklesIcon, StarIcon } from '@modrinth/assets'
+import { PurchaseModal } from '@modrinth/ui'
+import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
 
-import { products } from "~/generated/state.json";
+import { products } from '~/generated/state.json'
 
-const title = "Subscribe to Modrinth Plus!";
+const title = 'Subscribe to Modrinth Plus!'
 const description =
-  "Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an exclusive profile badge! Half your subscription goes directly to Modrinth creators.";
+  "Subscribe to Modrinth Plus to go ad-free, support Modrinth's development, and get an exclusive profile badge! Half your subscription goes directly to Modrinth creators."
 
 useSeoMeta({
   title,
   description,
   ogTitle: title,
   ogDescription: description,
-});
+})
 
 useHead({
   script: [
     {
-      src: "https://js.stripe.com/v3/",
+      src: 'https://js.stripe.com/v3/',
       defer: true,
       async: true,
     },
   ],
-});
+})
 
-const vintl = useVIntl();
+const vintl = useVIntl()
 
-const data = useNuxtApp();
-const config = useRuntimeConfig();
+const data = useNuxtApp()
+const config = useRuntimeConfig()
 
-const auth = await useAuth();
-const purchaseModal = ref();
-const midasProduct = ref(products.find((x) => x.metadata.type === "midas"));
-const country = useUserCountry();
+const auth = await useAuth()
+const purchaseModal = ref()
+const midasProduct = ref(products.find((x) => x.metadata.type === 'midas'))
+const country = useUserCountry()
 const price = computed(() =>
   midasProduct.value.prices.find((x) => x.currency_code === getCurrency(country.value)),
-);
-const customer = ref();
-const paymentMethods = ref([]);
+)
+const customer = ref()
+const paymentMethods = ref([])
 
 async function fetchPaymentData() {
-  [customer.value, paymentMethods.value] = await Promise.all([
-    useBaseFetch("billing/customer", { internal: true }),
-    useBaseFetch("billing/payment_methods", { internal: true }),
-  ]);
+  ;[customer.value, paymentMethods.value] = await Promise.all([
+    useBaseFetch('billing/customer', { internal: true }),
+    useBaseFetch('billing/payment_methods', { internal: true }),
+  ])
 }
 
-const route = useRoute();
+const route = useRoute()
 onMounted(() => {
   if (route.query.showModal) {
-    purchaseModal.value.show();
+    purchaseModal.value.show()
   }
-});
+})
 </script>
 <style lang="scss" scoped>
 .main-hero {
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index a2e00542e..68743c967 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -72,8 +72,8 @@
             <button
               @click="
                 () => {
-                  filtersMenuOpen = false;
-                  scrollToTop('instant');
+                  filtersMenuOpen = false
+                  scrollToTop('instant')
                 }
               "
             >
@@ -315,7 +315,7 @@ import {
   ListIcon,
   SearchIcon,
   XIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 import {
   Avatar,
   Button,
@@ -327,140 +327,140 @@ import {
   SearchFilterControl,
   SearchSidebarFilter,
   useSearch,
-} from "@modrinth/ui";
-import { computed } from "vue";
+} from '@modrinth/ui'
+import { computed } from 'vue'
 
-import LogoAnimated from "~/components/brand/LogoAnimated.vue";
-import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
-import NavTabs from "~/components/ui/NavTabs.vue";
-import ProjectCard from "~/components/ui/ProjectCard.vue";
-import { useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
+import LogoAnimated from '~/components/brand/LogoAnimated.vue'
+import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
+import NavTabs from '~/components/ui/NavTabs.vue'
+import ProjectCard from '~/components/ui/ProjectCard.vue'
+import { useModrinthServers } from '~/composables/servers/modrinth-servers.ts'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
-const filtersMenuOpen = ref(false);
+const filtersMenuOpen = ref(false)
 
-const data = useNuxtApp();
-const route = useNativeRoute();
-const router = useNativeRouter();
+const data = useNuxtApp()
+const route = useNativeRoute()
+const router = useNativeRouter()
 
-const cosmetics = useCosmetics();
-const tags = useTags();
-const flags = useFeatureFlags();
-const auth = await useAuth();
+const cosmetics = useCosmetics()
+const tags = useTags()
+const flags = useFeatureFlags()
+const auth = await useAuth()
 
-const projectType = ref();
+const projectType = ref()
 
 function setProjectType() {
   const projType = tags.value.projectTypes.find(
-    (x) => x.id === route.path.replaceAll(/^\/|s\/?$/g, ""), // Removes prefix `/` and suffixes `s` and `s/`
-  );
+    (x) => x.id === route.path.replaceAll(/^\/|s\/?$/g, ''), // Removes prefix `/` and suffixes `s` and `s/`
+  )
 
   if (projType) {
-    projectType.value = projType;
+    projectType.value = projType
   }
 }
 
-setProjectType();
+setProjectType()
 router.afterEach(() => {
-  setProjectType();
-});
+  setProjectType()
+})
 
-const projectTypes = computed(() => [projectType.value.id]);
+const projectTypes = computed(() => [projectType.value.id])
 
-const server = ref();
-const serverHideInstalled = ref(false);
-const eraseDataOnInstall = ref(false);
+const server = ref()
+const serverHideInstalled = ref(false)
+const eraseDataOnInstall = ref(false)
 
-const PERSISTENT_QUERY_PARAMS = ["sid", "shi"];
+const PERSISTENT_QUERY_PARAMS = ['sid', 'shi']
 
-await updateServerContext();
+await updateServerContext()
 
 watch(route, () => {
-  updateServerContext();
-});
+  updateServerContext()
+})
 
 async function updateServerContext() {
   if (route.query.sid && (!server.value || server.value.serverId !== route.query.sid)) {
     if (!auth.value.user) {
-      router.push("/auth/sign-in?redirect=" + encodeURIComponent(route.fullPath));
+      router.push('/auth/sign-in?redirect=' + encodeURIComponent(route.fullPath))
     } else if (route.query.sid !== null) {
-      server.value = await useModrinthServers(route.query.sid, ["general", "content"], {
+      server.value = await useModrinthServers(route.query.sid, ['general', 'content'], {
         waitForModules: true,
-      });
+      })
     }
   }
 
   if (
     server.value &&
     server.value.serverId !== route.query.sid &&
-    route.name.startsWith("search")
+    route.name.startsWith('search')
   ) {
-    server.value = undefined;
+    server.value = undefined
   }
 
-  if (route.query.shi && projectType.value.id !== "modpack" && server.value) {
-    serverHideInstalled.value = route.query.shi === "true";
+  if (route.query.shi && projectType.value.id !== 'modpack' && server.value) {
+    serverHideInstalled.value = route.query.shi === 'true'
   }
 }
 
 const serverFilters = computed(() => {
-  const filters = [];
-  if (server.value && projectType.value.id !== "modpack") {
-    const gameVersion = server.value.general?.mc_version;
+  const filters = []
+  if (server.value && projectType.value.id !== 'modpack') {
+    const gameVersion = server.value.general?.mc_version
     if (gameVersion) {
       filters.push({
-        type: "game_version",
+        type: 'game_version',
         option: gameVersion,
-      });
+      })
     }
 
-    const platform = server.value.general?.loader?.toLowerCase();
+    const platform = server.value.general?.loader?.toLowerCase()
 
-    const modLoaders = ["fabric", "forge", "quilt", "neoforge"];
+    const modLoaders = ['fabric', 'forge', 'quilt', 'neoforge']
 
     if (platform && modLoaders.includes(platform)) {
       filters.push({
-        type: "mod_loader",
+        type: 'mod_loader',
         option: platform,
-      });
+      })
     }
 
-    const pluginLoaders = ["paper", "purpur"];
+    const pluginLoaders = ['paper', 'purpur']
 
     if (platform && pluginLoaders.includes(platform)) {
       filters.push({
-        type: "plugin_loader",
+        type: 'plugin_loader',
         option: platform,
-      });
+      })
     }
 
     if (serverHideInstalled.value) {
       const installedMods = server.value.content?.data
         .filter((x) => x.project_id)
-        .map((x) => x.project_id);
+        .map((x) => x.project_id)
 
       installedMods
         ?.map((x) => ({
-          type: "project_id",
+          type: 'project_id',
           option: `project_id:${x}`,
           negative: true,
         }))
-        .forEach((x) => filters.push(x));
+        .forEach((x) => filters.push(x))
     }
   }
-  return filters;
-});
+  return filters
+})
 
 const maxResultsForView = ref({
   list: [5, 10, 15, 20, 50, 100],
   grid: [6, 12, 18, 24, 48, 96],
   gallery: [6, 10, 16, 20, 50, 100],
-});
+})
 
 const currentMaxResultsOptions = computed(
   () => maxResultsForView.value[cosmetics.value.searchDisplayMode[projectType.value.id]],
-);
+)
 
 const {
   // Selections
@@ -481,175 +481,175 @@ const {
 
   // Functions
   createPageParams,
-} = useSearch(projectTypes, tags, serverFilters);
+} = useSearch(projectTypes, tags, serverFilters)
 
 const messages = defineMessages({
   gameVersionProvidedByServer: {
-    id: "search.filter.locked.server-game-version.title",
-    defaultMessage: "Game version is provided by the server",
+    id: 'search.filter.locked.server-game-version.title',
+    defaultMessage: 'Game version is provided by the server',
   },
   modLoaderProvidedByServer: {
-    id: "search.filter.locked.server-loader.title",
-    defaultMessage: "Loader is provided by the server",
+    id: 'search.filter.locked.server-loader.title',
+    defaultMessage: 'Loader is provided by the server',
   },
   providedByServer: {
-    id: "search.filter.locked.server",
-    defaultMessage: "Provided by the server",
+    id: 'search.filter.locked.server',
+    defaultMessage: 'Provided by the server',
   },
   syncFilterButton: {
-    id: "search.filter.locked.server.sync",
-    defaultMessage: "Sync with server",
+    id: 'search.filter.locked.server.sync',
+    defaultMessage: 'Sync with server',
   },
-});
+})
 
 async function serverInstall(project) {
-  project.installing = true;
+  project.installing = true
   try {
-    const versions = await useBaseFetch(`project/${project.project_id}/version`, {}, false, true);
+    const versions = await useBaseFetch(`project/${project.project_id}/version`, {}, false, true)
 
     const version =
       versions.find(
         (x) =>
           x.game_versions.includes(server.value.general.mc_version) &&
           x.loaders.includes(server.value.general.loader.toLowerCase()),
-      ) ?? versions[0];
+      ) ?? versions[0]
 
-    if (projectType.value.id === "modpack") {
+    if (projectType.value.id === 'modpack') {
       await server.value.general.reinstall(
         false,
         project.project_id,
         version.id,
         undefined,
         eraseDataOnInstall.value,
-      );
-      project.installed = true;
-      navigateTo(`/servers/manage/${server.value.serverId}/options/loader`);
-    } else if (projectType.value.id === "mod") {
-      await server.value.content.install("mod", version.project_id, version.id);
-      await server.value.refresh(["content"]);
-      project.installed = true;
-    } else if (projectType.value.id === "plugin") {
-      await server.value.content.install("plugin", version.project_id, version.id);
-      await server.value.refresh(["content"]);
-      project.installed = true;
+      )
+      project.installed = true
+      navigateTo(`/servers/manage/${server.value.serverId}/options/loader`)
+    } else if (projectType.value.id === 'mod') {
+      await server.value.content.install('mod', version.project_id, version.id)
+      await server.value.refresh(['content'])
+      project.installed = true
+    } else if (projectType.value.id === 'plugin') {
+      await server.value.content.install('plugin', version.project_id, version.id)
+      await server.value.refresh(['content'])
+      project.installed = true
     }
   } catch (e) {
-    console.error(e);
+    console.error(e)
   }
-  project.installing = false;
+  project.installing = false
 }
 
-const noLoad = ref(false);
+const noLoad = ref(false)
 const {
   data: rawResults,
   refresh: refreshSearch,
   pending: searchLoading,
 } = useLazyFetch(
   () => {
-    const config = useRuntimeConfig();
-    const base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl;
+    const config = useRuntimeConfig()
+    const base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl
 
-    return `${base}search${requestParams.value}`;
+    return `${base}search${requestParams.value}`
   },
   {
     transform: (hits) => {
-      noLoad.value = false;
-      return hits;
+      noLoad.value = false
+      return hits
     },
   },
-);
+)
 
-const results = shallowRef(toRaw(rawResults));
+const results = shallowRef(toRaw(rawResults))
 const pageCount = computed(() =>
   results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1,
-);
+)
 
-function scrollToTop(behavior = "smooth") {
-  window.scrollTo({ top: 0, behavior });
+function scrollToTop(behavior = 'smooth') {
+  window.scrollTo({ top: 0, behavior })
 }
 
 function updateSearchResults(pageNumber) {
-  currentPage.value = pageNumber || 1;
-  scrollToTop();
-  noLoad.value = true;
+  currentPage.value = pageNumber || 1
+  scrollToTop()
+  noLoad.value = true
 
   if (query.value === null) {
-    return;
+    return
   }
 
-  refreshSearch();
+  refreshSearch()
 
   if (import.meta.client) {
-    const persistentParams = {};
+    const persistentParams = {}
 
     for (const [key, value] of Object.entries(route.query)) {
       if (PERSISTENT_QUERY_PARAMS.includes(key)) {
-        persistentParams[key] = value;
+        persistentParams[key] = value
       }
     }
 
     if (serverHideInstalled.value) {
-      persistentParams.shi = "true";
+      persistentParams.shi = 'true'
     } else {
-      delete persistentParams.shi;
+      delete persistentParams.shi
     }
 
     const params = {
       ...persistentParams,
       ...createPageParams(),
-    };
+    }
 
-    router.replace({ path: route.path, query: params });
+    router.replace({ path: route.path, query: params })
   }
 }
 
 watch([currentFilters], () => {
-  updateSearchResults(1);
-});
+  updateSearchResults(1)
+})
 
 function cycleSearchDisplayMode() {
   cosmetics.value.searchDisplayMode[projectType.value.id] = data.$cycleValue(
     cosmetics.value.searchDisplayMode[projectType.value.id],
     tags.value.projectViewModes,
-  );
-  setClosestMaxResults();
+  )
+  setClosestMaxResults()
 }
 
 function setClosestMaxResults() {
-  const view = cosmetics.value.searchDisplayMode[projectType.value.id];
-  const maxResultsOptions = maxResultsForView.value[view] ?? [20];
-  const currentMax = maxResults.value;
+  const view = cosmetics.value.searchDisplayMode[projectType.value.id]
+  const maxResultsOptions = maxResultsForView.value[view] ?? [20]
+  const currentMax = maxResults.value
   if (!maxResultsOptions.includes(currentMax)) {
     maxResults.value = maxResultsOptions.reduce(function (prev, curr) {
-      return Math.abs(curr - currentMax) <= Math.abs(prev - currentMax) ? curr : prev;
-    });
+      return Math.abs(curr - currentMax) <= Math.abs(prev - currentMax) ? curr : prev
+    })
   }
 }
 
 const selectableProjectTypes = computed(() => {
   return [
-    { label: "Mods", href: `/mods` },
-    { label: "Resource Packs", href: `/resourcepacks` },
-    { label: "Data Packs", href: `/datapacks` },
-    { label: "Shaders", href: `/shaders` },
-    { label: "Modpacks", href: `/modpacks` },
-    { label: "Plugins", href: `/plugins` },
-  ];
-});
+    { label: 'Mods', href: `/mods` },
+    { label: 'Resource Packs', href: `/resourcepacks` },
+    { label: 'Data Packs', href: `/datapacks` },
+    { label: 'Shaders', href: `/shaders` },
+    { label: 'Modpacks', href: `/modpacks` },
+    { label: 'Plugins', href: `/plugins` },
+  ]
+})
 
 const ogTitle = computed(
-  () => `Search ${projectType.value.display}s${query.value ? " | " + query.value : ""}`,
-);
+  () => `Search ${projectType.value.display}s${query.value ? ' | ' + query.value : ''}`,
+)
 const description = computed(
   () =>
     `Search and browse thousands of Minecraft ${projectType.value.display}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${projectType.value.display}s.`,
-);
+)
 
 useSeoMeta({
   description,
   ogTitle,
   ogDescription: description,
-});
+})
 </script>
 
 <style lang="scss" scoped>
@@ -860,7 +860,7 @@ useSeoMeta({
 .search-background {
   width: 100%;
   height: 20rem;
-  background-image: url("https://minecraft.wiki/images/The_Garden_Awakens_Key_Art_No_Creaking.jpg?9968c");
+  background-image: url('https://minecraft.wiki/images/The_Garden_Awakens_Key_Art_No_Creaking.jpg?9968c');
   background-size: cover;
   background-position: center;
   pointer-events: none;
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index 277319fdb..b65dc6159 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -56,7 +56,7 @@
             <ButtonStyled color="brand" size="large">
               <nuxt-link class="w-fit" to="#plan">
                 <GameIcon aria-hidden="true" />
-                {{ hasServers ? "Start a new server" : "Start your server" }}
+                {{ hasServers ? 'Start a new server' : 'Start your server' }}
               </nuxt-link>
             </ButtonStyled>
             <ButtonStyled v-if="hasServers" type="outlined" size="large">
@@ -640,91 +640,91 @@ import {
   TerminalSquareIcon,
   TransferIcon,
   VersionIcon,
-} from "@modrinth/assets";
-import { ButtonStyled, ModrinthServersPurchaseModal } from "@modrinth/ui";
-import { monthsInInterval } from "@modrinth/ui/src/utils/billing.ts";
-import { formatPrice } from "@modrinth/utils";
-import { useVIntl } from "@vintl/vintl";
-import { computed } from "vue";
+} from '@modrinth/assets'
+import { ButtonStyled, ModrinthServersPurchaseModal } from '@modrinth/ui'
+import { monthsInInterval } from '@modrinth/ui/src/utils/billing.ts'
+import { formatPrice } from '@modrinth/utils'
+import { useVIntl } from '@vintl/vintl'
+import { computed } from 'vue'
 
-import OptionGroup from "~/components/ui/OptionGroup.vue";
-import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
-import ServerPlanSelector from "~/components/ui/servers/marketing/ServerPlanSelector.vue";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
-import { products } from "~/generated/state.json";
+import OptionGroup from '~/components/ui/OptionGroup.vue'
+import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
+import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
+import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
+import { products } from '~/generated/state.json'
 
-const { locale } = useVIntl();
+const { locale } = useVIntl()
 
-const billingPeriods = ref(["monthly", "quarterly"]);
-const billingPeriod = ref(billingPeriods.value.includes("quarterly") ? "quarterly" : "monthly");
+const billingPeriods = ref(['monthly', 'quarterly'])
+const billingPeriod = ref(billingPeriods.value.includes('quarterly') ? 'quarterly' : 'monthly')
 
 const pyroProducts = products
-  .filter((p) => p.metadata.type === "pyro")
-  .sort((a, b) => a.metadata.ram - b.metadata.ram);
+  .filter((p) => p.metadata.type === 'pyro')
+  .sort((a, b) => a.metadata.ram - b.metadata.ram)
 const pyroPlanProducts = pyroProducts.filter(
   (p) => p.metadata.ram === 4096 || p.metadata.ram === 6144 || p.metadata.ram === 8192,
-);
+)
 
 const lowestPrice = computed(() => {
   const amount = pyroProducts[0]?.prices?.find(
     (price) => price.currency_code === selectedCurrency.value,
-  )?.prices?.intervals?.[billingPeriod.value];
-  return amount ? amount / monthsInInterval[billingPeriod.value] : undefined;
-});
+  )?.prices?.intervals?.[billingPeriod.value]
+  return amount ? amount / monthsInInterval[billingPeriod.value] : undefined
+})
 
-const title = "Modrinth Servers";
+const title = 'Modrinth Servers'
 const description =
-  "Start your own Minecraft server directly on Modrinth. Play your favorite mods, plugins, and datapacks — without the hassle of setup.";
+  'Start your own Minecraft server directly on Modrinth. Play your favorite mods, plugins, and datapacks — without the hassle of setup.'
 
 useSeoMeta({
   title,
   description,
   ogTitle: title,
   ogDescription: description,
-});
+})
 
-const auth = await useAuth();
-const data = useNuxtApp();
-const config = useRuntimeConfig();
-const purchaseModal = ref(null);
-const country = useUserCountry();
-const customer = ref(null);
-const paymentMethods = ref([]);
-const selectedProduct = ref(null);
-const customServer = ref(false);
-const showModal = ref(false);
-const modalKey = ref(0);
+const auth = await useAuth()
+const data = useNuxtApp()
+const config = useRuntimeConfig()
+const purchaseModal = ref(null)
+const country = useUserCountry()
+const customer = ref(null)
+const paymentMethods = ref([])
+const selectedProduct = ref(null)
+const customServer = ref(false)
+const showModal = ref(false)
+const modalKey = ref(0)
 
-const words = ["my-smp", "medieval-masters", "create-server", "mega-smp", "spookypack"];
-const currentWordIndex = ref(0);
-const currentText = ref("");
-const isDeleting = ref(false);
-const typingSpeed = 75;
-const deletingSpeed = 25;
-const pauseTime = 2000;
-const selectedCurrency = ref("USD");
+const words = ['my-smp', 'medieval-masters', 'create-server', 'mega-smp', 'spookypack']
+const currentWordIndex = ref(0)
+const currentText = ref('')
+const isDeleting = ref(false)
+const typingSpeed = 75
+const deletingSpeed = 25
+const pauseTime = 2000
+const selectedCurrency = ref('USD')
 
-const loggedOut = computed(() => !auth.value.user);
-const outOfStockUrl = "https://discord.modrinth.com";
+const loggedOut = computed(() => !auth.value.user)
+const outOfStockUrl = 'https://discord.modrinth.com'
 
-const { data: hasServers } = await useAsyncData("ServerListCountCheck", async () => {
+const { data: hasServers } = await useAsyncData('ServerListCountCheck', async () => {
   try {
-    if (!auth.value.user) return false;
-    const response = await useServersFetch("servers");
-    return response.servers && response.servers.length > 0;
+    if (!auth.value.user) return false
+    const response = await useServersFetch('servers')
+    return response.servers && response.servers.length > 0
   } catch {
-    return false;
+    return false
   }
-});
+})
 
 function fetchStock(region, request) {
   return useServersFetch(`stock?region=${region.shortcode}`, {
-    method: "POST",
+    method: 'POST',
     body: {
       ...request,
     },
     bypassAuth: true,
-  }).then((res) => res.available);
+  }).then((res) => res.available)
 }
 
 async function fetchCapacityStatuses(customProduct = null) {
@@ -736,12 +736,12 @@ async function fetchCapacityStatuses(customProduct = null) {
           pyroProducts.reduce((min, product) =>
             product.metadata.ram < min.metadata.ram ? product : min,
           ),
-        ];
-    const capacityChecks = [];
+        ]
+    const capacityChecks = []
     for (const product of productsToCheck) {
       capacityChecks.push(
-        useServersFetch("stock", {
-          method: "POST",
+        useServersFetch('stock', {
+          method: 'POST',
           body: {
             cpu: product.metadata.cpu,
             memory_mb: product.metadata.ram,
@@ -750,296 +750,296 @@ async function fetchCapacityStatuses(customProduct = null) {
           },
           bypassAuth: true,
         }),
-      );
+      )
     }
 
     if (customProduct?.metadata) {
       return {
         custom: await capacityChecks[0],
-      };
+      }
     } else {
       return {
         small: await capacityChecks[0],
         medium: await capacityChecks[1],
         large: await capacityChecks[2],
         custom: await capacityChecks[3],
-      };
+      }
     }
   } catch (error) {
-    console.error("Error checking server capacities:", error);
+    console.error('Error checking server capacities:', error)
     return {
       custom: { available: 0 },
       small: { available: 0 },
       medium: { available: 0 },
       large: { available: 0 },
-    };
+    }
   }
 }
 
 const { data: capacityStatuses, refresh: refreshCapacity } = await useAsyncData(
-  "ServerCapacityAll",
+  'ServerCapacityAll',
   fetchCapacityStatuses,
   {
     getCachedData() {
-      return null; // Dont cache stock data.
+      return null // Dont cache stock data.
     },
   },
-);
+)
 
-const isSmallAtCapacity = computed(() => capacityStatuses.value?.small?.available === 0);
-const isMediumAtCapacity = computed(() => capacityStatuses.value?.medium?.available === 0);
-const isLargeAtCapacity = computed(() => capacityStatuses.value?.large?.available === 0);
-const isCustomAtCapacity = computed(() => capacityStatuses.value?.custom?.available === 0);
+const isSmallAtCapacity = computed(() => capacityStatuses.value?.small?.available === 0)
+const isMediumAtCapacity = computed(() => capacityStatuses.value?.medium?.available === 0)
+const isLargeAtCapacity = computed(() => capacityStatuses.value?.large?.available === 0)
+const isCustomAtCapacity = computed(() => capacityStatuses.value?.custom?.available === 0)
 
 const startTyping = () => {
-  const currentWord = words[currentWordIndex.value];
+  const currentWord = words[currentWordIndex.value]
   if (isDeleting.value) {
     if (currentText.value.length > 0) {
-      currentText.value = currentText.value.slice(0, -1);
-      setTimeout(startTyping, deletingSpeed);
+      currentText.value = currentText.value.slice(0, -1)
+      setTimeout(startTyping, deletingSpeed)
     } else {
-      isDeleting.value = false;
-      currentWordIndex.value = (currentWordIndex.value + 1) % words.length;
-      setTimeout(startTyping, typingSpeed);
+      isDeleting.value = false
+      currentWordIndex.value = (currentWordIndex.value + 1) % words.length
+      setTimeout(startTyping, typingSpeed)
     }
   } else if (currentText.value.length < currentWord.length) {
-    currentText.value = currentWord.slice(0, currentText.value.length + 1);
-    setTimeout(startTyping, typingSpeed);
+    currentText.value = currentWord.slice(0, currentText.value.length + 1)
+    setTimeout(startTyping, typingSpeed)
   } else {
-    isDeleting.value = true;
-    setTimeout(startTyping, pauseTime);
-  }
-};
-
-const handleError = (err) => {
-  addNotification({
-    group: "main",
-    title: "An error occurred",
-    type: "error",
-    text: err.message ?? (err.data ? err.data.description : err),
-  });
-};
-
-async function fetchPaymentData() {
-  if (!auth.value.user) return;
-  try {
-    const [customerData, paymentMethodsData] = await Promise.all([
-      useBaseFetch("billing/customer", { internal: true }),
-      useBaseFetch("billing/payment_methods", { internal: true }),
-    ]);
-    customer.value = customerData;
-    paymentMethods.value = paymentMethodsData;
-  } catch (error) {
-    console.error("Error fetching payment data:", error);
-    addNotification({
-      group: "main",
-      title: "Error fetching payment data",
-      type: "error",
-      text: error.message || "An unexpected error occurred",
-    });
+    isDeleting.value = true
+    setTimeout(startTyping, pauseTime)
   }
 }
 
-const selectedProjectId = ref();
+const handleError = (err) => {
+  addNotification({
+    group: 'main',
+    title: 'An error occurred',
+    type: 'error',
+    text: err.message ?? (err.data ? err.data.description : err),
+  })
+}
 
-const route = useRoute();
+async function fetchPaymentData() {
+  if (!auth.value.user) return
+  try {
+    const [customerData, paymentMethodsData] = await Promise.all([
+      useBaseFetch('billing/customer', { internal: true }),
+      useBaseFetch('billing/payment_methods', { internal: true }),
+    ])
+    customer.value = customerData
+    paymentMethods.value = paymentMethodsData
+  } catch (error) {
+    console.error('Error fetching payment data:', error)
+    addNotification({
+      group: 'main',
+      title: 'Error fetching payment data',
+      type: 'error',
+      text: error.message || 'An unexpected error occurred',
+    })
+  }
+}
+
+const selectedProjectId = ref()
+
+const route = useRoute()
 const isAtCapacity = computed(
   () => isSmallAtCapacity.value && isMediumAtCapacity.value && isLargeAtCapacity.value,
-);
+)
 
 const scrollToFaq = () => {
   if (route.hash) {
     // where pyro-hash === route.hash
-    const faq = document.querySelector(`[pyro-hash="${route.hash.slice(1)}"]`);
+    const faq = document.querySelector(`[pyro-hash="${route.hash.slice(1)}"]`)
     if (faq) {
-      faq.open = true;
-      const top = faq.getBoundingClientRect().top;
-      const offset = window.innerHeight / 2 - faq.clientHeight / 2;
-      window.scrollTo({ top: window.scrollY + top - offset, behavior: "smooth" });
+      faq.open = true
+      const top = faq.getBoundingClientRect().top
+      const offset = window.innerHeight / 2 - faq.clientHeight / 2
+      window.scrollTo({ top: window.scrollY + top - offset, behavior: 'smooth' })
     }
   }
-};
+}
 
 onMounted(() => {
-  scrollToFaq();
+  scrollToFaq()
   if (route.query?.project) {
-    selectedProjectId.value = route.query?.project;
+    selectedProjectId.value = route.query?.project
   }
-});
+})
 
-watch(() => route.hash, scrollToFaq);
+watch(() => route.hash, scrollToFaq)
 
 const plans = {
   small: pyroPlanProducts?.[0],
   medium: pyroPlanProducts?.[1],
   large: pyroPlanProducts?.[2],
   custom: pyroProducts || [],
-};
+}
 
 const selectProduct = async (product) => {
   if (loggedOut.value) {
-    data.$router.push(`/auth/sign-in?redirect=${encodeURIComponent("/servers?plan=" + product)}`);
-    return;
+    data.$router.push(`/auth/sign-in?redirect=${encodeURIComponent('/servers?plan=' + product)}`)
+    return
   }
 
-  await refreshCapacity();
-  console.log(capacityStatuses.value);
+  await refreshCapacity()
+  console.log(capacityStatuses.value)
 
-  if ((product === "custom" && isCustomAtCapacity.value) || isAtCapacity.value) {
+  if ((product === 'custom' && isCustomAtCapacity.value) || isAtCapacity.value) {
     addNotification({
-      group: "main",
-      title: "Server Capacity Full",
-      type: "error",
-      text: "We are currently at capacity. Please try again later.",
-    });
-    return;
+      group: 'main',
+      title: 'Server Capacity Full',
+      type: 'error',
+      text: 'We are currently at capacity. Please try again later.',
+    })
+    return
   }
 
-  const selectedPlan = plans[product];
-  if (!selectedPlan) return;
+  const selectedPlan = plans[product]
+  if (!selectedPlan) return
 
   if (
-    (product === "custom" && !selectedPlan.length) ||
-    (product !== "custom" && !selectedPlan.metadata)
+    (product === 'custom' && !selectedPlan.length) ||
+    (product !== 'custom' && !selectedPlan.metadata)
   ) {
     addNotification({
-      group: "main",
-      title: "Invalid product",
-      type: "error",
-      text: "The selected product was found but lacks necessary data. Please contact support.",
-    });
-    return;
+      group: 'main',
+      title: 'Invalid product',
+      type: 'error',
+      text: 'The selected product was found but lacks necessary data. Please contact support.',
+    })
+    return
   }
 
   // required for the purchase modal
   if (!pyroProducts.metadata) {
-    pyroProducts.metadata = {};
+    pyroProducts.metadata = {}
   }
-  pyroProducts.metadata.type = "pyro";
+  pyroProducts.metadata.type = 'pyro'
 
-  customServer.value = product === "custom";
-  selectedProduct.value = selectedPlan;
-  showModal.value = true;
-  modalKey.value++;
-  await nextTick();
+  customServer.value = product === 'custom'
+  selectedProduct.value = selectedPlan
+  showModal.value = true
+  modalKey.value++
+  await nextTick()
 
-  if (product === "custom") {
-    purchaseModal.value?.show(billingPeriod.value, undefined, selectedProjectId.value);
+  if (product === 'custom') {
+    purchaseModal.value?.show(billingPeriod.value, undefined, selectedProjectId.value)
   } else {
-    purchaseModal.value?.show(billingPeriod.value, selectedProduct.value, selectedProjectId.value);
+    purchaseModal.value?.show(billingPeriod.value, selectedProduct.value, selectedProjectId.value)
   }
-};
+}
 
 const planQuery = () => {
   if (route.query.plan) {
-    document.getElementById("plan").scrollIntoView();
-    selectProduct(route.query.plan);
+    document.getElementById('plan').scrollIntoView()
+    selectProduct(route.query.plan)
   }
-};
+}
 
-const regions = ref([]);
-const regionPings = ref([]);
+const regions = ref([])
+const regionPings = ref([])
 
 function pingRegions() {
-  useServersFetch("regions", {
-    method: "GET",
+  useServersFetch('regions', {
+    method: 'GET',
     version: 1,
     bypassAuth: true,
   }).then((res) => {
-    regions.value = res;
+    regions.value = res
     regions.value.forEach((region) => {
-      runPingTest(region);
-    });
-  });
+      runPingTest(region)
+    })
+  })
 }
 
-const PING_COUNT = 20;
-const PING_INTERVAL = 200;
-const MAX_PING_TIME = 1000;
+const PING_COUNT = 20
+const PING_INTERVAL = 200
+const MAX_PING_TIME = 1000
 
 function runPingTest(region, index = 1) {
   if (index > 10) {
     regionPings.value.push({
       region: region.shortcode,
       ping: -1,
-    });
-    return;
+    })
+    return
   }
 
-  const wsUrl = `wss://${region.shortcode}${index}.${region.zone}/pingtest`;
+  const wsUrl = `wss://${region.shortcode}${index}.${region.zone}/pingtest`
   try {
-    const socket = new WebSocket(wsUrl);
-    const pings = [];
+    const socket = new WebSocket(wsUrl)
+    const pings = []
 
     socket.onopen = () => {
       for (let i = 0; i < PING_COUNT; i++) {
         setTimeout(() => {
-          socket.send(performance.now());
-        }, i * PING_INTERVAL);
+          socket.send(performance.now())
+        }, i * PING_INTERVAL)
       }
       setTimeout(
         () => {
-          socket.close();
+          socket.close()
 
-          const median = Math.round([...pings].sort((a, b) => a - b)[Math.floor(pings.length / 2)]);
+          const median = Math.round([...pings].sort((a, b) => a - b)[Math.floor(pings.length / 2)])
           if (median) {
             regionPings.value.push({
               region: region.shortcode,
               ping: median,
-            });
+            })
           }
         },
         PING_COUNT * PING_INTERVAL + MAX_PING_TIME,
-      );
-    };
+      )
+    }
 
     socket.onmessage = (event) => {
-      pings.push(performance.now() - event.data);
-    };
+      pings.push(performance.now() - event.data)
+    }
 
     socket.onerror = (event) => {
       console.error(
         `Failed to connect pingtest WebSocket with ${wsUrl}, trying index ${index + 1}:`,
         event,
-      );
-      runPingTest(region, index + 1);
-    };
+      )
+      runPingTest(region, index + 1)
+    }
   } catch (error) {
-    console.error(`Failed to connect pingtest WebSocket with ${wsUrl}:`, error);
+    console.error(`Failed to connect pingtest WebSocket with ${wsUrl}:`, error)
   }
 }
 
 onMounted(() => {
-  startTyping();
-  planQuery();
-  pingRegions();
-});
+  startTyping()
+  planQuery()
+  pingRegions()
+})
 
 watch(customer, (newCustomer) => {
-  if (newCustomer) planQuery();
-});
+  if (newCustomer) planQuery()
+})
 
 onMounted(() => {
-  document.body.style.background = "var(--color-accent-contrast)";
-  document.body.style.overflowX = "hidden !important";
-  const layoutDiv = document.querySelector(".layout");
+  document.body.style.background = 'var(--color-accent-contrast)'
+  document.body.style.overflowX = 'hidden !important'
+  const layoutDiv = document.querySelector('.layout')
   if (layoutDiv) {
-    layoutDiv.style.background = "var(--color-accent-contrast)";
+    layoutDiv.style.background = 'var(--color-accent-contrast)'
   }
-  fetchPaymentData();
-});
+  fetchPaymentData()
+})
 
 onUnmounted(() => {
-  document.body.style.background = "";
-  document.body.style.overflowX = "";
-  const layoutDiv = document.querySelector(".layout");
+  document.body.style.background = ''
+  document.body.style.overflowX = ''
+  const layoutDiv = document.querySelector('.layout')
   if (layoutDiv) {
-    layoutDiv.style.background = "";
+    layoutDiv.style.background = ''
   }
   if (window.Stripe) {
-    window.Stripe = null;
+    window.Stripe = null
   }
-});
+})
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/pages/servers/manage/[id].vue b/apps/frontend/src/pages/servers/manage/[id].vue
index 13bd35d7a..784dc4d11 100644
--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -344,13 +344,13 @@
   >
     <h2 class="m-0 text-lg font-extrabold text-contrast">Server data</h2>
     <pre class="markdown-body w-full overflow-auto rounded-2xl bg-bg-raised p-4 text-sm">{{
-      JSON.stringify(server, null, "  ")
+      JSON.stringify(server, null, '  ')
     }}</pre>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Intercom, shutdown } from "@intercom/messenger-js-sdk";
+import { Intercom, shutdown } from '@intercom/messenger-js-sdk'
 import {
   CheckIcon,
   CopyIcon,
@@ -361,8 +361,8 @@ import {
   RightArrowIcon,
   SettingsIcon,
   TransferIcon,
-} from "@modrinth/assets";
-import { ButtonStyled, ErrorInformationCard, ServerNotice } from "@modrinth/ui";
+} from '@modrinth/assets'
+import { ButtonStyled, ErrorInformationCard, ServerNotice } from '@modrinth/ui'
 import type {
   Backup,
   PowerAction,
@@ -370,88 +370,88 @@ import type {
   Stats,
   WSEvent,
   WSInstallationResultEvent,
-} from "@modrinth/utils";
-import type { MessageDescriptor } from "@vintl/vintl";
-import DOMPurify from "dompurify";
-import { computed, onMounted, onUnmounted, type Reactive,ref } from "vue";
+} from '@modrinth/utils'
+import type { MessageDescriptor } from '@vintl/vintl'
+import DOMPurify from 'dompurify'
+import { computed, onMounted, onUnmounted, type Reactive, ref } from 'vue'
 
-import { reloadNuxtApp } from "#app";
-import PanelErrorIcon from "~/components/ui/servers/icons/PanelErrorIcon.vue";
-import ServerInstallation from "~/components/ui/servers/ServerInstallation.vue";
-import type { ModrinthServer} from "~/composables/servers/modrinth-servers.ts";
-import { useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
-import { useModrinthServersConsole } from "~/store/console.ts";
+import { reloadNuxtApp } from '#app'
+import PanelErrorIcon from '~/components/ui/servers/icons/PanelErrorIcon.vue'
+import ServerInstallation from '~/components/ui/servers/ServerInstallation.vue'
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
+import { useModrinthServers } from '~/composables/servers/modrinth-servers.ts'
+import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
+import { useModrinthServersConsole } from '~/store/console.ts'
 
-const app = useNuxtApp() as unknown as { $notify: any };
+const app = useNuxtApp() as unknown as { $notify: any }
 
-const socket = ref<WebSocket | null>(null);
-const isReconnecting = ref(false);
-const isLoading = ref(true);
-const reconnectInterval = ref<ReturnType<typeof setInterval> | null>(null);
-const isMounted = ref(true);
-const flags = useFeatureFlags();
+const socket = ref<WebSocket | null>(null)
+const isReconnecting = ref(false)
+const isLoading = ref(true)
+const reconnectInterval = ref<ReturnType<typeof setInterval> | null>(null)
+const isMounted = ref(true)
+const flags = useFeatureFlags()
 
-const INTERCOM_APP_ID = ref("ykeritl9");
+const INTERCOM_APP_ID = ref('ykeritl9')
 const auth = (await useAuth()) as unknown as {
-  value: { user: { id: string; username: string; email: string; created: string } };
-};
-const userId = ref(auth.value?.user?.id ?? null);
-const username = ref(auth.value?.user?.username ?? null);
-const email = ref(auth.value?.user?.email ?? null);
+  value: { user: { id: string; username: string; email: string; created: string } }
+}
+const userId = ref(auth.value?.user?.id ?? null)
+const username = ref(auth.value?.user?.username ?? null)
+const email = ref(auth.value?.user?.email ?? null)
 const createdAt = ref(
   auth.value?.user?.created ? Math.floor(new Date(auth.value.user.created).getTime() / 1000) : null,
-);
+)
 
-const route = useNativeRoute();
-const router = useRouter();
-const serverId = route.params.id as string;
+const route = useNativeRoute()
+const router = useRouter()
+const serverId = route.params.id as string
 
-const server: Reactive<ModrinthServer> = await useModrinthServers(serverId, ["general", "ws"]);
+const server: Reactive<ModrinthServer> = await useModrinthServers(serverId, ['general', 'ws'])
 
 const loadModulesPromise = Promise.resolve().then(() => {
-  if (server.general?.status === "suspended") {
-    return;
+  if (server.general?.status === 'suspended') {
+    return
   }
-  return server.refresh(["content", "backups", "network", "startup", "fs"]);
-});
+  return server.refresh(['content', 'backups', 'network', 'startup', 'fs'])
+})
 
-provide("modulesLoaded", loadModulesPromise);
+provide('modulesLoaded', loadModulesPromise)
 
-const errorTitle = ref("Error");
-const errorMessage = ref("An unexpected error occurred.");
-const errorLog = ref("");
-const errorLogFile = ref("");
-const serverData = computed(() => server.general);
-const isConnected = ref(false);
-const isWSAuthIncorrect = ref(false);
-const modrinthServersConsole = useModrinthServersConsole();
-const cpuData = ref<number[]>([]);
-const ramData = ref<number[]>([]);
-const isActioning = ref(false);
-const isServerRunning = computed(() => serverPowerState.value === "running");
-const serverPowerState = ref<ServerState>("stopped");
-const powerStateDetails = ref<{ oom_killed?: boolean; exit_code?: number }>();
+const errorTitle = ref('Error')
+const errorMessage = ref('An unexpected error occurred.')
+const errorLog = ref('')
+const errorLogFile = ref('')
+const serverData = computed(() => server.general)
+const isConnected = ref(false)
+const isWSAuthIncorrect = ref(false)
+const modrinthServersConsole = useModrinthServersConsole()
+const cpuData = ref<number[]>([])
+const ramData = ref<number[]>([])
+const isActioning = ref(false)
+const isServerRunning = computed(() => serverPowerState.value === 'running')
+const serverPowerState = ref<ServerState>('stopped')
+const powerStateDetails = ref<{ oom_killed?: boolean; exit_code?: number }>()
 
-const uptimeSeconds = ref(0);
-const firstConnect = ref(true);
-const copied = ref(false);
-const error = ref<Error | null>(null);
+const uptimeSeconds = ref(0)
+const firstConnect = ref(true)
+const copied = ref(false)
+const error = ref<Error | null>(null)
 
 const initialConsoleMessage = [
-  "   __________________________________________________",
-  " /  Welcome to your \x1B[32mModrinth Server\x1B[37m!                  \\",
-  "|   Press the green start button to start your server! |",
-  " \\____________________________________________________/",
-  "\x1B[32m     _    _ \x1B[37m",
-  "\x1B[32m    (o)--(o)      \x1B[37m",
-  "\x1B[32m   /.______.\\\x1B[37m",
-  "\x1B[32m   \\________/     \x1B[37m",
-  "\x1B[32m  ./        \\.    \x1B[37m",
-  "\x1B[32m ( .        , )\x1B[37m",
-  "\x1B[32m  \\ \\_\\\\ //_/ /\x1B[37m",
-  "\x1B[32m   ~~  ~~  ~~\x1B[37m",
-];
+  '   __________________________________________________',
+  ' /  Welcome to your \x1B[32mModrinth Server\x1B[37m!                  \\',
+  '|   Press the green start button to start your server! |',
+  ' \\____________________________________________________/',
+  '\x1B[32m     _    _ \x1B[37m',
+  '\x1B[32m    (o)--(o)      \x1B[37m',
+  '\x1B[32m   /.______.\\\x1B[37m',
+  '\x1B[32m   \\________/     \x1B[37m',
+  '\x1B[32m  ./        \\.    \x1B[37m',
+  '\x1B[32m ( .        , )\x1B[37m',
+  '\x1B[32m  \\ \\_\\\\ //_/ /\x1B[37m',
+  '\x1B[32m   ~~  ~~  ~~\x1B[37m',
+]
 
 const stats = ref<Stats>({
   current: {
@@ -472,79 +472,79 @@ const stats = ref<Stats>({
     cpu: [],
     ram: [],
   },
-});
+})
 
-const showGameLabel = computed(() => !!serverData.value?.game);
-const showLoaderLabel = computed(() => !!serverData.value?.loader);
+const showGameLabel = computed(() => !!serverData.value?.game)
+const showLoaderLabel = computed(() => !!serverData.value?.loader)
 
 const navLinks = [
-  { label: "Overview", href: `/servers/manage/${serverId}`, subpages: [] },
+  { label: 'Overview', href: `/servers/manage/${serverId}`, subpages: [] },
   {
-    label: "Content",
+    label: 'Content',
     href: `/servers/manage/${serverId}/content`,
-    subpages: ["mods", "datapacks"],
+    subpages: ['mods', 'datapacks'],
   },
-  { label: "Files", href: `/servers/manage/${serverId}/files`, subpages: [] },
-  { label: "Backups", href: `/servers/manage/${serverId}/backups`, subpages: [] },
+  { label: 'Files', href: `/servers/manage/${serverId}/files`, subpages: [] },
+  { label: 'Backups', href: `/servers/manage/${serverId}/backups`, subpages: [] },
   {
-    label: "Options",
+    label: 'Options',
     href: `/servers/manage/${serverId}/options`,
-    subpages: ["startup", "network", "properties", "info"],
+    subpages: ['startup', 'network', 'properties', 'info'],
   },
-];
+]
 
 const filteredNotices = computed(
-  () => serverData.value?.notices?.filter((n) => n.level !== "survey") ?? [],
-);
-const surveyNotice = computed(() => serverData.value?.notices?.find((n) => n.level === "survey"));
+  () => serverData.value?.notices?.filter((n) => n.level !== 'survey') ?? [],
+)
+const surveyNotice = computed(() => serverData.value?.notices?.find((n) => n.level === 'survey'))
 
 async function dismissSurvey() {
-  const noticeId = surveyNotice.value?.id;
+  const noticeId = surveyNotice.value?.id
   if (noticeId === undefined) {
-    console.warn("No survey notice to dismiss");
-    return;
+    console.warn('No survey notice to dismiss')
+    return
   }
-  await dismissNotice(noticeId);
-  console.log(`Dismissed survey notice ${noticeId}`);
+  await dismissNotice(noticeId)
+  console.log(`Dismissed survey notice ${noticeId}`)
 }
 
 type TallyPopupOptions = {
-  key?: string;
-  layout?: "default" | "modal";
-  width?: number;
-  alignLeft?: boolean;
-  hideTitle?: boolean;
-  overlay?: boolean;
+  key?: string
+  layout?: 'default' | 'modal'
+  width?: number
+  alignLeft?: boolean
+  hideTitle?: boolean
+  overlay?: boolean
   emoji?: {
-    text: string;
+    text: string
     animation:
-      | "none"
-      | "wave"
-      | "tada"
-      | "heart-beat"
-      | "spin"
-      | "flash"
-      | "bounce"
-      | "rubber-band"
-      | "head-shake";
-  };
-  autoClose?: number;
-  showOnce?: boolean;
-  doNotShowAfterSubmit?: boolean;
-  customFormUrl?: string;
+      | 'none'
+      | 'wave'
+      | 'tada'
+      | 'heart-beat'
+      | 'spin'
+      | 'flash'
+      | 'bounce'
+      | 'rubber-band'
+      | 'head-shake'
+  }
+  autoClose?: number
+  showOnce?: boolean
+  doNotShowAfterSubmit?: boolean
+  customFormUrl?: string
   hiddenFields?: {
-    [key: string]: unknown;
-  };
-  onOpen?: () => void;
-  onClose?: () => void;
-  onPageView?: (page: number) => void;
-  onSubmit?: (payload: unknown) => void;
-};
+    [key: string]: unknown
+  }
+  onOpen?: () => void
+  onClose?: () => void
+  onPageView?: (page: number) => void
+  onSubmit?: (payload: unknown) => void
+}
 
 const popupOptions = computed(
   () =>
     ({
-      layout: "default",
+      layout: 'default',
       width: 400,
       autoClose: 2000,
       hideTitle: true,
@@ -561,332 +561,332 @@ const popupOptions = computed(
       onOpen: () => console.log(`Opened survey notice: ${surveyNotice.value?.id}`),
       onClose: async () => await dismissSurvey(),
       onSubmit: (payload: any) => {
-        console.log("Form submitted:", payload);
+        console.log('Form submitted:', payload)
       },
     }) satisfies TallyPopupOptions,
-);
+)
 
 function showSurvey() {
   if (!surveyNotice.value) {
-    console.warn("No survey notice to open");
-    return;
+    console.warn('No survey notice to open')
+    return
   }
 
   try {
     if ((window as any).Tally?.openPopup) {
       console.log(
         `Opening Tally popup for survey notice ${surveyNotice.value?.id} (form ID: ${surveyNotice.value?.message})`,
-      );
-      (window as any).Tally.openPopup(surveyNotice.value?.message, popupOptions.value);
+      )
+      ;(window as any).Tally.openPopup(surveyNotice.value?.message, popupOptions.value)
     } else {
-      console.warn("Tally script not yet loaded");
+      console.warn('Tally script not yet loaded')
     }
   } catch (e) {
-    console.error("Error opening Tally popup:", e);
+    console.error('Error opening Tally popup:', e)
   }
 }
 
 const connectWebSocket = () => {
-  if (!isMounted.value) return;
+  if (!isMounted.value) return
 
   try {
-    const wsAuth = computed(() => server.ws);
-    socket.value = new WebSocket(`wss://${wsAuth.value?.url}`);
+    const wsAuth = computed(() => server.ws)
+    socket.value = new WebSocket(`wss://${wsAuth.value?.url}`)
 
     socket.value.onopen = () => {
       if (!isMounted.value) {
-        socket.value?.close();
-        return;
+        socket.value?.close()
+        return
       }
 
-      modrinthServersConsole.clear();
-      socket.value?.send(JSON.stringify({ event: "auth", jwt: wsAuth.value?.token }));
-      isConnected.value = true;
-      isReconnecting.value = false;
-      isLoading.value = false;
+      modrinthServersConsole.clear()
+      socket.value?.send(JSON.stringify({ event: 'auth', jwt: wsAuth.value?.token }))
+      isConnected.value = true
+      isReconnecting.value = false
+      isLoading.value = false
 
       if (firstConnect.value) {
         for (let i = 0; i < initialConsoleMessage.length; i++) {
-          modrinthServersConsole.addLine(initialConsoleMessage[i]);
+          modrinthServersConsole.addLine(initialConsoleMessage[i])
         }
       }
 
-      firstConnect.value = false;
+      firstConnect.value = false
 
       if (reconnectInterval.value) {
         if (reconnectInterval.value !== null) {
-          clearInterval(reconnectInterval.value);
+          clearInterval(reconnectInterval.value)
         }
-        reconnectInterval.value = null;
+        reconnectInterval.value = null
       }
-    };
+    }
 
     socket.value.onmessage = (event) => {
       if (isMounted.value) {
-        const data: WSEvent = JSON.parse(event.data);
-        handleWebSocketMessage(data);
+        const data: WSEvent = JSON.parse(event.data)
+        handleWebSocketMessage(data)
       }
-    };
+    }
 
     socket.value.onclose = () => {
       if (isMounted.value) {
         modrinthServersConsole.addLine(
           "\nSomething went wrong with the connection, we're reconnecting...",
-        );
-        isConnected.value = false;
-        scheduleReconnect();
+        )
+        isConnected.value = false
+        scheduleReconnect()
       }
-    };
+    }
 
     socket.value.onerror = (error) => {
       if (isMounted.value) {
-        console.error("Failed to connect WebSocket:", error);
-        isConnected.value = false;
-        scheduleReconnect();
+        console.error('Failed to connect WebSocket:', error)
+        isConnected.value = false
+        scheduleReconnect()
       }
-    };
+    }
   } catch (error) {
     if (isMounted.value) {
-      console.error("Failed to connect WebSocket:", error);
-      isConnected.value = false;
-      scheduleReconnect();
+      console.error('Failed to connect WebSocket:', error)
+      isConnected.value = false
+      scheduleReconnect()
     }
   }
-};
+}
 
 const scheduleReconnect = () => {
-  if (!isMounted.value) return;
+  if (!isMounted.value) return
 
   if (!reconnectInterval.value) {
-    isReconnecting.value = true;
+    isReconnecting.value = true
     reconnectInterval.value = setInterval(() => {
       if (isMounted.value) {
-        console.log("Attempting to reconnect...");
-        connectWebSocket();
+        console.log('Attempting to reconnect...')
+        connectWebSocket()
       } else {
-        reconnectInterval.value = null;
+        reconnectInterval.value = null
       }
-    }, 5000);
+    }, 5000)
   }
-};
+}
 
-let uptimeIntervalId: ReturnType<typeof setInterval> | null = null;
+let uptimeIntervalId: ReturnType<typeof setInterval> | null = null
 
 const startUptimeUpdates = () => {
   uptimeIntervalId = setInterval(() => {
-    uptimeSeconds.value += 1;
-  }, 1000);
-};
+    uptimeSeconds.value += 1
+  }, 1000)
+}
 
 const stopUptimeUpdates = () => {
   if (uptimeIntervalId) {
-    clearInterval(uptimeIntervalId);
+    clearInterval(uptimeIntervalId)
   }
-};
+}
 
 const handleWebSocketMessage = (data: WSEvent) => {
   switch (data.event) {
-    case "log":
+    case 'log':
       // eslint-disable-next-line no-case-declarations
-      const log = data.message.split("\n").filter((l) => l.trim());
-      modrinthServersConsole.addLines(log);
-      break;
-    case "stats":
-      updateStats(data);
-      break;
-    case "auth-expiring":
-    case "auth-incorrect":
-      reauthenticate();
-      break;
-    case "power-state":
-      if (data.state === "crashed") {
+      const log = data.message.split('\n').filter((l) => l.trim())
+      modrinthServersConsole.addLines(log)
+      break
+    case 'stats':
+      updateStats(data)
+      break
+    case 'auth-expiring':
+    case 'auth-incorrect':
+      reauthenticate()
+      break
+    case 'power-state':
+      if (data.state === 'crashed') {
         updatePowerState(data.state, {
           oom_killed: data.oom_killed,
           exit_code: data.exit_code,
-        });
+        })
       } else {
-        updatePowerState(data.state);
+        updatePowerState(data.state)
       }
-      break;
-    case "installation-result":
-      handleInstallationResult(data);
-      break;
-    case "new-mod":
-      server.refresh(["content"]);
-      console.log("New mod:", data);
-      break;
-    case "auth-ok":
-      break;
-    case "uptime":
-      stopUptimeUpdates();
-      uptimeSeconds.value = data.uptime;
-      startUptimeUpdates();
-      break;
-    case "backup-progress": {
+      break
+    case 'installation-result':
+      handleInstallationResult(data)
+      break
+    case 'new-mod':
+      server.refresh(['content'])
+      console.log('New mod:', data)
+      break
+    case 'auth-ok':
+      break
+    case 'uptime':
+      stopUptimeUpdates()
+      uptimeSeconds.value = data.uptime
+      startUptimeUpdates()
+      break
+    case 'backup-progress': {
       // Update a backup's state
-      const curBackup = server.backups?.data.find((backup) => backup.id === data.id);
+      const curBackup = server.backups?.data.find((backup) => backup.id === data.id)
 
       if (!curBackup) {
-        console.log(`Ignoring backup-progress event for unknown backup: ${data.id}`);
+        console.log(`Ignoring backup-progress event for unknown backup: ${data.id}`)
       } else {
         console.log(
           `Handling backup progress for ${curBackup.name} (${data.id}) task: ${data.task} state: ${data.state} progress: ${data.progress}`,
-        );
+        )
 
         if (!curBackup.task) {
-          curBackup.task = {};
+          curBackup.task = {}
         }
 
         curBackup.task[data.task] = {
           progress: data.progress,
           state: data.state,
-        };
+        }
 
-        curBackup.ongoing = data.task === "create" && data.state === "ongoing";
+        curBackup.ongoing = data.task === 'create' && data.state === 'ongoing'
       }
 
-      break;
+      break
     }
-    case "filesystem-ops": {
+    case 'filesystem-ops': {
       if (!server.fs) {
-        console.error("FilesystemOps received, but server.fs is not available", data.all);
-        break;
+        console.error('FilesystemOps received, but server.fs is not available', data.all)
+        break
       }
       if (JSON.stringify(server.fs.ops) !== JSON.stringify(data.all)) {
-        server.fs.ops = data.all;
+        server.fs.ops = data.all
       }
 
       server.fs.queuedOps = server.fs.queuedOps.filter(
         (queuedOp) => !data.all.some((x) => x.src === queuedOp.src),
-      );
+      )
 
-      const cancelled = data.all.filter((x) => x.state === "cancelled");
-      Promise.all(cancelled.map((x) => server.fs?.modifyOp(x.id, "dismiss")));
+      const cancelled = data.all.filter((x) => x.state === 'cancelled')
+      Promise.all(cancelled.map((x) => server.fs?.modifyOp(x.id, 'dismiss')))
 
-      const completed = data.all.filter((x) => x.state === "done");
+      const completed = data.all.filter((x) => x.state === 'done')
       if (completed.length > 0) {
         setTimeout(
           async () =>
             await Promise.all(
               completed.map((x) => {
                 if (!server.fs?.opsQueuedForModification.includes(x.id)) {
-                  server.fs?.opsQueuedForModification.push(x.id);
-                  return server.fs?.modifyOp(x.id, "dismiss");
+                  server.fs?.opsQueuedForModification.push(x.id)
+                  return server.fs?.modifyOp(x.id, 'dismiss')
                 }
-                return Promise.resolve();
+                return Promise.resolve()
               }),
             ),
           3000,
-        );
+        )
       }
-      break;
+      break
     }
     default:
-      console.warn("Unhandled WebSocket event:", data);
+      console.warn('Unhandled WebSocket event:', data)
   }
-};
+}
 
-const newLoader = ref<string | null>(null);
-const newLoaderVersion = ref<string | null>(null);
-const newMCVersion = ref<string | null>(null);
+const newLoader = ref<string | null>(null)
+const newLoaderVersion = ref<string | null>(null)
+const newMCVersion = ref<string | null>(null)
 
 const onReinstall = (potentialArgs: any) => {
   if (serverData.value?.flows?.intro) {
-    server.general?.endIntro();
+    server.general?.endIntro()
   }
 
-  if (!serverData.value) return;
+  if (!serverData.value) return
 
-  serverData.value.status = "installing";
+  serverData.value.status = 'installing'
 
   if (potentialArgs?.loader) {
-    newLoader.value = potentialArgs.loader;
+    newLoader.value = potentialArgs.loader
   }
   if (potentialArgs?.lVersion) {
-    newLoaderVersion.value = potentialArgs.lVersion;
+    newLoaderVersion.value = potentialArgs.lVersion
   }
   if (potentialArgs?.mVersion) {
-    newMCVersion.value = potentialArgs.mVersion;
+    newMCVersion.value = potentialArgs.mVersion
   }
 
-  error.value = null;
-  errorTitle.value = "Error";
-  errorMessage.value = "An unexpected error occurred.";
-};
+  error.value = null
+  errorTitle.value = 'Error'
+  errorMessage.value = 'An unexpected error occurred.'
+}
 
 const handleInstallationResult = async (data: WSInstallationResultEvent) => {
   switch (data.result) {
-    case "ok": {
-      if (!serverData.value) break;
+    case 'ok': {
+      if (!serverData.value) break
 
       try {
-        await new Promise((resolve) => setTimeout(resolve, 2000));
+        await new Promise((resolve) => setTimeout(resolve, 2000))
 
-        let attempts = 0;
-        const maxAttempts = 3;
-        let hasValidData = false;
+        let attempts = 0
+        const maxAttempts = 3
+        let hasValidData = false
 
         while (!hasValidData && attempts < maxAttempts) {
-          attempts++;
+          attempts++
 
-          await server.refresh(["general"], {
+          await server.refresh(['general'], {
             preserveConnection: true,
             preserveInstallState: true,
-          });
+          })
 
           if (serverData.value?.loader && serverData.value?.mc_version) {
-            hasValidData = true;
-            serverData.value.status = "available";
-            await server.refresh(["content", "startup"]);
-            break;
+            hasValidData = true
+            serverData.value.status = 'available'
+            await server.refresh(['content', 'startup'])
+            break
           }
 
-          await new Promise((resolve) => setTimeout(resolve, 2000));
+          await new Promise((resolve) => setTimeout(resolve, 2000))
         }
 
         if (!hasValidData) {
-          console.error("Failed to get valid server data after installation");
+          console.error('Failed to get valid server data after installation')
         }
       } catch (err: unknown) {
-        console.error("Error refreshing data after installation:", err);
+        console.error('Error refreshing data after installation:', err)
       }
 
-      newLoader.value = null;
-      newLoaderVersion.value = null;
-      newMCVersion.value = null;
-      error.value = null;
-      break;
+      newLoader.value = null
+      newLoaderVersion.value = null
+      newMCVersion.value = null
+      error.value = null
+      break
     }
-    case "err": {
-      console.log("failed to install");
-      console.log(data);
-      errorTitle.value = "Installation error";
-      errorMessage.value = data.reason ?? "Unknown error";
-      error.value = new Error(data.reason ?? "Unknown error");
-      let files = await server.fs?.listDirContents("/", 1, 100);
+    case 'err': {
+      console.log('failed to install')
+      console.log(data)
+      errorTitle.value = 'Installation error'
+      errorMessage.value = data.reason ?? 'Unknown error'
+      error.value = new Error(data.reason ?? 'Unknown error')
+      let files = await server.fs?.listDirContents('/', 1, 100)
       if (files) {
         if (files.total > 1) {
           for (let i = 1; i < files.total; i++) {
-            const nextFiles = await server.fs?.listDirContents("/", i, 100);
-            if (nextFiles?.items?.length === 0) break;
-            if (nextFiles) files = nextFiles;
+            const nextFiles = await server.fs?.listDirContents('/', i, 100)
+            if (nextFiles?.items?.length === 0) break
+            if (nextFiles) files = nextFiles
           }
         }
       }
       const fileName = files?.items?.find((file: { name: string }) =>
-        file.name.startsWith("modrinth-installation"),
-      )?.name;
-      errorLogFile.value = fileName ?? "";
+        file.name.startsWith('modrinth-installation'),
+      )?.name
+      errorLogFile.value = fileName ?? ''
       if (fileName) {
-        errorLog.value = await server.fs?.downloadFile(fileName);
+        errorLog.value = await server.fs?.downloadFile(fileName)
       }
-      break;
+      break
     }
   }
-};
+}
 
-const updateStats = (currentStats: Stats["current"]) => {
-  isConnected.value = true;
+const updateStats = (currentStats: Stats['current']) => {
+  isConnected.value = true
   stats.value = {
     current: currentStats,
     past: { ...stats.value.current },
@@ -897,310 +897,310 @@ const updateStats = (currentStats: Stats["current"]) => {
         Math.floor((currentStats.ram_usage_bytes / currentStats.ram_total_bytes) * 100),
       ),
     },
-  };
-};
+  }
+}
 
 const updatePowerState = (
   state: ServerState,
   details?: { oom_killed?: boolean; exit_code?: number },
 ) => {
-  serverPowerState.value = state;
+  serverPowerState.value = state
 
-  if (state === "crashed") {
-    powerStateDetails.value = details;
+  if (state === 'crashed') {
+    powerStateDetails.value = details
   } else {
-    powerStateDetails.value = undefined;
+    powerStateDetails.value = undefined
   }
 
-  if (state === "stopped" || state === "crashed") {
-    stopUptimeUpdates();
-    uptimeSeconds.value = 0;
+  if (state === 'stopped' || state === 'crashed') {
+    stopUptimeUpdates()
+    uptimeSeconds.value = 0
   }
-};
+}
 
 const updateGraphData = (dataArray: number[], newValue: number): number[] => {
-  const updated = [...dataArray, newValue];
-  if (updated.length > 10) updated.shift();
-  return updated;
-};
+  const updated = [...dataArray, newValue]
+  if (updated.length > 10) updated.shift()
+  return updated
+}
 
 const reauthenticate = async () => {
   try {
-    await server.refresh();
-    const wsAuth = computed(() => server.ws);
-    socket.value?.send(JSON.stringify({ event: "auth", jwt: wsAuth.value?.token }));
+    await server.refresh()
+    const wsAuth = computed(() => server.ws)
+    socket.value?.send(JSON.stringify({ event: 'auth', jwt: wsAuth.value?.token }))
   } catch (error) {
-    console.error("Reauthentication failed:", error);
-    isWSAuthIncorrect.value = true;
+    console.error('Reauthentication failed:', error)
+    isWSAuthIncorrect.value = true
   }
-};
+}
 
 const toAdverb = (word: string) => {
-  if (word.endsWith("p")) {
-    return word + "ping";
+  if (word.endsWith('p')) {
+    return word + 'ping'
   }
-  if (word.endsWith("e")) {
-    return word.slice(0, -1) + "ing";
+  if (word.endsWith('e')) {
+    return word.slice(0, -1) + 'ing'
   }
-  if (word.endsWith("ie")) {
-    return word.slice(0, -2) + "ying";
+  if (word.endsWith('ie')) {
+    return word.slice(0, -2) + 'ying'
   }
-  return word + "ing";
-};
+  return word + 'ing'
+}
 
 const sendPowerAction = async (action: PowerAction) => {
-  const actionName = action.charAt(0).toUpperCase() + action.slice(1);
+  const actionName = action.charAt(0).toUpperCase() + action.slice(1)
   try {
-    isActioning.value = true;
-    await server.general?.power(action);
+    isActioning.value = true
+    await server.general?.power(action)
   } catch (error) {
-    console.error(`Error ${toAdverb(actionName)} server:`, error);
+    console.error(`Error ${toAdverb(actionName)} server:`, error)
     notifyError(
       `Error ${toAdverb(actionName)} server`,
-      "An error occurred while performing this action.",
-    );
+      'An error occurred while performing this action.',
+    )
   } finally {
-    isActioning.value = false;
+    isActioning.value = false
   }
-};
+}
 
 const notifyError = (title: string, text: string) => {
   addNotification({
-    group: "server",
+    group: 'server',
     title,
     text,
-    type: "error",
-  });
-};
+    type: 'error',
+  })
+}
 
 export type BackupInProgressReason = {
-  type: string;
-  tooltip: MessageDescriptor;
-};
+  type: string
+  tooltip: MessageDescriptor
+}
 
 const RestoreInProgressReason = {
-  type: "restore",
+  type: 'restore',
   tooltip: defineMessage({
-    id: "servers.backup.restore.in-progress.tooltip",
-    defaultMessage: "Backup restore in progress",
+    id: 'servers.backup.restore.in-progress.tooltip',
+    defaultMessage: 'Backup restore in progress',
   }),
-} satisfies BackupInProgressReason;
+} satisfies BackupInProgressReason
 
 const CreateInProgressReason = {
-  type: "create",
+  type: 'create',
   tooltip: defineMessage({
-    id: "servers.backup.create.in-progress.tooltip",
-    defaultMessage: "Backup creation in progress",
+    id: 'servers.backup.create.in-progress.tooltip',
+    defaultMessage: 'Backup creation in progress',
   }),
-} satisfies BackupInProgressReason;
+} satisfies BackupInProgressReason
 
 const backupInProgress = computed(() => {
-  const backups = server.backups?.data;
+  const backups = server.backups?.data
   if (!backups) {
-    return undefined;
+    return undefined
   }
-  if (backups.find((backup: Backup) => backup?.task?.create?.state === "ongoing")) {
-    return CreateInProgressReason;
+  if (backups.find((backup: Backup) => backup?.task?.create?.state === 'ongoing')) {
+    return CreateInProgressReason
   }
-  if (backups.find((backup: Backup) => backup?.task?.restore?.state === "ongoing")) {
-    return RestoreInProgressReason;
+  if (backups.find((backup: Backup) => backup?.task?.restore?.state === 'ongoing')) {
+    return RestoreInProgressReason
   }
-  return undefined;
-});
+  return undefined
+})
 
 const nodeUnavailableDetails = computed(() => [
   {
-    label: "Server ID",
+    label: 'Server ID',
     value: server.serverId,
-    type: "inline" as const,
+    type: 'inline' as const,
   },
   {
-    label: "Node",
-    value: server.general?.datacenter ?? "Unknown",
-    type: "inline" as const,
+    label: 'Node',
+    value: server.general?.datacenter ?? 'Unknown',
+    type: 'inline' as const,
   },
   {
-    label: "Error message",
+    label: 'Error message',
     value: nodeAccessible.value
-      ? (server.moduleErrors?.general?.error.message ?? "Unknown")
-      : "Unable to reach node. Ping test failed.",
-    type: "block" as const,
+      ? (server.moduleErrors?.general?.error.message ?? 'Unknown')
+      : 'Unable to reach node. Ping test failed.',
+    type: 'block' as const,
   },
-]);
+])
 
 const suspendedDescription = computed(() => {
-  if (serverData.value?.suspension_reason === "cancelled") {
-    return "Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error.";
+  if (serverData.value?.suspension_reason === 'cancelled') {
+    return 'Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error.'
   }
   if (serverData.value?.suspension_reason) {
-    return `Your server has been suspended: ${serverData.value.suspension_reason}\nContact Modrinth Support if you believe this is an error.`;
+    return `Your server has been suspended: ${serverData.value.suspension_reason}\nContact Modrinth Support if you believe this is an error.`
   }
-  return "Your server has been suspended.\nContact Modrinth Support if you believe this is an error.";
-});
+  return 'Your server has been suspended.\nContact Modrinth Support if you believe this is an error.'
+})
 
 const generalErrorDetails = computed(() => [
   {
-    label: "Server ID",
+    label: 'Server ID',
     value: server.serverId,
-    type: "inline" as const,
+    type: 'inline' as const,
   },
   {
-    label: "Timestamp",
+    label: 'Timestamp',
     value: String(server.moduleErrors?.general?.timestamp),
-    type: "inline" as const,
+    type: 'inline' as const,
   },
   {
-    label: "Error Name",
+    label: 'Error Name',
     value: server.moduleErrors?.general?.error.name,
-    type: "inline" as const,
+    type: 'inline' as const,
   },
   {
-    label: "Error Message",
+    label: 'Error Message',
     value: server.moduleErrors?.general?.error.message,
-    type: "block" as const,
+    type: 'block' as const,
   },
   ...(server.moduleErrors?.general?.error.originalError
     ? [
         {
-          label: "Original Error",
+          label: 'Original Error',
           value: String(server.moduleErrors.general.error.originalError),
-          type: "hidden" as const,
+          type: 'hidden' as const,
         },
       ]
     : []),
   ...(server.moduleErrors?.general?.error.stack
     ? [
         {
-          label: "Stack Trace",
+          label: 'Stack Trace',
           value: server.moduleErrors.general.error.stack,
-          type: "hidden" as const,
+          type: 'hidden' as const,
         },
       ]
     : []),
-]);
+])
 
 const suspendedAction = computed(() => ({
-  label: "Go to billing settings",
-  onClick: () => router.push("/settings/billing"),
-  color: "brand" as const,
-}));
+  label: 'Go to billing settings',
+  onClick: () => router.push('/settings/billing'),
+  color: 'brand' as const,
+}))
 
 const generalErrorAction = computed(() => ({
-  label: "Go back to all servers",
-  onClick: () => router.push("/servers/manage"),
-  color: "brand" as const,
-}));
+  label: 'Go back to all servers',
+  onClick: () => router.push('/servers/manage'),
+  color: 'brand' as const,
+}))
 
 const nodeUnavailableAction = computed(() => ({
-  label: "Reload",
+  label: 'Reload',
   onClick: () => reloadNuxtApp(),
-  color: "brand" as const,
+  color: 'brand' as const,
   disabled: false,
-}));
+}))
 
 const copyServerDebugInfo = () => {
-  const debugInfo = `Server ID: ${serverData.value?.server_id}\nError: ${errorMessage.value}\nKind: ${serverData.value?.upstream?.kind}\nProject ID: ${serverData.value?.upstream?.project_id}\nVersion ID: ${serverData.value?.upstream?.version_id}\nLog: ${errorLog.value}`;
-  navigator.clipboard.writeText(debugInfo);
-  copied.value = true;
+  const debugInfo = `Server ID: ${serverData.value?.server_id}\nError: ${errorMessage.value}\nKind: ${serverData.value?.upstream?.kind}\nProject ID: ${serverData.value?.upstream?.project_id}\nVersion ID: ${serverData.value?.upstream?.version_id}\nLog: ${errorLog.value}`
+  navigator.clipboard.writeText(debugInfo)
+  copied.value = true
   setTimeout(() => {
-    copied.value = false;
-  }, 5000);
-};
+    copied.value = false
+  }, 5000)
+}
 
 const openInstallLog = () => {
   router.replace({
     path: `/servers/manage/${serverId}/files`,
     query: { ...route.query, editing: errorLogFile.value },
-  });
-};
+  })
+}
 
 const cleanup = () => {
-  isMounted.value = false;
+  isMounted.value = false
 
-  shutdown();
+  shutdown()
 
-  stopUptimeUpdates();
+  stopUptimeUpdates()
   if (reconnectInterval.value) {
-    clearInterval(reconnectInterval.value);
-    reconnectInterval.value = null;
+    clearInterval(reconnectInterval.value)
+    reconnectInterval.value = null
   }
 
   if (socket.value) {
-    socket.value.onopen = null;
-    socket.value.onmessage = null;
-    socket.value.onclose = null;
-    socket.value.onerror = null;
+    socket.value.onopen = null
+    socket.value.onmessage = null
+    socket.value.onclose = null
+    socket.value.onerror = null
 
     if (
       socket.value.readyState === WebSocket.OPEN ||
       socket.value.readyState === WebSocket.CONNECTING
     ) {
-      socket.value.close();
+      socket.value.close()
     }
-    socket.value = null;
+    socket.value = null
   }
 
-  isConnected.value = false;
-  isReconnecting.value = false;
-  isLoading.value = true;
+  isConnected.value = false
+  isReconnecting.value = false
+  isLoading.value = true
 
-  DOMPurify.removeHook("afterSanitizeAttributes");
-};
+  DOMPurify.removeHook('afterSanitizeAttributes')
+}
 
 async function dismissNotice(noticeId: number) {
   await useServersFetch(`servers/${serverId}/notices/${noticeId}/dismiss`, {
-    method: "POST",
+    method: 'POST',
   }).catch((err) => {
     app.$notify({
-      group: "main",
-      title: "Error dismissing notice",
+      group: 'main',
+      title: 'Error dismissing notice',
       text: err,
-      type: "error",
-    });
-  });
-  await server.refresh(["general"]);
+      type: 'error',
+    })
+  })
+  await server.refresh(['general'])
 }
 
-const nodeAccessible = ref(true);
+const nodeAccessible = ref(true)
 
 onMounted(() => {
-  isMounted.value = true;
-  if (server.general?.status === "suspended") {
-    isLoading.value = false;
-    return;
+  isMounted.value = true
+  if (server.general?.status === 'suspended') {
+    isLoading.value = false
+    return
   }
 
   server
     .testNodeReachability()
     .then((result) => {
-      nodeAccessible.value = result;
+      nodeAccessible.value = result
       if (!nodeAccessible.value) {
-        isLoading.value = false;
+        isLoading.value = false
       }
     })
     .catch((err) => {
-      console.error("Error testing node reachability:", err);
-      nodeAccessible.value = false;
-      isLoading.value = false;
-    });
+      console.error('Error testing node reachability:', err)
+      nodeAccessible.value = false
+      isLoading.value = false
+    })
 
   if (server.moduleErrors.general?.error) {
-    isLoading.value = false;
+    isLoading.value = false
   } else {
-    connectWebSocket();
+    connectWebSocket()
   }
 
   if (server.general?.flows?.intro && server.general?.project) {
-    server.general?.endIntro();
+    server.general?.endIntro()
   }
 
   if (username.value && email.value && userId.value && createdAt.value) {
-    const currentUser = auth.value?.user as any;
+    const currentUser = auth.value?.user as any
     const matches =
       username.value === currentUser?.username &&
       email.value === currentUser?.email &&
       userId.value === currentUser?.id &&
-      createdAt.value === Math.floor(new Date(currentUser?.created).getTime() / 1000);
+      createdAt.value === Math.floor(new Date(currentUser?.created).getTime() / 1000)
 
     if (matches) {
       Intercom({
@@ -1209,46 +1209,46 @@ onMounted(() => {
         name: username.value,
         email: email.value,
         created_at: createdAt.value,
-      });
+      })
     } else {
-      console.warn("[PYROSERVERS][INTERCOM] mismatch");
+      console.warn('[PYROSERVERS][INTERCOM] mismatch')
     }
   }
 
   DOMPurify.addHook(
-    "afterSanitizeAttributes",
+    'afterSanitizeAttributes',
     (node: {
-      tagName: string;
-      getAttribute: (arg0: string) => any;
-      setAttribute: (arg0: string, arg1: string) => void;
+      tagName: string
+      getAttribute: (arg0: string) => any
+      setAttribute: (arg0: string, arg1: string) => void
     }) => {
-      if (node.tagName === "A" && node.getAttribute("target")) {
-        node.setAttribute("rel", "noopener noreferrer");
+      if (node.tagName === 'A' && node.getAttribute('target')) {
+        node.setAttribute('rel', 'noopener noreferrer')
       }
     },
-  );
+  )
 
   if (surveyNotice.value) {
-    showSurvey();
+    showSurvey()
   }
-});
+})
 
 onUnmounted(() => {
-  cleanup();
-});
+  cleanup()
+})
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
 useHead({
   script: [
     {
-      src: "https://tally.so/widgets/embed.js",
+      src: 'https://tally.so/widgets/embed.js',
       defer: true,
     },
   ],
-});
+})
 </script>
 
 <style>
@@ -1278,7 +1278,7 @@ useHead({
   background-position: center;
   background-repeat: no-repeat;
   filter: blur(1rem);
-  content: "";
+  content: '';
   background-image:
     linear-gradient(
       to bottom,
diff --git a/apps/frontend/src/pages/servers/manage/[id]/backups.vue b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
index ae1923781..f15d416b9 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/backups.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/backups.vue
@@ -114,9 +114,9 @@
         @lock="
           () => {
             if (backup.locked) {
-              unlockBackup(backup.id);
+              unlockBackup(backup.id)
             } else {
-              lockBackup(backup.id);
+              lockBackup(backup.id)
             }
           }
         "
@@ -150,144 +150,144 @@
 </template>
 
 <script setup lang="ts">
-import { DownloadIcon, IssuesIcon,PlusIcon, SettingsIcon, SpinnerIcon } from "@modrinth/assets";
-import { ButtonStyled, TagItem } from "@modrinth/ui";
-import type { Backup } from "@modrinth/utils";
-import { useStorage } from "@vueuse/core";
-import { computed,ref } from "vue";
+import { DownloadIcon, IssuesIcon, PlusIcon, SettingsIcon, SpinnerIcon } from '@modrinth/assets'
+import { ButtonStyled, TagItem } from '@modrinth/ui'
+import type { Backup } from '@modrinth/utils'
+import { useStorage } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
-import BackupCreateModal from "~/components/ui/servers/BackupCreateModal.vue";
-import BackupDeleteModal from "~/components/ui/servers/BackupDeleteModal.vue";
-import BackupItem from "~/components/ui/servers/BackupItem.vue";
-import BackupRenameModal from "~/components/ui/servers/BackupRenameModal.vue";
-import BackupRestoreModal from "~/components/ui/servers/BackupRestoreModal.vue";
-import BackupSettingsModal from "~/components/ui/servers/BackupSettingsModal.vue";
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import BackupCreateModal from '~/components/ui/servers/BackupCreateModal.vue'
+import BackupDeleteModal from '~/components/ui/servers/BackupDeleteModal.vue'
+import BackupItem from '~/components/ui/servers/BackupItem.vue'
+import BackupRenameModal from '~/components/ui/servers/BackupRenameModal.vue'
+import BackupRestoreModal from '~/components/ui/servers/BackupRestoreModal.vue'
+import BackupSettingsModal from '~/components/ui/servers/BackupSettingsModal.vue'
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-  isServerRunning: boolean;
-}>();
+  server: ModrinthServer
+  isServerRunning: boolean
+}>()
 
-const route = useNativeRoute();
-const serverId = route.params.id;
+const route = useNativeRoute()
+const serverId = route.params.id
 
 const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
   backupWhileRunning: false,
-});
+})
 
-defineEmits(["onDownload"]);
+defineEmits(['onDownload'])
 
-const data = computed(() => props.server.general);
+const data = computed(() => props.server.general)
 const backups = computed(() => {
-  if (!props.server.backups?.data) return [];
+  if (!props.server.backups?.data) return []
 
   return [...props.server.backups.data].sort((a, b) => {
-    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
-  });
-});
+    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+  })
+})
 
 useHead({
-  title: `Backups - ${data.value?.name ?? "Server"} - Modrinth`,
-});
+  title: `Backups - ${data.value?.name ?? 'Server'} - Modrinth`,
+})
 
-const overTheTopDownloadAnimation = ref();
+const overTheTopDownloadAnimation = ref()
 
-const createBackupModal = ref<InstanceType<typeof BackupCreateModal>>();
-const renameBackupModal = ref<InstanceType<typeof BackupRenameModal>>();
-const restoreBackupModal = ref<InstanceType<typeof BackupRestoreModal>>();
-const deleteBackupModal = ref<InstanceType<typeof BackupDeleteModal>>();
-const backupSettingsModal = ref<InstanceType<typeof BackupSettingsModal>>();
+const createBackupModal = ref<InstanceType<typeof BackupCreateModal>>()
+const renameBackupModal = ref<InstanceType<typeof BackupRenameModal>>()
+const restoreBackupModal = ref<InstanceType<typeof BackupRestoreModal>>()
+const deleteBackupModal = ref<InstanceType<typeof BackupDeleteModal>>()
+const backupSettingsModal = ref<InstanceType<typeof BackupSettingsModal>>()
 
 const backupCreationDisabled = computed(() => {
   if (props.isServerRunning && !userPreferences.value.backupWhileRunning) {
-    return "Cannot create backup while server is running";
+    return 'Cannot create backup while server is running'
   }
   if (
     data.value?.used_backup_quota !== undefined &&
     data.value?.backup_quota !== undefined &&
     data.value?.used_backup_quota >= data.value?.backup_quota
   ) {
-    return `All ${data.value.backup_quota} of your backup slots are in use`;
+    return `All ${data.value.backup_quota} of your backup slots are in use`
   }
-  if (backups.value.some((backup) => backup.task?.create?.state === "ongoing")) {
-    return "A backup is already in progress";
+  if (backups.value.some((backup) => backup.task?.create?.state === 'ongoing')) {
+    return 'A backup is already in progress'
   }
-  if (props.server.general?.status === "installing") {
-    return "Cannot create backup while server is installing";
+  if (props.server.general?.status === 'installing') {
+    return 'Cannot create backup while server is installing'
   }
-  return undefined;
-});
+  return undefined
+})
 
 const showCreateModel = () => {
-  createBackupModal.value?.show();
-};
+  createBackupModal.value?.show()
+}
 
 const showbackupSettingsModal = () => {
-  backupSettingsModal.value?.show();
-};
+  backupSettingsModal.value?.show()
+}
 
 function triggerDownloadAnimation() {
-  overTheTopDownloadAnimation.value = true;
-  setTimeout(() => (overTheTopDownloadAnimation.value = false), 500);
+  overTheTopDownloadAnimation.value = true
+  setTimeout(() => (overTheTopDownloadAnimation.value = false), 500)
 }
 
 const prepareDownload = async (backupId: string) => {
   try {
-    await props.server.backups?.prepare(backupId);
+    await props.server.backups?.prepare(backupId)
   } catch (error) {
-    console.error("Failed to prepare download:", error);
-    addNotification({ type: "error", title: "Failed to prepare backup for download", text: error });
+    console.error('Failed to prepare download:', error)
+    addNotification({ type: 'error', title: 'Failed to prepare backup for download', text: error })
   }
-};
+}
 
 const lockBackup = async (backupId: string) => {
   try {
-    await props.server.backups?.lock(backupId);
-    await props.server.refresh(["backups"]);
+    await props.server.backups?.lock(backupId)
+    await props.server.refresh(['backups'])
   } catch (error) {
-    console.error("Failed to toggle lock:", error);
+    console.error('Failed to toggle lock:', error)
   }
-};
+}
 
 const unlockBackup = async (backupId: string) => {
   try {
-    await props.server.backups?.unlock(backupId);
-    await props.server.refresh(["backups"]);
+    await props.server.backups?.unlock(backupId)
+    await props.server.refresh(['backups'])
   } catch (error) {
-    console.error("Failed to toggle lock:", error);
+    console.error('Failed to toggle lock:', error)
   }
-};
+}
 
 const retryBackup = async (backupId: string) => {
   try {
-    await props.server.backups?.retry(backupId);
-    await props.server.refresh(["backups"]);
+    await props.server.backups?.retry(backupId)
+    await props.server.refresh(['backups'])
   } catch (error) {
-    console.error("Failed to retry backup:", error);
+    console.error('Failed to retry backup:', error)
   }
-};
+}
 
 async function deleteBackup(backup?: Backup) {
   if (!backup) {
     addNotification({
-      type: "error",
-      title: "Error deleting backup",
-      text: "Backup is null",
-    });
-    return;
+      type: 'error',
+      title: 'Error deleting backup',
+      text: 'Backup is null',
+    })
+    return
   }
 
   try {
-    await props.server.backups?.delete(backup.id);
-    await props.server.refresh();
+    await props.server.backups?.delete(backup.id)
+    await props.server.refresh()
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
+    const message = error instanceof Error ? error.message : String(error)
     addNotification({
-      type: "error",
-      title: "Error deleting backup",
+      type: 'error',
+      title: 'Error deleting backup',
       text: message,
-    });
+    })
   }
 }
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content.vue b/apps/frontend/src/pages/servers/manage/[id]/content.vue
index cce0468ca..86ab32a1f 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/content.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/content.vue
@@ -5,17 +5,17 @@
 </template>
 
 <script setup lang="ts">
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
-const route = useNativeRoute();
+const route = useNativeRoute()
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const data = computed(() => props.server.general);
+const data = computed(() => props.server.general)
 
 useHead({
-  title: `Content - ${data.value?.name ?? "Server"} - Modrinth`,
-});
+  title: `Content - ${data.value?.name ?? 'Server'} - Modrinth`,
+})
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
index f3cffbe4e..1e7bb0273 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
@@ -348,56 +348,56 @@ import {
   SearchIcon,
   TrashIcon,
   WrenchIcon,
-} from "@modrinth/assets";
-import { Avatar, ButtonStyled } from "@modrinth/ui";
-import type { Mod } from "@modrinth/utils";
-import { computed, onMounted, onUnmounted,ref, watch } from "vue";
+} from '@modrinth/assets'
+import { Avatar, ButtonStyled } from '@modrinth/ui'
+import type { Mod } from '@modrinth/utils'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
-import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
-import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
+import FilesUploadDragAndDrop from '~/components/ui/servers/FilesUploadDragAndDrop.vue'
+import FilesUploadDropdown from '~/components/ui/servers/FilesUploadDropdown.vue'
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
+import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
 const type = computed(() => {
-  const loader = props.server.general?.loader?.toLowerCase();
-  return loader === "paper" || loader === "purpur" ? "Plugin" : "Mod";
-});
+  const loader = props.server.general?.loader?.toLowerCase()
+  return loader === 'paper' || loader === 'purpur' ? 'Plugin' : 'Mod'
+})
 
 interface ContentItem extends Mod {
-  changing?: boolean;
+  changing?: boolean
 }
 
-const ITEM_HEIGHT = 72;
-const BUFFER_SIZE = 5;
+const ITEM_HEIGHT = 72
+const BUFFER_SIZE = 5
 
-const listContainer = ref<HTMLElement | null>(null);
-const windowScrollY = ref(0);
-const windowHeight = ref(0);
+const listContainer = ref<HTMLElement | null>(null)
+const windowScrollY = ref(0)
+const windowHeight = ref(0)
 
-const localMods = ref<ContentItem[]>([]);
+const localMods = ref<ContentItem[]>([])
 
-const searchInput = ref("");
-const modSearchInput = ref("");
-const filterMethod = ref("all");
+const searchInput = ref('')
+const modSearchInput = ref('')
+const filterMethod = ref('all')
 
-const uploadDropdownRef = ref();
+const uploadDropdownRef = ref()
 
-const versionEditModal = ref();
-const currentEditMod = ref<ContentItem | null>(null);
+const versionEditModal = ref()
+const currentEditMod = ref<ContentItem | null>(null)
 const invalidModal = computed(
   () => !props.server.general?.mc_version || !props.server.general?.loader,
-);
+)
 async function changeModVersion(event: string) {
-  const mod = currentEditMod.value;
+  const mod = currentEditMod.value
 
-  if (mod) mod.changing = true;
+  if (mod) mod.changing = true
 
   try {
-    versionEditModal.value.hide();
+    versionEditModal.value.hide()
 
     // This will be used instead once backend implementation is done
     // await props.server.content?.reinstall(
@@ -407,241 +407,241 @@ async function changeModVersion(event: string) {
     // );
 
     await props.server.content?.install(
-      type.value.toLowerCase() as "mod" | "plugin",
-      mod?.project_id || "",
+      type.value.toLowerCase() as 'mod' | 'plugin',
+      mod?.project_id || '',
       event,
-    );
+    )
 
-    await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod?.filename}`);
+    await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod?.filename}`)
 
-    await props.server.refresh(["general", "content"]);
+    await props.server.refresh(['general', 'content'])
   } catch (error) {
-    const errmsg = `Error changing mod version: ${error}`;
-    console.error(errmsg);
+    const errmsg = `Error changing mod version: ${error}`
+    console.error(errmsg)
     addNotification({
       text: errmsg,
-      type: "error",
-    });
-    return;
+      type: 'error',
+    })
+    return
   }
-  if (mod) mod.changing = false;
+  if (mod) mod.changing = false
 }
 
 function showVersionModal(mod: ContentItem) {
   if (invalidModal.value || !mod?.project_id || !mod?.filename) {
     const errmsg = invalidModal.value
-      ? "Data required for changing mod version was not found."
-      : `${!mod?.project_id ? "No mod project ID found" : "No mod filename found"} for ${friendlyModName(mod!)}`;
-    console.error(errmsg);
+      ? 'Data required for changing mod version was not found.'
+      : `${!mod?.project_id ? 'No mod project ID found' : 'No mod filename found'} for ${friendlyModName(mod!)}`
+    console.error(errmsg)
     addNotification({
       text: errmsg,
-      type: "error",
-    });
-    return;
+      type: 'error',
+    })
+    return
   }
 
-  currentEditMod.value = mod;
-  versionEditModal.value.show(mod);
+  currentEditMod.value = mod
+  versionEditModal.value.show(mod)
 }
 
 const handleDroppedFiles = (files: File[]) => {
   files.forEach((file) => {
-    uploadDropdownRef.value?.uploadFile(file);
-  });
-};
+    uploadDropdownRef.value?.uploadFile(file)
+  })
+}
 
 const initiateFileUpload = () => {
-  const input = document.createElement("input");
-  input.type = "file";
-  input.accept = acceptFileFromProjectType(type.value.toLowerCase());
-  input.multiple = true;
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = acceptFileFromProjectType(type.value.toLowerCase())
+  input.multiple = true
   input.onchange = () => {
     if (input.files) {
       Array.from(input.files).forEach((file) => {
-        uploadDropdownRef.value?.uploadFile(file);
-      });
+        uploadDropdownRef.value?.uploadFile(file)
+      })
     }
-  };
-  input.click();
-};
+  }
+  input.click()
+}
 
 const showAll = () => {
-  searchInput.value = "";
-  modSearchInput.value = "";
-  filterMethod.value = "all";
-};
+  searchInput.value = ''
+  modSearchInput.value = ''
+  filterMethod.value = 'all'
+}
 
 const filterMethodLabel = computed(() => {
   switch (filterMethod.value) {
-    case "disabled":
-      return "Only disabled";
-    case "enabled":
-      return "Only enabled";
+    case 'disabled':
+      return 'Only disabled'
+    case 'enabled':
+      return 'Only enabled'
     default:
-      return `All ${type.value.toLocaleLowerCase()}s`;
+      return `All ${type.value.toLocaleLowerCase()}s`
   }
-});
+})
 
 const totalHeight = computed(() => {
-  const itemsHeight = filteredMods.value.length * ITEM_HEIGHT;
-  return itemsHeight;
-});
+  const itemsHeight = filteredMods.value.length * ITEM_HEIGHT
+  return itemsHeight
+})
 
 const getVisibleRange = () => {
-  if (!listContainer.value) return { start: 0, end: 0 };
+  if (!listContainer.value) return { start: 0, end: 0 }
 
-  const containerTop = listContainer.value.getBoundingClientRect().top + window.scrollY;
-  const scrollTop = Math.max(0, windowScrollY.value - containerTop);
+  const containerTop = listContainer.value.getBoundingClientRect().top + window.scrollY
+  const scrollTop = Math.max(0, windowScrollY.value - containerTop)
 
-  const start = Math.floor(scrollTop / ITEM_HEIGHT);
-  const visibleCount = Math.ceil(windowHeight.value / ITEM_HEIGHT);
+  const start = Math.floor(scrollTop / ITEM_HEIGHT)
+  const visibleCount = Math.ceil(windowHeight.value / ITEM_HEIGHT)
 
   return {
     start: Math.max(0, start - BUFFER_SIZE),
     end: Math.min(filteredMods.value.length, start + visibleCount + BUFFER_SIZE * 2),
-  };
-};
+  }
+}
 
 const visibleTop = computed(() => {
-  const range = getVisibleRange();
-  return range.start * ITEM_HEIGHT;
-});
+  const range = getVisibleRange()
+  return range.start * ITEM_HEIGHT
+})
 
 const visibleItems = computed(() => {
-  const range = getVisibleRange();
-  const items = filteredMods.value;
+  const range = getVisibleRange()
+  const items = filteredMods.value
 
   return {
     items: items.slice(Math.max(0, range.start), Math.min(items.length, range.end)),
-  };
-});
+  }
+})
 
 const handleScroll = () => {
-  windowScrollY.value = window.scrollY;
-};
+  windowScrollY.value = window.scrollY
+}
 
 const handleResize = () => {
-  windowHeight.value = window.innerHeight;
-};
+  windowHeight.value = window.innerHeight
+}
 
 onMounted(() => {
-  windowHeight.value = window.innerHeight;
-  window.addEventListener("scroll", handleScroll, { passive: true });
-  window.addEventListener("resize", handleResize, { passive: true });
-  handleScroll();
-});
+  windowHeight.value = window.innerHeight
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  window.addEventListener('resize', handleResize, { passive: true })
+  handleScroll()
+})
 
 onUnmounted(() => {
-  window.removeEventListener("scroll", handleScroll);
-  window.removeEventListener("resize", handleResize);
-});
+  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener('resize', handleResize)
+})
 
 watch(
   () => props.server.content?.data,
   (newMods) => {
     if (newMods) {
-      localMods.value = [...newMods];
+      localMods.value = [...newMods]
     }
   },
   { immediate: true },
-);
+)
 
 const debounce = <T extends (...args: any[]) => void>(
   func: T,
   wait: number,
 ): ((...args: Parameters<T>) => void) => {
-  let timeout: ReturnType<typeof setTimeout>;
+  let timeout: ReturnType<typeof setTimeout>
   return function (...args: Parameters<T>): void {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func(...args), wait);
-  };
-};
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func(...args), wait)
+  }
+}
 
-const pyroContentSentinel = ref<HTMLElement | null>(null);
+const pyroContentSentinel = ref<HTMLElement | null>(null)
 const debouncedSearch = debounce(() => {
-  modSearchInput.value = searchInput.value;
+  modSearchInput.value = searchInput.value
 
   if (pyroContentSentinel.value) {
-    const sentinelRect = pyroContentSentinel.value.getBoundingClientRect();
+    const sentinelRect = pyroContentSentinel.value.getBoundingClientRect()
     if (sentinelRect.top < 0 || sentinelRect.bottom > window.innerHeight) {
       pyroContentSentinel.value.scrollIntoView({
         // behavior: "smooth",
-        block: "start",
-      });
+        block: 'start',
+      })
     }
   }
-}, 300);
+}, 300)
 
 function friendlyModName(mod: ContentItem) {
-  if (mod.name) return mod.name;
+  if (mod.name) return mod.name
 
   // remove .disabled if at the end of the filename
-  let cleanName = mod.filename.endsWith(".disabled") ? mod.filename.slice(0, -9) : mod.filename;
+  let cleanName = mod.filename.endsWith('.disabled') ? mod.filename.slice(0, -9) : mod.filename
 
   // remove everything after the last dot
-  const lastDotIndex = cleanName.lastIndexOf(".");
-  if (lastDotIndex !== -1) cleanName = cleanName.substring(0, lastDotIndex);
-  return cleanName;
+  const lastDotIndex = cleanName.lastIndexOf('.')
+  if (lastDotIndex !== -1) cleanName = cleanName.substring(0, lastDotIndex)
+  return cleanName
 }
 
 async function toggleMod(mod: ContentItem) {
-  mod.changing = true;
+  mod.changing = true
 
-  const originalFilename = mod.filename;
+  const originalFilename = mod.filename
   try {
-    const newFilename = mod.filename.endsWith(".disabled")
+    const newFilename = mod.filename.endsWith('.disabled')
       ? mod.filename.slice(0, -9)
-      : `${mod.filename}.disabled`;
+      : `${mod.filename}.disabled`
 
-    const folder = `${type.value.toLocaleLowerCase()}s`;
-    const sourcePath = `/${folder}/${mod.filename}`;
-    const destinationPath = `/${folder}/${newFilename}`;
+    const folder = `${type.value.toLocaleLowerCase()}s`
+    const sourcePath = `/${folder}/${mod.filename}`
+    const destinationPath = `/${folder}/${newFilename}`
 
-    mod.disabled = newFilename.endsWith(".disabled");
-    mod.filename = newFilename;
+    mod.disabled = newFilename.endsWith('.disabled')
+    mod.filename = newFilename
 
-    await props.server.fs?.moveFileOrFolder(sourcePath, destinationPath);
+    await props.server.fs?.moveFileOrFolder(sourcePath, destinationPath)
 
-    await props.server.refresh(["general", "content"]);
+    await props.server.refresh(['general', 'content'])
   } catch (error) {
-    mod.filename = originalFilename;
-    mod.disabled = originalFilename.endsWith(".disabled");
+    mod.filename = originalFilename
+    mod.disabled = originalFilename.endsWith('.disabled')
 
-    console.error("Error toggling mod:", error);
+    console.error('Error toggling mod:', error)
     addNotification({
       text: `Something went wrong toggling ${friendlyModName(mod)}`,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
 
-  mod.changing = false;
+  mod.changing = false
 }
 
 async function removeMod(mod: ContentItem) {
-  mod.changing = true;
+  mod.changing = true
 
   try {
-    await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod.filename}`);
-    await props.server.refresh(["general", "content"]);
+    await props.server.content?.remove(`/${type.value.toLowerCase()}s/${mod.filename}`)
+    await props.server.refresh(['general', 'content'])
   } catch (error) {
-    console.error("Error removing mod:", error);
+    console.error('Error removing mod:', error)
 
     addNotification({
       text: `couldn't remove ${mod.name || mod.filename}`,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
 
-  mod.changing = false;
+  mod.changing = false
 }
 
 const hasMods = computed(() => {
-  return localMods.value?.length > 0;
-});
+  return localMods.value?.length > 0
+})
 
 const hasFilteredMods = computed(() => {
-  return filteredMods.value?.length > 0;
-});
+  return filteredMods.value?.length > 0
+})
 
 const filteredMods = computed(() => {
   const mods = modSearchInput.value.trim()
@@ -650,23 +650,23 @@ const filteredMods = computed(() => {
           mod.name?.toLowerCase().includes(modSearchInput.value.toLowerCase()) ||
           mod.filename.toLowerCase().includes(modSearchInput.value.toLowerCase()),
       )
-    : localMods.value;
+    : localMods.value
 
   const statusFilteredMods = (() => {
     switch (filterMethod.value) {
-      case "disabled":
-        return mods.filter((mod) => mod.disabled);
-      case "enabled":
-        return mods.filter((mod) => !mod.disabled);
+      case 'disabled':
+        return mods.filter((mod) => mod.disabled)
+      case 'enabled':
+        return mods.filter((mod) => !mod.disabled)
       default:
-        return mods;
+        return mods
     }
-  })();
+  })()
 
   return statusFilteredMods.sort((a, b) => {
-    return friendlyModName(a).localeCompare(friendlyModName(b));
-  });
-});
+    return friendlyModName(a).localeCompare(friendlyModName(b))
+  })
+})
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/files.vue b/apps/frontend/src/pages/servers/manage/[id]/files.vue
index 4b360dd02..5777138ed 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/files.vue
@@ -61,7 +61,7 @@
             </div>
             <div class="flex flex-wrap gap-x-4 gap-y-1 md:contents">
               <div class="flex items-center text-wrap break-all text-sm font-bold text-contrast">
-                Extracting {{ op.src.includes("https://") ? "modpack from URL" : op.src }}
+                Extracting {{ op.src.includes('https://') ? 'modpack from URL' : op.src }}
               </div>
               <span
                 class="flex items-center gap-2 text-sm font-semibold"
@@ -100,9 +100,9 @@
                 <div class="text-xs font-semibold text-contrast opacity-80">
                   <span :class="{ invisible: 'current_file' in op && !op.current_file }">
                     {{
-                      "current_file" in op
-                        ? (op.current_file?.split("/")?.pop() ?? "unknown")
-                        : "unknown"
+                      'current_file' in op
+                        ? (op.current_file?.split('/')?.pop() ?? 'unknown')
+                        : 'unknown'
                     }}
                   </span>
                 </div>
@@ -124,7 +124,7 @@
                   class="text-xs text-secondary opacity-80"
                   :class="{ invisible: 'bytes_processed' in op && !op.bytes_processed }"
                 >
-                  {{ "bytes_processed" in op ? formatBytes(op.bytes_processed) : "0 B" }} extracted
+                  {{ 'bytes_processed' in op ? formatBytes(op.bytes_processed) : '0 B' }} extracted
                 </div>
               </div>
             </div>
@@ -141,7 +141,7 @@
                         ? server.fs?.modifyOp(op.id, 'dismiss')
                         : 'id' in op
                           ? server.fs?.modifyOp(op.id, 'cancel')
-                          : () => {};
+                          : () => {}
                     }
                   "
                 >
@@ -185,7 +185,7 @@
             v-model:value="fileContent"
             :lang="
               (() => {
-                const ext = editingFile?.name?.split('.')?.pop()?.toLowerCase() ?? '';
+                const ext = editingFile?.name?.split('.')?.pop()?.toLowerCase() ?? ''
                 return ext === 'json'
                   ? 'json'
                   : ext === 'toml'
@@ -194,7 +194,7 @@
                       ? 'sh'
                       : ['yml', 'yaml'].includes(ext)
                         ? 'yaml'
-                        : 'text';
+                        : 'text'
               })()
             "
             theme="one_dark"
@@ -274,137 +274,137 @@ import {
   UnknownIcon,
   UploadIcon,
   XIcon,
-} from "@modrinth/assets";
-import { ButtonStyled, ProgressBar } from "@modrinth/ui";
-import type { DirectoryItem, DirectoryResponse,FilesystemOp, FSQueuedOp } from "@modrinth/utils";
-import { formatBytes, ModrinthServersFetchError } from "@modrinth/utils";
-import { useInfiniteScroll } from "@vueuse/core";
-import { computed } from "vue";
+} from '@modrinth/assets'
+import { ButtonStyled, ProgressBar } from '@modrinth/ui'
+import type { DirectoryItem, DirectoryResponse, FilesystemOp, FSQueuedOp } from '@modrinth/utils'
+import { formatBytes, ModrinthServersFetchError } from '@modrinth/utils'
+import { useInfiniteScroll } from '@vueuse/core'
+import { computed } from 'vue'
 
-import FilesUploadConflictModal from "~/components/ui/servers/FilesUploadConflictModal.vue";
-import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
-import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
-import FilesUploadZipUrlModal from "~/components/ui/servers/FilesUploadZipUrlModal.vue";
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
-import { handleError } from "~/composables/servers/modrinth-servers.ts";
+import FilesUploadConflictModal from '~/components/ui/servers/FilesUploadConflictModal.vue'
+import FilesUploadDragAndDrop from '~/components/ui/servers/FilesUploadDragAndDrop.vue'
+import FilesUploadDropdown from '~/components/ui/servers/FilesUploadDropdown.vue'
+import FilesUploadZipUrlModal from '~/components/ui/servers/FilesUploadZipUrlModal.vue'
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
+import { handleError } from '~/composables/servers/modrinth-servers.ts'
 
-const flags = useFeatureFlags();
-const baseId = useId();
+const flags = useFeatureFlags()
+const baseId = useId()
 
 interface BaseOperation {
-  type: "move" | "rename";
-  itemType: string;
-  fileName: string;
+  type: 'move' | 'rename'
+  itemType: string
+  fileName: string
 }
 
 interface MoveOperation extends BaseOperation {
-  type: "move";
-  sourcePath: string;
-  destinationPath: string;
+  type: 'move'
+  sourcePath: string
+  destinationPath: string
 }
 
 interface RenameOperation extends BaseOperation {
-  type: "rename";
-  path: string;
-  oldName: string;
-  newName: string;
+  type: 'rename'
+  path: string
+  oldName: string
+  newName: string
 }
 
-type Operation = MoveOperation | RenameOperation;
+type Operation = MoveOperation | RenameOperation
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const modulesLoaded = inject<Promise<void>>("modulesLoaded");
+const modulesLoaded = inject<Promise<void>>('modulesLoaded')
 
-const route = useRoute();
-const router = useRouter();
+const route = useRoute()
+const router = useRouter()
 
-const VAceEditor = ref();
-const mainContent = ref<HTMLElement | null>(null);
-const scrollContainer = ref<HTMLElement | null>(null);
-const contextMenu = ref();
-const operationHistory = ref<Operation[]>([]);
-const redoStack = ref<Operation[]>([]);
+const VAceEditor = ref()
+const mainContent = ref<HTMLElement | null>(null)
+const scrollContainer = ref<HTMLElement | null>(null)
+const contextMenu = ref()
+const operationHistory = ref<Operation[]>([])
+const redoStack = ref<Operation[]>([])
 
-const searchQuery = ref("");
-const sortMethod = ref("name");
-const sortDesc = ref(false);
+const searchQuery = ref('')
+const sortMethod = ref('name')
+const sortDesc = ref(false)
 
-const maxResults = 100;
-const currentPage = ref(1);
+const maxResults = 100
+const currentPage = ref(1)
 
-const currentPath = ref(typeof route.query.path === "string" ? route.query.path : "");
+const currentPath = ref(typeof route.query.path === 'string' ? route.query.path : '')
 
-const isAtBottom = ref(false);
-const contextMenuInfo = ref<any>({ item: null, x: 0, y: 0 });
+const isAtBottom = ref(false)
+const contextMenuInfo = ref<any>({ item: null, x: 0, y: 0 })
 
-const createItemModal = ref();
-const renameItemModal = ref();
-const moveItemModal = ref();
-const deleteItemModal = ref();
-const uploadZipModal = ref();
-const uploadConflictModal = ref();
+const createItemModal = ref()
+const renameItemModal = ref()
+const moveItemModal = ref()
+const deleteItemModal = ref()
+const uploadZipModal = ref()
+const uploadConflictModal = ref()
 
-const newItemType = ref<"file" | "directory">("file");
-const selectedItem = ref<any>(null);
-const fileContent = ref("");
+const newItemType = ref<'file' | 'directory'>('file')
+const selectedItem = ref<any>(null)
+const fileContent = ref('')
 
-const isEditing = ref(false);
-const editingFile = ref<any>(null);
-const closeEditor = ref(false);
-const isEditingImage = ref(false);
-const imagePreview = ref();
+const isEditing = ref(false)
+const editingFile = ref<any>(null)
+const closeEditor = ref(false)
+const isEditingImage = ref(false)
+const imagePreview = ref()
 
-const isDragging = ref(false);
+const isDragging = ref(false)
 
-const uploadDropdownRef = ref();
+const uploadDropdownRef = ref()
 
-const data = computed(() => props.server.general);
+const data = computed(() => props.server.general)
 
-const viewFilter = ref("all");
+const viewFilter = ref('all')
 
 const handleFilter = (type: string) => {
-  viewFilter.value = type;
-  sortMethod.value = "name";
-  sortDesc.value = false;
-};
+  viewFilter.value = type
+  sortMethod.value = 'name'
+  sortDesc.value = false
+}
 
 useHead({
-  title: computed(() => `Files - ${data.value?.name ?? "Server"} - Modrinth`),
-});
+  title: computed(() => `Files - ${data.value?.name ?? 'Server'} - Modrinth`),
+})
 
 const fetchDirectoryContents = async (): Promise<DirectoryResponse> => {
-  await modulesLoaded;
+  await modulesLoaded
 
-  const path = Array.isArray(currentPath.value) ? currentPath.value.join("") : currentPath.value;
+  const path = Array.isArray(currentPath.value) ? currentPath.value.join('') : currentPath.value
   try {
-    const data = await props.server.fs?.listDirContents(path, currentPage.value, maxResults);
+    const data = await props.server.fs?.listDirContents(path, currentPage.value, maxResults)
 
     if (!data || !data.items) {
-      throw new Error("Invalid data structure received from server.");
+      throw new Error('Invalid data structure received from server.')
     }
 
     if (currentPage.value === 1) {
       return {
         items: applyDefaultSort(data.items),
         total: data.total,
-      };
+      }
     }
 
     return {
       items: [...(directoryData.value?.items || []), ...applyDefaultSort(data.items)],
       total: data.total,
-    };
-  } catch (error) {
-    console.error("Error fetching directory contents:", error);
-    if (error instanceof ModrinthServersFetchError && error.statusCode === 400) {
-      return directoryData.value || { items: [], total: 0 };
     }
-    throw error;
+  } catch (error) {
+    console.error('Error fetching directory contents:', error)
+    if (error instanceof ModrinthServersFetchError && error.statusCode === 400) {
+      return directoryData.value || { items: [], total: 0 }
+    }
+    throw error
   }
-};
+}
 
 const {
   data: directoryData,
@@ -415,587 +415,585 @@ const {
   watch: [],
   default: () => ({ items: [], total: 0 }),
   immediate: true,
-});
+})
 
-const isLoading = computed(() => status.value === "pending");
+const isLoading = computed(() => status.value === 'pending')
 
-const items = computed(() => directoryData.value?.items || []);
+const items = computed(() => directoryData.value?.items || [])
 
 const refreshList = () => {
-  currentPage.value = 1;
-  refreshData();
-  reset();
-};
+  currentPage.value = 1
+  refreshData()
+  reset()
+}
 
 const undoLastOperation = async () => {
-  const lastOperation = operationHistory.value.pop();
-  if (!lastOperation) return;
+  const lastOperation = operationHistory.value.pop()
+  if (!lastOperation) return
 
   try {
     switch (lastOperation.type) {
-      case "move":
+      case 'move':
         await props.server.fs?.moveFileOrFolder(
-          `${lastOperation.destinationPath}/${lastOperation.fileName}`.replace("//", "/"),
-          `${lastOperation.sourcePath}/${lastOperation.fileName}`.replace("//", "/"),
-        );
-        break;
-      case "rename":
+          `${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
+          `${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
+        )
+        break
+      case 'rename':
         await props.server.fs?.renameFileOrFolder(
-          `${lastOperation.path}/${lastOperation.newName}`.replace("//", "/"),
+          `${lastOperation.path}/${lastOperation.newName}`.replace('//', '/'),
           lastOperation.oldName,
-        );
-        break;
+        )
+        break
     }
 
-    redoStack.value.push(lastOperation);
+    redoStack.value.push(lastOperation)
 
-    refreshList();
+    refreshList()
     addNotification({
-      group: "files",
-      title: `${lastOperation.type === "move" ? "Move" : "Rename"} undone`,
-      text: `${lastOperation.fileName} has been restored to its original ${lastOperation.type === "move" ? "location" : "name"}`,
-      type: "success",
-    });
+      group: 'files',
+      title: `${lastOperation.type === 'move' ? 'Move' : 'Rename'} undone`,
+      text: `${lastOperation.fileName} has been restored to its original ${lastOperation.type === 'move' ? 'location' : 'name'}`,
+      type: 'success',
+    })
   } catch (error) {
-    console.error(`Error undoing ${lastOperation.type}:`, error);
+    console.error(`Error undoing ${lastOperation.type}:`, error)
     addNotification({
-      group: "files",
-      title: "Undo failed",
+      group: 'files',
+      title: 'Undo failed',
       text: `Failed to undo the last ${lastOperation.type} operation`,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-};
+}
 
 const redoLastOperation = async () => {
-  const lastOperation = redoStack.value.pop();
-  if (!lastOperation) return;
+  const lastOperation = redoStack.value.pop()
+  if (!lastOperation) return
 
   try {
     switch (lastOperation.type) {
-      case "move":
+      case 'move':
         await props.server.fs?.moveFileOrFolder(
-          `${lastOperation.sourcePath}/${lastOperation.fileName}`.replace("//", "/"),
-          `${lastOperation.destinationPath}/${lastOperation.fileName}`.replace("//", "/"),
-        );
-        break;
-      case "rename":
+          `${lastOperation.sourcePath}/${lastOperation.fileName}`.replace('//', '/'),
+          `${lastOperation.destinationPath}/${lastOperation.fileName}`.replace('//', '/'),
+        )
+        break
+      case 'rename':
         await props.server.fs?.renameFileOrFolder(
-          `${lastOperation.path}/${lastOperation.oldName}`.replace("//", "/"),
+          `${lastOperation.path}/${lastOperation.oldName}`.replace('//', '/'),
           lastOperation.newName,
-        );
-        break;
+        )
+        break
     }
 
-    operationHistory.value.push(lastOperation);
+    operationHistory.value.push(lastOperation)
 
-    refreshList();
+    refreshList()
     addNotification({
-      group: "files",
-      title: `${lastOperation.type === "move" ? "Move" : "Rename"} redone`,
-      text: `${lastOperation.fileName} has been ${lastOperation.type === "move" ? "moved" : "renamed"} again`,
-      type: "success",
-    });
+      group: 'files',
+      title: `${lastOperation.type === 'move' ? 'Move' : 'Rename'} redone`,
+      text: `${lastOperation.fileName} has been ${lastOperation.type === 'move' ? 'moved' : 'renamed'} again`,
+      type: 'success',
+    })
   } catch (error) {
-    console.error(`Error redoing ${lastOperation.type}:`, error);
+    console.error(`Error redoing ${lastOperation.type}:`, error)
     addNotification({
-      group: "files",
-      title: "Redo failed",
+      group: 'files',
+      title: 'Redo failed',
       text: `Failed to redo the last ${lastOperation.type} operation`,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-};
+}
 
 const handleCreateNewItem = async (name: string) => {
   try {
-    const path = `${currentPath.value}/${name}`.replace("//", "/");
-    await props.server.fs?.createFileOrFolder(path, newItemType.value);
+    const path = `${currentPath.value}/${name}`.replace('//', '/')
+    await props.server.fs?.createFileOrFolder(path, newItemType.value)
 
-    refreshList();
+    refreshList()
 
     addNotification({
-      group: "files",
-      title: `${newItemType.value === "directory" ? "Folder" : "File"} created`,
-      text: `New ${newItemType.value === "directory" ? "folder" : "file"} ${name} has been created.`,
-      type: "success",
-    });
+      group: 'files',
+      title: `${newItemType.value === 'directory' ? 'Folder' : 'File'} created`,
+      text: `New ${newItemType.value === 'directory' ? 'folder' : 'file'} ${name} has been created.`,
+      type: 'success',
+    })
   } catch (error) {
-    handleCreateError(error);
+    handleCreateError(error)
   }
-};
+}
 
 const handleRenameItem = async (newName: string) => {
   try {
-    const path = `${currentPath.value}/${selectedItem.value.name}`.replace("//", "/");
-    await props.server.fs?.renameFileOrFolder(path, newName);
+    const path = `${currentPath.value}/${selectedItem.value.name}`.replace('//', '/')
+    await props.server.fs?.renameFileOrFolder(path, newName)
 
-    redoStack.value = [];
+    redoStack.value = []
     operationHistory.value.push({
-      type: "rename",
+      type: 'rename',
       itemType: selectedItem.value.type,
       fileName: selectedItem.value.name,
       path: currentPath.value,
       oldName: selectedItem.value.name,
       newName,
-    });
+    })
 
-    refreshList();
+    refreshList()
 
     if (closeEditor.value) {
-      await props.server.refresh();
-      isEditing.value = false;
-      editingFile.value = null;
-      closeEditor.value = false;
-      router.push({ query: { ...route.query, path: currentPath.value } });
+      await props.server.refresh()
+      isEditing.value = false
+      editingFile.value = null
+      closeEditor.value = false
+      router.push({ query: { ...route.query, path: currentPath.value } })
     }
 
     addNotification({
-      group: "files",
-      title: `${selectedItem.value.type === "directory" ? "Folder" : "File"} renamed`,
+      group: 'files',
+      title: `${selectedItem.value.type === 'directory' ? 'Folder' : 'File'} renamed`,
       text: `${selectedItem.value.name} has been renamed to ${newName}`,
-      type: "success",
-    });
+      type: 'success',
+    })
   } catch (error) {
-    console.error("Error renaming item:", error);
+    console.error('Error renaming item:', error)
     if (error instanceof ModrinthServersFetchError) {
       if (error.statusCode === 400) {
         addNotification({
-          group: "files",
-          title: "Could not rename",
+          group: 'files',
+          title: 'Could not rename',
           text: `An item named "${newName}" already exists in this location`,
-          type: "error",
-        });
-        return;
+          type: 'error',
+        })
+        return
       }
       addNotification({
-        group: "files",
-        title: "Could not rename item",
-        text: "An unexpected error occurred",
-        type: "error",
-      });
+        group: 'files',
+        title: 'Could not rename item',
+        text: 'An unexpected error occurred',
+        type: 'error',
+      })
     }
   }
-};
+}
 
 const extractItem = async (path: string) => {
   try {
-    await props.server.fs?.extractFile(path, true, false);
+    await props.server.fs?.extractFile(path, true, false)
   } catch (error) {
-    console.error("Error extracting item:", error);
-    handleError(error);
+    console.error('Error extracting item:', error)
+    handleError(error)
   }
-};
+}
 
 const handleExtractItem = async (item: { name: string; type: string; path: string }) => {
   try {
-    const dry = await props.server.fs?.extractFile(item.path, true, true, true);
+    const dry = await props.server.fs?.extractFile(item.path, true, true, true)
     if (dry) {
       if (dry.conflicting_files.length === 0) {
-        await extractItem(item.path);
+        await extractItem(item.path)
       } else {
-        uploadConflictModal.value.show(item.path, dry.conflicting_files);
+        uploadConflictModal.value.show(item.path, dry.conflicting_files)
       }
     } else {
-      handleError(new Error("Error running dry run"));
+      handleError(new Error('Error running dry run'))
     }
   } catch (error) {
-    console.error("Error extracting item:", error);
-    handleError(error);
+    console.error('Error extracting item:', error)
+    handleError(error)
   }
-};
+}
 
 const handleMoveItem = async (destination: string) => {
   try {
-    const itemType = selectedItem.value.type;
-    const sourcePath = currentPath.value;
-    const newPath = `${destination}/${selectedItem.value.name}`.replace("//", "/");
+    const itemType = selectedItem.value.type
+    const sourcePath = currentPath.value
+    const newPath = `${destination}/${selectedItem.value.name}`.replace('//', '/')
 
     await props.server.fs?.moveFileOrFolder(
-      `${sourcePath}/${selectedItem.value.name}`.replace("//", "/"),
+      `${sourcePath}/${selectedItem.value.name}`.replace('//', '/'),
       newPath,
-    );
+    )
 
-    redoStack.value = [];
+    redoStack.value = []
     operationHistory.value.push({
-      type: "move",
+      type: 'move',
       sourcePath,
       destinationPath: destination,
       fileName: selectedItem.value.name,
       itemType,
-    });
+    })
 
-    refreshList();
+    refreshList()
     addNotification({
-      group: "files",
-      title: `${itemType === "directory" ? "Folder" : "File"} moved`,
+      group: 'files',
+      title: `${itemType === 'directory' ? 'Folder' : 'File'} moved`,
       text: `${selectedItem.value.name} has been moved to ${newPath}`,
-      type: "success",
-    });
+      type: 'success',
+    })
   } catch (error) {
-    console.error("Error moving item:", error);
+    console.error('Error moving item:', error)
   }
-};
+}
 
 const handleDirectMove = async (moveData: {
-  name: string;
-  type: string;
-  path: string;
-  destination: string;
+  name: string
+  type: string
+  path: string
+  destination: string
 }) => {
   try {
-    const newPath = `${moveData.destination}/${moveData.name}`.replace("//", "/");
-    const sourcePath = moveData.path.substring(0, moveData.path.lastIndexOf("/"));
+    const newPath = `${moveData.destination}/${moveData.name}`.replace('//', '/')
+    const sourcePath = moveData.path.substring(0, moveData.path.lastIndexOf('/'))
 
-    await props.server.fs?.moveFileOrFolder(moveData.path, newPath);
+    await props.server.fs?.moveFileOrFolder(moveData.path, newPath)
 
-    redoStack.value = [];
+    redoStack.value = []
     operationHistory.value.push({
-      type: "move",
+      type: 'move',
       sourcePath,
       destinationPath: moveData.destination,
       fileName: moveData.name,
       itemType: moveData.type,
-    });
+    })
 
-    refreshList();
+    refreshList()
     addNotification({
-      group: "files",
-      title: `${moveData.type === "directory" ? "Folder" : "File"} moved`,
+      group: 'files',
+      title: `${moveData.type === 'directory' ? 'Folder' : 'File'} moved`,
       text: `${moveData.name} has been moved to ${newPath}`,
-      type: "success",
-    });
+      type: 'success',
+    })
   } catch (error) {
-    console.error("Error moving item:", error);
+    console.error('Error moving item:', error)
   }
-};
+}
 
 const handleDeleteItem = async () => {
   try {
-    const path = `${currentPath.value}/${selectedItem.value.name}`.replace("//", "/");
-    await props.server.fs?.deleteFileOrFolder(path, selectedItem.value.type === "directory");
+    const path = `${currentPath.value}/${selectedItem.value.name}`.replace('//', '/')
+    await props.server.fs?.deleteFileOrFolder(path, selectedItem.value.type === 'directory')
 
-    refreshList();
+    refreshList()
     addNotification({
-      group: "files",
-      title: "File deleted",
-      text: "Your file has been deleted.",
-      type: "success",
-    });
+      group: 'files',
+      title: 'File deleted',
+      text: 'Your file has been deleted.',
+      type: 'success',
+    })
   } catch (error) {
-    console.error("Error deleting item:", error);
+    console.error('Error deleting item:', error)
   }
-};
+}
 
-const showCreateModal = (type: "file" | "directory") => {
-  newItemType.value = type;
-  createItemModal.value?.show();
-};
+const showCreateModal = (type: 'file' | 'directory') => {
+  newItemType.value = type
+  createItemModal.value?.show()
+}
 
 const showUnzipFromUrlModal = (cf: boolean) => {
-  uploadZipModal.value?.show(cf);
-};
+  uploadZipModal.value?.show(cf)
+}
 
 const showRenameModal = (item: any) => {
-  selectedItem.value = item;
-  renameItemModal.value?.show(item);
-  contextMenuInfo.value.item = null;
-};
+  selectedItem.value = item
+  renameItemModal.value?.show(item)
+  contextMenuInfo.value.item = null
+}
 
 const showMoveModal = (item: any) => {
-  selectedItem.value = item;
-  moveItemModal.value?.show();
-  contextMenuInfo.value.item = null;
-};
+  selectedItem.value = item
+  moveItemModal.value?.show()
+  contextMenuInfo.value.item = null
+}
 
 const showDeleteModal = (item: any) => {
-  selectedItem.value = item;
-  deleteItemModal.value?.show();
-  contextMenuInfo.value.item = null;
-};
+  selectedItem.value = item
+  deleteItemModal.value?.show()
+  contextMenuInfo.value.item = null
+}
 
 const handleCreateError = (error: any) => {
-  console.error("Error creating item:", error);
+  console.error('Error creating item:', error)
   if (error instanceof ModrinthServersFetchError) {
     if (error.statusCode === 400) {
       addNotification({
-        group: "files",
-        title: "Error creating item",
-        text: "Invalid file",
-        type: "error",
-      });
+        group: 'files',
+        title: 'Error creating item',
+        text: 'Invalid file',
+        type: 'error',
+      })
     } else if (error.statusCode === 500) {
       addNotification({
-        group: "files",
-        title: "Error creating item",
-        text: "Something went wrong. The file may already exist.",
-        type: "error",
-      });
+        group: 'files',
+        title: 'Error creating item',
+        text: 'Something went wrong. The file may already exist.',
+        type: 'error',
+      })
     }
   }
-};
+}
 
 const applyDefaultSort = (items: DirectoryItem[]) => {
   return items.sort((a: any, b: any) => {
-    if (a.type === "directory" && b.type !== "directory") return -1;
-    if (a.type !== "directory" && b.type === "directory") return 1;
+    if (a.type === 'directory' && b.type !== 'directory') return -1
+    if (a.type !== 'directory' && b.type === 'directory') return 1
 
-    return a.name.localeCompare(b.name);
-  });
-};
+    return a.name.localeCompare(b.name)
+  })
+}
 
 const handleSort = (field: string) => {
   if (sortMethod.value === field) {
-    sortDesc.value = !sortDesc.value;
+    sortDesc.value = !sortDesc.value
   } else {
-    sortMethod.value = field;
-    sortDesc.value = false;
+    sortMethod.value = field
+    sortDesc.value = false
   }
-};
+}
 
 const applySort = (items: DirectoryItem[]) => {
-  let result = [...items];
+  let result = [...items]
 
   switch (viewFilter.value) {
-    case "filesOnly":
-      result = result.filter((item) => item.type !== "directory");
-      break;
-    case "foldersOnly":
-      result = result.filter((item) => item.type === "directory");
-      break;
+    case 'filesOnly':
+      result = result.filter((item) => item.type !== 'directory')
+      break
+    case 'foldersOnly':
+      result = result.filter((item) => item.type === 'directory')
+      break
   }
 
   const compareItems = (a: DirectoryItem, b: DirectoryItem) => {
-    if (viewFilter.value === "all") {
-      if (a.type === "directory" && b.type !== "directory") return -1;
-      if (a.type !== "directory" && b.type === "directory") return 1;
+    if (viewFilter.value === 'all') {
+      if (a.type === 'directory' && b.type !== 'directory') return -1
+      if (a.type !== 'directory' && b.type === 'directory') return 1
     }
 
     switch (sortMethod.value) {
-      case "modified":
+      case 'modified':
         return sortDesc.value
           ? new Date(a.modified).getTime() - new Date(b.modified).getTime()
-          : new Date(b.modified).getTime() - new Date(a.modified).getTime();
-      case "created":
+          : new Date(b.modified).getTime() - new Date(a.modified).getTime()
+      case 'created':
         return sortDesc.value
           ? new Date(a.created).getTime() - new Date(b.created).getTime()
-          : new Date(b.created).getTime() - new Date(a.created).getTime();
+          : new Date(b.created).getTime() - new Date(a.created).getTime()
       default:
-        return sortDesc.value ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name);
+        return sortDesc.value ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name)
     }
-  };
-
-  result.sort(compareItems);
-  return result;
-};
-
-const filteredItems = computed(() => {
-  let result = [...items.value];
-
-  if (searchQuery.value) {
-    const query = searchQuery.value.toLowerCase();
-    result = result.filter((item) => item.name.toLowerCase().includes(query));
   }
 
-  return applySort(result);
-});
+  result.sort(compareItems)
+  return result
+}
+
+const filteredItems = computed(() => {
+  let result = [...items.value]
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter((item) => item.name.toLowerCase().includes(query))
+  }
+
+  return applySort(result)
+})
 
 const { reset } = useInfiniteScroll(
   scrollContainer,
   async () => {
-    if (status.value === "pending") return;
+    if (status.value === 'pending') return
 
     try {
-      const totalPages = directoryData.value?.total || 0;
+      const totalPages = directoryData.value?.total || 0
 
       if (currentPage.value < totalPages) {
-        currentPage.value++;
-        const newData = await fetchDirectoryContents();
+        currentPage.value++
+        const newData = await fetchDirectoryContents()
 
         if (newData && newData.items) {
           directoryData.value = {
             items: [...directoryData.value.items, ...newData.items],
             total: newData.total,
-          };
+          }
         }
       }
     } catch (error) {
-      console.error("Error during infinite scroll:", error);
+      console.error('Error during infinite scroll:', error)
     }
   },
   { distance: 1000 },
-);
+)
 
 const handleLoadMore = async () => {
-  if (status.value === "pending") return;
+  if (status.value === 'pending') return
 
-  const totalPages = directoryData.value?.total || 0;
+  const totalPages = directoryData.value?.total || 0
 
   if (currentPage.value < totalPages) {
-    currentPage.value++;
-    await refreshData();
+    currentPage.value++
+    await refreshData()
   }
-};
+}
 
 const onInit = (editor: any) => {
   editor.commands.addCommand({
-    name: "saveFile",
-    bindKey: { win: "Ctrl-S", mac: "Command-S" },
+    name: 'saveFile',
+    bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
     exec: () => saveFileContent(false),
-  });
-};
+  })
+}
 
 const showContextMenu = async (item: any, x: number, y: number) => {
-  contextMenuInfo.value = { item, x, y };
-  selectedItem.value = item;
-  await nextTick();
-  if (!contextMenu.value?.ctxRef) return false;
-  const screenHeight = window.innerHeight;
-  const ctxRect = contextMenu.value.ctxRef.getBoundingClientRect();
-  isAtBottom.value = ctxRect.bottom > screenHeight;
-};
+  contextMenuInfo.value = { item, x, y }
+  selectedItem.value = item
+  await nextTick()
+  if (!contextMenu.value?.ctxRef) return false
+  const screenHeight = window.innerHeight
+  const ctxRect = contextMenu.value.ctxRef.getBoundingClientRect()
+  isAtBottom.value = ctxRect.bottom > screenHeight
+}
 
 const onAnywhereClicked = (e: MouseEvent) => {
-  if (!(e.target as HTMLElement).closest("#item-context-menu")) {
-    contextMenuInfo.value.item = null;
+  if (!(e.target as HTMLElement).closest('#item-context-menu')) {
+    contextMenuInfo.value.item = null
   }
-};
+}
 
-const imageExtensions = ["png", "jpg", "jpeg", "gif", "webp"];
+const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'webp']
 
 const editFile = async (item: { name: string; type: string; path: string }) => {
   try {
-    const path = `${currentPath.value}/${item.name}`.replace("//", "/");
-    const content = (await props.server.fs?.downloadFile(path, true)) as any;
-    window.scrollTo(0, 0);
+    const path = `${currentPath.value}/${item.name}`.replace('//', '/')
+    const content = (await props.server.fs?.downloadFile(path, true)) as any
+    window.scrollTo(0, 0)
 
-    fileContent.value = await content.text();
-    editingFile.value = item;
-    isEditing.value = true;
-    const extension = item.name.split(".").pop();
-    if (item.type === "file" && extension && imageExtensions.includes(extension)) {
-      isEditingImage.value = true;
-      imagePreview.value = content;
+    fileContent.value = await content.text()
+    editingFile.value = item
+    isEditing.value = true
+    const extension = item.name.split('.').pop()
+    if (item.type === 'file' && extension && imageExtensions.includes(extension)) {
+      isEditingImage.value = true
+      imagePreview.value = content
     }
-    router.push({ query: { ...route.query, path: currentPath.value, editing: item.path } });
+    router.push({ query: { ...route.query, path: currentPath.value, editing: item.path } })
   } catch (error) {
-    console.error("Error fetching file content:", error);
+    console.error('Error fetching file content:', error)
   }
-};
+}
 
 const initializeFileEdit = async () => {
-  if (!route.query.editing || !props.server.fs) return;
+  if (!route.query.editing || !props.server.fs) return
 
-  const filePath = route.query.editing as string;
+  const filePath = route.query.editing as string
   await editFile({
-    name: filePath.split("/").pop() || "",
-    type: "file",
+    name: filePath.split('/').pop() || '',
+    type: 'file',
     path: filePath,
-  });
-};
+  })
+}
 
 onMounted(async () => {
-  await modulesLoaded;
+  await modulesLoaded
 
-  await initializeFileEdit();
+  await initializeFileEdit()
 
-  await import("ace-builds");
-  await import("ace-builds/src-noconflict/mode-json");
-  await import("ace-builds/src-noconflict/mode-yaml");
-  await import("ace-builds/src-noconflict/mode-toml");
-  await import("ace-builds/src-noconflict/mode-sh");
-  await import("ace-builds/src-noconflict/theme-one_dark");
-  await import("ace-builds/src-noconflict/ext-searchbox");
-  VAceEditor.value = markRaw((await import("vue3-ace-editor")).VAceEditor);
-  document.addEventListener("click", onAnywhereClicked);
-  window.addEventListener("scroll", onScroll);
+  await import('ace-builds')
+  await import('ace-builds/src-noconflict/mode-json')
+  await import('ace-builds/src-noconflict/mode-yaml')
+  await import('ace-builds/src-noconflict/mode-toml')
+  await import('ace-builds/src-noconflict/mode-sh')
+  await import('ace-builds/src-noconflict/theme-one_dark')
+  await import('ace-builds/src-noconflict/ext-searchbox')
+  VAceEditor.value = markRaw((await import('vue3-ace-editor')).VAceEditor)
+  document.addEventListener('click', onAnywhereClicked)
+  window.addEventListener('scroll', onScroll)
 
-  document.addEventListener("keydown", (e) => {
-    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === "z") {
-      e.preventDefault();
-      undoLastOperation();
+  document.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') {
+      e.preventDefault()
+      undoLastOperation()
     }
-    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "z") {
-      e.preventDefault();
-      redoLastOperation();
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') {
+      e.preventDefault()
+      redoLastOperation()
     }
-  });
+  })
 
-  props.server.fs?.clearQueuedOps();
-});
+  props.server.fs?.clearQueuedOps()
+})
 
 onUnmounted(() => {
-  document.removeEventListener("click", onAnywhereClicked);
-  window.removeEventListener("scroll", onScroll);
-  document.removeEventListener("keydown", () => {});
-});
+  document.removeEventListener('click', onAnywhereClicked)
+  window.removeEventListener('scroll', onScroll)
+  document.removeEventListener('keydown', () => {})
+})
 
-const clientSideQueued = computed<FSQueuedOp[]>(() => props.server.fs?.queuedOps ?? []);
+const clientSideQueued = computed<FSQueuedOp[]>(() => props.server.fs?.queuedOps ?? [])
 
-type QueuedOpWithState = FSQueuedOp & { state: "queued" };
+type QueuedOpWithState = FSQueuedOp & { state: 'queued' }
 
 const ops = computed<(QueuedOpWithState | FilesystemOp)[]>(() => [
-  ...clientSideQueued.value.map((x) => ({ ...x, state: "queued" }) satisfies QueuedOpWithState),
+  ...clientSideQueued.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
   ...(props.server.fs?.ops ?? []),
-]);
+])
 
 watch(
   () => props.server.fs?.ops,
   () => {
-    refreshList();
+    refreshList()
   },
-);
+)
 
 watch(
   () => route.query,
   async (newQuery) => {
-    currentPage.value = 1;
-    searchQuery.value = "";
-    viewFilter.value = "all";
-    sortMethod.value = "name";
-    sortDesc.value = false;
+    currentPage.value = 1
+    searchQuery.value = ''
+    viewFilter.value = 'all'
+    sortMethod.value = 'name'
+    sortDesc.value = false
 
-    currentPath.value = Array.isArray(newQuery.path)
-      ? newQuery.path.join("")
-      : newQuery.path || "/";
+    currentPath.value = Array.isArray(newQuery.path) ? newQuery.path.join('') : newQuery.path || '/'
 
     if (newQuery.editing) {
       await editFile({
         name: newQuery.editing as string,
-        type: "file",
+        type: 'file',
         path: newQuery.editing as string,
-      });
+      })
     } else {
-      isEditing.value = false;
-      editingFile.value = null;
+      isEditing.value = false
+      editingFile.value = null
     }
 
-    await refreshData();
-    reset();
+    await refreshData()
+    reset()
   },
   { immediate: true, deep: true },
-);
+)
 
 const breadcrumbSegments = computed(() => {
-  if (typeof currentPath.value === "string") {
-    return currentPath.value.split("/").filter(Boolean);
+  if (typeof currentPath.value === 'string') {
+    return currentPath.value.split('/').filter(Boolean)
   }
-  return [];
-});
+  return []
+})
 
 const navigateToSegment = (index: number) => {
-  const newPath = breadcrumbSegments.value.slice(0, index + 1).join("/");
-  router.push({ query: { ...route.query, path: newPath } });
+  const newPath = breadcrumbSegments.value.slice(0, index + 1).join('/')
+  router.push({ query: { ...route.query, path: newPath } })
   if (isEditing.value) {
-    isEditing.value = false;
-    editingFile.value = null;
-    closeEditor.value = false;
+    isEditing.value = false
+    editingFile.value = null
+    closeEditor.value = false
 
-    const newQuery = { ...route.query };
-    delete newQuery.editing;
-    router.replace({ query: newQuery });
+    const newQuery = { ...route.query }
+    delete newQuery.editing
+    router.replace({ query: newQuery })
   }
-};
+}
 
 // const navigateToPage = () => {
 //   router.push({ query: { path: currentPath.value } });
@@ -1003,130 +1001,130 @@ const navigateToSegment = (index: number) => {
 
 const requestShareLink = async () => {
   try {
-    const response = (await $fetch("https://api.mclo.gs/1/log", {
-      method: "POST",
-      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    const response = (await $fetch('https://api.mclo.gs/1/log', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
       body: new URLSearchParams({ content: fileContent.value }),
-    })) as any;
+    })) as any
 
     if (response.success) {
-      await navigator.clipboard.writeText(response.url);
+      await navigator.clipboard.writeText(response.url)
       addNotification({
-        group: "files",
-        title: "Log URL copied",
-        text: "Your log file URL has been copied to your clipboard.",
-        type: "success",
-      });
+        group: 'files',
+        title: 'Log URL copied',
+        text: 'Your log file URL has been copied to your clipboard.',
+        type: 'success',
+      })
     } else {
-      throw new Error(response.error);
+      throw new Error(response.error)
     }
   } catch (error) {
-    console.error("Error sharing file:", error);
+    console.error('Error sharing file:', error)
   }
-};
+}
 
 const handleDroppedFiles = (files: File[]) => {
-  if (isEditing.value) return;
+  if (isEditing.value) return
 
   files.forEach((file) => {
-    uploadDropdownRef.value?.uploadFile(file);
-  });
-};
+    uploadDropdownRef.value?.uploadFile(file)
+  })
+}
 
 const initiateFileUpload = () => {
-  const input = document.createElement("input");
-  input.type = "file";
-  input.multiple = true;
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.multiple = true
   input.onchange = () => {
     if (input.files) {
       Array.from(input.files).forEach((file) => {
-        uploadDropdownRef.value?.uploadFile(file);
-      });
+        uploadDropdownRef.value?.uploadFile(file)
+      })
     }
-  };
-  input.click();
-};
+  }
+  input.click()
+}
 
 const downloadFile = async (item: any) => {
-  if (item.type === "file") {
+  if (item.type === 'file') {
     try {
-      const path = `${currentPath.value}/${item.name}`.replace("//", "/");
-      const fileData = await props.server.fs?.downloadFile(path);
+      const path = `${currentPath.value}/${item.name}`.replace('//', '/')
+      const fileData = await props.server.fs?.downloadFile(path)
       if (fileData) {
-        const blob = new Blob([fileData], { type: "application/octet-stream" });
-        const link = document.createElement("a");
-        link.href = window.URL.createObjectURL(blob);
-        link.download = item.name;
-        link.click();
-        window.URL.revokeObjectURL(link.href);
+        const blob = new Blob([fileData], { type: 'application/octet-stream' })
+        const link = document.createElement('a')
+        link.href = window.URL.createObjectURL(blob)
+        link.download = item.name
+        link.click()
+        window.URL.revokeObjectURL(link.href)
       } else {
-        throw new Error("File data is undefined");
+        throw new Error('File data is undefined')
       }
     } catch (error) {
-      console.error("Error downloading file:", error);
+      console.error('Error downloading file:', error)
     }
-    contextMenuInfo.value.item = null;
+    contextMenuInfo.value.item = null
   }
-};
+}
 
 const saveFileContent = async (exit: boolean = true) => {
-  if (!editingFile.value) return;
+  if (!editingFile.value) return
 
   try {
-    await props.server.fs?.updateFile(editingFile.value.path, fileContent.value);
+    await props.server.fs?.updateFile(editingFile.value.path, fileContent.value)
     if (exit) {
-      await props.server.refresh();
-      isEditing.value = false;
-      editingFile.value = null;
-      router.push({ query: { ...route.query, path: currentPath.value } });
+      await props.server.refresh()
+      isEditing.value = false
+      editingFile.value = null
+      router.push({ query: { ...route.query, path: currentPath.value } })
     }
 
     addNotification({
-      group: "files",
-      title: "File saved",
-      text: "Your file has been saved.",
-      type: "success",
-    });
+      group: 'files',
+      title: 'File saved',
+      text: 'Your file has been saved.',
+      type: 'success',
+    })
   } catch (error) {
-    console.error("Error saving file content:", error);
+    console.error('Error saving file content:', error)
   }
-};
+}
 
 const saveFileContentRestart = async () => {
-  await saveFileContent();
-  await props.server.general?.power("Restart");
+  await saveFileContent()
+  await props.server.general?.power('Restart')
 
   addNotification({
-    group: "files",
-    title: "Server restarted",
-    text: "Your server has been restarted.",
-    type: "success",
-  });
-};
+    group: 'files',
+    title: 'Server restarted',
+    text: 'Your server has been restarted.',
+    type: 'success',
+  })
+}
 
 const saveFileContentAs = async () => {
-  await saveFileContent(false);
-  closeEditor.value = true;
-  showRenameModal(editingFile.value);
-};
+  await saveFileContent(false)
+  closeEditor.value = true
+  showRenameModal(editingFile.value)
+}
 
 const cancelEditing = () => {
-  isEditing.value = false;
-  editingFile.value = null;
-  fileContent.value = "";
-  isEditingImage.value = false;
-  imagePreview.value = null;
-  router.push({ query: { ...route.query, path: currentPath.value } });
-  const newQuery = { ...route.query };
-  delete newQuery.editing;
-  router.replace({ query: newQuery });
-};
+  isEditing.value = false
+  editingFile.value = null
+  fileContent.value = ''
+  isEditingImage.value = false
+  imagePreview.value = null
+  router.push({ query: { ...route.query, path: currentPath.value } })
+  const newQuery = { ...route.query }
+  delete newQuery.editing
+  router.replace({ query: newQuery })
+}
 
 const onScroll = () => {
   if (contextMenuInfo.value.item) {
-    contextMenuInfo.value.y = Math.max(0, contextMenuInfo.value.y - window.scrollY);
+    contextMenuInfo.value.y = Math.max(0, contextMenuInfo.value.y - window.scrollY)
   }
-};
+}
 </script>
 
 <style scoped>
@@ -1168,7 +1166,7 @@ const onScroll = () => {
 }
 
 @property --_radial-percentage {
-  syntax: "<percentage>";
+  syntax: '<percentage>';
   inherits: false;
   initial-value: 0%;
 }
@@ -1178,7 +1176,7 @@ const onScroll = () => {
 }
 
 .radial-progress-animation-overlay::before {
-  content: "";
+  content: '';
   inset: -2px;
   position: absolute;
   border-radius: 50%;
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/billing.vue b/apps/frontend/src/pages/servers/manage/[id]/options/billing.vue
index ab22342a4..6f2bc7bd5 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/billing.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/billing.vue
@@ -8,5 +8,5 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled } from "@modrinth/ui";
+import { ButtonStyled } from '@modrinth/ui'
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
index 38bda74bb..9960c1197 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
@@ -112,226 +112,224 @@
 </template>
 
 <script setup lang="ts">
-import { EditIcon, TransferIcon } from "@modrinth/assets";
-import ButtonStyled from "@modrinth/ui/src/components/base/ButtonStyled.vue";
+import { EditIcon, TransferIcon } from '@modrinth/assets'
+import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const data = computed(() => props.server.general);
-const serverName = ref(data.value?.name);
-const serverSubdomain = ref(data.value?.net?.domain ?? "");
-const isValidLengthSubdomain = computed(() => serverSubdomain.value.length >= 5);
-const isValidCharsSubdomain = computed(() => /^[a-zA-Z0-9-]+$/.test(serverSubdomain.value));
-const isValidSubdomain = computed(
-  () => isValidLengthSubdomain.value && isValidCharsSubdomain.value,
-);
-const icon = computed(() => data.value?.image);
+const data = computed(() => props.server.general)
+const serverName = ref(data.value?.name)
+const serverSubdomain = ref(data.value?.net?.domain ?? '')
+const isValidLengthSubdomain = computed(() => serverSubdomain.value.length >= 5)
+const isValidCharsSubdomain = computed(() => /^[a-zA-Z0-9-]+$/.test(serverSubdomain.value))
+const isValidSubdomain = computed(() => isValidLengthSubdomain.value && isValidCharsSubdomain.value)
+const icon = computed(() => data.value?.image)
 
-const isUpdating = ref(false);
+const isUpdating = ref(false)
 const hasUnsavedChanges = computed(
   () =>
     (serverName.value && serverName.value !== data.value?.name) ||
     serverSubdomain.value !== data.value?.net?.domain,
-);
-const isValidServerName = computed(() => (serverName.value?.length ?? 0) > 0);
+)
+const isValidServerName = computed(() => (serverName.value?.length ?? 0) > 0)
 
 watch(serverName, (oldValue) => {
   if (!isValidServerName.value) {
-    serverName.value = oldValue;
+    serverName.value = oldValue
   }
-});
+})
 
 const saveGeneral = async () => {
-  if (!isValidServerName.value || !isValidSubdomain.value) return;
+  if (!isValidServerName.value || !isValidSubdomain.value) return
 
   try {
-    isUpdating.value = true;
+    isUpdating.value = true
     if (serverName.value !== data.value?.name) {
-      await data.value?.updateName(serverName.value ?? "");
+      await data.value?.updateName(serverName.value ?? '')
     }
     if (serverSubdomain.value !== data.value?.net?.domain) {
       try {
         // type shit backend makes me do
         const available = await props.server.network?.checkSubdomainAvailability(
           serverSubdomain.value,
-        );
+        )
 
         if (!available) {
           addNotification({
-            group: "serverOptions",
-            type: "error",
-            title: "Subdomain not available",
-            text: "The subdomain you entered is already in use.",
-          });
-          return;
+            group: 'serverOptions',
+            type: 'error',
+            title: 'Subdomain not available',
+            text: 'The subdomain you entered is already in use.',
+          })
+          return
         }
 
-        await props.server.network?.changeSubdomain(serverSubdomain.value);
+        await props.server.network?.changeSubdomain(serverSubdomain.value)
       } catch (error) {
-        console.error("Error checking subdomain availability:", error);
+        console.error('Error checking subdomain availability:', error)
         addNotification({
-          group: "serverOptions",
-          type: "error",
-          title: "Error checking availability",
-          text: "Failed to verify if the subdomain is available.",
-        });
-        return;
+          group: 'serverOptions',
+          type: 'error',
+          title: 'Error checking availability',
+          text: 'Failed to verify if the subdomain is available.',
+        })
+        return
       }
     }
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    await props.server.refresh();
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    await props.server.refresh()
     addNotification({
-      group: "serverOptions",
-      type: "success",
-      title: "Server settings updated",
-      text: "Your server settings were successfully changed.",
-    });
+      group: 'serverOptions',
+      type: 'success',
+      title: 'Server settings updated',
+      text: 'Your server settings were successfully changed.',
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
     addNotification({
-      group: "serverOptions",
-      type: "error",
-      title: "Failed to update server settings",
-      text: "An error occurred while attempting to update your server settings.",
-    });
+      group: 'serverOptions',
+      type: 'error',
+      title: 'Failed to update server settings',
+      text: 'An error occurred while attempting to update your server settings.',
+    })
   } finally {
-    isUpdating.value = false;
+    isUpdating.value = false
   }
-};
+}
 
 const resetGeneral = () => {
-  serverName.value = data.value?.name || "";
-  serverSubdomain.value = data.value?.net?.domain ?? "";
-};
+  serverName.value = data.value?.name || ''
+  serverSubdomain.value = data.value?.net?.domain ?? ''
+}
 
 const uploadFile = async (e: Event) => {
-  const file = (e.target as HTMLInputElement).files?.[0];
+  const file = (e.target as HTMLInputElement).files?.[0]
   if (!file) {
     addNotification({
-      group: "serverOptions",
-      type: "error",
-      title: "No file selected",
-      text: "Please select a file to upload.",
-    });
-    return;
+      group: 'serverOptions',
+      type: 'error',
+      title: 'No file selected',
+      text: 'Please select a file to upload.',
+    })
+    return
   }
 
   const scaledFile = await new Promise<File>((resolve, reject) => {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    const img = new Image();
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    const img = new Image()
     img.onload = () => {
-      canvas.width = 64;
-      canvas.height = 64;
-      ctx?.drawImage(img, 0, 0, 64, 64);
+      canvas.width = 64
+      canvas.height = 64
+      ctx?.drawImage(img, 0, 0, 64, 64)
       canvas.toBlob((blob) => {
         if (blob) {
-          resolve(new File([blob], "server-icon.png", { type: "image/png" }));
+          resolve(new File([blob], 'server-icon.png', { type: 'image/png' }))
         } else {
-          reject(new Error("Canvas toBlob failed"));
+          reject(new Error('Canvas toBlob failed'))
         }
-      }, "image/png");
-      URL.revokeObjectURL(img.src);
-    };
-    img.onerror = reject;
-    img.src = URL.createObjectURL(file);
-  });
+      }, 'image/png')
+      URL.revokeObjectURL(img.src)
+    }
+    img.onerror = reject
+    img.src = URL.createObjectURL(file)
+  })
 
   try {
     if (data.value?.image) {
-      await props.server.fs?.deleteFileOrFolder("/server-icon.png", false);
-      await props.server.fs?.deleteFileOrFolder("/server-icon-original.png", false);
+      await props.server.fs?.deleteFileOrFolder('/server-icon.png', false)
+      await props.server.fs?.deleteFileOrFolder('/server-icon-original.png', false)
     }
 
-    await props.server.fs?.uploadFile("/server-icon.png", scaledFile);
-    await props.server.fs?.uploadFile("/server-icon-original.png", file);
+    await props.server.fs?.uploadFile('/server-icon.png', scaledFile)
+    await props.server.fs?.uploadFile('/server-icon-original.png', file)
 
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    const img = new Image();
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    const img = new Image()
     await new Promise<void>((resolve) => {
       img.onload = () => {
-        canvas.width = 512;
-        canvas.height = 512;
-        ctx?.drawImage(img, 0, 0, 512, 512);
-        const dataURL = canvas.toDataURL("image/png");
-        useState(`server-icon-${props.server.serverId}`).value = dataURL;
-        if (data.value) data.value.image = dataURL;
-        resolve();
-        URL.revokeObjectURL(img.src);
-      };
-      img.src = URL.createObjectURL(file);
-    });
+        canvas.width = 512
+        canvas.height = 512
+        ctx?.drawImage(img, 0, 0, 512, 512)
+        const dataURL = canvas.toDataURL('image/png')
+        useState(`server-icon-${props.server.serverId}`).value = dataURL
+        if (data.value) data.value.image = dataURL
+        resolve()
+        URL.revokeObjectURL(img.src)
+      }
+      img.src = URL.createObjectURL(file)
+    })
 
     addNotification({
-      group: "serverOptions",
-      type: "success",
-      title: "Server icon updated",
-      text: "Your server icon was successfully changed.",
-    });
+      group: 'serverOptions',
+      type: 'success',
+      title: 'Server icon updated',
+      text: 'Your server icon was successfully changed.',
+    })
   } catch (error) {
-    console.error("Error uploading icon:", error);
+    console.error('Error uploading icon:', error)
     addNotification({
-      group: "serverOptions",
-      type: "error",
-      title: "Upload failed",
-      text: "Failed to upload server icon.",
-    });
+      group: 'serverOptions',
+      type: 'error',
+      title: 'Upload failed',
+      text: 'Failed to upload server icon.',
+    })
   }
-};
+}
 
 const resetIcon = async () => {
   if (data.value?.image) {
     try {
-      await props.server.fs?.deleteFileOrFolder("/server-icon.png", false);
-      await props.server.fs?.deleteFileOrFolder("/server-icon-original.png", false);
+      await props.server.fs?.deleteFileOrFolder('/server-icon.png', false)
+      await props.server.fs?.deleteFileOrFolder('/server-icon-original.png', false)
 
-      useState(`server-icon-${props.server.serverId}`).value = undefined;
-      if (data.value) data.value.image = undefined;
+      useState(`server-icon-${props.server.serverId}`).value = undefined
+      if (data.value) data.value.image = undefined
 
-      await props.server.refresh(["general"]);
+      await props.server.refresh(['general'])
 
       addNotification({
-        group: "serverOptions",
-        type: "success",
-        title: "Server icon reset",
-        text: "Your server icon was successfully reset.",
-      });
+        group: 'serverOptions',
+        type: 'success',
+        title: 'Server icon reset',
+        text: 'Your server icon was successfully reset.',
+      })
     } catch (error) {
-      console.error("Error resetting icon:", error);
+      console.error('Error resetting icon:', error)
       addNotification({
-        group: "serverOptions",
-        type: "error",
-        title: "Reset failed",
-        text: "Failed to reset server icon.",
-      });
+        group: 'serverOptions',
+        type: 'error',
+        title: 'Reset failed',
+        text: 'Failed to reset server icon.',
+      })
     }
   }
-};
+}
 
 const onDragOver = (e: DragEvent) => {
-  e.preventDefault();
-};
+  e.preventDefault()
+}
 
 const onDragLeave = (e: DragEvent) => {
-  e.preventDefault();
-};
+  e.preventDefault()
+}
 
 const onDrop = (e: DragEvent) => {
-  e.preventDefault();
-  uploadFile(e);
-};
+  e.preventDefault()
+  uploadFile(e)
+}
 
 const triggerFileInput = () => {
-  const input = document.createElement("input");
-  input.type = "file";
-  input.id = "server-icon-field";
-  input.accept = "image/png,image/jpeg,image/gif,image/webp";
-  input.onchange = uploadFile;
-  input.click();
-};
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.id = 'server-icon-field'
+  input.accept = 'image/png,image/jpeg,image/gif,image/webp'
+  input.onchange = uploadFile
+  input.click()
+}
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/info.vue b/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
index 6882beb6f..ee0f08229 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/info.vue
@@ -65,7 +65,7 @@
             <div class="flex h-8 items-center justify-between">
               <span class="font-bold text-contrast">
                 {{
-                  showPassword ? data?.sftp_password : "*".repeat(data?.sftp_password?.length ?? 0)
+                  showPassword ? data?.sftp_password : '*'.repeat(data?.sftp_password?.length ?? 0)
                 }}
               </span>
 
@@ -115,40 +115,40 @@
 </template>
 
 <script setup lang="ts">
-import { CopyIcon, ExternalIcon, EyeIcon, EyeOffIcon } from "@modrinth/assets";
-import { ButtonStyled, CopyCode } from "@modrinth/ui";
+import { CopyIcon, ExternalIcon, EyeIcon, EyeOffIcon } from '@modrinth/assets'
+import { ButtonStyled, CopyCode } from '@modrinth/ui'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const data = computed(() => props.server.general);
-const showPassword = ref(false);
+const data = computed(() => props.server.general)
+const showPassword = ref(false)
 
 const openSftp = () => {
-  const sftpUrl = `sftp://${data.value?.sftp_username}@${data.value?.sftp_host}`;
-  window.open(sftpUrl, "_blank");
-};
+  const sftpUrl = `sftp://${data.value?.sftp_username}@${data.value?.sftp_host}`
+  window.open(sftpUrl, '_blank')
+}
 
 const togglePassword = () => {
-  showPassword.value = !showPassword.value;
-};
+  showPassword.value = !showPassword.value
+}
 
 const copyToClipboard = (name: string, textToCopy?: string) => {
-  navigator.clipboard.writeText(textToCopy || "");
+  navigator.clipboard.writeText(textToCopy || '')
   addNotification({
-    type: "success",
+    type: 'success',
     title: `${name} copied to clipboard!`,
-  });
-};
+  })
+}
 
 const properties = [
-  { name: "Server ID", value: props.server.serverId ?? "Unknown" },
-  { name: "Node", value: data.value?.node?.instance ?? "Unknown" },
-  { name: "Kind", value: data.value?.upstream?.kind ?? data.value?.loader ?? "Unknown" },
-  { name: "Project ID", value: data.value?.upstream?.project_id ?? "Unknown" },
-  { name: "Version ID", value: data.value?.upstream?.version_id ?? "Unknown" },
-];
+  { name: 'Server ID', value: props.server.serverId ?? 'Unknown' },
+  { name: 'Node', value: data.value?.node?.instance ?? 'Unknown' },
+  { name: 'Kind', value: data.value?.upstream?.kind ?? data.value?.loader ?? 'Unknown' },
+  { name: 'Project ID', value: data.value?.upstream?.project_id ?? 'Unknown' },
+  { name: 'Version ID', value: data.value?.upstream?.version_id ?? 'Unknown' },
+]
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
index c341a3c66..bd5f1a619 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
@@ -7,16 +7,16 @@
 </template>
 
 <script setup lang="ts">
-import ServerInstallation from "~/components/ui/servers/ServerInstallation.vue";
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
-import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
+import ServerInstallation from '~/components/ui/servers/ServerInstallation.vue'
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
+import type { BackupInProgressReason } from '~/pages/servers/manage/[id].vue'
 
 const props = defineProps<{
-  server: ModrinthServer;
-  backupInProgress?: BackupInProgressReason;
-}>();
+  server: ModrinthServer
+  backupInProgress?: BackupInProgressReason
+}>()
 
 const emit = defineEmits<{
-  reinstall: [any?];
-}>();
+  reinstall: [any?]
+}>()
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
index b9f935222..fbfcb9dc1 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
@@ -272,222 +272,219 @@ import {
   TrashIcon,
   UploadIcon,
   VersionIcon,
-} from "@modrinth/assets";
-import { ButtonStyled, ConfirmModal, CopyCode,NewModal } from "@modrinth/ui";
-import { computed, nextTick,ref } from "vue";
+} from '@modrinth/assets'
+import { ButtonStyled, ConfirmModal, CopyCode, NewModal } from '@modrinth/ui'
+import { computed, nextTick, ref } from 'vue'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const isUpdating = ref(false);
-const data = computed(() => props.server.general);
+const isUpdating = ref(false)
+const data = computed(() => props.server.general)
 
-const serverIP = ref(data?.value?.net?.ip ?? "");
-const serverSubdomain = ref(data?.value?.net?.domain ?? "");
-const serverPrimaryPort = ref(data?.value?.net?.port ?? 0);
-const userDomain = ref("");
-const exampleDomain = "play.example.com";
+const serverIP = ref(data?.value?.net?.ip ?? '')
+const serverSubdomain = ref(data?.value?.net?.domain ?? '')
+const serverPrimaryPort = ref(data?.value?.net?.port ?? 0)
+const userDomain = ref('')
+const exampleDomain = 'play.example.com'
 
-const network = computed(() => props.server.network);
-const allocations = computed(() => network.value?.allocations);
+const network = computed(() => props.server.network)
+const allocations = computed(() => network.value?.allocations)
 
-const newAllocationModal = ref<typeof NewModal>();
-const editAllocationModal = ref<typeof NewModal>();
-const confirmDeleteModal = ref<typeof ConfirmModal>();
-const newAllocationInput = ref<HTMLInputElement | null>(null);
-const editAllocationInput = ref<HTMLInputElement | null>(null);
-const newAllocationName = ref("");
-const newAllocationPort = ref(0);
-const allocationToDelete = ref<number | null>(null);
+const newAllocationModal = ref<typeof NewModal>()
+const editAllocationModal = ref<typeof NewModal>()
+const confirmDeleteModal = ref<typeof ConfirmModal>()
+const newAllocationInput = ref<HTMLInputElement | null>(null)
+const editAllocationInput = ref<HTMLInputElement | null>(null)
+const newAllocationName = ref('')
+const newAllocationPort = ref(0)
+const allocationToDelete = ref<number | null>(null)
 
-const hasUnsavedChanges = computed(() => serverSubdomain.value !== data?.value?.net?.domain);
+const hasUnsavedChanges = computed(() => serverSubdomain.value !== data?.value?.net?.domain)
 
-const isValidSubdomain = computed(() => /^[a-zA-Z0-9-]{5,}$/.test(serverSubdomain.value));
+const isValidSubdomain = computed(() => /^[a-zA-Z0-9-]{5,}$/.test(serverSubdomain.value))
 
 const addNewAllocation = async () => {
-  if (!newAllocationName.value) return;
+  if (!newAllocationName.value) return
 
   try {
-    await props.server.network?.reserveAllocation(newAllocationName.value);
-    await props.server.refresh(["network"]);
+    await props.server.network?.reserveAllocation(newAllocationName.value)
+    await props.server.refresh(['network'])
 
-    newAllocationModal.value?.hide();
-    newAllocationName.value = "";
+    newAllocationModal.value?.hide()
+    newAllocationName.value = ''
 
     addNotification({
-      group: "serverOptions",
-      type: "success",
-      title: "Allocation reserved",
-      text: "Your allocation has been reserved.",
-    });
+      group: 'serverOptions',
+      type: 'success',
+      title: 'Allocation reserved',
+      text: 'Your allocation has been reserved.',
+    })
   } catch (error) {
-    console.error("Failed to reserve new allocation:", error);
+    console.error('Failed to reserve new allocation:', error)
   }
-};
+}
 
 const showNewAllocationModal = () => {
-  newAllocationName.value = "";
-  newAllocationModal.value?.show();
+  newAllocationName.value = ''
+  newAllocationModal.value?.show()
   nextTick(() => {
     setTimeout(() => {
-      newAllocationInput.value?.focus();
-    }, 100);
-  });
-};
+      newAllocationInput.value?.focus()
+    }, 100)
+  })
+}
 
 const showEditAllocationModal = (port: number) => {
-  newAllocationPort.value = port;
-  editAllocationModal.value?.show();
+  newAllocationPort.value = port
+  editAllocationModal.value?.show()
   nextTick(() => {
     setTimeout(() => {
-      editAllocationInput.value?.focus();
-    }, 100);
-  });
-};
+      editAllocationInput.value?.focus()
+    }, 100)
+  })
+}
 
 const showConfirmDeleteModal = (port: number) => {
-  allocationToDelete.value = port;
-  confirmDeleteModal.value?.show();
-};
+  allocationToDelete.value = port
+  confirmDeleteModal.value?.show()
+}
 
 const confirmDeleteAllocation = async () => {
-  if (allocationToDelete.value === null) return;
+  if (allocationToDelete.value === null) return
 
-  await props.server.network?.deleteAllocation(allocationToDelete.value);
-  await props.server.refresh(["network"]);
+  await props.server.network?.deleteAllocation(allocationToDelete.value)
+  await props.server.refresh(['network'])
 
   addNotification({
-    group: "serverOptions",
-    type: "success",
-    title: "Allocation removed",
-    text: "Your allocation has been removed.",
-  });
+    group: 'serverOptions',
+    type: 'success',
+    title: 'Allocation removed',
+    text: 'Your allocation has been removed.',
+  })
 
-  allocationToDelete.value = null;
-};
+  allocationToDelete.value = null
+}
 
 const editAllocation = async () => {
-  if (!newAllocationName.value) return;
+  if (!newAllocationName.value) return
 
   try {
-    await props.server.network?.updateAllocation(newAllocationPort.value, newAllocationName.value);
-    await props.server.refresh(["network"]);
+    await props.server.network?.updateAllocation(newAllocationPort.value, newAllocationName.value)
+    await props.server.refresh(['network'])
 
-    editAllocationModal.value?.hide();
-    newAllocationName.value = "";
+    editAllocationModal.value?.hide()
+    newAllocationName.value = ''
 
     addNotification({
-      group: "serverOptions",
-      type: "success",
-      title: "Allocation updated",
-      text: "Your allocation has been updated.",
-    });
+      group: 'serverOptions',
+      type: 'success',
+      title: 'Allocation updated',
+      text: 'Your allocation has been updated.',
+    })
   } catch (error) {
-    console.error("Failed to reserve new allocation:", error);
+    console.error('Failed to reserve new allocation:', error)
   }
-};
+}
 
 const saveNetwork = async () => {
-  if (!isValidSubdomain.value) return;
+  if (!isValidSubdomain.value) return
 
   try {
-    isUpdating.value = true;
-    const available = await props.server.network?.checkSubdomainAvailability(serverSubdomain.value);
+    isUpdating.value = true
+    const available = await props.server.network?.checkSubdomainAvailability(serverSubdomain.value)
     if (!available) {
       addNotification({
-        group: "serverOptions",
-        type: "error",
-        title: "Subdomain not available",
-        text: "The subdomain you entered is already in use.",
-      });
-      return;
+        group: 'serverOptions',
+        type: 'error',
+        title: 'Subdomain not available',
+        text: 'The subdomain you entered is already in use.',
+      })
+      return
     }
     if (serverSubdomain.value !== data?.value?.net?.domain) {
-      await props.server.network?.changeSubdomain(serverSubdomain.value);
+      await props.server.network?.changeSubdomain(serverSubdomain.value)
     }
     if (serverPrimaryPort.value !== data?.value?.net?.port) {
-      await props.server.network?.updateAllocation(
-        serverPrimaryPort.value,
-        newAllocationName.value,
-      );
+      await props.server.network?.updateAllocation(serverPrimaryPort.value, newAllocationName.value)
     }
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    await props.server.refresh();
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    await props.server.refresh()
     addNotification({
-      group: "serverOptions",
-      type: "success",
-      title: "Server settings updated",
-      text: "Your server settings were successfully changed.",
-    });
+      group: 'serverOptions',
+      type: 'success',
+      title: 'Server settings updated',
+      text: 'Your server settings were successfully changed.',
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
     addNotification({
-      group: "serverOptions",
-      type: "error",
-      title: "Failed to update server settings",
-      text: "An error occurred while attempting to update your server settings.",
-    });
+      group: 'serverOptions',
+      type: 'error',
+      title: 'Failed to update server settings',
+      text: 'An error occurred while attempting to update your server settings.',
+    })
   } finally {
-    isUpdating.value = false;
+    isUpdating.value = false
   }
-};
+}
 
 const resetNetwork = () => {
-  serverSubdomain.value = data?.value?.net?.domain ?? "";
-};
+  serverSubdomain.value = data?.value?.net?.domain ?? ''
+}
 
 const dnsRecords = computed(() => {
-  const domain = userDomain.value === "" ? exampleDomain : userDomain.value;
+  const domain = userDomain.value === '' ? exampleDomain : userDomain.value
   return [
     {
-      type: "A",
+      type: 'A',
       name: `${domain}`,
-      content: data.value?.net?.ip ?? "",
+      content: data.value?.net?.ip ?? '',
     },
     {
-      type: "SRV",
+      type: 'SRV',
       name: `_minecraft._tcp.${domain}`,
       content: `0 10 ${data.value?.net?.port} ${domain}`,
     },
-  ];
-});
+  ]
+})
 
 const exportDnsRecords = () => {
   const records = dnsRecords.value.reduce(
     (acc, record) => {
-      const type = record.type;
+      const type = record.type
       if (!acc[type]) {
-        acc[type] = [];
+        acc[type] = []
       }
-      acc[type].push(record);
-      return acc;
+      acc[type].push(record)
+      return acc
     },
     {} as Record<string, any[]>,
-  );
+  )
 
   const text = Object.entries(records)
     .map(([type, records]) => {
-      return `; ${type} Records\n${records.map((record) => `${record.name}.	1	IN	${record.type} ${record.content}${record.type === "SRV" ? "." : ""}`).join("\n")}\n`;
+      return `; ${type} Records\n${records.map((record) => `${record.name}.	1	IN	${record.type} ${record.content}${record.type === 'SRV' ? '.' : ''}`).join('\n')}\n`
     })
-    .join("\n");
-  const blob = new Blob([text], { type: "text/plain" });
-  const a = document.createElement("a");
-  a.href = window.URL.createObjectURL(blob);
-  a.download = `${userDomain.value}.txt`;
-  a.click();
-  a.remove();
-};
+    .join('\n')
+  const blob = new Blob([text], { type: 'text/plain' })
+  const a = document.createElement('a')
+  a.href = window.URL.createObjectURL(blob)
+  a.download = `${userDomain.value}.txt`
+  a.click()
+  a.remove()
+}
 
 const copyText = (text: string) => {
-  navigator.clipboard.writeText(text);
+  navigator.clipboard.writeText(text)
   addNotification({
-    group: "serverOptions",
-    type: "success",
-    title: "Text copied",
+    group: 'serverOptions',
+    type: 'success',
+    title: 'Text copied',
     text: `${text} has been copied to your clipboard`,
-  });
-};
+  })
+}
 </script>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue b/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
index 3b1483a7e..3c3a476e5 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/preferences.vue
@@ -42,51 +42,51 @@
 </template>
 
 <script setup lang="ts">
-import { useStorage } from "@vueuse/core";
+import { useStorage } from '@vueuse/core'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
-const route = useNativeRoute();
-const serverId = route.params.id as string;
+const route = useNativeRoute()
+const serverId = route.params.id as string
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
 const preferences = {
   ramAsNumber: {
-    displayName: "RAM as bytes",
+    displayName: 'RAM as bytes',
     description:
       "When enabled, RAM will be displayed as bytes instead of a percentage in your server's Overview.",
     implemented: true,
   },
   hideSubdomainLabel: {
-    displayName: "Hide subdomain label",
-    description: "When enabled, the subdomain label will be hidden from the server header.",
+    displayName: 'Hide subdomain label',
+    description: 'When enabled, the subdomain label will be hidden from the server header.',
     implemented: true,
   },
   autoRestart: {
-    displayName: "Auto restart",
-    description: "When enabled, your server will automatically restart if it crashes.",
+    displayName: 'Auto restart',
+    description: 'When enabled, your server will automatically restart if it crashes.',
     implemented: false,
   },
   powerDontAskAgain: {
-    displayName: "Power actions confirmation",
-    description: "When enabled, you will be prompted before stopping and restarting your server.",
+    displayName: 'Power actions confirmation',
+    description: 'When enabled, you will be prompted before stopping and restarting your server.',
     implemented: true,
   },
   backupWhileRunning: {
-    displayName: "Create backups while running",
-    description: "When enabled, backups will be created even if the server is running.",
+    displayName: 'Create backups while running',
+    description: 'When enabled, backups will be created even if the server is running.',
     implemented: true,
   },
-} as const;
+} as const
 
-type PreferenceKeys = keyof typeof preferences;
+type PreferenceKeys = keyof typeof preferences
 
 type UserPreferences = {
-  [K in PreferenceKeys]: boolean;
-};
+  [K in PreferenceKeys]: boolean
+}
 
 const defaultPreferences: UserPreferences = {
   ramAsNumber: false,
@@ -94,32 +94,32 @@ const defaultPreferences: UserPreferences = {
   autoRestart: false,
   powerDontAskAgain: false,
   backupWhileRunning: false,
-};
+}
 
 const userPreferences = useStorage<UserPreferences>(
   `pyro-server-${serverId}-preferences`,
   defaultPreferences,
-);
+)
 
-const newUserPreferences = ref<UserPreferences>(JSON.parse(JSON.stringify(userPreferences.value)));
+const newUserPreferences = ref<UserPreferences>(JSON.parse(JSON.stringify(userPreferences.value)))
 
 const hasUnsavedChanges = computed(() => {
-  return JSON.stringify(newUserPreferences.value) !== JSON.stringify(userPreferences.value);
-});
+  return JSON.stringify(newUserPreferences.value) !== JSON.stringify(userPreferences.value)
+})
 
 const savePreferences = () => {
-  userPreferences.value = { ...newUserPreferences.value };
+  userPreferences.value = { ...newUserPreferences.value }
   addNotification({
-    group: "serverOptions",
-    type: "success",
-    title: "Preferences saved",
-    text: "Your preferences have been saved.",
-  });
-};
+    group: 'serverOptions',
+    type: 'success',
+    title: 'Preferences saved',
+    text: 'Your preferences have been saved.',
+  })
+}
 
 const resetPreferences = () => {
-  newUserPreferences.value = { ...userPreferences.value };
-};
+  newUserPreferences.value = { ...userPreferences.value }
+}
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
index 099165ddf..4c899fc53 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
@@ -143,187 +143,187 @@
 </template>
 
 <script setup lang="ts">
-import { EyeIcon, IssuesIcon,SearchIcon } from "@modrinth/assets";
-import Fuse from "fuse.js";
-import { computed, inject,ref, watch } from "vue";
+import { EyeIcon, IssuesIcon, SearchIcon } from '@modrinth/assets'
+import Fuse from 'fuse.js'
+import { computed, inject, ref, watch } from 'vue'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-const tags = useTags();
+const tags = useTags()
 
-const isUpdating = ref(false);
+const isUpdating = ref(false)
 
-const searchInput = ref("");
+const searchInput = ref('')
 
-const data = computed(() => props.server.general);
-const modulesLoaded = inject<Promise<void>>("modulesLoaded");
-const { data: propsData, status } = await useAsyncData("ServerProperties", async () => {
-  await modulesLoaded;
-  const rawProps = await props.server.fs?.downloadFile("server.properties");
-  if (!rawProps) return null;
+const data = computed(() => props.server.general)
+const modulesLoaded = inject<Promise<void>>('modulesLoaded')
+const { data: propsData, status } = await useAsyncData('ServerProperties', async () => {
+  await modulesLoaded
+  const rawProps = await props.server.fs?.downloadFile('server.properties')
+  if (!rawProps) return null
 
-  const properties: Record<string, any> = {};
-  const lines = rawProps.split("\n");
+  const properties: Record<string, any> = {}
+  const lines = rawProps.split('\n')
 
   for (const line of lines) {
-    if (line.startsWith("#") || !line.includes("=")) continue;
-    const [key, ...valueParts] = line.split("=");
-    let value = valueParts.join("=");
+    if (line.startsWith('#') || !line.includes('=')) continue
+    const [key, ...valueParts] = line.split('=')
+    let value = valueParts.join('=')
 
-    if (value.toLowerCase() === "true" || value.toLowerCase() === "false") {
-      value = value.toLowerCase() === "true";
-    } else if (!isNaN(value as any) && value !== "") {
-      value = Number(value);
+    if (value.toLowerCase() === 'true' || value.toLowerCase() === 'false') {
+      value = value.toLowerCase() === 'true'
+    } else if (!isNaN(value as any) && value !== '') {
+      value = Number(value)
     }
 
-    properties[key.trim()] = value;
+    properties[key.trim()] = value
   }
 
-  return properties;
-});
+  return properties
+})
 
-const liveProperties = ref<Record<string, any>>({});
-const originalProperties = ref<Record<string, any>>({});
+const liveProperties = ref<Record<string, any>>({})
+const originalProperties = ref<Record<string, any>>({})
 
 watch(
   propsData,
   (newPropsData) => {
     if (newPropsData) {
-      liveProperties.value = JSON.parse(JSON.stringify(newPropsData));
-      originalProperties.value = JSON.parse(JSON.stringify(newPropsData));
+      liveProperties.value = JSON.parse(JSON.stringify(newPropsData))
+      originalProperties.value = JSON.parse(JSON.stringify(newPropsData))
     }
   },
   { immediate: true },
-);
+)
 
 const hasUnsavedChanges = computed(() => {
   return Object.keys(liveProperties.value).some(
     (key) =>
       JSON.stringify(liveProperties.value[key]) !== JSON.stringify(originalProperties.value[key]),
-  );
-});
+  )
+})
 
 const getDifficultyOptions = () => {
   const pre113Versions = tags.value.gameVersions
     .filter((v) => {
-      const versionNumbers = v.version.split(".").map(Number);
-      return versionNumbers[0] === 1 && versionNumbers[1] < 13;
+      const versionNumbers = v.version.split('.').map(Number)
+      return versionNumbers[0] === 1 && versionNumbers[1] < 13
     })
-    .map((v) => v.version);
+    .map((v) => v.version)
   if (data.value?.mc_version && pre113Versions.includes(data.value.mc_version)) {
-    return ["0", "1", "2", "3"];
+    return ['0', '1', '2', '3']
   } else {
-    return ["peaceful", "easy", "normal", "hard"];
+    return ['peaceful', 'easy', 'normal', 'hard']
   }
-};
+}
 
 const overrides: { [key: string]: { type: string; options?: string[]; info?: string } } = {
   difficulty: {
-    type: "dropdown",
+    type: 'dropdown',
     options: getDifficultyOptions(),
   },
   gamemode: {
-    type: "dropdown",
-    options: ["survival", "creative", "adventure", "spectator"],
+    type: 'dropdown',
+    options: ['survival', 'creative', 'adventure', 'spectator'],
   },
-};
+}
 
 const fuse = computed(() => {
-  if (!liveProperties.value) return null;
+  if (!liveProperties.value) return null
 
   const propertiesToFuse = Object.entries(liveProperties.value).map(([key, value]) => ({
     key,
     value: String(value),
-  }));
+  }))
 
   return new Fuse(propertiesToFuse, {
-    keys: ["key", "value"],
+    keys: ['key', 'value'],
     threshold: 0.2,
-  });
-});
+  })
+})
 
 const filteredProperties = computed(() => {
   if (!searchInput.value?.trim()) {
-    return liveProperties.value;
+    return liveProperties.value
   }
 
-  const results = fuse.value?.search(searchInput.value) ?? [];
+  const results = fuse.value?.search(searchInput.value) ?? []
 
-  return Object.fromEntries(results.map(({ item }) => [item.key, liveProperties.value[item.key]]));
-});
+  return Object.fromEntries(results.map(({ item }) => [item.key, liveProperties.value[item.key]]))
+})
 
 const constructServerProperties = (): string => {
-  const properties = liveProperties.value;
+  const properties = liveProperties.value
 
-  let fileContent = `#Minecraft server properties\n#${new Date().toUTCString()}\n`;
+  let fileContent = `#Minecraft server properties\n#${new Date().toUTCString()}\n`
 
   for (const [key, value] of Object.entries(properties)) {
-    if (typeof value === "object") {
-      fileContent += `${key}=${JSON.stringify(value)}\n`;
-    } else if (typeof value === "boolean") {
-      fileContent += `${key}=${value ? "true" : "false"}\n`;
+    if (typeof value === 'object') {
+      fileContent += `${key}=${JSON.stringify(value)}\n`
+    } else if (typeof value === 'boolean') {
+      fileContent += `${key}=${value ? 'true' : 'false'}\n`
     } else {
-      fileContent += `${key}=${value}\n`;
+      fileContent += `${key}=${value}\n`
     }
   }
 
-  return fileContent;
-};
+  return fileContent
+}
 
 const saveProperties = async () => {
   try {
-    isUpdating.value = true;
-    await props.server.fs?.updateFile("server.properties", constructServerProperties());
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    originalProperties.value = JSON.parse(JSON.stringify(liveProperties.value));
-    await props.server.refresh();
+    isUpdating.value = true
+    await props.server.fs?.updateFile('server.properties', constructServerProperties())
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    originalProperties.value = JSON.parse(JSON.stringify(liveProperties.value))
+    await props.server.refresh()
     addNotification({
-      group: "serverOptions",
-      type: "success",
-      title: "Server properties updated",
-      text: "Your server properties were successfully changed.",
-    });
+      group: 'serverOptions',
+      type: 'success',
+      title: 'Server properties updated',
+      text: 'Your server properties were successfully changed.',
+    })
   } catch (error) {
-    console.error("Error updating server properties:", error);
+    console.error('Error updating server properties:', error)
     addNotification({
-      group: "serverOptions",
-      type: "error",
-      title: "Failed to update server properties",
-      text: "An error occurred while attempting to update your server properties.",
-    });
+      group: 'serverOptions',
+      type: 'error',
+      title: 'Failed to update server properties',
+      text: 'An error occurred while attempting to update your server properties.',
+    })
   } finally {
-    isUpdating.value = false;
+    isUpdating.value = false
   }
-};
+}
 
 const resetProperties = async () => {
-  liveProperties.value = JSON.parse(JSON.stringify(originalProperties.value));
-  await new Promise((resolve) => setTimeout(resolve, 200));
-};
+  liveProperties.value = JSON.parse(JSON.stringify(originalProperties.value))
+  await new Promise((resolve) => setTimeout(resolve, 200))
+}
 
 const formatPropertyName = (propertyName: string): string => {
   return propertyName
     .split(/[-.]/)
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" ");
-};
+    .join(' ')
+}
 
 const isComplexProperty = (property: any): boolean => {
   return (
-    typeof property === "object" ||
-    (typeof property === "string" &&
-      (property.includes(",") ||
-        property.includes("{") ||
-        property.includes("}") ||
-        property.includes("[") ||
-        property.includes("]") ||
+    typeof property === 'object' ||
+    (typeof property === 'string' &&
+      (property.includes(',') ||
+        property.includes('{') ||
+        property.includes('}') ||
+        property.includes('[') ||
+        property.includes(']') ||
         property.length > 30))
-  );
-};
+  )
+}
 </script>
 
 <style scoped>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
index 17e5eddb7..1ad0e5643 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
@@ -112,120 +112,120 @@
 </template>
 
 <script setup lang="ts">
-import { IssuesIcon,UpdatedIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { IssuesIcon, UpdatedIcon } from '@modrinth/assets'
+import { ButtonStyled } from '@modrinth/ui'
 
-import type { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
+import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 
 const props = defineProps<{
-  server: ModrinthServer;
-}>();
+  server: ModrinthServer
+}>()
 
-await props.server.startup.fetch();
+await props.server.startup.fetch()
 
-const data = computed(() => props.server.general);
-const showAllVersions = ref(false);
+const data = computed(() => props.server.general)
+const showAllVersions = ref(false)
 
 const jdkVersionMap = [
-  { value: "lts8", label: "Java 8" },
-  { value: "lts11", label: "Java 11" },
-  { value: "lts17", label: "Java 17" },
-  { value: "lts21", label: "Java 21" },
-];
+  { value: 'lts8', label: 'Java 8' },
+  { value: 'lts11', label: 'Java 11' },
+  { value: 'lts17', label: 'Java 17' },
+  { value: 'lts21', label: 'Java 21' },
+]
 
 const jdkBuildMap = [
-  { value: "corretto", label: "Corretto" },
-  { value: "temurin", label: "Temurin" },
-  { value: "graal", label: "GraalVM" },
-];
+  { value: 'corretto', label: 'Corretto' },
+  { value: 'temurin', label: 'Temurin' },
+  { value: 'graal', label: 'GraalVM' },
+]
 
-const invocation = ref(props.server.startup.invocation);
+const invocation = ref(props.server.startup.invocation)
 const jdkVersion = ref(
   jdkVersionMap.find((v) => v.value === props.server.startup.jdk_version)?.label,
-);
-const jdkBuild = ref(jdkBuildMap.find((v) => v.value === props.server.startup.jdk_build)?.label);
+)
+const jdkBuild = ref(jdkBuildMap.find((v) => v.value === props.server.startup.jdk_build)?.label)
 
-const originalInvocation = ref(invocation.value);
-const originalJdkVersion = ref(jdkVersion.value);
-const originalJdkBuild = ref(jdkBuild.value);
+const originalInvocation = ref(invocation.value)
+const originalJdkVersion = ref(jdkVersion.value)
+const originalJdkBuild = ref(jdkBuild.value)
 
 const hasUnsavedChanges = computed(
   () =>
     invocation.value !== originalInvocation.value ||
     jdkVersion.value !== originalJdkVersion.value ||
     jdkBuild.value !== originalJdkBuild.value,
-);
+)
 
-const isUpdating = ref(false);
+const isUpdating = ref(false)
 
 const compatibleJavaVersions = computed(() => {
-  const mcVersion = data.value?.mc_version ?? "";
-  if (!mcVersion) return jdkVersionMap.map((v) => v.label);
+  const mcVersion = data.value?.mc_version ?? ''
+  if (!mcVersion) return jdkVersionMap.map((v) => v.label)
 
-  const [major, minor] = mcVersion.split(".").map(Number);
+  const [major, minor] = mcVersion.split('.').map(Number)
 
   if (major >= 1) {
-    if (minor >= 20) return ["Java 21"];
-    if (minor >= 18) return ["Java 17", "Java 21"];
-    if (minor >= 17) return ["Java 16", "Java 17", "Java 21"];
-    if (minor >= 12) return ["Java 8", "Java 11", "Java 17", "Java 21"];
-    if (minor >= 6) return ["Java 8", "Java 11"];
+    if (minor >= 20) return ['Java 21']
+    if (minor >= 18) return ['Java 17', 'Java 21']
+    if (minor >= 17) return ['Java 16', 'Java 17', 'Java 21']
+    if (minor >= 12) return ['Java 8', 'Java 11', 'Java 17', 'Java 21']
+    if (minor >= 6) return ['Java 8', 'Java 11']
   }
 
-  return ["Java 8"];
-});
+  return ['Java 8']
+})
 
 const displayedJavaVersions = computed(() => {
-  return showAllVersions.value ? jdkVersionMap.map((v) => v.label) : compatibleJavaVersions.value;
-});
+  return showAllVersions.value ? jdkVersionMap.map((v) => v.label) : compatibleJavaVersions.value
+})
 
 async function saveStartup() {
   try {
-    isUpdating.value = true;
-    const invocationValue = invocation.value ?? "";
-    const jdkVersionKey = jdkVersionMap.find((v) => v.label === jdkVersion.value)?.value;
-    const jdkBuildKey = jdkBuildMap.find((v) => v.label === jdkBuild.value)?.value;
-    await props.server.startup?.update(invocationValue, jdkVersionKey as any, jdkBuildKey as any);
+    isUpdating.value = true
+    const invocationValue = invocation.value ?? ''
+    const jdkVersionKey = jdkVersionMap.find((v) => v.label === jdkVersion.value)?.value
+    const jdkBuildKey = jdkBuildMap.find((v) => v.label === jdkBuild.value)?.value
+    await props.server.startup?.update(invocationValue, jdkVersionKey as any, jdkBuildKey as any)
 
-    await new Promise((resolve) => setTimeout(resolve, 10));
+    await new Promise((resolve) => setTimeout(resolve, 10))
 
-    await props.server.refresh(["startup"]);
+    await props.server.refresh(['startup'])
 
     if (props.server.startup) {
-      invocation.value = props.server.startup.invocation;
+      invocation.value = props.server.startup.invocation
       jdkVersion.value =
-        jdkVersionMap.find((v) => v.value === props.server.startup?.jdk_version)?.label || "";
+        jdkVersionMap.find((v) => v.value === props.server.startup?.jdk_version)?.label || ''
       jdkBuild.value =
-        jdkBuildMap.find((v) => v.value === props.server.startup?.jdk_build)?.label || "";
+        jdkBuildMap.find((v) => v.value === props.server.startup?.jdk_build)?.label || ''
     }
 
     addNotification({
-      group: "serverOptions",
-      type: "success",
-      title: "Server settings updated",
-      text: "Your server settings were successfully changed.",
-    });
+      group: 'serverOptions',
+      type: 'success',
+      title: 'Server settings updated',
+      text: 'Your server settings were successfully changed.',
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
     addNotification({
-      group: "serverOptions",
-      type: "error",
-      title: "Failed to update server arguments",
-      text: "Please try again later.",
-    });
+      group: 'serverOptions',
+      type: 'error',
+      title: 'Failed to update server arguments',
+      text: 'Please try again later.',
+    })
   } finally {
-    isUpdating.value = false;
+    isUpdating.value = false
   }
 }
 
 function resetStartup() {
-  invocation.value = originalInvocation.value;
-  jdkVersion.value = originalJdkVersion.value;
-  jdkBuild.value = originalJdkBuild.value;
+  invocation.value = originalInvocation.value
+  jdkVersion.value = originalJdkVersion.value
+  jdkBuild.value = originalJdkBuild.value
 }
 
 function resetToDefault() {
-  invocation.value = originalInvocation.value ?? "";
+  invocation.value = originalInvocation.value ?? ''
 }
 </script>
 
diff --git a/apps/frontend/src/pages/servers/manage/index.vue b/apps/frontend/src/pages/servers/manage/index.vue
index d3d73c6ac..fc4386d73 100644
--- a/apps/frontend/src/pages/servers/manage/index.vue
+++ b/apps/frontend/src/pages/servers/manage/index.vue
@@ -108,104 +108,104 @@
 </template>
 
 <script setup lang="ts">
-import { HammerIcon, PlusIcon, SearchIcon } from "@modrinth/assets";
-import { ButtonStyled, CopyCode } from "@modrinth/ui";
-import type { ModrinthServersFetchError,Server } from "@modrinth/utils";
-import Fuse from "fuse.js";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { HammerIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
+import { ButtonStyled, CopyCode } from '@modrinth/ui'
+import type { ModrinthServersFetchError, Server } from '@modrinth/utils'
+import Fuse from 'fuse.js'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { reloadNuxtApp } from "#app";
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+import { reloadNuxtApp } from '#app'
+import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
 useHead({
-  title: "Servers - Modrinth",
-});
+  title: 'Servers - Modrinth',
+})
 
 interface ServerResponse {
-  servers: Server[];
+  servers: Server[]
 }
 
-const router = useRouter();
-const route = useRoute();
-const hasError = ref(false);
-const isPollingForNewServers = ref(false);
+const router = useRouter()
+const route = useRoute()
+const hasError = ref(false)
+const isPollingForNewServers = ref(false)
 
 const {
   data: serverResponse,
   error: fetchError,
   refresh,
-} = await useAsyncData<ServerResponse>("ServerList", () =>
-  useServersFetch<ServerResponse>("servers"),
-);
+} = await useAsyncData<ServerResponse>('ServerList', () =>
+  useServersFetch<ServerResponse>('servers'),
+)
 
 watch([fetchError, serverResponse], ([error, response]) => {
-  hasError.value = !!error || !response;
-});
+  hasError.value = !!error || !response
+})
 
 const serverList = computed(() => {
-  if (!serverResponse.value) return [];
-  return serverResponse.value.servers;
-});
+  if (!serverResponse.value) return []
+  return serverResponse.value.servers
+})
 
-const searchInput = ref("");
+const searchInput = ref('')
 
 const fuse = computed(() => {
-  if (serverList.value.length === 0) return null;
+  if (serverList.value.length === 0) return null
   return new Fuse(serverList.value, {
-    keys: ["name", "loader", "mc_version", "game", "state"],
+    keys: ['name', 'loader', 'mc_version', 'game', 'state'],
     includeScore: true,
     threshold: 0.4,
-  });
-});
+  })
+})
 
 function introToTop(array: Server[]): Server[] {
   return array.slice().sort((a, b) => {
-    return Number(b.flows?.intro) - Number(a.flows?.intro);
-  });
+    return Number(b.flows?.intro) - Number(a.flows?.intro)
+  })
 }
 
 const filteredData = computed(() => {
   if (!searchInput.value.trim()) {
-    return introToTop(serverList.value);
+    return introToTop(serverList.value)
   }
   return fuse.value
     ? introToTop(fuse.value.search(searchInput.value).map((result) => result.item))
-    : [];
-});
+    : []
+})
 
-const previousServerList = ref<Server[]>([]);
-const refreshCount = ref(0);
+const previousServerList = ref<Server[]>([])
+const refreshCount = ref(0)
 
 const checkForNewServers = async () => {
-  await refresh();
-  refreshCount.value += 1;
+  await refresh()
+  refreshCount.value += 1
   if (JSON.stringify(previousServerList.value) !== JSON.stringify(serverList.value)) {
-    isPollingForNewServers.value = false;
-    clearInterval(intervalId);
-    router.replace({ query: {} });
+    isPollingForNewServers.value = false
+    clearInterval(intervalId)
+    router.replace({ query: {} })
   } else if (refreshCount.value >= 5) {
-    isPollingForNewServers.value = false;
-    clearInterval(intervalId);
+    isPollingForNewServers.value = false
+    clearInterval(intervalId)
   }
-};
+}
 
-let intervalId: ReturnType<typeof setInterval> | undefined;
+let intervalId: ReturnType<typeof setInterval> | undefined
 
 onMounted(() => {
-  if (route.query.redirect_status === "succeeded") {
-    isPollingForNewServers.value = true;
-    previousServerList.value = [...serverList.value];
-    intervalId = setInterval(checkForNewServers, 5000);
+  if (route.query.redirect_status === 'succeeded') {
+    isPollingForNewServers.value = true
+    previousServerList.value = [...serverList.value]
+    intervalId = setInterval(checkForNewServers, 5000)
   }
-});
+})
 
 onUnmounted(() => {
   if (intervalId) {
-    clearInterval(intervalId);
+    clearInterval(intervalId)
   }
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/settings.vue b/apps/frontend/src/pages/settings.vue
index 419b8347c..c25545224 100644
--- a/apps/frontend/src/pages/settings.vue
+++ b/apps/frontend/src/pages/settings.vue
@@ -89,15 +89,15 @@ import {
   ServerIcon,
   ShieldIcon,
   UserIcon,
-} from "@modrinth/assets";
-import { commonMessages, commonSettingsMessages } from "@modrinth/ui";
+} from '@modrinth/assets'
+import { commonMessages, commonSettingsMessages } from '@modrinth/ui'
 
-import NavStack from "~/components/ui/NavStack.vue";
-import NavStackItem from "~/components/ui/NavStackItem.vue";
+import NavStack from '~/components/ui/NavStack.vue'
+import NavStackItem from '~/components/ui/NavStackItem.vue'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
-const route = useNativeRoute();
-const auth = await useAuth();
-const isStaging = useRuntimeConfig().public.siteUrl !== "https://modrinth.com";
+const route = useNativeRoute()
+const auth = await useAuth()
+const isStaging = useRuntimeConfig().public.siteUrl !== 'https://modrinth.com'
 </script>
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 0c025730e..b11f6bce0 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -327,11 +327,11 @@
             class="iconified-button"
             @click="
               () => {
-                oldPassword = '';
-                newPassword = '';
-                confirmNewPassword = '';
-                removePasswordMode = false;
-                $refs.managePasswordModal.show();
+                oldPassword = ''
+                newPassword = ''
+                confirmNewPassword = ''
+                removePasswordMode = false
+                $refs.managePasswordModal.show()
               }
             "
           >
@@ -419,247 +419,247 @@ import {
   TrashIcon,
   UpdatedIcon,
   XIcon,
-} from "@modrinth/assets";
-import { ConfirmModal } from "@modrinth/ui";
-import KeyIcon from "assets/icons/auth/key.svg";
-import DiscordIcon from "assets/icons/auth/sso-discord.svg";
-import GithubIcon from "assets/icons/auth/sso-github.svg";
-import GitLabIcon from "assets/icons/auth/sso-gitlab.svg";
-import GoogleIcon from "assets/icons/auth/sso-google.svg";
-import MicrosoftIcon from "assets/icons/auth/sso-microsoft.svg";
-import SteamIcon from "assets/icons/auth/sso-steam.svg";
-import QrcodeVue from "qrcode.vue";
+} from '@modrinth/assets'
+import { ConfirmModal } from '@modrinth/ui'
+import KeyIcon from 'assets/icons/auth/key.svg'
+import DiscordIcon from 'assets/icons/auth/sso-discord.svg'
+import GithubIcon from 'assets/icons/auth/sso-github.svg'
+import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg'
+import GoogleIcon from 'assets/icons/auth/sso-google.svg'
+import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg'
+import SteamIcon from 'assets/icons/auth/sso-steam.svg'
+import QrcodeVue from 'qrcode.vue'
 
-import Modal from "~/components/ui/Modal.vue";
+import Modal from '~/components/ui/Modal.vue'
 
 useHead({
-  title: "Account settings - Modrinth",
-});
+  title: 'Account settings - Modrinth',
+})
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
-const data = useNuxtApp();
-const auth = await useAuth();
+const data = useNuxtApp()
+const auth = await useAuth()
 
-const changeEmailModal = ref();
-const email = ref(auth.value.user.email);
+const changeEmailModal = ref()
+const email = ref(auth.value.user.email)
 async function saveEmail() {
   if (!email.value) {
-    return;
+    return
   }
 
-  startLoading();
+  startLoading()
   try {
     await useBaseFetch(`auth/email`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: {
         email: email.value,
       },
-    });
-    changeEmailModal.value.hide();
-    await useAuth(auth.value.token);
+    })
+    changeEmailModal.value.hide()
+    await useAuth(auth.value.token)
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 
-const managePasswordModal = ref();
-const removePasswordMode = ref(false);
-const oldPassword = ref("");
-const newPassword = ref("");
-const confirmNewPassword = ref("");
+const managePasswordModal = ref()
+const removePasswordMode = ref(false)
+const oldPassword = ref('')
+const newPassword = ref('')
+const confirmNewPassword = ref('')
 async function savePassword() {
   if (newPassword.value !== confirmNewPassword.value) {
-    return;
+    return
   }
 
-  startLoading();
+  startLoading()
   try {
     await useBaseFetch(`auth/password`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: {
         old_password: auth.value.user.has_password ? oldPassword.value : null,
         new_password: removePasswordMode.value ? null : newPassword.value,
       },
-    });
-    managePasswordModal.value.hide();
-    await useAuth(auth.value.token);
+    })
+    managePasswordModal.value.hide()
+    await useAuth(auth.value.token)
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 
-const manageTwoFactorModal = ref();
-const twoFactorSecret = ref(null);
-const twoFactorFlow = ref(null);
-const twoFactorStep = ref(0);
+const manageTwoFactorModal = ref()
+const twoFactorSecret = ref(null)
+const twoFactorFlow = ref(null)
+const twoFactorStep = ref(0)
 async function showTwoFactorModal() {
-  twoFactorStep.value = 0;
-  twoFactorCode.value = null;
-  twoFactorIncorrect.value = false;
+  twoFactorStep.value = 0
+  twoFactorCode.value = null
+  twoFactorIncorrect.value = false
   if (auth.value.user.has_totp) {
-    manageTwoFactorModal.value.show();
-    return;
+    manageTwoFactorModal.value.show()
+    return
   }
 
-  twoFactorSecret.value = null;
-  twoFactorFlow.value = null;
-  backupCodes.value = [];
-  manageTwoFactorModal.value.show();
+  twoFactorSecret.value = null
+  twoFactorFlow.value = null
+  backupCodes.value = []
+  manageTwoFactorModal.value.show()
 
-  startLoading();
+  startLoading()
   try {
-    const res = await useBaseFetch("auth/2fa/get_secret", {
-      method: "POST",
-    });
+    const res = await useBaseFetch('auth/2fa/get_secret', {
+      method: 'POST',
+    })
 
-    twoFactorSecret.value = res.secret;
-    twoFactorFlow.value = res.flow;
+    twoFactorSecret.value = res.secret
+    twoFactorFlow.value = res.flow
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 
-const twoFactorIncorrect = ref(false);
-const twoFactorCode = ref(null);
-const backupCodes = ref([]);
+const twoFactorIncorrect = ref(false)
+const twoFactorCode = ref(null)
+const backupCodes = ref([])
 async function verifyTwoFactorCode() {
-  startLoading();
+  startLoading()
   try {
-    const res = await useBaseFetch("auth/2fa", {
-      method: "POST",
+    const res = await useBaseFetch('auth/2fa', {
+      method: 'POST',
       body: {
-        code: twoFactorCode.value ? twoFactorCode.value : "",
+        code: twoFactorCode.value ? twoFactorCode.value : '',
         flow: twoFactorFlow.value,
       },
-    });
+    })
 
-    backupCodes.value = res.backup_codes;
-    twoFactorStep.value = 2;
-    await useAuth(auth.value.token);
+    backupCodes.value = res.backup_codes
+    twoFactorStep.value = 2
+    await useAuth(auth.value.token)
   } catch {
-    twoFactorIncorrect.value = true;
+    twoFactorIncorrect.value = true
   }
-  stopLoading();
+  stopLoading()
 }
 
 async function removeTwoFactor() {
-  startLoading();
+  startLoading()
   try {
-    await useBaseFetch("auth/2fa", {
-      method: "DELETE",
+    await useBaseFetch('auth/2fa', {
+      method: 'DELETE',
       body: {
-        code: twoFactorCode.value ? twoFactorCode.value.toString() : "",
+        code: twoFactorCode.value ? twoFactorCode.value.toString() : '',
       },
-    });
-    manageTwoFactorModal.value.hide();
-    await useAuth(auth.value.token);
+    })
+    manageTwoFactorModal.value.hide()
+    await useAuth(auth.value.token)
   } catch {
-    twoFactorIncorrect.value = true;
+    twoFactorIncorrect.value = true
   }
-  stopLoading();
+  stopLoading()
 }
 
 const authProviders = [
   {
-    id: "github",
-    display: "GitHub",
+    id: 'github',
+    display: 'GitHub',
     icon: GithubIcon,
   },
   {
-    id: "gitlab",
-    display: "GitLab",
+    id: 'gitlab',
+    display: 'GitLab',
     icon: GitLabIcon,
   },
   {
-    id: "steam",
-    display: "Steam",
+    id: 'steam',
+    display: 'Steam',
     icon: SteamIcon,
   },
   {
-    id: "discord",
-    display: "Discord",
+    id: 'discord',
+    display: 'Discord',
     icon: DiscordIcon,
   },
   {
-    id: "microsoft",
-    display: "Microsoft",
+    id: 'microsoft',
+    display: 'Microsoft',
     icon: MicrosoftIcon,
   },
   {
-    id: "google",
-    display: "Google",
+    id: 'google',
+    display: 'Google',
     icon: GoogleIcon,
   },
-];
+]
 
 async function deleteAccount() {
-  startLoading();
+  startLoading()
   try {
     await useBaseFetch(`user/${auth.value.user.id}`, {
-      method: "DELETE",
-    });
+      method: 'DELETE',
+    })
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
 
-  useCookie("auth-token").value = null;
-  window.location.href = "/";
+  useCookie('auth-token').value = null
+  window.location.href = '/'
 
-  stopLoading();
+  stopLoading()
 }
 
-const generatingExport = ref(false);
-const generated = ref();
+const generatingExport = ref(false)
+const generated = ref()
 async function exportData() {
-  startLoading();
-  generatingExport.value = true;
+  startLoading()
+  generatingExport.value = true
   try {
-    const res = await useBaseFetch("gdpr/export", {
-      method: "POST",
+    const res = await useBaseFetch('gdpr/export', {
+      method: 'POST',
       internal: true,
-    });
+    })
 
-    const jsonString = JSON.stringify(res, null, 2);
+    const jsonString = JSON.stringify(res, null, 2)
 
-    const blob = new Blob([jsonString], { type: "application/json" });
-    generated.value = URL.createObjectURL(blob);
+    const blob = new Blob([jsonString], { type: 'application/json' })
+    generated.value = URL.createObjectURL(blob)
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
 
-  generatingExport.value = false;
-  stopLoading();
+  generatingExport.value = false
+  stopLoading()
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index db42f7125..826f3cb7b 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -134,13 +134,13 @@
         class="btn btn-primary"
         @click="
           () => {
-            name = null;
-            icon = null;
-            scopesVal = 0;
-            redirectUris = [''];
-            editingId = null;
-            expires = null;
-            $refs.appModal.show();
+            name = null
+            icon = null
+            scopesVal = 0
+            redirectUris = ['']
+            editingId = null
+            expires = null
+            $refs.appModal.show()
           }
         "
       >
@@ -189,8 +189,8 @@
               setForm({
                 ...app,
                 redirect_uris: app.redirect_uris.map((u) => u.uri) || [],
-              });
-              $refs.appModal.show();
+              })
+              $refs.appModal.show()
             }
           "
         >
@@ -202,8 +202,8 @@
           icon-only
           @click="
             () => {
-              editingId = app.id;
-              $refs.modal_confirm.show();
+              editingId = app.id
+              $refs.modal_confirm.show()
             }
           "
         >
@@ -215,7 +215,7 @@
   </div>
 </template>
 <script setup>
-import { EditIcon, PlusIcon, SaveIcon,TrashIcon, UploadIcon, XIcon } from "@modrinth/assets";
+import { EditIcon, PlusIcon, SaveIcon, TrashIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import {
   Avatar,
   Button,
@@ -224,50 +224,50 @@ import {
   ConfirmModal,
   CopyCode,
   FileInput,
-} from "@modrinth/ui";
+} from '@modrinth/ui'
 
-import Modal from "~/components/ui/Modal.vue";
+import Modal from '~/components/ui/Modal.vue'
 import {
   getScopeValue,
   hasScope,
   scopeList,
   toggleScope,
   useScopes,
-} from "~/composables/auth/scopes.ts";
+} from '~/composables/auth/scopes.ts'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
 useHead({
-  title: "Applications - Modrinth",
-});
+  title: 'Applications - Modrinth',
+})
 
-const data = useNuxtApp();
-const { scopesToLabels } = useScopes();
+const data = useNuxtApp()
+const { scopesToLabels } = useScopes()
 
-const appModal = ref();
+const appModal = ref()
 
 // Any apps created in the current state will be stored here
 // Users can copy Client Secrets and such before the page reloads
-const createdApps = ref([]);
+const createdApps = ref([])
 
-const editingId = ref(null);
-const name = ref(null);
-const icon = ref(null);
-const scopesVal = ref(BigInt(0));
-const redirectUris = ref([""]);
-const url = ref(null);
-const description = ref(null);
+const editingId = ref(null)
+const name = ref(null)
+const icon = ref(null)
+const scopesVal = ref(BigInt(0))
+const redirectUris = ref([''])
+const url = ref(null)
+const description = ref(null)
 
-const loading = ref(false);
+const loading = ref(false)
 
-const auth = await useAuth();
+const auth = await useAuth()
 
 const { data: usersApps, refresh } = await useAsyncData(
-  "usersApps",
+  'usersApps',
   () =>
     useBaseFetch(`user/${auth.value.user.id}/oauth_apps`, {
       apiVersion: 3,
@@ -275,89 +275,89 @@ const { data: usersApps, refresh } = await useAsyncData(
   {
     watch: [auth],
   },
-);
+)
 
 const setForm = (app) => {
   if (app?.id) {
-    editingId.value = app.id;
+    editingId.value = app.id
   } else {
-    editingId.value = null;
+    editingId.value = null
   }
-  name.value = app?.name || "";
-  icon.value = app?.icon_url || "";
-  scopesVal.value = app?.max_scopes || BigInt(0);
-  url.value = app?.url || "";
-  description.value = app?.description || "";
+  name.value = app?.name || ''
+  icon.value = app?.icon_url || ''
+  scopesVal.value = app?.max_scopes || BigInt(0)
+  url.value = app?.url || ''
+  description.value = app?.description || ''
 
   if (app?.redirect_uris) {
-    redirectUris.value = app.redirect_uris.map((uri) => uri?.uri || uri);
+    redirectUris.value = app.redirect_uris.map((uri) => uri?.uri || uri)
   } else {
-    redirectUris.value = [""];
+    redirectUris.value = ['']
   }
-};
+}
 
 const canSubmit = computed(() => {
   // Make sure name, scopes, and return uri are at least filled in
   const filledIn =
-    name.value && name.value !== "" && name.value?.length > 2 && redirectUris.value.length > 0;
+    name.value && name.value !== '' && name.value?.length > 2 && redirectUris.value.length > 0
   // Make sure the redirect uris are either one empty string or all filled in with valid urls
-  const oneValid = redirectUris.value.length === 1 && redirectUris.value[0] === "";
-  let allValid;
+  const oneValid = redirectUris.value.length === 1 && redirectUris.value[0] === ''
+  let allValid
   try {
     allValid = redirectUris.value.every((uri) => {
-      const url = new URL(uri);
-      return !!url;
-    });
+      const url = new URL(uri)
+      return !!url
+    })
   } catch {
-    allValid = false;
+    allValid = false
   }
-  return filledIn && (oneValid || allValid);
-});
+  return filledIn && (oneValid || allValid)
+})
 
 const clientCreatedInState = (id) => {
-  return createdApps.value.find((app) => app.id === id);
-};
+  return createdApps.value.find((app) => app.id === id)
+}
 
 async function onImageSelection(files) {
   if (!editingId.value) {
-    throw new Error("No editing id");
+    throw new Error('No editing id')
   }
 
   if (files.length > 0) {
-    const file = files[0];
-    const extFromType = file.type.split("/")[1];
+    const file = files[0]
+    const extFromType = file.type.split('/')[1]
 
-    await useBaseFetch("oauth/app/" + editingId.value + "/icon", {
-      method: "PATCH",
+    await useBaseFetch('oauth/app/' + editingId.value + '/icon', {
+      method: 'PATCH',
       internal: true,
       body: file,
       query: {
         ext: extFromType,
       },
-    });
+    })
 
-    await refresh();
+    await refresh()
 
-    const app = usersApps.value.find((app) => app.id === editingId.value);
+    const app = usersApps.value.find((app) => app.id === editingId.value)
     if (app) {
-      setForm(app);
+      setForm(app)
     }
 
     data.$notify({
-      group: "main",
-      title: "Icon updated",
-      text: "Your application icon has been updated.",
-      type: "success",
-    });
+      group: 'main',
+      title: 'Icon updated',
+      text: 'Your application icon has been updated.',
+      type: 'success',
+    })
   }
 }
 
 async function createApp() {
-  startLoading();
-  loading.value = true;
+  startLoading()
+  loading.value = true
   try {
-    const createdAppInfo = await useBaseFetch("oauth/app", {
-      method: "POST",
+    const createdAppInfo = await useBaseFetch('oauth/app', {
+      method: 'POST',
       internal: true,
       body: {
         name: name.value,
@@ -365,38 +365,38 @@ async function createApp() {
         max_scopes: Number(scopesVal.value), // JS is 52 bit for ints so we're good for now
         redirect_uris: redirectUris.value,
       },
-    });
+    })
 
-    createdApps.value.push(createdAppInfo);
+    createdApps.value.push(createdAppInfo)
 
-    setForm(null);
-    appModal.value.hide();
+    setForm(null)
+    appModal.value.hide()
 
-    await refresh();
+    await refresh()
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  loading.value = false;
-  stopLoading();
+  loading.value = false
+  stopLoading()
 }
 
 async function editApp() {
-  startLoading();
-  loading.value = true;
+  startLoading()
+  loading.value = true
   try {
     if (!editingId.value) {
-      throw new Error("No editing id");
+      throw new Error('No editing id')
     }
 
     // check if there's any difference between the current app and the one in the state
-    const app = usersApps.value.find((app) => app.id === editingId.value);
+    const app = usersApps.value.find((app) => app.id === editingId.value)
     if (!app) {
-      throw new Error("No app found");
+      throw new Error('No app found')
     }
 
     if (
@@ -407,74 +407,74 @@ async function editApp() {
       app.url === url.value &&
       app.description === description.value
     ) {
-      setForm(null);
-      editingId.value = null;
-      appModal.value.hide();
-      throw new Error("No changes detected");
+      setForm(null)
+      editingId.value = null
+      appModal.value.hide()
+      throw new Error('No changes detected')
     }
 
     const body = {
       name: name.value,
       max_scopes: Number(scopesVal.value), // JS is 52 bit for ints so we're good for now
       redirect_uris: redirectUris.value,
-    };
+    }
 
     if (url.value && url.value?.length > 0) {
-      body.url = url.value;
+      body.url = url.value
     }
 
     if (description.value && description.value?.length > 0) {
-      body.description = description.value;
+      body.description = description.value
     }
 
     if (icon.value && icon.value?.length > 0) {
-      body.icon_url = icon.value;
+      body.icon_url = icon.value
     }
 
-    await useBaseFetch("oauth/app/" + editingId.value, {
-      method: "PATCH",
+    await useBaseFetch('oauth/app/' + editingId.value, {
+      method: 'PATCH',
       internal: true,
       body,
-    });
+    })
 
-    await refresh();
-    setForm(null);
-    editingId.value = null;
+    await refresh()
+    setForm(null)
+    editingId.value = null
 
-    appModal.value.hide();
+    appModal.value.hide()
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  loading.value = false;
-  stopLoading();
+  loading.value = false
+  stopLoading()
 }
 
 async function removeApp() {
-  startLoading();
+  startLoading()
   try {
     if (!editingId.value) {
-      throw new Error("No editing id");
+      throw new Error('No editing id')
     }
     await useBaseFetch(`oauth/app/${editingId.value}`, {
       internal: true,
-      method: "DELETE",
-    });
-    await refresh();
-    editingId.value = null;
+      method: 'DELETE',
+    })
+    await refresh()
+    editingId.value = null
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/settings/authorizations.vue b/apps/frontend/src/pages/settings/authorizations.vue
index f97ce445b..7442df35e 100644
--- a/apps/frontend/src/pages/settings/authorizations.vue
+++ b/apps/frontend/src/pages/settings/authorizations.vue
@@ -75,8 +75,8 @@
           icon-only
           @click="
             () => {
-              revokingId = authorization.app_id;
-              $refs.modal_confirm.show();
+              revokingId = authorization.app_id
+              $refs.modal_confirm.show()
             }
           "
         >
@@ -88,49 +88,49 @@
   </div>
 </template>
 <script setup>
-import { CheckIcon,TrashIcon } from "@modrinth/assets";
-import { Avatar, Button, commonSettingsMessages,ConfirmModal } from "@modrinth/ui";
+import { CheckIcon, TrashIcon } from '@modrinth/assets'
+import { Avatar, Button, commonSettingsMessages, ConfirmModal } from '@modrinth/ui'
 
-import { useScopes } from "~/composables/auth/scopes.ts";
+import { useScopes } from '~/composables/auth/scopes.ts'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
-const { scopesToDefinitions } = useScopes();
+const { scopesToDefinitions } = useScopes()
 
-const revokingId = ref(null);
+const revokingId = ref(null)
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
 useHead({
-  title: "Authorizations - Modrinth",
-});
+  title: 'Authorizations - Modrinth',
+})
 
-const { data: usersApps, refresh } = await useAsyncData("userAuthorizations", () =>
+const { data: usersApps, refresh } = await useAsyncData('userAuthorizations', () =>
   useBaseFetch(`oauth/authorizations`, {
     internal: true,
   }),
-);
+)
 
 const { data: appInformation } = await useAsyncData(
-  "appInfo",
+  'appInfo',
   () =>
-    useBaseFetch("oauth/apps", {
+    useBaseFetch('oauth/apps', {
       internal: true,
       query: {
-        ids: usersApps.value.map((c) => c.app_id).join(","),
+        ids: usersApps.value.map((c) => c.app_id).join(','),
       },
     }),
   {
     watch: usersApps,
   },
-);
+)
 
 const { data: appCreatorsInformation } = await useAsyncData(
-  "appCreatorsInfo",
+  'appCreatorsInfo',
   () =>
-    useBaseFetch("users", {
+    useBaseFetch('users', {
       query: {
         ids: JSON.stringify(appInformation.value.map((c) => c.created_by)),
       },
@@ -138,38 +138,38 @@ const { data: appCreatorsInformation } = await useAsyncData(
   {
     watch: appInformation,
   },
-);
+)
 
 const appInfoLookup = computed(() => {
   return usersApps.value.map((app) => {
-    const info = appInformation.value.find((c) => c.id === app.app_id);
-    const owner = appCreatorsInformation.value.find((c) => c.id === info.created_by);
+    const info = appInformation.value.find((c) => c.id === app.app_id)
+    const owner = appCreatorsInformation.value.find((c) => c.id === info.created_by)
     return {
       ...app,
       app: info || null,
       owner: owner || null,
-    };
-  });
-});
+    }
+  })
+})
 
 async function revokeApp(id) {
   try {
     await useBaseFetch(`oauth/authorizations`, {
       internal: true,
-      method: "DELETE",
+      method: 'DELETE',
       query: {
         client_id: id,
       },
-    });
-    revokingId.value = null;
-    await refresh();
+    })
+    revokingId.value = null
+    await refresh()
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
 }
 </script>
diff --git a/apps/frontend/src/pages/settings/billing/charges.vue b/apps/frontend/src/pages/settings/billing/charges.vue
index bbf240a14..0efd2fafc 100644
--- a/apps/frontend/src/pages/settings/billing/charges.vue
+++ b/apps/frontend/src/pages/settings/billing/charges.vue
@@ -30,7 +30,7 @@
           <div class="flex items-center gap-1">
             <Badge :color="charge.status === 'succeeded' ? 'green' : 'red'" :type="charge.status" />
             ⋅
-            {{ $dayjs(charge.due).format("YYYY-MM-DD") }}
+            {{ $dayjs(charge.due).format('YYYY-MM-DD') }}
           </div>
         </div>
       </div>
@@ -38,34 +38,34 @@
   </div>
 </template>
 <script setup>
-import { Badge,Breadcrumbs } from "@modrinth/ui";
-import { formatPrice } from "@modrinth/utils";
+import { Badge, Breadcrumbs } from '@modrinth/ui'
+import { formatPrice } from '@modrinth/utils'
 
-import { products } from "~/generated/state.json";
+import { products } from '~/generated/state.json'
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
-const vintl = useVIntl();
+const vintl = useVIntl()
 
 const { data: charges } = await useAsyncData(
-  "billing/payments",
-  () => useBaseFetch("billing/payments", { internal: true }),
+  'billing/payments',
+  () => useBaseFetch('billing/payments', { internal: true }),
   {
     transform: (charges) => {
       return charges
-        .filter((charge) => charge.status !== "open" && charge.status !== "cancelled")
+        .filter((charge) => charge.status !== 'open' && charge.status !== 'cancelled')
         .map((charge) => {
           const product = products.find((product) =>
             product.prices.some((price) => price.id === charge.price_id),
-          );
+          )
 
-          charge.product = product;
+          charge.product = product
 
-          return charge;
-        });
+          return charge
+        })
     },
   },
-);
+)
 </script>
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index 4e04acb7d..7626c0da8 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -80,13 +80,13 @@
                 }}/year by switching to yearly billing!
               </span>
               <span class="text-sm text-secondary">
-                Since {{ $dayjs(midasSubscription.created).format("MMMM D, YYYY") }}
+                Since {{ $dayjs(midasSubscription.created).format('MMMM D, YYYY') }}
               </span>
               <span v-if="midasCharge.status === 'open'" class="text-sm text-secondary">
-                Renews {{ $dayjs(midasCharge.due).format("MMMM D, YYYY") }}
+                Renews {{ $dayjs(midasCharge.due).format('MMMM D, YYYY') }}
               </span>
               <span v-else-if="midasCharge.status === 'cancelled'" class="text-sm text-secondary">
-                Expires {{ $dayjs(midasCharge.due).format("MMMM D, YYYY") }}
+                Expires {{ $dayjs(midasCharge.due).format('MMMM D, YYYY') }}
               </span>
             </template>
 
@@ -107,7 +107,7 @@
               <button
                 @click="
                   () => {
-                    $refs.midasPurchaseModal.show();
+                    $refs.midasPurchaseModal.show()
                   }
                 "
               >
@@ -122,8 +122,8 @@
                   {
                     id: 'cancel',
                     action: () => {
-                      cancelSubscriptionId = midasSubscription.id;
-                      $refs.modalCancel.show();
+                      cancelSubscriptionId = midasSubscription.id
+                      $refs.modalCancel.show()
                     },
                   },
                 ]"
@@ -142,8 +142,8 @@
                 :disabled="changingInterval"
                 @click="
                   () => {
-                    cancelSubscriptionId = midasSubscription.id;
-                    $refs.modalCancel.show();
+                    cancelSubscriptionId = midasSubscription.id
+                    $refs.modalCancel.show()
                   }
                 "
               >
@@ -168,7 +168,7 @@
                 @click="switchMidasInterval(oppositeInterval)"
               >
                 <SpinnerIcon v-if="changingInterval" class="animate-spin" />
-                <TransferIcon v-else /> {{ changingInterval ? "Switching" : "Switch" }} to
+                <TransferIcon v-else /> {{ changingInterval ? 'Switching' : 'Switch' }} to
                 {{ oppositeInterval }}
               </button>
             </ButtonStyled>
@@ -186,7 +186,7 @@
               class="ml-auto"
               @click="
                 () => {
-                  $refs.midasPurchaseModal.show();
+                  $refs.midasPurchaseModal.show()
                 }
               "
             >
@@ -244,8 +244,8 @@
                     <span>
                       {{
                         getPyroProduct(subscription)?.metadata?.ram
-                          ? getPyroProduct(subscription).metadata.ram / 1024 + " GB RAM"
-                          : ""
+                          ? getPyroProduct(subscription).metadata.ram / 1024 + ' GB RAM'
+                          : ''
                       }}
                     </span>
                   </div>
@@ -254,8 +254,8 @@
                     <span>
                       {{
                         getPyroProduct(subscription)?.metadata?.swap
-                          ? getPyroProduct(subscription).metadata.swap / 1024 + " GB Swap"
-                          : ""
+                          ? getPyroProduct(subscription).metadata.swap / 1024 + ' GB Swap'
+                          : ''
                       }}
                     </span>
                   </div>
@@ -264,8 +264,8 @@
                     <span>
                       {{
                         getPyroProduct(subscription)?.metadata?.storage
-                          ? getPyroProduct(subscription).metadata.storage / 1024 + " GB SSD"
-                          : ""
+                          ? getPyroProduct(subscription).metadata.storage / 1024 + ' GB SSD'
+                          : ''
                       }}
                     </span>
                   </div>
@@ -284,17 +284,17 @@
                           )
                         }}
                       </span>
-                      <span>/{{ subscription.interval.replace("ly", "") }}</span>
+                      <span>/{{ subscription.interval.replace('ly', '') }}</span>
                     </div>
                     <div v-if="getPyroCharge(subscription)" class="mb-4 flex flex-col items-end">
                       <span class="text-sm text-secondary">
-                        Since {{ $dayjs(subscription.created).format("MMMM D, YYYY") }}
+                        Since {{ $dayjs(subscription.created).format('MMMM D, YYYY') }}
                       </span>
                       <span
                         v-if="getPyroCharge(subscription).status === 'open'"
                         class="text-sm text-secondary"
                       >
-                        Renews {{ $dayjs(getPyroCharge(subscription).due).format("MMMM D, YYYY") }}
+                        Renews {{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
                       </span>
                       <span
                         v-else-if="getPyroCharge(subscription).status === 'processing'"
@@ -307,7 +307,7 @@
                         v-else-if="getPyroCharge(subscription).status === 'cancelled'"
                         class="text-sm text-secondary"
                       >
-                        Expires {{ $dayjs(getPyroCharge(subscription).due).format("MMMM D, YYYY") }}
+                        Expires {{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
                       </span>
                       <span
                         v-else-if="getPyroCharge(subscription).status === 'failed'"
@@ -524,8 +524,8 @@
               {
                 id: 'remove',
                 action: () => {
-                  removePaymentMethodIndex = index;
-                  $refs.modal_confirm.show();
+                  removePaymentMethodIndex = index
+                  $refs.modal_confirm.show()
                 },
                 color: 'red',
                 hoverOnly: true,
@@ -571,7 +571,7 @@ import {
   TrashIcon,
   UpdatedIcon,
   XIcon,
-} from "@modrinth/assets";
+} from '@modrinth/assets'
 import {
   AddPaymentMethodModal,
   ButtonStyled,
@@ -580,145 +580,145 @@ import {
   CopyCode,
   OverflowMenu,
   PurchaseModal,
-} from "@modrinth/ui";
-import { calculateSavings, formatPrice, getCurrency } from "@modrinth/utils";
-import { computed,ref } from "vue";
+} from '@modrinth/ui'
+import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
+import { computed, ref } from 'vue'
 
-import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
-import { products } from "~/generated/state.json";
+import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
+import { products } from '~/generated/state.json'
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
-const app = useNuxtApp();
-const auth = await useAuth();
-const baseId = useId();
+const app = useNuxtApp()
+const auth = await useAuth()
+const baseId = useId()
 
 useHead({
   script: [
     {
-      src: "https://js.stripe.com/v3/",
+      src: 'https://js.stripe.com/v3/',
       defer: true,
       async: true,
     },
   ],
-});
+})
 
-const data = useNuxtApp();
-const config = useRuntimeConfig();
+const data = useNuxtApp()
+const config = useRuntimeConfig()
 
-const vintl = useVIntl();
-const { formatMessage } = vintl;
+const vintl = useVIntl()
+const { formatMessage } = vintl
 
 const deleteModalMessages = defineMessages({
   title: {
-    id: "settings.billing.modal.delete.title",
-    defaultMessage: "Are you sure you want to remove this payment method?",
+    id: 'settings.billing.modal.delete.title',
+    defaultMessage: 'Are you sure you want to remove this payment method?',
   },
   description: {
-    id: "settings.billing.modal.delete.description",
-    defaultMessage: "This will remove this payment method forever (like really forever).",
+    id: 'settings.billing.modal.delete.description',
+    defaultMessage: 'This will remove this payment method forever (like really forever).',
   },
   action: {
-    id: "settings.billing.modal.delete.action",
-    defaultMessage: "Remove this payment method",
+    id: 'settings.billing.modal.delete.action',
+    defaultMessage: 'Remove this payment method',
   },
-});
+})
 
 const cancelModalMessages = defineMessages({
   title: {
-    id: "settings.billing.modal.cancel.title",
-    defaultMessage: "Are you sure you want to cancel your subscription?",
+    id: 'settings.billing.modal.cancel.title',
+    defaultMessage: 'Are you sure you want to cancel your subscription?',
   },
   description: {
-    id: "settings.billing.modal.cancel.description",
+    id: 'settings.billing.modal.cancel.description',
     defaultMessage:
-      "This will cancel your subscription. You will retain your perks until the end of the current billing cycle.",
+      'This will cancel your subscription. You will retain your perks until the end of the current billing cycle.',
   },
   action: {
-    id: "settings.billing.modal.cancel.action",
-    defaultMessage: "Cancel subscription",
+    id: 'settings.billing.modal.cancel.action',
+    defaultMessage: 'Cancel subscription',
   },
-});
+})
 
 const messages = defineMessages({
   subscriptionTitle: {
-    id: "settings.billing.subscription.title",
-    defaultMessage: "Subscriptions",
+    id: 'settings.billing.subscription.title',
+    defaultMessage: 'Subscriptions',
   },
   subscriptionDescription: {
-    id: "settings.billing.subscription.description",
-    defaultMessage: "Manage your Modrinth subscriptions.",
+    id: 'settings.billing.subscription.description',
+    defaultMessage: 'Manage your Modrinth subscriptions.',
   },
   paymentMethodTitle: {
-    id: "settings.billing.payment_method.title",
-    defaultMessage: "Payment methods",
+    id: 'settings.billing.payment_method.title',
+    defaultMessage: 'Payment methods',
   },
   paymentMethodNone: {
-    id: "settings.billing.payment_method.none",
-    defaultMessage: "You have not added any payment methods.",
+    id: 'settings.billing.payment_method.none',
+    defaultMessage: 'You have not added any payment methods.',
   },
   paymentMethodHistory: {
-    id: "settings.billing.payment_method.action.history",
-    defaultMessage: "View past charges",
+    id: 'settings.billing.payment_method.action.history',
+    defaultMessage: 'View past charges',
   },
   paymentMethodAdd: {
-    id: "settings.billing.payment_method.action.add",
-    defaultMessage: "Add payment method",
+    id: 'settings.billing.payment_method.action.add',
+    defaultMessage: 'Add payment method',
   },
   paymentMethodPrimary: {
-    id: "settings.billing.payment_method.primary",
-    defaultMessage: "Primary",
+    id: 'settings.billing.payment_method.primary',
+    defaultMessage: 'Primary',
   },
   paymentMethodMakePrimary: {
-    id: "settings.billing.payment_method.action.primary",
-    defaultMessage: "Make primary",
+    id: 'settings.billing.payment_method.action.primary',
+    defaultMessage: 'Make primary',
   },
   paymentMethodCardDisplay: {
-    id: "settings.billing.payment_method.card_display",
-    defaultMessage: "{card_brand} ending in {last_four}",
+    id: 'settings.billing.payment_method.card_display',
+    defaultMessage: '{card_brand} ending in {last_four}',
   },
   paymentMethodCardExpiry: {
-    id: "settings.billing.payment_method.card_expiry",
-    defaultMessage: "Expires {month}/{year}",
+    id: 'settings.billing.payment_method.card_expiry',
+    defaultMessage: 'Expires {month}/{year}',
   },
   pyroSubscriptionTitle: {
-    id: "settings.billing.pyro_subscription.title",
-    defaultMessage: "Modrinth Server Subscriptions",
+    id: 'settings.billing.pyro_subscription.title',
+    defaultMessage: 'Modrinth Server Subscriptions',
   },
   pyroSubscriptionDescription: {
-    id: "settings.billing.pyro_subscription.description",
-    defaultMessage: "Manage your Modrinth Server subscriptions.",
+    id: 'settings.billing.pyro_subscription.description',
+    defaultMessage: 'Manage your Modrinth Server subscriptions.',
   },
-});
+})
 
 const paymentMethodTypes = defineMessages({
   visa: {
-    id: "settings.billing.payment_method_type.visa",
-    defaultMessage: "Visa",
+    id: 'settings.billing.payment_method_type.visa',
+    defaultMessage: 'Visa',
   },
-  amex: { id: "settings.billing.payment_method_type.amex", defaultMessage: "American Express" },
-  diners: { id: "settings.billing.payment_method_type.diners", defaultMessage: "Diners Club" },
-  discover: { id: "settings.billing.payment_method_type.discover", defaultMessage: "Discover" },
-  eftpos: { id: "settings.billing.payment_method_type.eftpos", defaultMessage: "EFTPOS" },
-  jcb: { id: "settings.billing.payment_method_type.jcb", defaultMessage: "JCB" },
+  amex: { id: 'settings.billing.payment_method_type.amex', defaultMessage: 'American Express' },
+  diners: { id: 'settings.billing.payment_method_type.diners', defaultMessage: 'Diners Club' },
+  discover: { id: 'settings.billing.payment_method_type.discover', defaultMessage: 'Discover' },
+  eftpos: { id: 'settings.billing.payment_method_type.eftpos', defaultMessage: 'EFTPOS' },
+  jcb: { id: 'settings.billing.payment_method_type.jcb', defaultMessage: 'JCB' },
   mastercard: {
-    id: "settings.billing.payment_method_type.mastercard",
-    defaultMessage: "MasterCard",
+    id: 'settings.billing.payment_method_type.mastercard',
+    defaultMessage: 'MasterCard',
   },
-  unionpay: { id: "settings.billing.payment_method_type.unionpay", defaultMessage: "UnionPay" },
-  paypal: { id: "settings.billing.payment_method_type.paypal", defaultMessage: "PayPal" },
-  cashapp: { id: "settings.billing.payment_method_type.cashapp", defaultMessage: "Cash App" },
+  unionpay: { id: 'settings.billing.payment_method_type.unionpay', defaultMessage: 'UnionPay' },
+  paypal: { id: 'settings.billing.payment_method_type.paypal', defaultMessage: 'PayPal' },
+  cashapp: { id: 'settings.billing.payment_method_type.cashapp', defaultMessage: 'Cash App' },
   amazon_pay: {
-    id: "settings.billing.payment_method_type.amazon_pay",
-    defaultMessage: "Amazon Pay",
+    id: 'settings.billing.payment_method_type.amazon_pay',
+    defaultMessage: 'Amazon Pay',
   },
   unknown: {
-    id: "settings.billing.payment_method_type.unknown",
-    defaultMessage: "Unknown payment method",
+    id: 'settings.billing.payment_method_type.unknown',
+    defaultMessage: 'Unknown payment method',
   },
-});
+})
 
 const [
   { data: paymentMethods, refresh: refreshPaymentMethods },
@@ -728,257 +728,257 @@ const [
   { data: productsData, refresh: refreshProducts },
   { data: serversData, refresh: refreshServers },
 ] = await Promise.all([
-  useAsyncData("billing/payment_methods", () =>
-    useBaseFetch("billing/payment_methods", { internal: true }),
+  useAsyncData('billing/payment_methods', () =>
+    useBaseFetch('billing/payment_methods', { internal: true }),
   ),
-  useAsyncData("billing/payments", () => useBaseFetch("billing/payments", { internal: true })),
-  useAsyncData("billing/customer", () => useBaseFetch("billing/customer", { internal: true })),
-  useAsyncData("billing/subscriptions", () =>
-    useBaseFetch("billing/subscriptions", { internal: true }),
+  useAsyncData('billing/payments', () => useBaseFetch('billing/payments', { internal: true })),
+  useAsyncData('billing/customer', () => useBaseFetch('billing/customer', { internal: true })),
+  useAsyncData('billing/subscriptions', () =>
+    useBaseFetch('billing/subscriptions', { internal: true }),
   ),
-  useAsyncData("billing/products", () => useBaseFetch("billing/products", { internal: true })),
-  useAsyncData("servers", () => useServersFetch("servers")),
-]);
+  useAsyncData('billing/products', () => useBaseFetch('billing/products', { internal: true })),
+  useAsyncData('servers', () => useServersFetch('servers')),
+])
 
-const midasProduct = ref(products.find((x) => x.metadata?.type === "midas"));
+const midasProduct = ref(products.find((x) => x.metadata?.type === 'midas'))
 const midasSubscription = computed(() =>
   subscriptions.value?.find(
     (x) =>
-      x.status === "provisioned" && midasProduct.value?.prices?.find((y) => y.id === x.price_id),
+      x.status === 'provisioned' && midasProduct.value?.prices?.find((y) => y.id === x.price_id),
   ),
-);
+)
 const midasSubscriptionPrice = computed(() =>
   midasSubscription.value
     ? midasProduct.value?.prices?.find((x) => x.id === midasSubscription.value.price_id)
     : null,
-);
+)
 const midasCharge = computed(() =>
   midasSubscription.value
     ? charges.value?.find((x) => x.subscription_id === midasSubscription.value.id)
     : null,
-);
+)
 
 const oppositePrice = computed(() =>
   midasSubscription.value
     ? midasProduct.value?.prices?.find((price) => price.id === midasSubscription.value.price_id)
         ?.prices?.intervals?.[oppositeInterval.value]
     : undefined,
-);
+)
 
 const pyroSubscriptions = computed(() => {
-  const pyroSubs = subscriptions.value?.filter((s) => s?.metadata?.type === "pyro") || [];
-  const servers = serversData.value?.servers || [];
+  const pyroSubs = subscriptions.value?.filter((s) => s?.metadata?.type === 'pyro') || []
+  const servers = serversData.value?.servers || []
 
   return pyroSubs.map((subscription) => {
-    const server = servers.find((s) => s.server_id === subscription.metadata.id);
+    const server = servers.find((s) => s.server_id === subscription.metadata.id)
     return {
       ...subscription,
       serverInfo: server,
-    };
-  });
-});
+    }
+  })
+})
 
-const midasPurchaseModal = ref();
-const country = useUserCountry();
+const midasPurchaseModal = ref()
+const country = useUserCountry()
 const price = computed(() =>
   midasProduct.value?.prices?.find((x) => x.currency_code === getCurrency(country.value)),
-);
+)
 
 const primaryPaymentMethodId = computed(() => {
   if (customer.value?.invoice_settings?.default_payment_method) {
-    return customer.value.invoice_settings.default_payment_method;
+    return customer.value.invoice_settings.default_payment_method
   } else if (paymentMethods.value?.[0]?.id) {
-    return paymentMethods.value[0].id;
+    return paymentMethods.value[0].id
   } else {
-    return null;
+    return null
   }
-});
+})
 
-const addPaymentMethodModal = ref();
+const addPaymentMethodModal = ref()
 
 function addPaymentMethod() {
-  addPaymentMethodModal.value.show(paymentMethods.value);
+  addPaymentMethodModal.value.show(paymentMethods.value)
 }
 
 async function createSetupIntent() {
-  return await useBaseFetch("billing/payment_method", {
+  return await useBaseFetch('billing/payment_method', {
     internal: true,
-    method: "POST",
-  });
+    method: 'POST',
+  })
 }
 
-const removePaymentMethodIndex = ref();
+const removePaymentMethodIndex = ref()
 
-const changingInterval = ref(false);
+const changingInterval = ref(false)
 
 const oppositeInterval = computed(() =>
-  midasCharge.value?.subscription_interval === "yearly" ? "monthly" : "yearly",
-);
+  midasCharge.value?.subscription_interval === 'yearly' ? 'monthly' : 'yearly',
+)
 
 async function switchMidasInterval(interval) {
-  changingInterval.value = true;
-  startLoading();
+  changingInterval.value = true
+  startLoading()
   try {
     await useBaseFetch(`billing/subscription/${midasSubscription.value.id}`, {
       internal: true,
-      method: "PATCH",
+      method: 'PATCH',
       body: {
         interval,
       },
-    });
-    await refresh();
+    })
+    await refresh()
   } catch (error) {
-    console.error("Error switching Modrinth+ payment interval:", error);
+    console.error('Error switching Modrinth+ payment interval:', error)
   }
-  stopLoading();
-  changingInterval.value = false;
+  stopLoading()
+  changingInterval.value = false
 }
 
 async function editPaymentMethod(index, primary) {
-  startLoading();
+  startLoading()
   try {
     await useBaseFetch(`billing/payment_method/${paymentMethods.value[index].id}`, {
       internal: true,
-      method: "PATCH",
+      method: 'PATCH',
       data: {
         primary,
       },
-    });
-    await refresh();
+    })
+    await refresh()
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 
 async function removePaymentMethod(index) {
-  startLoading();
+  startLoading()
   try {
     await useBaseFetch(`billing/payment_method/${paymentMethods.value[index].id}`, {
       internal: true,
-      method: "DELETE",
-    });
-    await refresh();
+      method: 'DELETE',
+    })
+    await refresh()
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 
-const cancelSubscriptionId = ref(null);
+const cancelSubscriptionId = ref(null)
 async function cancelSubscription(id, cancelled) {
-  startLoading();
+  startLoading()
   try {
     await useBaseFetch(`billing/subscription/${id}`, {
       internal: true,
-      method: "PATCH",
+      method: 'PATCH',
       body: {
         cancelled,
       },
-    });
-    await refresh();
+    })
+    await refresh()
   } catch (err) {
     data.$notify({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 
 const getPyroProduct = (subscription) => {
-  if (!subscription || !productsData.value) return null;
-  return productsData.value.find((p) => p.prices?.some((x) => x.id === subscription.price_id));
-};
+  if (!subscription || !productsData.value) return null
+  return productsData.value.find((p) => p.prices?.some((x) => x.id === subscription.price_id))
+}
 
 const getPyroCharge = (subscription) => {
-  if (!subscription || !charges.value) return null;
+  if (!subscription || !charges.value) return null
   return charges.value.find(
-    (charge) => charge.subscription_id === subscription.id && charge.status !== "succeeded",
-  );
-};
+    (charge) => charge.subscription_id === subscription.id && charge.status !== 'succeeded',
+  )
+}
 
 const getProductSize = (product) => {
-  if (!product || !product.metadata) return "Unknown";
-  const ramSize = product.metadata.ram;
-  if (ramSize === 4096) return "Small";
-  if (ramSize === 6144) return "Medium";
-  if (ramSize === 8192) return "Large";
-  return "Custom";
-};
+  if (!product || !product.metadata) return 'Unknown'
+  const ramSize = product.metadata.ram
+  if (ramSize === 4096) return 'Small'
+  if (ramSize === 6144) return 'Medium'
+  if (ramSize === 8192) return 'Large'
+  return 'Custom'
+}
 
 const getProductPrice = (product, interval) => {
-  if (!product || !product.prices) return null;
-  const countryValue = country.value;
+  if (!product || !product.prices) return null
+  const countryValue = country.value
   return (
     product.prices.find(
       (p) => p.currency_code === getCurrency(countryValue) && p.prices?.intervals?.[interval],
     ) ??
-    product.prices.find((p) => p.currency_code === "USD" && p.prices?.intervals?.[interval]) ??
+    product.prices.find((p) => p.currency_code === 'USD' && p.prices?.intervals?.[interval]) ??
     product.prices[0]
-  );
-};
+  )
+}
 
-const modalCancel = ref(null);
+const modalCancel = ref(null)
 
-const pyroPurchaseModal = ref();
-const currentSubscription = ref(null);
-const currentProduct = ref(null);
-const upgradeProducts = ref([]);
-upgradeProducts.value.metadata = { type: "pyro" };
+const pyroPurchaseModal = ref()
+const currentSubscription = ref(null)
+const currentProduct = ref(null)
+const upgradeProducts = ref([])
+upgradeProducts.value.metadata = { type: 'pyro' }
 
-const currentSubRenewalDate = ref();
+const currentSubRenewalDate = ref()
 
 const showPyroUpgradeModal = async (subscription) => {
-  currentSubscription.value = subscription;
-  currentSubRenewalDate.value = getPyroCharge(subscription).due;
-  currentProduct.value = getPyroProduct(subscription);
+  currentSubscription.value = subscription
+  currentSubRenewalDate.value = getPyroCharge(subscription).due
+  currentProduct.value = getPyroProduct(subscription)
   upgradeProducts.value = products.filter(
     (p) =>
-      p.metadata.type === "pyro" &&
+      p.metadata.type === 'pyro' &&
       (!currentProduct.value || p.metadata.ram > currentProduct.value.metadata.ram),
-  );
-  upgradeProducts.value.metadata = { type: "pyro" };
+  )
+  upgradeProducts.value.metadata = { type: 'pyro' }
 
-  await nextTick();
+  await nextTick()
 
   if (!currentProduct.value) {
-    console.error("Could not find product for current subscription");
+    console.error('Could not find product for current subscription')
     data.$notify({
-      group: "main",
-      title: "An error occurred",
-      text: "Could not find product for current subscription",
-      type: "error",
-    });
-    return;
+      group: 'main',
+      title: 'An error occurred',
+      text: 'Could not find product for current subscription',
+      type: 'error',
+    })
+    return
   }
 
   if (!pyroPurchaseModal.value) {
-    console.error("pyroPurchaseModal ref is undefined");
-    return;
+    console.error('pyroPurchaseModal ref is undefined')
+    return
   }
 
-  pyroPurchaseModal.value.show();
-};
+  pyroPurchaseModal.value.show()
+}
 
 async function fetchCapacityStatuses(serverId, product) {
   if (product) {
     try {
       return {
         custom: await useServersFetch(`servers/${serverId}/upgrade-stock`, {
-          method: "POST",
+          method: 'POST',
           body: {
             cpu: product.metadata.cpu,
             memory_mb: product.metadata.ram,
@@ -986,21 +986,21 @@ async function fetchCapacityStatuses(serverId, product) {
             storage_mb: product.metadata.storage,
           },
         }),
-      };
+      }
     } catch (error) {
-      console.error("Error checking server capacities:", error);
+      console.error('Error checking server capacities:', error)
       app.$notify({
-        group: "main",
-        title: "Error checking server capacities",
+        group: 'main',
+        title: 'Error checking server capacities',
         text: error,
-        type: "error",
-      });
+        type: 'error',
+      })
       return {
         custom: { available: 0 },
         small: { available: 0 },
         medium: { available: 0 },
         large: { available: 0 },
-      };
+      }
     }
   }
 }
@@ -1009,36 +1009,36 @@ const resubscribePyro = async (subscriptionId, wasSuspended) => {
   try {
     await useBaseFetch(`billing/subscription/${subscriptionId}`, {
       internal: true,
-      method: "PATCH",
+      method: 'PATCH',
       body: {
         cancelled: false,
       },
-    });
-    await refresh();
+    })
+    await refresh()
     if (wasSuspended) {
       data.$notify({
-        group: "main",
-        title: "Resubscription request submitted",
-        text: "If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.",
-        type: "success",
-      });
+        group: 'main',
+        title: 'Resubscription request submitted',
+        text: 'If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.',
+        type: 'success',
+      })
     } else {
       data.$notify({
-        group: "main",
-        title: "Success",
-        text: "Server subscription resubscribed successfully",
-        type: "success",
-      });
+        group: 'main',
+        title: 'Success',
+        text: 'Server subscription resubscribed successfully',
+        type: 'success',
+      })
     }
   } catch {
     data.$notify({
-      group: "main",
-      title: "Error resubscribing",
-      text: "An error occurred while resubscribing to your Modrinth server.",
-      type: "error",
-    });
+      group: 'main',
+      title: 'Error resubscribing',
+      text: 'An error occurred while resubscribing to your Modrinth server.',
+      type: 'error',
+    })
   }
-};
+}
 
 const refresh = async () => {
   await Promise.all([
@@ -1048,22 +1048,22 @@ const refresh = async () => {
     refreshSubscriptions(),
     refreshProducts(),
     refreshServers(),
-  ]);
-};
+  ])
+}
 
 function showCancellationSurvey(subscription) {
   if (!subscription) {
-    console.warn("No survey notice to open");
-    return;
+    console.warn('No survey notice to open')
+    return
   }
 
-  const product = getPyroProduct(subscription);
-  const priceObj = product?.prices?.find((x) => x.id === subscription.price_id);
-  const price = priceObj?.prices?.intervals?.[subscription.interval];
-  const currency = priceObj?.currency_code;
+  const product = getPyroProduct(subscription)
+  const priceObj = product?.prices?.find((x) => x.id === subscription.price_id)
+  const price = priceObj?.prices?.intervals?.[subscription.interval]
+  const currency = priceObj?.currency_code
 
   const popupOptions = {
-    layout: "modal",
+    layout: 'modal',
     width: 700,
     autoClose: 2000,
     hideTitle: true,
@@ -1077,39 +1077,39 @@ function showCancellationSurvey(subscription) {
       started: subscription.created,
       plan_ram: product?.metadata.ram / 1024,
       plan_cpu: product?.metadata.cpu,
-      price: price ? `${price / 100}` : "unknown",
-      currency: currency ?? "unknown",
+      price: price ? `${price / 100}` : 'unknown',
+      currency: currency ?? 'unknown',
     },
     onOpen: () => console.log(`Opened cancellation survey for: ${subscription.id}`),
     onClose: () => console.log(`Closed cancellation survey for: ${subscription.id}`),
     onSubmit: (payload) => {
-      console.log("Form submitted, cancelling server.", payload);
-      cancelSubscription(subscription.id, true);
+      console.log('Form submitted, cancelling server.', payload)
+      cancelSubscription(subscription.id, true)
     },
-  };
+  }
 
-  const formId = "mOr7lM";
+  const formId = 'mOr7lM'
 
   try {
     if (window.Tally?.openPopup) {
       console.log(
         `Opening Tally popup for servers subscription ${subscription.id} (form ID: ${formId})`,
-      );
-      window.Tally.openPopup(formId, popupOptions);
+      )
+      window.Tally.openPopup(formId, popupOptions)
     } else {
-      console.warn("Tally script not yet loaded");
+      console.warn('Tally script not yet loaded')
     }
   } catch (e) {
-    console.error("Error opening Tally popup:", e);
+    console.error('Error opening Tally popup:', e)
   }
 }
 
 useHead({
   script: [
     {
-      src: "https://tally.so/widgets/embed.js",
+      src: 'https://tally.so/widgets/embed.js',
       defer: true,
     },
   ],
-});
+})
 </script>
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 687c1239d..e66089b07 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -198,210 +198,210 @@
 </template>
 
 <script setup lang="ts">
-import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from "@modrinth/assets";
-import { Button, ThemeSelector } from "@modrinth/ui";
-import { formatProjectType } from "@modrinth/utils";
+import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+import { Button, ThemeSelector } from '@modrinth/ui'
+import { formatProjectType } from '@modrinth/utils'
 
-import MessageBanner from "~/components/ui/MessageBanner.vue";
-import type { DisplayLocation } from "~/plugins/cosmetics";
-import { isDarkTheme, type Theme } from "~/plugins/theme/index.ts";
+import MessageBanner from '~/components/ui/MessageBanner.vue'
+import type { DisplayLocation } from '~/plugins/cosmetics'
+import { isDarkTheme, type Theme } from '~/plugins/theme/index.ts'
 
 useHead({
-  title: "Display settings - Modrinth",
-});
+  title: 'Display settings - Modrinth',
+})
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 const developerModeBanner = defineMessages({
   description: {
-    id: "settings.display.banner.developer-mode.description",
+    id: 'settings.display.banner.developer-mode.description',
     defaultMessage:
       "<strong>Developer mode</strong> is active. This will allow you to view the internal IDs of various things throughout Modrinth that may be helpful if you're a developer using the Modrinth API. Click on the Modrinth logo at the bottom of the page 5 times to toggle developer mode.",
   },
   deactivate: {
-    id: "settings.display.banner.developer-mode.button",
-    defaultMessage: "Deactivate developer mode",
+    id: 'settings.display.banner.developer-mode.button',
+    defaultMessage: 'Deactivate developer mode',
   },
-});
+})
 
 const colorTheme = defineMessages({
   title: {
-    id: "settings.display.theme.title",
-    defaultMessage: "Color theme",
+    id: 'settings.display.theme.title',
+    defaultMessage: 'Color theme',
   },
   description: {
-    id: "settings.display.theme.description",
-    defaultMessage: "Select your preferred color theme for Modrinth on this device.",
+    id: 'settings.display.theme.description',
+    defaultMessage: 'Select your preferred color theme for Modrinth on this device.',
   },
-});
+})
 
 const projectListLayouts = defineMessages({
   title: {
-    id: "settings.display.project-list-layouts.title",
-    defaultMessage: "Project list layouts",
+    id: 'settings.display.project-list-layouts.title',
+    defaultMessage: 'Project list layouts',
   },
   description: {
-    id: "settings.display.project-list-layouts.description",
+    id: 'settings.display.project-list-layouts.description',
     defaultMessage:
-      "Select your preferred layout for each page that displays project lists on this device.",
+      'Select your preferred layout for each page that displays project lists on this device.',
   },
   mod: {
-    id: "settings.display.project-list-layouts.mod",
-    defaultMessage: "Mods page",
+    id: 'settings.display.project-list-layouts.mod',
+    defaultMessage: 'Mods page',
   },
   plugin: {
-    id: "settings.display.project-list-layouts.plugin",
-    defaultMessage: "Plugins page",
+    id: 'settings.display.project-list-layouts.plugin',
+    defaultMessage: 'Plugins page',
   },
   datapack: {
-    id: "settings.display.project-list-layouts.datapack",
-    defaultMessage: "Data Packs page",
+    id: 'settings.display.project-list-layouts.datapack',
+    defaultMessage: 'Data Packs page',
   },
   shader: {
-    id: "settings.display.project-list-layouts.shader",
-    defaultMessage: "Shaders page",
+    id: 'settings.display.project-list-layouts.shader',
+    defaultMessage: 'Shaders page',
   },
   resourcepack: {
-    id: "settings.display.project-list-layouts.resourcepack",
-    defaultMessage: "Resource Packs page",
+    id: 'settings.display.project-list-layouts.resourcepack',
+    defaultMessage: 'Resource Packs page',
   },
   modpack: {
-    id: "settings.display.project-list-layouts.modpack",
-    defaultMessage: "Modpacks page",
+    id: 'settings.display.project-list-layouts.modpack',
+    defaultMessage: 'Modpacks page',
   },
   user: {
-    id: "settings.display.project-list-layouts.user",
-    defaultMessage: "User profile pages",
+    id: 'settings.display.project-list-layouts.user',
+    defaultMessage: 'User profile pages',
   },
   collection: {
-    id: "settings.display.project-list.layouts.collection",
-    defaultMessage: "Collection",
+    id: 'settings.display.project-list.layouts.collection',
+    defaultMessage: 'Collection',
   },
-});
+})
 
 const toggleFeatures = defineMessages({
   title: {
-    id: "settings.display.flags.title",
-    defaultMessage: "Toggle features",
+    id: 'settings.display.flags.title',
+    defaultMessage: 'Toggle features',
   },
   description: {
-    id: "settings.display.flags.description",
-    defaultMessage: "Enable or disable certain features on this device.",
+    id: 'settings.display.flags.description',
+    defaultMessage: 'Enable or disable certain features on this device.',
   },
   advancedRenderingTitle: {
-    id: "settings.display.sidebar.advanced-rendering.title",
-    defaultMessage: "Advanced rendering",
+    id: 'settings.display.sidebar.advanced-rendering.title',
+    defaultMessage: 'Advanced rendering',
   },
   advancedRenderingDescription: {
-    id: "settings.display.sidebar.advanced-rendering.description",
+    id: 'settings.display.sidebar.advanced-rendering.description',
     defaultMessage:
-      "Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.",
+      'Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.',
   },
   externalLinksNewTabTitle: {
-    id: "settings.display.sidebar.external-links-new-tab.title",
-    defaultMessage: "Open external links in new tab",
+    id: 'settings.display.sidebar.external-links-new-tab.title',
+    defaultMessage: 'Open external links in new tab',
   },
   externalLinksNewTabDescription: {
-    id: "settings.display.sidebar.external-links-new-tab.description",
+    id: 'settings.display.sidebar.external-links-new-tab.description',
     defaultMessage:
-      "Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab.",
+      'Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab.',
   },
   hideModrinthAppPromosTitle: {
-    id: "settings.display.sidebar.hide-app-promos.title",
-    defaultMessage: "Hide Modrinth App promotions",
+    id: 'settings.display.sidebar.hide-app-promos.title',
+    defaultMessage: 'Hide Modrinth App promotions',
   },
   hideModrinthAppPromosDescription: {
-    id: "settings.display.sidebar.hide-app-promos.description",
+    id: 'settings.display.sidebar.hide-app-promos.description',
     defaultMessage:
       'Hides the "Get Modrinth App" buttons from primary navigation. The Modrinth App page can still be found on the landing page or in the footer.',
   },
   rightAlignedFiltersSidebarTitle: {
-    id: "settings.display.sidebar.right-aligned-filters-sidebar.title",
-    defaultMessage: "Right-aligned filters sidebar on search pages",
+    id: 'settings.display.sidebar.right-aligned-filters-sidebar.title',
+    defaultMessage: 'Right-aligned filters sidebar on search pages',
   },
   rightAlignedFiltersSidebarDescription: {
-    id: "settings.display.sidebar.right-aligned-filters-sidebar.description",
-    defaultMessage: "Aligns the filters sidebar to the right of the search results.",
+    id: 'settings.display.sidebar.right-aligned-filters-sidebar.description',
+    defaultMessage: 'Aligns the filters sidebar to the right of the search results.',
   },
   leftAlignedContentSidebarTitle: {
-    id: "settings.display.sidebar.left-aligned-content-sidebar.title",
-    defaultMessage: "Left-aligned sidebar on content pages",
+    id: 'settings.display.sidebar.left-aligned-content-sidebar.title',
+    defaultMessage: 'Left-aligned sidebar on content pages',
   },
   leftAlignedContentSidebarDescription: {
-    id: "settings.display.sidebar.right-aligned-content-sidebar.description",
+    id: 'settings.display.sidebar.right-aligned-content-sidebar.description',
     defaultMessage: "Aligns the sidebar to the left of the page's content.",
   },
-});
+})
 
-const cosmetics = useCosmetics();
-const flags = useFeatureFlags();
-const tags = useTags();
+const cosmetics = useCosmetics()
+const flags = useFeatureFlags()
+const tags = useTags()
 
-const theme = useTheme();
+const theme = useTheme()
 
 // On the server the value of native theme can be 'unknown'. To hydrate
 // correctly, we need to make sure we aren't using 'unknown' and values between
 // server and client renders are in sync.
 
 const serverSystemTheme = useState(() => {
-  const theme_ = theme.native;
-  if (theme_ === "unknown") return "light";
-  return theme_;
-});
+  const theme_ = theme.native
+  if (theme_ === 'unknown') return 'light'
+  return theme_
+})
 
 const systemTheme = useMountedValue((mounted): Theme => {
-  const systemTheme_ = mounted ? theme.native : serverSystemTheme.value;
-  return systemTheme_ === "light" ? theme.preferences.light : theme.preferences.dark;
-});
+  const systemTheme_ = mounted ? theme.native : serverSystemTheme.value
+  return systemTheme_ === 'light' ? theme.preferences.light : theme.preferences.dark
+})
 
 const themeOptions = computed(() => {
-  const options: ("system" | Theme)[] = ["system", "light", "dark", "oled"];
-  if (flags.value.developerMode || theme.preferred === "retro") {
-    options.push("retro");
+  const options: ('system' | Theme)[] = ['system', 'light', 'dark', 'oled']
+  if (flags.value.developerMode || theme.preferred === 'retro') {
+    options.push('retro')
   }
-  return options;
-});
+  return options
+})
 
-function updateColorTheme(value: Theme | "system") {
-  if (value !== "system") {
+function updateColorTheme(value: Theme | 'system') {
+  if (value !== 'system') {
     if (isDarkTheme(value)) {
-      theme.preferences.dark = value;
+      theme.preferences.dark = value
     } else {
-      theme.preferences.light = value;
+      theme.preferences.light = value
     }
   }
 
-  theme.preferred = value;
+  theme.preferred = value
 }
 
 function disableDeveloperMode() {
-  flags.value.developerMode = !flags.value.developerMode;
-  saveFeatureFlags();
+  flags.value.developerMode = !flags.value.developerMode
+  saveFeatureFlags()
   addNotification({
-    group: "main",
-    title: "Developer mode deactivated",
-    text: "Developer mode has been disabled",
-    type: "success",
-  });
+    group: 'main',
+    title: 'Developer mode deactivated',
+    text: 'Developer mode has been disabled',
+    type: 'success',
+  })
 }
 
 const listTypes = computed(() => {
   const types = tags.value.projectTypes.map((type) => {
     return {
       id: type.id as DisplayLocation,
-      name: formatProjectType(type.id) + "s",
-      display: "the " + formatProjectType(type.id).toLowerCase() + "s search page",
-    };
-  });
+      name: formatProjectType(type.id) + 's',
+      display: 'the ' + formatProjectType(type.id).toLowerCase() + 's search page',
+    }
+  })
 
   types.push({
-    id: "user" as DisplayLocation,
-    name: "User profiles",
-    display: "user pages",
-  });
+    id: 'user' as DisplayLocation,
+    name: 'User profiles',
+    display: 'user pages',
+  })
 
-  return types;
-});
+  return types
+})
 </script>
 <style scoped lang="scss">
 .project-lists {
diff --git a/apps/frontend/src/pages/settings/language.vue b/apps/frontend/src/pages/settings/language.vue
index d6b978adb..c556ffb96 100644
--- a/apps/frontend/src/pages/settings/language.vue
+++ b/apps/frontend/src/pages/settings/language.vue
@@ -1,150 +1,150 @@
 <script setup lang="ts">
-import { IssuesIcon,RadioButtonCheckedIcon, RadioButtonIcon } from "@modrinth/assets";
-import { commonSettingsMessages } from "@modrinth/ui";
-import Fuse from "fuse.js/dist/fuse.basic";
+import { IssuesIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+import { commonSettingsMessages } from '@modrinth/ui'
+import Fuse from 'fuse.js/dist/fuse.basic'
 
-import { isModifierKeyDown } from "~/helpers/events.ts";
+import { isModifierKeyDown } from '~/helpers/events.ts'
 
-const vintl = useVIntl();
-const { formatMessage } = vintl;
+const vintl = useVIntl()
+const { formatMessage } = vintl
 
 const messages = defineMessages({
   languagesDescription: {
-    id: "settings.language.description",
+    id: 'settings.language.description',
     defaultMessage:
-      "Choose your preferred language for the site. Translations are contributed by volunteers <crowdin-link>on Crowdin</crowdin-link>.",
+      'Choose your preferred language for the site. Translations are contributed by volunteers <crowdin-link>on Crowdin</crowdin-link>.',
   },
   automaticLocale: {
-    id: "settings.language.languages.automatic",
-    defaultMessage: "Sync with the system language",
+    id: 'settings.language.languages.automatic',
+    defaultMessage: 'Sync with the system language',
   },
   noResults: {
-    id: "settings.language.languages.search.no-results",
-    defaultMessage: "No languages match your search.",
+    id: 'settings.language.languages.search.no-results',
+    defaultMessage: 'No languages match your search.',
   },
   searchFieldDescription: {
-    id: "settings.language.languages.search-field.description",
-    defaultMessage: "Submit to focus the first search result",
+    id: 'settings.language.languages.search-field.description',
+    defaultMessage: 'Submit to focus the first search result',
   },
   searchFieldPlaceholder: {
-    id: "settings.language.languages.search-field.placeholder",
-    defaultMessage: "Search for a language...",
+    id: 'settings.language.languages.search-field.placeholder',
+    defaultMessage: 'Search for a language...',
   },
   searchResultsAnnouncement: {
-    id: "settings.language.languages.search-results-announcement",
+    id: 'settings.language.languages.search-results-announcement',
     defaultMessage:
-      "{matches, plural, =0 {No languages match} one {# language matches} other {# languages match}} your search.",
+      '{matches, plural, =0 {No languages match} one {# language matches} other {# languages match}} your search.',
   },
   loadFailed: {
-    id: "settings.language.languages.load-failed",
-    defaultMessage: "Cannot load this language. Try again in a bit.",
+    id: 'settings.language.languages.load-failed',
+    defaultMessage: 'Cannot load this language. Try again in a bit.',
   },
   languageLabelApplying: {
-    id: "settings.language.languages.language-label-applying",
-    defaultMessage: "{label}. Applying...",
+    id: 'settings.language.languages.language-label-applying',
+    defaultMessage: '{label}. Applying...',
   },
   languageLabelError: {
-    id: "settings.language.languages.language-label-error",
-    defaultMessage: "{label}. Error",
+    id: 'settings.language.languages.language-label-error',
+    defaultMessage: '{label}. Error',
   },
-});
+})
 
 const categoryNames = defineMessages({
   auto: {
-    id: "settings.language.categories.auto",
-    defaultMessage: "Automatic",
+    id: 'settings.language.categories.auto',
+    defaultMessage: 'Automatic',
   },
   default: {
-    id: "settings.language.categories.default",
-    defaultMessage: "Standard languages",
+    id: 'settings.language.categories.default',
+    defaultMessage: 'Standard languages',
   },
   fun: {
-    id: "settings.language.categories.fun",
-    defaultMessage: "Fun languages",
+    id: 'settings.language.categories.fun',
+    defaultMessage: 'Fun languages',
   },
   experimental: {
-    id: "settings.language.categories.experimental",
-    defaultMessage: "Experimental languages",
+    id: 'settings.language.categories.experimental',
+    defaultMessage: 'Experimental languages',
   },
   searchResult: {
-    id: "settings.language.categories.search-result",
-    defaultMessage: "Search results",
+    id: 'settings.language.categories.search-result',
+    defaultMessage: 'Search results',
   },
-});
+})
 
-type Category = keyof typeof categoryNames;
+type Category = keyof typeof categoryNames
 
-const categoryOrder: Category[] = ["auto", "default", "fun", "experimental"];
+const categoryOrder: Category[] = ['auto', 'default', 'fun', 'experimental']
 
 function normalizeCategoryName(name?: string): keyof typeof categoryNames {
   switch (name) {
-    case "auto":
-    case "fun":
-    case "experimental":
-      return name;
+    case 'auto':
+    case 'fun':
+    case 'experimental':
+      return name
     default:
-      return "default";
+      return 'default'
   }
 }
 
 type LocaleBase = {
-  category: Category;
-  tag: string;
-  searchTerms?: string[];
-};
+  category: Category
+  tag: string
+  searchTerms?: string[]
+}
 
 type AutomaticLocale = LocaleBase & {
-  auto: true;
-};
+  auto: true
+}
 
 type CommonLocale = LocaleBase & {
-  auto?: never;
-  displayName: string;
-  defaultName: string;
-  translatedName: string;
-};
+  auto?: never
+  displayName: string
+  defaultName: string
+  translatedName: string
+}
 
-type Locale = AutomaticLocale | CommonLocale;
+type Locale = AutomaticLocale | CommonLocale
 
-const $defaultNames = useDisplayNames(() => vintl.defaultLocale);
+const $defaultNames = useDisplayNames(() => vintl.defaultLocale)
 
-const $translatedNames = useDisplayNames(() => vintl.locale);
+const $translatedNames = useDisplayNames(() => vintl.locale)
 
 const $locales = computed(() => {
-  const locales: Locale[] = [];
+  const locales: Locale[] = []
 
   locales.push({
     auto: true,
-    tag: "auto",
-    category: "auto",
+    tag: 'auto',
+    category: 'auto',
     searchTerms: [
-      "automatic",
-      "Sync with the system language",
+      'automatic',
+      'Sync with the system language',
       formatMessage(messages.automaticLocale),
     ],
-  });
+  })
 
   for (const locale of vintl.availableLocales) {
-    let displayName = locale.meta?.displayName;
+    let displayName = locale.meta?.displayName
 
     if (displayName == null) {
-      displayName = createDisplayNames(locale.tag).of(locale.tag) ?? locale.tag;
+      displayName = createDisplayNames(locale.tag).of(locale.tag) ?? locale.tag
     }
 
-    let defaultName = vintl.defaultResources["languages.json"]?.[locale.tag];
+    let defaultName = vintl.defaultResources['languages.json']?.[locale.tag]
 
     if (defaultName == null) {
-      defaultName = $defaultNames.value.of(locale.tag) ?? locale.tag;
+      defaultName = $defaultNames.value.of(locale.tag) ?? locale.tag
     }
 
-    let translatedName = vintl.resources["languages.json"]?.[locale.tag];
+    let translatedName = vintl.resources['languages.json']?.[locale.tag]
 
     if (translatedName == null) {
-      translatedName = $translatedNames.value.of(locale.tag) ?? locale.tag;
+      translatedName = $translatedNames.value.of(locale.tag) ?? locale.tag
     }
 
-    let searchTerms = locale.meta?.searchTerms;
-    if (searchTerms === "-") searchTerms = undefined;
+    let searchTerms = locale.meta?.searchTerms
+    if (searchTerms === '-') searchTerms = undefined
 
     locales.push({
       tag: locale.tag,
@@ -152,132 +152,132 @@ const $locales = computed(() => {
       displayName,
       defaultName,
       translatedName,
-      searchTerms: searchTerms?.split("\n"),
-    });
+      searchTerms: searchTerms?.split('\n'),
+    })
   }
 
-  return locales;
-});
+  return locales
+})
 
-const $query = ref("");
+const $query = ref('')
 
-const isQueryEmpty = () => $query.value.trim().length === 0;
+const isQueryEmpty = () => $query.value.trim().length === 0
 
 const fuse = new Fuse<Locale>([], {
-  keys: ["tag", "displayName", "translatedName", "englishName", "searchTerms"],
+  keys: ['tag', 'displayName', 'translatedName', 'englishName', 'searchTerms'],
   threshold: 0.4,
   distance: 100,
-});
+})
 
-watchSyncEffect(() => fuse.setCollection($locales.value));
+watchSyncEffect(() => fuse.setCollection($locales.value))
 
 const $categories = computed(() => {
-  const categories = new Map<Category, Locale[]>();
+  const categories = new Map<Category, Locale[]>()
 
-  for (const category of categoryOrder) categories.set(category, []);
+  for (const category of categoryOrder) categories.set(category, [])
 
   for (const locale of $locales.value) {
-    let categoryLocales = categories.get(locale.category);
+    let categoryLocales = categories.get(locale.category)
 
     if (categoryLocales == null) {
-      categoryLocales = [];
-      categories.set(locale.category, categoryLocales);
+      categoryLocales = []
+      categories.set(locale.category, categoryLocales)
     }
 
-    categoryLocales.push(locale);
+    categoryLocales.push(locale)
   }
 
   for (const categoryKey of [...categories.keys()]) {
     if (categories.get(categoryKey)?.length === 0) {
-      categories.delete(categoryKey);
+      categories.delete(categoryKey)
     }
   }
 
-  return categories;
-});
+  return categories
+})
 
 const $searchResults = computed(() => {
   return new Map<Category, Locale[]>([
-    ["searchResult", isQueryEmpty() ? [] : fuse.search($query.value).map(({ item }) => item)],
-  ]);
-});
+    ['searchResult', isQueryEmpty() ? [] : fuse.search($query.value).map(({ item }) => item)],
+  ])
+})
 
 const $displayCategories = computed(() =>
   isQueryEmpty() ? $categories.value : $searchResults.value,
-);
+)
 
-const $changingTo = ref<string | undefined>();
+const $changingTo = ref<string | undefined>()
 
-const isChanging = () => $changingTo.value != null;
+const isChanging = () => $changingTo.value != null
 
-const $failedLocale = ref<string>();
+const $failedLocale = ref<string>()
 
 const $activeLocale = computed(() => {
-  if ($changingTo.value != null) return $changingTo.value;
-  return vintl.automatic ? "auto" : vintl.locale;
-});
+  if ($changingTo.value != null) return $changingTo.value
+  return vintl.automatic ? 'auto' : vintl.locale
+})
 
 async function changeLocale(value: string) {
-  if ($activeLocale.value === value) return;
+  if ($activeLocale.value === value) return
 
-  $changingTo.value = value;
+  $changingTo.value = value
 
   try {
-    await vintl.changeLocale(value);
-    $failedLocale.value = undefined;
+    await vintl.changeLocale(value)
+    $failedLocale.value = undefined
   } catch {
-    $failedLocale.value = value;
+    $failedLocale.value = value
   } finally {
-    $changingTo.value = undefined;
+    $changingTo.value = undefined
   }
 }
 
-const $languagesList = ref<HTMLDivElement | undefined>();
+const $languagesList = ref<HTMLDivElement | undefined>()
 
 function onSearchKeydown(e: KeyboardEvent) {
-  if (e.key !== "Enter" || isModifierKeyDown(e)) return;
+  if (e.key !== 'Enter' || isModifierKeyDown(e)) return
 
   const focusableTarget = $languagesList.value?.querySelector(
     'input, [tabindex]:not([tabindex="-1"])',
-  ) as HTMLElement | undefined;
+  ) as HTMLElement | undefined
 
-  focusableTarget?.focus();
+  focusableTarget?.focus()
 }
 
 function onItemKeydown(e: KeyboardEvent, locale: Locale) {
   switch (e.key) {
-    case "Enter":
-    case " ":
-      break;
+    case 'Enter':
+    case ' ':
+      break
     default:
-      return;
+      return
   }
 
-  if (isModifierKeyDown(e) || isChanging()) return;
+  if (isModifierKeyDown(e) || isChanging()) return
 
-  changeLocale(locale.tag);
+  changeLocale(locale.tag)
 }
 
 function onItemClick(e: MouseEvent, locale: Locale) {
-  if (isModifierKeyDown(e) || isChanging()) return;
+  if (isModifierKeyDown(e) || isChanging()) return
 
-  changeLocale(locale.tag);
+  changeLocale(locale.tag)
 }
 
 function getItemLabel(locale: Locale) {
   const label = locale.auto
     ? formatMessage(messages.automaticLocale)
-    : `${locale.translatedName}. ${locale.displayName}`;
+    : `${locale.translatedName}. ${locale.displayName}`
 
   if ($changingTo.value === locale.tag) {
-    return formatMessage(messages.languageLabelApplying, { label });
+    return formatMessage(messages.languageLabelApplying, { label })
   }
 
   if ($failedLocale.value === locale.tag) {
-    return formatMessage(messages.languageLabelError, { label });
+    return formatMessage(messages.languageLabelError, { label })
   }
 
-  return label;
+  return label
 }
 </script>
 
@@ -316,9 +316,9 @@ function getItemLabel(locale: Locale) {
         <div id="language-search-results-announcements" class="visually-hidden" aria-live="polite">
           {{
             isQueryEmpty()
-              ? ""
+              ? ''
               : formatMessage(messages.searchResultsAnnouncement, {
-                  matches: $searchResults.get("searchResult")?.length ?? 0,
+                  matches: $searchResults.get('searchResult')?.length ?? 0,
                 })
           }}
         </div>
@@ -404,7 +404,7 @@ function getItemLabel(locale: Locale) {
   position: relative;
   overflow: hidden;
 
-  &:not([aria-disabled="true"]):hover {
+  &:not([aria-disabled='true']):hover {
     border-color: var(--color-button-bg-hover);
   }
 
@@ -422,7 +422,7 @@ function getItemLabel(locale: Locale) {
   }
 
   &.pending::after {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
@@ -465,7 +465,7 @@ function getItemLabel(locale: Locale) {
     }
   }
 
-  &[aria-disabled="true"]:not(.pending) {
+  &[aria-disabled='true']:not(.pending) {
     opacity: 0.8;
     pointer-events: none;
     cursor: default;
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index 12f82ed92..90db016ef 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -80,11 +80,11 @@
         class="btn btn-primary"
         @click="
           () => {
-            name = null;
-            scopesVal = 0;
-            expires = null;
-            editPatIndex = null;
-            $refs.patModal.show();
+            name = null
+            scopesVal = 0
+            expires = null
+            editPatIndex = null
+            $refs.patModal.show()
           }
         "
       >
@@ -176,11 +176,11 @@
           class="iconified-button raised-button"
           @click="
             () => {
-              editPatIndex = index;
-              name = pat.name;
-              scopesVal = pat.scopes;
-              expires = $dayjs(pat.expires).format('YYYY-MM-DD');
-              $refs.patModal.show();
+              editPatIndex = index
+              name = pat.name
+              scopesVal = pat.scopes
+              expires = $dayjs(pat.expires).format('YYYY-MM-DD')
+              $refs.patModal.show()
             }
           "
         >
@@ -190,8 +190,8 @@
           class="iconified-button raised-button"
           @click="
             () => {
-              deletePatIndex = pat.id;
-              $refs.modal_confirm.show();
+              deletePatIndex = pat.id
+              $refs.modal_confirm.show()
             }
           "
         >
@@ -202,7 +202,7 @@
   </div>
 </template>
 <script setup>
-import { EditIcon, PlusIcon, SaveIcon,TrashIcon, XIcon } from "@modrinth/assets";
+import { EditIcon, PlusIcon, SaveIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import {
   Checkbox,
   commonMessages,
@@ -210,195 +210,195 @@ import {
   ConfirmModal,
   CopyCode,
   useRelativeTime,
-} from "@modrinth/ui";
+} from '@modrinth/ui'
 
-import Modal from "~/components/ui/Modal.vue";
+import Modal from '~/components/ui/Modal.vue'
 import {
   getScopeValue,
   hasScope,
   scopeList,
   toggleScope,
   useScopes,
-} from "~/composables/auth/scopes.ts";
+} from '~/composables/auth/scopes.ts'
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
-const formatRelativeTime = useRelativeTime();
+const formatRelativeTime = useRelativeTime()
 
 const createModalMessages = defineMessages({
   createTitle: {
-    id: "settings.pats.modal.create.title",
-    defaultMessage: "Create personal access token",
+    id: 'settings.pats.modal.create.title',
+    defaultMessage: 'Create personal access token',
   },
   editTitle: {
-    id: "settings.pats.modal.edit.title",
-    defaultMessage: "Edit personal access token",
+    id: 'settings.pats.modal.edit.title',
+    defaultMessage: 'Edit personal access token',
   },
   nameLabel: {
-    id: "settings.pats.modal.create.name.label",
-    defaultMessage: "Name",
+    id: 'settings.pats.modal.create.name.label',
+    defaultMessage: 'Name',
   },
   namePlaceholder: {
-    id: "settings.pats.modal.create.name.placeholder",
+    id: 'settings.pats.modal.create.name.placeholder',
     defaultMessage: "Enter the PAT's name...",
   },
   expiresLabel: {
-    id: "settings.pats.modal.create.expires.label",
-    defaultMessage: "Expires",
+    id: 'settings.pats.modal.create.expires.label',
+    defaultMessage: 'Expires',
   },
   action: {
-    id: "settings.pats.modal.create.action",
-    defaultMessage: "Create PAT",
+    id: 'settings.pats.modal.create.action',
+    defaultMessage: 'Create PAT',
   },
-});
+})
 
 const deleteModalMessages = defineMessages({
   title: {
-    id: "settings.pats.modal.delete.title",
-    defaultMessage: "Are you sure you want to delete this token?",
+    id: 'settings.pats.modal.delete.title',
+    defaultMessage: 'Are you sure you want to delete this token?',
   },
   description: {
-    id: "settings.pats.modal.delete.description",
-    defaultMessage: "This will remove this token forever (like really forever).",
+    id: 'settings.pats.modal.delete.description',
+    defaultMessage: 'This will remove this token forever (like really forever).',
   },
   action: {
-    id: "settings.pats.modal.delete.action",
-    defaultMessage: "Delete this token",
+    id: 'settings.pats.modal.delete.action',
+    defaultMessage: 'Delete this token',
   },
-});
+})
 
 const messages = defineMessages({
   description: {
-    id: "settings.pats.description",
+    id: 'settings.pats.description',
     defaultMessage:
       "PATs can be used to access Modrinth's API. For more information, see <doc-link>Modrinth's API documentation</doc-link>. They can be created and revoked at any time.",
   },
   create: {
-    id: "settings.pats.action.create",
-    defaultMessage: "Create a PAT",
+    id: 'settings.pats.action.create',
+    defaultMessage: 'Create a PAT',
   },
-});
+})
 
 const tokenMessages = defineMessages({
   edit: {
-    id: "settings.pats.token.action.edit",
-    defaultMessage: "Edit token",
+    id: 'settings.pats.token.action.edit',
+    defaultMessage: 'Edit token',
   },
   revoke: {
-    id: "settings.pats.token.action.revoke",
-    defaultMessage: "Revoke token",
+    id: 'settings.pats.token.action.revoke',
+    defaultMessage: 'Revoke token',
   },
   lastUsed: {
-    id: "settings.pats.token.last-used",
-    defaultMessage: "Last used {ago}",
+    id: 'settings.pats.token.last-used',
+    defaultMessage: 'Last used {ago}',
   },
   neverUsed: {
-    id: "settings.pats.token.never-used",
-    defaultMessage: "Never used",
+    id: 'settings.pats.token.never-used',
+    defaultMessage: 'Never used',
   },
   expiresIn: {
-    id: "settings.pats.token.expires-in",
-    defaultMessage: "Expires {inTime}",
+    id: 'settings.pats.token.expires-in',
+    defaultMessage: 'Expires {inTime}',
   },
   expiredAgo: {
-    id: "settings.pats.token.expired-ago",
-    defaultMessage: "Expired {ago}",
+    id: 'settings.pats.token.expired-ago',
+    defaultMessage: 'Expired {ago}',
   },
-});
+})
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
 useHead({
   title: `${formatMessage(commonSettingsMessages.pats)} - Modrinth`,
-});
+})
 
-const data = useNuxtApp();
-const { scopesToLabels } = useScopes();
-const patModal = ref();
+const data = useNuxtApp()
+const { scopesToLabels } = useScopes()
+const patModal = ref()
 
-const editPatIndex = ref(null);
+const editPatIndex = ref(null)
 
-const name = ref(null);
-const scopesVal = ref(BigInt(0));
-const expires = ref(null);
+const name = ref(null)
+const scopesVal = ref(BigInt(0))
+const expires = ref(null)
 
-const deletePatIndex = ref(null);
+const deletePatIndex = ref(null)
 
-const loading = ref(false);
+const loading = ref(false)
 
-const { data: pats, refresh } = await useAsyncData("pat", () => useBaseFetch("pat"));
+const { data: pats, refresh } = await useAsyncData('pat', () => useBaseFetch('pat'))
 
 async function createPat() {
-  startLoading();
-  loading.value = true;
+  startLoading()
+  loading.value = true
   try {
-    const res = await useBaseFetch("pat", {
-      method: "POST",
+    const res = await useBaseFetch('pat', {
+      method: 'POST',
       body: {
         name: name.value,
         scopes: Number(scopesVal.value),
         expires: data.$dayjs(expires.value).toISOString(),
       },
-    });
-    pats.value.push(res);
-    patModal.value.hide();
+    })
+    pats.value.push(res)
+    patModal.value.hide()
   } catch (err) {
     data.$notify({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  loading.value = false;
-  stopLoading();
+  loading.value = false
+  stopLoading()
 }
 
 async function editPat() {
-  startLoading();
-  loading.value = true;
+  startLoading()
+  loading.value = true
   try {
     await useBaseFetch(`pat/${pats.value[editPatIndex.value].id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       body: {
         name: name.value,
         scopes: Number(scopesVal.value),
         expires: data.$dayjs(expires.value).toISOString(),
       },
-    });
-    await refresh();
-    patModal.value.hide();
+    })
+    await refresh()
+    patModal.value.hide()
   } catch (err) {
     data.$notify({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  loading.value = false;
-  stopLoading();
+  loading.value = false
+  stopLoading()
 }
 
 async function removePat(id) {
-  startLoading();
+  startLoading()
   try {
-    pats.value = pats.value.filter((x) => x.id !== id);
+    pats.value = pats.value.filter((x) => x.id !== id)
     await useBaseFetch(`pat/${id}`, {
-      method: "DELETE",
-    });
-    await refresh();
+      method: 'DELETE',
+    })
+    await refresh()
   } catch (err) {
     data.$notify({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/settings/profile.vue b/apps/frontend/src/pages/settings/profile.vue
index bb7ba1128..e9d053118 100644
--- a/apps/frontend/src/pages/settings/profile.vue
+++ b/apps/frontend/src/pages/settings/profile.vue
@@ -40,8 +40,8 @@
             v-if="previewImage"
             :action="
               () => {
-                icon = null;
-                previewImage = null;
+                icon = null
+                previewImage = null
               }
             "
           >
@@ -90,151 +90,151 @@
 </template>
 
 <script setup>
-import { SaveIcon, TrashIcon,UndoIcon, UploadIcon, UserIcon, XIcon } from "@modrinth/assets";
-import { Avatar, Button, commonMessages,FileInput } from "@modrinth/ui";
+import { SaveIcon, TrashIcon, UndoIcon, UploadIcon, UserIcon, XIcon } from '@modrinth/assets'
+import { Avatar, Button, commonMessages, FileInput } from '@modrinth/ui'
 
 useHead({
-  title: "Profile settings - Modrinth",
-});
+  title: 'Profile settings - Modrinth',
+})
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
-const { formatMessage } = useVIntl();
+const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
   title: {
-    id: "settings.profile.profile-info",
-    defaultMessage: "Profile information",
+    id: 'settings.profile.profile-info',
+    defaultMessage: 'Profile information',
   },
   description: {
-    id: "settings.profile.description",
+    id: 'settings.profile.description',
     defaultMessage:
-      "Your profile information is publicly viewable on Modrinth and through the <docs-link>Modrinth API</docs-link>.",
+      'Your profile information is publicly viewable on Modrinth and through the <docs-link>Modrinth API</docs-link>.',
   },
   profilePicture: {
-    id: "settings.profile.profile-picture.title",
-    defaultMessage: "Profile picture",
+    id: 'settings.profile.profile-picture.title',
+    defaultMessage: 'Profile picture',
   },
   profilePictureReset: {
-    id: "settings.profile.profile-picture.reset",
-    defaultMessage: "Reset",
+    id: 'settings.profile.profile-picture.reset',
+    defaultMessage: 'Reset',
   },
   usernameTitle: {
-    id: "settings.profile.username.title",
-    defaultMessage: "Username",
+    id: 'settings.profile.username.title',
+    defaultMessage: 'Username',
   },
   usernameDescription: {
-    id: "settings.profile.username.description",
-    defaultMessage: "A unique case-insensitive name to identify your profile.",
+    id: 'settings.profile.username.description',
+    defaultMessage: 'A unique case-insensitive name to identify your profile.',
   },
   bioTitle: {
-    id: "settings.profile.bio.title",
-    defaultMessage: "Bio",
+    id: 'settings.profile.bio.title',
+    defaultMessage: 'Bio',
   },
   bioDescription: {
-    id: "settings.profile.bio.description",
-    defaultMessage: "A short description to tell everyone a little bit about you.",
+    id: 'settings.profile.bio.description',
+    defaultMessage: 'A short description to tell everyone a little bit about you.',
   },
-});
+})
 
-const auth = await useAuth();
+const auth = await useAuth()
 
-const username = ref(auth.value.user.username);
-const bio = ref(auth.value.user.bio);
-const avatarUrl = ref(auth.value.user.avatar_url);
-const icon = shallowRef(null);
-const previewImage = shallowRef(null);
-const pendingAvatarDeletion = ref(false);
-const saved = ref(false);
+const username = ref(auth.value.user.username)
+const bio = ref(auth.value.user.bio)
+const avatarUrl = ref(auth.value.user.avatar_url)
+const icon = shallowRef(null)
+const previewImage = shallowRef(null)
+const pendingAvatarDeletion = ref(false)
+const saved = ref(false)
 
 const hasUnsavedChanges = computed(
   () =>
     username.value !== auth.value.user.username ||
     bio.value !== auth.value.user.bio ||
     previewImage.value,
-);
+)
 
 function showPreviewImage(files) {
-  const reader = new FileReader();
-  icon.value = files[0];
-  reader.readAsDataURL(icon.value);
+  const reader = new FileReader()
+  icon.value = files[0]
+  reader.readAsDataURL(icon.value)
   reader.onload = (event) => {
-    previewImage.value = event.target.result;
-  };
+    previewImage.value = event.target.result
+  }
 }
 
 function removePreviewImage() {
-  pendingAvatarDeletion.value = true;
-  previewImage.value = "https://cdn.modrinth.com/placeholder.png";
+  pendingAvatarDeletion.value = true
+  previewImage.value = 'https://cdn.modrinth.com/placeholder.png'
 }
 
 function cancel() {
-  icon.value = null;
-  previewImage.value = null;
-  pendingAvatarDeletion.value = false;
-  username.value = auth.value.user.username;
-  bio.value = auth.value.user.bio;
+  icon.value = null
+  previewImage.value = null
+  pendingAvatarDeletion.value = false
+  username.value = auth.value.user.username
+  bio.value = auth.value.user.bio
 }
 
 async function saveChanges() {
-  startLoading();
+  startLoading()
   try {
     if (pendingAvatarDeletion.value) {
       await useBaseFetch(`user/${auth.value.user.id}/icon`, {
-        method: "DELETE",
-      });
-      pendingAvatarDeletion.value = false;
-      previewImage.value = null;
+        method: 'DELETE',
+      })
+      pendingAvatarDeletion.value = false
+      previewImage.value = null
     }
 
     if (icon.value) {
       await useBaseFetch(
         `user/${auth.value.user.id}/icon?ext=${
-          icon.value.type.split("/")[icon.value.type.split("/").length - 1]
+          icon.value.type.split('/')[icon.value.type.split('/').length - 1]
         }`,
         {
-          method: "PATCH",
+          method: 'PATCH',
           body: icon.value,
         },
-      );
-      icon.value = null;
-      previewImage.value = null;
+      )
+      icon.value = null
+      previewImage.value = null
     }
 
-    const body = {};
+    const body = {}
 
     if (auth.value.user.username !== username.value) {
-      body.username = username.value;
+      body.username = username.value
     }
 
     if (auth.value.user.bio !== bio.value) {
-      body.bio = bio.value;
+      body.bio = bio.value
     }
 
     await useBaseFetch(`user/${auth.value.user.id}`, {
-      method: "PATCH",
+      method: 'PATCH',
       body,
-    });
-    await useAuth(auth.value.token);
-    avatarUrl.value = auth.value.user.avatar_url;
-    saved.value = true;
+    })
+    await useAuth(auth.value.token)
+    avatarUrl.value = auth.value.user.avatar_url
+    saved.value = true
   } catch (err) {
     addNotification({
-      group: "main",
-      title: "An error occurred",
+      group: 'main',
+      title: 'An error occurred',
       text: err
         ? err.data
           ? err.data.description
             ? err.data.description
             : err.data
           : err
-        : "aaaaahhh",
-      type: "error",
-    });
+        : 'aaaaahhh',
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/settings/sessions.vue b/apps/frontend/src/pages/settings/sessions.vue
index 8a1d161c7..79ece9406 100644
--- a/apps/frontend/src/pages/settings/sessions.vue
+++ b/apps/frontend/src/pages/settings/sessions.vue
@@ -56,74 +56,74 @@
   </div>
 </template>
 <script setup>
-import { XIcon } from "@modrinth/assets";
-import { commonMessages, commonSettingsMessages, useRelativeTime } from "@modrinth/ui";
+import { XIcon } from '@modrinth/assets'
+import { commonMessages, commonSettingsMessages, useRelativeTime } from '@modrinth/ui'
 
 definePageMeta({
-  middleware: "auth",
-});
+  middleware: 'auth',
+})
 
-const { formatMessage } = useVIntl();
-const formatRelativeTime = useRelativeTime();
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
 
 const messages = defineMessages({
   currentSessionLabel: {
-    id: "settings.sessions.current-session",
-    defaultMessage: "Current session",
+    id: 'settings.sessions.current-session',
+    defaultMessage: 'Current session',
   },
   revokeSessionButton: {
-    id: "settings.sessions.action.revoke-session",
-    defaultMessage: "Revoke session",
+    id: 'settings.sessions.action.revoke-session',
+    defaultMessage: 'Revoke session',
   },
   createdAgoLabel: {
-    id: "settings.sessions.created-ago",
-    defaultMessage: "Created {ago}",
+    id: 'settings.sessions.created-ago',
+    defaultMessage: 'Created {ago}',
   },
   sessionsDescription: {
-    id: "settings.sessions.description",
+    id: 'settings.sessions.description',
     defaultMessage:
       "Here are all the devices that are currently logged in with your Modrinth account. You can log out of each one individually.\n\nIf you see an entry you don't recognize, log out of that device and change your Modrinth account password immediately.",
   },
   lastAccessedAgoLabel: {
-    id: "settings.sessions.last-accessed-ago",
-    defaultMessage: "Last accessed {ago}",
+    id: 'settings.sessions.last-accessed-ago',
+    defaultMessage: 'Last accessed {ago}',
   },
   unknownOsLabel: {
-    id: "settings.sessions.unknown-os",
-    defaultMessage: "Unknown OS",
+    id: 'settings.sessions.unknown-os',
+    defaultMessage: 'Unknown OS',
   },
   unknownPlatformLabel: {
-    id: "settings.sessions.unknown-platform",
-    defaultMessage: "Unknown platform",
+    id: 'settings.sessions.unknown-platform',
+    defaultMessage: 'Unknown platform',
   },
-});
+})
 
 useHead({
   title: () => `${formatMessage(commonSettingsMessages.sessions)} - Modrinth`,
-});
+})
 
-const data = useNuxtApp();
-const { data: sessions, refresh } = await useAsyncData("session/list", () =>
-  useBaseFetch("session/list"),
-);
+const data = useNuxtApp()
+const { data: sessions, refresh } = await useAsyncData('session/list', () =>
+  useBaseFetch('session/list'),
+)
 
 async function revokeSession(id) {
-  startLoading();
+  startLoading()
   try {
-    sessions.value = sessions.value.filter((x) => x.id !== id);
+    sessions.value = sessions.value.filter((x) => x.id !== id)
     await useBaseFetch(`session/${id}`, {
-      method: "DELETE",
-    });
-    await refresh();
+      method: 'DELETE',
+    })
+    await refresh()
   } catch (err) {
     data.$notify({
-      group: "main",
+      group: 'main',
       title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data ? err.data.description : err,
-      type: "error",
-    });
+      type: 'error',
+    })
   }
-  stopLoading();
+  stopLoading()
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/plugins/cosmetics.ts b/apps/frontend/src/plugins/cosmetics.ts
index 2c1b6eebe..f8ff3ce3e 100644
--- a/apps/frontend/src/plugins/cosmetics.ts
+++ b/apps/frontend/src/plugins/cosmetics.ts
@@ -1,38 +1,38 @@
-import type { DarkTheme } from "./theme/index.ts";
+import type { DarkTheme } from './theme/index.ts'
 
-export type DisplayMode = "list" | "gallery" | "grid";
+export type DisplayMode = 'list' | 'gallery' | 'grid'
 
 export type DisplayLocation =
-  | "mod"
-  | "plugin"
-  | "resourcepack"
-  | "modpack"
-  | "shader"
-  | "datapack"
-  | "user"
-  | "collection";
+  | 'mod'
+  | 'plugin'
+  | 'resourcepack'
+  | 'modpack'
+  | 'shader'
+  | 'datapack'
+  | 'user'
+  | 'collection'
 
 export interface Cosmetics {
-  rightSearchLayout: boolean;
-  leftContentLayout: boolean;
-  advancedRendering: boolean;
-  externalLinksNewTab: boolean;
-  notUsingBlockers: boolean;
-  hideModrinthAppPromos: boolean;
-  preferredDarkTheme: DarkTheme;
-  searchDisplayMode: Record<DisplayLocation, DisplayMode>;
-  hideStagingBanner: boolean;
+  rightSearchLayout: boolean
+  leftContentLayout: boolean
+  advancedRendering: boolean
+  externalLinksNewTab: boolean
+  notUsingBlockers: boolean
+  hideModrinthAppPromos: boolean
+  preferredDarkTheme: DarkTheme
+  searchDisplayMode: Record<DisplayLocation, DisplayMode>
+  hideStagingBanner: boolean
 }
 
 export default defineNuxtPlugin({
-  name: "cosmetics",
+  name: 'cosmetics',
   setup() {
-    const cosmetics = useCookie<Cosmetics>("cosmetics", {
+    const cosmetics = useCookie<Cosmetics>('cosmetics', {
       maxAge: 60 * 60 * 24 * 365 * 10,
-      sameSite: "lax",
+      sameSite: 'lax',
       secure: true,
       httpOnly: false,
-      path: "/",
+      path: '/',
       default: () => ({
         rightSearchLayout: false,
         leftContentLayout: false,
@@ -40,21 +40,21 @@ export default defineNuxtPlugin({
         externalLinksNewTab: true,
         notUsingBlockers: false,
         hideModrinthAppPromos: false,
-        preferredDarkTheme: "dark",
+        preferredDarkTheme: 'dark',
         searchDisplayMode: {
-          mod: "list",
-          plugin: "list",
-          resourcepack: "gallery",
-          modpack: "list",
-          shader: "gallery",
-          datapack: "list",
-          user: "list",
-          collection: "list",
+          mod: 'list',
+          plugin: 'list',
+          resourcepack: 'gallery',
+          modpack: 'list',
+          shader: 'gallery',
+          datapack: 'list',
+          user: 'list',
+          collection: 'list',
         },
         hideStagingBanner: false,
       }),
-    });
+    })
 
-    return { provide: { cosmetics } };
+    return { provide: { cosmetics } }
   },
-});
+})
diff --git a/apps/frontend/src/plugins/dayjs.js b/apps/frontend/src/plugins/dayjs.js
index 8cacaed78..f0c05d594 100644
--- a/apps/frontend/src/plugins/dayjs.js
+++ b/apps/frontend/src/plugins/dayjs.js
@@ -1,16 +1,16 @@
-import dayjs from "dayjs";
-import advanced from "dayjs/plugin/advancedFormat";
-import quarterOfYear from "dayjs/plugin/quarterOfYear";
-import relativeTime from "dayjs/plugin/relativeTime";
+import dayjs from 'dayjs'
+import advanced from 'dayjs/plugin/advancedFormat'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
+import relativeTime from 'dayjs/plugin/relativeTime'
 
-dayjs.extend(quarterOfYear);
-dayjs.extend(advanced);
-dayjs.extend(relativeTime);
+dayjs.extend(quarterOfYear)
+dayjs.extend(advanced)
+dayjs.extend(relativeTime)
 
 export default defineNuxtPlugin(() => {
   return {
     provide: {
       dayjs,
     },
-  };
-});
+  }
+})
diff --git a/apps/frontend/src/plugins/floating-vue.js b/apps/frontend/src/plugins/floating-vue.js
index 44e1433fd..8e4198ea1 100644
--- a/apps/frontend/src/plugins/floating-vue.js
+++ b/apps/frontend/src/plugins/floating-vue.js
@@ -1,20 +1,20 @@
-import "floating-vue/dist/style.css";
+import 'floating-vue/dist/style.css'
 
-import FloatingVue from "floating-vue";
+import FloatingVue from 'floating-vue'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(FloatingVue, {
     themes: {
-      "ribbit-popout": {
-        $extend: "dropdown",
-        placement: "bottom-end",
+      'ribbit-popout': {
+        $extend: 'dropdown',
+        placement: 'bottom-end',
         instantMove: true,
         distance: 8,
       },
-      "dismissable-prompt": {
-        $extend: "dropdown",
-        placement: "bottom-start",
+      'dismissable-prompt': {
+        $extend: 'dropdown',
+        placement: 'bottom-start',
       },
     },
-  });
-});
+  })
+})
diff --git a/apps/frontend/src/plugins/scroll.client.js b/apps/frontend/src/plugins/scroll.client.js
index 6b03a26bb..554d6ea6c 100644
--- a/apps/frontend/src/plugins/scroll.client.js
+++ b/apps/frontend/src/plugins/scroll.client.js
@@ -1,7 +1,7 @@
 export default defineNuxtPlugin(() => {
-  const nuxtApp = useNuxtApp();
+  const nuxtApp = useNuxtApp()
 
-  nuxtApp.hooks.hook("page:transition:finish", () => {
-    document.querySelector("[data-scroll]")?.scrollTo({ top: 0 });
-  });
-});
+  nuxtApp.hooks.hook('page:transition:finish', () => {
+    document.querySelector('[data-scroll]')?.scrollTo({ top: 0 })
+  })
+})
diff --git a/apps/frontend/src/plugins/shorthands.js b/apps/frontend/src/plugins/shorthands.js
index 218b20d20..963747b58 100644
--- a/apps/frontend/src/plugins/shorthands.js
+++ b/apps/frontend/src/plugins/shorthands.js
@@ -1,198 +1,198 @@
-import { getProjectTypeForUrlShorthand } from "~/helpers/projects.js";
+import { getProjectTypeForUrlShorthand } from '~/helpers/projects.js'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const tagStore = useTags();
+  const tagStore = useTags()
 
-  nuxtApp.provide("formatNumber", formatNumber);
-  nuxtApp.provide("capitalizeString", capitalizeString);
-  nuxtApp.provide("formatMoney", formatMoney);
-  nuxtApp.provide("formatVersion", (versionsArray) => formatVersions(tagStore, versionsArray));
-  nuxtApp.provide("orElse", (first, otherwise) => first ?? otherwise);
-  nuxtApp.provide("external", () => {
-    const cosmeticsStore = useCosmetics().value;
+  nuxtApp.provide('formatNumber', formatNumber)
+  nuxtApp.provide('capitalizeString', capitalizeString)
+  nuxtApp.provide('formatMoney', formatMoney)
+  nuxtApp.provide('formatVersion', (versionsArray) => formatVersions(tagStore, versionsArray))
+  nuxtApp.provide('orElse', (first, otherwise) => first ?? otherwise)
+  nuxtApp.provide('external', () => {
+    const cosmeticsStore = useCosmetics().value
 
-    return cosmeticsStore.externalLinksNewTab ? "_blank" : "";
-  });
+    return cosmeticsStore.externalLinksNewTab ? '_blank' : ''
+  })
 
   /*
     Only use on the complete list of versions for a project, partial lists will generate
     the wrong version slugs
   */
-  nuxtApp.provide("computeVersions", (versions, members) => {
-    const visitedVersions = [];
-    const returnVersions = [];
+  nuxtApp.provide('computeVersions', (versions, members) => {
+    const visitedVersions = []
+    const returnVersions = []
 
-    const authorMembers = {};
+    const authorMembers = {}
 
     for (const version of versions.sort(
       (a, b) => nuxtApp.$dayjs(a.date_published) - nuxtApp.$dayjs(b.date_published),
     )) {
       if (visitedVersions.includes(version.version_number)) {
-        visitedVersions.push(version.version_number);
-        version.displayUrlEnding = version.id;
+        visitedVersions.push(version.version_number)
+        version.displayUrlEnding = version.id
       } else {
-        visitedVersions.push(version.version_number);
-        version.displayUrlEnding = version.version_number;
+        visitedVersions.push(version.version_number)
+        version.displayUrlEnding = version.version_number
       }
-      version.primaryFile = version.files.find((file) => file.primary) ?? version.files[0];
+      version.primaryFile = version.files.find((file) => file.primary) ?? version.files[0]
 
       if (!version.primaryFile) {
         version.primaryFile = {
           hashes: {
-            sha1: "",
-            sha512: "",
+            sha1: '',
+            sha512: '',
           },
-          url: "#",
-          filename: "unknown",
+          url: '#',
+          filename: 'unknown',
           primary: false,
           size: 0,
           file_type: null,
-        };
+        }
       }
 
-      version.author = authorMembers[version.author_id];
+      version.author = authorMembers[version.author_id]
       if (!version.author) {
-        version.author = members.find((x) => x.user.id === version.author_id);
-        authorMembers[version.author_id] = version.author;
+        version.author = members.find((x) => x.user.id === version.author_id)
+        authorMembers[version.author_id] = version.author
       }
 
-      returnVersions.push(version);
+      returnVersions.push(version)
     }
 
     return returnVersions
       .reverse()
       .map((version, index) => {
-        const nextVersion = returnVersions[index + 1];
+        const nextVersion = returnVersions[index + 1]
         if (nextVersion && version.changelog && nextVersion.changelog === version.changelog) {
-          return { duplicate: true, ...version };
+          return { duplicate: true, ...version }
         } else {
-          return { duplicate: false, ...version };
+          return { duplicate: false, ...version }
         }
       })
-      .sort((a, b) => nuxtApp.$dayjs(b.date_published) - nuxtApp.$dayjs(a.date_published));
-  });
-  nuxtApp.provide("getProjectTypeForDisplay", (type, categories) => {
-    if (type === "mod") {
+      .sort((a, b) => nuxtApp.$dayjs(b.date_published) - nuxtApp.$dayjs(a.date_published))
+  })
+  nuxtApp.provide('getProjectTypeForDisplay', (type, categories) => {
+    if (type === 'mod') {
       const isPlugin = categories.some((category) => {
-        return tagStore.value.loaderData.allPluginLoaders.includes(category);
-      });
+        return tagStore.value.loaderData.allPluginLoaders.includes(category)
+      })
       const isMod = categories.some((category) => {
-        return tagStore.value.loaderData.modLoaders.includes(category);
-      });
+        return tagStore.value.loaderData.modLoaders.includes(category)
+      })
       const isDataPack = categories.some((category) => {
-        return tagStore.value.loaderData.dataPackLoaders.includes(category);
-      });
+        return tagStore.value.loaderData.dataPackLoaders.includes(category)
+      })
 
       if (isMod && isPlugin && isDataPack) {
-        return "mod, plugin, and data pack";
+        return 'mod, plugin, and data pack'
       } else if (isMod && isPlugin) {
-        return "mod and plugin";
+        return 'mod and plugin'
       } else if (isMod && isDataPack) {
-        return "mod and data pack";
+        return 'mod and data pack'
       } else if (isPlugin && isDataPack) {
-        return "plugin and data pack";
+        return 'plugin and data pack'
       } else if (isDataPack) {
-        return "data pack";
+        return 'data pack'
       } else if (isPlugin) {
-        return "plugin";
+        return 'plugin'
       }
     }
 
-    return type;
-  });
-  nuxtApp.provide("getProjectTypeForUrl", (type, loaders, tags) =>
+    return type
+  })
+  nuxtApp.provide('getProjectTypeForUrl', (type, loaders, tags) =>
     getProjectTypeForUrlShorthand(type, loaders, tags),
-  );
-  nuxtApp.provide("cycleValue", cycleValue);
-  nuxtApp.provide("sortedCategories", () => {
+  )
+  nuxtApp.provide('cycleValue', cycleValue)
+  nuxtApp.provide('sortedCategories', () => {
     return tagStore.value.categories.slice().sort((a, b) => {
-      const headerCompare = a.header.localeCompare(b.header);
+      const headerCompare = a.header.localeCompare(b.header)
       if (headerCompare !== 0) {
-        return headerCompare;
+        return headerCompare
       }
-      if (a.header === "resolutions" && b.header === "resolutions") {
-        return a.name.replace(/\D/g, "") - b.name.replace(/\D/g, "");
-      } else if (a.header === "performance impact" && b.header === "performance impact") {
-        const x = ["potato", "low", "medium", "high", "screenshot"];
+      if (a.header === 'resolutions' && b.header === 'resolutions') {
+        return a.name.replace(/\D/g, '') - b.name.replace(/\D/g, '')
+      } else if (a.header === 'performance impact' && b.header === 'performance impact') {
+        const x = ['potato', 'low', 'medium', 'high', 'screenshot']
 
-        return x.indexOf(a.name) - x.indexOf(b.name);
+        return x.indexOf(a.name) - x.indexOf(b.name)
       }
-      return 0;
-    });
-  });
-  nuxtApp.provide("notify", (notif) => addNotification(notif));
-});
+      return 0
+    })
+  })
+  nuxtApp.provide('notify', (notif) => addNotification(notif))
+})
 export const formatNumber = (number, abbreviate = true) => {
-  const x = +number;
+  const x = +number
   if (x >= 1000000 && abbreviate) {
-    return (x / 1000000).toFixed(2).toString() + "M";
+    return (x / 1000000).toFixed(2).toString() + 'M'
   } else if (x >= 10000 && abbreviate) {
-    return (x / 1000).toFixed(1).toString() + "k";
+    return (x / 1000).toFixed(1).toString() + 'k'
   } else {
-    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
   }
-};
+}
 
 export const formatMoney = (number, abbreviate = false) => {
-  number = Math.floor(number * 100) / 100;
-  const x = +number;
+  number = Math.floor(number * 100) / 100
+  const x = +number
   if (x >= 1000000 && abbreviate) {
-    return "$" + (x / 1000000).toFixed(2).toString() + "M";
+    return '$' + (x / 1000000).toFixed(2).toString() + 'M'
   } else if (x >= 10000 && abbreviate) {
-    return "$" + (x / 1000).toFixed(2).toString() + "k";
+    return '$' + (x / 1000).toFixed(2).toString() + 'k'
   } else {
     return (
-      "$" +
+      '$' +
       x
         .toFixed(2)
         .toString()
-        .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-    );
+        .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    )
   }
-};
+}
 
 export const capitalizeString = (name) => {
-  return name ? name.charAt(0).toUpperCase() + name.slice(1) : name;
-};
+  return name ? name.charAt(0).toUpperCase() + name.slice(1) : name
+}
 
 export const formatVersions = (tag, versionArray) => {
-  const allVersions = tag.value.gameVersions.slice().reverse();
-  const allReleases = allVersions.filter((x) => x.version_type === "release");
+  const allVersions = tag.value.gameVersions.slice().reverse()
+  const allReleases = allVersions.filter((x) => x.version_type === 'release')
 
-  const intervals = [];
-  let currentInterval = 0;
+  const intervals = []
+  let currentInterval = 0
 
   for (let i = 0; i < versionArray.length; i++) {
-    const index = allVersions.findIndex((x) => x.version === versionArray[i]);
-    const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i]);
+    const index = allVersions.findIndex((x) => x.version === versionArray[i])
+    const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i])
 
     if (i === 0) {
-      intervals.push([[versionArray[i], index, releaseIndex]]);
+      intervals.push([[versionArray[i], index, releaseIndex]])
     } else {
-      const intervalBase = intervals[currentInterval];
+      const intervalBase = intervals[currentInterval]
 
       if (
         (index - intervalBase[intervalBase.length - 1][1] === 1 ||
           releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
-        (allVersions[intervalBase[0][1]].version_type === "release" ||
-          allVersions[index].version_type !== "release")
+        (allVersions[intervalBase[0][1]].version_type === 'release' ||
+          allVersions[index].version_type !== 'release')
       ) {
-        intervalBase[1] = [versionArray[i], index, releaseIndex];
+        intervalBase[1] = [versionArray[i], index, releaseIndex]
       } else {
-        currentInterval += 1;
-        intervals[currentInterval] = [[versionArray[i], index, releaseIndex]];
+        currentInterval += 1
+        intervals[currentInterval] = [[versionArray[i], index, releaseIndex]]
       }
     }
   }
 
-  const newIntervals = [];
+  const newIntervals = []
   for (let i = 0; i < intervals.length; i++) {
-    const interval = intervals[i];
+    const interval = intervals[i]
 
     if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
-      let lastSnapshot = null;
+      let lastSnapshot = null
       for (let j = interval[1][1]; j > interval[0][1]; j--) {
-        if (allVersions[j].version_type === "release") {
+        if (allVersions[j].version_type === 'release') {
           newIntervals.push([
             interval[0],
             [
@@ -200,38 +200,38 @@ export const formatVersions = (tag, versionArray) => {
               j,
               allReleases.findIndex((x) => x.version === allVersions[j].version),
             ],
-          ]);
+          ])
 
           if (lastSnapshot !== null && lastSnapshot !== j + 1) {
-            newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]]);
+            newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]])
           } else {
-            newIntervals.push([interval[1]]);
+            newIntervals.push([interval[1]])
           }
 
-          break;
+          break
         } else {
-          lastSnapshot = j;
+          lastSnapshot = j
         }
       }
     } else {
-      newIntervals.push(interval);
+      newIntervals.push(interval)
     }
   }
 
-  const output = [];
+  const output = []
 
   for (const interval of newIntervals) {
     if (interval.length === 2) {
-      output.push(`${interval[0][0]}–${interval[1][0]}`);
+      output.push(`${interval[0][0]}–${interval[1][0]}`)
     } else {
-      output.push(interval[0][0]);
+      output.push(interval[0][0])
     }
   }
 
-  return (output.length === 0 ? versionArray : output).join(", ");
-};
+  return (output.length === 0 ? versionArray : output).join(', ')
+}
 
 export const cycleValue = (value, values) => {
-  const index = values.indexOf(value) + 1;
-  return values[index % values.length];
-};
+  const index = values.indexOf(value) + 1
+  return values[index % values.length]
+}
diff --git a/apps/frontend/src/plugins/theme/index.ts b/apps/frontend/src/plugins/theme/index.ts
index 20f34ce85..423432ef2 100644
--- a/apps/frontend/src/plugins/theme/index.ts
+++ b/apps/frontend/src/plugins/theme/index.ts
@@ -1,73 +1,73 @@
-import { ref } from "vue";
+import { ref } from 'vue'
 
-import { useNativeTheme } from "./native-theme.ts";
-import { usePreferredThemes } from "./preferred-theme.ts";
-import { useThemeSettings } from "./theme-settings.ts";
-import { isDarkTheme } from "./themes.ts";
+import { useNativeTheme } from './native-theme.ts'
+import { usePreferredThemes } from './preferred-theme.ts'
+import { useThemeSettings } from './theme-settings.ts'
+import { isDarkTheme } from './themes.ts'
 
-export * from "./themes.ts";
+export * from './themes.ts'
 
 export default defineNuxtPlugin({
-  name: "theme",
-  dependsOn: ["cosmetics"],
+  name: 'theme',
+  dependsOn: ['cosmetics'],
   setup(nuxtApp) {
-    const $nativeTheme = useNativeTheme();
+    const $nativeTheme = useNativeTheme()
 
-    const $preferredThemes = usePreferredThemes();
+    const $preferredThemes = usePreferredThemes()
 
     function getPreferredNativeTheme() {
-      const nativeTheme = $nativeTheme.value;
+      const nativeTheme = $nativeTheme.value
       switch (nativeTheme) {
-        case "light":
-          return $preferredThemes.light;
-        case "dark":
-        case "unknown":
-          if (import.meta.dev && import.meta.server && nativeTheme === "unknown") {
+        case 'light':
+          return $preferredThemes.light
+        case 'dark':
+        case 'unknown':
+          if (import.meta.dev && import.meta.server && nativeTheme === 'unknown') {
             console.warn(
-              "[theme] no client hint is available for request, using dark theme as default",
-            );
+              '[theme] no client hint is available for request, using dark theme as default',
+            )
           }
 
-          return $preferredThemes.dark;
+          return $preferredThemes.dark
       }
     }
 
-    const $settings = useThemeSettings(() => getPreferredNativeTheme());
+    const $settings = useThemeSettings(() => getPreferredNativeTheme())
 
-    useHead({ htmlAttrs: { class: () => [`${$settings.active}-mode`] } });
+    useHead({ htmlAttrs: { class: () => [`${$settings.active}-mode`] } })
 
     function syncTheme() {
       $settings.active =
-        $settings.preferred === "system" ? getPreferredNativeTheme() : $settings.preferred;
+        $settings.preferred === 'system' ? getPreferredNativeTheme() : $settings.preferred
     }
 
     if (
       import.meta.server &&
-      $settings.preferred === "system" &&
-      $nativeTheme.value !== "unknown"
+      $settings.preferred === 'system' &&
+      $nativeTheme.value !== 'unknown'
     ) {
       // take advantage of the client hint
-      syncTheme();
+      syncTheme()
     }
 
     if (import.meta.client) {
-      const $clientReady = ref(false);
+      const $clientReady = ref(false)
 
-      nuxtApp.hook("app:suspense:resolve", () => {
-        $clientReady.value = true;
-      });
+      nuxtApp.hook('app:suspense:resolve', () => {
+        $clientReady.value = true
+      })
 
-      watchEffect(() => $clientReady.value && syncTheme());
+      watchEffect(() => $clientReady.value && syncTheme())
     }
 
     function cycle() {
       const nextTheme = isDarkTheme($settings.active)
         ? $preferredThemes.light
-        : $preferredThemes.dark;
+        : $preferredThemes.dark
 
-      $settings.preferred = nextTheme;
+      $settings.preferred = nextTheme
 
-      return nextTheme;
+      return nextTheme
     }
 
     return {
@@ -86,6 +86,6 @@ export default defineNuxtPlugin({
           cycle,
         }),
       },
-    };
+    }
   },
-});
+})
diff --git a/apps/frontend/src/plugins/theme/native-theme.ts b/apps/frontend/src/plugins/theme/native-theme.ts
index a47f72a39..991e80ba4 100644
--- a/apps/frontend/src/plugins/theme/native-theme.ts
+++ b/apps/frontend/src/plugins/theme/native-theme.ts
@@ -1,38 +1,38 @@
-export type SystemTheme = "unknown" | "light" | "dark";
+export type SystemTheme = 'unknown' | 'light' | 'dark'
 
 function useNativeThemeServer() {
-  let clientHint;
+  let clientHint
 
-  switch (useRequestHeader("Sec-CH-Prefers-Color-Scheme")) {
-    case "light":
-      clientHint = "light";
-      break;
-    case "dark":
-      clientHint = "dark";
-      break;
+  switch (useRequestHeader('Sec-CH-Prefers-Color-Scheme')) {
+    case 'light':
+      clientHint = 'light'
+      break
+    case 'dark':
+      clientHint = 'dark'
+      break
     default:
-      clientHint = "unknown";
+      clientHint = 'unknown'
   }
 
-  return computed(() => clientHint as SystemTheme);
+  return computed(() => clientHint as SystemTheme)
 }
 
 function useNativeThemeClient() {
-  const lightPreference = window.matchMedia("(prefers-color-scheme: light)");
+  const lightPreference = window.matchMedia('(prefers-color-scheme: light)')
 
-  const isLight = ref(lightPreference.matches);
+  const isLight = ref(lightPreference.matches)
 
-  const onPreferenceChange = ({ matches }: MediaQueryListEvent) => (isLight.value = matches);
+  const onPreferenceChange = ({ matches }: MediaQueryListEvent) => (isLight.value = matches)
 
-  lightPreference.addEventListener("change", onPreferenceChange);
+  lightPreference.addEventListener('change', onPreferenceChange)
 
-  onScopeDispose(() => lightPreference.removeEventListener("change", onPreferenceChange));
+  onScopeDispose(() => lightPreference.removeEventListener('change', onPreferenceChange))
 
-  return computed<SystemTheme>(() => (isLight.value ? "light" : "dark"));
+  return computed<SystemTheme>(() => (isLight.value ? 'light' : 'dark'))
 }
 
 export function useNativeTheme() {
-  if (import.meta.server) return useNativeThemeServer();
-  if (import.meta.client) return useNativeThemeClient();
-  throw new Error("Cannot determine the side");
+  if (import.meta.server) return useNativeThemeServer()
+  if (import.meta.client) return useNativeThemeClient()
+  throw new Error('Cannot determine the side')
 }
diff --git a/apps/frontend/src/plugins/theme/preferred-theme.ts b/apps/frontend/src/plugins/theme/preferred-theme.ts
index 700e0e95e..da69fe3fa 100644
--- a/apps/frontend/src/plugins/theme/preferred-theme.ts
+++ b/apps/frontend/src/plugins/theme/preferred-theme.ts
@@ -1,32 +1,32 @@
-import { type DarkTheme, isDarkTheme } from "./themes.ts";
+import { type DarkTheme, isDarkTheme } from './themes.ts'
 
 export function usePreferredThemes() {
   // TODO: migrate theme preferences out of cosmetics to theme settings
-  const cosmetics = useCosmetics();
+  const cosmetics = useCosmetics()
 
   const dark = computed({
     get(): DarkTheme {
-      const theme = cosmetics.value?.preferredDarkTheme;
+      const theme = cosmetics.value?.preferredDarkTheme
 
       if (theme == null) {
-        console.warn("[theme] cosmetics.preferredDarkTheme is not defined");
-        return "dark";
+        console.warn('[theme] cosmetics.preferredDarkTheme is not defined')
+        return 'dark'
       }
 
       if (!isDarkTheme(theme)) {
-        console.warn(`[theme] cosmetics.preferredDarkTheme contains invalid value: ${theme}`);
-        return "dark";
+        console.warn(`[theme] cosmetics.preferredDarkTheme contains invalid value: ${theme}`)
+        return 'dark'
       }
 
-      return theme;
+      return theme
     },
     set(value) {
-      cosmetics.value.preferredDarkTheme = value;
+      cosmetics.value.preferredDarkTheme = value
     },
-  });
+  })
 
   return reactive({
     dark,
-    light: "light" as const,
-  });
+    light: 'light' as const,
+  })
 }
diff --git a/apps/frontend/src/plugins/theme/theme-settings.ts b/apps/frontend/src/plugins/theme/theme-settings.ts
index 85ae18715..427af0a63 100644
--- a/apps/frontend/src/plugins/theme/theme-settings.ts
+++ b/apps/frontend/src/plugins/theme/theme-settings.ts
@@ -1,32 +1,32 @@
-import type { Theme } from "./themes.ts";
+import type { Theme } from './themes.ts'
 
 interface ThemeSettings {
-  preference: Theme | "system";
-  value: Theme;
+  preference: Theme | 'system'
+  value: Theme
 }
 
 export function useThemeSettings(getDefaultTheme?: () => Theme) {
-  getDefaultTheme ??= () => "dark";
+  getDefaultTheme ??= () => 'dark'
 
-  const $settings = useCookie<ThemeSettings>("color-mode", {
+  const $settings = useCookie<ThemeSettings>('color-mode', {
     maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: "lax",
+    sameSite: 'lax',
     secure: true,
     httpOnly: false,
-    path: "/",
-  });
+    path: '/',
+  })
 
   // reset theme settings to a default value if the cookie is missing or contains invalid value
-  if ($settings.value == null || typeof $settings.value !== "object") {
+  if ($settings.value == null || typeof $settings.value !== 'object') {
     $settings.value = {
-      preference: "system",
+      preference: 'system',
       value: getDefaultTheme(),
-    };
+    }
   }
 
   return reactive({
     preferred: computed({
-      get: () => $settings.value.preference ?? "system",
+      get: () => $settings.value.preference ?? 'system',
       set: (value) => ($settings.value.preference = value),
     }),
 
@@ -34,5 +34,5 @@ export function useThemeSettings(getDefaultTheme?: () => Theme) {
       get: () => $settings.value.value ?? getDefaultTheme(),
       set: (value) => ($settings.value.value = value),
     }),
-  });
+  })
 }
diff --git a/apps/frontend/src/plugins/theme/themes.ts b/apps/frontend/src/plugins/theme/themes.ts
index d32a87269..7d7f4293c 100644
--- a/apps/frontend/src/plugins/theme/themes.ts
+++ b/apps/frontend/src/plugins/theme/themes.ts
@@ -1,27 +1,27 @@
-export const LightThemes = ["light"] as const;
+export const LightThemes = ['light'] as const
 
-export type LightTheme = (typeof LightThemes)[number];
+export type LightTheme = (typeof LightThemes)[number]
 
-export const DarkThemes = ["dark", "oled", "retro"] as const;
+export const DarkThemes = ['dark', 'oled', 'retro'] as const
 
-export type DarkTheme = (typeof DarkThemes)[number];
+export type DarkTheme = (typeof DarkThemes)[number]
 
-export type Theme = LightTheme | DarkTheme;
+export type Theme = LightTheme | DarkTheme
 
 export function isLightTheme(theme: Theme | (string & Record<never, never>)): theme is LightTheme {
-  return LightThemes.includes(theme as any);
+  return LightThemes.includes(theme as any)
 }
 
 export function isDarkTheme(theme: Theme | (string & Record<never, never>)): theme is DarkTheme {
-  return DarkThemes.includes(theme as any);
+  return DarkThemes.includes(theme as any)
 }
 
-export type ThemeType = "light" | "dark";
+export type ThemeType = 'light' | 'dark'
 
 export function getThemeType(
   theme: Theme | (string & Record<never, never>),
-): ThemeType | "unknown" {
-  if (isLightTheme(theme)) return "light";
-  if (isDarkTheme(theme)) return "dark";
-  return "unknown";
+): ThemeType | 'unknown' {
+  if (isLightTheme(theme)) return 'light'
+  if (isDarkTheme(theme)) return 'dark'
+  return 'unknown'
 }
diff --git a/apps/frontend/src/public/inmobi.js b/apps/frontend/src/public/inmobi.js
index 3db3fe72d..b5fc61923 100644
--- a/apps/frontend/src/public/inmobi.js
+++ b/apps/frontend/src/public/inmobi.js
@@ -1,91 +1,91 @@
-(function () {
-  var host = "modrinth.com";
+;(function () {
+  var host = 'modrinth.com'
   // var host = window.location.hostname;
-  var element = document.createElement("script");
-  var firstScript = document.getElementsByTagName("script")[0];
-  var url = "https://cmp.inmobi.com".concat(
-    "/choice/",
-    "GANCBjEfRH5Fe",
-    "/",
+  var element = document.createElement('script')
+  var firstScript = document.getElementsByTagName('script')[0]
+  var url = 'https://cmp.inmobi.com'.concat(
+    '/choice/',
+    'GANCBjEfRH5Fe',
+    '/',
     host,
-    "/choice.js?tag_version=V3",
-  );
-  var uspTries = 0;
-  var uspTriesLimit = 3;
-  element.async = true;
-  element.type = "text/javascript";
-  element.src = url;
+    '/choice.js?tag_version=V3',
+  )
+  var uspTries = 0
+  var uspTriesLimit = 3
+  element.async = true
+  element.type = 'text/javascript'
+  element.src = url
 
-  firstScript.parentNode.insertBefore(element, firstScript);
+  firstScript.parentNode.insertBefore(element, firstScript)
 
   function makeStub() {
-    var TCF_LOCATOR_NAME = "__tcfapiLocator";
-    var queue = [];
-    var win = window;
-    var cmpFrame;
+    var TCF_LOCATOR_NAME = '__tcfapiLocator'
+    var queue = []
+    var win = window
+    var cmpFrame
 
     function addFrame() {
-      var doc = win.document;
-      var otherCMP = !!win.frames[TCF_LOCATOR_NAME];
+      var doc = win.document
+      var otherCMP = !!win.frames[TCF_LOCATOR_NAME]
 
       if (!otherCMP) {
         if (doc.body) {
-          var iframe = doc.createElement("iframe");
+          var iframe = doc.createElement('iframe')
 
-          iframe.style.cssText = "display:none";
-          iframe.name = TCF_LOCATOR_NAME;
-          doc.body.appendChild(iframe);
+          iframe.style.cssText = 'display:none'
+          iframe.name = TCF_LOCATOR_NAME
+          doc.body.appendChild(iframe)
         } else {
-          setTimeout(addFrame, 5);
+          setTimeout(addFrame, 5)
         }
       }
-      return !otherCMP;
+      return !otherCMP
     }
 
     function tcfAPIHandler() {
-      var gdprApplies;
-      var args = arguments;
+      var gdprApplies
+      var args = arguments
 
       if (!args.length) {
-        return queue;
-      } else if (args[0] === "setGdprApplies") {
-        if (args.length > 3 && args[2] === 2 && typeof args[3] === "boolean") {
-          gdprApplies = args[3];
-          if (typeof args[2] === "function") {
-            args[2]("set", true);
+        return queue
+      } else if (args[0] === 'setGdprApplies') {
+        if (args.length > 3 && args[2] === 2 && typeof args[3] === 'boolean') {
+          gdprApplies = args[3]
+          if (typeof args[2] === 'function') {
+            args[2]('set', true)
           }
         }
-      } else if (args[0] === "ping") {
+      } else if (args[0] === 'ping') {
         var retr = {
           gdprApplies: gdprApplies,
           cmpLoaded: false,
-          cmpStatus: "stub",
-        };
+          cmpStatus: 'stub',
+        }
 
-        if (typeof args[2] === "function") {
-          args[2](retr);
+        if (typeof args[2] === 'function') {
+          args[2](retr)
         }
       } else {
-        if (args[0] === "init" && typeof args[3] === "object") {
-          args[3] = Object.assign(args[3], { tag_version: "V3" });
+        if (args[0] === 'init' && typeof args[3] === 'object') {
+          args[3] = Object.assign(args[3], { tag_version: 'V3' })
         }
-        queue.push(args);
+        queue.push(args)
       }
     }
 
     function postMessageEventHandler(event) {
-      var msgIsString = typeof event.data === "string";
-      var json = {};
+      var msgIsString = typeof event.data === 'string'
+      var json = {}
 
       try {
         if (msgIsString) {
-          json = JSON.parse(event.data);
+          json = JSON.parse(event.data)
         } else {
-          json = event.data;
+          json = event.data
         }
       } catch (ignore) {}
 
-      var payload = json.__tcfapiCall;
+      var payload = json.__tcfapiCall
 
       if (payload) {
         window.__tcfapi(
@@ -98,63 +98,63 @@
                 success: success,
                 callId: payload.callId,
               },
-            };
+            }
             if (msgIsString) {
-              returnMsg = JSON.stringify(returnMsg);
+              returnMsg = JSON.stringify(returnMsg)
             }
             if (event && event.source && event.source.postMessage) {
-              event.source.postMessage(returnMsg, "*");
+              event.source.postMessage(returnMsg, '*')
             }
           },
           payload.parameter,
-        );
+        )
       }
     }
 
     while (win) {
       try {
         if (win.frames[TCF_LOCATOR_NAME]) {
-          cmpFrame = win;
-          break;
+          cmpFrame = win
+          break
         }
       } catch (ignore) {}
 
       if (win === window.top) {
-        break;
+        break
       }
-      win = win.parent;
+      win = win.parent
     }
     if (!cmpFrame) {
-      addFrame();
-      win.__tcfapi = tcfAPIHandler;
-      win.addEventListener("message", postMessageEventHandler, false);
+      addFrame()
+      win.__tcfapi = tcfAPIHandler
+      win.addEventListener('message', postMessageEventHandler, false)
     }
   }
 
-  makeStub();
+  makeStub()
 
   var uspStubFunction = function () {
-    var arg = arguments;
+    var arg = arguments
     if (typeof window.__uspapi !== uspStubFunction) {
       setTimeout(function () {
-        if (typeof window.__uspapi !== "undefined") {
-          window.__uspapi.apply(window.__uspapi, arg);
+        if (typeof window.__uspapi !== 'undefined') {
+          window.__uspapi.apply(window.__uspapi, arg)
         }
-      }, 500);
+      }, 500)
     }
-  };
+  }
 
   var checkIfUspIsReady = function () {
-    uspTries++;
+    uspTries++
     if (window.__uspapi === uspStubFunction && uspTries < uspTriesLimit) {
-      console.warn("USP is not accessible");
+      console.warn('USP is not accessible')
     } else {
-      clearInterval(uspInterval);
+      clearInterval(uspInterval)
     }
-  };
-
-  if (typeof window.__uspapi === "undefined") {
-    window.__uspapi = uspStubFunction;
-    var uspInterval = setInterval(checkIfUspIsReady, 6000);
   }
-})();
+
+  if (typeof window.__uspapi === 'undefined') {
+    window.__uspapi = uspStubFunction
+    var uspInterval = setInterval(checkIfUspIsReady, 6000)
+  }
+})()
diff --git a/apps/frontend/src/public/promo-frame.html b/apps/frontend/src/public/promo-frame.html
index c8cce954c..110c5a4e1 100644
--- a/apps/frontend/src/public/promo-frame.html
+++ b/apps/frontend/src/public/promo-frame.html
@@ -47,27 +47,27 @@
       <div id="modrinth-rail-1"></div>
     </div>
     <script>
-      window.tude = window.tude || { cmd: [] };
+      window.tude = window.tude || { cmd: [] }
 
-      window.Raven = window.Raven || { cmd: [] };
+      window.Raven = window.Raven || { cmd: [] }
 
       window.Raven.cmd.push(({ config }) => {
         config.setCustom({
-          param1: "app",
-        });
-      });
+          param1: 'app',
+        })
+      })
 
       tude.cmd.push(function () {
         tude.refreshAdsViaDivMappings([
           {
-            divId: "modrinth-rail-1",
-            baseDivId: "pb-slot-square-2",
+            divId: 'modrinth-rail-1',
+            baseDivId: 'pb-slot-square-2',
             targeting: {
-              location: "app",
+              location: 'app',
             },
           },
-        ]);
-      });
+        ])
+      })
 
       // window.addEventListener(
       //   "message",
@@ -86,15 +86,15 @@
       //   false,
       // );
 
-      window.addEventListener("mousewheel", (event) => {
+      window.addEventListener('mousewheel', (event) => {
         if (window.__TAURI_INTERNALS__) {
-          window.__TAURI_INTERNALS__.invoke("plugin:ads|scroll_ads_window", {
+          window.__TAURI_INTERNALS__.invoke('plugin:ads|scroll_ads_window', {
             scroll: event.deltaY,
-          });
+          })
         }
-      });
+      })
 
-      document.addEventListener("contextmenu", (event) => event.preventDefault());
+      document.addEventListener('contextmenu', (event) => event.preventDefault())
     </script>
   </body>
 </html>
diff --git a/apps/frontend/src/server/routes/.well-known/change-password.ts b/apps/frontend/src/server/routes/.well-known/change-password.ts
index f64d704e8..8612dc699 100644
--- a/apps/frontend/src/server/routes/.well-known/change-password.ts
+++ b/apps/frontend/src/server/routes/.well-known/change-password.ts
@@ -1,3 +1,3 @@
 export default defineEventHandler((event) => {
-  return sendRedirect(event, "/settings/account");
-});
+  return sendRedirect(event, '/settings/account')
+})
diff --git a/apps/frontend/src/store/console.ts b/apps/frontend/src/store/console.ts
index cc452d19c..9d85b0b48 100644
--- a/apps/frontend/src/store/console.ts
+++ b/apps/frontend/src/store/console.ts
@@ -1,13 +1,13 @@
-import { createGlobalState } from "@vueuse/core";
-import { type Ref, shallowRef } from "vue";
+import { createGlobalState } from '@vueuse/core'
+import { type Ref, shallowRef } from 'vue'
 
 /**
  * Maximum number of console output lines to store
  * @type {number}
  */
-const maxLines = 10000;
-const batchTimeout = 300; // ms
-const initialBatchSize = 256;
+const maxLines = 10000
+const batchTimeout = 300 // ms
+const initialBatchSize = 256
 
 /**
  * Provides a global console output state management system
@@ -23,56 +23,56 @@ export const useModrinthServersConsole = createGlobalState(() => {
    * Reactive array storing console output lines
    * @type {Ref<string[]>}
    */
-  const output: Ref<string[]> = shallowRef<string[]>([]);
-  const searchQuery: Ref<string> = shallowRef("");
-  const filteredOutput: Ref<string[]> = shallowRef([]);
-  let searchRegex: RegExp | null = null;
+  const output: Ref<string[]> = shallowRef<string[]>([])
+  const searchQuery: Ref<string> = shallowRef('')
+  const filteredOutput: Ref<string[]> = shallowRef([])
+  let searchRegex: RegExp | null = null
 
-  let lineBuffer: string[] = [];
-  let batchTimer: NodeJS.Timeout | null = null;
-  let isProcessingInitialBatch = false;
+  let lineBuffer: string[] = []
+  let batchTimer: NodeJS.Timeout | null = null
+  let isProcessingInitialBatch = false
 
-  let refilterTimer: NodeJS.Timeout | null = null;
-  const refilterTimeout = 100; // ms
+  let refilterTimer: NodeJS.Timeout | null = null
+  const refilterTimeout = 100 // ms
 
   const updateFilter = () => {
     if (!searchQuery.value) {
-      filteredOutput.value = [];
-      return;
+      filteredOutput.value = []
+      return
     }
 
     if (!searchRegex) {
-      searchRegex = new RegExp(searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i");
+      searchRegex = new RegExp(searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i')
     }
 
-    filteredOutput.value = output.value.filter((line) => searchRegex?.test(line) ?? false);
-  };
+    filteredOutput.value = output.value.filter((line) => searchRegex?.test(line) ?? false)
+  }
 
   const scheduleRefilter = () => {
-    if (refilterTimer) clearTimeout(refilterTimer);
-    refilterTimer = setTimeout(updateFilter, refilterTimeout);
-  };
+    if (refilterTimer) clearTimeout(refilterTimer)
+    refilterTimer = setTimeout(updateFilter, refilterTimeout)
+  }
 
   const flushBuffer = () => {
-    if (lineBuffer.length === 0) return;
+    if (lineBuffer.length === 0) return
 
-    const processedLines = lineBuffer.flatMap((line) => line.split("\n").filter(Boolean));
+    const processedLines = lineBuffer.flatMap((line) => line.split('\n').filter(Boolean))
 
     if (isProcessingInitialBatch && processedLines.length >= initialBatchSize) {
-      isProcessingInitialBatch = false;
-      output.value = processedLines.slice(-maxLines);
+      isProcessingInitialBatch = false
+      output.value = processedLines.slice(-maxLines)
     } else {
-      const newOutput = [...output.value, ...processedLines];
-      output.value = newOutput.slice(-maxLines);
+      const newOutput = [...output.value, ...processedLines]
+      output.value = newOutput.slice(-maxLines)
     }
 
-    lineBuffer = [];
-    batchTimer = null;
+    lineBuffer = []
+    batchTimer = null
 
     if (searchQuery.value) {
-      scheduleRefilter();
+      scheduleRefilter()
     }
-  };
+  }
 
   /**
    * Adds a new output line to the console output
@@ -81,12 +81,12 @@ export const useModrinthServersConsole = createGlobalState(() => {
    * @param {string} line - The console output line to add
    */
   const addLine = (line: string): void => {
-    lineBuffer.push(line);
+    lineBuffer.push(line)
 
     if (!batchTimer) {
-      batchTimer = setTimeout(flushBuffer, batchTimeout);
+      batchTimer = setTimeout(flushBuffer, batchTimeout)
     }
-  };
+  }
 
   /**
    * Adds multiple output lines to the console output
@@ -97,18 +97,18 @@ export const useModrinthServersConsole = createGlobalState(() => {
    */
   const addLines = (lines: string[]): void => {
     if (output.value.length === 0 && lines.length >= initialBatchSize) {
-      isProcessingInitialBatch = true;
-      lineBuffer = lines;
-      flushBuffer();
-      return;
+      isProcessingInitialBatch = true
+      lineBuffer = lines
+      flushBuffer()
+      return
     }
 
-    lineBuffer.push(...lines);
+    lineBuffer.push(...lines)
 
     if (!batchTimer) {
-      batchTimer = setTimeout(flushBuffer, batchTimeout);
+      batchTimer = setTimeout(flushBuffer, batchTimeout)
     }
-  };
+  }
 
   /**
    * Sets the search query and filters the output based on the query
@@ -116,30 +116,30 @@ export const useModrinthServersConsole = createGlobalState(() => {
    * @param {string} query - The search query
    */
   const setSearchQuery = (query: string): void => {
-    searchQuery.value = query;
-    searchRegex = null;
-    updateFilter();
-  };
+    searchQuery.value = query
+    searchRegex = null
+    updateFilter()
+  }
 
   /**
    * Clears all console output lines
    */
   const clear = (): void => {
-    output.value = [];
-    filteredOutput.value = [];
-    searchQuery.value = "";
-    lineBuffer = [];
-    isProcessingInitialBatch = false;
+    output.value = []
+    filteredOutput.value = []
+    searchQuery.value = ''
+    lineBuffer = []
+    isProcessingInitialBatch = false
     if (batchTimer) {
-      clearTimeout(batchTimer);
-      batchTimer = null;
+      clearTimeout(batchTimer)
+      batchTimer = null
     }
     if (refilterTimer) {
-      clearTimeout(refilterTimer);
-      refilterTimer = null;
+      clearTimeout(refilterTimer)
+      refilterTimer = null
     }
-    searchRegex = null;
-  };
+    searchRegex = null
+  }
 
   /**
    * Finds the index of a line in the main output
@@ -148,8 +148,8 @@ export const useModrinthServersConsole = createGlobalState(() => {
    * @returns {number} The index of the line, or -1 if not found
    */
   const findLineIndex = (line: string): number => {
-    return output.value.findIndex((l) => l === line);
-  };
+    return output.value.findIndex((l) => l === line)
+  }
 
   return {
     output,
@@ -160,5 +160,5 @@ export const useModrinthServersConsole = createGlobalState(() => {
     setSearchQuery,
     clear,
     findLineIndex,
-  };
-});
+  }
+})
diff --git a/apps/frontend/src/store/moderation.ts b/apps/frontend/src/store/moderation.ts
index 166960fe8..f27adef40 100644
--- a/apps/frontend/src/store/moderation.ts
+++ b/apps/frontend/src/store/moderation.ts
@@ -1,12 +1,12 @@
-import { createPinia,defineStore } from "pinia";
-import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import { createPinia, defineStore } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 export interface ModerationQueue {
-  items: string[];
-  total: number;
-  completed: number;
-  skipped: number;
-  lastUpdated: Date;
+  items: string[]
+  total: number
+  completed: number
+  skipped: number
+  lastUpdated: Date
 }
 
 const EMPTY_QUEUE: Partial<ModerationQueue> = {
@@ -16,16 +16,16 @@ const EMPTY_QUEUE: Partial<ModerationQueue> = {
   total: 0,
   completed: 0,
   skipped: 0,
-};
-
-function createEmptyQueue(): ModerationQueue {
-  return { ...EMPTY_QUEUE, lastUpdated: new Date() } as ModerationQueue;
 }
 
-const pinia = createPinia();
-pinia.use(piniaPluginPersistedstate);
+function createEmptyQueue(): ModerationQueue {
+  return { ...EMPTY_QUEUE, lastUpdated: new Date() } as ModerationQueue
+}
 
-export const useModerationStore = defineStore("moderation", {
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+export const useModerationStore = defineStore('moderation', {
   state: () => ({
     currentQueue: createEmptyQueue(),
   }),
@@ -34,8 +34,8 @@ export const useModerationStore = defineStore("moderation", {
     queueLength: (state) => state.currentQueue.items.length,
     hasItems: (state) => state.currentQueue.items.length > 0,
     progress: (state) => {
-      if (state.currentQueue.total === 0) return 0;
-      return (state.currentQueue.completed + state.currentQueue.skipped) / state.currentQueue.total;
+      if (state.currentQueue.total === 0) return 0
+      return (state.currentQueue.completed + state.currentQueue.skipped) / state.currentQueue.total
     },
   },
 
@@ -47,7 +47,7 @@ export const useModerationStore = defineStore("moderation", {
         completed: 0,
         skipped: 0,
         lastUpdated: new Date(),
-      };
+      }
     },
 
     setSingleProject(projectId: string) {
@@ -57,42 +57,42 @@ export const useModerationStore = defineStore("moderation", {
         completed: 0,
         skipped: 0,
         lastUpdated: new Date(),
-      };
+      }
     },
 
-    completeCurrentProject(projectId: string, status: "completed" | "skipped" = "completed") {
-      if (status === "completed") {
-        this.currentQueue.completed++;
+    completeCurrentProject(projectId: string, status: 'completed' | 'skipped' = 'completed') {
+      if (status === 'completed') {
+        this.currentQueue.completed++
       } else {
-        this.currentQueue.skipped++;
+        this.currentQueue.skipped++
       }
 
-      this.currentQueue.items = this.currentQueue.items.filter((id: string) => id !== projectId);
-      this.currentQueue.lastUpdated = new Date();
+      this.currentQueue.items = this.currentQueue.items.filter((id: string) => id !== projectId)
+      this.currentQueue.lastUpdated = new Date()
 
-      return this.currentQueue.items.length > 0;
+      return this.currentQueue.items.length > 0
     },
 
     getCurrentProjectId(): string | null {
-      return this.currentQueue.items[0] || null;
+      return this.currentQueue.items[0] || null
     },
 
     resetQueue() {
-      this.currentQueue = createEmptyQueue();
+      this.currentQueue = createEmptyQueue()
     },
   },
 
   persist: {
-    key: "moderation-store",
+    key: 'moderation-store',
     serializer: {
       serialize: JSON.stringify,
       deserialize: (value: string) => {
-        const parsed = JSON.parse(value);
+        const parsed = JSON.parse(value)
         if (parsed.currentQueue?.lastUpdated) {
-          parsed.currentQueue.lastUpdated = new Date(parsed.currentQueue.lastUpdated);
+          parsed.currentQueue.lastUpdated = new Date(parsed.currentQueue.lastUpdated)
         }
-        return parsed;
+        return parsed
       },
     },
   },
-});
+})
diff --git a/apps/frontend/src/types/fusejs.d.ts b/apps/frontend/src/types/fusejs.d.ts
index 70bcd0e2d..dcdf035a9 100644
--- a/apps/frontend/src/types/fusejs.d.ts
+++ b/apps/frontend/src/types/fusejs.d.ts
@@ -1,4 +1,4 @@
-declare module "fuse.js/dist/fuse.basic" {
-  import Fuse from "fuse.js";
-  export default Fuse;
+declare module 'fuse.js/dist/fuse.basic' {
+  import Fuse from 'fuse.js'
+  export default Fuse
 }
diff --git a/apps/frontend/src/types/modrinth.d.ts b/apps/frontend/src/types/modrinth.d.ts
index 1324fc6da..379c6ef11 100644
--- a/apps/frontend/src/types/modrinth.d.ts
+++ b/apps/frontend/src/types/modrinth.d.ts
@@ -1 +1 @@
-import "@modrinth/utils";
+import '@modrinth/utils'
diff --git a/apps/frontend/src/types/vintl.d.ts b/apps/frontend/src/types/vintl.d.ts
index 408ca2ba7..d4c8c21e7 100644
--- a/apps/frontend/src/types/vintl.d.ts
+++ b/apps/frontend/src/types/vintl.d.ts
@@ -1,21 +1,21 @@
-import "@vintl/vintl";
+import '@vintl/vintl'
 
-import type { CompactNumber } from "@vintl/compact-number/dist/index.mjs";
+import type { CompactNumber } from '@vintl/compact-number/dist/index.mjs'
 
 declare global {
   namespace VueIntlController {
     interface MessageValueTypes {
-      compactNumber: CompactNumber;
+      compactNumber: CompactNumber
     }
 
     interface LocaleResources {
-      "languages.json"?: Partial<Record<string, string>>;
+      'languages.json'?: Partial<Record<string, string>>
     }
 
     interface LocaleMeta {
-      displayName?: string;
-      category?: string;
-      searchTerms?: string;
+      displayName?: string
+      category?: string
+      searchTerms?: string
     }
   }
 }
diff --git a/apps/frontend/src/utils/analytics.js b/apps/frontend/src/utils/analytics.js
index 6c3f5f5fb..3b4e388c7 100644
--- a/apps/frontend/src/utils/analytics.js
+++ b/apps/frontend/src/utils/analytics.js
@@ -1,116 +1,116 @@
-import dayjs from "dayjs";
-import { computed,ref, watch } from "vue";
+import dayjs from 'dayjs'
+import { computed, ref, watch } from 'vue'
 
 // note: build step can miss unix import for some reason, so
 // we have to import it like this
 
-const { unix } = dayjs;  
+const { unix } = dayjs
 
-export function useCountryNames(style = "long") {
-  const formattingOptions = { type: "region", style };
-  const { formats } = useVIntl();
+export function useCountryNames(style = 'long') {
+  const formattingOptions = { type: 'region', style }
+  const { formats } = useVIntl()
   return function formatCountryName(code) {
-    return formats.displayName(code, formattingOptions);
-  };
+    return formats.displayName(code, formattingOptions)
+  }
 }
 
 export const countryCodeToName = (code) => {
-  const formatCountryName = useCountryNames();
+  const formatCountryName = useCountryNames()
 
-  return formatCountryName(code);
-};
+  return formatCountryName(code)
+}
 
 export const countryCodeToFlag = (code) => {
-  if (code === "XX") {
-    return undefined;
+  if (code === 'XX') {
+    return undefined
   }
-  return `https://flagcdn.com/h240/${code.toLowerCase()}.png`;
-};
+  return `https://flagcdn.com/h240/${code.toLowerCase()}.png`
+}
 
 export const formatTimestamp = (timestamp) => {
-  return unix(timestamp).format();
-};
+  return unix(timestamp).format()
+}
 
 export const formatPercent = (value, sum) => {
-  return `${((value / sum) * 100).toFixed(2)}%`;
-};
+  return `${((value / sum) * 100).toFixed(2)}%`
+}
 
 const hashProjectId = (projectId) => {
-  return projectId.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % 30;
-};
+  return projectId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % 30
+}
 
 export const defaultColors = [
-  "#ff496e", // Original: Bright pink
-  "#ffa347", // Original: Bright orange
-  "#1bd96a", // Original: Bright green
-  "#4f9cff", // Original: Bright blue
-  "#c78aff", // Original: Bright purple
-  "#ffeb3b", // Added: Bright yellow
-  "#00bcd4", // Added: Bright cyan
-  "#ff5722", // Added: Bright red-orange
-  "#9c27b0", // Added: Bright deep purple
-  "#3f51b5", // Added: Bright indigo
-  "#009688", // Added: Bright teal
-  "#cddc39", // Added: Bright lime
-  "#795548", // Added: Bright brown
-  "#607d8b", // Added: Bright blue-grey
-];
+  '#ff496e', // Original: Bright pink
+  '#ffa347', // Original: Bright orange
+  '#1bd96a', // Original: Bright green
+  '#4f9cff', // Original: Bright blue
+  '#c78aff', // Original: Bright purple
+  '#ffeb3b', // Added: Bright yellow
+  '#00bcd4', // Added: Bright cyan
+  '#ff5722', // Added: Bright red-orange
+  '#9c27b0', // Added: Bright deep purple
+  '#3f51b5', // Added: Bright indigo
+  '#009688', // Added: Bright teal
+  '#cddc39', // Added: Bright lime
+  '#795548', // Added: Bright brown
+  '#607d8b', // Added: Bright blue-grey
+]
 
 /**
  * @param {string | number} value
  * @returns {string} color
  */
 export const getDefaultColor = (value) => {
-  if (typeof value === "string") {
-    value = hashProjectId(value);
+  if (typeof value === 'string') {
+    value = hashProjectId(value)
   }
-  return defaultColors[value % defaultColors.length];
-};
+  return defaultColors[value % defaultColors.length]
+}
 
-export const intToRgba = (color, projectId = "Unknown", theme = "dark", alpha = "1") => {
-  const hash = hashProjectId(projectId);
+export const intToRgba = (color, projectId = 'Unknown', theme = 'dark', alpha = '1') => {
+  const hash = hashProjectId(projectId)
 
   if (!color || color === 0) {
-    return getDefaultColor(hash);
+    return getDefaultColor(hash)
   }
 
   // if color is a string, return that instead
-  if (typeof color === "string") {
-    return color;
+  if (typeof color === 'string') {
+    return color
   }
 
   // Extract RGB values
-  let r = (color >> 16) & 255;
-  let g = (color >> 8) & 255;
-  let b = color & 255;
+  let r = (color >> 16) & 255
+  let g = (color >> 8) & 255
+  let b = color & 255
 
   // Hash function to alter color slightly based on project_id
-  r = (r + hash) % 256;
-  g = (g + hash) % 256;
-  b = (b + hash) % 256;
+  r = (r + hash) % 256
+  g = (g + hash) % 256
+  b = (b + hash) % 256
 
   // Adjust brightness for theme
-  const brightness = r * 0.299 + g * 0.587 + b * 0.114;
-  const threshold = theme === "dark" ? 50 : 200;
-  if (theme === "dark" && brightness < threshold) {
+  const brightness = r * 0.299 + g * 0.587 + b * 0.114
+  const threshold = theme === 'dark' ? 50 : 200
+  if (theme === 'dark' && brightness < threshold) {
     // Increase brightness for dark theme
-    r += threshold / 2;
-    g += threshold / 2;
-    b += threshold / 2;
-  } else if (theme === "light" && brightness > threshold) {
+    r += threshold / 2
+    g += threshold / 2
+    b += threshold / 2
+  } else if (theme === 'light' && brightness > threshold) {
     // Decrease brightness for light theme
-    r -= threshold / 4;
-    g -= threshold / 4;
-    b -= threshold / 4;
+    r -= threshold / 4
+    g -= threshold / 4
+    b -= threshold / 4
   }
 
   // Ensure RGB values are within 0-255
-  r = Math.min(255, Math.max(0, r));
-  g = Math.min(255, Math.max(0, g));
-  b = Math.min(255, Math.max(0, b));
+  r = Math.min(255, Math.max(0, r))
+  g = Math.min(255, Math.max(0, g))
+  b = Math.min(255, Math.max(0, b))
 
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
 
 const emptyAnalytics = {
   sum: 0,
@@ -120,7 +120,7 @@ const emptyAnalytics = {
     data: [],
     sumData: [
       {
-        name: "",
+        name: '',
         data: [],
       },
     ],
@@ -128,78 +128,78 @@ const emptyAnalytics = {
     defaultColors: [],
   },
   projectIds: [],
-};
+}
 
 export const analyticsSetToCSVString = (analytics) => {
   if (!analytics) {
-    return "";
+    return ''
   }
 
-  const newline = "\n";
-  const labels = analytics.chart.labels;
-  const projects = analytics.chart.data;
+  const newline = '\n'
+  const labels = analytics.chart.labels
+  const projects = analytics.chart.data
 
-  const projectNames = projects.map((p) => p.name);
+  const projectNames = projects.map((p) => p.name)
 
-  const header = ["Date", ...projectNames].join(",");
+  const header = ['Date', ...projectNames].join(',')
 
   const data = labels.map((label, i) => {
-    const values = projects.map((p) => p.data?.[i] || "");
-    return [label, ...values].join(",");
-  });
+    const values = projects.map((p) => p.data?.[i] || '')
+    return [label, ...values].join(',')
+  })
 
-  return [header, ...data].join(newline);
-};
+  return [header, ...data].join(newline)
+}
 
 export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName, theme) => {
   if (!category || !projects) {
-    return emptyAnalytics;
+    return emptyAnalytics
   }
 
   // Get an intersection of category keys and project ids
-  const projectIds = projects.map((p) => p.id);
-  const loadedProjectIds = Object.keys(category).filter((id) => projectIds.includes(id));
+  const projectIds = projects.map((p) => p.id)
+  const loadedProjectIds = Object.keys(category).filter((id) => projectIds.includes(id))
 
   if (!loadedProjectIds?.length) {
-    return emptyAnalytics;
+    return emptyAnalytics
   }
 
-  const loadedProjectData = loadedProjectIds.map((id) => category[id]);
+  const loadedProjectData = loadedProjectIds.map((id) => category[id])
 
   // Convert each project's data into a list of [unix_ts_str, number] pairs
   const projectData = loadedProjectData
     .map((data) => Object.entries(data))
     .map((data) => data.sort(sortFn))
-    .map((data) => (mapFn ? data.map(mapFn) : data));
+    .map((data) => (mapFn ? data.map(mapFn) : data))
 
   // Each project may not include the same timestamps, so we should use the union of all timestamps
   const timestamps = Array.from(
     new Set(projectData.flatMap((data) => data.map(([ts]) => ts))),
-  ).sort();
+  ).sort()
 
   const chartData = projectData
     .map((data, i) => {
-      const project = projects.find((p) => p.id === loadedProjectIds[i]);
+      const project = projects.find((p) => p.id === loadedProjectIds[i])
       if (!project) {
-        throw new Error(`Project ${loadedProjectIds[i]} not found`);
+        throw new Error(`Project ${loadedProjectIds[i]} not found`)
       }
 
       return {
         name: `${project.title}`,
         data: timestamps.map((ts) => {
-          const entry = data.find(([ets]) => ets === ts);
-          return entry ? entry[1] : 0;
+          const entry = data.find(([ets]) => ets === ts)
+          return entry ? entry[1] : 0
         }),
         id: project.id,
         color: project.color,
-      };
+      }
     })
     .sort(
       (a, b) =>
         b.data.reduce((acc, cur) => acc + cur, 0) - a.data.reduce((acc, cur) => acc + cur, 0),
-    );
+    )
 
-  const projectIdsSortedBySum = chartData.map((p) => p.id);
+  const projectIdsSortedBySum = chartData.map((p) => p.id)
 
   return {
     // The total count of all the values across all projects
@@ -212,24 +212,24 @@ export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, cha
         {
           name: chartName,
           data: timestamps.map((ts) => {
-            const entries = projectData.flat().filter(([ets]) => ets === ts);
-            return entries.reduce((acc, cur) => acc + cur[1], 0);
+            const entries = projectData.flat().filter(([ets]) => ets === ts)
+            return entries.reduce((acc, cur) => acc + cur[1], 0)
           }),
         },
       ],
       colors: projectData.map((_, i) => {
-        const project = chartData[i];
+        const project = chartData[i]
 
-        return intToRgba(project.color, project.id, theme);
+        return intToRgba(project.color, project.id, theme)
       }),
       defaultColors: projectData.map((_, i) => {
-        const project = chartData[i];
-        return getDefaultColor(project.id);
+        const project = chartData[i]
+        return getDefaultColor(project.id)
       }),
     },
     projectIds: projectIdsSortedBySum,
-  };
-};
+  }
+}
 
 export const processAnalyticsByCountry = (category, projects, sortFn) => {
   if (!category || !projects) {
@@ -237,54 +237,54 @@ export const processAnalyticsByCountry = (category, projects, sortFn) => {
       sum: 0,
       len: 0,
       data: [],
-    };
+    }
   }
 
   // Get an intersection of category keys and project ids
-  const projectIds = projects.map((p) => p.id);
-  const loadedProjectIds = Object.keys(category).filter((id) => projectIds.includes(id));
+  const projectIds = projects.map((p) => p.id)
+  const loadedProjectIds = Object.keys(category).filter((id) => projectIds.includes(id))
 
   if (!loadedProjectIds?.length) {
     return {
       sum: 0,
       len: 0,
       data: [],
-    };
+    }
   }
 
-  const loadedProjectData = loadedProjectIds.map((id) => category[id]);
+  const loadedProjectData = loadedProjectIds.map((id) => category[id])
 
   // Convert each project's data into a list of [countrycode, number] pairs
   // Fold into a single list with summed values for each country over all projects
 
-  const countrySums = new Map();
+  const countrySums = new Map()
 
   loadedProjectData.forEach((data) => {
     Object.entries(data).forEach(([country, value]) => {
-      const countryCode = country || "XX";
-      const current = countrySums.get(countryCode) || 0;
-      countrySums.set(countryCode, current + value);
-    });
-  });
+      const countryCode = country || 'XX'
+      const current = countrySums.get(countryCode) || 0
+      countrySums.set(countryCode, current + value)
+    })
+  })
 
-  const entries = Array.from(countrySums.entries());
+  const entries = Array.from(countrySums.entries())
 
   return {
     sum: entries.reduce((acc, cur) => acc + cur[1], 0),
     len: entries.length,
     data: entries.sort(sortFn),
-  };
-};
+  }
+}
 
-const sortCount = ([, a], [, b]) => b - a;
-const sortTimestamp = ([a], [b]) => a - b;
-const roundValue = ([ts, value]) => [ts, Math.round(parseFloat(value) * 100) / 100];
+const sortCount = ([, a], [, b]) => b - a
+const sortTimestamp = ([a], [b]) => a - b
+const roundValue = ([ts, value]) => [ts, Math.round(parseFloat(value) * 100) / 100]
 
-const processCountryAnalytics = (c, projects) => processAnalyticsByCountry(c, projects, sortCount);
+const processCountryAnalytics = (c, projects) => processAnalyticsByCountry(c, projects, sortCount)
 const processNumberAnalytics = (c, projects, theme) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, "Downloads", theme);
+  processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, 'Downloads', theme)
 const processRevAnalytics = (c, projects, theme) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, "Revenue", theme);
+  processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, 'Revenue', theme)
 
 const useFetchAnalytics = (
   url,
@@ -292,8 +292,8 @@ const useFetchAnalytics = (
     apiVersion: 3,
   },
 ) => {
-  return useBaseFetch(url, baseOptions);
-};
+  return useBaseFetch(url, baseOptions)
+}
 
 /**
  * @param {Ref<any[]>} projects
@@ -304,17 +304,17 @@ export const useFetchAllAnalytics = (
   projects,
   selectedProjects,
   personalRevenue = false,
-  startDate = ref(dayjs().subtract(30, "days")),
+  startDate = ref(dayjs().subtract(30, 'days')),
   endDate = ref(dayjs()),
   timeResolution = ref(1440),
 ) => {
-  const downloadData = ref(null);
-  const viewData = ref(null);
-  const revenueData = ref(null);
-  const downloadsByCountry = ref(null);
-  const viewsByCountry = ref(null);
-  const loading = ref(true);
-  const error = ref(null);
+  const downloadData = ref(null)
+  const viewData = ref(null)
+  const revenueData = ref(null)
+  const downloadsByCountry = ref(null)
+  const viewsByCountry = ref(null)
+  const loading = ref(true)
+  const error = ref(null)
 
   const formattedData = computed(() => ({
     downloads: processNumberAnalytics(downloadData.value, selectedProjects.value),
@@ -322,30 +322,30 @@ export const useFetchAllAnalytics = (
     revenue: processRevAnalytics(revenueData.value, selectedProjects.value),
     downloadsByCountry: processCountryAnalytics(downloadsByCountry.value, selectedProjects.value),
     viewsByCountry: processCountryAnalytics(viewsByCountry.value, selectedProjects.value),
-  }));
+  }))
 
-  const theme = useTheme();
+  const theme = useTheme()
 
   const totalData = computed(() => ({
     downloads: processNumberAnalytics(downloadData.value, projects.value, theme.active),
     views: processNumberAnalytics(viewData.value, projects.value, theme.active),
     revenue: processRevAnalytics(revenueData.value, projects.value, theme.active),
-  }));
+  }))
 
   const fetchData = async (query) => {
-    const normalQuery = new URLSearchParams(query);
-    const revenueQuery = new URLSearchParams(query);
+    const normalQuery = new URLSearchParams(query)
+    const revenueQuery = new URLSearchParams(query)
 
     if (personalRevenue) {
-      revenueQuery.delete("project_ids");
+      revenueQuery.delete('project_ids')
     }
 
-    const qs = normalQuery.toString();
-    const revenueQs = revenueQuery.toString();
+    const qs = normalQuery.toString()
+    const revenueQs = revenueQuery.toString()
 
     try {
-      loading.value = true;
-      error.value = null;
+      loading.value = true
+      error.value = null
 
       const responses = await Promise.all([
         useFetchAnalytics(`analytics/downloads?${qs}`),
@@ -353,39 +353,39 @@ export const useFetchAllAnalytics = (
         useFetchAnalytics(`analytics/revenue?${revenueQs}`),
         useFetchAnalytics(`analytics/countries/downloads?${qs}`),
         useFetchAnalytics(`analytics/countries/views?${qs}`),
-      ]);
+      ])
 
       // collect project ids from projects.value into a set
-      const projectIds = new Set();
+      const projectIds = new Set()
       if (projects.value) {
-        projects.value.forEach((p) => projectIds.add(p.id));
+        projects.value.forEach((p) => projectIds.add(p.id))
       } else {
         // if projects.value is not set, we assume that we want all project ids
-        Object.keys(responses[0] || {}).forEach((id) => projectIds.add(id));
+        Object.keys(responses[0] || {}).forEach((id) => projectIds.add(id))
       }
 
       const filterProjectIds = (data) => {
-        const filtered = {};
+        const filtered = {}
         Object.entries(data).forEach(([id, values]) => {
           if (projectIds.has(id)) {
-            filtered[id] = values;
+            filtered[id] = values
           }
-        });
-        return filtered;
-      };
+        })
+        return filtered
+      }
 
-      downloadData.value = filterProjectIds(responses[0] || {});
-      viewData.value = filterProjectIds(responses[1] || {});
-      revenueData.value = filterProjectIds(responses[2] || {});
+      downloadData.value = filterProjectIds(responses[0] || {})
+      viewData.value = filterProjectIds(responses[1] || {})
+      revenueData.value = filterProjectIds(responses[2] || {})
 
-      downloadsByCountry.value = responses[3] || {};
-      viewsByCountry.value = responses[4] || {};
+      downloadsByCountry.value = responses[3] || {}
+      viewsByCountry.value = responses[4] || {}
     } catch (e) {
-      error.value = e;
+      error.value = e
     } finally {
-      loading.value = false;
+      loading.value = false
     }
-  };
+  }
 
   watch(
     [() => startDate.value, () => endDate.value, () => timeResolution.value, () => projects.value],
@@ -394,32 +394,32 @@ export const useFetchAllAnalytics = (
         start_date: startDate.value.toISOString(),
         end_date: endDate.value.toISOString(),
         resolution_minutes: timeResolution.value,
-      };
-
-      if (projects.value?.length) {
-        q.project_ids = JSON.stringify(projects.value.map((p) => p.id));
       }
 
-      await fetchData(q);
+      if (projects.value?.length) {
+        q.project_ids = JSON.stringify(projects.value.map((p) => p.id))
+      }
+
+      await fetchData(q)
 
       if (onDataRefresh) {
-        onDataRefresh();
+        onDataRefresh()
       }
     },
     {
       immediate: true,
     },
-  );
+  )
 
   const validProjectIds = computed(() => {
-    const ids = new Set();
+    const ids = new Set()
 
     if (downloadData.value) {
-      Object.keys(downloadData.value).forEach((id) => ids.add(id));
+      Object.keys(downloadData.value).forEach((id) => ids.add(id))
     }
 
     if (viewData.value) {
-      Object.keys(viewData.value).forEach((id) => ids.add(id));
+      Object.keys(viewData.value).forEach((id) => ids.add(id))
     }
 
     if (revenueData.value) {
@@ -427,14 +427,14 @@ export const useFetchAllAnalytics = (
       Object.entries(revenueData.value).forEach(([id, data]) => {
         if (Object.keys(data).length) {
           if (Object.values(data).some((v) => v >= 0.01)) {
-            ids.add(id);
+            ids.add(id)
           }
         }
-      });
+      })
     }
 
-    return Array.from(ids);
-  });
+    return Array.from(ids)
+  })
 
   return {
     // Configuration
@@ -456,5 +456,5 @@ export const useFetchAllAnalytics = (
     totalData,
     loading,
     error,
-  };
-};
+  }
+}
diff --git a/apps/frontend/src/utils/fetch-helpers.ts b/apps/frontend/src/utils/fetch-helpers.ts
index 81c5e88d2..8956bc535 100644
--- a/apps/frontend/src/utils/fetch-helpers.ts
+++ b/apps/frontend/src/utils/fetch-helpers.ts
@@ -1,13 +1,13 @@
 function segmentData<T>(data: T[], segmentSize: number): T[][] {
   return data.reduce((acc: T[][], curr, index) => {
-    const segment = Math.floor(index / segmentSize);
+    const segment = Math.floor(index / segmentSize)
 
     if (!acc[segment]) {
-      acc[segment] = [];
+      acc[segment] = []
     }
-    acc[segment].push(curr);
-    return acc;
-  }, []);
+    acc[segment].push(curr)
+    return acc
+  }, [])
 }
 
 export function fetchSegmented<T>(
@@ -18,9 +18,9 @@ export function fetchSegmented<T>(
 ): Promise<any> {
   return Promise.all(
     segmentData(data, segmentSize).map((ids) => useBaseFetch(createUrl(ids), options)),
-  ).then((results) => results.flat());
+  ).then((results) => results.flat())
 }
 
 export function asEncodedJsonArray<T>(data: T[]): string {
-  return encodeURIComponent(JSON.stringify(data));
+  return encodeURIComponent(JSON.stringify(data))
 }
diff --git a/apps/frontend/src/utils/i18n-project-type.ts b/apps/frontend/src/utils/i18n-project-type.ts
index e1c4cc320..1a7048b33 100644
--- a/apps/frontend/src/utils/i18n-project-type.ts
+++ b/apps/frontend/src/utils/i18n-project-type.ts
@@ -1,77 +1,77 @@
 const projectTypeMessages = defineMessages({
   datapack: {
-    id: "project-type.datapack.singular",
-    defaultMessage: "Data Pack",
+    id: 'project-type.datapack.singular',
+    defaultMessage: 'Data Pack',
   },
   datapacks: {
-    id: "project-type.datapack.plural",
-    defaultMessage: "Data Packs",
+    id: 'project-type.datapack.plural',
+    defaultMessage: 'Data Packs',
   },
   mod: {
-    id: "project-type.mod.singular",
-    defaultMessage: "Mod",
+    id: 'project-type.mod.singular',
+    defaultMessage: 'Mod',
   },
   mods: {
-    id: "project-type.mod.plural",
-    defaultMessage: "Mods",
+    id: 'project-type.mod.plural',
+    defaultMessage: 'Mods',
   },
   modpack: {
-    id: "project-type.modpack.singular",
-    defaultMessage: "Modpack",
+    id: 'project-type.modpack.singular',
+    defaultMessage: 'Modpack',
   },
   modpacks: {
-    id: "project-type.modpack.plural",
-    defaultMessage: "Modpacks",
+    id: 'project-type.modpack.plural',
+    defaultMessage: 'Modpacks',
   },
   plugin: {
-    id: "project-type.plugin.singular",
-    defaultMessage: "Plugin",
+    id: 'project-type.plugin.singular',
+    defaultMessage: 'Plugin',
   },
   plugins: {
-    id: "project-type.plugin.plural",
-    defaultMessage: "Plugins",
+    id: 'project-type.plugin.plural',
+    defaultMessage: 'Plugins',
   },
   resourcepack: {
-    id: "project-type.resourcepack.singular",
-    defaultMessage: "Resource Pack",
+    id: 'project-type.resourcepack.singular',
+    defaultMessage: 'Resource Pack',
   },
   resourcepacks: {
-    id: "project-type.resourcepack.plural",
-    defaultMessage: "Resource Packs",
+    id: 'project-type.resourcepack.plural',
+    defaultMessage: 'Resource Packs',
   },
   shader: {
-    id: "project-type.shader.singular",
-    defaultMessage: "Shader",
+    id: 'project-type.shader.singular',
+    defaultMessage: 'Shader',
   },
   shaders: {
-    id: "project-type.shader.plural",
-    defaultMessage: "Shaders",
+    id: 'project-type.shader.plural',
+    defaultMessage: 'Shaders',
   },
   project: {
-    id: "project-type.project.singular",
-    defaultMessage: "Project",
+    id: 'project-type.project.singular',
+    defaultMessage: 'Project',
   },
   projects: {
-    id: "project-type.project.plural",
-    defaultMessage: "Projects",
+    id: 'project-type.project.plural',
+    defaultMessage: 'Projects',
   },
   collection: {
-    id: "project-type.collection.singular",
-    defaultMessage: "Collection",
+    id: 'project-type.collection.singular',
+    defaultMessage: 'Collection',
   },
   collections: {
-    id: "project-type.collection.plural",
-    defaultMessage: "Collections",
+    id: 'project-type.collection.plural',
+    defaultMessage: 'Collections',
   },
-});
+})
 
-type ExtractSingulars<K extends string> = K extends `${infer T}s` ? T : never;
+type ExtractSingulars<K extends string> = K extends `${infer T}s` ? T : never
 
-type ProjectType = ExtractSingulars<keyof typeof projectTypeMessages>;
+type ProjectType = ExtractSingulars<keyof typeof projectTypeMessages>
 
 export function getProjectTypeMessage(type: ProjectType, plural = false) {
   return (
-    projectTypeMessages[`${type}${plural ? "s" : ""}`] ??
-    projectTypeMessages[`project${plural ? "s" : ""}`]
-  );
+    projectTypeMessages[`${type}${plural ? 's' : ''}`] ??
+    projectTypeMessages[`project${plural ? 's' : ''}`]
+  )
 }
diff --git a/apps/frontend/src/utils/permissions.ts b/apps/frontend/src/utils/permissions.ts
index e5d87cf21..39943ceca 100644
--- a/apps/frontend/src/utils/permissions.ts
+++ b/apps/frontend/src/utils/permissions.ts
@@ -1,4 +1,4 @@
 export const isPermission = (perms?: number, bitflag?: number) => {
-  if (!perms || !bitflag) return false;
-  return (perms & bitflag) === bitflag;
-};
+  if (!perms || !bitflag) return false
+  return (perms & bitflag) === bitflag
+}
diff --git a/apps/frontend/src/utils/report-helpers.ts b/apps/frontend/src/utils/report-helpers.ts
index 498c46a3f..dfc5b156d 100644
--- a/apps/frontend/src/utils/report-helpers.ts
+++ b/apps/frontend/src/utils/report-helpers.ts
@@ -1,21 +1,21 @@
 const startReport = (type: string, id: string) => {
-  const prefill = new URLSearchParams();
+  const prefill = new URLSearchParams()
 
   // type
-  prefill.set("item", type);
-  prefill.set("itemID", id);
+  prefill.set('item', type)
+  prefill.set('itemID', id)
 
-  navigateTo("/report?" + prefill.toString());
-};
+  navigateTo('/report?' + prefill.toString())
+}
 
 export const reportProject = (id: string) => {
-  return startReport("project", id);
-};
+  return startReport('project', id)
+}
 
 export const reportVersion = (id: string) => {
-  return startReport("version", id);
-};
+  return startReport('version', id)
+}
 
 export const reportUser = (id: string) => {
-  return startReport("user", id);
-};
+  return startReport('user', id)
+}
diff --git a/apps/frontend/src/utils/vue-children.ts b/apps/frontend/src/utils/vue-children.ts
index 59e820bad..c9592f70a 100644
--- a/apps/frontend/src/utils/vue-children.ts
+++ b/apps/frontend/src/utils/vue-children.ts
@@ -1,4 +1,4 @@
-import { createTextVNode, isVNode, toDisplayString, type VNode } from "vue";
+import { createTextVNode, isVNode, toDisplayString, type VNode } from 'vue'
 
 /**
  * Checks whether a specific child is a VNode. If not, converts it to a display
@@ -9,7 +9,7 @@ import { createTextVNode, isVNode, toDisplayString, type VNode } from "vue";
  * to a display string.
  */
 function normalizeChild(child: any): VNode {
-  return isVNode(child) ? child : createTextVNode(toDisplayString(child));
+  return isVNode(child) ? child : createTextVNode(toDisplayString(child))
 }
 
 /**
@@ -21,5 +21,5 @@ function normalizeChild(child: any): VNode {
  * @returns Children with all of non-VNodes converted to display strings.
  */
 export function normalizeChildren(children: any | any[]): VNode[] {
-  return Array.isArray(children) ? children.map(normalizeChild) : [normalizeChild(children)];
+  return Array.isArray(children) ? children.map(normalizeChild) : [normalizeChild(children)]
 }