Added timestamps for calendars

components/calendar/PreviewCard.vue

@@ -1,18 +1,30 @@
 <script lang="ts" setup>
-import { PhCalendarDots, PhTrash } from "@phosphor-icons/vue";
+import { PhCalendarDots, PhFilePlus, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
+import { DateTime } from "luxon";
 import type { Calendar } from "~/models/CalendarConfig";
 
-defineProps<{
-  calendar: Calendar
+const props = defineProps<{
+  calendar: Calendar,
+  gmId?: string,
+  showActions?: boolean,
 }>()
 
 const emit = defineEmits(["on-delete"])
+
+const { locale } = useI18n();
+
+const createdAt = DateTime.fromISO(props.calendar.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value });
+const updatedAt = computed<string>(() => props.calendar.updatedAt ? DateTime.fromISO(props.calendar.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "");
+
+const user = useSupabaseUser();
+const isOwner = computed(() => user.value && props.gmId && user.value.id === props.gmId);
+const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calendar.id}` : `/calendars/${props.calendar.shortId}`);
 </script>
 
 <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"
-    :link="`/my/calendars/${calendar.id}`"
+    :link="calendarLink"
   >
     <UiCardHeader>
       <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
@@ -20,11 +32,12 @@ const emit = defineEmits(["on-delete"])
 
     <UiCardContent>
       <p class="flex items-center gap-1">
-        <PhCalendarDots size="24" />
+        <PhCalendarDots size="24" weight="fill" />
         <span>{{ $t("entity.calendar.hasXEvents", { count: calendar.eventNb?.[0].count }) }}</span>
       </p>
 
       <UiButton
+        v-if="isOwner && showActions"
         size="icon"
         variant="ghost"
         class="absolute top-2 right-2 z-20 hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700"
@@ -33,5 +46,18 @@ const emit = defineEmits(["on-delete"])
         <PhTrash size="16" />
       </UiButton>
     </UiCardContent>
+
+    <UiCardFooter>
+      <ul class="grid gap-2">
+        <li class="flex gap-1 items-center">
+          <PhFilePlus size="20" />
+          <span>{{ $t('common.createdAt', { createdAt }) }}</span>
+        </li>
+        <li v-if="updatedAt" class="flex gap-1 items-center">
+          <PhPencilSimpleLine size="20" />
+          <span>{{ $t('common.updatedAt', { updatedAt }) }}</span>
+        </li>
+      </ul>
+    </UiCardFooter>
   </UiCard>
 </template>

components/global/user/CTA.vue

@@ -70,7 +70,7 @@ function pushRoute(to: AvailableRoutes) {
             {{ $t('ui.sidebarMenu.avatarFallback') }}
           </UiAvatarFallback>
         </UiAvatar>
-        <UiButton v-else variant="outline" size="icon" class="rounded-full border-indigo-200 bg-indigo-700 dark:border-slate-300 dark:bg-neutral-900 dark:hover:bg-slate-50 dark:hover:text-slate-950 cursor-pointer">
+        <UiButton v-else variant="outline" size="icon" class="rounded-full border-indigo-200 bg-indigo-700 dark:border-slate-300 dark:bg-neutral-950 dark:hover:bg-slate-50 dark:hover:text-slate-950 cursor-pointer">
           <PhUserCircle size="24" />
         </UiButton>
       </UiDropdownMenuTrigger>

components/ui/card/CardFooter.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+  <div :class="cn('flex items-center p-6 border-t-2 border-t-slate-900', props.class)">
     <slot />
   </div>
 </template>

components/world/PreviewCard.vue

@@ -57,6 +57,7 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
         </UiButton>
       </div>
     </UiCardContent>
+
     <UiCardFooter>
       <ul class="grid gap-2">
         <li class="flex gap-1 items-center">