feat: finish cape modal

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

@@ -2,13 +2,13 @@
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { useTemplateRef, ref, computed } from 'vue'
 import type { Cape } from '@/helpers/skins.ts'
-import { ButtonStyled, ScrollablePanel, CapeButton } from '@modrinth/ui'
+import {ButtonStyled, ScrollablePanel, CapeButton, CapeLikeTextButton} from '@modrinth/ui'
 import { CheckIcon, XIcon} from '@modrinth/assets'
 
 const modal = useTemplateRef('modal')
 
 const emit = defineEmits<{
-  (e: 'select', cape: string | undefined): void
+  (e: 'select', cape: Cape | undefined): void
 }>()
 
 const props = defineProps<{
@@ -49,7 +49,7 @@ function show(e: MouseEvent, skin?: string, selected?: Cape) {
 }
 
 function select() {
-  emit('select', currentCape.value?.id)
+  emit('select', currentCape.value)
   hide()
 }
 
@@ -67,14 +67,20 @@ defineExpose({
     <template #title>
       <span class="text-lg font-extrabold text-contrast">Selecting a cape</span>
     </template>
-    <div class="grid grid-cols-[auto_1fr] gap-6">
+    <div class="grid grid-cols-[auto_1fr] gap-6 mb-5">
       <div class="flex">
         <img :src="previewSkin" alt="" class="w-auto my-auto h-60 object-contain" />
       </div>
       <div>
-        <ScrollablePanel class="h-[20rem] w-[30rem]">
-          <div class="grid grid-cols-6 gap-2 items-start w-full">
-            <CapeButton v-for="cape in capes" :key="cape.id" :name="cape.name" :texture="cape.texture" :selected="currentCape?.id === cape.id" @select="currentCape = cape" />
+        <ScrollablePanel class="max-h-[20rem] max-w-[30rem] mb-5 h-full">
+          <div class="flex flex-wrap gap-2 justify-center content-start overflow-y-auto h-full">
+            <CapeLikeTextButton tooltip="No Cape" :highlighted="!currentCape" @click="currentCape = undefined">
+              <template #icon>
+                <XIcon />
+              </template>
+              <span>No Cape</span>
+            </CapeLikeTextButton>
+            <CapeButton v-for="cape in capes" :key="cape.id" :name="cape.name" :texture="cape.texture" :id="cape.id" :selected="currentCape?.id === cape.id" @select="currentCape = cape" />
           </div>
         </ScrollablePanel>
       </div>

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

@@ -10,7 +10,7 @@ import {
   get_available_skins,
   get_available_capes,
   filterSavedSkins,
-  filterDefaultSkins, equip_skin, remove_custom_skin,
+  filterDefaultSkins, equip_skin, remove_custom_skin, set_default_cape,
 } from '@/helpers/skins.ts'
 import { get as getSettings } from '@/helpers/settings.ts'
 import { get as getCreds } from '@/helpers/mr_auth'
@@ -85,6 +85,11 @@ async function handleSkinDeleted(deletedSkin: Skin) {
       null
   }
 }
+
+async function handleCapeSelected(cape: Cape | undefined) {
+  currentCape.value = cape;
+  await set_default_cape(currentCape.value).catch(handleError);
+}
 </script>
 
 <template>
@@ -94,7 +99,7 @@ async function handleSkinDeleted(deletedSkin: Skin) {
     @saved="handleSkinSaved"
     @deleted="handleSkinDeleted"
   />
-  <SelectCapeModal ref="selectCapeModal" :capes="capes"/>
+  <SelectCapeModal ref="selectCapeModal" :capes="capes" @select="handleCapeSelected"/>
   <div class="p-6 grid grid-cols-[300px_1fr] xl:grid-cols-[3fr_5fr] gap-6">
     <div class="sticky top-6 self-start">
       <div class="flex justify-between gap-4">

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

@@ -3,7 +3,7 @@ const emit = defineEmits<{
   (e: 'click'): void
 }>()
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     tooltip: string
     highlighted?: boolean
@@ -37,7 +37,7 @@ const props = withDefaults(
           <slot name="icon"></slot>
         </div>
 
-        <span class="text-xs text-white/80 group-hover:text-white">
+        <span class="text-xs group-hover:text-white" :class="{ 'text-white': highlighted }">
           <slot name="default"></slot>
         </span>
       </span>