fix: lint issues

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

@@ -66,13 +66,13 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
 
 <style lang="scss" scoped>
 @property --_top-fade-height {
-  syntax: "<length-percentage>";
+  syntax: '<length-percentage>';
   inherits: false;
   initial-value: 0%;
 }
 
 @property --_bottom-fade-height {
-  syntax: "<length-percentage>";
+  syntax: '<length-percentage>';
   inherits: false;
   initial-value: 0%;
 }
@@ -88,15 +88,17 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   display: flex;
   overflow: hidden;
   position: relative;
-  transition: --_top-fade-height 0.05s linear, --_bottom-fade-height 0.05s linear;
+  transition:
+    --_top-fade-height 0.05s linear,
+    --_bottom-fade-height 0.05s linear;
 
   --_fade-height: 3rem;
 
   mask-image: linear-gradient(
-      transparent,
-      rgb(0 0 0 / 100%) var(--_top-fade-height, 0%),
-      rgb(0 0 0 / 100%) calc(100% - var(--_bottom-fade-height, 0%)),
-      transparent 100%
+    transparent,
+    rgb(0 0 0 / 100%) var(--_top-fade-height, 0%),
+    rgb(0 0 0 / 100%) calc(100% - var(--_bottom-fade-height, 0%)),
+    transparent 100%
   );
 
   &.top-fade {

packages/ui/src/components/index.ts

@@ -100,11 +100,11 @@ export { default as AddPaymentMethodModal } from './billing/AddPaymentMethodModa
 export { default as ModrinthServersPurchaseModal } from './billing/ModrinthServersPurchaseModal.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'
+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'
 
 // Version
 export { default as VersionChannelIndicator } from './version/VersionChannelIndicator.vue'

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

@@ -19,13 +19,18 @@ const props = withDefaults(
   },
 )
 
-console.log(props);
+console.log(props)
 
 const highlighted = computed(() => props.selected ?? props.isEquipped)
 </script>
 
 <template>
-  <button v-tooltip="name" class="block border-0 m-0 p-0 bg-transparent group cursor-pointer" :aria-label="name" @click="emit('select')">
+  <button
+    v-tooltip="name"
+    class="block border-0 m-0 p-0 bg-transparent group cursor-pointer"
+    :aria-label="name"
+    @click="emit('select')"
+  >
     <span
       :class="
         highlighted

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

@@ -26,7 +26,7 @@ withDefaults(
         'block rounded-lg group-active:scale-95 transition-all border-2 relative',
         highlighted
           ? 'border-brand highlighted-glow'
-          : 'border-transparent opacity-75 group-hover:opacity-100'
+          : 'border-transparent opacity-75 group-hover:opacity-100',
       ]"
     >
       <span class="block p-[3px] rounded-lg bg-button-bg">

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

@@ -6,20 +6,23 @@ const emit = defineEmits<{
   (e: 'edit', event: MouseEvent): void
 }>()
 
