feat: drag and drop skins to reorder

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

@@ -13,12 +13,14 @@ const props = withDefaults(
 		selected: boolean
 		active?: boolean
 		tooltip?: string
+		selectable?: boolean
 	}>(),
 	{
 		forwardImageSrc: undefined,
 		backwardImageSrc: undefined,
 		active: false,
 		tooltip: undefined,
+		selectable: true,
 	},
 )
 
@@ -55,7 +57,15 @@ watch(
 			{ 'skin-button--with-actions': $slots['overlay-buttons'] },
 		]"
 	>
+		<span
+			v-if="$slots['top-buttons']"
+			class="pointer-events-none absolute right-3 top-3 z-30 flex items-center gap-1"
+		>
+			<slot name="top-buttons" />
+		</span>
+
 		<button
+			v-if="selectable"
 			class="absolute inset-0 z-10 cursor-pointer border-none bg-transparent p-0 focus-visible:outline-none"
 			:aria-label="tooltip ? `Select ${tooltip}` : 'Select skin'"
 			:aria-pressed="selected"
@@ -63,7 +73,7 @@ watch(
 		></button>
 
 		<span
-			v-if="active && !selected"
+			v-if="active && !selected && !$slots['top-buttons']"
 			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>