Fixed crash with function stringify

components/calendar/Calendar.vue

@@ -2,6 +2,7 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed, type Component, type ComputedRef } from 'vue'
 
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import MonthlyLayout from './state/monthly/Layout.vue'
 import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
@@ -85,8 +86,18 @@ const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   }
 })
 
+const { setCurrentMenu } = useUiStore()
+
 onMounted(() => {
   jumpToDate(selectedDate)
+
+  setCurrentMenu([
+    {
+      phIcon: PhMagnifyingGlass,
+      tooltip: 'Recherche avancée',
+      action: 'event-search'
+    }
+  ])
 })
 </script>
 
@@ -107,8 +118,8 @@ onMounted(() => {
       </div>
     </template>
 
-    <CalendarSearch />
-    <CalendarFormUpdateEvent />
-    <CalendarFormDeleteEvent />
+    <LazyCalendarSearch />
+    <LazyCalendarFormUpdateEvent />
+    <LazyCalendarFormDeleteEvent />
   </div>
 </template>

components/calendar/CalendarEvent.vue

@@ -65,7 +65,7 @@ function handleClosePopover() {
       </button>
     </UiPopoverTrigger>
 
-    <CalendarEventDetails
+    <LazyCalendarEventDetails
       :event
       :spans-multiple-days
       :is-start-event

components/global/sidebar/Sidebar.vue

@@ -1,7 +1,15 @@
 <script lang="ts" setup>
 import { PhHouse, PhList } from '@phosphor-icons/vue'
+import type { SidebarMenuActionType } from './SidebarProps';
 
+const { revealAdvancedSearch } = useCalendar()
 const { currentMenu } = storeToRefs(useUiStore())
+
+function handleMenuItemAction(actionType: SidebarMenuActionType) {
+  if (actionType === 'event-search') {
+    revealAdvancedSearch()
+  }
+}
 </script>
 
 <template>
@@ -39,7 +47,7 @@ const { currentMenu } = storeToRefs(useUiStore())
                   <component :is="item.phIcon" size="24" weight="fill" />
                 </RouterLink>
               </UiButton>
-              <UiButton v-if="item.clickHandler" variant="ghost" size="icon" class="rounded-full" @click="item.clickHandler">
+              <UiButton v-if="item.action" variant="ghost" size="icon" class="rounded-full" @click="handleMenuItemAction(item.action!)">
                 <component :is="item.phIcon" size="24" weight="fill" />
               </UiButton>
             </UiTooltipTrigger>

components/global/sidebar/SidebarProps.ts

@@ -1,7 +1,9 @@
+export type SidebarMenuActionType = "event-search"
+
 export interface SidebarMenuItem {
   phIcon: Component
   tooltip: string
-  clickHandler?: () => void
+  action?: SidebarMenuActionType
   to?: string
 }
 

pages/calendar/[id].vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { PhMagnifyingGlass } from '@phosphor-icons/vue';
-
 useHead({
   title: 'Calendrier'
 })
@@ -15,17 +13,6 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
-
-const { setCurrentMenu } = useUiStore()
-const { revealAdvancedSearch } = useCalendar()
-
-setCurrentMenu([
-  {
-    phIcon: PhMagnifyingGlass,
-    tooltip: 'Recherche avancée',
-    clickHandler: revealAdvancedSearch
-  }
-])
 </script>
 
 <template>