From ee29169f4f92e6a0c65b5eb197a804bcf05e990d Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 25 Apr 2025 15:38:37 +0200
Subject: [PATCH] Added transitions for client only buttons

---
 components/calendar/SearchCTA.vue             | 22 ++++++++++---------
 .../calendar/dialog/QuickCreateEvent.vue      | 22 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/components/calendar/SearchCTA.vue b/components/calendar/SearchCTA.vue
index eea4d6f..0738ed9 100644
--- a/components/calendar/SearchCTA.vue
+++ b/components/calendar/SearchCTA.vue
@@ -11,16 +11,18 @@ const breakpoints = useBreakpoints(
 
 <template>
   <ClientOnly>
-    <UiButton
-      :search-slash="breakpoints.lg.value"
-      :size="breakpoints.lg.value ? 'default' : 'icon'"
-      @click="revealAdvancedSearch()"
-    >
-      <PhMagnifyingGlass size="20" weight="light" />
+    <Transition name="fade" appear>
+      <UiButton
+        :search-slash="breakpoints.lg.value"
+        :size="breakpoints.lg.value ? 'default' : 'icon'"
+        @click="revealAdvancedSearch()"
+      >
+        <PhMagnifyingGlass size="20" weight="light" />
 
-      <span class="max-lg:hidden">
-        {{ $t('entity.advancedSearch.title') }}
-      </span>
-    </UiButton>
+        <span class="max-lg:hidden">
+          {{ $t('entity.advancedSearch.title') }}
+        </span>
+      </UiButton>
+    </Transition>
   </ClientOnly>
 </template>
diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index b142245..46ad36d 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -24,17 +24,19 @@ const breakpoints = useBreakpoints(
 
 <template>
   <ClientOnly>
-    <UiButton
-      class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl"
-      :size="breakpoints.lg.value ? 'default' : 'icon'"
-      @click="toggleDialog"
-    >
-      <PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" />
+    <Transition name="fade" appear>
+      <UiButton
+        class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl"
+        :size="breakpoints.lg.value ? 'default' : 'icon'"
+        @click="toggleDialog"
+      >
+        <PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" />
 
-      <strong class="font-semibold max-lg:hidden">
-        {{ $t("entity.calendar.event.newEvent") }}
-      </strong>
-    </UiButton>
+        <strong class="font-semibold max-lg:hidden">
+          {{ $t("entity.calendar.event.newEvent") }}
+        </strong>
+      </UiButton>
+    </Transition>
   </ClientOnly>
 
   <UiDialog v-model:open="isDialogOpen">