chore(pack): optimize dependencies, reduce bundle size

frontend/src/views/creators/ActualBanner.vue

@@ -1,50 +1,37 @@
 <template>
   <div class="relative">
     <!-- Banner Container with mouse events -->
-    <div
-        class="relative rounded-b-2xl overflow-y-auto"
-        @mouseenter="showTint = isCurrentCreator"
-        @mouseleave="showTint = false"
-        @click="isCurrentCreator && openBannerEditor()"
-    >
-      <img
-          class="w-full aspect-[4/1] banner object-cover"
-          :src="brandingStore.value?.bannerUrl ?? '/images/placeholders/banner.png'"
-          :alt="t('alt')"
-      >
+    <div class="relative overflow-y-auto rounded-b-2xl" @mouseenter="showTint = isCurrentCreator"
+      @mouseleave="showTint = false" @click="isCurrentCreator && openBannerEditor()">
+      <img class="banner aspect-[4/1] w-full object-cover"
+        :src="brandingStore.value?.bannerUrl ?? '/images/placeholders/banner.png'" :alt="t('alt')">
       <!-- Tint Effect -->
-      <div
-          v-if="showTint"
-          class="absolute inset-0 bg-black/25 cursor-pointer"
-      >
+      <div v-if="showTint" class="absolute inset-0 cursor-pointer bg-black/25">
         <!-- Top-right Icon -->
         <div
-            class="absolute top-4 right-4 w-12 h-12 bg-hutopyPrimary rounded-full flex items-center justify-center shadow-lg"
-        >
-          <v-icon large>mdi-pencil</v-icon>
+          class="absolute right-4 top-4 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg">
+          <v-icon large :icon="mdiPencil" />
         </div>
       </div>
     </div>
   </div>
 
   <v-dialog v-model="isDialogOpen" max-width="800px">
-      <BannerEditor
-          :creator="brandingStore.value"
-          @closeRequested="() => isDialogOpen = false"
-      />
+    <BannerEditor :creator="brandingStore.value" @closeRequested="() => isDialogOpen = false" />
   </v-dialog>
 </template>
 
 <script setup>
 import BannerEditor from "@/views/creators/BannerEditor.vue";
-import {computed, ref} from "vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
-import {useAuthStore} from "@/stores/authStore.js";
-import {useI18n} from 'vue-i18n';
+import { computed, ref } from "vue";
+import { useBrandingStore } from "@/stores/brandingStore.js";
+import { useAuthStore } from "@/stores/authStore.js";
+import { useI18n } from 'vue-i18n';
+import { mdiPencil } from '@mdi/js';
 
 const authStore = useAuthStore();
 const brandingStore = useBrandingStore();
-const {t} = useI18n();
+const { t } = useI18n();
 
 // State
 const showTint = ref(false);
@@ -60,8 +47,7 @@ const isCurrentCreator = computed(() => {
 });
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
 
 <i18n>
 {
@@ -75,4 +61,4 @@ const isCurrentCreator = computed(() => {
     "alt": "Banner del creador"
   }
 }
-</i18n>
+</i18n>