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" />

components/global/AddCard.vue

@@ -6,7 +6,7 @@ const emit = defineEmits(["on-click"])
 
 <template>
   <UiCard
-    class="h-full md:w-fit transition-all bg-transparent dark:hover:bg-gray-950 dark:focus-within:outline-gray-900 hover:-translate-y-0"
+    class="h-full md:w-fit transition-all bg-transparent hover:text-slate-900 text-slate-500 dark:hover:text-slate-100 dark:text-slate-500 dark:focus-within:outline-gray-900 hover:-translate-y-0"
     has-click
     @on-click="emit('on-click')"
   >

components/global/input/Color.vue

@@ -2,12 +2,16 @@
 import { cn } from "@/lib/utils";
 import { type RPGColor, rpgColors } from "~/models/Color";
 
+defineProps<{
+  id: string
+}>();
+
 const model = defineModel<RPGColor>({ default: "white" });
 </script>
 
 <template>
   <UiSelect v-model="model">
-    <UiSelectTrigger>
+    <UiSelectTrigger :id>
       <UiSelectValue
         :placeholder="$t('ui.colors.selectOne')"
         class="input-color"

components/global/input/ContentState.vue

@@ -1,12 +1,16 @@
 <script lang="ts" setup>
 import { contentStates, type ContentState } from "~/models/Entity";
 
+defineProps<{
+  id: string
+}>();
+
 const model = defineModel<ContentState>({ default: "draft" });
 </script>
 
 <template>
   <UiSelect v-model="model">
-    <UiSelectTrigger>
+    <UiSelectTrigger :id>
       <UiSelectValue
         :placeholder="$t('ui.contentState.selectOne')"
       />

components/ui/label/Label.vue

@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer',
         props.class,
       )
     "

components/world/PreviewCard.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhArchive, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
+import { PhArchive, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
 import type { World } from "~/models/World";
 import { DateTime } from "luxon";
 
@@ -16,7 +16,7 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
 
 <template>
   <UiCard
-    class="w-full h-full transition-all"
+    class="w-full h-full flex flex-col transition-all"
     :link="`/my/worlds/${world.id}`"
     :class="{
       'hover:bg-slate-50 dark:hover:bg-sky-950 dark:focus-within:outline-sky-900': !world.color,
@@ -38,13 +38,17 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
       'bg-pink-100 dark:bg-pink-950 border-pink-200 hover:bg-pink-50 dark:hover:bg-pink-900 dark:border-pink-900 dark:focus-within:outline-pink-900': world.color === 'pink',
       'bg-pink-100 dark:bg-rose-950 border-rose-200 hover:bg-rose-50 dark:hover:bg-rose-900 dark:border-rose-900 dark:focus-within:outline-rose-900': world.color === 'rose',
       'text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900': world.color === 'black',
-      ' hover:bg-slate-50 dark:hover:text-slate-900 dark:hover:bg-slate-300 dark:border-slate-500 dark:focus-within:outline-slate-100': world.color === 'white',
+      ' hover:bg-slate-50 dark:hover:text-slate-900 dark:hover:bg-slate-200 dark:border-slate-700 dark:focus-within:outline-slate-100': world.color === 'white',
     }"
   >
     <UiCardHeader class="gap-4">
       <UiCardTitle>
         {{ world.name }}
       </UiCardTitle>
+      <div v-if="world.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="world.state === 'draft'" class="flex items-center gap-1 text-sm">
         <PhFileDashed size="20" weight="fill" />
         <span>{{ $t('ui.contentState.draft') }}</span>
@@ -54,7 +58,8 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
         <span>{{ $t('ui.contentState.archived') }}</span>
       </div>
     </UiCardHeader>
-    <UiCardContent>
+
+    <UiCardContent class="grow">
       <p class="italic">{{ world.description }}</p>
 
       <div class="flex gap-1 absolute top-4 right-4 z-20">
@@ -69,13 +74,13 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
     </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/world/form/Create.vue

