chore(pack): optimize dependencies, reduce bundle size

frontend/src/views/creators/NameEditor.vue

@@ -1,9 +1,10 @@
 <script setup>
-import {ref, onMounted, onUnmounted, computed} from "vue";
-import {v7} from "uuid";
-import {useClient} from "@/plugins/api.js";
-import {useI18n} from 'vue-i18n';
+import { ref, onMounted, onUnmounted, computed } from "vue";
+import { v7 } from "uuid";
+import { useClient } from "@/plugins/api.js";
+import { useI18n } from 'vue-i18n';
 import config from '@/config';
+import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js';
 
 const props = defineProps({
   name: {
@@ -24,7 +25,7 @@ const emits = defineEmits([
 ]);
 
 const name = ref(props.name);
-const {t} = useI18n();
+const { t } = useI18n();
 
 const isOperationPending = ref(false);
 const reservationState = ref(null);
@@ -129,9 +130,9 @@ const checkNameAvailability = async (nameToCheck) => {
     currentController = controller;
 
     await client.post(
-        `/api/creators/@${encodeURIComponent(nameToCheck)}/reserve`,
-        {reservationId: reservationId.value},
-        {signal: controller.signal}
+      `/api/creators/@${encodeURIComponent(nameToCheck)}/reserve`,
+      { reservationId: reservationId.value },
+      { signal: controller.signal }
     );
 
     // Only process the response if this is still the current request
@@ -162,35 +163,23 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <v-text-field
-      variant="outlined"
-      :label="t('creator.name.label')"
-      v-model="name"
-      @input="handleInput"
-      :error-messages="validationError"
-  >
+  <v-text-field variant="outlined" :label="t('creator.name.label')" v-model="name" @input="handleInput"
+    :error-messages="validationError">
     <template #prepend-inner>
-      <span class="text-gray-400 font-sans">{{ baseUrl }}</span>
+      <span class="font-sans text-gray-400">{{ baseUrl }}</span>
     </template>
 
     <template #append-inner>
-      <v-progress-circular
-          v-if="reservationState === 'loading'"
-          indeterminate
-          size="24"
-          width="3"
-          color="grey"
-      ></v-progress-circular>
+      <v-progress-circular v-if="reservationState === 'loading'" indeterminate size="24" width="3"
+        color="grey"></v-progress-circular>
 
-      <v-icon v-else-if="reservationState === 'reserved'" color="green">mdi-check-circle</v-icon>
-      <v-icon v-else-if="reservationState === 'unavailable'" color="red">mdi-close-circle</v-icon>
+      <v-icon v-else-if="reservationState === 'reserved'" color="green" :icon="mdiCheckCircle" />
+      <v-icon v-else-if="reservationState === 'unavailable'" color="red" :icon="mdiCloseCircle" />
     </template>
   </v-text-field>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
 
 <i18n>
 {
@@ -228,4 +217,4 @@ onUnmounted(() => {
     }
   }
 }
-</i18n>
+</i18n>