Removed comment, updated types for sprite actions, minor modal component improvement, added components for better sprite management

src/components/utilities/Modal.vue

@@ -17,7 +17,7 @@
           <button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out">
             <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
-          <button v-if="closable" @click="isModalOpenRef = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+          <button v-if="closable" @click="closeModal" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
             <img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" draggable="false" />
           </button>
         </div>
@@ -81,7 +81,6 @@ const props = withDefaults(defineProps<ModalProps>(), {
 const emit = defineEmits<{
   'modal:open': []
   'modal:close': []
-  'character:create': []
 }>()
 
 defineExpose({
@@ -157,6 +156,11 @@ function drag(event: MouseEvent) {
   y.value = dragState.initialY + (event.clientY - dragState.startY)
 }
 
+function closeModal() {
+  isModalOpenRef.value = false
+  emit('modal:close')
+}
+
 function toggleFullScreen() {
   if (isFullScreen.value) {
     Object.assign({ x, y, width, height }, preFullScreenState)