Merge pull request #28 from AlexisNP/features/custom-calendar-creation

LGTM
2024-08-26 22:23:16 +02:00
parent a7cb032b12 ebc715a3a6
commit 4bc1e77e76
190 changed files with 2963 additions and 1316 deletions
--- a/app.vue
+++ b/app.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ConfigProvider } from 'radix-vue'
+import { ConfigProvider } from "radix-vue"

 useHead({
  titleTemplate: (titleChunk) => {
-    return titleChunk ? `${titleChunk} — TTTools` : 'TTTools';
+    return titleChunk ? `${titleChunk} — TTTools` : "TTTools";
  },
  htmlAttrs: {
-    lang: 'fr'
+    lang: "fr"
  },
  meta: [
    { name: "charset", content: "UTF-8" },
@@ -18,14 +18,14 @@ useHead({
    { name: "theme-color", content: "00aba9" },
    { name: "og:type", content: "tabletop-tools" },
    { name: "og:url", content: "ttt.alexcreates.fr" },
-    { name: 'robots', content: 'noindex, nofollow'}
+    { name: "robots", content: "noindex, nofollow"}
  ],
  link: [
-    { rel: 'apple-touch-icon', sizes: "76x76", href: '/apple-touch-icon.png' },
-    { rel: 'icon', sizes: "32x32", type: 'image/png', href: '/favicon-32x32.png' },
-    { rel: 'icon', sizes: "16x16", type: 'image/png', href: '/favicon-16x16.png' },
-    { rel: 'manifest', href: '/site.webmanifest' },
-    { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#6595b4' },
+    { rel: "apple-touch-icon", sizes: "76x76", href: "/apple-touch-icon.png" },
+    { rel: "icon", sizes: "32x32", type: "image/png", href: "/favicon-32x32.png" },
+    { rel: "icon", sizes: "16x16", type: "image/png", href: "/favicon-16x16.png" },
+    { rel: "manifest", href: "/site.webmanifest" },
+    { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#6595b4" },
  ]
 })

--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -1,142 +1,79 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
-import { computed, type Component, type ComputedRef } from 'vue'
+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'
-import YearLayout from './state/yearly/Layout.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
+import type { Calendar } from "~/models/CalendarConfig"
+import type { Category } from "~/models/Category"

-const { setCalendarId, setMonths, setDefaultDate, currentConfig, selectedDate, jumpToDate } = useCalendar()
-const { setEvents, setCategories } = useCalendarEvents()
-const { setCharacters } = useCharacters()
+const props = defineProps<{
+  calendarData: Calendar,
+  categories: Category[]
+}>()

-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`)
+const { setActiveCalendar } = useCalendar()
+setActiveCalendar(props.calendarData, props.categories)

-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)
-  }
-}
+const { currentConfig, jumpToDate, selectedDate } = useCalendar()

-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 { setCharacters } = useCharacters()

 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
  switch (currentConfig.viewType) {
-    case 'month':
+    case "month":
      return MonthlyLayout

-    case 'year':
+    case "year":
      return YearLayout

-    case 'decade':
+    case "decade":
      return DecadeLayout

-    case 'century':
+    case "century":
    default:
      return CenturyLayout
  }
 })

-const { setCurrentMenu } = useUiStore()
-
 onMounted(() => {
  jumpToDate(selectedDate)
-
-  setCurrentMenu([
-    {
-      phIcon: shallowRef(PhMagnifyingGlass),
-      tooltip: 'Recherche avancée',
-      action: 'event-search'
-    }
-  ])
 })
 </script>

 <template>
-  <div class="h-full">
-    <template v-if="calPending || charPending || categoryPending">
-      <div class="h-full grid place-items-center">
-        Loading notamment
-      </div>
-    </template>
-    <template v-else>
-      <div class="h-full grid grid-rows-[auto,1fr]">
-        <CalendarMenu />
+  <div class="h-full w-full relative">
+    <div class="h-full grid grid-rows-[auto,1fr]">
+      <CalendarMenu />

-        <KeepAlive>
-          <component :is="currentViewComponent"/>
-        </KeepAlive>
-      </div>
+      <component :is="currentViewComponent" />

-      <LazyCalendarSearch />
-      <LazyCalendarFormUpdateEvent />
-      <LazyCalendarFormDeleteEvent />
-    </template>
+      <CalendarSearch />
+      <CalendarFormUpdateEvent />
+      <CalendarFormDeleteEvent />
+    </div>
  </div>
 </template>
+
+<style lang="scss" scoped>
+.screen-move, /* apply transition to moving elements */
+.screen-enter-active,
+.screen-leave-active {
+  transition: all .4s ease-out;
+}
+
+.screen-enter-from,
+.screen-leave-to {
+  opacity: 0;
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.screen-leave-active {
+  position: absolute;
+}
+</style>
--- a/components/calendar/CalendarCurrentDate.vue
+++ b/components/calendar/CalendarCurrentDate.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { storeToRefs } from "pinia"
+import { computed } from "vue"

-import { PhMapPin } from '@phosphor-icons/vue'
+import { PhMapPin } from "@phosphor-icons/vue"

 const { defaultDate, getFormattedDateTitle, getRelativeString } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { RPGDate } from '@/models/Date'
-import type { CalendarEvent } from '~/models/CalendarEvent'
+import { cn } from "@/lib/utils"
+import type { RPGDate } from "@/models/Date"
+import type { CalendarEvent } from "~/models/CalendarEvent"

 const props = defineProps<{
  event: CalendarEvent
  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))
@@ -40,12 +39,12 @@ function handleClosePopover() {

 onMounted(() => {
  // Listen for keydown events
-  window.addEventListener('keydown', (e: KeyboardEvent) => {
+  window.addEventListener("keydown", (e: KeyboardEvent) => {
    // If the popover isn't opened, this is not the event we're trying to delete, so return
    if (!isPopoverDetailsOpen.value) return

    // If the key isn't the delete one, return
-    if (e.key !== 'Delete') return
+    if (e.key !== "Delete") return

    handleDelete()
  })
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { RPGDate } from '@/models/Date'
-import type { CalendarEvent } from '@/models/CalendarEvent'
-import { useCalendar } from '@/stores/CalendarStore'
+import { cn } from "@/lib/utils"
+import type { RPGDate } from "@/models/Date"
+import type { CalendarEvent } from "@/models/CalendarEvent"
+import { useCalendar } from "@/stores/CalendarStore"

 import {
  PhHourglassMedium,
@@ -12,11 +12,10 @@ import {
  PhMapPinArea,
  PhDotsThreeOutlineVertical,
  PhEye
-} from '@phosphor-icons/vue'
+} 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
@@ -28,16 +27,16 @@ const props = defineProps<{
 // Ref for the popover
 const eventDetails = ref<HTMLElement>()

-const emit = defineEmits(['query:close-popover'])
+const emit = defineEmits(["query:close-popover"])

 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
-  ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
+  ? getRelativeString(props.event.startDate, props.event.endDate, "compact")
  : null

 function handleJumpToDate(date: RPGDate) {
  jumpToDate(date)
-  emit('query:close-popover')
+  emit("query:close-popover")
 }

 /**
@@ -136,7 +135,7 @@ function deployDeleteModal() {
      </template>
    </div>

-    <menu class="absolute top-4 right-4">
+    <menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
      <UiPopover v-model:open="commandMenuOpened">
        <UiPopoverTrigger as-child>
          <UiButton size="icon" variant="ghost">
--- a/components/calendar/CalendarMenu.vue
+++ b/components/calendar/CalendarMenu.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
+import { useCalendar } from "@/stores/CalendarStore"

-import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { PhMagnifyingGlass } from "@phosphor-icons/vue"

 const { revealAdvancedSearch } = useCalendar()
 </script>
@@ -29,7 +29,9 @@ const { revealAdvancedSearch } = useCalendar()
          </UiButton>
        </li>
        <li>
-          <CalendarSwitch />
+          <ClientOnly>
+            <CalendarSwitch />
+          </ClientOnly>
        </li>
      </menu>
    </div>
--- a/components/calendar/CalendarMenuNav.vue
+++ b/components/calendar/CalendarMenuNav.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { computed, type ComputedRef } from 'vue'
-import { useCalendar } from '@/stores/CalendarStore'
+import { computed, type ComputedRef } from "vue"
+import { useCalendar } from "@/stores/CalendarStore"

 import {
  PhCaretDoubleLeft,
  PhCaretDoubleRight,
  PhCaretLeft,
  PhCaretRight
-} from '@phosphor-icons/vue'
+} from "@phosphor-icons/vue"

 interface DirectionLabels {
  pastFar: string
@@ -16,126 +16,126 @@ interface DirectionLabels {
  futureFar: string
 }

-const { currentConfig, decrementMonth, incrementMonth, decrementYear, incrementYear } =
+const { currentConfig, decrementViewMonth, incrementViewMonth, decrementViewYear, incrementViewYear } =
  useCalendar()

 const activeDirectionLabels: ComputedRef<DirectionLabels> = computed(() => {
  switch (currentConfig.viewType) {
-    case 'month':
+    case "month":
      return {
-        pastFar: 'Année précédente',
-        pastNear: 'Mois précédent',
-        futureNear: 'Mois suivant',
-        futureFar: 'Année suivante'
+        pastFar: "Année précédente",
+        pastNear: "Mois précédent",
+        futureNear: "Mois suivant",
+        futureFar: "Année suivante"
      }

-    case 'year':
+    case "year":
      return {
-        pastFar: 'Décennie précédente',
-        pastNear: 'Année précédente',
-        futureNear: 'Année suivante',
-        futureFar: 'Décennie suivante'
+        pastFar: "Décennie précédente",
+        pastNear: "Année précédente",
+        futureNear: "Année suivante",
+        futureFar: "Décennie suivante"
      }

-    case 'decade':
+    case "decade":
      return {
-        pastFar: 'Siècle précédent',
-        pastNear: 'Décennie précédente',
-        futureNear: 'Décennie suivante',
-        futureFar: 'Siècle suivant'
+        pastFar: "Siècle précédent",
+        pastNear: "Décennie précédente",
+        futureNear: "Décennie suivante",
+        futureFar: "Siècle suivant"
      }

-    case 'century':
+    case "century":
    default:
      return {
-        pastFar: 'Millénaire précédent',
-        pastNear: 'Siècle précédent',
-        futureNear: 'Siècle suivant',
-        futureFar: 'Millénaire suivant'
+        pastFar: "Millénaire précédent",
+        pastNear: "Siècle précédent",
+        futureNear: "Siècle suivant",
+        futureFar: "Millénaire suivant"
      }
  }
 })

 function toPastFar(): void {
  switch (currentConfig.viewType) {
-    case 'month':
-      decrementYear()
+    case "month":
+      decrementViewYear()
      break

-    case 'year':
-      decrementYear(10)
+    case "year":
+      decrementViewYear(10)
      break

-    case 'decade':
-      decrementYear(100)
+    case "decade":
+      decrementViewYear(100)
      break

-    case 'century':
+    case "century":
    default:
-      decrementYear(1000)
+      decrementViewYear(1000)
      break
  }
 }

 function toPastNear(): void {
  switch (currentConfig.viewType) {
-    case 'month':
-      decrementMonth()
+    case "month":
+      decrementViewMonth()
      break

-    case 'year':
-      decrementYear()
+    case "year":
+      decrementViewYear()
      break

-    case 'decade':
-      decrementYear(10)
+    case "decade":
+      decrementViewYear(10)
      break

-    case 'century':
+    case "century":
    default:
-      decrementYear(100)
+      decrementViewYear(100)
      break
  }
 }

 function toFutureNear(): void {
  switch (currentConfig.viewType) {
-    case 'month':
-      incrementMonth()
+    case "month":
+      incrementViewMonth()
      break

-    case 'year':
-      incrementYear()
+    case "year":
+      incrementViewYear()
      break

-    case 'decade':
-      incrementYear(10)
+    case "decade":
+      incrementViewYear(10)
      break

-    case 'century':
+    case "century":
    default:
-      incrementYear(100)
+      incrementViewYear(100)
      break
  }
 }

 function toFutureFar(): void {
  switch (currentConfig.viewType) {
-    case 'month':
-      incrementYear()
+    case "month":
+      incrementViewYear()
      break

-    case 'year':
-      incrementYear(10)
+    case "year":
+      incrementViewYear(10)
      break

-    case 'decade':
-      incrementYear(100)
+    case "decade":
+      incrementViewYear(100)
      break

-    case 'century':
+    case "century":
    default:
-      incrementYear(1000)
+      incrementViewYear(1000)
      break
  }
 }
--- a/components/calendar/CalendarMenuSubnav.vue
+++ b/components/calendar/CalendarMenuSubnav.vue
@@ -1,25 +1,22 @@
 <script lang="ts" setup>
-import { type RPGDate } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
+import { type RPGDate } from "@/models/Date"

-import { PhArrowLineLeft, PhArrowLineRight } from '@phosphor-icons/vue'
+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') {
+function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
  let fromDate: RPGDate

  // To modify, obviously
  const daysPerMonth = 32
  const monthsPerYear = 10

-  const toDay = position === 'next' ? daysPerMonth : 1
-  const toMonth = position === 'next' ? monthsPerYear : 0
+  const toDay = position === "next" ? daysPerMonth : 1
+  const toMonth = position === "next" ? monthsPerYear : 0

  switch (currentConfig.viewType) {
-    case 'month':
+    case "month":
      fromDate = {
        day: toDay,
        month: currentDate.currentMonth,
@@ -27,7 +24,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
      }
      break

-    case 'year':
+    case "year":
      fromDate = {
        day: toDay,
        month: toMonth,
@@ -35,7 +32,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
      }
      break

-    case 'decade':
+    case "decade":
      fromDate = {
        day: toDay,
        month: currentDate.currentMonth,
@@ -43,7 +40,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
      }
      break

-    case 'century':
+    case "century":
    default:
      fromDate = {
        day: toDay,
--- 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'
+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)

--- a/components/calendar/CalendarSwitch.vue
+++ b/components/calendar/CalendarSwitch.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCalendar } from '@/stores/CalendarStore'
-import { PhCalendarBlank } from '@phosphor-icons/vue'
-import { computed } from 'vue'
+import { useCalendar } from "@/stores/CalendarStore"
+import { PhCalendarBlank } from "@phosphor-icons/vue"
+import { computed } from "vue"

 const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()

--- a/components/calendar/SearchMode.ts
+++ b/components/calendar/SearchMode.ts
@@ -1,3 +1,3 @@
 export const searchUnifier = new RegExp(/[^a-zA-Z0-9\-'']/g)

-export type SearchMode = 'characters' | 'events' | undefined
+export type SearchMode = "characters" | "events" | undefined
--- a/components/calendar/dialog/Create.vue
+++ b/components/calendar/dialog/Create.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { PhX } from "@phosphor-icons/vue";
+import type { World } from "~/models/World";
+
+defineProps<{
+  world: World,
+  modalState?: boolean
+}>()
+
+const calendarSkeletonName = ref<string>("")
+
+function onChangedName(newName: string) {
+  calendarSkeletonName.value = newName
+}
+
+const emit = defineEmits(["on-close"])
+
+function handleClose() {
+  emit("on-close")
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="modalState">
+    <UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6">
+      <UiAlertDialogTitle>
+        <span class="text-2xl">
+          <strong class="font-bold">{{ world.name }}</strong>
+          <span class="opacity-30"> — </span>
+          <span v-if="calendarSkeletonName">
+            {{ calendarSkeletonName }}
+          </span>
+          <span v-else>Nouveau calendrier</span>
+        </span>
+      </UiAlertDialogTitle>
+
+      <UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleClose">
+        <PhX size="20" />
+      </UiButton>
+
+      <CalendarFormCreate @on-changed-name="onChangedName" @on-close="handleClose" />
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>
--- a/components/calendar/dialog/Delete.vue
+++ b/components/calendar/dialog/Delete.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { PhCircleNotch } from "@phosphor-icons/vue";
+import type { Calendar } from "~/models/CalendarConfig";
+
+const props = defineProps<{
+  modalState: boolean,
+  calendar: Calendar | null
+}>()
+
+const isLoading = ref<boolean>(false)
+
+const emit = defineEmits(["on-close"])
+
+async function handleAction(): Promise<void> {
+  if (isLoading.value) return
+  if (!props.calendar) return
+
+  isLoading.value = true
+
+  try {
+    await $fetch(`/api/calendars/${props.calendar.id}`, { method: "DELETE" })
+
+    // isDeleteEventModalOpen.value = false
+  } catch (err) {
+    if (err instanceof Error) {
+      // formErrors.message = err.message
+    }
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing() {
+  if (!isLoading.value) {
+    emit("on-close")
+  }
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="modalState">
+    <UiAlertDialogContent
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="min-w-96 bg-slate-900 border-slate-800"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
+    >
+      <UiAlertDialogTitle> Êtes-vous sûr de supprimer ce calendrier ?</UiAlertDialogTitle>
+
+      <UiAlertDialogDescription>
+        Les évènements ne seront plus accessibles et vous ne pourrez plus récupérer les données !
+      </UiAlertDialogDescription>
+
+      <form @submit.prevent="handleAction">
+        <div class="grid grid-cols-2 gap-y-4">
+          <div class="text-red-500 ml-8">
+            <span class="text-sm">
+              <!-- {{ formErrors.message }} -->
+            </span>
+          </div>
+        </div>
+
+        <footer class="flex gap-2 justify-between">
+          <UiButton type="button" size="sm" variant="ghost" @click="handleClosing">
+            Retour
+          </UiButton>
+
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-delay">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
+                Annuler
+              </UiButton>
+            </Transition>
+
+            <UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
+              <Transition name="fade">
+                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+              </Transition>
+
+              Supprimer "{{ calendar?.name }}"
+            </UiButton>
+          </div>
+        </footer>
+      </form>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>
--- a/components/calendar/form/Create.vue
+++ b/components/calendar/form/Create.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { Calendar } from "~/models/CalendarConfig";
+import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
+
+const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: []}
+const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
+
+onMounted(() => {
+  calendarSkeleton.value = { ...defaultSkeleton }
+})
+
+type FormTabs = "global" | "months" | "today"
+const activeTab = ref<FormTabs>("global")
+
+/**
+ * === Current date ===
+ */
+// If the months data change, just reset today's month
+// This is a failsafe mainly because of 1) month positions and 2) month names
+watch(calendarSkeleton.value.months, () => {
+  calendarSkeleton.value.today.month = 0
+}, { deep: true })
+
+/**
+ * === Form Validation ===
+ */
+
+/** Whether the skeleton has valid month data */
+const validSkeletonMonths = computed(() => calendarSkeleton.value.months.length > 0)
+
+/** Whether the skeleton has a valid name */
+const validSkeletonGeneral = computed(() => calendarSkeleton.value.name)
+
+/** Whether all the data checks above are a-ok */
+const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeletonMonths.value)
+
+/** Send the data to the store for validation */
+const isCreatingCalendar = ref<boolean>(false)
+
+async function handleSubmit() {
+  try {
+    isCreatingCalendar.value = true
+    await $fetch("/api/calendars/create", { method: "POST", body: {...calendarSkeleton.value, worldId: 1 } })
+
+    emit("on-close")
+  } catch (err) {
+    console.log(err)
+  } finally {
+    isCreatingCalendar.value = false
+  }
+}
+
+/**
+ * === Watch for name changes to display above ===
+ */
+const emit = defineEmits<{
+  // eslint-disable-next-line no-unused-vars
+  (e: "on-changed-name", calendarName: string): void
+    // eslint-disable-next-line no-unused-vars
+  (e: "on-close"): void
+}>()
+
+/** Hook to emit a debounced event for the changed skeleton name */
+const handleNameChange = useDebounceFn(() => {
+  emit("on-changed-name", calendarSkeleton.value.name)
+}, 400)
+
+function handleFormCancel() {
+  emit("on-close")
+}
+</script>
+
+<template>
+  <template v-if="calendarSkeleton">
+    <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
+      <UiTabs v-model:model-value="activeTab">
+        <UiTabsList class="grid w-full grid-cols-3 mb-4">
+          <UiTabsTrigger value="global" class="font-bold">
+            <div class="flex items-center gap-1">
+              <PhWrench size="18" weight="fill" />
+              Général
+            </div>
+          </UiTabsTrigger>
+          <UiTabsTrigger value="months" class="font-bold">
+            <div class="flex items-center gap-1">
+              <PhCalendarDots size="18" weight="fill" />
+              Mois de l'année
+            </div>
+          </UiTabsTrigger>
+          <UiTabsTrigger value="today" class="font-bold">
+            <div class="flex items-center gap-1">
+              <PhAlarm size="18" weight="fill" />
+              Aujourd'hui
+            </div>
+          </UiTabsTrigger>
+        </UiTabsList>
+        <UiTabsContent value="global">
+          <input
+            id="new-calendar-name"
+            v-model="calendarSkeleton.name"
+            type="text"
+            name="new-calendar-name"
+            required
+            placeholder="Titre"
+            class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            @input="handleNameChange"
+          >
+        </UiTabsContent>
+        <UiTabsContent value="months">
+          <CalendarInputMonthList v-model:model-value="calendarSkeleton.months" />
+        </UiTabsContent>
+        <UiTabsContent value="today">
+          <CalendarInputTodaySelect v-model:model-value="calendarSkeleton.today" :available-months="calendarSkeleton.months"/>
+        </UiTabsContent>
+      </UiTabs>
+
+      <footer class="flex justify-end gap-2 mt-6">
+        <UiButton type="button" variant="destructive" @click="handleFormCancel">
+          Annuler
+        </UiButton>
+
+        <UiButton type="submit" :disabled="!validSkeleton || isCreatingCalendar">
+          <Transition name="fade">
+            <PhCircleNotch v-if="isCreatingCalendar" size="20" class="opacity-50 animate-spin"/>
+          </Transition>
+
+          Créer
+        </UiButton>
+      </footer>
+    </form>
+  </template>
+</template>
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { RPGDate } from '~/models/Date';
-import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from '@phosphor-icons/vue'
+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)

@@ -104,7 +104,8 @@ function handleCancel() {
              name="new-event-title"
              required
              placeholder="Titre de l'évènement"
-              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            >
          </div>

          <div class="col-span-2 my-2 pl-8">
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-import { PhCircleNotch } from '@phosphor-icons/vue';
+import { PhCircleNotch } from "@phosphor-icons/vue";

-const { isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
+const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())

-const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendarEvents()
-const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
-
-const isLoading = ref(false)
+const isLoading = ref<boolean>(false)

 const formErrors = reactive<{ message: string | null }>({
  message: null
@@ -19,7 +17,7 @@ watch(isDeleteEventModalOpen, (hasOpened, _o) => {
  }
 })

-async function handleAction() {
+async function handleAction(): Promise<void> {
  if (isLoading.value) return

  isLoading.value = true
@@ -43,7 +41,7 @@ async function handleAction() {
 *
 * @param e The closing event (can be keydown or click)
 */
-function handleClosing(e: Event) {
+function handleClosing(e: Event): void {
  if (isLoading.value) {
    e.preventDefault()
  }
@@ -54,7 +52,7 @@ function handleClosing(e: Event) {
 *
 * Must cancel the abortController in the store, and stop the loading
 */
-function handleCancel() {
+function handleCancel(): void {
  cancelLatestRequest()
  isLoading.value = false
 }
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from '@phosphor-icons/vue'
-import { VisuallyHidden } from 'radix-vue'
+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)

--- a/components/calendar/input/EventCategories.vue
+++ b/components/calendar/input/EventCategories.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { Category } from '~/models/Category';
+import type { Category } from "~/models/Category";

-import { PhCaretDown, PhCheck } from '@phosphor-icons/vue';
+import { PhCaretDown, PhCheck } from "@phosphor-icons/vue";

 const isPopoverOpen = ref<boolean>(false)

@@ -17,12 +16,12 @@ watch(modelBuffer.value, () => {
  model.value = [ ...modelBuffer.value ]
 })

-const { categories: availableCategories } = useCalendarEvents()
+const { categories: availableCategories } = useCalendar()

-const searchTerm = ref<string>('')
+const searchTerm = ref<string>("")

 const filteredCategories = computed(() =>
-  searchTerm.value === ''
+  searchTerm.value === ""
    ? availableCategories
    : availableCategories.filter((category) => {
      return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
@@ -70,9 +69,6 @@ const filteredCategories = computed(() =>
              :key="category.id"
              :value="category"
              class="cursor-pointer flex justify-between items-center"
-              :class="cn({
-
-              })"
            >
              <span>
                {{ category.name }}
--- a/components/calendar/input/EventCategory.vue
+++ b/components/calendar/input/EventCategory.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { PhCaretDown } from '@phosphor-icons/vue';
-import type { Category } from '~/models/Category';
+import { PhCaretDown } from "@phosphor-icons/vue";
+import type { Category } from "~/models/Category";

 const isPopoverOpen = ref<boolean>(false)

@@ -10,16 +10,16 @@ const props = defineProps<{

 const model = defineModel<Category>()

-const { categories: availableCategories } = useCalendarEvents()
+const { categories: availableCategories } = useCalendar()

-const searchTerm = ref<string>('')
+const searchTerm = ref<string>("")

 function handleCatSelect() {
  isPopoverOpen.value = false
 }

 const filteredCategories = computed(() =>
-  searchTerm.value === ''
+  searchTerm.value === ""
    ? availableCategories
    : availableCategories.filter((category) => {
      return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
--- a/components/calendar/input/MonthList.vue
+++ b/components/calendar/input/MonthList.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { cn } from "~/lib/utils";
+
+import { useSortable } from "@vueuse/integrations/useSortable";
+import type { CalendarMonth } from "~/models/CalendarMonth";
+
+import { PhList, PhPlus, PhTrash } from "@phosphor-icons/vue";
+
+const model = defineModel<CalendarMonth[]>({ required: true })
+
+/**
+ * Input value for new month's name
+ */
+const monthName: Ref<string | undefined> = ref<string>()
+const monthNameRef = ref<HTMLInputElement>()
+const { focused: monthNameFocused } = useFocus(monthNameRef)
+const validMonthNameDatatypes = ["string"]
+const monthNameIsTaken = computed(() => model.value.find(m => m.name === monthName.value))
+const validMonthName = computed(() => validMonthNameDatatypes.includes(typeof monthName.value) && !monthNameIsTaken.value)
+
+/**
+ * Input value for new month's number of days
+ */
+const monthDays: Ref<number | undefined> = ref<number>()
+const monthDaysRef = ref<HTMLInputElement>()
+const validMonthDaysDatatypes = ["number"]
+const validMonthDays = computed(() => validMonthDaysDatatypes.includes(typeof monthDays.value) && monthDays.value && monthDays.value >= 12)
+
+const validNewMonth = computed(() => validMonthDays.value && validMonthName.value)
+
+/**
+ * Add current month input data to the model list
+ */
+function addMonthToModel(): void {
+  if (!monthDays.value || !monthName.value) return
+
+  // Create month object to add
+  const monthToInsert: CalendarMonth = {
+    name: monthName.value,
+    days: monthDays.value,
+    position: model.value.length
+  }
+
+  model.value.push(monthToInsert)
+
+  // Reset form state
+  monthName.value = ""
+  monthNameFocused.value = true
+}
+
+/**
+ * Remove a specific month from the model
+ *
+ * @param index Index position of the month in the model
+ */
+function removeMonthFromModel(index: number) {
+  if (isNaN(index)) return
+
+  model.value.splice(index, 1)
+}
+
+// Sortable setup
+const monthSortableList = ref<HTMLElement | null>(null)
+useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle" })
+</script>
+
+<template>
+  <div class="grid md:grid-cols-12 gap-4 items-center">
+    <div class="md:col-start-2 md:col-span-5">
+      <UiInput id="new-month-name" ref="monthNameRef" v-model="monthName" type="text" name="newMonthName" placeholder="Nom du mois" :class="cn({ 'border-red-600': monthNameIsTaken })"/>
+    </div>
+    <div class="md:col-span-5">
+      <UiInput id="new-month-days" ref="monthDaysRef" v-model="monthDays" type="number" name="newMonthName" placeholder="Nombre de jours" min="0" step="1" class="invalid:border-red-600" />
+    </div>
+    <div class="md:col-span-1">
+      <UiButton size="icon" class="rounded-full h-8 w-8" :disabled="!validNewMonth" @click.prevent="addMonthToModel">
+        <PhPlus size="17"/>
+      </UiButton>
+    </div>
+    <div class="md:col-span-full">
+      <div class="border-[1px] dark:border-slate-800 p-4 rounded-sm" :class="model.length ? 'md:grid md:grid-cols-12 md:gap-4 md:items-center' : ''">
+          <div v-if="model.length" class="hidden md:block col-span-1">
+            <ul class="grid gap-y-4 justify-center">
+              <li v-for="(m, i) in model" :key="`num-${m.name}`">
+                <UiButton size="icon" variant="secondary" class="h-8 w-8 rounded-full">
+                  <span class="font-bold text-sm">{{ i + 1 }}</span>
+                </UiButton>
+              </li>
+            </ul>
+          </div>
+          <div class="md:col-span-11">
+            <ul ref="monthSortableList" class="grid gap-y-2" :class="model.length ? 'visible' : 'absolute invisible'">
+              <template v-if="model.length">
+                <li v-for="(m, i) in model" :key="m.name" class="grid md:grid-cols-12 gap-4 md:items-center text-slate-900 bg-slate-200 rounded-md">
+                  <div class="md:col-span-1 text-right duration-200 ease-out transition transform origin-top-right">
+                    <UiButton type="button" variant="ghost" size="icon" class="handle rounded-full h-8 w-8">
+                      <PhList size="17" />
+                    </UiButton>
+                  </div>
+                  <div class="md:col-span-3">
+                    <div class="font-bold md:pl-2">
+                      {{ m.name }}
+                    </div>
+                  </div>
+                  <div class="md:col-span-2">
+                    <UiInput :id="`month-days-n${i}`" v-model="m.days" class="bg-transparent border-none" type="number" :name="`monthDays-n${i}`" placeholder="Nombre de jours" min="0" />
+                  </div>
+                  <div class="md:col-span-1">
+                    jour(s)
+                  </div>
+                  <div class="md:col-start-12">
+                    <UiTooltipProvider>
+                      <UiTooltip>
+                        <UiTooltipTrigger as-child>
+                          <UiButton type="button" variant="ghost" size="icon" class="rounded-full h-8 w-8" @click="removeMonthFromModel(i)">
+                            <PhTrash size="17" />
+                          </UiButton>
+                        </UiTooltipTrigger>
+                        <UiTooltipContent>
+                          <p>Supprimer {{ m.name }} du calendrier</p>
+                        </UiTooltipContent>
+                      </UiTooltip>
+                    </UiTooltipProvider>
+                  </div>
+                </li>
+              </template>
+            </ul>
+          </div>
+        <template v-if="!model.length">
+          <p class="col-span-12 text-lg text-center italic opacity-50">Aucun mois pour l'instant</p>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
--- a/components/calendar/input/RPGDate.vue
+++ b/components/calendar/input/RPGDate.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { RPGDate } from '~/models/Date';
+import type { RPGDate } from "~/models/Date";

 import {
  PhXCircle
-} from '@phosphor-icons/vue'
+} from "@phosphor-icons/vue"

 const model = defineModel<RPGDate | null>()

@@ -27,7 +27,7 @@ const inputPlaceholder = computed<string>(() => {
    return props.placeholder
  }

-  return ''
+  return ""
 })

 const initialDateValue = props.initialDate ? { ...props.initialDate } : null
@@ -37,7 +37,7 @@ const monthTitle = computed<string>(() => {
    return getMonthName(model.value.month)
  }

-  return ''
+  return ""
 })

 const hasValue = computed<boolean>(() => !!model.value)
--- a/components/calendar/input/TodaySelect.vue
+++ b/components/calendar/input/TodaySelect.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { CalendarMonth } from "~/models/CalendarMonth";
+import type { RPGDate } from "~/models/Date";
+
+import { PhCalendarBlank } from "@phosphor-icons/vue";
+
+const model = defineModel<RPGDate>({ required: true })
+
+const props = defineProps<{
+  availableMonths: CalendarMonth[]
+}>()
+
+/**
+ *
+ * @param e The name of today's month
+ */
+function setTodayMonth(e: string) {
+  model.value.month = e
+}
+
+// When the model changes, get the month index from the month name
+watch(model.value, (n, _o) => {
+  // If the month value is already an index, return early
+  if (!isNaN(+model.value.month)) return
+
+  const monthId = props.availableMonths.findIndex((m) => m.name === n.month)
+
+  if (monthId !== -1) {
+    model.value.month = monthId + 1
+  }
+})
+</script>
+
+<template>
+  <div class="flex gap-2 items-stretch">
+    <UiInput id="new-month-current-day" v-model="model.day" type="number" name="newMonthCurrentDay" placeholder="Jour" min="1" step="1" class="invalid:border-red-600" />
+
+    <UiDropdownMenu>
+      <UiDropdownMenuTrigger as-child :disabled="props.availableMonths.length < 1">
+        <UiButton size="sm" variant="secondary">
+          <PhCalendarBlank size="18" weight="fill" />
+
+          <template v-if="props.availableMonths.length < 1">
+            Aucun mois disponible
+          </template>
+          <template v-else-if="model.month && typeof model.month === 'number'">
+            {{ props.availableMonths[model.month - 1].name }}
+          </template>
+          <template v-else>
+            Choisir le mois
+          </template>
+        </UiButton>
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent :side="'bottom'" :collision-padding="30">
+        <UiDropdownMenuLabel>Mois disponibles</UiDropdownMenuLabel>
+        <UiDropdownMenuSeparator />
+        <UiDropdownMenuItem
+          v-for="m in props.availableMonths"
+          :key="m.name"
+          @click="setTodayMonth(m.name)"
+        >
+          {{ m.name }}
+        </UiDropdownMenuItem>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>
+
+    <UiInput id="new-month-current-day" v-model="model.year" type="number" name="newMonthCurrentYear" placeholder="Année" step="1" class="invalid:border-red-600" />
+  </div>
+</template>
--- a/components/calendar/search/CalendarSearch.vue
+++ b/components/calendar/search/CalendarSearch.vue
@@ -2,49 +2,46 @@
 import {
  isCharacter,
  type Character,
-} from '@/models/Characters'
-import type { RPGDateOrder } from '@/models/Date'
+} from "@/models/Characters"
+import type { RPGDateOrder } from "@/models/Date"
 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'
-import { searchUnifier, type SearchMode } from '../SearchMode'
+} from "~/models/CalendarEvent"
+import { capitalize } from "@/utils/Strings"
+import { useMagicKeys, useScroll, useStorage, whenever } from "@vueuse/core"
+import { computed, ref, watch } from "vue"
+import { searchUnifier, type SearchMode } from "../SearchMode"

-import { PhClockClockwise, PhClockCounterClockwise, PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { PhClockClockwise, PhClockCounterClockwise, PhMagnifyingGlass } from "@phosphor-icons/vue"
 import {
  ComboboxAnchor,
  ComboboxInput,
  ComboboxPortal,
  ComboboxRoot,
  VisuallyHidden
-} from 'radix-vue'
+} from "radix-vue"

-import SearchList from './lists/SearchList.vue'
-import type { Category } from '~/models/Category'
+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>('')
+const searchQuery = ref<string>("")
 // const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)

-const selectedEntity = useStorage('se', 'events' as SearchMode)
+const selectedEntity = useStorage("se", "events" as SearchMode)

 // Order
-const selectedOrder = ref<RPGDateOrder>('asc')
+const selectedOrder = ref<RPGDateOrder>("asc")
 function setOrderAsc() {
-  selectedOrder.value = 'asc'
+  selectedOrder.value = "asc"
  resetPage()
 }

 function setOrderDesc() {
-  selectedOrder.value = 'desc'
+  selectedOrder.value = "desc"
  resetPage()
 }

@@ -68,9 +65,9 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {

  // Assign data to loop over and filter
  // They are assigned this way for readability
-  if (selectedEntity.value === 'events') {
+  if (selectedEntity.value === "events") {
    dataToFilter = allEvents.value
-  } else if (selectedEntity.value === 'characters') {
+  } else if (selectedEntity.value === "characters") {
    dataToFilter = characters.value
  } else {
    dataToFilter = [...allEvents.value, ...characters.value]
@@ -83,15 +80,15 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
    // Filter calendar events
    if (isCalendarEvent(item)) {
      const queryString = new String(searchQuery.value)
-        .replace(searchUnifier, '')
+        .replace(searchUnifier, "")
        .toLocaleLowerCase()

      const hitTitle = item.title
-        .replace(searchUnifier, '')
+        .replace(searchUnifier, "")
        .toLocaleLowerCase()
        .includes(queryString)
      const hitDesc = item.description
-        ?.replace(searchUnifier, '')
+        ?.replace(searchUnifier, "")
        .toLocaleLowerCase()
        .includes(queryString)

@@ -121,11 +118,11 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
    // Filter characters
    if (isCharacter(item)) {
      const queryString = new String(searchQuery.value)
-        .replace(searchUnifier, '')
+        .replace(searchUnifier, "")
        .toLocaleLowerCase()

      const hitTitle = item.name
-        .replace(searchUnifier, '')
+        .replace(searchUnifier, "")
        .toLocaleLowerCase()
        .includes(queryString)

@@ -160,7 +157,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
 * Removes the search query, resets the pagination and removes all selected categories
 */
 function resetSearch() {
-  searchQuery.value = ''
+  searchQuery.value = ""
  resetPage()
  selectedCategories.value = []
 }
@@ -208,7 +205,7 @@ const currentCategories = computed(() => {

 const selectedCategories = ref<(Category)[]>([])
 const categoryFilterOpened = ref<boolean>(false)
-const searchCategory = ref<string>('')
+const searchCategory = ref<string>("")

 const filteredCategories = computed(() =>
  currentCategories.value.filter((i) => !selectedCategories.value.includes(i))
@@ -220,8 +217,8 @@ const filteredCategories = computed(() =>
 * @param e Radix Change Event
 */
 function handleCategorySelect(e: (Category)) {
-  if (typeof e === 'string') {
-    searchCategory.value = ''
+  if (typeof e === "string") {
+    searchCategory.value = ""
    selectedCategories.value.push(e)
  }

--- a/components/calendar/search/lists/CharacterCallout.vue
+++ b/components/calendar/search/lists/CharacterCallout.vue
@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import type { Character } from '@/models/Characters'
-import type { RPGDate } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
+import type { Character } from "@/models/Characters"
+import type { RPGDate } from "@/models/Date"
+import { useCalendar } from "@/stores/CalendarStore"

-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { Button } from '@/components/ui/button'
-import { PhArrowSquareOut, PhPlant, PhSkull } from '@phosphor-icons/vue'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Button } from "@/components/ui/button"
+import { PhArrowSquareOut, PhPlant, PhSkull } from "@phosphor-icons/vue"

 const props = defineProps<{
  character: Character
 }>()

 defineEmits<{
-  (e: 'query:date-jump', payload: RPGDate): void
+  (e: "query:date-jump", payload: RPGDate): void
 }>()

 const { getFormattedDateTitle } = useCalendar()
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/components/calendar/search/lists/EventCallout.vue
@@ -1,26 +1,23 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { RPGDate } from '@/models/Date'
-import type { CalendarEvent } from '@/models/CalendarEvent'
-import { useCalendar } from '@/stores/CalendarStore'
+import { cn } from "@/lib/utils"
+import type { RPGDate } from "@/models/Date"
+import type { CalendarEvent } from "@/models/CalendarEvent"

-import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from '@phosphor-icons/vue'
+import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from "@phosphor-icons/vue"

 const props = defineProps<{
  event: CalendarEvent
 }>()

 defineEmits<{
-  (e: 'query:date-jump', payload: RPGDate): void
+  (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
-  ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
+  ? getRelativeString(props.event.startDate, props.event.endDate, "compact")
  : null
 </script>

@@ -48,18 +45,32 @@ const dateDuration: string | null = props.event.endDate
      </div>
    </div>

-    <div class="mb-1">
+    <div class="flex gap-2 items-center justify-between mb-1">
      <template v-if="!event.endDate">
-        <p class="col-span-2 font-semibold text-sm opacity-75">
+        <p class="font-semibold text-sm opacity-75">
          {{ getFormattedDateTitle(event.startDate, true) }}
        </p>
      </template>
      <template v-else>
-        <p class="col-span-2 font-semibold text-sm opacity-75">
+        <p class="font-semibold text-sm opacity-75">
          Du {{ getFormattedDateTitle(event.startDate, true) }} au
          {{ getFormattedDateTitle(event.endDate, true) }}
        </p>
      </template>
+      <div v-if="event.hidden" class="flex justify-end">
+        <UiTooltipProvider :delay-duration="250">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiBadge class="flex gap-1 border-[1px] border-slate-900 hover:bg-slate-300 hover:opacity-100">
+                <PhEye size="16" weight="fill" /> Évènement privé
+              </UiBadge>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>Cet évènement est uniquement visible pour vous</p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </div>
    </div>

    <div class="mb-1 flex gap-x-2 items-center">
@@ -100,18 +111,5 @@ const dateDuration: string | null = props.event.endDate
        {{ event.description }}
      </span>
    </div>
-
-    <UiTooltipProvider v-if="event.hidden" :delay-duration="250">
-      <UiTooltip>
-        <UiTooltipTrigger as-child>
-          <UiBadge class="absolute -top-2 left-2 flex gap-1 border-[1px] border-slate-900 hover:bg-slate-300 hover:opacity-100">
-            <PhEye size="16" weight="fill" /> Évènement privé
-          </UiBadge>
-        </UiTooltipTrigger>
-        <UiTooltipContent>
-          <p>Cet évènement est uniquement visible pour vous</p>
-        </UiTooltipContent>
-      </UiTooltip>
-    </UiTooltipProvider>
  </button>
 </template>
--- a/components/calendar/search/lists/SearchList.vue
+++ b/components/calendar/search/lists/SearchList.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { isCharacter, type Character } from '@/models/Characters'
-import type { RPGDate, RPGDateOrder } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
-import { computed } from 'vue'
-import { isCalendarEvent, type CalendarEvent } from '~/models/CalendarEvent'
-import type { SearchMode } from '../../SearchMode'
+import { isCharacter, type Character } from "@/models/Characters"
+import type { RPGDate, RPGDateOrder } from "@/models/Date"
+import { useCalendar } from "@/stores/CalendarStore"
+import { computed } from "vue"
+import { isCalendarEvent, type CalendarEvent } from "~/models/CalendarEvent"
+import type { SearchMode } from "../../SearchMode"

-import CharacterCallout from './CharacterCallout.vue'
-import EventCallout from './EventCallout.vue'
+import CharacterCallout from "./CharacterCallout.vue"
+import EventCallout from "./EventCallout.vue"

 const props = defineProps<{
  results: (Character | CalendarEvent)[]
@@ -18,7 +18,7 @@ const props = defineProps<{
  limit?: number
 }>()

-const emit = defineEmits(['jumpedToDate'])
+const emit = defineEmits(["jumpedToDate"])

 const { jumpToDate, compareDates } = useCalendar()

@@ -26,7 +26,7 @@ function handleJumpToDate(date?: RPGDate) {
  if (!date) return

  jumpToDate(date)
-  emit('jumpedToDate')
+  emit("jumpedToDate")
 }

 // Initial sorting of the results
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -1,13 +1,11 @@
 <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'
+import type { RPGDate } from "@/models/Date"
+import type { CalendarEvent } from "@/models/CalendarEvent"
+import { useElementBounding } from "@vueuse/core"
+import { storeToRefs } from "pinia"
+import { computed, ref, type ComputedRef } from "vue"

-import CalendarEventButton from '../../CalendarEvent.vue'
+import CalendarEventButton from "../../CalendarEvent.vue"

 const props = defineProps<{
  date: RPGDate
@@ -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
--- a/components/calendar/state/monthly/Layout.vue
+++ b/components/calendar/state/monthly/Layout.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
-import { useThrottleFn } from '@vueuse/core'
+import { useCalendar } from "@/stores/CalendarStore"
+import { useThrottleFn } from "@vueuse/core"

-const { currentDate, decrementMonth, incrementMonth } = useCalendar()
+const { currentDate, decrementViewMonth, incrementViewMonth } = useCalendar()
 const { currentMonthData } = storeToRefs(useCalendar())

 function handleWheel(e: WheelEvent) {
@@ -15,24 +15,26 @@ function handleWheel(e: WheelEvent) {
 }

 const moveCalendarLeft = useThrottleFn(() => {
-  decrementMonth()
+  decrementViewMonth()
 }, 100)

 const moveCalendarRight = useThrottleFn(() => {
-  incrementMonth()
+  incrementViewMonth()
 }, 100)
 </script>

 <template>
  <div class="grid grid-cols-10" @wheel="handleWheel">
-    <CalendarStateMonthlyDayTile
-      v-for="day in currentMonthData.days"
-      :key="`layout-month-grid-${day}`"
-      :date="{
-        day: day,
-        month: currentDate.currentMonth,
-        year: currentDate.currentYear
-      }"
-    />
+    <template v-if="currentMonthData">
+      <CalendarStateMonthlyDayTile
+        v-for="day in currentMonthData?.days"
+        :key="`layout-month-grid-${day}`"
+        :date="{
+          day: day,
+          month: currentDate.currentMonth,
+          year: currentDate.currentYear
+        }"
+      />
+    </template>
  </div>
 </template>
--- 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'
+import type { RPGDate } from "@/models/Date"
+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,
--- a/components/calendar/state/yearly/Layout.vue
+++ b/components/calendar/state/yearly/Layout.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
-import { useThrottleFn } from '@vueuse/core'
+import { useCalendar } from "@/stores/CalendarStore"
+import { useThrottleFn } from "@vueuse/core"

-const { decrementYear, incrementYear } = useCalendar()
+const { decrementViewYear, incrementViewYear } = useCalendar()
 const { sortedMonths: months } = storeToRefs(useCalendar())

 function handleWheel(e: WheelEvent) {
@@ -15,11 +15,11 @@ function handleWheel(e: WheelEvent) {
 }

 const moveCalendarLeft = useThrottleFn(() => {
-  decrementYear()
+  decrementViewYear()
 }, 100)

 const moveCalendarRight = useThrottleFn(() => {
-  incrementYear()
+  incrementViewYear()
 }, 100)
 </script>

--- a/components/calendar/state/yearly/MonthTile.vue
+++ b/components/calendar/state/yearly/MonthTile.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { CalendarMonth } from '~/models/CalendarMonth';
+import type { CalendarMonth } from "~/models/CalendarMonth";

 defineProps<{
  month: CalendarMonth
--- a/components/global/Spacing.vue
+++ b/components/global/Spacing.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { cn } from "~/lib/utils";
+
+interface SpacingProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xlg" | "2xl" | "3xl"
+}
+
+const props = defineProps<SpacingProps>()
+
+let spacingClass: string
+
+switch (props.size) {
+  case "lg":
+    spacingClass = "space-y-4"
+    break;
+
+  case "md":
+  default:
+    spacingClass = "space-y-2"
+    break;
+}
+</script>
+
+<template>
+  <div
+    :class="cn(spacingClass)"
+  >
+    <slot />
+  </div>
+</template>
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -1,18 +1,14 @@
 <script lang="ts" setup>
-import { PhHouse, PhList } from '@phosphor-icons/vue'
-import type { SidebarMenuActionType } from './SidebarProps';
-
-const route = useRoute()
-
-const isHome = computed<boolean>(() => {
-  return route.fullPath === '/'
-})
+import { PhGlobeHemisphereWest, PhHouse, PhList } from "@phosphor-icons/vue"
+import type { SidebarMenuActionType } from "./SidebarProps";

 const { revealAdvancedSearch } = useCalendar()
 const { currentMenu } = storeToRefs(useUiStore())

+const user = useSupabaseUser()
+
 function handleMenuItemAction(actionType: SidebarMenuActionType) {
-  if (actionType === 'event-search') {
+  if (actionType === "event-search") {
    revealAdvancedSearch()
  }
 }
@@ -27,25 +23,46 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
        </UiButton>
      </li>

-      <li v-if="!isHome">
-        <UiTooltipProvider :delay-duration="100">
-          <UiTooltip>
-            <UiTooltipTrigger as-child>
-              <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
-                <RouterLink to="/">
-                  <PhHouse size="24" weight="fill" />
-                </RouterLink>
-              </UiButton>
-            </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'">
-              <p>Retourner aux outils</p>
-            </UiTooltipContent>
-          </UiTooltip>
-        </UiTooltipProvider>
-      </li>
+      <template v-if="!user">
+        <li>
+          <UiTooltipProvider :delay-duration="50">
+            <UiTooltip>
+              <UiTooltipTrigger as-child>
+                <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
+                  <RouterLink to="/">
+                    <PhHouse size="24" weight="fill" />
+                  </RouterLink>
+                </UiButton>
+              </UiTooltipTrigger>
+              <UiTooltipContent :side="'right'" :side-offset="6">
+                <p>Accueil</p>
+              </UiTooltipContent>
+            </UiTooltip>
+          </UiTooltipProvider>
+        </li>
+      </template>
+
+      <template v-else>
+        <li>
+          <UiTooltipProvider :delay-duration="50">
+            <UiTooltip>
+              <UiTooltipTrigger as-child>
+                <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
+                  <RouterLink to="/my">
+                    <PhGlobeHemisphereWest size="24" weight="fill" />
+                  </RouterLink>
+                </UiButton>
+              </UiTooltipTrigger>
+              <UiTooltipContent :side="'right'" :side-offset="6">
+                <p>Mondes</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 +74,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>
--- 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
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -1,13 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed } from "vue"

-import { PhUserCircle } from '@phosphor-icons/vue'
+import { PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"

 const router = useRouter()
+const { preference } = useColorMode()

 const { auth } = useSupabaseClient()
 const user = useSupabaseUser()
 const userMeta = computed(() => user.value?.user_metadata)
+const profileUrl: string = `${useRequestURL().origin}/my/`

 const menuOpened = ref<boolean>(false)

@@ -19,12 +21,13 @@ watch(user, closeMenu)
 async function handleGoogleLogin() {
  try {
    auth.signInWithOAuth({
-      provider: 'google',
+      provider: "google",
      options: {
        queryParams: {
-          access_type: 'offline',
-          prompt: 'consent'
-        }
+          access_type: "offline",
+          prompt: "consent"
+        },
+        redirectTo: profileUrl
      }
    })
  } catch (err) {
@@ -42,17 +45,20 @@ async function handleLogout() {
  }
 }

-function gotoProfilePage() {
-  router.push({ path: '/profile' })
+type AvailableRoutes = "/my" | "/my/settings"
+
+function pushRoute(to: AvailableRoutes) {
+  router.push({ path: to })

  closeMenu()
 }
 </script>

 <template>
+  {{ preference }}
  <ClientOnly>
-    <UiPopover v-model:open="menuOpened">
-      <UiPopoverTrigger>
+    <UiDropdownMenu v-model:open="menuOpened">
+      <UiDropdownMenuTrigger>
        <UiAvatar v-if="user" class="cursor-pointer">
          <UiAvatarImage
            :src="userMeta?.avatar_url"
@@ -64,20 +70,84 @@ function gotoProfilePage() {
        <UiButton v-else variant="outline" size="icon">
          <PhUserCircle size="18" />
        </UiButton>
-      </UiPopoverTrigger>
-      <UiPopoverContent class="w-fit p-0" :align="'start'" :side="'top'" :collision-padding="20">
-        <UiCommand>
-          <UiCommandList v-if="user">
-            <UiCommandGroup :heading="`Connecté en tant que ${user?.email}`">
-              <UiCommandItem value="profile" @select="gotoProfilePage"> Profil </UiCommandItem>
-              <UiCommandItem value="logout" @select="handleLogout"> Déconnexion </UiCommandItem>
-            </UiCommandGroup>
-          </UiCommandList>
-          <UiCommandList v-else>
-            <UiCommandItem value="logout" @select="handleGoogleLogin"> Connexion </UiCommandItem>
-          </UiCommandList>
-        </UiCommand>
-      </UiPopoverContent>
-    </UiPopover>
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent class="w-fit p-0" :align="'start'" :side="'top'" :side-offset="10" :align-offset="25" :collision-padding="40">
+
+        <template v-if="user">
+          <p class="p-2 text-xs opacity-75">Connecté en tant que {{ user?.email }}</p>
+
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my')">
+            <PhGlobeHemisphereWest size="20" weight="fill" />
+            <span>Mondes</span>
+          </UiDropdownMenuItem>
+
+          <UiDropdownMenuSeparator />
+
+          <UiDropdownMenuSub>
+            <UiDropdownMenuSubTrigger class="p-0">
+              <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <PhPalette size="20" weight="fill" />
+                <span>Apparence</span>
+              </UiDropdownMenuItem>
+            </UiDropdownMenuSubTrigger>
+            <UiDropdownMenuPortal>
+              <UiDropdownMenuSubContent>
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'dark'">
+                  <PhMoon size="20" />
+                  <span>Sombre</span>
+                </UiDropdownMenuItem>
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'light'">
+                  <PhSun size="20" />
+                  <span>Clair</span>
+                </UiDropdownMenuItem>
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'system'">
+                  <PhLaptop size="20" />
+                  <span>Système</span>
+                </UiDropdownMenuItem>
+              </UiDropdownMenuSubContent>
+            </UiDropdownMenuPortal>
+          </UiDropdownMenuSub>
+
+          <UiDropdownMenuSub>
+            <UiDropdownMenuSubTrigger class="p-0">
+              <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <PhTranslate size="20" />
+                <span>Langage</span>
+              </UiDropdownMenuItem>
+            </UiDropdownMenuSubTrigger>
+            <UiDropdownMenuPortal>
+              <UiDropdownMenuSubContent>
+                <UiDropdownMenuSubContent>
+                  <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                    <span>Français</span>
+                  </UiDropdownMenuItem>
+                  <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                    <span>English</span>
+                  </UiDropdownMenuItem>
+                </UiDropdownMenuSubContent>
+              </UiDropdownMenuSubContent>
+            </UiDropdownMenuPortal>
+          </UiDropdownMenuSub>
+
+          <UiDropdownMenuSeparator />
+
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my/settings')">
+            <PhGear size="20" weight="fill" />
+            <span>Compte</span>
+          </UiDropdownMenuItem>
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleLogout">
+            <PhSignOut size="20" weight="fill" />
+            <span>Déconnexion</span>
+          </UiDropdownMenuItem>
+        </template>
+
+        <template v-else>
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleGoogleLogin">
+            <PhGear size="20" weight="fill" />
+            <span>Connexion</span>
+          </UiDropdownMenuItem>
+        </template>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>
  </ClientOnly>
 </template>
--- a/components/ui/alert-dialog/AlertDialog.vue
+++ b/components/ui/alert-dialog/AlertDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from "radix-vue"

 const props = defineProps<AlertDialogProps>()
 const emits = defineEmits<AlertDialogEmits>()
--- a/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button/index'
+import { type HTMLAttributes, computed } from "vue"
+import { AlertDialogAction, type AlertDialogActionProps } from "radix-vue"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button/index"

-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()

 const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props
--- a/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button/index'
+import { type HTMLAttributes, computed } from "vue"
+import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button/index"

-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()

 const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props
--- a/components/ui/alert-dialog/AlertDialogClose.vue
+++ b/components/ui/alert-dialog/AlertDialogClose.vue
--- a/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/components/ui/alert-dialog/AlertDialogContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
  AlertDialogContent,
  type AlertDialogContentEmits,
@@ -7,10 +7,10 @@ import {
  AlertDialogOverlay,
  AlertDialogPortal,
  useForwardPropsEmits,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<AlertDialogContentEmits>()

 const delegatedProps = computed(() => {
@@ -25,13 +25,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
  <AlertDialogPortal>
    <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
    />
    <AlertDialogContent
      v-bind="forwarded"
      :class="
        cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-3xl -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
          props.class,
        )
      "
--- a/components/ui/alert-dialog/AlertDialogDescription.vue
+++ b/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
  AlertDialogDescription,
  type AlertDialogDescriptionProps,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()

 const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props
--- a/components/ui/alert-dialog/AlertDialogFooter.vue
+++ b/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/alert-dialog/AlertDialogHeader.vue
+++ b/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { AlertDialogTitle, type AlertDialogTitleProps } from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()

 const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props
--- a/components/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from "radix-vue"

 const props = defineProps<AlertDialogTriggerProps>()
 </script>
--- a/components/ui/alert-dialog/index.ts
+++ b/components/ui/alert-dialog/index.ts
@@ -1,9 +1,9 @@
-export { default as AlertDialog } from './AlertDialog.vue'
-export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
-export { default as AlertDialogContent } from './AlertDialogContent.vue'
-export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
-export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
-export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
-export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
-export { default as AlertDialogAction } from './AlertDialogAction.vue'
-export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
--- a/components/ui/avatar/Avatar.vue
+++ b/components/ui/avatar/Avatar.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { AvatarRoot } from 'radix-vue'
-import { type AvatarVariants, avatarVariant } from '.'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { AvatarRoot } from "radix-vue"
+import { type AvatarVariants, avatarVariant } from "."
+import { cn } from "@/lib/utils"

 const props = withDefaults(defineProps<{
-  class?: HTMLAttributes['class']
-  size?: AvatarVariants['size']
-  shape?: AvatarVariants['shape']
+  class?: HTMLAttributes["class"]
+  size?: AvatarVariants["size"]
+  shape?: AvatarVariants["shape"]
 }>(), {
-  size: 'sm',
-  shape: 'circle',
+  size: "sm",
+  shape: "circle",
 })
 </script>

--- a/components/ui/avatar/AvatarFallback.vue
+++ b/components/ui/avatar/AvatarFallback.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+import { AvatarFallback, type AvatarFallbackProps } from "radix-vue"

 const props = defineProps<AvatarFallbackProps>()
 </script>
--- a/components/ui/avatar/AvatarImage.vue
+++ b/components/ui/avatar/AvatarImage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+import { AvatarImage, type AvatarImageProps } from "radix-vue"

 const props = defineProps<AvatarImageProps>()
 </script>
--- a/components/ui/avatar/index.ts
+++ b/components/ui/avatar/index.ts
@@ -1,21 +1,21 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"

-export { default as Avatar } from './Avatar.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"

 export const avatarVariant = cva(
-  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  "inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden",
  {
    variants: {
      size: {
-        sm: 'h-10 w-10 text-xs',
-        base: 'h-16 w-16 text-2xl',
-        lg: 'h-32 w-32 text-5xl',
+        sm: "h-10 w-10 text-xs",
+        base: "h-16 w-16 text-2xl",
+        lg: "h-32 w-32 text-5xl",
      },
      shape: {
-        circle: 'rounded-full',
-        square: 'rounded-md',
+        circle: "rounded-full",
+        square: "rounded-md",
      },
    },
  },
--- a/components/ui/badge/Badge.vue
+++ b/components/ui/badge/Badge.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { type BadgeVariants, badgeVariants } from '.'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { type BadgeVariants, badgeVariants } from "."
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  variant?: BadgeVariants['variant']
-  class?: HTMLAttributes['class']
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/badge/index.ts
+++ b/components/ui/badge/index.ts
@@ -1,23 +1,23 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"

-export { default as Badge } from './Badge.vue'
+export { default as Badge } from "./Badge.vue"

 export const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
      },
    },
    defaultVariants: {
-      variant: 'default',
+      variant: "default",
    },
  },
 )
--- a/components/ui/button/Button.vue
+++ b/components/ui/button/Button.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { Primitive, type PrimitiveProps } from "radix-vue"
+import { type ButtonVariants, buttonVariants } from "."
+import { cn } from "@/lib/utils"

 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
  searchSlash?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
-  as: 'button'
+  as: "button"
 })
 </script>

--- a/components/ui/button/index.ts
+++ b/components/ui/button/index.ts
@@ -1,30 +1,30 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"

-export { default as Button } from './Button.vue'
+export { default as Button } from "./Button.vue"

 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline'
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
      },
      size: {
-        default: 'h-10 px-4 py-2',
-        xs: 'h-7 rounded-sm px-2 text-xs',
-        sm: 'h-9 rounded-md px-3 text-sm',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10'
+        default: "h-10 px-4 py-2",
+        xs: "h-7 rounded-sm px-2 text-xs",
+        sm: "h-9 rounded-md px-3 text-sm",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
      }
    },
    defaultVariants: {
-      variant: 'default',
-      size: 'default'
+      variant: "default",
+      size: "default"
    }
  }
 )
--- a/components/ui/card/Card.vue
+++ b/components/ui/card/Card.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
  link?: string
 }>()
 </script>
@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
  <div
    :class="
-      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all', props.class, {
+      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all isolate', props.class, {
        'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]':
          props.link
      })
@@ -22,7 +22,7 @@ const props = defineProps<{
    <NuxtLink
      v-if="props.link"
      :to="props.link"
-      class="absolute inset-0 focus-visible:outline-none"
+      class="absolute inset-0 z-10 focus-visible:outline-none"
    />
  </div>
 </template>
--- a/components/ui/card/CardContent.vue
+++ b/components/ui/card/CardContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/card/CardDescription.vue
+++ b/components/ui/card/CardDescription.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/card/CardFooter.vue
+++ b/components/ui/card/CardFooter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/card/CardHeader.vue
+++ b/components/ui/card/CardHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/card/CardTitle.vue
+++ b/components/ui/card/CardTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/card/index.ts
+++ b/components/ui/card/index.ts
@@ -1,6 +1,6 @@
-export { default as Card } from './Card.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardFooter } from './CardFooter.vue'
+export { default as Card } from "./Card.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardFooter } from "./CardFooter.vue"
--- a/components/ui/checkbox/Checkbox.vue
+++ b/components/ui/checkbox/Checkbox.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { CheckboxRootEmits, CheckboxRootProps } from "radix-vue"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "radix-vue"
+import { Check } from "lucide-vue-next"
+import { cn } from "@/lib/utils"

-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<CheckboxRootEmits>()

 const delegatedProps = computed(() => {
--- a/components/ui/checkbox/index.ts
+++ b/components/ui/checkbox/index.ts
@@ -1 +1 @@
-export { default as Checkbox } from './Checkbox.vue'
+export { default as Checkbox } from "./Checkbox.vue"
--- a/components/ui/command/Command.vue
+++ b/components/ui/command/Command.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue"
+import { ComboboxRoot, useForwardPropsEmits } from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes["class"] }>(), {
  open: true,
-  modelValue: ''
+  modelValue: ""
 })

 const emits = defineEmits<ComboboxRootEmits>()
--- a/components/ui/command/CommandDialog.vue
+++ b/components/ui/command/CommandDialog.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue'
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import Command from './Command.vue'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { useForwardPropsEmits } from "radix-vue"
+import type { DialogRootEmits, DialogRootProps } from "radix-vue"
+import Command from "./Command.vue"
+import { Dialog, DialogContent } from "@/components/ui/dialog"

 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
--- a/components/ui/command/CommandEmpty.vue
+++ b/components/ui/command/CommandEmpty.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxEmptyProps } from 'radix-vue'
-import { ComboboxEmpty } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxEmptyProps } from "radix-vue"
+import { ComboboxEmpty } from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>()

 const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props
--- a/components/ui/command/CommandGroup.vue
+++ b/components/ui/command/CommandGroup.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxGroupProps } from 'radix-vue'
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxGroupProps } from "radix-vue"
+import { ComboboxGroup, ComboboxLabel } from "radix-vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<
  ComboboxGroupProps & {
-    class?: HTMLAttributes['class']
+    class?: HTMLAttributes["class"]
    heading?: string
  }
 >()
--- a/components/ui/command/CommandInput.vue
+++ b/components/ui/command/CommandInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Search } from 'lucide-vue-next'
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { Search } from "lucide-vue-next"
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"

 defineOptions({
  inheritAttrs: false
@@ -10,7 +10,7 @@ defineOptions({

 const props = defineProps<
  ComboboxInputProps & {
-    class?: HTMLAttributes['class']
+    class?: HTMLAttributes["class"]
  }
 >()

--- a/components/ui/command/CommandItem.vue
+++ b/components/ui/command/CommandItem.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue"
+import { ComboboxItem, useForwardPropsEmits } from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<ComboboxItemEmits>()

 const delegatedProps = computed(() => {
--- a/components/ui/command/CommandList.vue
+++ b/components/ui/command/CommandList.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue"
+import { ComboboxContent, useForwardPropsEmits } from "radix-vue"
+import { cn } from "@/lib/utils"

 const props = withDefaults(
-  defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(),
  {
    dismissable: false
  }
--- a/components/ui/command/CommandSeparator.vue
+++ b/components/ui/command/CommandSeparator.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxSeparatorProps } from 'radix-vue'
-import { ComboboxSeparator } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxSeparatorProps } from "radix-vue"
+import { ComboboxSeparator } from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>()

 const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props
--- a/components/ui/command/CommandShortcut.vue
+++ b/components/ui/command/CommandShortcut.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/command/index.ts
+++ b/components/ui/command/index.ts
@@ -1,11 +1,11 @@
-export { ComboboxPortal } from 'radix-vue'
+export { ComboboxPortal } from "radix-vue"

-export { default as Command } from './Command.vue'
-export { default as CommandDialog } from './CommandDialog.vue'
-export { default as CommandEmpty } from './CommandEmpty.vue'
-export { default as CommandGroup } from './CommandGroup.vue'
-export { default as CommandInput } from './CommandInput.vue'
-export { default as CommandItem } from './CommandItem.vue'
-export { default as CommandList } from './CommandList.vue'
-export { default as CommandSeparator } from './CommandSeparator.vue'
-export { default as CommandShortcut } from './CommandShortcut.vue'
+export { default as Command } from "./Command.vue"
+export { default as CommandDialog } from "./CommandDialog.vue"
+export { default as CommandEmpty } from "./CommandEmpty.vue"
+export { default as CommandGroup } from "./CommandGroup.vue"
+export { default as CommandInput } from "./CommandInput.vue"
+export { default as CommandItem } from "./CommandItem.vue"
+export { default as CommandList } from "./CommandList.vue"
+export { default as CommandSeparator } from "./CommandSeparator.vue"
+export { default as CommandShortcut } from "./CommandShortcut.vue"
--- a/components/ui/dialog/Dialog.vue
+++ b/components/ui/dialog/Dialog.vue
@@ -4,7 +4,7 @@ import {
  type DialogRootEmits,
  type DialogRootProps,
  useForwardPropsEmits
-} from 'radix-vue'
+} from "radix-vue"

 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
--- a/components/ui/dialog/DialogClose.vue
+++ b/components/ui/dialog/DialogClose.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue'
+import { DialogClose, type DialogCloseProps } from "radix-vue"

 const props = defineProps<DialogCloseProps>()
 </script>
--- a/components/ui/dialog/DialogContent.vue
+++ b/components/ui/dialog/DialogContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
  DialogClose,
  DialogContent,
@@ -8,11 +8,11 @@ import {
  DialogOverlay,
  DialogPortal,
  useForwardPropsEmits
-} from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { X } from "lucide-vue-next"
+import { cn } from "@/lib/utils"

-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DialogContentEmits>()

 const delegatedProps = computed(() => {
--- a/components/ui/dialog/DialogDescription.vue
+++ b/components/ui/dialog/DialogDescription.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()

 const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props
--- a/components/ui/dialog/DialogFooter.vue
+++ b/components/ui/dialog/DialogFooter.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 </script>

 <template>
--- a/components/ui/dialog/DialogHeader.vue
+++ b/components/ui/dialog/DialogHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/dialog/DialogScrollContent.vue
+++ b/components/ui/dialog/DialogScrollContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
  DialogClose,
  DialogContent,
@@ -8,11 +8,11 @@ import {
  DialogOverlay,
  DialogPortal,
  useForwardPropsEmits
-} from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { X } from "lucide-vue-next"
+import { cn } from "@/lib/utils"

-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DialogContentEmits>()

 const delegatedProps = computed(() => {
--- a/components/ui/dialog/DialogTitle.vue
+++ b/components/ui/dialog/DialogTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DialogTitle, type DialogTitleProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()

 const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props
--- a/components/ui/dialog/DialogTrigger.vue
+++ b/components/ui/dialog/DialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger, type DialogTriggerProps } from "radix-vue"

 const props = defineProps<DialogTriggerProps>()
 </script>
--- a/components/ui/dialog/index.ts
+++ b/components/ui/dialog/index.ts
@@ -1,9 +1,9 @@
-export { default as Dialog } from './Dialog.vue'
-export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
-export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
-export { default as DialogFooter } from './DialogFooter.vue'
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
--- a/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/components/ui/dropdown-menu/DropdownMenu.vue
@@ -4,7 +4,7 @@ import {
  type DropdownMenuRootEmits,
  type DropdownMenuRootProps,
  useForwardPropsEmits
-} from 'radix-vue'
+} from "radix-vue"

 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
--- a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
  DropdownMenuCheckboxItem,
  type DropdownMenuCheckboxItemEmits,
  type DropdownMenuCheckboxItemProps,
  DropdownMenuItemIndicator,
  useForwardPropsEmits
-} from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { Check } from "lucide-vue-next"
+import { cn } from "@/lib/utils"

-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()

 const delegatedProps = computed(() => {
--- a/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
  DropdownMenuContent,
  type DropdownMenuContentEmits,
  type DropdownMenuContentProps,
  DropdownMenuPortal,
  useForwardPropsEmits
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"

 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
  {
    sideOffset: 4
  }
--- a/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from "radix-vue"

 const props = defineProps<DropdownMenuGroupProps>()
 </script>
--- a/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<
-  DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }
+  DropdownMenuItemProps & { class?: HTMLAttributes["class"]; inset?: boolean }
 >()

 const delegatedProps = computed(() => {
--- a/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<
-  DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }
+  DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
 >()

 const delegatedProps = computed(() => {
--- a/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -4,7 +4,7 @@ import {
  type DropdownMenuRadioGroupEmits,
  type DropdownMenuRadioGroupProps,
  useForwardPropsEmits
-} from 'radix-vue'
+} from "radix-vue"

 const props = defineProps<DropdownMenuRadioGroupProps>()
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
--- a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
  DropdownMenuItemIndicator,
  DropdownMenuRadioItem,
  type DropdownMenuRadioItemEmits,
  type DropdownMenuRadioItemProps,
  useForwardPropsEmits
-} from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { Circle } from "lucide-vue-next"
+import { cn } from "@/lib/utils"

-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()

 const emits = defineEmits<DropdownMenuRadioItemEmits>()

--- a/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from "radix-vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<
  DropdownMenuSeparatorProps & {
-    class?: HTMLAttributes['class']
+    class?: HTMLAttributes["class"]
  }
 >()

--- a/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>

--- a/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -4,7 +4,7 @@ import {
  type DropdownMenuSubEmits,
  type DropdownMenuSubProps,
  useForwardPropsEmits
-} from 'radix-vue'
+} from "radix-vue"

 const props = defineProps<DropdownMenuSubProps>()
 const emits = defineEmits<DropdownMenuSubEmits>()
--- a/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
  DropdownMenuSubContent,
  type DropdownMenuSubContentEmits,
  type DropdownMenuSubContentProps,
  useForwardPropsEmits
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"

-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()

 const delegatedProps = computed(() => {
--- a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
  DropdownMenuSubTrigger,
  type DropdownMenuSubTriggerProps,
  useForwardProps
-} from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { ChevronRight } from "lucide-vue-next"
+import { cn } from "@/lib/utils"

-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }>()

 const delegatedProps = computed(() => {
  const { class: _, ...delegated } = props
--- a/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from "radix-vue"

 const props = defineProps<DropdownMenuTriggerProps>()

--- a/components/ui/dropdown-menu/index.ts
+++ b/components/ui/dropdown-menu/index.ts
@@ -1,16 +1,16 @@
-export { DropdownMenuPortal } from 'radix-vue'
+export { DropdownMenuPortal } from "radix-vue"

-export { default as DropdownMenu } from './DropdownMenu.vue'
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
-export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
-export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
-export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
-export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
-export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
-export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenu } from "./DropdownMenu.vue"
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
--- a/components/ui/input/Input.vue
+++ b/components/ui/input/Input.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"

 const props = defineProps<{
  defaultValue?: string | number
  modelValue?: string | number
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()

 const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
+  (e: "update:modelValue", payload: string | number): void
 }>()

-const modelValue = useVModel(props, 'modelValue', emits, {
+const modelValue = useVModel(props, "modelValue", emits, {
  passive: true,
  defaultValue: props.defaultValue
 })
@@ -28,5 +28,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
        props.class
      )
    "
-  />
+  >
 </template>
--- a/components/ui/input/index.ts
+++ b/components/ui/input/index.ts
@@ -1 +1 @@
-export { default as Input } from './Input.vue'
+export { default as Input } from "./Input.vue"
--- a/Show More
+++ b/Show More