From e978acfc717d18722ca93aa6a0e9f3d609137343 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 20 Aug 2024 09:15:05 +0200
Subject: [PATCH] Refactored the store system

---
 components/calendar/Calendar.vue              | 118 +-----
 components/calendar/CalendarEvent.vue         |   5 +-
 components/calendar/CalendarEventDetails.vue  |   5 +-
 components/calendar/CalendarMenuSubnav.vue    |   5 +-
 components/calendar/CalendarMenuToday.vue     |   4 +-
 components/calendar/form/CreateEvent.vue      |   4 +-
 components/calendar/form/DeleteEvent.vue      |   6 +-
 components/calendar/form/UpdateEvent.vue      |   6 +-
 components/calendar/input/EventCategories.vue |   2 +-
 components/calendar/input/EventCategory.vue   |   2 +-
 components/calendar/search/CalendarSearch.vue |   5 +-
 .../calendar/search/lists/EventCallout.vue    |   5 +-
 components/calendar/state/monthly/DayTile.vue |   5 +-
 components/calendar/state/monthly/Layout.vue  |   5 +-
 components/calendar/state/yearly/DayTile.vue  |   9 +-
 components/global/sidebar/Sidebar.vue         |  20 +-
 components/global/sidebar/SidebarProps.ts     |   2 +-
 models/Date.ts                                |   2 +-
 .../[id]/calendar.vue => calendar/[id].vue}   |   8 +-
 pages/i/index.vue                             |   3 -
 pages/i/world/{[id]/index.vue => [id].vue}    |   5 +-
 pages/index.vue                               |   3 -
 server/api/calendars/events/query.get.ts      |  12 +-
 server/api/calendars/query.get.ts             |  65 ++--
 stores/CalendarStore.ts                       | 336 +++++++++++++++++-
 stores/EventStore.ts                          |  44 ++-
 26 files changed, 446 insertions(+), 240 deletions(-)
 rename pages/i/{world/[id]/calendar.vue => calendar/[id].vue} (53%)
 rename pages/i/world/{[id]/index.vue => [id].vue} (96%)

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 09f93b1..10034a9 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -2,93 +2,15 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed, type Component, type ComputedRef } from 'vue'
 
-import { PhMagnifyingGlass } from '@phosphor-icons/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'
 import YearLayout from './state/yearly/Layout.vue'
 
-const route = useRoute()
-const worldId = route.params.id
+const { currentConfig, selectedDate, jumpToDate } = useCalendar()
 
-const { setCalendarId, setMonths, setDefaultDate, currentConfig, selectedDate, jumpToDate } = useCalendar()
-const { setEvents, setCategories } = useCalendarEvents()
-const { setCharacters } = useCharacters()
-
-const { months } = storeToRefs(useCalendar())
-
-const { data: calendar, pending: calPending, refresh: calRefresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
-const { data: characters, pending: charPending, refresh: charRefresh } = await useLazyFetch(`/api/characters/query?world_id=${worldId}`)
-const { data: categories, pending: categoryPending, refresh: categoryRefresh } = await useLazyFetch(`/api/calendars/categories/query`)
-
-if (!calendar.value) {
-  await calRefresh()
-} else {
-  if (calendar.value?.data?.id) {
-    setCalendarId(calendar.value?.data?.id)
-  }
-  if (calendar.value?.data?.months) {
-    setMonths(calendar.value?.data?.months)
-  }
-  if (calendar.value?.data?.months) {
-    setMonths(calendar.value?.data?.months)
-  }
-  if (calendar.value?.data?.today) {
-    setDefaultDate(calendar.value?.data?.today)
-  }
-  if (calendar.value?.data?.events) {
-    setEvents(calendar.value?.data?.events)
-  }
-}
-
-if (!categories.value) {
-  await categoryRefresh()
-} else {
-  if (categories.value?.data) {
-    setCategories(categories.value?.data)
-  }
-}
-
-if (!characters.value) {
-  await charRefresh()
-} else {
-  if (characters.value?.data) {
-    setCharacters(characters.value?.data)
-  }
-}
-
-watch(calPending, (newStatus) => {
-  if (!newStatus) {
-    if (calendar.value?.data?.id) {
-      setCalendarId(calendar.value?.data?.id)
-    }
-    if (calendar.value?.data?.months) {
-      setMonths(calendar.value?.data?.months)
-    }
-    if (calendar.value?.data?.today) {
-      setDefaultDate(calendar.value?.data?.today)
-    }
-    if (calendar.value?.data?.events) {
-      setEvents(calendar.value?.data?.events)
-    }
-  }
-})
-watch(categoryPending, (newStatus) => {
-  if (!newStatus) {
-    if (categories.value?.data) {
-      setCategories(categories.value?.data)
-    }
-  }
-})
-watch(charPending, (newStatus) => {
-  if (!newStatus) {
-    if (characters.value?.data) {
-      setCharacters(characters.value?.data)
-    }
-  }
-})
-
-const progressPercent = computed(() => 100 / [charPending.value, calPending.value, categoryPending.value].filter(Boolean).length)
+// const { setCharacters } = useCharacters()
 
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
@@ -107,42 +29,22 @@ const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   }
 })
 
