Fix sockets issues (#3015)

* Fix sockets issues

* Fix app comp

packages/ui/src/components/base/Accordion.vue

@@ -41,6 +41,9 @@ const props = withDefaults(
   {
     type: 'standard',
     openByDefault: false,
+    buttonClass: null,
+    contentClass: null,
+    titleWrapperClass: null,
   },
 )
 

packages/ui/src/components/base/AutoLink.vue

@@ -12,6 +12,7 @@
 
 <script setup lang="ts">
 defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   to: any
 }>()
 

packages/ui/src/components/base/ManySelect.vue

@@ -70,7 +70,7 @@
   </ButtonStyled>
 </template>
 <script setup lang="ts">
-import { CheckIcon, DropdownIcon, SearchIcon, XIcon } from '@modrinth/assets'
+import { CheckIcon, DropdownIcon, SearchIcon } from '@modrinth/assets'
 import { ButtonStyled, PopoutMenu, Button } from '../index'
 import { computed, ref } from 'vue'
 import ScrollablePanel from './ScrollablePanel.vue'
@@ -94,6 +94,7 @@ const props = withDefaults(
     direction: 'auto',
     displayName: (option: Option) => option as string,
     search: false,
+    dropdownId: null,
   },
 )
 

packages/ui/src/components/base/MarkdownEditor.vue

