From 4a4433dcddd38a2b5326e28e681789651495264c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 7 Jun 2024 19:35:49 +0200
Subject: [PATCH 1/6] Moved Sidebar to top of app

This prevents flicker and stops useless rerender of the component
---
 app.vue                                       |  6 +++-
 components/global/{ => sidebar}/Sidebar.vue   | 27 ++---------------
 .../global/{ => sidebar}/SidebarProps.ts      |  4 +--
 pages/calendar-old.vue                        | 30 -------------------
 pages/calendar/[id].vue                       | 12 +++-----
 pages/index.vue                               |  7 ++---
 pages/profile.vue                             | 12 +++-----
 stores/UiStore.ts                             | 14 +++++++++
 8 files changed, 35 insertions(+), 77 deletions(-)
 rename components/global/{ => sidebar}/Sidebar.vue (70%)
 rename components/global/{ => sidebar}/SidebarProps.ts (66%)
 delete mode 100644 pages/calendar-old.vue
 create mode 100644 stores/UiStore.ts

diff --git a/app.vue b/app.vue
index ffcefe3..32cc913 100644
--- a/app.vue
+++ b/app.vue
@@ -35,7 +35,11 @@ const useIdFunction = () => useId()
 
     <NuxtLayout>
       <ConfigProvider :use-id="useIdFunction">
-        <NuxtPage/>
+        <div class="h-full grid grid-cols-[auto_1fr]">
+          <Sidebar />
+
+          <NuxtPage/>
+        </div>
       </ConfigProvider>
     </NuxtLayout>
   </div>
diff --git a/components/global/Sidebar.vue b/components/global/sidebar/Sidebar.vue
similarity index 70%
rename from components/global/Sidebar.vue
rename to components/global/sidebar/Sidebar.vue
index 56142fb..5676f49 100644
--- a/components/global/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { PhHouse, PhList } from '@phosphor-icons/vue'
-import type { SidebarProps } from './SidebarProps';
 
-defineProps<SidebarProps>()
+const { currentMenu } = storeToRefs(useUiStore())
 </script>
 
 <template>
@@ -14,7 +13,7 @@ defineProps<SidebarProps>()
         </UiButton>
       </li>
 
-      <li v-if="!isHome">
+      <li>
         <UiTooltipProvider :delay-duration="100">
           <UiTooltip>
             <UiTooltipTrigger as-child>
@@ -31,7 +30,7 @@ defineProps<SidebarProps>()
         </UiTooltipProvider>
       </li>
 
-      <li v-for="(item, i) in menuItems" :key="i">
+      <li v-for="(item, i) in currentMenu" :key="i">
         <UiTooltipProvider :delay-duration="100">
           <UiTooltip>
             <UiTooltipTrigger as-child>
@@ -50,26 +49,6 @@ defineProps<SidebarProps>()
           </UiTooltip>
         </UiTooltipProvider>
       </li>
-
-      <!-- <li>
-        <UiTooltipProvider :delay-duration="100">
-          <UiTooltip>
-            <UiTooltipTrigger as-child>
-              <UiButton
-                variant="ghost"
-                size="icon"
-                class="rounded-full"
-                @click="revealAdvancedSearch()"
-              >
-                <PhMagnifyingGlass size="24" weight="fill" />
-              </UiButton>
-            </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'">
-              <p>Recherche avancée</p>
-            </UiTooltipContent>
-          </UiTooltip>
-        </UiTooltipProvider>
-      </li> -->
     </menu>
 
     <UserCTA />
