perf: optimize app

Author: mtdvlpr

.husky/commit-msg

@@ -0,0 +1 @@
+pnpm lint:commit $1

.husky/install.mjs

@@ -0,0 +1,6 @@
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+  process.exit(0)
+}
+const husky = (await import('husky')).default
+console.log(husky())

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

app/components/AvatarModal.vue

@@ -17,7 +17,6 @@
           icon="i-lucide-image"
           :src="current ?? undefined"
           class="w-28 h-28 md:w-32 md:h-32"
-          :class="{ ' pointer-events-none': !edit }"
         />
         <LazyUAvatar
           v-if="state.url && state.url !== current"
@@ -26,7 +25,6 @@
           :src="state.url"
           icon="i-lucide-image"
           class="w-28 h-28 md:w-32 md:h-32"
-          :class="{ ' pointer-events-none': !edit }"
         />
       </div>
       <UForm :state="state" :schema="schema" class="space-y-4" @submit="onSubmit">
@@ -41,7 +39,7 @@
             placeholder="https://example.com/avatar.jpg"
           >
             <template v-if="state.url?.length" #trailing>
-              <UButton
+              <LazyUButton
                 size="sm"
                 variant="link"
                 color="neutral"

app/components/DataTable.vue

@@ -88,7 +88,6 @@ import {
   type PaginationState,
   type VisibilityState
 } from '@tanstack/vue-table'
-import { upperFirst } from 'scule'
 
 defineProps<{
   columns: TableColumn<T>[]
@@ -105,7 +104,7 @@ const table = useTemplateRef('table')
 const columnVisibility = ref<undefined | VisibilityState>()
 const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 10 })
 
-const formatTableId = (id: string) => upperFirst(id.replaceAll('_', ' '))
+const formatTableId = (id: string) => capitalize(id.replaceAll('_', ' '))
 
 defineExpose({ table })
 </script>

app/components/TranslateModal.vue

@@ -15,8 +15,8 @@
           required
           name="name"
           :description="name"
-          :label="fields.name.label"
           :placeholder="fields.name.placeholder"
+          :label="type === 'person' ? $t('person.name') : $t('event.title')"
         >
           <UInput v-model="state.name" class="w-full" />
         </UFormField>
@@ -110,11 +110,11 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 
   if (error) {
     showError({
-      description: t('feedback.could-not-save', { item: event.data.name })
+      description: t('feedback.could-not-save', { item: t('general.translation') })
     })
   } else {
     showSuccess({
-      description: t('feedback.saved-successfully', { item: event.data.name })
+      description: t('feedback.saved-successfully', { item: t('general.translation') })
     })
     open.value = false
     i18nStore.addTranslation(locale.value, props.name, event.data.name)

app/components/auth/AuthPasswordForm.vue

@@ -37,17 +37,13 @@ const supabase = useSupabaseClient()
 const { showError, showSuccess } = useFlash()
 
 async function onSubmit(payload: FormSubmitEvent<Schema>) {
-  const { error } = await supabase.auth.updateUser({
-    password: payload.data.password
-  })
+  const { error } = await supabase.auth.updateUser({ password: payload.data.password })
   if (error) {
     showError({ description: error.message })
   } else {
     if (props.onSuccess) await props.onSuccess()
     showSuccess({
-      description: t('feedback.saved-successfully', {
-        item: t('auth.password')
-      })
+      description: t('feedback.saved-successfully', { item: t('auth.password') })
     })
   }
 }

app/components/events/EventsAddModal.vue

@@ -1,9 +1,5 @@
 <template>
-  <UModal
-    v-model:open="open"
-    :title="$t('event.new')"
-    description="Add a new event to the database"
-  >
+  <UModal v-model:open="open" :title="$t('event.new')" :description="$t('event.new-description')">
     <UButton icon="i-lucide:plus" :label="$t('event.new')" />
 
     <template #body>

app/components/events/EventsForm.vue

@@ -18,7 +18,7 @@
       required
       name="slug"
       :label="$t('general.slug')"
-      description="The unique identifier for this event in the URL."
+      :description="$t('general.slug-description')"
     >
       <UInput
         v-model="state.slug"
@@ -36,7 +36,7 @@
         :cover="state.cover_url ? { src: state.cover_url, alt: '' } : undefined"
       >
         <template v-if="state.cover_url?.length" #trailing>
-          <UButton
+          <LazyUButton
             size="sm"
             variant="link"
             color="neutral"
@@ -51,7 +51,7 @@
       class="w-full"
       name="start_year"
       :label="$t('event.start-year')"
-      :description="state.start_year ? undefined : 'A negative number means before Christ'"
+      :description="$t('date.negative-description')"
     >
       <UInputNumber
         v-model="state.start_year"
@@ -75,7 +75,7 @@
       class="w-full"
       name="end_year"
       :label="$t('event.end-year')"
-      :description="state.end_year ? undefined : 'A negative number means before Christ'"
+      :description="$t('date.negative-description')"
     >
       <UInputNumber
         v-model="state.end_year"

app/components/events/EventsInfoCard.vue

@@ -89,7 +89,9 @@ async function onSubmit(submitEvent: FormSubmitEvent<Schema>) {
     event.value = previousData
     showError({ description: error.message })
   } else {
-    showSuccess({ description: t('feedback.saved-successfully', { item: t('event.noun') }) })
+    showSuccess({
+      description: t('feedback.saved-successfully', { item: translate(event.value.title) })
+    })
   }
 }
 </script>