@@ -368,7 +368,6 @@ onMounted(() => {
       if (clipboardData.files && clipboardData.files.length > 0 && props.onImageUpload) {
         // If the user is pasting a file, upload it if there's an included handler and insert the link.
         uploadImagesFromList(clipboardData.files)
-           
           .then(function (url) {
             const selection = markdownCommands.yankSelection(view)
             const altText = selection || 'Replace this with a description'
@@ -654,7 +653,7 @@ function cleanUrl(input: string): string {
   // Attempt to validate and parse the URL
   try {
     url = new URL(input)
-  } catch (e) {
+  } catch {
     throw new Error('Invalid URL. Make sure the URL is well-formed.')
   }
 

packages/ui/src/components/base/Notifications.vue

@@ -20,7 +20,7 @@
 <script setup>
 import { ref } from 'vue'
 
-const props = defineProps({
+defineProps({
   sidebar: {
     type: Boolean,
     default: false,

packages/ui/src/components/base/OverflowMenu.vue

@@ -89,7 +89,7 @@ interface Item extends BaseOption {
 
 type Option = Divider | Item
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     options: Option[]
     disabled?: boolean

packages/ui/src/components/base/Pagination.vue

@@ -60,7 +60,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { GapIcon, ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
-import Button from './Button.vue'
 import ButtonStyled from './ButtonStyled.vue'
 
 const emit = defineEmits<{

packages/ui/src/components/base/PreviewSelectButton.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { RadioButtonIcon, RadioButtonChecked } from '@modrinth/assets'
-import { ref } from 'vue'
 
 withDefaults(
   defineProps<{

packages/ui/src/components/base/ScrollablePanel.vue

@@ -76,11 +76,19 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   }
 
   &.bottom-fade {
-    mask-image: linear-gradient(rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)), transparent 100%);
+    mask-image: linear-gradient(
+      rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
+      transparent 100%
+    );
   }
 
   &.top-fade.bottom-fade {
-    mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%) var(--_fade-height), rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)), transparent 100%);
+    mask-image: linear-gradient(
+      transparent,
+      rgb(0 0 0 / 100%) var(--_fade-height),
+      rgb(0 0 0 / 100%) calc(100% - var(--_fade-height)),
+      transparent 100%
+    );
   }
 }
 .scrollable-pane {

packages/ui/src/components/base/SimpleBadge.vue

@@ -1,7 +1,5 @@
 <template>
-  <span
-    class="inline-flex items-center gap-1 font-semibold text-secondary"
-  >
+  <span class="inline-flex items-center gap-1 font-semibold text-secondary">
     <component :is="icon" v-if="icon" :aria-hidden="true" class="shrink-0" />
     {{ formattedName }}
   </span>

packages/ui/src/components/billing/PurchaseModal.vue

@@ -942,7 +942,6 @@ async function submitPayment() {
 
 defineExpose({
   show: () => {
-     
     stripe = Stripe(props.publishableKey)
 
     selectedPlan.value = 'yearly'

packages/ui/src/components/content/ContentListItem.vue

@@ -3,21 +3,20 @@ import AutoLink from '../base/AutoLink.vue'
 import Avatar from '../base/Avatar.vue'
 import Checkbox from '../base/Checkbox.vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { SlashIcon } from '@modrinth/assets'
-
-import { ref } from 'vue'
 
 export interface ContentCreator {
   name: string
   type: 'user' | 'organization'
   id: string
   link?: string | RouteLocationRaw
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   linkProps?: any
 }
 
 export interface ContentProject {
   id: string
   link?: string | RouteLocationRaw
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   linkProps?: any
 }
 
@@ -46,7 +45,7 @@ withDefaults(
   },
 )
 
-const model = defineModel()
+const model = defineModel<boolean>()
 </script>
 <template>
   <div

packages/ui/src/components/content/ContentListPanel.vue

@@ -5,7 +5,6 @@ import Checkbox from '../base/Checkbox.vue'
 import ContentListItem from './ContentListItem.vue'
 import type { ContentItem } from './ContentListItem.vue'
 import { DropdownIcon } from '@modrinth/assets'
-// @ts-ignore
 import { RecycleScroller } from 'vue-virtual-scroller'
 
 const props = withDefaults(

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

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

packages/ui/src/components/project/ProjectBackgroundGradient.vue

@@ -7,31 +7,29 @@ import { computed } from 'vue'
 const props = withDefaults(
   defineProps<{
     project: {
-      body: string,
-      color: number,
+      body: string
+      color: number
     }
   }>(),
-  {
-  },
+  {},
 )
 
-function clamp (value: number) {
-  return Math.max(0, Math.min(255, value));
+function clamp(value: number) {
+  return Math.max(0, Math.min(255, value))
 }
 
-function toHex (value: number) {
-  return clamp(value).toString(16).padStart(2, '0');
+function toHex(value: number) {
+  return clamp(value).toString(16).padStart(2, '0')
 }
 
 function decimalToHexColor(decimal: number) {
-  const r = (decimal >> 16) & 255;
-  const g = (decimal >> 8) & 255;
-  const b = decimal & 255;
+  const r = (decimal >> 16) & 255
+  const g = (decimal >> 8) & 255
+  const b = decimal & 255
 
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
 }
 
-
 const color = computed(() => {
   return decimalToHexColor(props.project.color)
 })

packages/ui/src/components/project/ProjectHeader.vue

@@ -7,10 +7,7 @@
       {{ project.title }}
     </template>
     <template #title-suffix>
-      <ProjectStatusBadge
-        v-if="member || project.status !== 'approved'"
-        :status="project.status"
-      />
+      <ProjectStatusBadge v-if="member || project.status !== 'approved'" :status="project.status" />
     </template>
     <template #summary>
       {{ project.description }}
@@ -39,10 +36,7 @@
       <div class="hidden items-center gap-2 md:flex">
         <TagsIcon class="h-6 w-6 text-secondary" />
         <div class="flex flex-wrap gap-2">
-          <TagItem
-            v-for="(category, index) in project.categories"
-            :key="index"
-          >
+          <TagItem v-for="(category, index) in project.categories" :key="index">
             {{ formatCategory(category) }}
           </TagItem>
         </div>
@@ -55,7 +49,6 @@
 </template>
 <script setup lang="ts">
 import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
-import Badge from '../base/SimpleBadge.vue'
 import Avatar from '../base/Avatar.vue'
 import ContentPageHeader from '../base/ContentPageHeader.vue'
 import { formatCategory, formatNumber, type Project } from '@modrinth/utils'

packages/ui/src/components/project/ProjectPageDescription.vue

@@ -2,14 +2,12 @@
   <div class="markdown-body" v-html="renderHighlightedString(description ?? '')" />
 </template>
 <script setup lang="ts">
-
 import { renderHighlightedString } from '@modrinth/utils'
 
 withDefaults(
   defineProps<{
-    description: string,
+    description: string
   }>(),
-  {
-  },
+  {},
 )
 </script>

packages/ui/src/components/project/ProjectPageVersions.vue

@@ -87,11 +87,16 @@
               <div class="flex items-center">
                 <div class="flex flex-wrap gap-1">
                   <TagItem
-                    v-for="gameVersion in formatVersionsForDisplay(version.game_versions, gameVersions)"
+                    v-for="gameVersion in formatVersionsForDisplay(
+                      version.game_versions,
+                      gameVersions,
+                    )"
                     :key="`version-tag-${gameVersion}`"
                     v-tooltip="`Toggle filter for ${gameVersion}`"
                     class="z-[1]"
-                    :action="() => versionFilters?.toggleFilters('gameVersion', version.game_versions)"
+                    :action="
+                      () => versionFilters?.toggleFilters('gameVersion', version.game_versions)
+                    "
                   >
                     {{ gameVersion }}
                   </TagItem>
@@ -119,11 +124,11 @@
             >
               <div
                 v-tooltip="
-                    formatMessage(commonMessages.dateAtTimeTooltip, {
-                      date: new Date(version.date_published),
-                      time: new Date(version.date_published),
-                    })
-                  "
+                  formatMessage(commonMessages.dateAtTimeTooltip, {
+                    date: new Date(version.date_published),
+                    time: new Date(version.date_published),
+                  })
+                "
                 class="z-[1] flex cursor-help items-center gap-1 text-nowrap font-medium xl:self-center"
               >
                 <CalendarIcon class="xl:hidden" />
@@ -141,10 +146,7 @@
         <div class="flex items-start justify-end gap-1 sm:items-center z-[1]">
           <slot name="actions" :version="version"></slot>
         </div>
-        <div
-          v-if="showFiles"
-          class="tag-list pointer-events-none relative z-[1] col-span-full"
-        >
+        <div v-if="showFiles" class="tag-list pointer-events-none relative z-[1] col-span-full">
           <div
             v-for="(file, fileIdx) in version.files"
             :key="`platform-tag-${fileIdx}`"
@@ -169,17 +171,16 @@
 <script setup lang="ts">
 import {
   formatBytes,
-  formatCategory, formatNumber,
+  formatCategory,
+  formatNumber,
   formatVersionsForDisplay,
-  type GameVersionTag, type PlatformTag, type Version
+  type GameVersionTag,
+  type PlatformTag,
+  type Version,
 } from '@modrinth/utils'
 
 import { commonMessages } from '../../utils/common-messages'
-import {
-  CalendarIcon,
-  DownloadIcon,
-  StarIcon,
-} from '@modrinth/assets'
+import { CalendarIcon, DownloadIcon, StarIcon } from '@modrinth/assets'
 import { Pagination, VersionChannelIndicator, VersionFilterControl } from '../index'
 import { useVIntl } from '@vintl/vintl'
 import { type Ref, ref, computed } from 'vue'
@@ -190,24 +191,24 @@ import TagItem from '../base/TagItem.vue'
 
 const { formatMessage } = useVIntl()
 
-type VersionWithDisplayUrlEnding =  Version & {
+type VersionWithDisplayUrlEnding = Version & {
   displayUrlEnding: string
 }
 
 const props = withDefaults(
   defineProps<{
-    baseId?: string,
+    baseId?: string
     project: {
       project_type: string
       slug?: string
       id: string
-    },
-    versions: VersionWithDisplayUrlEnding[],
-    showFiles?: boolean,
-    currentMember?: boolean,
-    loaders: PlatformTag[],
-    gameVersions: GameVersionTag[],
-    versionLink?: (version: Version) => string,
+    }
+    versions: VersionWithDisplayUrlEnding[]
+    showFiles?: boolean
+    currentMember?: boolean
+    loaders: PlatformTag[]
+    gameVersions: GameVersionTag[]
+    versionLink?: (version: Version) => string
   }>(),
   {
     baseId: undefined,
@@ -217,23 +218,26 @@ const props = withDefaults(
   },
 )
 
-const currentPage: Ref<number> = ref(1);
-const pageSize: Ref<number> = ref(20);
+const currentPage: Ref<number> = ref(1)
+const pageSize: Ref<number> = ref(20)
 const versionFilters: Ref<InstanceType<typeof VersionFilterControl> | null> = ref(null)
 
-const selectedGameVersions: Ref<string[]> = computed(() => versionFilters.value?.selectedGameVersions ?? []);
-const selectedPlatforms: Ref<string[]> = computed(() => versionFilters.value?.selectedPlatforms ?? []);
-const selectedChannels: Ref<string[]> = computed(() => versionFilters.value?.selectedChannels ?? []);
+const selectedGameVersions: Ref<string[]> = computed(
+  () => versionFilters.value?.selectedGameVersions ?? [],
+)
+const selectedPlatforms: Ref<string[]> = computed(
+  () => versionFilters.value?.selectedPlatforms ?? [],
+)
+const selectedChannels: Ref<string[]> = computed(() => versionFilters.value?.selectedChannels ?? [])
 
 const filteredVersions = computed(() => {
   return props.versions.filter(
     (version) =>
       hasAnySelected(version.game_versions, selectedGameVersions.value) &&
       hasAnySelected(version.loaders, selectedPlatforms.value) &&
-      isAnySelected(version.version_type, selectedChannels.value)
-  );
-});
-
+      isAnySelected(version.version_type, selectedChannels.value),
+  )
+})
 
 function hasAnySelected(values: string[], selected: string[]) {
   return selected.length === 0 || selected.some((value) => values.includes(value))
@@ -244,33 +248,37 @@ function isAnySelected(value: string, selected: string[]) {
 }
 
 const currentVersions = computed(() =>
-  filteredVersions.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value));
+  filteredVersions.value.slice(
+    (currentPage.value - 1) * pageSize.value,
+    currentPage.value * pageSize.value,
+  ),
+)
 
-const route = useRoute();
-const router = useRouter();
+const route = useRoute()
+const router = useRouter()
 
 if (route.query.page) {
-  currentPage.value = Number(route.query.page) || 1;
+  currentPage.value = Number(route.query.page) || 1
 }
 
 function switchPage(page: number) {
-  currentPage.value = page;
+  currentPage.value = page
 
   router.replace({
     query: {
       ...route.query,
       page: currentPage.value !== 1 ? currentPage.value : undefined,
     },
-  });
+  })
 
-  window.scrollTo({ top: 0, behavior: 'smooth' });
+  window.scrollTo({ top: 0, behavior: 'smooth' })
 }
 
 function updateQuery(newQueries: Record<string, string | string[] | undefined | null>) {
   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({
@@ -278,9 +286,8 @@ function updateQuery(newQueries: Record<string, string | string[] | undefined |
       ...route.query,
       ...newQueries,
     },
-  });
+  })
 }
-
 </script>
 <style scoped>
 .versions-grid-row {

packages/ui/src/components/project/ProjectSidebarCompatibility.vue

@@ -60,7 +60,10 @@
         <TagItem
           v-if="
             project.project_type !== 'datapack' &&
-            project.client_side !== 'unsupported' && project.server_side !== 'unsupported' && project.client_side !== 'unknown' && project.server_side !== 'unknown'
+            project.client_side !== 'unsupported' &&
+            project.server_side !== 'unsupported' &&
+            project.client_side !== 'unknown' &&
+            project.server_side !== 'unknown'
           "
         >
           <MonitorSmartphoneIcon aria-hidden="true" />
@@ -88,6 +91,7 @@ defineProps<{
     loaders: string[]
     client_side: EnvironmentValue
     server_side: EnvironmentValue
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     versions: any[]
   }
   tags: {

packages/ui/src/components/project/ProjectSidebarDetails.vue

@@ -66,7 +66,7 @@
 <script setup lang="ts">
 import { BookTextIcon, CalendarIcon, ScaleIcon, VersionIcon, ExternalIcon } from '@modrinth/assets'
 import { useVIntl, defineMessages } from '@vintl/vintl'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import dayjs from 'dayjs'
 
 const { formatMessage } = useVIntl()

packages/ui/src/components/project/ProjectStatusBadge.vue

@@ -11,7 +11,8 @@ import {
   CalendarIcon,
   GlobeIcon,
   LinkIcon,
-  UnknownIcon, XIcon
+  UnknownIcon,
+  XIcon,
 } from '@modrinth/assets'
 import { useVIntl, defineMessage, type MessageDescriptor } from '@vintl/vintl'
 import type { Component } from 'vue'
@@ -30,7 +31,7 @@ const metadata = computed(() => ({
   formattedName: formatMessage(statusMetadata[props.status]?.message ?? props.status),
 }))
 
-const statusMetadata: Record<ProjectStatus, { icon?: Component, message: MessageDescriptor }> = {
+const statusMetadata: Record<ProjectStatus, { icon?: Component; message: MessageDescriptor }> = {
   approved: {
     icon: GlobeIcon,
     message: defineMessage({

packages/ui/src/components/search/BrowseFiltersPanel.vue

@@ -69,6 +69,7 @@ const props = defineProps<{
 }>()
 
 const filters = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const filters: FilterType<any>[] = [
     {
       id: 'platform',

packages/ui/src/components/search/SearchFilterOption.vue

@@ -4,8 +4,7 @@
       :class="`flex border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-2 [@media(hover:hover)]:py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98] ${included ? 'bg-brand-highlight text-contrast hover:brightness-125' : excluded ? 'bg-highlight-red text-contrast hover:brightness-125' : 'bg-transparent text-secondary hover:bg-button-bg focus-visible:bg-button-bg [&>svg.check-icon]:hover:text-brand [&>svg.check-icon]:focus-visible:text-brand'}`"
       @click="() => emit('toggle', option)"
     >
-      <slot>
-      </slot>
+      <slot> </slot>
       <BanIcon
         v-if="excluded"
         :class="`filter-action-icon ml-auto h-4 w-4 shrink-0 transition-opacity group-hover:opacity-100 ${excluded ? '' : '[@media(hover:hover)]:opacity-0'}`"
@@ -17,8 +16,11 @@
         aria-hidden="true"
       />
     </button>
-    <div v-if="supportsNegativeFilter && !excluded" class="w-px h-[1.75rem] bg-button-bg [@media(hover:hover)]:contents" :class="{ 'opacity-0': included }">
-    </div>
+    <div
+      v-if="supportsNegativeFilter && !excluded"
+      class="w-px h-[1.75rem] bg-button-bg [@media(hover:hover)]:contents"
+      :class="{ 'opacity-0': included }"
+    ></div>
     <button
       v-if="supportsNegativeFilter && !excluded"
       v-tooltip="excluded ? 'Remove exclusion' : 'Exclude'"
@@ -34,14 +36,17 @@
 import { BanIcon, CheckIcon } from '@modrinth/assets'
 import type { FilterOption } from '../../utils/search'
 
-withDefaults(defineProps<{
-  option: FilterOption
-  included: boolean
-  excluded: boolean
-  supportsNegativeFilter?: boolean
-}>(), {
-  supportsNegativeFilter: false,
-})
+withDefaults(
+  defineProps<{
+    option: FilterOption
+    included: boolean
+    excluded: boolean
+    supportsNegativeFilter?: boolean
+  }>(),
+  {
+    supportsNegativeFilter: false,
+  },
+)
 
 const emit = defineEmits<{
   toggle: [option: FilterOption]

packages/ui/src/components/search/SearchSidebarFilter.vue

@@ -41,7 +41,7 @@
     <template v-if="locked" #default>
       <div class="flex flex-col gap-2 p-3 border-dashed border-2 rounded-2xl border-divider mx-2">
         <p class="m-0 font-bold items-center">
-          <slot :name="`locked-${filterType.id}`" >
+          <slot :name="`locked-${filterType.id}`">
             {{ formatMessage(messages.lockedTitle, { type: filterType.formatted_name }) }}
           </slot>
         </p>

packages/ui/src/components/version/VersionFilterControl.vue

@@ -52,7 +52,7 @@
         v-for="channel in selectedChannels"
         :key="`remove-filter-${channel}`"
         :style="`--_color: var(--color-${channel === 'alpha' ? 'red' : channel === 'beta' ? 'orange' : 'green'});--_bg-color: var(--color-${channel === 'alpha' ? 'red' : channel === 'beta' ? 'orange' : 'green'}-highlight)`"
-        :action="() =>toggleFilter('channel', channel)"
+        :action="() => toggleFilter('channel', channel)"
       >
         <XIcon />
         {{ channel.slice(0, 1).toUpperCase() + channel.slice(1) }}
@@ -60,7 +60,7 @@
       <TagItem
         v-for="version in selectedGameVersions"
         :key="`remove-filter-${version}`"
-        :action="() =>toggleFilter('gameVersion', version)"
+        :action="() => toggleFilter('gameVersion', version)"
       >
         <XIcon />
         {{ version }}
@@ -79,119 +79,119 @@
 </template>
 
 <script setup lang="ts">
-import { FilterIcon, XCircleIcon, XIcon } from "@modrinth/assets";
-import { ManySelect, Checkbox } from "../index";
-import { type Version , formatCategory, type GameVersionTag  } from '@modrinth/utils';
-import { ref, computed } from "vue";
-import { useRoute } from "vue-router";
+import { FilterIcon, XCircleIcon, XIcon } from '@modrinth/assets'
+import { ManySelect, Checkbox } from '../index'
+import { type Version, formatCategory, type GameVersionTag } from '@modrinth/utils'
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
 import TagItem from '../base/TagItem.vue'
 
 const props = defineProps<{
   versions: Version[]
   gameVersions: GameVersionTag[]
   baseId?: string
-}>();
+}>()
 
-const emit = defineEmits(["update:query"]);
+const emit = defineEmits(['update:query'])
 
-const allChannels = ref(["release", "beta", "alpha"]);
+const allChannels = ref(['release', 'beta', 'alpha'])
 
-const route = useRoute();
+const route = useRoute()
 
-const showSnapshots = ref(false);
+const showSnapshots = ref(false)
 
-type FilterType = "channel" | "gameVersion" | "platform";
-type Filter = string;
+type FilterType = 'channel' | 'gameVersion' | 'platform'
+type Filter = string
 
 const filterOptions = computed(() => {
   const filters: Record<FilterType, Filter[]> = {
     channel: [],
     gameVersion: [],
     platform: [],
-  };
+  }
 
-  const platformSet = new Set();
-  const gameVersionSet = new Set();
-  const channelSet = new Set();
+  const platformSet = new Set()
+  const gameVersionSet = new Set()
+  const channelSet = new Set()
 
   for (const version of props.versions) {
     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)
     }
-    channelSet.add(version.version_type);
+    channelSet.add(version.version_type)
   }
 
   if (channelSet.size > 0) {
-    filters.channel = Array.from(channelSet) as Filter[];
-    filters.channel.sort((a, b) => allChannels.value.indexOf(a) - allChannels.value.indexOf(b));
+    filters.channel = Array.from(channelSet) as Filter[]
+    filters.channel.sort((a, b) => allChannels.value.indexOf(a) - allChannels.value.indexOf(b))
   }
   if (gameVersionSet.size > 0) {
-    const gameVersions = props.gameVersions.filter((x) => gameVersionSet.has(x.version));
+    const gameVersions = props.gameVersions.filter((x) => gameVersionSet.has(x.version))
 
     filters.gameVersion = gameVersions
-      .filter((x) => (showSnapshots.value ? true : x.version_type === "release"))
-      .map((x) => x.version);
+      .filter((x) => (showSnapshots.value ? true : x.version_type === 'release'))
+      .map((x) => x.version)
   }
   if (platformSet.size > 0) {
-    filters.platform = Array.from(platformSet) as Filter[];
+    filters.platform = Array.from(platformSet) as Filter[]
   }
 
-  return filters;
-});
+  return filters
+})
 
-const selectedChannels = ref<string[]>([]);
-const selectedGameVersions = ref<string[]>([]);
-const selectedPlatforms = ref<string[]>([]);
+const selectedChannels = ref<string[]>([])
+const selectedGameVersions = ref<string[]>([])
+const selectedPlatforms = ref<string[]>([])
 
-selectedChannels.value = route.query.c ? getArrayOrString(route.query.c) : [];
-selectedGameVersions.value = route.query.g ? getArrayOrString(route.query.g) : [];
-selectedPlatforms.value = route.query.l ? getArrayOrString(route.query.l) : [];
+selectedChannels.value = route.query.c ? getArrayOrString(route.query.c) : []
+selectedGameVersions.value = route.query.g ? getArrayOrString(route.query.g) : []
+selectedPlatforms.value = route.query.l ? getArrayOrString(route.query.l) : []
 
 async function toggleFilters(type: FilterType, filters: Filter[]) {
   for (const filter of filters) {
-    await toggleFilter(type, filter, true);
+    await toggleFilter(type, filter, true)
   }
 
-  updateFilters();
+  updateFilters()
 }
 
 async function toggleFilter(type: FilterType, filter: Filter, bulk = false) {
-  if (type === "channel") {
+  if (type === 'channel') {
     selectedChannels.value = selectedChannels.value.includes(filter)
       ? selectedChannels.value.filter((x) => x !== filter)
-      : [...selectedChannels.value, filter];
-  } else if (type === "gameVersion") {
+      : [...selectedChannels.value, filter]
+  } else if (type === 'gameVersion') {
     selectedGameVersions.value = selectedGameVersions.value.includes(filter)
       ? selectedGameVersions.value.filter((x) => x !== filter)
-      : [...selectedGameVersions.value, filter];
-  } else if (type === "platform") {
+      : [...selectedGameVersions.value, filter]
+  } else if (type === 'platform') {
     selectedPlatforms.value = selectedPlatforms.value.includes(filter)
       ? selectedPlatforms.value.filter((x) => x !== filter)
-      : [...selectedPlatforms.value, filter];
+      : [...selectedPlatforms.value, filter]
   }
   if (!bulk) {
-    updateFilters();
+    updateFilters()
   }
 }
 
 async function clearFilters() {
-  selectedChannels.value = [];
-  selectedGameVersions.value = [];
-  selectedPlatforms.value = [];
+  selectedChannels.value = []
+  selectedGameVersions.value = []
+  selectedPlatforms.value = []
 
-  updateFilters();
+  updateFilters()
 }
 
 function updateFilters() {
-  emit("update:query", {
+  emit('update:query', {
     c: selectedChannels.value,
     g: selectedGameVersions.value,
     l: selectedPlatforms.value,
     page: undefined,
-  });
+  })
 }
 
 defineExpose({
@@ -200,13 +200,13 @@ defineExpose({
   selectedChannels,
   selectedGameVersions,
   selectedPlatforms,
-});
+})
 
 function getArrayOrString(x: string | string[]): string[] {
-  if (typeof x === "string") {
-    return [x];
+  if (typeof x === 'string') {
+    return [x]
   } else {
-    return x;
+    return x
   }
 }
 </script>

packages/ui/src/components/version/VersionSummary.vue

@@ -30,18 +30,18 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled, VersionChannelIndicator } from "../index";
-import { DownloadIcon, ExternalIcon } from "@modrinth/assets";
-import { computed } from "vue";
+import { ButtonStyled, VersionChannelIndicator } from '../index'
+import { DownloadIcon, ExternalIcon } from '@modrinth/assets'
+import { computed } from 'vue'
 
 const props = defineProps<{
-  version: Version;
-}>();
+  version: Version
+}>()
 
 const downloadUrl = computed(() => {
-  const primary: VersionFile = props.version.files.find((x) => x.primary) || props.version.files[0];
-  return primary.url;
-});
+  const primary: VersionFile = props.version.files.find((x) => x.primary) || props.version.files[0]
+  return primary.url
+})
 
-const emit = defineEmits(["onDownload", "onNavigate"]);
+const emit = defineEmits(['onDownload', 'onNavigate'])
 </script>