-const { setCurrentMenu } = useUiStore()
-
 onMounted(() => {
   jumpToDate(selectedDate)
-
-  setCurrentMenu([
-    {
-      phIcon: shallowRef(PhMagnifyingGlass),
-      tooltip: 'Recherche avancée',
-      action: 'event-search'
-    }
-  ])
 })
 </script>
 
 <template>
   <div class="h-full w-full relative">
-    <TransitionGroup name="screen">
-      <div v-if="calPending || charPending || categoryPending" class="h-full w-full grid place-items-center">
-        <div class="flex flex-col items-center w-1/2">
-          <UiProgress :model-value="progressPercent" />
-          <p class="text-lg mt-2">Chargement en cours…</p>
-        </div>
-      </div>
-      <div v-else-if="months.length > 0" class="h-full grid grid-rows-[auto,1fr]">
-        <CalendarMenu />
+    <div class="h-full grid grid-rows-[auto,1fr]">
+      <CalendarMenu />
 
-        <KeepAlive>
-          <component :is="currentViewComponent"/>
-        </KeepAlive>
+      <component :is="currentViewComponent" />
 
-        <LazyCalendarSearch />
-        <LazyCalendarFormUpdateEvent />
-        <LazyCalendarFormDeleteEvent />
-      </div>
-    </TransitionGroup>
+      <LazyCalendarSearch />
+      <LazyCalendarFormUpdateEvent />
+      <LazyCalendarFormDeleteEvent />
+    </div>
   </div>
 </template>
 
diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index 43a59f2..75b7513 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -8,9 +8,8 @@ const props = defineProps<{
   tileDate: RPGDate
 }>()
 
-const { areDatesIdentical } = useCalendar()
-const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
-const { lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal } = useCalendar()
+const { lastActiveEvent } = storeToRefs(useCalendar())
 
 const spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
 const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index b01ee2b..26eb60f 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -14,9 +14,8 @@ import {
   PhEye
 } from '@phosphor-icons/vue'
 
