Added state on calendar preview

components/calendar/PreviewCard.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhCalendarDots, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
+import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
 import { DateTime } from "luxon";
 import type { Calendar } from "~/models/CalendarConfig";
 
@@ -26,8 +26,21 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
     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>
+    <UiCardHeader class="gap-4">
       <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
+
+      <div v-if="calendar.state === 'published'" class="flex items-center gap-1 text-sm">
+        <PhFile size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.published') }}</span>
+      </div>
+      <div v-if="calendar.state === 'draft'" class="flex items-center gap-1 text-sm">
+        <PhFileDashed size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.draft') }}</span>
+      </div>
+      <div v-if="calendar.state === 'archived'" class="flex items-center gap-1 text-sm">
+        <PhArchive size="20" weight="fill" />
+        <span>{{ $t('ui.contentState.archived') }}</span>
+      </div>
     </UiCardHeader>
 
     <UiCardContent class="grow">