-const props = withDefaults(defineProps<{
-  forwardImageSrc?: string
-  backwardImageSrc?: string
-  selected: boolean
-  tooltip?: string
-}>(), {
-  forwardImageSrc: undefined,
-  backwardImageSrc: undefined,
-  tooltip: undefined,
-})
+const props = withDefaults(
+  defineProps<{
+    forwardImageSrc?: string
+    backwardImageSrc?: string
+    selected: boolean
+    tooltip?: string
+  }>(),
+  {
+    forwardImageSrc: undefined,
+    backwardImageSrc: undefined,
+    tooltip: undefined,
+  },
+)
 
 const imagesLoaded = ref({
   forward: Boolean(props.forwardImageSrc),
-  backward: Boolean(props.backwardImageSrc)
+  backward: Boolean(props.backwardImageSrc),
 })
 
 function onImageLoad(type: 'forward' | 'backward') {
@@ -31,9 +34,7 @@ function onImageLoad(type: 'forward' | 'backward') {
   <div
     v-tooltip="tooltip ?? undefined"
     class="group flex relative overflow-hidden rounded-xl border-solid border-2 transition-colors duration-200"
-    :class="[
-      selected ? 'border-brand' : 'border-transparent hover:border-white/50'
-    ]"
+    :class="[selected ? 'border-brand' : 'border-transparent hover:border-white/50']"
   >
     <button
       class="skin-btn-bg absolute inset-0 cursor-pointer p-0 border-none group-hover:brightness-125"
@@ -41,13 +42,19 @@ function onImageLoad(type: 'forward' | 'backward') {
       @click="emit('select')"
     ></button>
 
-    <div v-if="!(imagesLoaded.forward && imagesLoaded.backward)" class="skeleton-loader w-full h-full">
+    <div
+      v-if="!(imagesLoaded.forward && imagesLoaded.backward)"
+      class="skeleton-loader w-full h-full"
+    >
       <div class="skeleton absolute inset-0 aspect-[5/7]"></div>
     </div>
 
     <span
       v-show="imagesLoaded.forward && imagesLoaded.backward"
-      :class="['skin-button__image-parent pointer-events-none w-full h-full grid [transform-style:preserve-3d] transition-transform duration-500 group-hover:[transform:rotateY(180deg)] place-items-stretch', selected ? 'with-shadow' : '']"
+      :class="[
+        'skin-button__image-parent pointer-events-none w-full h-full grid [transform-style:preserve-3d] transition-transform duration-500 group-hover:[transform:rotateY(180deg)] place-items-stretch',
+        selected ? 'with-shadow' : '',
+      ]"
     >
       <img
         alt=""
@@ -68,7 +75,7 @@ function onImageLoad(type: 'forward' | 'backward') {
     <span
       v-if="$slots['overlay-buttons']"
       class="absolute inset-0 flex items-end justify-start p-1 gap-1 translate-y-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
-      style="pointer-events: none;"
+      style="pointer-events: none"
     >
       <slot name="overlay-buttons" />
     </span>
@@ -104,7 +111,13 @@ function onImageLoad(type: 'forward' | 'backward') {
   background: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
 }
 .skin-btn-bg.selected {
-  background: linear-gradient(157.61deg, var(--color-brand) -76.68%, rgba(27, 217, 106, 0.534) -38.61%, rgba(12, 89, 44, 0.6) 100.4%), #27292F;
+  background: linear-gradient(
+      157.61deg,
+      var(--color-brand) -76.68%,
+      rgba(27, 217, 106, 0.534) -38.61%,
+      rgba(12, 89, 44, 0.6) 100.4%
+    ),
+    #27292f;
 }
 
 .skin-btn-bg.selected:hover,

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

@@ -14,7 +14,9 @@ const pressed = ref(false)
       @mouseup="pressed = false"
       @mouseleave="pressed = false"
     ></button>
-    <div class="relative w-full h-full flex flex-col items-center justify-center pointer-events-none">
+    <div
+      class="relative w-full h-full flex flex-col items-center justify-center pointer-events-none"
+    >
       <div class="mb-2">
         <slot name="icon"></slot>
       </div>
@@ -28,7 +30,9 @@ const pressed = ref(false)
 <style scoped lang="scss">
 .skin-like-text-bg {
   background: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
-  transition: filter 200ms ease-in-out, box-shadow 200ms ease-in-out;
+  transition:
+    filter 200ms ease-in-out,
+    box-shadow 200ms ease-in-out;
 }
 .skin-like-text-bg:hover {
   filter: brightness(var(--hover-brightness));

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

@@ -1,11 +1,16 @@
 <template>
   <div class="relative w-full h-full cursor-grab">
-    <div class="absolute bottom-[18%] left-0 right-0 flex justify-center items-center mb-2 pointer-events-none z-10">
+    <div
+      class="absolute bottom-[18%] left-0 right-0 flex justify-center items-center mb-2 pointer-events-none z-10"
+    >
       <span class="text-primary text-xs px-2 py-1 rounded-full backdrop-blur-sm">
         Drag to rotate
       </span>
     </div>
-    <div v-if="nametag" class="absolute top-[13%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md text-[200%] pointer-events-none z-10 font-minecraft text-primary nametag-bg">
+    <div
+      v-if="nametag"
+      class="absolute top-[13%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md text-[200%] pointer-events-none z-10 font-minecraft text-primary nametag-bg"
+    >
       {{ nametag }}
     </div>
 
@@ -13,18 +18,22 @@
       shadows
       alpha
       :antialias="antialias"
+      :renderer-options="{
+        outputColorSpace: THREE.SRGBColorSpace,
+        toneMapping: THREE.NoToneMapping,
+      }"
       @pointerdown="onPointerDown"
       @pointermove="onPointerMove"
       @pointerup="onPointerUp"
       @pointerleave="onPointerUp"
-      :rendererOptions="{
-        outputColorSpace: THREE.SRGBColorSpace,
-        toneMapping: THREE.NoToneMapping
-      }"
     >
       <Suspense>
         <Group>
-          <Group :rotation="[0, modelRotation, 0]" :position="[0, -0.05 * scale, 1.95]" :scale="[0.8 * scale, 0.8 * scale, 0.8 * scale]">
+          <Group
+            :rotation="[0, modelRotation, 0]"
+            :position="[0, -0.05 * scale, 1.95]"
+            :scale="[0.8 * scale, 0.8 * scale, 0.8 * scale]"
+          >
             <primitive v-if="scene" :object="scene" />
           </Group>
 
@@ -42,7 +51,11 @@
             />
           </TresMesh>
 
-          <TresMesh :position="[0, -0.1 * scale, 2]" :rotation="[-Math.PI / 2, 0, 0]" :scale="[0.75 * scale, 0.75 * scale, 0.75 * scale]">
+          <TresMesh
+            :position="[0, -0.1 * scale, 2]"
+            :rotation="[-Math.PI / 2, 0, 0]"
+            :scale="[0.75 * scale, 0.75 * scale, 0.75 * scale]"
+          >
             <TresPlaneGeometry :args="[2, 2]" />
             <TresMeshBasicMaterial
               :map="radialTexture"
@@ -55,7 +68,7 @@
       </Suspense>
 
       <TresPerspectiveCamera
-        :makeDefault="true"
+        :make-default="true"
         :fov="fov"
         :position="[0, 1.5, -3.25]"
         :look-at="target"
@@ -83,7 +96,7 @@ const props = withDefaults(
     nametag?: string
     antialias?: boolean
     scale?: number
-    fov?: number,
+    fov?: number
     initialRotation?: number
   }>(),
   {
@@ -94,11 +107,11 @@ const props = withDefaults(
     capeModelSrc: '',
     capeSrc: undefined,
     initialRotation: 15.75,
-  }
+  },
 )
 
 const selectedModelSrc = computed(() =>
-  props.variant === 'SLIM' ? props.slimModelSrc : props.wideModelSrc
+  props.variant === 'SLIM' ? props.slimModelSrc : props.wideModelSrc,
 )
 
 const scene = shallowRef<THREE.Object3D | null>(null)
