Fixed a bug with dates and some style issues

components/calendar/PreviewCard.vue

@@ -23,14 +23,14 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
 
 <template>
   <UiCard
-    class="w-full h-full transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
+    class="w-full h-full flex flex-col transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
     :link="calendarLink"
   >
     <UiCardHeader>
       <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
     </UiCardHeader>
 
-    <UiCardContent>
+    <UiCardContent class="grow">
       <p class="flex items-center gap-1">
         <PhCalendarDots size="24" weight="fill" />
         <span>{{ $t("entity.calendar.hasXEvents", { count: calendar.eventNb?.[0].count }) }}</span>
@@ -48,13 +48,13 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
     </UiCardContent>
 
     <UiCardFooter>
-      <ul class="grid gap-2">
+      <ul class="grid gap-1 text-sm">
         <li class="flex gap-1 items-center">
-          <PhFilePlus size="20" />
+          <PhFilePlus size="18" />
           <span>{{ $t('common.createdAt', { createdAt }) }}</span>
         </li>
         <li v-if="updatedAt" class="flex gap-1 items-center">
-          <PhPencilSimpleLine size="20" />
+          <PhPencilSimpleLine size="18" />
           <span>{{ $t('common.updatedAt', { updatedAt }) }}</span>
         </li>
       </ul>

components/calendar/dialog/Create.vue

@@ -17,6 +17,7 @@ const emit = defineEmits(["on-close"])
 
 function handleClose() {
   emit("on-close")
+  setTimeout(() => calendarSkeletonName.value = "", 100)
 }
 </script>
 

components/calendar/form/Create.vue

@@ -97,7 +97,7 @@ function handleFormCancel() {
             </div>
           </UiTabsTrigger>
         </UiTabsList>
-        <UiTabsContent value="global">
+        <UiTabsContent value="global" class="grid gap-6">
           <input
             id="new-calendar-name"
             v-model="calendarSkeleton.name"
@@ -105,9 +105,17 @@ function handleFormCancel() {
             name="new-calendar-name"
             required
             :placeholder="$t('common.title')"
-            class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            class="w-full py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
             @input="handleNameChange"
           >
+
+          <div class="-mx-1 px-1 grid gap-3">
+            <UiLabel for="new-calendar-state">
+              {{ $t('ui.contentState.label') }}
+            </UiLabel>
+
+            <InputContentState id="new-calendar-state" v-model="calendarSkeleton.state" />
+          </div>
         </UiTabsContent>
         <UiTabsContent value="months">
           <CalendarInputMonthList v-model:model-value="calendarSkeleton.months" />