Added fix for calendar update channel

components/calendar/form/Create.vue

@@ -2,7 +2,7 @@
 import type { Calendar } from "~/models/CalendarConfig";
 import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
 
-const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: [], state: "draft" }
+const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: [], state: "draft", color: "white" }
 const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
 
 onMounted(() => {
@@ -97,7 +97,7 @@ function handleFormCancel() {
             </div>
           </UiTabsTrigger>
         </UiTabsList>
-        <UiTabsContent value="global" class="grid gap-6">
+        <UiTabsContent value="global" class="grid gap-4">
           <input
             id="new-calendar-name"
             v-model="calendarSkeleton.name"
@@ -116,6 +116,14 @@ function handleFormCancel() {
 
             <InputContentState id="new-calendar-state" v-model="calendarSkeleton.state" />
           </div>
+
+          <div class="-mx-1 grid gap-3">
+            <UiLabel for="new-calendar-color">
+              {{ $t('ui.colors.label') }}
+            </UiLabel>
+
+            <InputColor id="new-calendar-color" v-model="calendarSkeleton.color" />
+          </div>
         </UiTabsContent>
         <UiTabsContent value="months">
           <CalendarInputMonthList v-model:model-value="calendarSkeleton.months" />

components/world/form/Create.vue

@@ -77,14 +77,6 @@ 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 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') }}
@@ -92,6 +84,14 @@ function handleFormCancel() {
 
           <InputContentState id="new-world-state" v-model="worldSkeleton.state" />
         </div>
+
+        <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>
 
       <footer class="flex justify-end gap-2 mt-6">

components/world/form/Update.vue

@@ -91,14 +91,6 @@ 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 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') }}
@@ -106,6 +98,14 @@ function handleFormCancel() {
 
           <InputContentState id="new-world-state" v-model="worldSkeleton.state" />
         </div>
+
+        <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>
 
       <footer class="flex justify-end gap-2 mt-6">

models/CalendarConfig.ts

@@ -4,6 +4,7 @@ import { calendarMonthSchema, type CalendarMonth } from "./CalendarMonth"
 import { dateSchema, type RPGDate } from "./Date"
 import type { World } from "./World"
 import type { ContentState } from "./Entity"
+import type { RPGColor } from "./Color"
 
 
 export interface CalendarConfig {
@@ -18,12 +19,15 @@ export interface Calendar extends CalendarConfig {
   events: CalendarEvent[]
   eventNb?: Array<{ count: number }>
   state: ContentState
-  color?: string
+  color?: RPGColor
   world?: World
   createdAt?: string
   updatedAt?: string
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CalendarChannelPayload = Calendar & Record<string, any>
+
 export const postCalendarSchema = z.object({
   name: z.string(),
   today: dateSchema.optional().nullable(),

pages/my/worlds/[id].vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { RealtimeChannel } from "@supabase/supabase-js"
 import type { World } from "~/models/World";
-import type { Calendar } from "~/models/CalendarConfig";
+import type { Calendar, CalendarChannelPayload } from "~/models/CalendarConfig";
 import { PhArrowBendDoubleUpLeft, PhGlobeHemisphereWest, PhPencil } from "@phosphor-icons/vue";
 
 const supabase = useSupabaseClient()
@@ -40,9 +40,12 @@ let calendarChannel: RealtimeChannel
 let worldChannel: RealtimeChannel
 
 /** Handles calendar insertion realtime events */
-function handleInsertedCalendar(newCalendar: Calendar) {
+function handleInsertedCalendar(newCalendar: CalendarChannelPayload) {
   if (!world.value) return
 
+  newCalendar.createdAt = newCalendar.created_at;
+  newCalendar.eventNb = [{ count: 0 }];
+
   try {
     world.value.data.calendars?.push(newCalendar)
   } catch (err) {