From 2d2069cae6d398ead301aed2fe34d54b1c72df1b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 25 Apr 2025 15:23:03 +0200
Subject: [PATCH] Fixed hydration mismatches

---
 components/calendar/SearchCTA.vue             | 26 +++++++++++++++++++
 .../calendar/dialog/QuickCreateEvent.vue      | 22 +++++++++-------
 components/calendar/menu/Menu.vue             | 20 +-------------
 3 files changed, 39 insertions(+), 29 deletions(-)
 create mode 100644 components/calendar/SearchCTA.vue

diff --git a/components/calendar/SearchCTA.vue b/components/calendar/SearchCTA.vue
new file mode 100644
index 0000000..eea4d6f
--- /dev/null
+++ b/components/calendar/SearchCTA.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+import { PhMagnifyingGlass } from "@phosphor-icons/vue"
+
+const { revealAdvancedSearch, } = useCalendar()
+
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
+</script>
+
+<template>
+  <ClientOnly>
+    <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>
+  </ClientOnly>
+</template>
diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index 875c11d..b142245 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -23,17 +23,19 @@ const breakpoints = useBreakpoints(
 </script>
 
 <template>
-  <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" />
+  <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" />
 
-    <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>
+  </ClientOnly>
 
   <UiDialog v-model:open="isDialogOpen">
     <UiDialogContent
diff --git a/components/calendar/menu/Menu.vue b/components/calendar/menu/Menu.vue
index 8f54193..501f7f4 100644
--- a/components/calendar/menu/Menu.vue
+++ b/components/calendar/menu/Menu.vue
@@ -1,15 +1,7 @@
 <script lang="ts" setup>
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { useCalendar } from "~/stores/CalendarStore"
 
-import { PhMagnifyingGlass } from "@phosphor-icons/vue"
-
-const { revealAdvancedSearch, } = useCalendar()
 const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
-
-const breakpoints = useBreakpoints(
-  breakpointsTailwind
-)
 </script>
 
 <template>
@@ -29,17 +21,7 @@ const breakpoints = useBreakpoints(
 
       <menu class="flex items-center gap-2">
         <li>
-          <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>
+          <CalendarSearchCTA />
         </li>
         <li>
           <CalendarCategoriesCTA />