chore: fix ui lint issues

packages/ui/index.ts

@@ -1,3 +1,3 @@
 export * from './src/components'
-export * from './src/utils'
 export * from './src/composables'
+export * from './src/utils'

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

@@ -76,21 +76,21 @@
 
 <script setup lang="ts">
 import {
-  ModrinthIcon,
+  ArchiveIcon,
-  ScaleIcon,
   BoxIcon,
-  ListIcon,
+  CalendarIcon,
+  CheckIcon,
   EyeOffIcon,
   FileTextIcon,
-  XIcon,
+  ListIcon,
-  ArchiveIcon,
-  UpdatedIcon,
-  CheckIcon,
   LockIcon,
-  CalendarIcon,
+  ModrinthIcon,
+  ScaleIcon,
+  UpdatedIcon,
+  XIcon,
 } from '@modrinth/assets'
 import { capitalizeString } from '@modrinth/utils'
-import { useVIntl, defineMessages } from '@vintl/vintl'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 
 const messages = defineMessages({
   acceptedLabel: {

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { DropdownIcon } from '@modrinth/assets'
 import { reactive } from 'vue'
+
 import Button from './Button.vue'
 
 const props = defineProps({

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

@@ -15,6 +15,7 @@
 
 <script setup lang="ts" generic="T">
 import { CheckIcon } from '@modrinth/assets'
+
 import Button from './Button.vue'
 
 const props = withDefaults(

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

@@ -31,10 +31,11 @@
 </template>
 
 <script setup lang="ts">
-import ButtonStyled from './ButtonStyled.vue'
+import { CollapseIcon, ExpandIcon } from '@modrinth/assets'
-import { ExpandIcon, CollapseIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
+import ButtonStyled from './ButtonStyled.vue'
+
 const props = withDefaults(
   defineProps<{
     initiallyCollapsed?: boolean

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

@@ -7,9 +7,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useVIntl, defineMessage } from '@vintl/vintl'
 import { CheckIcon, ClipboardCopyIcon } from '@modrinth/assets'
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import { ref } from 'vue'
 
 const copiedMessage = defineMessage({
   id: 'omorphia.component.copy.action.copy',

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

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const props = withDefaults(
   defineProps<{

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

@@ -48,8 +48,8 @@
   </span>
 </template>
 <script setup lang="ts">
-import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon } from '@modrinth/assets'
+import { ClientIcon, GlobeIcon, InfoIcon, ServerIcon } from '@modrinth/assets'
-import { useVIntl, defineMessages } from '@vintl/vintl'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 
 const messages = defineMessages({
   clientLabel: {

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

@@ -76,10 +76,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { CheckIcon, CopyIcon } from '@modrinth/assets'
-import ButtonStyled from './ButtonStyled.vue'
-import { CopyIcon, CheckIcon } from '@modrinth/assets'
 import type { Component } from 'vue'
+import { ref } from 'vue'
+
+import ButtonStyled from './ButtonStyled.vue'
 
 const infoCopied = ref(false)
 

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

@@ -17,8 +17,8 @@
 
 <script setup lang="ts">
 import { FilterIcon } from '@modrinth/assets'
-import { watch } from 'vue'
 import { type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { watch } from 'vue'
 
 const { formatMessage } = useVIntl()
 

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

@@ -11,9 +11,10 @@
 </template>
 
 <script setup lang="ts">
-import AutoLink from './AutoLink.vue'
 import { ChevronRightIcon } from '@modrinth/assets'
 
+import AutoLink from './AutoLink.vue'
+
 defineProps<{
   to: unknown
 }>()

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

@@ -73,8 +73,9 @@
 </template>
 <script setup lang="ts">
 import { CheckIcon, DropdownIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, PopoutMenu, Button } from '../index'
 import { computed, ref } from 'vue'
+
+import { Button, ButtonStyled, PopoutMenu } from '../index'
 import ScrollablePanel from './ScrollablePanel.vue'
 
 type Option = string | number | object

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

@@ -267,11 +267,10 @@
 </template>
 
 <script setup lang="ts">
-import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
+import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { markdown } from '@codemirror/lang-markdown'
 import { Compartment, EditorState } from '@codemirror/state'
 import { EditorView, keymap, placeholder as cm_placeholder } from '@codemirror/view'
-import { markdown } from '@codemirror/lang-markdown'
-import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import {
   AlignLeftIcon,
   BoldIcon,
@@ -295,11 +294,13 @@ import {
 } from '@modrinth/assets'
 import { markdownCommands, modrinthMarkdownEditorKeymap } from '@modrinth/utils/codemirror'
 import { renderHighlightedString } from '@modrinth/utils/highlight'
+import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
+
 import Modal from '../modal/Modal.vue'
 import Button from './Button.vue'
-import Toggle from './Toggle.vue'
-import FileInput from './FileInput.vue'
 import Chips from './Chips.vue'
+import FileInput from './FileInput.vue'
+import Toggle from './Toggle.vue'
 
 const props = withDefaults(
   defineProps<{

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

@@ -54,6 +54,7 @@
 
 <script setup lang="ts">
 import { type Ref, ref } from 'vue'
+
 import Button from './Button.vue'
 import PopoutMenu from './PopoutMenu.vue'
 

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

@@ -58,8 +58,9 @@
   </div>
 </template>
 <script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon, GapIcon } from '@modrinth/assets'
 import { computed } from 'vue'
-import { GapIcon, ChevronLeftIcon, ChevronRightIcon } from '@modrinth/assets'
+
 import ButtonStyled from './ButtonStyled.vue'
 
 const emit = defineEmits<{

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

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

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

@@ -32,7 +32,7 @@
         :type-only="moderation"
         :client-side="clientSide"
         :server-side="serverSide"
-        :type="projectTypeDisplay"
+        :type="projectTypeDisplay!"
         :search="search"
         :categories="categories"
       />
@@ -67,162 +67,104 @@
   </article>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import { HeartIcon, DownloadIcon, EditIcon, CalendarIcon } from '@modrinth/assets'
+import { CalendarIcon, DownloadIcon, EditIcon, HeartIcon } from '@modrinth/assets'
 import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime.js'
-import { defineComponent } from 'vue'
+import { computed } from 'vue'
-import Categories from '../search/Categories.vue'
-import Badge from './SimpleBadge.vue'
-import Avatar from './Avatar.vue'
-import EnvironmentIndicator from './EnvironmentIndicator.vue'
-</script>
 
-<script>
 import { useRelativeTime } from '../../composables'
+import Categories from '../search/Categories.vue'
+import Avatar from './Avatar.vue'
+import Badge from './Badge.vue'
+import EnvironmentIndicator from './EnvironmentIndicator.vue'
 
 dayjs.extend(relativeTime)
-export default defineComponent({
+
-  props: {
+const props = withDefaults(
-    id: {
+  defineProps<{
-      type: String,
+    id?: string
-      default: 'modrinth-0',
+    type?: string
+    name?: string
+    author?: string | null
+    description?: string
+    iconUrl?: string
+    downloads?: string | null
+    follows?: string | null
+    createdAt?: string
+    updatedAt?: string | null
+    categories?: string[]
+    filteredCategories?: string[]
+    projectTypeDisplay?: string | null
+    projectTypeUrl?: string | null
+    status?: string | null
+    serverSide?: string
+    clientSide?: string
+    moderation?: boolean
+    search?: boolean
+    featuredImage?: string | null
+    showUpdatedDate?: boolean
+    hideLoaders?: boolean
+    color?: number | null
+  }>(),
+  {
+    id: 'modrinth-0',
+    type: 'mod',
+    name: 'Project Name',
+    author: null,
+    description: 'A _type description',
+    iconUrl: '#',
+    downloads: null,
+    follows: null,
+    createdAt: '0000-00-00',
+    updatedAt: null,
+    categories: () => [],
+    filteredCategories: () => [],
+    projectTypeDisplay: null,
+    projectTypeUrl: null,
+    status: null,
+    serverSide: '',
+    clientSide: '',
+    moderation: false,
+    search: false,
+    featuredImage: null,
+    showUpdatedDate: true,
+    hideLoaders: false,
+    color: null,
   },
-    type: {
+)
-      type: String,
+
-      default: 'mod',
+// Composables
-    },
+const formatRelativeTime = useRelativeTime()
-    name: {
+
-      type: String,
+// Computed properties
-      default: 'Project Name',
+const toColor = computed((): string => {
-    },
+  let color = props.color
-    author: {
+
-      type: String,
+  if (color === null) return 'rgba(0, 0, 0, 1)'
-      default: null,
-    },
-    description: {
-      type: String,
-      default: 'A _type description',
-    },
-    iconUrl: {
-      type: String,
-      default: '#',
-      required: false,
-    },
-    downloads: {
-      type: String,
-      default: null,
-      required: false,
-    },
-    follows: {
-      type: String,
-      default: null,
-      required: false,
-    },
-    createdAt: {
-      type: String,
-      default: '0000-00-00',
-    },
-    updatedAt: {
-      type: String,
-      default: null,
-    },
-    categories: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    filteredCategories: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    projectTypeDisplay: {
-      type: String,
-      default: null,
-    },
-    projectTypeUrl: {
-      type: String,
-      default: null,
-    },
-    status: {
-      type: String,
-      default: null,
-    },
-    serverSide: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    clientSide: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    moderation: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    search: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    featuredImage: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    showUpdatedDate: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    hideLoaders: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    color: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-  },
-  setup(_) {
-    const formatRelativeTime = useRelativeTime()
-    return { formatRelativeTime }
-  },
-  computed: {
-    toColor() {
-      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(',')})`
-    },
+})
-    createdDate() {
+
-      return dayjs(this.createdAt).format('MMMM D, YYYY [at] h:mm:ss A')
+const createdDate = computed((): string => {
-    },
+  return dayjs(props.createdAt).format('MMMM D, YYYY [at] h:mm:ss A')
-    sinceCreation() {
+})
-      return this.formatRelativeTime(this.createdAt)
+
-    },
+const sinceCreation = computed((): string => {
-    updatedDate() {
+  return formatRelativeTime(dayjs(props.createdAt).toDate())
-      return dayjs(this.updatedAt).format('MMMM D, YYYY [at] h:mm:ss A')
+})
-    },
+
-    sinceUpdated() {
+const updatedDate = computed((): string => {
-      return this.formatRelativeTime(this.updatedAt)
+  return dayjs(props.updatedAt).format('MMMM D, YYYY [at] h:mm:ss A')
-    },
+})
-  },
+
-  methods: {
+const sinceUpdated = computed((): string => {
-    formatNumber,
+  return formatRelativeTime(dayjs(props.updatedAt).toDate())
-  },
 })
 </script>
 

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

@@ -17,7 +17,7 @@
   </div>
 </template>
 <script setup lang="ts" generic="T">
-import { RadioButtonIcon, RadioButtonCheckedIcon } from '@modrinth/assets'
+import { RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 const props = withDefaults(

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

@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 withDefaults(
   defineProps<{

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

@@ -32,11 +32,12 @@
 </template>
 
 <script setup lang="ts">
-import { renderString } from '@modrinth/utils'
-import { Admonition } from '../index'
 import { XIcon } from '@modrinth/assets'
+import { renderString } from '@modrinth/utils'
 import { defineMessages, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
+
+import { Admonition } from '../index'
 import ButtonStyled from './ButtonStyled.vue'
 import CopyCode from './CopyCode.vue'
 

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

@@ -101,8 +101,8 @@
 
 <script setup lang="ts" generic="OptionValue extends string | number | Record<string, any>">
 import { DropdownIcon } from '@modrinth/assets'
-import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import type { CSSProperties } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const ITEM_HEIGHT = 44
 const BUFFER_ITEMS = 5

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { createStripeElements } from '@modrinth/utils'
-import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 import { loadStripe, type Stripe as StripsJs, type StripeElements } from '@stripe/stripe-js'
+import { ref } from 'vue'
+
+import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 
 const emit = defineEmits<{
   (e: 'startLoading' | 'stopLoading'): void

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ButtonStyled, NewModal } from '../index'
-import { defineMessages, useVIntl } from '@vintl/vintl'
-import AddPaymentMethod from './AddPaymentMethod.vue'
-import type { AddPaymentMethodProps } from './AddPaymentMethod.vue'
-import { commonMessages } from '../../utils'
 import { PlusIcon, XIcon } from '@modrinth/assets'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+
+import { commonMessages } from '../../utils'
+import { ButtonStyled, NewModal } from '../index'
+import type { AddPaymentMethodProps } from './AddPaymentMethod.vue'
+import AddPaymentMethod from './AddPaymentMethod.vue'
 
 const { formatMessage } = useVIntl()
 

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import Accordion from '../base/Accordion.vue'
+import { SpinnerIcon } from '@modrinth/assets'
 import { formatPrice } from '@modrinth/utils'
 import { useVIntl } from '@vintl/vintl'
-import { SpinnerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
+import Accordion from '../base/Accordion.vue'
+
 const { locale } = useVIntl()
 
 export type BillingItem = {

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { CardIcon, CurrencyIcon, PayPalIcon, UnknownIcon } from '@modrinth/assets'
-import { commonMessages, paymentMethodMessages } from '../../utils'
-import type Stripe from 'stripe'
 import { useVIntl } from '@vintl/vintl'
+import type Stripe from 'stripe'
+
+import { commonMessages, paymentMethodMessages } from '../../utils'
 
 const { formatMessage } = useVIntl()
 defineProps<{

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

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import { ref, computed, useTemplateRef, nextTick, watch } from 'vue'
-import NewModal from '../modal/NewModal.vue'
-import { type MessageDescriptor, useVIntl, defineMessage } from '@vintl/vintl'
 import {
+  CheckCircleIcon,
   ChevronRightIcon,
   LeftArrowIcon,
   RightArrowIcon,
-  XIcon,
-  CheckCircleIcon,
   SpinnerIcon,
+  XIcon,
 } from '@modrinth/assets'
+import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import type Stripe from 'stripe'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+
+import { useStripe } from '../../composables/stripe'
+import { commonMessages } from '../../utils'
 import type {
   CreatePaymentIntentRequest,
   CreatePaymentIntentResponse,
@@ -21,14 +24,11 @@ import type {
   UpdatePaymentIntentResponse,
 } from '../../utils/billing'
 import { ButtonStyled } from '../index'
-import type Stripe from 'stripe'
+import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
-
+import NewModal from '../modal/NewModal.vue'
-import { commonMessages } from '../../utils'
 import RegionSelector from './ServersPurchase1Region.vue'
 import PaymentMethodSelector from './ServersPurchase2PaymentMethod.vue'
 import ConfirmPurchase from './ServersPurchase3Review.vue'
-import { useStripe } from '../../composables/stripe'
-import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 
 const { formatMessage } = useVIntl()
 

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { RadioButtonIcon, RadioButtonCheckedIcon, SpinnerIcon } from '@modrinth/assets'
+import { RadioButtonCheckedIcon, RadioButtonIcon, SpinnerIcon } from '@modrinth/assets'
 import type Stripe from 'stripe'
+
 import FormattedPaymentMethod from './FormattedPaymentMethod.vue'
 
 const emit = defineEmits<{

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

@@ -524,11 +524,7 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick, reactive, watch } from 'vue'
-import NewModal from '../modal/NewModal.vue'
 import {
-  UnknownIcon,
-  SpinnerIcon,
   CardIcon,
   CheckCircleIcon,
   ChevronRightIcon,
@@ -540,16 +536,21 @@ import {
   RadioButtonCheckedIcon,
   RadioButtonIcon,
   RightArrowIcon,
+  SpinnerIcon,
+  UnknownIcon,
   XIcon,
 } from '@modrinth/assets'
-import AnimatedLogo from '../brand/AnimatedLogo.vue'
+import { calculateSavings, createStripeElements, formatPrice, getCurrency } from '@modrinth/utils'
-import { getCurrency, calculateSavings, formatPrice, createStripeElements } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
-import { useVIntl, defineMessages } from '@vintl/vintl'
+import dayjs from 'dayjs'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
 import { Multiselect } from 'vue-multiselect'
+
+import Admonition from '../base/Admonition.vue'
 import Checkbox from '../base/Checkbox.vue'
 import Slider from '../base/Slider.vue'
-import dayjs from 'dayjs'
+import AnimatedLogo from '../brand/AnimatedLogo.vue'
-import Admonition from '../base/Admonition.vue'
+import NewModal from '../modal/NewModal.vue'
 
 const { locale, formatMessage } = useVIntl()
 

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import ServersRegionButton from './ServersRegionButton.vue'
+import { InfoIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { defineMessages, useVIntl } from '@vintl/vintl'
 import { IntlFormatted } from '@vintl/vintl/components'
-import { onMounted, ref, computed, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
-import type { RegionPing } from './ModrinthServersPurchaseModal.vue'
+
+import { formatPrice } from '../../../../utils'
 import {
   monthsInInterval,
   type ServerBillingInterval,
@@ -11,11 +12,11 @@ import {
   type ServerRegion,
   type ServerStockRequest,
 } from '../../utils/billing'
-import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 import Slider from '../base/Slider.vue'
-import { SpinnerIcon, XIcon, InfoIcon } from '@modrinth/assets'
+import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
+import type { RegionPing } from './ModrinthServersPurchaseModal.vue'
+import ServersRegionButton from './ServersRegionButton.vue'
 import ServersSpecs from './ServersSpecs.vue'
-import { formatPrice } from '../../../../utils'
 
 const { formatMessage, locale } = useVIntl()
 

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import type Stripe from 'stripe'
-import { useVIntl, defineMessages } from '@vintl/vintl'
+
 import PaymentMethodOption from './PaymentMethodOption.vue'
 
 const { formatMessage } = useVIntl()

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

@@ -1,31 +1,32 @@
 <script setup lang="ts">
+import {
+  EditIcon,
+  ExternalIcon,
+  RadioButtonCheckedIcon,
+  RadioButtonIcon,
+  RightArrowIcon,
+  SignalIcon,
+  SpinnerIcon,
+  XIcon,
+} from '@modrinth/assets'
+import { formatPrice, getPingLevel } from '@modrinth/utils'
+import { useVIntl } from '@vintl/vintl'
+import type Stripe from 'stripe'
 import { computed } from 'vue'
+
 import {
   monthsInInterval,
   type ServerBillingInterval,
   type ServerPlan,
   type ServerRegion,
 } from '../../utils/billing'
-import TagItem from '../base/TagItem.vue'
-import ServersSpecs from './ServersSpecs.vue'
-import { formatPrice, getPingLevel } from '@modrinth/utils'
-import { useVIntl } from '@vintl/vintl'
 import { regionOverrides } from '../../utils/regions'
-import {
-  EditIcon,
-  RightArrowIcon,
-  SignalIcon,
-  SpinnerIcon,
-  XIcon,
-  RadioButtonIcon,
-  RadioButtonCheckedIcon,
-  ExternalIcon,
-} from '@modrinth/assets'
-import type Stripe from 'stripe'
-import FormattedPaymentMethod from './FormattedPaymentMethod.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
 import Checkbox from '../base/Checkbox.vue'
+import TagItem from '../base/TagItem.vue'
 import ExpandableInvoiceTotal from './ExpandableInvoiceTotal.vue'
+import FormattedPaymentMethod from './FormattedPaymentMethod.vue'
+import ServersSpecs from './ServersSpecs.vue'
 
 const vintl = useVIntl()
 const { locale, formatMessage } = vintl

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { useVIntl } from '@vintl/vintl'
-import { getPingLevel } from '@modrinth/utils'
 import { SignalIcon, SpinnerIcon } from '@modrinth/assets'
+import { getPingLevel } from '@modrinth/utils'
+import { useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
+
 import type { ServerRegion } from '../../utils/billing'
 import { regionOverrides } from '../../utils/regions'
 

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { CpuIcon, DatabaseIcon, MemoryStickIcon, SparklesIcon, UnknownIcon } from '@modrinth/assets'
 import { computed } from 'vue'
+
 import AutoLink from '../base/AutoLink.vue'
-import { MemoryStickIcon, DatabaseIcon, CpuIcon, SparklesIcon, UnknownIcon } from '@modrinth/assets'
 
 const emit = defineEmits<{
   (e: 'click-bursting-link'): void

packages/ui/src/components/changelog/ChangelogEntry.vue

@@ -42,13 +42,14 @@
 </template>
 
 <script setup lang="ts">
-import type { VersionEntry } from '@modrinth/utils/changelog'
 import { renderHighlightedString } from '@modrinth/utils'
+import type { VersionEntry } from '@modrinth/utils/changelog'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import dayjs from 'dayjs'
-import { useVIntl, defineMessages } from '@vintl/vintl'
 import { computed, ref } from 'vue'
-import AutoLink from '../base/AutoLink.vue'
+
 import { useRelativeTime } from '../../composables'
+import AutoLink from '../base/AutoLink.vue'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()

packages/ui/src/components/chart/Chart.vue

@@ -1,8 +1,9 @@
 <!-- eslint-disable no-console -->
 <script setup>
-import dayjs from 'dayjs'
 import { formatNumber } from '@modrinth/utils'
+import dayjs from 'dayjs'
 import { defineAsyncComponent, ref } from 'vue'
+
 import Button from '../base/Button.vue'
 import Checkbox from '../base/Checkbox.vue'
 

packages/ui/src/components/chart/CompactChart.vue

@@ -1,8 +1,9 @@
 <!-- eslint-disable eslint-comments/require-description -->
 <script setup>
 import { formatNumber } from '@modrinth/utils'
-import { defineAsyncComponent, ref } from 'vue'
 import dayjs from 'dayjs'
+import { defineAsyncComponent, ref } from 'vue'
+
 import Card from '../base/Card.vue'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))

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

@@ -1,8 +1,9 @@
 <script setup lang="ts" generic="T">
+import type { RouteLocationRaw } from 'vue-router'
+
 import AutoLink from '../base/AutoLink.vue'
 import Avatar from '../base/Avatar.vue'
 import Checkbox from '../base/Checkbox.vue'
-import type { RouteLocationRaw } from 'vue-router'
 
 export interface ContentCreator {
   name: string

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

@@ -1,10 +1,11 @@
 <script setup lang="ts" generic="T">
-import { ref, computed } from 'vue'
-import type { Ref } from 'vue'
-import Checkbox from '../base/Checkbox.vue'
-import ContentListItem from './ContentListItem.vue'
-import type { ContentItem } from './ContentListItem.vue'
 import { DropdownIcon } from '@modrinth/assets'
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+import Checkbox from '../base/Checkbox.vue'
+import type { ContentItem } from './ContentListItem.vue'
+import ContentListItem from './ContentListItem.vue'
 
 const props = withDefaults(
   defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+
 import AutoLink from '../base/AutoLink.vue'
 
 export interface Article {

packages/ui/src/components/index.ts

@@ -19,15 +19,15 @@ export { default as DropdownSelect } from './base/DropdownSelect.vue'
 export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue'
 export { default as ErrorInformationCard } from './base/ErrorInformationCard.vue'
 export { default as FileInput } from './base/FileInput.vue'
-export { default as FilterBar } from './base/FilterBar.vue'
 export type { FilterBarOption } from './base/FilterBar.vue'
+export { default as FilterBar } from './base/FilterBar.vue'
 export { default as HeadingLink } from './base/HeadingLink.vue'
 export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
 export { default as ManySelect } from './base/ManySelect.vue'
 export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
 export { default as Notifications } from './base/Notifications.vue'
-export { default as OverflowMenu } from './base/OverflowMenu.vue'
 export type { Option as OverflowMenuOption } from './base/OverflowMenu.vue'
+export { default as OverflowMenu } from './base/OverflowMenu.vue'
 export { default as Page } from './base/Page.vue'
 export { default as Pagination } from './base/Pagination.vue'
 export { default as PopoutMenu } from './base/PopoutMenu.vue'
@@ -60,16 +60,16 @@ export { default as CompactChart } from './chart/CompactChart.vue'
 
 // Content
 export { default as ContentListPanel } from './content/ContentListPanel.vue'
-export { default as NewsArticleCard } from './content/NewsArticleCard.vue'
 export type { Article as NewsArticle } from './content/NewsArticleCard.vue'
+export { default as NewsArticleCard } from './content/NewsArticleCard.vue'
 
 // Modals
-export { default as NewModal } from './modal/NewModal.vue'
-export { default as Modal } from './modal/Modal.vue'
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
+export { default as Modal } from './modal/Modal.vue'
+export { default as NewModal } from './modal/NewModal.vue'
 export { default as ShareModal } from './modal/ShareModal.vue'
-export { default as TabbedModal } from './modal/TabbedModal.vue'
 export type { Tab as TabbedModalTab } from './modal/TabbedModal.vue'
+export { default as TabbedModal } from './modal/TabbedModal.vue'
 
 // Navigation
 export { default as Breadcrumbs } from './nav/Breadcrumbs.vue'
@@ -100,16 +100,16 @@ export { default as SearchFilterOption } from './search/SearchFilterOption.vue'
 export { default as SearchSidebarFilter } from './search/SearchSidebarFilter.vue'
 
 // Billing
-export { default as PurchaseModal } from './billing/PurchaseModal.vue'
 export { default as AddPaymentMethodModal } from './billing/AddPaymentMethodModal.vue'
 export { default as ModrinthServersPurchaseModal } from './billing/ModrinthServersPurchaseModal.vue'
+export { default as PurchaseModal } from './billing/PurchaseModal.vue'
 
 // Skins
-export { default as SkinPreviewRenderer } from './skin/SkinPreviewRenderer.vue'
 export { default as CapeButton } from './skin/CapeButton.vue'
 export { default as CapeLikeTextButton } from './skin/CapeLikeTextButton.vue'
 export { default as SkinButton } from './skin/SkinButton.vue'
 export { default as SkinLikeTextButton } from './skin/SkinLikeTextButton.vue'
+export { default as SkinPreviewRenderer } from './skin/SkinPreviewRenderer.vue'
 
 // Version
 export { default as VersionChannelIndicator } from './version/VersionChannelIndicator.vue'
@@ -120,6 +120,6 @@ export { default as VersionSummary } from './version/VersionSummary.vue'
 export { default as ThemeSelector } from './settings/ThemeSelector.vue'
 
 // Servers
-export { default as ServersPromo } from './servers/ServersPromo.vue'
-export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
 export { default as ServersSpecs } from './billing/ServersSpecs.vue'
+export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
+export { default as ServersPromo } from './servers/ServersPromo.vue'

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

@@ -50,11 +50,12 @@
 </template>
 
 <script setup>
-import { renderString } from '@modrinth/utils'
-import { ref, computed } from 'vue'
 import { TrashIcon, XIcon } from '@modrinth/assets'
-import NewModal from './NewModal.vue'
+import { renderString } from '@modrinth/utils'
+import { computed, ref } from 'vue'
+
 import ButtonStyled from '../base/ButtonStyled.vue'
+import NewModal from './NewModal.vue'
 
 const props = defineProps({
   confirmationText: {

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

@@ -49,6 +49,7 @@
 <script setup lang="ts">
 import { XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
+
 import ButtonStyled from '../base/ButtonStyled.vue'
 
 const props = withDefaults(

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

@@ -1,16 +1,17 @@
 <script setup>
 import {
   ClipboardCopyIcon,
-  LinkIcon,
-  ShareIcon,
-  MailIcon,
   GlobeIcon,
-  TwitterIcon,
+  LinkIcon,
+  MailIcon,
   MastodonIcon,
   RedditIcon,
+  ShareIcon,
+  TwitterIcon,
 } from '@modrinth/assets'
-import { computed, ref, nextTick } from 'vue'
 import QrcodeVue from 'qrcode.vue'
+import { computed, nextTick, ref } from 'vue'
+
 import { Button, Modal } from '../index'
 
 const props = defineProps({

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import { type Component, ref } from 'vue'
-import { useVIntl, type MessageDescriptor } from '@vintl/vintl'
 
 const { formatMessage } = useVIntl()
 

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

@@ -64,10 +64,11 @@
 </template>
 
 <script setup>
-import { TagsIcon, DownloadIcon, HeartIcon, HistoryIcon } from '@modrinth/assets'
+import { DownloadIcon, HeartIcon, HistoryIcon, TagsIcon } from '@modrinth/assets'
-import Avatar from '../base/Avatar.vue'
+import { formatCategory, formatNumber } from '@modrinth/utils'
-import { formatNumber, formatCategory } from '@modrinth/utils'
+
 import { useRelativeTime } from '../../composables'
+import Avatar from '../base/Avatar.vue'
 
 const formatRelativeTime = useRelativeTime()
 

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

@@ -54,10 +54,11 @@
 </template>
 <script setup lang="ts">
 import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
-import Avatar from '../base/Avatar.vue'
-import ContentPageHeader from '../base/ContentPageHeader.vue'
 import { formatCategory, formatNumber, type Project } from '@modrinth/utils'
 import { useRouter } from 'vue-router'
+
+import Avatar from '../base/Avatar.vue'
+import ContentPageHeader from '../base/ContentPageHeader.vue'
 import TagItem from '../base/TagItem.vue'
 import ProjectStatusBadge from './ProjectStatusBadge.vue'
 

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

@@ -169,6 +169,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { CalendarIcon, DownloadIcon, StarIcon } from '@modrinth/assets'
 import {
   formatBytes,
   formatCategory,
@@ -178,16 +179,15 @@ import {
   type PlatformTag,
   type Version,
 } from '@modrinth/utils'
-
-import { commonMessages } from '../../utils/common-messages'
-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'
+import { computed, type Ref, ref } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useRelativeTime } from '../../composables'
+import { commonMessages } from '../../utils/common-messages'
 import AutoLink from '../base/AutoLink.vue'
 import TagItem from '../base/TagItem.vue'
-import { useRelativeTime } from '../../composables'
+import { Pagination, VersionChannelIndicator, VersionFilterControl } from '../index'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()

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

@@ -76,10 +76,11 @@
 </template>
 <script setup lang="ts">
 import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
-import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
 import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
-import { useVIntl, defineMessages } from '@vintl/vintl'
+import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 import { useRouter } from 'vue-router'
+
 import TagItem from '../base/TagItem.vue'
 
 const { formatMessage } = useVIntl()

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

@@ -46,11 +46,12 @@
 </template>
 <script setup lang="ts">
 import { CrownIcon, ExternalIcon, OrganizationIcon } from '@modrinth/assets'
-import { useVIntl, defineMessages } from '@vintl/vintl'
+import { defineMessages, useVIntl } from '@vintl/vintl'
-import Avatar from '../base/Avatar.vue'
-import AutoLink from '../base/AutoLink.vue'
 import { computed } from 'vue'
 
+import AutoLink from '../base/AutoLink.vue'
+import Avatar from '../base/Avatar.vue'
+
 const { formatMessage } = useVIntl()
 
 type TeamMember = {

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

@@ -64,10 +64,11 @@
   </div>
 </template>
 <script setup lang="ts">
-import { BookTextIcon, CalendarIcon, ScaleIcon, VersionIcon, ExternalIcon } from '@modrinth/assets'
+import { BookTextIcon, CalendarIcon, ExternalIcon, ScaleIcon, VersionIcon } from '@modrinth/assets'
-import { useVIntl, defineMessages } from '@vintl/vintl'
+import { defineMessages, useVIntl } from '@vintl/vintl'
-import { computed } from 'vue'
 import dayjs from 'dayjs'
+import { computed } from 'vue'
+
 import { useRelativeTime } from '../../composables'
 
 const { formatMessage } = useVIntl()

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

@@ -102,7 +102,7 @@ import {
   PayPalIcon,
   WikiIcon,
 } from '@modrinth/assets'
-import { useVIntl, defineMessages } from '@vintl/vintl'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 
 const { formatMessage } = useVIntl()
 

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

@@ -4,21 +4,22 @@
 
 <script setup lang="ts">
 import {
-  FileTextIcon,
   ArchiveIcon,
-  UpdatedIcon,
-  LockIcon,
   CalendarIcon,
+  FileTextIcon,
   GlobeIcon,
   LinkIcon,
+  LockIcon,
   UnknownIcon,
+  UpdatedIcon,
   XIcon,
 } from '@modrinth/assets'
-import { useVIntl, defineMessage, type MessageDescriptor } from '@vintl/vintl'
+import type { ProjectStatus } from '@modrinth/utils'
+import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
 import type { Component } from 'vue'
 import { computed } from 'vue'
+
 import Badge from '../base/SimpleBadge.vue'
-import type { ProjectStatus } from '@modrinth/utils'
 
 const props = defineProps<{
   status: ProjectStatus

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

@@ -28,9 +28,10 @@
 </template>
 
 <script setup lang="ts">
-import Accordion from '../base/Accordion.vue'
 import { computed } from 'vue'
 
+import Accordion from '../base/Accordion.vue'
+
 interface FilterOption<T> {
   id: string
   formatted_name: string

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

@@ -66,8 +66,9 @@
 </template>
 
 <script setup>
+import { SearchIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
-import { XIcon, SearchIcon } from '@modrinth/assets'
+
 import Avatar from '../base/Avatar.vue'
 import Button from '../base/Button.vue'
 

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

@@ -17,6 +17,7 @@
 
 <script setup>
 import { computed } from 'vue'
+
 import Checkbox from '../base/Checkbox.vue'
 
 const props = defineProps({

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

@@ -30,11 +30,12 @@
 </template>
 
 <script setup lang="ts">
-import { XCircleIcon, XIcon, LockIcon, BanIcon } from '@modrinth/assets'
+import { BanIcon, LockIcon, XCircleIcon, XIcon } from '@modrinth/assets'
-import { computed, type ComputedRef } from 'vue'
-import TagItem from '../base/TagItem.vue'
-import type { FilterValue, FilterType, FilterOption } from '../../utils/search'
 import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
+import { computed, type ComputedRef } from 'vue'
+
+import type { FilterOption, FilterType, FilterValue } from '../../utils/search'
+import TagItem from '../base/TagItem.vue'
 
 const { formatMessage } = useVIntl()
 

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

@@ -34,6 +34,7 @@
 
 <script setup lang="ts">
 import { BanIcon, CheckIcon } from '@modrinth/assets'
+
 import type { FilterOption } from '../../utils/search'
 
 withDefaults(

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

@@ -149,21 +149,22 @@
 </template>
 
 <script setup lang="ts">
-import Accordion from '../base/Accordion.vue'
-import type { FilterOption, FilterType, FilterValue } from '../../utils/search'
 import {
   BanIcon,
-  SearchIcon,
-  XIcon,
-  UpdatedIcon,
-  LockOpenIcon,
   DropdownIcon,
+  LockOpenIcon,
+  SearchIcon,
+  UpdatedIcon,
+  XIcon,
 } from '@modrinth/assets'
-import { Button, Checkbox, ScrollablePanel } from '../index'
-import { computed, ref } from 'vue'
-import ButtonStyled from '../base/ButtonStyled.vue'
-import SearchFilterOption from './SearchFilterOption.vue'
 import { defineMessages, useVIntl } from '@vintl/vintl'
+import { computed, ref } from 'vue'
+
+import type { FilterOption, FilterType, FilterValue } from '../../utils/search'
+import Accordion from '../base/Accordion.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import { Button, Checkbox, ScrollablePanel } from '../index'
+import SearchFilterOption from './SearchFilterOption.vue'
 
 const { formatMessage } = useVIntl()
 

packages/ui/src/components/servers/ServersPromo.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { RightArrowIcon, ModrinthIcon, XIcon } from '@modrinth/assets'
+import { ModrinthIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
-import ButtonStyled from '../base/ButtonStyled.vue'
+
 import AutoLink from '../base/AutoLink.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
 
 const emit = defineEmits<{
   (e: 'close'): void

packages/ui/src/components/servers/backups/BackupWarning.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { IssuesIcon } from '@modrinth/assets'
+
 import AutoLink from '../../base/AutoLink.vue'
 
 defineProps<{

packages/ui/src/components/skin/SkinPreviewRenderer.vue

@@ -101,29 +101,30 @@
 </template>
 
 <script setup lang="ts">
-import * as THREE from 'three'
+import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
-import { useGLTF } from '@tresjs/cientos'
-import { useTexture, TresCanvas, useRenderLoop } from '@tresjs/core'
-import { EffectComposerPmndrs, FXAAPmndrs } from '@tresjs/post-processing'
 import {
-  shallowRef,
-  ref,
-  computed,
-  watch,
-  markRaw,
-  onBeforeMount,
-  onUnmounted,
-  toRefs,
-  useTemplateRef,
-} from 'vue'
-import {
-  applyTexture,
   applyCapeTexture,
+  applyTexture,
   createTransparentTexture,
   loadTexture as loadSkinTexture,
 } from '@modrinth/utils'
+import { useGLTF } from '@tresjs/cientos'
+import { TresCanvas, useRenderLoop, useTexture } from '@tresjs/core'
+import { EffectComposerPmndrs, FXAAPmndrs } from '@tresjs/post-processing'
+import * as THREE from 'three'
+import {
+  computed,
+  markRaw,
+  onBeforeMount,
+  onUnmounted,
+  ref,
+  shallowRef,
+  toRefs,
+  useTemplateRef,
+  watch,
+} from 'vue'
+
 import { useDynamicFontSize } from '../../composables'
-import { ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
 
 interface AnimationConfig {
   baseAnimation: string

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useVIntl, defineMessages } from '@vintl/vintl'
 import type { VersionChannel } from '@modrinth/utils'
+import { defineMessages, useVIntl } from '@vintl/vintl'
 
 const { formatMessage } = useVIntl()
 

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

@@ -80,11 +80,12 @@
 
 <script setup lang="ts">
 import { FilterIcon, XCircleIcon, XIcon } from '@modrinth/assets'
-import { ManySelect, Checkbox } from '../index'
+import { formatCategory, type GameVersionTag, type Version } from '@modrinth/utils'
-import { type Version, formatCategory, type GameVersionTag } from '@modrinth/utils'
+import { computed, ref } from 'vue'
-import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
+
 import TagItem from '../base/TagItem.vue'
+import { Checkbox, ManySelect } from '../index'
 
 const props = defineProps<{
   versions: Version[]

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

@@ -30,10 +30,11 @@
 </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'
+
 const props = defineProps<{
   version: Version
 }>()

packages/ui/src/composables/dynamic-font-size.ts

@@ -1,5 +1,5 @@
-import { computed, onMounted, onUnmounted, type Ref } from 'vue'
 import { useElementSize } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, type Ref } from 'vue'
 
 export interface DynamicFontSizeOptions {
   containerElement: Ref<HTMLElement | null>

packages/ui/src/composables/how-ago.ts

@@ -1,6 +1,6 @@
 import { createFormatter, type FormatOptions, type Formatter } from '@vintl/how-ago'
-import type { IntlController } from '@vintl/vintl/controller'
 import { useVIntl } from '@vintl/vintl'
+import type { IntlController } from '@vintl/vintl/controller'
 import { computed } from 'vue'
 
 /* eslint-disable @typescript-eslint/no-explicit-any */

packages/ui/src/composables/index.ts

@@ -1,2 +1,2 @@
-export * from './how-ago'
 export * from './dynamic-font-size'
+export * from './how-ago'

packages/ui/src/composables/stripe.ts

@@ -1,15 +1,16 @@
-import type Stripe from 'stripe'
+import { loadStripe, type Stripe as StripeJs, type StripeElements } from '@stripe/stripe-js'
-import { type Stripe as StripeJs, loadStripe, type StripeElements } from '@stripe/stripe-js'
-import { computed, ref, type Ref } from 'vue'
 import type { ContactOption } from '@stripe/stripe-js/dist/stripe-js/elements/address'
+import type Stripe from 'stripe'
+import { computed, type Ref, ref } from 'vue'
+
 import type {
-  ServerPlan,
   BasePaymentIntentResponse,
   ChargeRequestType,
   CreatePaymentIntentRequest,
   CreatePaymentIntentResponse,
   PaymentRequestType,
   ServerBillingInterval,
+  ServerPlan,
   UpdatePaymentIntentRequest,
   UpdatePaymentIntentResponse,
 } from '../utils/billing.ts'

packages/ui/src/utils/billing.ts

@@ -1,5 +1,5 @@
-import type Stripe from 'stripe'
 import type { Loaders } from '@modrinth/utils'
+import type Stripe from 'stripe'
 
 export type ServerBillingInterval = 'monthly' | 'yearly' | 'quarterly'
 

packages/ui/src/utils/search.ts

@@ -1,8 +1,8 @@
-import { type Ref, type Component, computed, readonly, ref } from 'vue'
-import { type LocationQueryRaw, type LocationQueryValue, useRoute } from 'vue-router'
-import { defineMessage, useVIntl } from '@vintl/vintl'
-import { formatCategory, formatCategoryHeader, sortByNameOrNumber } from '@modrinth/utils'
 import { ClientIcon, ServerIcon } from '@modrinth/assets'
+import { formatCategory, formatCategoryHeader, sortByNameOrNumber } from '@modrinth/utils'
+import { defineMessage, useVIntl } from '@vintl/vintl'
+import { type Component, computed, readonly, type Ref, ref } from 'vue'
+import { type LocationQueryRaw, type LocationQueryValue, useRoute } from 'vue-router'
 
 type BaseOption = {
   id: string