From a83bc240b1de6cb348073ebb69cb1bea7de104ed Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 3 Mar 2025 12:35:59 +0100
Subject: [PATCH] Added ui card to add worlds / calendars

---
 components/global/AddCard.vue | 21 +++++++++++++++++++++
 components/ui/card/Card.vue   |  9 ++++++++-
 i18n.config.ts                |  2 ++
 pages/my/index.vue            | 22 ++++++----------------
 pages/my/worlds/[id].vue      | 26 ++++++++------------------
 5 files changed, 45 insertions(+), 35 deletions(-)
 create mode 100644 components/global/AddCard.vue

diff --git a/components/global/AddCard.vue b/components/global/AddCard.vue
new file mode 100644
index 0000000..d2d8955
--- /dev/null
+++ b/components/global/AddCard.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { PhPlusCircle } from "@phosphor-icons/vue";
+
+const emit = defineEmits(["on-click"])
+</script>
+
+<template>
+  <UiCard
+    class="h-full w-fit transition-all bg-transparent dark:hover:bg-gray-950 dark:focus-within:outline-gray-900 hover:-translate-y-0"
+    has-click
+    @on-click="emit('on-click')"
+  >
+    <UiCardHeader class="h-full justify-center items-center text-center gap-0">
+      <PhPlusCircle size="38" weight="fill" />
+
+      <UiCardTitle class="text-xl">
+        <slot />
+      </UiCardTitle>
+    </UiCardHeader>
+  </UiCard>
+</template>
diff --git a/components/ui/card/Card.vue b/components/ui/card/Card.vue
index ca0812f..6a0bdf5 100644
--- a/components/ui/card/Card.vue
+++ b/components/ui/card/Card.vue
@@ -5,7 +5,10 @@ import { cn } from "@/lib/utils"
 const props = defineProps<{
   class?: HTMLAttributes["class"]
   link?: string
+  hasClick?: boolean
 }>()
+
+const emit = defineEmits(["on-click"])
 </script>
 
 <template>
@@ -13,7 +16,7 @@ const props = defineProps<{
     :class="
       cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all isolate', props.class, {
         'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]':
-          props.link
+          props.link || props.hasClick
       })
     "
   >
@@ -24,5 +27,9 @@ const props = defineProps<{
       :to="props.link"
       class="absolute inset-0 z-10 focus-visible:outline-none"
     />
+    <button
+      v-if="props.hasClick"
+      class="absolute inset-0 z-10 focus-visible:outline-none"
+      @click="emit('on-click')" />
   </div>
 </template>
diff --git a/i18n.config.ts b/i18n.config.ts
index b7d716e..51e6b2e 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -81,6 +81,7 @@ export default defineI18nConfig(() => ({
           nameSingular: "World",
           namePlural: "Worlds",
           addSingle: "Add a world",
+          editSingle: "Edit world",
           notFound: "World not found",
           notFoundDescription: "The link is not valid or the world has been deleted / archived.",
           backToList: "Go back to worlds",
@@ -331,6 +332,7 @@ export default defineI18nConfig(() => ({
           nameSingular: "Monde",
           namePlural: "Mondes",
           addSingle: "Ajouter un monde",
+          editSingle: "Modifier le monde",
           notFound: "Aucun monde trouvé",
           notFoundDescription: "Le lien n'est pas valide ou le monde a été supprimé / archivé.",
           backToList: "Retourner aux mondes",
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 6b619fb..dcd64ce 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhPencil, PhPlus, PhTrash } from "@phosphor-icons/vue";
+import { PhPencil, PhTrash } from "@phosphor-icons/vue";
 import type { RealtimeChannel } from "@supabase/supabase-js"
 import type { World } from "~/models/World";
 
@@ -129,21 +129,6 @@ function hideEditModal() {
           <Heading level="h2">
             {{ $t('entity.world.namePlural') }}
           </Heading>
-
-          <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 v-if="worlds?.data" class="grid lg:grid-cols-3 gap-2">
@@ -192,6 +177,11 @@ function hideEditModal() {
               </UiCardContent>
             </UiCard>
           </li>
+          <li class="w-fit">
+            <AddCard @on-click="() => isCreateWorldModalOpen = true">
+              {{ $t('entity.world.addSingle') }}
+            </AddCard>
+          </li>
         </ul>
       </Spacing>
     </section>
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 05f655a..df4f667 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -2,7 +2,7 @@
 import type { RealtimeChannel } from "@supabase/supabase-js"
 import type { World } from "~/models/World";
 import type { Calendar } from "~/models/CalendarConfig";
-import { PhArrowBendDoubleUpLeft, PhGlobeHemisphereWest, PhPencil, PhPlus, PhTrash } from "@phosphor-icons/vue";
+import { PhArrowBendDoubleUpLeft, PhGlobeHemisphereWest, PhPencil, PhTrash } from "@phosphor-icons/vue";
 
 const supabase = useSupabaseClient()
 const route = useRoute()
@@ -166,9 +166,9 @@ function hideEditModal() {
                     <PhPencil size="17" weight="fill" />
                   </UiButton>
                 </UiTooltipTrigger>
-                <UiTooltipContent :side-offset="10">
+                <UiTooltipContent :side-offset="12" side="right">
                   <p>
-                    {{ $t('entity.calendar.addSingle') }}
+                    {{ $t('entity.world.editSingle') }}
                   </p>
                 </UiTooltipContent>
               </UiTooltip>
@@ -185,21 +185,6 @@ function hideEditModal() {
             <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="() => isCreateCalendarModalOpen = true">
-                    <PhPlus size="17"/>
-                  </UiButton>
-                </UiTooltipTrigger>
-                <UiTooltipContent :side-offset="10">
-                  <p>
-                    {{ $t('entity.calendar.addSingle') }}
-                  </p>
-                </UiTooltipContent>
-              </UiTooltip>
-            </UiTooltipProvider>
           </div>
 
           <ul v-if="world.data.calendars && world.data.calendars?.length > 0" class="grid md:grid-cols-3 gap-2">
@@ -221,6 +206,11 @@ function hideEditModal() {
                 </UiCardContent>
               </UiCard>
             </li>
+            <li class="w-fit">
+              <AddCard @on-click="() => isCreateCalendarModalOpen = true">
+                {{ $t('entity.calendar.addSingle') }}
+              </AddCard>
+            </li>
           </ul>
           <template v-else>
             <p class="pl-6 opacity-75 italic">