From e634cc812735cfc6a6cce9333b11588885887413 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 25 Apr 2025 16:56:09 +0200
Subject: [PATCH] Fixed some inconsistencies

---
 components/calendar/PreviewCard.vue | 67 ++++++++++++++++++-----------
 components/ui/card/Card.vue         | 13 +++---
 components/world/PreviewCard.vue    | 47 ++++++++++++--------
 pages/explore.vue                   |  6 +--
 pages/index.vue                     |  2 +-
 pages/my/index.vue                  |  2 +-
 pages/my/worlds/[id].vue            |  2 +-
 7 files changed, 84 insertions(+), 55 deletions(-)

diff --git a/components/calendar/PreviewCard.vue b/components/calendar/PreviewCard.vue
index c2efa8e..9b2ef15 100644
--- a/components/calendar/PreviewCard.vue
+++ b/components/calendar/PreviewCard.vue
@@ -1,37 +1,51 @@
 <script lang="ts" setup>
-import { cn } from "~/lib/utils";
-import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
-import { DateTime } from "luxon";
-import type { Calendar } from "~/models/CalendarConfig";
+import { cn } from "~/lib/utils"
+import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"
+import { DateTime } from "luxon"
+import type { Calendar } from "~/models/CalendarConfig"
 
 const props = defineProps<{
-  calendar: Calendar,
-  gmId?: string,
-  showActions?: boolean,
+  calendar: Calendar
+  gmId?: string
+  showActions?: boolean
 }>()
 
 const emit = defineEmits(["on-edit", "on-delete"])
 
-const { locale } = useI18n();
+const cardRef = ref(null)
+const isCardHovered = useElementHover(cardRef)
+const { focused: isCardFocused } = useFocusWithin(cardRef)
 
-const createdAt = DateTime.fromISO(props.calendar.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value });
-const updatedAt = computed<string>(() => props.calendar.updatedAt ? DateTime.fromISO(props.calendar.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "");
+const { locale } = useI18n()
 
-const user = useSupabaseUser();
-const isOwner = computed(() => user.value && props.gmId && user.value.id === props.gmId);
-const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calendar.id}` : `/calendars/${props.calendar.shortId}`);
+const createdAt = DateTime.fromISO(props.calendar.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value })
+const updatedAt = computed<string>(() => props.calendar.updatedAt ? DateTime.fromISO(props.calendar.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "")
+
+const user = useSupabaseUser()
+const isOwner = computed(() => user.value && props.gmId && user.value.id === props.gmId)
+const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calendar.id}` : `/calendars/${props.calendar.shortId}`)
+
+const hasActions = computed(() => isOwner.value && props.showActions)
 </script>
 
 <template>
   <UiCard
-    class="w-full h-full flex flex-col transition-all"
+    ref="cardRef"
+    class="w-full h-full flex flex-col"
     :link="calendarLink"
     :class="cn(
-      calendar.color ? `card-color element-${calendar.color}` : '',
+      calendar.color ? `group card-color element-${calendar.color}` : '',
     )"
   >
     <UiCardHeader class="gap-4">
-      <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
+      <UiCardTitle
+        class="text-xl"
+        :class="cn({
+          'pr-18': hasActions
+        })"
+      >
+        {{ calendar.name }}
+      </UiCardTitle>
 
       <div v-if="calendar.state === 'published'" class="flex items-center gap-1 text-sm">
         <PhFile size="20" weight="fill" />
@@ -55,16 +69,19 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
       </p>
 
       <div
-        v-if="isOwner && showActions"
-        class="flex gap-1 absolute top-4 right-4 z-20"
+        v-if="hasActions && (isCardHovered || isCardFocused)"
+        class="flex gap-2 absolute top-4 right-4 z-20"
       >
-        <UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-indigo-400 dark:hover:bg-indigo-700" @click="emit('on-edit')">
-          <PhPencil size="16" />
-        </UiButton>
-
-        <UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="emit('on-delete')">
-          <PhTrash size="16" />
-        </UiButton>
+        <Transition name="fade" appear>
+          <UiButton size="icon" variant="outline" class="size-8 border-foreground/20 group-hover:border-foreground/30 hover:text-background hover:border-foreground hover:bg-foreground" @click="emit('on-edit')">
+            <PhPencil size="15" weight="fill" />
+          </UiButton>
+        </Transition>
+        <Transition name="fade" appear>
+          <UiButton size="icon" variant="outline" class="size-8 border-foreground/25 group-hover:border-foreground/40 hover:text-background hover:border-rose-500 hover:bg-rose-500" @click="emit('on-delete')">
+            <PhTrash size="15" weight="fill" />
+          </UiButton>
+        </Transition>
       </div>
     </UiCardContent>
 
diff --git a/components/ui/card/Card.vue b/components/ui/card/Card.vue
index fca3e79..a54e955 100644
--- a/components/ui/card/Card.vue
+++ b/components/ui/card/Card.vue
@@ -15,21 +15,22 @@ const emit = defineEmits(["on-click"])
   <div
     :class="
       cn('rounded-lg border bg-card text-card-foreground shadow-xs transition-all isolate', props.class, {
-        'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]':
+        'relative hover:-translate-y-[.2rem]':
           props.link || props.hasClick
       })
     "
   >
-    <slot />
-
     <NuxtLink
       v-if="props.link"
       :to="props.link"
