fix: dragging disable hover, wrong evt for edit skin + remove back of skin hover

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -148,7 +148,6 @@ import { arrayBufferToBase64 } from '@modrinth/utils'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
 import {
-	add_and_equip_custom_skin,
 	type Cape,
 	determineModelType,
 	equip_skin,
@@ -440,9 +439,22 @@ async function save() {
 		const bytes: Uint8Array = new Uint8Array(await (await fetch(textureUrl)).arrayBuffer())
 
 		if (mode.value === 'new') {
-			const addedSkin = await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
+			const addedSkin = await save_custom_skin(
+				{
+					texture_key: '',
+					variant: variant.value,
+					cape_id: selectedCape.value?.id,
+					texture: textureUrl,
+					source: 'custom',
+					is_equipped: false,
+				},
+				bytes,
+				variant.value,
+				selectedCape.value,
+				true,
+			)
 			emit('saved', {
-				applied: true,
+				applied: false,
 				skin: addedSkin,
 			})
 		} else {

apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue

@@ -159,6 +159,9 @@ const sections = computed<SkinSection[]>(() => [
 const draggableSavedSkins = ref<Skin[]>([])
 const isDraggingSavedSkin = ref(false)
 const canReorderSavedSkins = computed(() => draggableSavedSkins.value.length > 1)
+const fixedSavedSkins = computed(() =>
+	props.savedSkins.filter((skin) => !canPersistSkinOrder(skin)),
+)
 
 const sectionLayouts = computed(() => {
 	const layouts: Array<{ section: SkinSection; top: number; height: number; index: number }> = []
@@ -223,7 +226,7 @@ watch(
 			return
 		}
 
-		draggableSavedSkins.value = [...nextSkins]
+		draggableSavedSkins.value = nextSkins.filter(canPersistSkinOrder)
 	},
 	{ immediate: true },
 )
@@ -280,10 +283,18 @@ function savedSkinKey(skin: Skin) {
 	return skinKey(skin, 'saved-skin')
 }
 
+function canPersistSkinOrder(skin: Skin) {
+	return skin.source === 'custom'
+}
+
 function doSkinOrdersMatch(firstSkins: Skin[], secondSkins: Skin[]) {
+	const persistedSecondSkins = secondSkins.filter(canPersistSkinOrder)
+
 	return (
-		firstSkins.length === secondSkins.length &&
-		firstSkins.every((skin, index) => savedSkinKey(skin) === savedSkinKey(secondSkins[index]))
+		firstSkins.length === persistedSecondSkins.length &&
+		firstSkins.every(
+			(skin, index) => savedSkinKey(skin) === savedSkinKey(persistedSecondSkins[index]),
+		)
 	)
 }
 
@@ -295,7 +306,7 @@ function onSavedSkinDragEnd() {
 	isDraggingSavedSkin.value = false
 
 	if (doSkinOrdersMatch(draggableSavedSkins.value, props.savedSkins)) {
-		draggableSavedSkins.value = [...props.savedSkins]
+		draggableSavedSkins.value = props.savedSkins.filter(canPersistSkinOrder)
 		return
 	}
 
@@ -404,7 +415,7 @@ defineExpose({ getAddSkinButtonElement })
 					:list="draggableSavedSkins"
 					class="grid w-full grid-cols-3 gap-3 min-[1300px]:grid-cols-4 min-[1750px]:grid-cols-5 min-[2050px]:grid-cols-6"
 					:item-key="savedSkinKey"
-					:disabled="!canReorderSavedSkins"
+					:disabled="readOnly || !canReorderSavedSkins"
 					:animation="250"
 					:swap-threshold="1"
 					:invert-swap="false"
@@ -447,10 +458,50 @@ defineExpose({ getAddSkinButtonElement })
 							<SkinButton
 								class="h-full w-full min-w-0 box-border rounded-[20px]"
 								:forward-image-src="getBakedSkinTextures(skin)?.forwards"
-								:backward-image-src="getBakedSkinTextures(skin)?.backwards"
 								:selected="isSkinSelected(skin)"
 								:active="isSkinActive(skin)"
 								:disabled="readOnly"
+								:is-dragging="isDraggingSavedSkin"
+								@select="emit('select', skin)"
+							>
+								<template v-if="!readOnly" #overlay-buttons>
+									<ButtonStyled color="brand">
+										<button
+											:aria-label="formatMessage(messages.editSkinButton)"
+											class="pointer-events-auto"
+											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+										>
+											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+										</button>
+									</ButtonStyled>
+									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
+										<button
+											v-tooltip="formatMessage(messages.deleteSkinButton)"
+											:aria-label="formatMessage(messages.deleteSkinButton)"
+											class="!rounded-[100%] pointer-events-auto"
+											@click.stop="emit('delete', skin)"
+										>
+											<TrashIcon />
+										</button>
+									</ButtonStyled>
+								</template>
+							</SkinButton>
+						</div>
+					</template>
+
+					<template #footer>
+						<div
+							v-for="skin in fixedSavedSkins"
+							:key="savedSkinKey(skin)"
+							class="relative aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
+						>
+							<SkinButton
+								class="h-full w-full min-w-0 box-border rounded-[20px]"
+								:forward-image-src="getBakedSkinTextures(skin)?.forwards"
+								:selected="isSkinSelected(skin)"
+								:active="isSkinActive(skin)"
+								:disabled="readOnly"
+								:is-dragging="isDraggingSavedSkin"
 								@select="emit('select', skin)"
 							>
 								<template v-if="!readOnly" #overlay-buttons>
@@ -488,11 +539,11 @@ defineExpose({ getAddSkinButtonElement })
 						:key="skinKey(skin, section.key)"
 						class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
 						:forward-image-src="getBakedSkinTextures(skin)?.forwards"
-						:backward-image-src="getBakedSkinTextures(skin)?.backwards"
 						:selected="isSkinSelected(skin)"
 						:active="isSkinActive(skin)"
 						:tooltip="skin.name"
 						:disabled="readOnly"
+						:is-dragging="isDraggingSavedSkin"
 						@select="emit('select', skin)"
 					>
 						<template #overlay-buttons>

apps/app-frontend/src/helpers/rendering/batch-skin-renderer.ts

@@ -15,12 +15,10 @@ import { skinPreviewStorage } from '../storage/skin-preview-storage'
 
 export interface RenderResult {
 	forwards: string
-	backwards: string
 }
 
 export interface RawRenderResult {
 	forwards: Blob
-	backwards: Blob
 }
 
 class BatchSkinRenderer {
@@ -92,12 +90,9 @@ class BatchSkinRenderer {
 		}
 
 		const frontCameraPos: [number, number, number] = [-1.3, 1, 6.3]
-		const backCameraPos: [number, number, number] = [-1.3, 1, -2.5]
-
 		const forwards = await this.renderView(frontCameraPos, lookAtTarget)
-		const backwards = await this.renderView(backCameraPos, lookAtTarget)
 
-		return { forwards, backwards }
+		return { forwards }
 	}
 
 	private async renderView(
@@ -407,7 +402,6 @@ async function generateSkinPreviewsForGeneration(
 			if (rawCached && !skinBlobUrlMap.has(skinKey)) {
 				const cached: RenderResult = {
 					forwards: URL.createObjectURL(rawCached.forwards),
-					backwards: URL.createObjectURL(rawCached.backwards),
 				}
 				skinBlobUrlMap.set(skinKey, cached)
 			}
@@ -427,7 +421,6 @@ async function generateSkinPreviewsForGeneration(
 				if (DEBUG_MODE) {
 					const result = skinBlobUrlMap.get(key)!
 					URL.revokeObjectURL(result.forwards)
-					URL.revokeObjectURL(result.backwards)
 					skinBlobUrlMap.delete(key)
 				} else continue
 			}
@@ -456,7 +449,6 @@ async function generateSkinPreviewsForGeneration(
 
 			const renderResult: RenderResult = {
 				forwards: URL.createObjectURL(rawRenderResult.forwards),
-				backwards: URL.createObjectURL(rawRenderResult.backwards),
 			}
 
 			skinBlobUrlMap.set(key, renderResult)

apps/app-frontend/src/helpers/storage/skin-preview-storage.ts

@@ -2,7 +2,6 @@ import type { RawRenderResult } from '../rendering/batch-skin-renderer'
 
 interface StoredPreview {
 	forwards: Blob
-	backwards: Blob
 	timestamp: number
 }
 
@@ -38,7 +37,6 @@ export class SkinPreviewStorage {
 
 		const storedPreview: StoredPreview = {
 			forwards: result.forwards,
-			backwards: result.backwards,
 			timestamp: Date.now(),
 		}
 
@@ -67,7 +65,7 @@ export class SkinPreviewStorage {
 					return
 				}
 
-				resolve({ forwards: result.forwards, backwards: result.backwards })
+				resolve({ forwards: result.forwards })
 			}
 			request.onerror = () => reject(request.error)
 		})
@@ -95,7 +93,7 @@ export class SkinPreviewStorage {
 					const result = request.result as StoredPreview | undefined
 
 					if (result) {
-						results[key] = { forwards: result.forwards, backwards: result.backwards }
+						results[key] = { forwards: result.forwards }
 					} else {
 						results[key] = null
 					}
@@ -173,7 +171,7 @@ export class SkinPreviewStorage {
 					const key = cursor.primaryKey as string
 					const value = cursor.value as StoredPreview
 
-					const entrySize = value.forwards.size + value.backwards.size
+					const entrySize = value.forwards.size
 					totalSize += entrySize
 					count++
 

apps/app-frontend/src/pages/Skins.vue

@@ -584,7 +584,9 @@ async function reorderSavedSkins(orderedSkins: Skin[]) {
 	generateSkinPreviews(skins.value, capes.value)
 
 	try {
-		await set_custom_skin_order(nextSavedSkins.map((skin) => skin.texture_key))
+		await set_custom_skin_order(
+			nextSavedSkins.filter((skin) => skin.source === 'custom').map((skin) => skin.texture_key),
+		)
 	} catch (error) {
 		skins.value = previousSkins
 		generateSkinPreviews(skins.value, capes.value)

packages/app-lib/src/api/minecraft_skins.rs

@@ -66,8 +66,7 @@ use crate::{
     state::{
         MinecraftCharacterExpressionState, MinecraftProfile,
         minecraft_skins::{
-            CustomMinecraftSkin, CustomMinecraftSkinInsertPosition,
-            mojang_api,
+            CustomMinecraftSkin, CustomMinecraftSkinInsertPosition, mojang_api,
         },
     },
 };
@@ -610,20 +609,21 @@ async fn add_and_equip_custom_skin_now(
     let equipped_skin = profile.current_skin()?;
     let equipped_skin_texture_key = equipped_skin.texture_key();
     let equipped_skin_variant = equipped_skin.variant;
-    let insert_position =
-        if local_texture_key != equipped_skin_texture_key.as_ref() {
-            CustomMinecraftSkin::get_by_texture(
-                profile.id,
-                local_texture_key,
-                &state.pool,
-            )
-            .await?
-            .map_or(CustomMinecraftSkinInsertPosition::Top, |skin| {
-                CustomMinecraftSkinInsertPosition::At(skin.display_order)
-            })
-        } else {
-            CustomMinecraftSkinInsertPosition::Top
-        };
+    let insert_position = if local_texture_key
+        != equipped_skin_texture_key.as_ref()
+    {
+        CustomMinecraftSkin::get_by_texture(
+            profile.id,
+            local_texture_key,
+            &state.pool,
+        )
+        .await?
+        .map_or(CustomMinecraftSkinInsertPosition::Top, |skin| {
+            CustomMinecraftSkinInsertPosition::At(skin.display_order)
+        })
+    } else {
+        CustomMinecraftSkinInsertPosition::Top
+    };
 
     let persistence_result = if cape_id.is_none()
         && is_bundled_skin(&equipped_skin_texture_key, equipped_skin_variant)
@@ -762,6 +762,22 @@ async fn persist_equipped_skin(
     let equipped_skin_variant = equipped_skin.variant;
     let texture_key_changed =
         skin.texture_key.as_ref() != equipped_skin_texture_key.as_ref();
+    let insert_position = if texture_key_changed {
+        CustomMinecraftSkin::get_by_texture(
+            profile.id,
+            &skin.texture_key,
+            &state.pool,
+        )
+        .await?
+        .map_or(
+            CustomMinecraftSkinInsertPosition::Bottom,
+            |saved_skin| {
+                CustomMinecraftSkinInsertPosition::At(saved_skin.display_order)
+            },
+        )
+    } else {
+        CustomMinecraftSkinInsertPosition::Bottom
+    };
 
     if skin.cape_id.is_none()
         && is_bundled_skin(&equipped_skin_texture_key, equipped_skin_variant)
@@ -782,7 +798,7 @@ async fn persist_equipped_skin(
             texture_blob,
             equipped_skin_variant,
             skin.cape_id,
-            CustomMinecraftSkinInsertPosition::Bottom,
+            insert_position,
             &state.pool,
         )
         .await?;

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

@@ -9,28 +9,27 @@ const emit = defineEmits<{
 const props = withDefaults(
 	defineProps<{
 		forwardImageSrc?: string
-		backwardImageSrc?: string
 		selected: boolean
 		active?: boolean
 		tooltip?: string
 		disabled?: boolean
+		isDragging?: boolean
 	}>(),
 	{
 		forwardImageSrc: undefined,
-		backwardImageSrc: undefined,
 		active: false,
 		tooltip: undefined,
 		disabled: false,
+		isDragging: false,
 	},
 )
 
 const imagesLoaded = ref({
 	forward: false,
-	backward: false,
 })
 
-function onImageLoad(type: 'forward' | 'backward') {
-	imagesLoaded.value[type] = true
+function onImageLoad() {
+	imagesLoaded.value.forward = true
 }
 
 watch(
@@ -39,13 +38,6 @@ watch(
 		imagesLoaded.value.forward = false
 	},
 )
-
-watch(
-	() => props.backwardImageSrc,
-	() => {
-		imagesLoaded.value.backward = false
-	},
-)
 </script>
 
 <template>
@@ -58,6 +50,7 @@ watch(
 			{
 				'skin-button--with-actions': $slots['overlay-buttons'] && !disabled,
 				'skin-button--disabled': disabled,
+				'skin-button--dragging': isDragging,
 			},
 		]"
 	>
@@ -81,15 +74,12 @@ watch(
 			class="pointer-events-none absolute right-3 top-3 z-20 size-3 rounded-full border-2 border-solid border-surface-3 bg-green"
 		></span>
 
-		<div
-			v-if="!(imagesLoaded.forward && imagesLoaded.backward)"
-			class="skeleton-loader h-full w-full"
-		>
+		<div v-if="!imagesLoaded.forward" class="skeleton-loader h-full w-full">
 			<div class="skeleton absolute inset-0 aspect-[5/7]"></div>
 		</div>
 
 		<span
-			v-show="imagesLoaded.forward && imagesLoaded.backward"
+			v-show="imagesLoaded.forward"
 			:key="`${selected}-${active}`"
 			:class="[
 				'skin-button__image-parent pointer-events-none relative z-0 mb-[1.5px] grid place-items-stretch with-shadow',
@@ -100,14 +90,7 @@ watch(
 				:src="forwardImageSrc"
 				class="skin-button__image-facing col-start-1 row-start-1 h-full w-full object-contain"
 				height="504"
-				@load="onImageLoad('forward')"
-			/>
-			<img
-				alt=""
-				:src="backwardImageSrc"
-				class="skin-button__image-away col-start-1 row-start-1 h-full w-full object-contain"
-				height="504"
-				@load="onImageLoad('backward')"
+				@load="onImageLoad"
 			/>
 		</span>
 
@@ -202,30 +185,17 @@ watch(
 	cursor: not-allowed;
 }
 
+.skin-button--dragging {
+	pointer-events: none;
+}
+
 .skin-button__image-parent {
 	width: 100%;
 	height: 95%;
-	transform: rotateY(0deg) translateZ(0);
-	transform-style: preserve-3d;
-	transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
-	will-change: transform;
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
 }
 
-.skin-button:not(.skin-button--disabled):hover .skin-button__image-parent {
-	transform: rotateY(180deg) translateZ(0);
-}
-
-.skin-button__image-facing,
-.skin-button__image-away {
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	transform: translateZ(0.1px);
-}
-
-.skin-button__image-away {
-	transform: rotateY(180deg) translateZ(0.1px);
+.skin-button__image-facing {
+	transform: translateZ(0);
 }
 
 .with-shadow img {

packages/ui/src/stories/skin/SkinButton.stories.ts

@@ -21,25 +21,11 @@ const frontImage = `data:image/svg+xml,${encodeURIComponent(`
 </svg>
 )}`)}`
 
-const backImage = `data:image/svg+xml,${encodeURIComponent(`
-<svg width="114" height="176" viewBox="0 0 114 176" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<rect x="36" y="10" width="42" height="46" fill="#5A3828"/>
-	<rect x="28" y="57" width="58" height="60" fill="#1E7FAC"/>
-	<rect x="18" y="63" width="18" height="54" fill="#2693C7"/>
-	<rect x="78" y="63" width="18" height="54" fill="#19759E"/>
-	<rect x="22" y="117" width="14" height="43" fill="#A96A4D"/>
-	<rect x="78" y="117" width="14" height="43" fill="#A96A4D"/>
-	<rect x="36" y="117" width="18" height="55" fill="#1D334F"/>
-	<rect x="60" y="117" width="18" height="55" fill="#162B45"/>
-</svg>
-)}`)}`
-
 const meta = {
 	title: 'Skin/SkinButton',
 	component: SkinButton,
 	args: {
 		forwardImageSrc: frontImage,
-		backwardImageSrc: backImage,
 		selected: false,
 		active: false,
 		tooltip: 'Steve',