-const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
-const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
-const { lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
+const { lastActiveEvent } = storeToRefs(useCalendar())
 
 const props = defineProps<{
   event: CalendarEvent
diff --git a/components/calendar/CalendarMenuSubnav.vue b/components/calendar/CalendarMenuSubnav.vue
index aa87fd7..c467792 100644
--- a/components/calendar/CalendarMenuSubnav.vue
+++ b/components/calendar/CalendarMenuSubnav.vue
@@ -1,12 +1,9 @@
 <script lang="ts" setup>
 import { type RPGDate } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
 
 import { PhArrowLineLeft, PhArrowLineRight } from '@phosphor-icons/vue'
 
-const { currentDate, currentConfig, jumpToDate } = useCalendar()
-const { getRelativeEventFromDate } = useCalendarEvents()
+const { currentDate, currentConfig, jumpToDate, getRelativeEventFromDate } = useCalendar()
 
 function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
   let fromDate: RPGDate
diff --git a/components/calendar/CalendarMenuToday.vue b/components/calendar/CalendarMenuToday.vue
index 2b8b882..c6259c8 100644
--- a/components/calendar/CalendarMenuToday.vue
+++ b/components/calendar/CalendarMenuToday.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
-const { defaultDate, areDatesIdentical } = useCalendar()
+const { defaultDate, areDatesIdentical, jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
-const { jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
 
 const defaultDateFormatted: string = getFormattedDateTitle(defaultDate, true)
 
diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 69b6d9f..2f6ab02 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -2,8 +2,8 @@
 import type { RPGDate } from '~/models/Date';
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from '@phosphor-icons/vue'
 
-const { eventSkeleton, operationInProgress } = storeToRefs(useCalendarEvents())
-const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
+const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
+const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar()
 const popoverOpen = ref(false)
 const isLoading = ref(false)
 
diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 3c3ebaf..35e9fce 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import { PhCircleNotch } from '@phosphor-icons/vue';
 
-const { isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
-
-const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendarEvents()
-const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
+const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
 
 const isLoading = ref(false)
 
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 4e4ac16..e84b2d3 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -2,10 +2,8 @@
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from '@phosphor-icons/vue'
 import { VisuallyHidden } from 'radix-vue'
 
-const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
-
-const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendarEvents()
-const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
+const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
 
 const isLoading = ref(false)
 
diff --git a/components/calendar/input/EventCategories.vue b/components/calendar/input/EventCategories.vue
index 9496960..76decc9 100644
--- a/components/calendar/input/EventCategories.vue
+++ b/components/calendar/input/EventCategories.vue
@@ -16,7 +16,7 @@ watch(modelBuffer.value, () => {
   model.value = [ ...modelBuffer.value ]
 })
 
-const { categories: availableCategories } = useCalendarEvents()
+const { categories: availableCategories } = useCalendar()
 
 const searchTerm = ref<string>('')
 
diff --git a/components/calendar/input/EventCategory.vue b/components/calendar/input/EventCategory.vue
index 7bf7734..7636014 100644
--- a/components/calendar/input/EventCategory.vue
+++ b/components/calendar/input/EventCategory.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 
 const model = defineModel<Category>()
 
-const { categories: availableCategories } = useCalendarEvents()
+const { categories: availableCategories } = useCalendar()
 
 const searchTerm = ref<string>('')
 
diff --git a/components/calendar/search/CalendarSearch.vue b/components/calendar/search/CalendarSearch.vue
index 74dba7b..7598bcb 100644
--- a/components/calendar/search/CalendarSearch.vue
+++ b/components/calendar/search/CalendarSearch.vue
@@ -8,8 +8,6 @@ import {
   isCalendarEvent,
   type CalendarEvent,
 } from '~/models/CalendarEvent'
-import { useCharacters } from '@/stores/CharacterStore'
-import { useCalendarEvents } from '@/stores/EventStore'
 import { capitalize } from '@/utils/Strings'
 import { useMagicKeys, useScroll, useStorage, whenever } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
@@ -27,8 +25,7 @@ import {
 import SearchList from './lists/SearchList.vue'
 import type { Category } from '~/models/Category'
 
-const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
-const { allEvents } = storeToRefs(useCalendarEvents())
+const { isAdvancedSearchOpen, allEvents } = storeToRefs(useCalendar())
 const { characters } = storeToRefs(useCharacters())
 
 const searchQuery = ref<string>('')
diff --git a/components/calendar/search/lists/EventCallout.vue b/components/calendar/search/lists/EventCallout.vue
index de7e933..59f4887 100644
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/components/calendar/search/lists/EventCallout.vue
@@ -2,7 +2,6 @@
 import { cn } from '@/lib/utils'
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
-import { useCalendar } from '@/stores/CalendarStore'
 
 import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from '@phosphor-icons/vue'
 
@@ -14,9 +13,7 @@ defineEmits<{
   (e: 'query:date-jump', payload: RPGDate): void
 }>()
 
-const { getRelativeString } = useCalendar()
-
-const { defaultDate, getFormattedDateTitle } = useCalendar()
+const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()
 
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index bcd9b15..e08ed45 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import type { RPGDate } from '@/models/Date'
 import type { CalendarEvent } from '@/models/CalendarEvent'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
 import { useElementBounding } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, ref, type ComputedRef } from 'vue'
@@ -18,8 +16,7 @@ const calendarTile = ref()
 const calendarEventsList = ref()
 
 const { defaultDate, selectDate, areDatesIdentical } = useCalendar()
-const { selectedDate } = storeToRefs(useCalendar())
-const { currentEvents } = storeToRefs(useCalendarEvents())
+const { selectedDate, currentEvents } = storeToRefs(useCalendar())
 
 /**
  * All events with a startDate / endDate that starts or ends on the tile
diff --git a/components/calendar/state/monthly/Layout.vue b/components/calendar/state/monthly/Layout.vue
index 06ce384..c6c2b2e 100644
--- a/components/calendar/state/monthly/Layout.vue
+++ b/components/calendar/state/monthly/Layout.vue
@@ -2,8 +2,7 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { useThrottleFn } from '@vueuse/core'
 
-const { currentDate, decrementMonth, incrementMonth } = useCalendar()
-const { currentMonthData } = storeToRefs(useCalendar())
+const { currentDate, decrementMonth, incrementMonth, currentMonthData } = useCalendar()
 
 function handleWheel(e: WheelEvent) {
   const isMovingUp = e.deltaY < 0
@@ -26,7 +25,7 @@ const moveCalendarRight = useThrottleFn(() => {
 <template>
   <div class="grid grid-cols-10" @wheel="handleWheel">
     <CalendarStateMonthlyDayTile
-      v-for="day in currentMonthData.days"
+      v-for="day in currentMonthData?.days"
       :key="`layout-month-grid-${day}`"
       :date="{
         day: day,
diff --git a/components/calendar/state/yearly/DayTile.vue b/components/calendar/state/yearly/DayTile.vue
index 0ea59c8..50687e8 100644
--- a/components/calendar/state/yearly/DayTile.vue
+++ b/components/calendar/state/yearly/DayTile.vue
@@ -1,21 +1,16 @@
 <script lang="ts" setup>
 import type { RPGDate } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
 import { storeToRefs } from 'pinia'
 import { computed, type ComputedRef } from 'vue'
 
-const { currentDate, defaultDate, selectDate } = useCalendar()
-const { selectedDate } = storeToRefs(useCalendar())
-const { currentEvents } = storeToRefs(useCalendarEvents())
+const { currentDate, defaultDate, selectDate, areDatesIdentical } = useCalendar()
+const { selectedDate, currentEvents } = storeToRefs(useCalendar())
 
 const props = defineProps<{
   monthNumber: number
   dayNumber: number
 }>()
 
-const { areDatesIdentical } = useCalendar()
-
 const tileDate: ComputedRef<RPGDate> = computed(() => {
   return {
     day: props.dayNumber,
diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index fc92882..269086c 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -2,15 +2,11 @@
 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())
 
+const user = useSupabaseUser()
+
 function handleMenuItemAction(actionType: SidebarMenuActionType) {
   if (actionType === 'event-search') {
     revealAdvancedSearch()
@@ -27,8 +23,8 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         </UiButton>
       </li>
 
-      <li v-if="!isHome">
-        <UiTooltipProvider :delay-duration="100">
+      <template v-if="!user">
+        <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>
               <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
@@ -37,15 +33,15 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
                 </RouterLink>
               </UiButton>
             </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'">
+            <UiTooltipContent :side="'right'" :side-offset="6">
               <p>Retourner aux outils</p>
             </UiTooltipContent>
           </UiTooltip>
         </UiTooltipProvider>
-      </li>
+      </template>
 
       <li v-for="(item, i) in currentMenu" :key="i">
-        <UiTooltipProvider :delay-duration="100">
+        <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>
               <UiButton v-if="item.to" variant="ghost" size="icon" class="rounded-full" as-child>
@@ -57,7 +53,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
                 <component :is="item.phIcon" size="24" weight="fill" />
               </UiButton>
             </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'">
+            <UiTooltipContent :side="'right'" :side-offset="6">
               <p>{{ item.tooltip }}</p>
             </UiTooltipContent>
           </UiTooltip>
diff --git a/components/global/sidebar/SidebarProps.ts b/components/global/sidebar/SidebarProps.ts
index bb3cd9e..ef80e7e 100644
--- a/components/global/sidebar/SidebarProps.ts
+++ b/components/global/sidebar/SidebarProps.ts
@@ -3,7 +3,7 @@ import type { ShallowRef } from "vue"
 export type SidebarMenuActionType = "event-search"
 
 export interface SidebarMenuItem {
-  phIcon: ShallowRef
+  phIcon: ShallowRef // use shallowRef to build phIcon
   tooltip: string
   action?: SidebarMenuActionType
   to?: string
diff --git a/models/Date.ts b/models/Date.ts
index 4ecd24a..ae2e72c 100644
--- a/models/Date.ts
+++ b/models/Date.ts
@@ -2,7 +2,7 @@ import { z } from "zod"
 
 export interface RPGDate {
   day: number
-  month: number | string
+  month: number
   year: number
 }
 
diff --git a/pages/i/world/[id]/calendar.vue b/pages/i/calendar/[id].vue
similarity index 53%
rename from pages/i/world/[id]/calendar.vue
rename to pages/i/calendar/[id].vue
index 8b233ee..36e026b 100644
--- a/pages/i/world/[id]/calendar.vue
+++ b/pages/i/calendar/[id].vue
@@ -13,8 +13,14 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
+
+const route = useRoute()
+const id = route.params.id
+const calendarStore = useCalendar()
+
+const { pending: calendarPending } = await useAsyncData('calendar', () => calendarStore.fetchCalendar(Number(id)).then(() => true))
 </script>
 
 <template>
-  <Calendar />
+  <Calendar v-if="!calendarPending" />
 </template>
diff --git a/pages/i/index.vue b/pages/i/index.vue
index a383967..12a6ab1 100644
--- a/pages/i/index.vue
+++ b/pages/i/index.vue
@@ -20,9 +20,6 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
-
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
 </script>
 
 <template>
diff --git a/pages/i/world/[id]/index.vue b/pages/i/world/[id].vue
similarity index 96%
rename from pages/i/world/[id]/index.vue
rename to pages/i/world/[id].vue
index e1df308..9a23c26 100644
--- a/pages/i/world/[id]/index.vue
+++ b/pages/i/world/[id].vue
@@ -25,9 +25,6 @@ watch(user, (n, _o) => {
   }
 })
 
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
-
 const modalOpened = ref<boolean>(false)
 </script>
 
@@ -69,7 +66,7 @@ const modalOpened = ref<boolean>(false)
               <UiCard
                 v-if="calendar"
                 class="w-full transition-all text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900"
-                :link="`/i/world/${world.id}/calendar`"
+                :link="`/i/calendar/${calendar.id}`"
               >
                 <UiCardHeader>
                   <UiCardTitle>{{ calendar.name }}</UiCardTitle>
diff --git a/pages/index.vue b/pages/index.vue
index a717792..191b1c5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,9 +2,6 @@
 useHead({
   title: 'Dashboard'
 })
-
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
 </script>
 
 <template>
diff --git a/server/api/calendars/events/query.get.ts b/server/api/calendars/events/query.get.ts
index 1a87410..359af0a 100644
--- a/server/api/calendars/events/query.get.ts
+++ b/server/api/calendars/events/query.get.ts
@@ -3,7 +3,7 @@ import { z } from 'zod'
 import type { CalendarEvent } from "~/models/CalendarEvent";
 
 const querySchema = z.object({
-  world_id: z.number({ coerce: true }).positive().int()
+  calendarId: z.number({ coerce: true }).positive().int()
 })
 
 export default defineEventHandler(async (event) => {
@@ -17,11 +17,15 @@ export default defineEventHandler(async (event) => {
       title,
       description,
       location,
-      world_calendars (id, world_id)
+      startDate:start_date,
+      endDate:end_date,
+      wiki,
+      category:calendar_event_categories!calendar_events_category_fkey (*),
+      secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
     `)
 
-  if (query.world_id) {
-    output.eq('world_calendars.world_id', query.world_id)
+  if (query.calendarId) {
+    output.eq('calendar_id', query.calendarId)
   }
 
   return output.returns<CalendarEvent[]>()
diff --git a/server/api/calendars/query.get.ts b/server/api/calendars/query.get.ts
index 4423d24..2617fa2 100644
--- a/server/api/calendars/query.get.ts
+++ b/server/api/calendars/query.get.ts
@@ -3,36 +3,51 @@ import { z } from 'zod'
 import type { Calendar } from "~/models/CalendarConfig";
 
 const querySchema = z.object({
-  world_id: z.number({ coerce: true }).positive().int()
+  id: z.number({ coerce: true }).positive().int().optional(),
+  full: z.boolean({ coerce: true }).optional()
 })
 
 export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient(event)
   const query = await getValidatedQuery(event, querySchema.parse)
 
-  const output = client
-    .from('calendars')
-    .select(`
-      id,
-      name,
-      today,
-      months:calendar_months (*),
-      events:calendar_events (
-        id,
-        title,
-        description,
-        location,
-        hidden,
-        startDate:start_date,
-        endDate:end_date,
-        wiki,
-        category:calendar_event_categories!calendar_events_category_fkey (*),
-        secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
-      )
-    `)
-    .eq('world_id', query.world_id)
-    .limit(1)
-    .single<Calendar>()
+  const partialFields = `
+    id,
+    name,
+    today,
+    months:calendar_months (*)
+  `
 
-  return output
+  const fullFields = `
+    id,
+    name,
+    today,
+    months:calendar_months (*),
+    events:calendar_events (
+      id,
+      title,
+      description,
+      location,
+      hidden,
+      startDate:start_date,
+      endDate:end_date,
+      wiki,
+      category:calendar_event_categories!calendar_events_category_fkey (*),
+      secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
+    )
+  `
+
+  let output
+
+  if (query.full) {
+    output = client.from('calendars').select(fullFields)
+  } else {
+    output = client.from('calendars').select(partialFields)
+  }
+
+  if (query.id) {
+    return output.eq('id', query.id).single<Calendar>()
+  }
+
+  return output.returns<Calendar[]>()
 })
diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts
index 8fc6989..228c1f9 100644
--- a/stores/CalendarStore.ts
+++ b/stores/CalendarStore.ts
@@ -5,7 +5,10 @@ import {
 import { useLocalStorage, useUrlSearchParams } from '@vueuse/core'
 import { defineStore, skipHydrate } from 'pinia'
 import { computed, ref, type ComputedRef, type Ref } from 'vue'
+import type { Calendar } from '~/models/CalendarConfig'
+import type { CalendarEvent } from '~/models/CalendarEvent'
 import type { CalendarMonth } from '~/models/CalendarMonth'
+import type { Category } from '~/models/Category'
 
 type CalendarViewType = 'month' | 'year' | 'decade' | 'century'
 
@@ -27,7 +30,6 @@ export const useCalendar = defineStore('calendar', () => {
 
   /**
    * Static calendar config
-   * This shouldn't change
    */
   const currentConfig: Ref<CalendarCurrentConfig> = ref({
     viewType: 'month'
@@ -37,18 +39,33 @@ export const useCalendar = defineStore('calendar', () => {
     'year'
   ])
 
-  const calendarId = ref<number>(0)
+  const activeCalendar = ref<{ id: number; name: string; today: RPGDate} | null>(null)
 
-  function setCalendarId(data: number) {
-    calendarId.value = data
-  }
   /**
    * Month list (queried from API)
    */
   const months: Ref<CalendarMonth[]> = ref<CalendarMonth[]>([])
 
-  function setMonths(data: CalendarMonth[]) {
-    months.value = data
+  async function fetchCalendar(id: number) {
+    try {
+      const res = await $fetch('/api/calendars/query', { query: { id, full: true } })
+
+      const calendarData = res.data as Calendar
+
+      if (!calendarData.id) return
+
+      activeCalendar.value = {
+        id: calendarData.id,
+        name: calendarData.name,
+        today: calendarData.today
+      }
+
+      months.value = calendarData.months
+
+      baseEvents.value = calendarData.events
+    } catch (err) {
+      console.log(err)
+    }
   }
 
   /**
@@ -98,7 +115,7 @@ export const useCalendar = defineStore('calendar', () => {
    */
   function setDefaultDate(date: RPGDate) {
     defaultDay.value = date.day
-    defaultMonth.value = date.month
+    defaultMonth.value = date.month as number
     defaultYear.value = date.year
   }
 
@@ -160,9 +177,9 @@ export const useCalendar = defineStore('calendar', () => {
 
   const currentRPGDate = computed<RPGDate>(() => {
     return {
-      day: currentDate.currentDay.value,
-      month: currentDate.currentMonth.value,
-      year: currentDate.currentYear.value,
+      day: currentDay.value,
+      month: currentMonth.value,
+      year: currentYear.value,
     }
   })
 
@@ -622,11 +639,280 @@ export const useCalendar = defineStore('calendar', () => {
     }
   }
 
+  const baseEvents = ref<CalendarEvent[]>([])
+
+  async function fetchCalendarEvents(calendarId: number) {
+    try {
+      const res = await $fetch('/api/calendars/events/query', { query: { calendarId } })
+
+      const eventData = res.data as CalendarEvent[]
+
+      if (!eventData.length) return
+
+      baseEvents.value = eventData
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  const categories = ref<Category[]>([])
+
+  // Order base events by dates
+  const allEvents = computed(() => baseEvents.value.sort((a, b) => {
+    return compareDates(a.startDate, b.startDate, 'desc')
+  }))
+
+  // Gets all current event in its default state
+  const currentEvents: Ref<CalendarEvent[]> = ref([])
+
+  // Watch for currentDate or events' list changes
+  // This is deep because we're watching an array, and changes need to trigger and mutations like .push and .splice
+  watch([currentRPGDate, allEvents], () => {
+    currentEvents.value = computeCurrentEvents()
+  }, { deep: true, immediate: true })
+
+  /**
+   * Determines if the event can appear in the front end
+   *
+   * This function takes into consideration the viewType of the calendar config
+   *
+   * @param event The event to analyze
+   * @returns Whether the event should appear in the current view
+   */
+  function shouldEventBeDisplayed(event: CalendarEvent): boolean {
+    const isEventOnCurrentScreen =
+      (event.startDate.year === currentRPGDate.value.day &&
+        event.startDate.month === currentRPGDate.value.month) ||
+      (event.endDate &&
+        event.endDate.year === currentRPGDate.value.year &&
+        event.endDate.month === currentRPGDate.value.month)
+
+    switch (currentConfig.value.viewType) {
+      case 'month':
+        return isEventOnCurrentScreen!
+
+      case 'year':
+        return event.startDate.year === currentRPGDate.value.year
+
+      case 'decade':
+        return (
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 10
+        )
+
+      case 'century':
+        return (
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 100
+        )
+
+      default:
+        return false
+    }
+  }
+
+  /**
+   * Fetches all the current events for the current view
+   *
+   * @returns A list of events that can appear in the current view
+   */
+  function computeCurrentEvents(): CalendarEvent[] {
+    return [...allEvents.value].filter((event) => shouldEventBeDisplayed(event))
+  }
+
+  /**
+   * From a base event, gets the next or previous one in the timeline
+   *
+   * @param event The event at a given position in the data
+   * @param position Whether we should get the next or previous event
+   * @returns The next event in chronological order
+   */
+  function getRelativeEventFromEvent(
+    event: CalendarEvent,
+    position: 'next' | 'prev' = 'next',
+    initialIsEnd: boolean = false
+  ): { event: CalendarEvent; targetDate: RPGDate } {
+    let dateToParse: RPGDate // Day value of the date that the user interacted with
+
+    if (initialIsEnd && event.endDate) {
+      dateToParse = event.endDate
+    } else {
+      dateToParse = event.startDate
+    }
+
+    return getRelativeEventFromDate(dateToParse, position)
+  }
+
+  /**
+   * From a date, gets the next or previous event in the timeline
+   *
+   * @param date The starting date from which to get the next event
+   * @param position Whether we should get the next or previous event
+   * @returns The next event in chronological order
+   */
+  function getRelativeEventFromDate(
+    date: RPGDate,
+    position: 'next' | 'prev' = 'next'
+  ): { event: CalendarEvent; targetDate: RPGDate } {
+    const pivotValue = convertDateToDays(date)
+    let t: { eventData: CalendarEvent; distance: number; targetKey: 'startDate' | 'endDate' }[] = []
+
+    // Loop over all event once to convert the structure to a usable one
+    for (let i = 0; i < allEvents.value.length; i++) {
+      const e: CalendarEvent = allEvents.value[i]
+
+      // Estimate distance from pivot
+      const startDateDays: number = convertDateToDays(e.startDate)
+      const startDistance: number = startDateDays - pivotValue
+
+      // Push startDate to comparator array
+      t.push({
+        eventData: e,
+        distance: startDistance,
+        targetKey: 'startDate'
+      })
+
+      // Check the same things for endDate
+      if (e.endDate) {
+        const endDateDays: number = convertDateToDays(e.endDate)
+        const endDistance: number = endDateDays - pivotValue
+
+        // Push optional endDate to comparator array
+        t.push({
+          eventData: e,
+          distance: endDistance,
+          targetKey: 'endDate'
+        })
+      }
+    }
+
+    // Based on the direction, either ignore negative distance (past) or positive distance (future)
+    t = t.filter((i) => {
+      return position === 'next' ? i.distance > 0 : i.distance < 0
+    })
+
+    if (!t.length) {
+      throw new Error(
+        "Aucun évènement suivant ou précédent trouvé ; Peut-être l'évènement se situe au début ou à la fin du calendrier ?"
+      )
+    }
+
+    // Get event with remaining minimum distance
+    const closestEvent = t.reduce((a, b) => {
+      return Math.abs(b.distance) < Math.abs(a.distance) ? b : a
+    })
+
+    return {
+      event: closestEvent.eventData,
+      targetDate: closestEvent.eventData[closestEvent.targetKey]!
+    }
+  }
+
+  /**
+   * State for event modal edition
+   */
+  const isEditEventModalOpen: Ref<boolean> = ref<boolean>(false)
+
+  function revealEditEventModal() {
+    isEditEventModalOpen.value = true
+  }
+
+  /**
+   * State for event modal edition
+   */
+  const isDeleteEventModalOpen: Ref<boolean> = ref<boolean>(false)
+
+  function revealDeleteEventModal() {
+    isDeleteEventModalOpen.value = true
+  }
+
+  /**
+   * EVENT CREATION FUNCTIONS
+   */
+  const lastActiveEvent = ref<CalendarEvent | null>()
+  const isCreatingEvent = ref<boolean>(false)
+  const isUpdatingEvent = ref<boolean>(false)
+  const isDeletingEvent = ref<boolean>(false)
+  const operationInProgress = computed(() => isCreatingEvent.value || isUpdatingEvent.value || isDeletingEvent.value)
+  let abortController: AbortController | null = null
+
+  /**
+   * Dummy event to hold creation data
+   */
+  const eventSkeleton: Ref<CalendarEvent> = ref<CalendarEvent>({ title: '', startDate: defaultDate.value })
+
+  /**
+   * Resets the dummy event data
+   */
+  function resetSkeleton() {
+    eventSkeleton.value = { title: '', startDate: defaultDate.value }
+  }
+
+  /**
+   * Submits the skeleton event and creates a real event from its data
+   *
+   * We assume it's been sanitized by the caller
+   */
+  async function submitSkeleton() {
+    abortController = new AbortController()
+    isCreatingEvent.value = true
+
+    try {
+      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: activeCalendar.value?.id }, signal: abortController.signal })
+
+      baseEvents.value.push(res)
+    } catch (err) {
+      console.log(err)
+    } finally {
+      abortController = null
+      isCreatingEvent.value = false
+    }
+  }
+
+  async function updateEventFromSkeleton() {
+    abortController = new AbortController()
+    isUpdatingEvent.value = true
+
+    try {
+      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: activeCalendar.value?.id }, signal: abortController.signal })
+
+      const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
+      baseEvents.value[eventIndex] = res
+    } catch (err) {
+      console.log(err)
+    } finally {
+      abortController = null
+      isUpdatingEvent.value = false
+    }
+  }
+
+  async function deleteEventFromSkeleton() {
+    abortController = new AbortController()
+    isDeletingEvent.value = true
+
+    try {
+      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE', signal: abortController.signal })
+
+      const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
+      baseEvents.value.splice(eventIndex, 1)
+    } catch (err) {
+      console.log(err)
+    } finally {
+      abortController = null
+      isDeletingEvent.value = false
+    }
+  }
+
+  function cancelLatestRequest() {
+    if (abortController) {
+      abortController.abort()
+    }
+  }
+
   return {
-    calendarId,
-    setCalendarId,
+    fetchCalendar,
+    activeCalendar,
     months,
-    setMonths,
     sortedMonths,
     daysPerYear,
     monthsPerYear,
@@ -661,5 +947,27 @@ export const useCalendar = defineStore('calendar', () => {
     areDatesIdentical,
     compareDates,
     getRelativeString,
+    baseEvents,
+    allEvents,
+    fetchCalendarEvents,
+    categories,
+    currentEvents,
+    getRelativeEventFromDate,
+    getRelativeEventFromEvent,
+    cancelLatestRequest,
+    isCreatingEvent,
+    isUpdatingEvent,
+    isDeletingEvent,
+    operationInProgress,
+    eventSkeleton,
+    resetSkeleton,
+    submitSkeleton,
+    lastActiveEvent,
+    updateEventFromSkeleton,
+    deleteEventFromSkeleton,
+    isEditEventModalOpen,
+    revealEditEventModal,
+    isDeleteEventModalOpen,
+    revealDeleteEventModal
   }
 })
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index 40cf752..cecd0fc 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -6,13 +6,23 @@ import type { Category } from '~/models/Category'
 import { useCalendar } from './CalendarStore'
 
 export const useCalendarEvents = defineStore('calendar-events', () => {
-  const { currentDate, defaultDate, currentConfig, convertDateToDays, compareDates } = useCalendar()
-  const { calendarId } = storeToRefs(useCalendar())
+  const { activeCalendar, defaultDate, currentConfig, convertDateToDays, compareDates } = useCalendar()
+  const { currentRPGDate } = storeToRefs(useCalendar())
 
   const baseEvents = ref<CalendarEvent[]>([])
 
-  function setEvents(data: CalendarEvent[]) {
-    baseEvents.value = data
+  async function fetchCalendarEvents(calendarId: number) {
+    try {
+      const res = await $fetch('/api/calendars/events/query', { query: { calendarId } })
+
+      const eventData = res.data as CalendarEvent[]
+
+      if (!eventData.length) return
+
+      baseEvents.value = eventData
+    } catch (err) {
+      console.log(err)
+    }
   }
 
   const categories = ref<Category[]>([])
@@ -31,7 +41,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
 
   // Watch for currentDate or events' list changes
   // This is deep because we're watching an array, and changes need to trigger and mutations like .push and .splice
-  watch([currentDate, allEvents], () => {
+  watch([currentRPGDate, allEvents], () => {
     currentEvents.value = computeCurrentEvents()
   }, { deep: true, immediate: true })
 
@@ -45,29 +55,29 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    */
   function shouldEventBeDisplayed(event: CalendarEvent): boolean {
     const isEventOnCurrentScreen =
-      (event.startDate.year === currentDate.currentYear &&
-        event.startDate.month === currentDate.currentMonth) ||
+      (event.startDate.year === currentRPGDate.value.day &&
+        event.startDate.month === currentRPGDate.value.month) ||
       (event.endDate &&
-        event.endDate.year === currentDate.currentYear &&
-        event.endDate.month === currentDate.currentMonth)
+        event.endDate.year === currentRPGDate.value.year &&
+        event.endDate.month === currentRPGDate.value.month)
 
     switch (currentConfig.viewType) {
       case 'month':
         return isEventOnCurrentScreen!
 
       case 'year':
-        return event.startDate.year === currentDate.currentYear
+        return event.startDate.year === currentRPGDate.value.year
 
       case 'decade':
         return (
-          event.startDate.year >= currentDate.currentYear &&
-          event.startDate.year <= currentDate.currentYear + 10
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 10
         )
 
       case 'century':
         return (
-          event.startDate.year >= currentDate.currentYear &&
-          event.startDate.year <= currentDate.currentYear + 100
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 100
         )
 
       default:
@@ -222,7 +232,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     isCreatingEvent.value = true
 
     try {
-      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal })
 
       baseEvents.value.push(res)
     } catch (err) {
@@ -238,7 +248,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     isUpdatingEvent.value = true
 
     try {
-      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal })
 
       const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value[eventIndex] = res
@@ -275,7 +285,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
 
   return {
     allEvents,
-    setEvents,
+    fetchCalendarEvents,
     categories,
     setCategories,
     currentEvents,