Added input focus on entity forms

app/components/calendar/form/Create.vue

@@ -16,6 +16,9 @@ onMounted(() => {
 type FormTabs = "global" | "months" | "today"
 const activeTab = ref<FormTabs>("global")
 
+const newCalendarName = shallowRef<HTMLInputElement>()
+useFocus(newCalendarName, { initialValue: true })
+
 /**
  * === Current date ===
  */
@@ -103,6 +106,7 @@ function handleFormCancel() {
         </UiTabsList>
         <UiTabsContent value="global" class="grid gap-4">
           <input
+            ref="newCalendarName"
             id="new-calendar-name"
             v-model="calendarSkeleton.name"
             type="text"

app/components/calendar/form/Update.vue

@@ -17,6 +17,9 @@ onMounted(() => {
 type FormTabs = "global" | "months" | "today"
 const activeTab = ref<FormTabs>("global")
 
+const newCalendarName = shallowRef<HTMLInputElement>()
+useFocus(newCalendarName, { initialValue: true })
+
 /**
  * === Form Validation ===
  */
@@ -85,6 +88,7 @@ function handleFormCancel() {
         </UiTabsList>
         <UiTabsContent value="global" class="grid gap-4">
           <input
+            ref="newCalendarName"
             id="new-calendar-name"
             v-model="calendarSkeleton.name"
             type="text"

app/components/world/form/Create.vue

@@ -11,6 +11,9 @@ onMounted(() => {
   worldSkeleton.value = { ...defaultWorld }
 })
 
+const newWorldName = shallowRef<HTMLInputElement>()
+useFocus(newWorldName, { initialValue: true })
+
 const isLoading = ref<boolean>(false)
 
 /**
@@ -61,6 +64,7 @@ function handleFormCancel() {
     <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
       <div class="grid gap-4">
         <input
+          ref="newWorldName"
           id="new-world-name"
           v-model="worldSkeleton.name"
           type="text"

app/components/world/form/Update.vue

@@ -19,6 +19,9 @@ onMounted(() => {
   worldSkeleton.value = { ...props.world } as World
 })
 
+const newWorldName = shallowRef<HTMLInputElement>()
+useFocus(newWorldName, { initialValue: true })
+
 const isLoading = ref<boolean>(false)
 
 /**
@@ -75,6 +78,7 @@ function handleFormCancel() {
     <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
       <div class="grid gap-4">
         <input
+          ref="newWorldName"
           id="new-world-name"
           v-model="worldSkeleton.name"
           type="text"