diff --git a/components/global/SidebarProps.ts b/components/global/sidebar/SidebarProps.ts
similarity index 66%
rename from components/global/SidebarProps.ts
rename to components/global/sidebar/SidebarProps.ts
index adcfce0..0e8b992 100644
--- a/components/global/SidebarProps.ts
+++ b/components/global/sidebar/SidebarProps.ts
@@ -1,4 +1,4 @@
-export interface MenuItem {
+export interface SidebarMenuItem {
   phIcon: Component
   tooltip: string
   clickHandler?: () => void
@@ -6,6 +6,6 @@ export interface MenuItem {
 }
 
 export interface SidebarProps {
-  menuItems: MenuItem[],
+  menuItems: SidebarMenuItem[],
   isHome?: boolean
 }
diff --git a/pages/calendar-old.vue b/pages/calendar-old.vue
deleted file mode 100644
index 0737a76..0000000
--- a/pages/calendar-old.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { useCalendar } from '@/stores/CalendarStore'
-import type { MenuItem } from '~/components/global/SidebarProps';
-import { PhMagnifyingGlass } from '@phosphor-icons/vue'
-
-const { revealAdvancedSearch } = useCalendar()
-const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
-
-useHead({
-  title: 'Calendar'
-})
-
-const sidebarMenu: MenuItem[] = [
-  {
-    phIcon: PhMagnifyingGlass,
-    tooltip: 'Recherche avancée',
-    clickHandler: revealAdvancedSearch
-  }
-]
-</script>
-
-<template>
-  <main class="h-full grid grid-cols-[auto_1fr]">
-    <Sidebar :menu-items="sidebarMenu" />
-    <Calendar />
-
-    <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />
-  </main>
-</template>
diff --git a/pages/calendar/[id].vue b/pages/calendar/[id].vue
index 0187568..31c08b3 100644
--- a/pages/calendar/[id].vue
+++ b/pages/calendar/[id].vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { PhMagnifyingGlass } from '@phosphor-icons/vue';
-import type { MenuItem } from '~/components/global/SidebarProps';
 
 useHead({
   title: 'Calendrier'
@@ -17,21 +16,18 @@ watch(user, (n, _o) => {
   }
 })
 
+const { setCurrentMenu } = useUiStore()
 const { revealAdvancedSearch } = useCalendar()
 
-const sidebarMenu: MenuItem[] = [
+setCurrentMenu([
   {
     phIcon: PhMagnifyingGlass,
     tooltip: 'Recherche avancée',
     clickHandler: revealAdvancedSearch
   }
-]
+])
 </script>
 
 <template>
-  <div class="h-full grid grid-cols-[auto_1fr]">
-    <Sidebar :menu-items="sidebarMenu" />
-
-    <Calendar />
-  </div>
+  <Calendar />
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 10c9254..c0edf24 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,15 +1,14 @@
 <script lang="ts" setup>
-import type { MenuItem } from '~/components/global/SidebarProps';
-
 useHead({
   title: 'Dashboard'
 })
 
-const sidebarMenu: MenuItem[] = []
+const { setCurrentMenu } = useUiStore()
+setCurrentMenu([])
 </script>
 
 <template>
   <main class="h-full grid grid-cols-[auto_1fr]">
-    <Sidebar :menu-items="sidebarMenu" is-home />
+    Test
   </main>
 </template>
diff --git a/pages/profile.vue b/pages/profile.vue
index 4247710..7b62bc0 100644
--- a/pages/profile.vue
+++ b/pages/profile.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { MenuItem } from '~/components/global/SidebarProps';
-
 const user = useSupabaseUser()
 
 useHead({
@@ -17,13 +15,11 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
-const sidebarMenu: MenuItem[] = []
+
+const { setCurrentMenu } = useUiStore()
+setCurrentMenu([])
 </script>
 
 <template>
-  <div class="h-full grid grid-cols-[auto_1fr]">
-    <Sidebar :menu-items="sidebarMenu" />
-
-    <ProfileDashboard />
-  </div>
+  <ProfileDashboard />
 </template>
diff --git a/stores/UiStore.ts b/stores/UiStore.ts
new file mode 100644
index 0000000..3b005fe
--- /dev/null
+++ b/stores/UiStore.ts
@@ -0,0 +1,14 @@
+import type { SidebarMenuItem } from "~/components/global/sidebar/SidebarProps"
+
+export const useUiStore = defineStore('ui', () => {
+  const currentMenu: Ref<SidebarMenuItem[]> = ref<SidebarMenuItem[]>([])
+
+  function setCurrentMenu(items: SidebarMenuItem[]) {
+    currentMenu.value = items
+  }
+
+  return {
+    currentMenu,
+    setCurrentMenu
+  }
+})

From f963116018b5531dbfe3a116ea7f9e752016b4ae Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 7 Jun 2024 19:40:55 +0200
Subject: [PATCH 2/6] Closed user menu on select profile

---
 components/global/user/CTA.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index 72b76ee..d2618db 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -44,6 +44,8 @@ async function handleLogout() {
 
 function gotoProfilePage() {
   router.push({ path: '/profile' })
+
+  closeMenu()
 }
 </script>
 

From 3002ae593c591ccfee5c089a41aba3fcc605246a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 14:18:19 +0200
Subject: [PATCH 3/6] Fixed crash with function stringify

---
 components/calendar/Calendar.vue          | 17 ++++++++++++++---
 components/calendar/CalendarEvent.vue     |  2 +-
 components/global/sidebar/Sidebar.vue     | 10 +++++++++-
 components/global/sidebar/SidebarProps.ts |  4 +++-
 pages/calendar/[id].vue                   | 13 -------------
 5 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 202e877..950b36b 100644
--- a/components/calendar/Calendar.vue
+++ b/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>
diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index 2127b68..03e1795 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -65,7 +65,7 @@ function handleClosePopover() {
       </button>
     </UiPopoverTrigger>
 
-    <CalendarEventDetails
+    <LazyCalendarEventDetails
       :event
       :spans-multiple-days
       :is-start-event
diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index 5676f49..8be84ff 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/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>
diff --git a/components/global/sidebar/SidebarProps.ts b/components/global/sidebar/SidebarProps.ts
index 0e8b992..4414df0 100644
--- a/components/global/sidebar/SidebarProps.ts
+++ b/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
 }
 
diff --git a/pages/calendar/[id].vue b/pages/calendar/[id].vue
index 31c08b3..8b233ee 100644
--- a/pages/calendar/[id].vue
+++ b/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>

From 9314a8c3c2e1e8a81e2830e7f62dfda43e9b5b62 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 14:33:34 +0200
Subject: [PATCH 4/6] Removed unfinished view types

---
 stores/CalendarStore.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts
index 2d9fd4f..de29cf1 100644
--- a/stores/CalendarStore.ts
+++ b/stores/CalendarStore.ts
@@ -31,9 +31,7 @@ export const useCalendar = defineStore('calendar', () => {
   })
   const viewTypeOptions: Set<CalendarViewType> = new Set<CalendarViewType>([
     'month',
-    'year',
-    'decade',
-    'century'
+    'year'
   ])
 
   const calendarId = ref<number>(0)

From 9aa2d261350482794e959da1bee4b88e76a9a193 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 14:49:52 +0200
Subject: [PATCH 5/6] Added break-words and hypens to prevent event cta from
 overflowing

---
 app.vue                               | 3 +++
 components/calendar/CalendarEvent.vue | 2 +-
 pages/index.vue                       | 4 ++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app.vue b/app.vue
index 32cc913..3dfef03 100644
--- a/app.vue
+++ b/app.vue
@@ -5,6 +5,9 @@ useHead({
   titleTemplate: (titleChunk) => {
     return titleChunk ? `${titleChunk} — TTTools` : 'TTTools';
   },
+  htmlAttrs: {
+    lang: 'fr'
+  },
   meta: [
     { name: "charset", content: "UTF-8" },
     { name: "viewport", content: "width=device-width, initial-scale=1.0" },
diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index 03e1795..736b6cb 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -59,7 +59,7 @@ function handleClosePopover() {
           })
         "
       >
-        <div class="line-clamp-2">
+        <div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
           {{ eventTitle }}
         </div>
       </button>
diff --git a/pages/index.vue b/pages/index.vue
index c0edf24..a717792 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,7 +8,7 @@ setCurrentMenu([])
 </script>
 
 <template>
-  <main class="h-full grid grid-cols-[auto_1fr]">
-    Test
+  <main class="p-8">
+    <Heading>TTTools</Heading>
   </main>
 </template>

From 4c0a4031a1180f51431b5061c8006b3ded6f5ff2 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 15:01:15 +0200
Subject: [PATCH 6/6] Reinstated isHome check on sidebar

---
 components/global/sidebar/Sidebar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index 8be84ff..fc92882 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -2,6 +2,12 @@
 import { PhHouse, PhList } from '@phosphor-icons/vue'
 import type { SidebarMenuActionType } from './SidebarProps';
 
+const route = useRoute()
+
+const isHome = computed<boolean>(() => {
+  return route.fullPath === '/'
+})
+
 const { revealAdvancedSearch } = useCalendar()
 const { currentMenu } = storeToRefs(useUiStore())
 
@@ -21,7 +27,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         </UiButton>
       </li>
 
-      <li>
+      <li v-if="!isHome">
         <UiTooltipProvider :delay-duration="100">
           <UiTooltip>
             <UiTooltipTrigger as-child>