@@ -135,7 +148,7 @@ async function loadModel(src: string) {
   }
 
   bodyNode.value = null
-  loadedScene.traverse(node => {
+  loadedScene.traverse((node) => {
     if (node.name === 'Body') {
       bodyNode.value = node
     }
@@ -218,11 +231,11 @@ function attachCapeToBody() {
 function applyTextureToScene(root: THREE.Object3D | null, tex: THREE.Texture | null) {
   if (!root || !tex) return
 
-  root.traverse(child => {
+  root.traverse((child) => {
     if ((child as THREE.Mesh).isMesh) {
       const mesh = child as THREE.Mesh
 
-      if (mesh.name === "Cape") return
+      if (mesh.name === 'Cape') return
 
       const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material]
 
@@ -242,7 +255,7 @@ function applyTextureToScene(root: THREE.Object3D | null, tex: THREE.Texture | n
 function applyCapeTexture(root: THREE.Object3D | null, tex: THREE.Texture | null) {
   if (!root) return
 
-  root.traverse(child => {
+  root.traverse((child) => {
     if ((child as THREE.Mesh).isMesh) {
       const mesh = child as THREE.Mesh
 
@@ -282,7 +295,7 @@ const isDragging = ref(false)
 const previousX = ref(0)
 
 const onPointerDown = (event: PointerEvent) => {
-  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+  ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
   isDragging.value = true
   previousX.value = event.clientX
 }
@@ -295,8 +308,8 @@ const onPointerMove = (event: PointerEvent) => {
 }
 
 const onPointerUp = (event: PointerEvent) => {
-  isDragging.value = false;
-  (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId)
+  isDragging.value = false
+  ;(event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId)
 }
 
 const radialTexture = createRadialTexture(512)
@@ -316,17 +329,26 @@ function createRadialTexture(size: number): THREE.CanvasTexture {
   return new THREE.CanvasTexture(canvas)
 }
 
-watch(selectedModelSrc, src => loadModel(src))
-watch(() => props.capeModelSrc, src => src && loadCape(src))
-watch(() => props.textureSrc, async newSrc => {
-  texture.value = await loadAndApplyTexture(newSrc)
-  if (scene.value && texture.value) {
-    applyTextureToScene(scene.value, texture.value)
-  }
-})
-watch(() => props.capeSrc, async newCapeSrc => {
-  await loadAndApplyCapeTexture(newCapeSrc)
-})
+watch(selectedModelSrc, (src) => loadModel(src))
+watch(
+  () => props.capeModelSrc,
+  (src) => src && loadCape(src),
+)
+watch(
+  () => props.textureSrc,
+  async (newSrc) => {
+    texture.value = await loadAndApplyTexture(newSrc)
+    if (scene.value && texture.value) {
+      applyTextureToScene(scene.value, texture.value)
+    }
+  },
+)
+watch(
+  () => props.capeSrc,
+  async (newCapeSrc) => {
+    await loadAndApplyCapeTexture(newCapeSrc)
+  },
+)
 
 onBeforeMount(async () => {
   texture.value = await loadAndApplyTexture(props.textureSrc)
@@ -345,7 +367,10 @@ onBeforeMount(async () => {
 
 <style scoped lang="scss">
 .nametag-bg {
-  background: linear-gradient(308.68deg, rgba(0, 0, 0, 0) -52.46%, rgba(100, 100, 100, 0.1) 94.75%), rgba(0, 0, 0, 0.2);
-  box-shadow: inset -0.5px -0.5px 0px rgba(0, 0, 0, 0.25), inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.05);
+  background: linear-gradient(308.68deg, rgba(0, 0, 0, 0) -52.46%, rgba(100, 100, 100, 0.1) 94.75%),
+    rgba(0, 0, 0, 0.2);
+  box-shadow:
+    inset -0.5px -0.5px 0px rgba(0, 0, 0, 0.25),
+    inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.05);
 }
 </style>