@@ -57,7 +57,7 @@ function handleFormCancel() {
 <template>
   <template v-if="worldSkeleton">
     <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
-      <div>
+      <div class="grid gap-4">
         <input
           id="new-world-name"
           v-model="worldSkeleton.name"
@@ -69,10 +69,6 @@ function handleFormCancel() {
           @input="handleNameChange"
         >
 
-        <div class="-mx-1 mb-4">
-          <InputColor v-model="worldSkeleton.color" />
-        </div>
-
         <textarea
           id="new-world-description"
           v-model="worldSkeleton.description"
@@ -80,6 +76,22 @@ function handleFormCancel() {
           :placeholder="$t('entity.addDescription')"
           class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
         />
+
+        <div class="-mx-1 grid gap-3">
+          <UiLabel for="new-world-color">
+            {{ $t('ui.colors.label') }}
+          </UiLabel>
+
+          <InputColor id="new-world-color" v-model="worldSkeleton.color" />
+        </div>
+
+        <div class="-mx-1 grid gap-3">
+          <UiLabel for="new-world-state">
+            {{ $t('ui.contentState.label') }}
+          </UiLabel>
+
+          <InputContentState id="new-world-state" v-model="worldSkeleton.state" />
+        </div>
       </div>
 
       <footer class="flex justify-end gap-2 mt-6">

components/world/form/Update.vue

@@ -71,7 +71,7 @@ function handleFormCancel() {
 <template>
   <template v-if="worldSkeleton">
     <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
-      <div>
+      <div class="grid gap-4">
         <input
           id="new-world-name"
           v-model="worldSkeleton.name"
@@ -79,7 +79,7 @@ function handleFormCancel() {
           name="new-world-name"
           required
           :placeholder="$t('common.title')"
-          class="w-full -my-1 mb-4 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 -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
           @input="handleNameChange"
         >
 
@@ -91,12 +91,20 @@ function handleFormCancel() {
           class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
         />
 
-        <div class="-mx-1 mb-4">
+        <div class="-mx-1 grid gap-3">
-          <InputColor v-model="worldSkeleton.color" />
+          <UiLabel for="new-world-color">
+            {{ $t('ui.colors.label') }}
+          </UiLabel>
+
+          <InputColor id="new-world-color" v-model="worldSkeleton.color" />
         </div>
 
-        <div class="-mx-1 mb-4">
+        <div class="-mx-1 grid gap-3">
-          <InputContentState v-model="worldSkeleton.state" />
+          <UiLabel for="new-world-state">
+            {{ $t('ui.contentState.label') }}
+          </UiLabel>
+
+          <InputContentState id="new-world-state" v-model="worldSkeleton.state" />
         </div>
       </div>
 

i18n.config.ts

@@ -17,6 +17,7 @@ export default defineI18nConfig(() => ({
           edit: "Edit",
         },
         colors: {
+          label: "Color",
           selectOne: "Select a color",
           red: "Red",
           orange: "Orange",
@@ -39,6 +40,7 @@ export default defineI18nConfig(() => ({
           white: "White",
         },
         contentState: {
+          label: "Status",
           selectOne: "Select a publication state",
           published: "Published",
           draft: "Draft",
@@ -278,6 +280,7 @@ export default defineI18nConfig(() => ({
           edit: "Modifier",
         },
         colors: {
+          label: "Couleur",
           selectOne: "Sélectionner une couleur",
           red: "Rouge",
           orange: "Orange",
@@ -300,7 +303,8 @@ export default defineI18nConfig(() => ({
           white: "Blanc",
         },
         contentState: {
-          selectOne: "Modify l'état de publication",
+          label: "État de publication",
+          selectOne: "Modifier l'état de publication",
           published: "Publié",
           draft: "Brouillon",
           archived: "Archivé",

models/World.ts

@@ -15,6 +15,9 @@ export interface World {
   updatedAt?: string
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WorldChannelPayload = World & Record<string, any>
+
 export const postWorldSchema = z.object({
   name: z.string(),
   description: z.string().optional().nullable(),

pages/my/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { RealtimeChannel } from "@supabase/supabase-js"
-import type { World } from "~/models/World";
+import type { World, WorldChannelPayload } from "~/models/World";
 
 const supabase = useSupabaseClient()
 const user = useSupabaseUser()
@@ -31,10 +31,14 @@ function hideCreateDialog() {
 /** Active world channel */
 let worldChannel: RealtimeChannel
 
+
 /** Handles world insertion realtime events */
-function handleInsertedWorld(newWorld: World) {
+function handleInsertedWorld(newWorld: WorldChannelPayload) {
   if (!worlds.value?.data) return
 
+  newWorld.createdAt = newWorld.created_at;
+  newWorld.gmId = newWorld.gm_id;
+
   try {
     worlds.value?.data.push(newWorld)
   } catch (err) {

server/api/worlds/[id].patch.ts

@@ -58,7 +58,9 @@ export default defineEventHandler(async (event) => {
         name,
         description,
         color,
-        gm_id,
+        createdAt:created_at,
+        updatedAt:updated_at,
+        gmId:gm_id,
         state
       `)
       .single<World>()

server/api/worlds/create.post.ts

@@ -33,6 +33,8 @@ export default defineEventHandler(async (event) => {
         name,
         description,
         color,
+        createdAt:created_at,
+        updatedAt:updated_at,
         gmId:gm_id
       `)
       .single<World>()