From c19262e3c2ed0dfdaed498a15e5e32d49ceef83a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 9 Sep 2024 22:09:59 +0200
Subject: [PATCH] Added world creation dialog

---
 components/calendar/form/Create.vue |   4 +-
 components/global/Heading.vue       |  20 ++++-
 components/global/input/Color.vue   |  20 +++++
 components/world/dialog/Create.vue  |  48 ++++++++++++
 components/world/form/Create.vue    | 100 ++++++++++++++++++++++++
 i18n.config.ts                      |  60 +++++++++++++-
 models/Color.ts                     |   8 +-
 models/World.ts                     |  17 +++-
 pages/index.vue                     |   2 +-
 pages/my/index.vue                  | 117 ++++++++++++++++++----------
 pages/my/worlds/[id].vue            |  18 +++--
 server/api/worlds/create.post.ts    |  51 ++++++++++++
 12 files changed, 403 insertions(+), 62 deletions(-)
 create mode 100644 components/global/input/Color.vue
 create mode 100644 components/world/dialog/Create.vue
 create mode 100644 components/world/form/Create.vue
 create mode 100644 server/api/worlds/create.post.ts

diff --git a/components/calendar/form/Create.vue b/components/calendar/form/Create.vue
index f92b1d3..d8f8353 100644
--- a/components/calendar/form/Create.vue
+++ b/components/calendar/form/Create.vue
@@ -40,7 +40,7 @@ const isCreatingCalendar = ref<boolean>(false)
 async function handleSubmit() {
   try {
     isCreatingCalendar.value = true
-    await $fetch("/api/calendars/create", { method: "POST", body: {...calendarSkeleton.value, worldId: 1 } })
+    await $fetch("/api/calendars/create", { method: "POST", body: { ...calendarSkeleton.value, worldId: 1 } })
 
     emit("on-close")
   } catch (err) {
@@ -104,7 +104,7 @@ function handleFormCancel() {
             type="text"
             name="new-calendar-name"
             required
-            placeholder="Titre"
+            :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"
             @input="handleNameChange"
           >
diff --git a/components/global/Heading.vue b/components/global/Heading.vue
index 2726bcc..8e51843 100644
--- a/components/global/Heading.vue
+++ b/components/global/Heading.vue
@@ -1,5 +1,23 @@
+<script lang="ts" setup>
+type HeadingLevel = "h1" | "h2" | "h3"
+
+interface HeadingProps {
+  level?: HeadingLevel
+}
+
+withDefaults(defineProps<HeadingProps>(), {
+  level: "h2"
+})
+</script>
+
 <template>
-  <h1 class="text-2xl font-bold flex">
+  <h1 v-if="level === 'h1'" class="text-4xl font-bold flex">
     <slot />
   </h1>
+  <h2 v-else-if="level === 'h2'" class="text-2xl font-bold flex">
+    <slot />
+  </h2>
+  <h3 v-if="level === 'h3'" class="text-xl font-bold flex">
+    <slot />
+  </h3>
 </template>
diff --git a/components/global/input/Color.vue b/components/global/input/Color.vue
new file mode 100644
index 0000000..7f597e4
--- /dev/null
+++ b/components/global/input/Color.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { type RPGColor, rpgColors } from "~/models/Color";
+
+const model = defineModel<RPGColor>()
+</script>
+
+<template>
+  <UiSelect v-model="model">
+    <UiSelectTrigger>
+      <UiSelectValue :placeholder="$t('ui.colors.selectOne')" />
+    </UiSelectTrigger>
+    <UiSelectContent>
+      <UiSelectGroup>
+        <UiSelectItem v-for="color in rpgColors" :key="color" :value="color">
+          {{ $t(`ui.colors.${color}`) }}
+        </UiSelectItem>
+      </UiSelectGroup>
+    </UiSelectContent>
+  </UiSelect>
+</template>
diff --git a/components/world/dialog/Create.vue b/components/world/dialog/Create.vue
new file mode 100644
index 0000000..25eb825
--- /dev/null
+++ b/components/world/dialog/Create.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { PhX } from "@phosphor-icons/vue";
+
+defineProps<{
+  modalState?: boolean
+}>()
+
+const worldSkeletonName = ref<string>("")
+
+function onChangedName(newName: string) {
+  worldSkeletonName.value = newName
+}
+
+const emit = defineEmits(["on-close"])
+
+function handleClose() {
+  emit("on-close")
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="modalState">
+    <UiAlertDialogContent class="gap-4">
+      <header>
+        <UiAlertDialogTitle>
+          <span class="text-2xl">
+            <span v-if="worldSkeletonName">
+              {{ $t('entity.world.createDialog.title') }} — {{ worldSkeletonName }}
+            </span>
+            <span v-else>
+              {{ $t('entity.world.createDialog.title') }}
+            </span>
+          </span>
+        </UiAlertDialogTitle>
+
+        <UiAlertDialogDescription>
+          {{ $t('entity.world.createDialog.subtitle') }}
+        </UiAlertDialogDescription>
+      </header>
+
+      <UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleClose">
+        <PhX size="20" />
+      </UiButton>
+
+      <WorldFormCreate @on-changed-name="onChangedName" @on-close="handleClose" />
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>
diff --git a/components/world/form/Create.vue b/components/world/form/Create.vue
new file mode 100644
index 0000000..94bbc72
--- /dev/null
+++ b/components/world/form/Create.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { PhCircleNotch } from "@phosphor-icons/vue";
+import type { World } from "~/models/World";
+
+const user = useSupabaseUser()
+
+const defaultWorld: World = { name: "", description: "", gmId: user.value?.id }
+const worldSkeleton = ref<World>({ ...defaultWorld })
+
+onMounted(() => {
+  worldSkeleton.value = { ...defaultWorld }
+})
+
+const isLoading = ref<boolean>(false)
+
+/**
+ * === Form Validation ===
+ */
+/** Whether the skeleton has a valid name */
+const validSkeleton = computed(() => worldSkeleton.value.name)
+
+async function handleSubmit() {
+  if (!user.value) return
+
+  try {
+    isLoading.value = true
+    await $fetch("/api/worlds/create", { method: "POST", body: { ...worldSkeleton.value } })
+
+    emit("on-close")
+  } catch (err) {
+    console.log(err)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * === Watch for name changes to display above ===
+ */
+const emit = defineEmits<{
+  // eslint-disable-next-line no-unused-vars
+  (e: "on-changed-name", calendarName: string): void
+    // eslint-disable-next-line no-unused-vars
+  (e: "on-close"): void
+}>()
+
+/** Hook to emit a debounced event for the changed skeleton name */
+const handleNameChange = useDebounceFn(() => {
+  emit("on-changed-name", worldSkeleton.value.name)
+}, 400)
+
+function handleFormCancel() {
+  emit("on-close")
+}
+</script>
+
+<template>
+  <template v-if="worldSkeleton">
+    <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
+      <div>
+        <input
+          id="new-world-name"
+          v-model="worldSkeleton.name"
+          type="text"
+          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"
+          @input="handleNameChange"
+        >
+
+        <div class="-mx-1 mb-4">
+          <InputColor v-model="worldSkeleton.color" />
+        </div>
+
+        <textarea
+          id="new-world-description"
+          v-model="worldSkeleton.description"
+          name="new-world-description"
+          :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>
+
+      <footer class="flex justify-end gap-2 mt-6">
+        <UiButton type="button" variant="destructive" @click="handleFormCancel">
+          {{ $t('ui.action.cancel') }}
+        </UiButton>
+
+        <UiButton type="submit" :disabled="!validSkeleton || isLoading">
+          <Transition name="fade">
+            <PhCircleNotch v-if="isLoading" size="20" class="opacity-50 animate-spin"/>
+          </Transition>
+
+          {{ $t('ui.action.save') }}
+        </UiButton>
+      </footer>
+    </form>
+  </template>
+</template>
diff --git a/i18n.config.ts b/i18n.config.ts
index 5bcc205..a0cb46b 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -16,6 +16,28 @@ export default defineI18nConfig(() => ({
           delete: "Delete",
           edit: "Edit",
         },
+        colors: {
+          selectOne: "Select a color",
+          red: "Red",
+          orange: "Orange",
+          amber: "Amber",
+          yellow: "Yellow",
+          lime: "Lime",
+          green: "Green",
+          emerald: "Emerald",
+          teal: "Teal",
+          cyan: "Cyan",
+          sky: "Sky",
+          blue: "Blue",
+          indigo: "Indigo",
+          violet: "Violet",
+          purple: "Purple",
+          fuchsia: "Fuchsia",
+          pink: "Pink",
+          rose: "Rose",
+          black: "Black",
+          white: "White",
+        },
         greeting: "Connected as {user}",
         anonymousGreeting: "Preferences",
         sidebarMenu: {
@@ -43,6 +65,7 @@ export default defineI18nConfig(() => ({
           addPrimary: "Add a primary category",
           addSecondaries: "Add secondary categories"
         },
+        isLoading: "Loading in progress…",
         addDescription: "Add a description",
         deleteOne: "Delete \"{entity}\"",
         advancedSearch: {
@@ -55,6 +78,11 @@ export default defineI18nConfig(() => ({
         world: {
           nameSingular: "World",
           namePlural: "Worlds",
+          addSingle: "Add a world",
+          createDialog: {
+            title: "Create a world",
+            subtitle: "Worlds are the building blocks which hold all your characters, your calendars…"
+          },
         },
         calendar: {
           nameSingular: "Calendar",
@@ -114,7 +142,7 @@ export default defineI18nConfig(() => ({
             },
           },
           createDialog: {
-            title: "New calendar",
+            title: "Create a calendar",
             tabs: {
               general: {
                 title: "General",
@@ -189,6 +217,28 @@ export default defineI18nConfig(() => ({
           delete: "Supprimer",
           edit: "Modifier",
         },
+        colors: {
+          selectOne: "Sélectionner une couleur",
+          red: "Rouge",
+          orange: "Orange",
+          amber: "Ambre",
+          yellow: "Jaune",
+          lime: "Citron",
+          green: "Vert",
+          emerald: "Émeraude",
+          teal: "Turquoise",
+          cyan: "Cyan",
+          sky: "Bleu clair",
+          blue: "Bleu",
+          indigo: "Indigo",
+          violet: "Violet",
+          purple: "Pourpre",
+          fuchsia: "Fuchsia",
+          pink: "Rose",
+          rose: "Magenta",
+          black: "Noir",
+          white: "Blanc",
+        },
         greeting: "Connecté en tant que {user}",
         anonymousGreeting: "Préférences",
         sidebarMenu: {
@@ -216,6 +266,7 @@ export default defineI18nConfig(() => ({
           addPrimary: "Ajouter une catégorie principale",
           addSecondaries: "Ajouter des catégories secondaires"
         },
+        isLoading: "Chargement en cours…",
         addDescription: "Ajouter une description",
         deleteOne: "Supprimer \"{entity}\"",
         advancedSearch: {
@@ -228,6 +279,11 @@ export default defineI18nConfig(() => ({
         world: {
           nameSingular: "Monde",
           namePlural: "Mondes",
+          addSingle: "Ajouter un monde",
+          createDialog: {
+            title: "Créer un monde",
+            subtitle: "Un monde est la brique de base qui contient vos personnages, vos calendriers…"
+          },
         },
         calendar: {
           nameSingular: "Calendriers",
@@ -287,7 +343,7 @@ export default defineI18nConfig(() => ({
             },
           },
           createDialog: {
-            title: "Nouveau calendrier",
+            title: "Créer un calendrier",
             tabs: {
               general: {
                 title: "Général",
diff --git a/models/Color.ts b/models/Color.ts
index 3ac9e2a..0be826f 100644
--- a/models/Color.ts
+++ b/models/Color.ts
@@ -1 +1,7 @@
-export type RPGColor = "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "black" | "white"
+import { z } from "zod"
+
+export const rpgColors = ["red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose", "black", "white"] as const
+
+export type RPGColor = typeof rpgColors[number];
+
+export const rpgColorSchema = z.enum(rpgColors)
diff --git a/models/World.ts b/models/World.ts
index 3aabc60..165ecc1 100644
--- a/models/World.ts
+++ b/models/World.ts
@@ -1,10 +1,19 @@
+import { z } from "zod"
 import type { Calendar } from "./CalendarConfig"
+import { rpgColorSchema, type RPGColor } from "./Color"
 
 export interface World {
-  id: number
-  uuid: string
+  id?: number
   name: string
   description?: string
-  color?: string,
-  calendars?: Calendar[]
+  color?: RPGColor,
+  calendars?: Calendar[],
+  gmId?: string
 }
+
+export const postWorldSchema = z.object({
+  name: z.string(),
+  description: z.string().optional().nullable(),
+  color: rpgColorSchema,
+  gmId: z.string().optional().nullable(),
+})
diff --git a/pages/index.vue b/pages/index.vue
index 8bca0f5..8e579e3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -13,6 +13,6 @@ useHead({
       <Meta name="description" :content="$t('head.description')" />
     </Head>
 
-    <Heading>TTTools</Heading>
+    <Heading level="h1">TTTools</Heading>
   </main>
 </template>
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 9bee04d..8aae1aa 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { PhPlus } from "@phosphor-icons/vue";
 import type { RealtimeChannel } from "@supabase/supabase-js"
 import type { World } from "~/models/World";
 
@@ -21,6 +22,12 @@ watch(user, (n) => {
   }
 })
 
+const isCreateWorldModalOpen = ref<boolean>(false)
+
+function hideCreateDialog() {
+  isCreateWorldModalOpen.value = false
+}
+
 /**
  * === World subscriptions ===
  */
@@ -46,7 +53,7 @@ function handleDeletedWorld(id: number) {
 }
 
 onMounted(() => {
-  worldChannel = supabase.channel("custom-insert-channel")
+  worldChannel = supabase.channel("realtime-world-channel")
     .on(
       "postgres_changes",
       { event: "*", schema: "public", table: "worlds" },
@@ -86,51 +93,75 @@ onUnmounted(() => {
       <Title>{{ $t("entity.world.namePlural") }}</Title>
     </Head>
 
-    <Heading>{{ user?.user_metadata.full_name }}</Heading>
+    <Heading level="h1">{{ user?.user_metadata.full_name }}</Heading>
 
-    <section v-if="worlds" class="mt-4">
-      <h2 class="mb-4 text-lg font-bold">
-        {{ $t('entity.world.namePlural') }}
-      </h2>
+    <section class="mt-4">
+      <Spacing size="lg">
+        <div class="flex items-center gap-3">
+          <Heading level="h2">
+            {{ $t('entity.world.namePlural') }}
+          </Heading>
 
-      <ul class="grid lg:grid-cols-2 gap-2">
-        <li v-for="world in worlds" :key="world.id">
-          <UiCard
-            class="w-full 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,
-              'bg-red-100 dark:bg-red-950 border-red-200 hover:bg-red-50 dark:hover:bg-red-900 dark:border-red-900 dark:focus-within:outline-red-900': world.color === 'red',
-              'bg-orange-100 dark:bg-orange-950 border-orange-200 hover:bg-orange-50 dark:hover:bg-orange-900 dark:border-orange-900 dark:focus-within:outline-orange-900': world.color === 'orange',
-              'bg-amber-100 dark:bg-amber-950 border-amber-200 hover:bg-amber-50 dark:hover:bg-amber-900 dark:border-amber-900 dark:focus-within:outline-amber-900': world.color === 'amber',
-              'bg-yellow-100 dark:bg-yellow-950 border-yellow-200 hover:bg-yellow-50 dark:hover:bg-yellow-900 dark:border-yellow-900 dark:focus-within:outline-yellow-900': world.color === 'yellow',
-              'bg-lime-100 dark:bg-lime-950 border-lime-200 hover:bg-lime-50 dark:hover:bg-lime-900 dark:border-lime-900 dark:focus-within:outline-lime-900': world.color === 'lime',
-              ' bg-green-100 dark:bg-green-950 border-green-200 hover:bg-green-50 dark:hover:bg-green-900 dark:border-green-900 dark:focus-within:outline-green-900': world.color === 'green',
-              'bg-emerald-100 dark:bg-emerald-950 border-emerald-200 hover:bg-emerald-50 dark:hover:bg-emerald-900 dark:border-emerald-900 dark:focus-within:outline-emerald-900': world.color === 'emerald',
-              'bg-teal-100 dark:bg-teal-950 border-teal-200 hover:bg-teal-50 dark:hover:bg-teal-900 dark:border-teal-900 dark:focus-within:outline-teal-900': world.color === 'teal',
-              'bg-cyan-100 dark:bg-cyan-950 border-cyan-200 hover:bg-cyan-50 dark:hover:bg-cyan-900 dark:border-cyan-900 dark:focus-within:outline-cyan-900': world.color === 'cyan',
-              'bg-sky-100 dark:bg-sky-950 border-sky-200 hover:bg-sky-50 dark:hover:bg-sky-900 dark:border-sky-900 dark:focus-within:outline-sky-900': world.color === 'sky',
-              'bg-blue-100 dark:bg-blue-950 border-blue-200 hover:bg-blue-50 dark:hover:bg-blue-900 dark:border-blue-900 dark:focus-within:outline-blue-900': world.color === 'blue',
-              'bg-indigo-100 dark:bg-indigo-950 border-indigo-200 hover:bg-indigo-50 dark:hover:bg-indigo-900 dark:border-indigo-900 dark:focus-within:outline-indigo-900': world.color === 'indigo',
-              'bg-violet-100 dark:bg-violet-950 border-violet-200 hover:bg-violet-50 dark:hover:bg-violet-900 dark:border-violet-900 dark:focus-within:outline-violet-900': world.color === 'violet',
-              'bg-purple-100 dark:bg-purple-950 border-purple-200 hover:bg-purple-50 dark:hover:bg-purple-900 dark:border-purple-900 dark:focus-within:outline-purple-900': world.color === 'purple',
-              'bg-fuchsia-100 dark:bg-fuchsia-950 border-fuchsia-200 hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 dark:border-fuchsia-900 dark:focus-within:outline-fuchsia-900': world.color === 'fuchsia',
-              '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',
-            }"
-          >
-            <UiCardHeader>
-              <UiCardTitle>{{ world.name }}</UiCardTitle>
-            </UiCardHeader>
-            <UiCardContent>
-              <p class="italic">{{ world.description }}</p>
-            </UiCardContent>
-          </UiCard>
-        </li>
-      </ul>
+          <UiTooltipProvider :delay-duration="250">
+            <UiTooltip>
+              <UiTooltipTrigger as-child>
+                <UiButton size="icon" class="rounded-full h-8 w-8" @click="() => isCreateWorldModalOpen = true">
+                  <PhPlus size="17"/>
+                </UiButton>
+              </UiTooltipTrigger>
+              <UiTooltipContent :side-offset="10">
+                <p>
+                  {{ $t('entity.world.addSingle') }}
+                </p>
+              </UiTooltipContent>
+            </UiTooltip>
+          </UiTooltipProvider>
+        </div>
+
+        <ul class="grid lg:grid-cols-2 gap-2">
+          <li v-for="world in worlds" :key="world.id">
+            <UiCard
+              class="w-full 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,
+                'bg-red-100 dark:bg-red-950 border-red-200 hover:bg-red-50 dark:hover:bg-red-900 dark:border-red-900 dark:focus-within:outline-red-900': world.color === 'red',
+                'bg-orange-100 dark:bg-orange-950 border-orange-200 hover:bg-orange-50 dark:hover:bg-orange-900 dark:border-orange-900 dark:focus-within:outline-orange-900': world.color === 'orange',
+                'bg-amber-100 dark:bg-amber-950 border-amber-200 hover:bg-amber-50 dark:hover:bg-amber-900 dark:border-amber-900 dark:focus-within:outline-amber-900': world.color === 'amber',
+                'bg-yellow-100 dark:bg-yellow-950 border-yellow-200 hover:bg-yellow-50 dark:hover:bg-yellow-900 dark:border-yellow-900 dark:focus-within:outline-yellow-900': world.color === 'yellow',
+                'bg-lime-100 dark:bg-lime-950 border-lime-200 hover:bg-lime-50 dark:hover:bg-lime-900 dark:border-lime-900 dark:focus-within:outline-lime-900': world.color === 'lime',
+                ' bg-green-100 dark:bg-green-950 border-green-200 hover:bg-green-50 dark:hover:bg-green-900 dark:border-green-900 dark:focus-within:outline-green-900': world.color === 'green',
+                'bg-emerald-100 dark:bg-emerald-950 border-emerald-200 hover:bg-emerald-50 dark:hover:bg-emerald-900 dark:border-emerald-900 dark:focus-within:outline-emerald-900': world.color === 'emerald',
+                'bg-teal-100 dark:bg-teal-950 border-teal-200 hover:bg-teal-50 dark:hover:bg-teal-900 dark:border-teal-900 dark:focus-within:outline-teal-900': world.color === 'teal',
+                'bg-cyan-100 dark:bg-cyan-950 border-cyan-200 hover:bg-cyan-50 dark:hover:bg-cyan-900 dark:border-cyan-900 dark:focus-within:outline-cyan-900': world.color === 'cyan',
+                'bg-sky-100 dark:bg-sky-950 border-sky-200 hover:bg-sky-50 dark:hover:bg-sky-900 dark:border-sky-900 dark:focus-within:outline-sky-900': world.color === 'sky',
+                'bg-blue-100 dark:bg-blue-950 border-blue-200 hover:bg-blue-50 dark:hover:bg-blue-900 dark:border-blue-900 dark:focus-within:outline-blue-900': world.color === 'blue',
+                'bg-indigo-100 dark:bg-indigo-950 border-indigo-200 hover:bg-indigo-50 dark:hover:bg-indigo-900 dark:border-indigo-900 dark:focus-within:outline-indigo-900': world.color === 'indigo',
+                'bg-violet-100 dark:bg-violet-950 border-violet-200 hover:bg-violet-50 dark:hover:bg-violet-900 dark:border-violet-900 dark:focus-within:outline-violet-900': world.color === 'violet',
+                'bg-purple-100 dark:bg-purple-950 border-purple-200 hover:bg-purple-50 dark:hover:bg-purple-900 dark:border-purple-900 dark:focus-within:outline-purple-900': world.color === 'purple',
+                'bg-fuchsia-100 dark:bg-fuchsia-950 border-fuchsia-200 hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 dark:border-fuchsia-900 dark:focus-within:outline-fuchsia-900': world.color === 'fuchsia',
+                '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',
+              }"
+            >
+              <UiCardHeader>
+                <UiCardTitle>{{ world.name }}</UiCardTitle>
+              </UiCardHeader>
+              <UiCardContent>
+                <p class="italic">{{ world.description }}</p>
+              </UiCardContent>
+            </UiCard>
+          </li>
+        </ul>
+      </Spacing>
     </section>
+
+    <WorldDialogCreate
+      :modal-state="isCreateWorldModalOpen"
+      @on-close="hideCreateDialog"
+    />
   </main>
 </template>
 
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index e73a5fa..9b6a158 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -25,10 +25,10 @@ watch(user, (n) => {
   }
 })
 
-const isCreateEventModalOpen = ref<boolean>(false)
+const isCreateCalendarModalOpen = ref<boolean>(false)
 
 function hideCreateDialog() {
-  isCreateEventModalOpen.value = false
+  isCreateCalendarModalOpen.value = false
 }
 
 /**
@@ -57,7 +57,7 @@ function handleDeletedCalendar(id: number) {
 }
 
 onMounted(() => {
-  calendarChannel = supabase.channel("custom-insert-channel")
+  calendarChannel = supabase.channel("realtime-calendar-channel")
     .on(
       "postgres_changes",
       { event: "*", schema: "public", table: "calendars" },
@@ -106,7 +106,9 @@ function hideDeleteModal() {
         <Title>{{ $t("entity.world.namePlural") }}</Title>
       </Head>
 
-      <Heading>Chargement...</Heading>
+      <Heading level="h1">
+        {{ $t('entity.isLoading') }}
+      </Heading>
     </template>
     <template v-else-if="world">
       <Head>
@@ -115,7 +117,7 @@ function hideDeleteModal() {
 
       <header class="lg:w-1/2 mb-8">
         <Spacing>
-          <Heading>{{ world.name }}</Heading>
+          <Heading level="h1">{{ world.name }}</Heading>
 
           <p>{{ world.description }}</p>
         </Spacing>
@@ -124,14 +126,14 @@ function hideDeleteModal() {
       <section>
         <Spacing size="lg">
           <div class="flex items-center gap-3">
-            <Heading>
+            <Heading level="h2">
               {{ $t('entity.calendar.namePlural') }}
             </Heading>
 
             <UiTooltipProvider :delay-duration="250">
               <UiTooltip>
                 <UiTooltipTrigger as-child>
-                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="() => isCreateEventModalOpen = true">
+                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="() => isCreateCalendarModalOpen = true">
                     <PhPlus size="17"/>
                   </UiButton>
                 </UiTooltipTrigger>
@@ -173,7 +175,7 @@ function hideDeleteModal() {
       </section>
     </template>
 
-    <CalendarDialogCreate :world :modal-state="isCreateEventModalOpen" @on-close="hideCreateDialog" />
+    <CalendarDialogCreate :world :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" />
     <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" />
   </main>
 </template>
diff --git a/server/api/worlds/create.post.ts b/server/api/worlds/create.post.ts
new file mode 100644
index 0000000..b182720
--- /dev/null
+++ b/server/api/worlds/create.post.ts
@@ -0,0 +1,51 @@
+import { serverSupabaseClient } from "#supabase/server";
+// import type { Calendar} from "~/models/CalendarConfig";
+import type { World } from "~/models/World";
+import { postWorldSchema } from "~/models/World";
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+  const { data: bodyData, error: schemaError } = await readValidatedBody(event, body => postWorldSchema.safeParse(body))
+
+  if (schemaError) {
+    console.log(schemaError)
+    throw createError({
+      cause: "Utilisateur",
+      fatal: false,
+      message: "Le schéma de la requête n'est pas complet ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  try {
+    const { data, error } = await client
+      .from("worlds")
+      .insert(
+        {
+          name: bodyData.name,
+          description: bodyData.description,
+          color: bodyData.color,
+          gm_id: bodyData.gmId,
+        } as never
+      )
+      .select(`
+        id,
+        name,
+        description,
+        color,
+        gmId:gm_id
+      `)
+      .single<World>()
+
+    if (error) throw error
+
+    return data
+  } catch (err) {
+    throw createError({
+      cause: "Serveur",
+      status: 500,
+      fatal: false,
+      message: "Une erreur inconnue est survenue."
+    })
+  }
+})