-      class="absolute inset-0 z-10 focus-visible:outline-hidden cursor-pointer"
+      class="rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 absolute inset-0 z-10 cursor-pointer"
     />
     <button
       v-if="props.hasClick"
-      class="absolute inset-0 z-10 focus-visible:outline-hidden cursor-pointer"
-      @click="emit('on-click')" />
+      class="rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 absolute inset-0 z-10 cursor-pointer"
+      @click="emit('on-click')"
+    />
+
+    <slot />
   </div>
 </template>
diff --git a/components/world/PreviewCard.vue b/components/world/PreviewCard.vue
index 6580b85..94a3eab 100644
--- a/components/world/PreviewCard.vue
+++ b/components/world/PreviewCard.vue
@@ -1,23 +1,28 @@
 <script lang="ts" setup>
-import { PhArchive, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
-import type { World } from "~/models/World";
-import { DateTime } from "luxon";
-import { cn } from "~/lib/utils";
+import { PhArchive, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"
+import type { World } from "~/models/World"
+import { DateTime } from "luxon"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   world: World
-}>();
+}>()
 
-const emit = defineEmits(["on-edit", "on-delete"]);
+const emit = defineEmits(["on-edit", "on-delete"])
 
-const { locale } = useI18n();
-const createdAt = DateTime.fromISO(props.world.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value });
-const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromISO(props.world.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "");
+const cardRef = ref(null)
+const isCardHovered = useElementHover(cardRef)
+const { focused: isCardFocused } = useFocusWithin(cardRef)
+
+const { locale } = useI18n()
+const createdAt = DateTime.fromISO(props.world.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value })
+const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromISO(props.world.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "")
 </script>
 
 <template>
   <UiCard
-    class="w-full h-full flex flex-col transition-all"
+    ref="cardRef"
+    class="w-full h-full flex flex-col"
     :link="`/my/worlds/${world.id}`"
     :class="cn(
       world.color ? `card-color element-${world.color}` : '',
@@ -44,14 +49,20 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
     <UiCardContent class="grow">
       <p class="italic">{{ world.description }}</p>
 
-      <div class="flex gap-1 absolute top-4 right-4 z-20">
-        <UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-indigo-400 dark:hover:bg-indigo-700" @click="emit('on-edit')">
-          <PhPencil size="16" />
-        </UiButton>
-
-        <UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="emit('on-delete')">
-          <PhTrash size="16" />
-        </UiButton>
+      <div
+        v-if="isCardHovered || isCardFocused"
+        class="flex gap-2 absolute top-4 right-4 z-20"
+      >
+        <Transition name="fade" appear>
+          <UiButton size="icon" variant="outline" class="size-8 border-foreground/20 group-hover:border-foreground/30 hover:text-background hover:border-foreground hover:bg-foreground" @click="emit('on-edit')">
+            <PhPencil size="15" weight="fill" />
+          </UiButton>
+        </Transition>
+        <Transition name="fade" appear>
+          <UiButton size="icon" variant="outline" class="size-8 border-foreground/25 group-hover:border-foreground/40 hover:text-background hover:border-rose-500 hover:bg-rose-500" @click="emit('on-delete')">
+            <PhTrash size="15" weight="fill" />
+          </UiButton>
+        </Transition>
       </div>
     </UiCardContent>
 
diff --git a/pages/explore.vue b/pages/explore.vue
index b487220..6128ce8 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -11,7 +11,7 @@ const isLoading = computed(() => calendarStatus.value === "pending")
 </script>
 
 <template>
-  <main class="p-8">
+  <main class="py-8 px-5 md:px-8">
     <Head>
       <Title>{{ $t("pages.explore.title") }}</Title>
     </Head>
@@ -26,10 +26,10 @@ const isLoading = computed(() => calendarStatus.value === "pending")
           {{ $t("entity.calendar.namePublicPlural") }}
         </Heading>
 
-          <div v-if="isLoading" class="grid md:grid-cols-3 gap-2">
+          <div v-if="isLoading" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
             <LoadingCard />
           </div>
-          <ul v-else-if="availableCalendars?.data" class="grid md:grid-cols-3 gap-2">
+          <ul v-else-if="availableCalendars?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
             <li v-for="calendar in availableCalendars.data" :key="calendar.shortId">
               <CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
             </li>
diff --git a/pages/index.vue b/pages/index.vue
index a1e58b2..94cfaab 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -9,7 +9,7 @@ definePageMeta({
 </script>
 
 <template>
-  <main class="p-8">
+  <main class="py-8 px-5 md:px-8">
     <Head>
       <Title>
         TTTools — {{ $t('head.title') }}
diff --git a/pages/my/index.vue b/pages/my/index.vue
index b0e1fe9..52ca22b 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -110,7 +110,7 @@ function hideEditModal() {
 </script>
 
 <template>
-  <main class="p-8">
+  <main class="py-8 px-5 md:px-8">
     <Head>
       <Title>{{ $t("pages.profile.metaTitle") }}</Title>
     </Head>
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 5a45cee..2fa70c6 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -163,7 +163,7 @@ function hideEditModal() {
 </script>
 
 <template>
-  <main class="p-8">
+  <main class="py-8 px-5 md:px-8">
     <template v-if="status === 'pending'">
       <Head>
         <Title>{{ $t("entity.world.namePlural") }}</Title>