Added ui card to add worlds / calendars

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>

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>

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

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>

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