Updated nvm version

Used codemods CLI and reworked most alias'd path that stopped working

.gitignore

@@ -26,3 +26,5 @@ logs
 # Supabase
 .branches
 .temp
+
+.scannerwork/

.nvmrc

@@ -1 +1 @@
-20.12.0
+24.4.0

app/app.vue

@@ -47,7 +47,7 @@ const { isSidebarOpened } = storeToRefs(useUiStore())
           <Sidebar />
 
           <div
-            class="wrapper max-h-screen transition-all"
+            class="wrapper max-h-screen transition-all overflow-y-auto"
           >
             <NuxtPage />
           </div>

app/assets/_content.css

@@ -0,0 +1,70 @@
+.content {
+  > * + * {
+    margin-top: .5em;
+
+    @variant md {
+      margin-top: .75rem;
+    }
+  }
+
+  h1 {
+    font-size: var(--text-3xl);
+    font-weight: var(--font-weight-bold);
+
+    @variant md {
+      font-size: var(--text-4xl);
+    }
+  }
+  h2 {
+    font-size: var(--text-xl);
+    font-weight: var(--font-weight-bold);
+
+    @variant md {
+      font-size: var(--text-2xl);
+    }
+  }
+  h3 {
+    font-size: var(--text-lg);
+    font-weight: var(--font-weight-bold);
+
+    @variant md {
+      font-size: var(--text-xl);
+    }
+  }
+  h4 {
+    font-size: var(--text-md);
+    font-weight: var(--font-weight-bold);
+
+    @variant md {
+      font-size: var(--text-lg);
+    }
+  }
+
+  /* Normal link */
+  p a:not([class]) {
+    color: var(--color-sky-600);
+    text-underline-offset: .25rem;
+
+    &:hover {
+      color: var(--color-sky-500);
+      text-decoration: underline;
+    }
+
+    @variant dark {
+      color: var(--color-teal-500);
+
+      &:hover {
+        color: var(--color-teal-300);
+      }
+    }
+  }
+
+  ul {
+    list-style-type: square;
+    padding-inline-start: 1.5rem;
+  }
+
+  hr {
+    margin-block: 2rem;
+  }
+}

app/assets/main.css

@@ -1,12 +1,14 @@
 @import 'tailwindcss';
 
-@config '../tailwind.config.js';
+@config '../../tailwind.config.js';
 
 @import "./theme.css" layer(theme);
 @import "./_typography.css" layer(theme);
 @import "./_colors.css" layer(theme);
 @import "./_colors.css" layer(utilities);
 
+@import "./_content.css";
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still

app/components/calendar/Calendar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useCalendar } from "~/stores/CalendarStore"
+import { useCalendar } from "@/stores/CalendarStore"
 import { computed, type Component, type ComputedRef } from "vue"
 
 // import { PhMagnifyingGlass } from '@phosphor-icons/vue'

app/components/calendar/OptionsCTA.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { breakpointsTailwind } from "@vueuse/core"
-import { cn } from "~/lib/utils"
-import { useCalendar } from "~/stores/CalendarStore"
+import { cn } from "@/lib/utils"
+import { useCalendar } from "@/stores/CalendarStore"
 import { PhCalendarBlank, PhCheckCircle, PhDotsThreeVertical, PhGear, PhTag } from "@phosphor-icons/vue"
 
 const breakpoints = useBreakpoints(

app/components/calendar/PreviewCard.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"
 import { DateTime } from "luxon"
-import type { Calendar } from "~/models/CalendarConfig"
+import type { Calendar } from "@@/models/CalendarConfig"
 
 const props = defineProps<{
   calendar: Calendar
@@ -64,8 +64,8 @@ const hasActions = computed(() => isOwner.value && props.showActions)
     <UiCardContent class="grow">
       <p class="flex items-center gap-1">
         <PhCalendarDots size="24" weight="fill" />
-        <span v-if="calendar.eventNb?.[0].count! > 1">{{ $t("entity.calendar.hasXEvents", { count: calendar.eventNb?.[0].count }) }}</span>
-        <span v-else>{{ $t("entity.calendar.hasXEvent", { count: calendar.eventNb?.[0].count }) }}</span>
+        <span v-if="calendar.eventNb?.[0]!.count! > 1">{{ $t("entity.calendar.hasXEvents", { count: calendar.eventNb?.[0]!.count }) }}</span>
+        <span v-else>{{ $t("entity.calendar.hasXEvent", { count: calendar.eventNb?.[0]!.count }) }}</span>
       </p>
 
       <div

app/components/calendar/SearchMode.ts

@@ -1,3 +1,3 @@
-export const searchUnifier = new RegExp(/[^a-zA-Z0-9\-'']/g)
+export const searchUnifier = new RegExp(/[^a-zA-Z0-9\-']/g)
 
 export type SearchMode = "characters" | "events" | undefined

app/components/calendar/category/List.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Category } from "~/models/Category";
+import type { Category } from "@@/models/Category";
 
 defineProps<{
   categories: Category[]

app/components/calendar/category/ListItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Category } from "~/models/Category";
+import type { Category } from "@@/models/Category";
 
 defineProps<{
   category: Category

app/components/calendar/category/Table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Category } from "~/models/Category";
+import type { Category } from "@@/models/Category";
 import { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb } from "radix-vue"
 
 const { categories } = defineProps<{

app/components/calendar/category/TableFooter.vue

@@ -2,7 +2,7 @@
 import { PhPlus } from "@phosphor-icons/vue"
 import { useToast } from "~/components/ui/toast"
 import { ToastLifetime } from "~/components/ui/toast/use-toast"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const { toast } = useToast()
 const { t } = useI18n()

app/components/calendar/category/TableRow.vue

@@ -2,8 +2,8 @@
 import { PhCheck, PhTrash } from "@phosphor-icons/vue"
 import { useToast } from "~/components/ui/toast"
 import { ToastLifetime } from "~/components/ui/toast/use-toast"
-import { cn } from "~/lib/utils"
-import type { Category } from "~/models/Category"
+import { cn } from "@/lib/utils"
+import type { Category } from "@@/models/Category"
 
 const { toast } = useToast()
 const { t } = useI18n()
@@ -13,7 +13,7 @@ const { category } = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: "on-delete-category", payload: Category): void
+  "on-delete-category": [payload: Category]
 }>()
 
 type RowMode = "edit" | "view"

app/components/calendar/dialog/Create.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { PhX } from "@phosphor-icons/vue";
-import type { World } from "~/models/World";
+import type { World } from "@@/models/World";
 
 defineProps<{
   world: World,

app/components/calendar/dialog/CreateEvent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { RPGDate } from "~/models/Date";
+import type { RPGDate } from "@@/models/Date";
 
 const { eventSkeleton, operationInProgress, currentRPGDate } = storeToRefs(useCalendar())
 const { resetSkeleton } = useCalendar()

app/components/calendar/dialog/Delete.vue

@@ -2,7 +2,7 @@
 import { PhCircleNotch } from "@phosphor-icons/vue";
 import { useToast } from "~/components/ui/toast";
 import { ToastLifetime } from "~/components/ui/toast/use-toast";
-import type { Calendar } from "~/models/CalendarConfig";
+import type { Calendar } from "@@/models/CalendarConfig";
 
 const { toast } = useToast()
 const { t } = useI18n()
@@ -76,14 +76,6 @@ function handleClosing() {
       </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="outline" @click="handleClosing">
             {{ $t('ui.action.back') }}

app/components/calendar/dialog/Update.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { PhX } from "@phosphor-icons/vue";
-import type { Calendar } from "~/models/CalendarConfig";
-import type { World } from "~/models/World";
+import type { Calendar } from "@@/models/CalendarConfig";
+import type { World } from "@@/models/World";
 
 const props = defineProps<{
   calendar: Calendar | null,

app/components/calendar/event/Details.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 { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 
 import {
@@ -14,7 +14,7 @@ import {
   PhDotsThreeOutlineVertical,
   PhEye
 } from "@phosphor-icons/vue"
-import type { CollisionPadding } from "~/models/Popover"
+import type { CollisionPadding } from "@@/models/Popover"
 
 const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
 const { lastActiveEvent, isReadOnly } = storeToRefs(useCalendar())

app/components/calendar/event/Event.vue

@@ -1,7 +1,7 @@
 <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

app/components/calendar/form/Create.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Calendar } from "~/models/CalendarConfig";
+import type { Calendar } from "@@/models/CalendarConfig";
 import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
 
 const props = defineProps<{
@@ -57,13 +57,11 @@ async function handleSubmit() {
 }
 
 /**
- * === Watch for name changes to display above ===
+ * 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
+  "on-changed-name": [calendarName: string]
+  "on-close": []
 }>()
 
 /** Hook to emit a debounced event for the changed skeleton name */

app/components/calendar/form/CreateEvent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { RPGDate } from "~/models/Date";
+import type { RPGDate } from "@@/models/Date";
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from "@phosphor-icons/vue"
 
 const { t } = useI18n()
@@ -119,14 +119,6 @@ function handleCancel() {
         </div>
       </div>
 
-      <!-- <div class="col-span-2">
-        <div class="flex items-center gap-4">
-          <PhTag size="18" weight="fill" />
-
-          <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" :placeholder="$t('entity.category.addSecondaries')" />
-        </div>
-      </div> -->
-
       <div class="col-span-2 mb-2">
         <div class="flex items-center gap-4">
           <PhMapPinArea size="18" weight="fill" />
@@ -155,14 +147,9 @@ function handleCancel() {
           <PhEyeClosed v-else size="18" />
 
           <div class="flex items-center gap-x-2">
-            <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
+            <UiCheckbox id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
             <UiLabel for="new-event-visibility">
-              <template v-if="!eventSkeleton.hidden">
-                {{ $t('entity.calendar.event.isPublic') }}
-              </template>
-              <template v-else>
-                {{ $t('entity.calendar.event.isHidden') }}
-              </template>
+              {{ $t('entity.calendar.event.hiddenLabel') }}
             </UiLabel>
           </div>
         </div>

app/components/calendar/form/Update.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { Calendar } from "~/models/CalendarConfig";
+import type { Calendar } from "@@/models/CalendarConfig";
 import { PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
-import type { World } from "~/models/World";
+import type { World } from "@@/models/World";
 
 const props = defineProps<{
   calendar: Calendar | null,
@@ -53,13 +53,11 @@ async function handleSubmit() {
 }
 
 /**
- * === Watch for name changes to display above ===
+ * 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
+  "on-changed-name": [calendarName: string]
+  "on-close": []
 }>()
 
 /** Hook to emit a debounced event for the changed skeleton name */
@@ -84,20 +82,6 @@ function handleFormCancel() {
               {{ $t('entity.calendar.actionDialog.tabs.general.title') }}
             </div>
           </UiTabsTrigger>
-          <!-- <UiTabsTrigger value="months" class="font-bold">
-            <div class="flex items-center gap-1">
-              <PhCalendarDots size="18" weight="fill" />
-
-              {{ $t('entity.calendar.actionDialog.tabs.months.title') }}
-            </div>
-          </UiTabsTrigger>
-          <UiTabsTrigger value="today" class="font-bold">
-            <div class="flex items-center gap-1">
-              <PhAlarm size="18" weight="fill" />
-
-              {{ $t('entity.calendar.actionDialog.tabs.today.title') }}
-            </div>
-          </UiTabsTrigger> -->
         </UiTabsList>
         <UiTabsContent value="global" class="grid gap-4">
           <input
@@ -127,12 +111,6 @@ function handleFormCancel() {
             <InputColor id="new-calendar-color" v-model="calendarSkeleton.color" />
           </div>
         </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">

app/components/calendar/form/UpdateEvent.vue

@@ -2,7 +2,7 @@
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue"
 import { useToast } from "~/components/ui/toast";
 import { ToastLifetime } from "~/components/ui/toast/use-toast";
-import type { APIError } from "~/models/Errors";
+import type { APIError } from "@@/models/Errors";
 
 const emit = defineEmits(["event-updated"])
 
@@ -139,16 +139,6 @@ function handleCancel() {
         </div>
       </div>
 
-      <!-- <div class="col-span-2">
-        <div class="flex items-center gap-4">
-          <PhTag size="18" weight="fill" />
-
-          <div class="w-1/2">
-            <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" placeholder="Ajouter des catégories secondaires" />
-          </div>
-        </div>
-      </div> -->
-
       <div class="col-span-2 mb-2">
         <div class="flex items-center gap-4">
           <PhMapPinArea size="18" weight="fill" />
@@ -178,14 +168,9 @@ function handleCancel() {
           <PhEyeClosed v-else size="18" />
 
           <div class="flex items-center gap-x-2">
-            <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
+            <UiCheckbox id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
             <UiLabel for="new-event-visibility">
-              <template v-if="!eventSkeleton.hidden">
-                {{ $t('entity.calendar.event.isPublic') }}
-              </template>
-              <template v-else>
-                {{ $t('entity.calendar.event.isHidden') }}
-              </template>
+              {{ $t('entity.calendar.event.hiddenLabel') }}
             </UiLabel>
           </div>
         </div>

app/components/calendar/input/EventCategories.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Category } from "~/models/Category";
+import type { Category } from "@@/models/Category";
 
 import { PhCaretDown, PhCheck } from "@phosphor-icons/vue";
 
@@ -35,6 +35,8 @@ const filteredCategories = computed(() =>
       <UiButton
         variant="outline"
         role="combobox"
+        :aria-expanded="isPopoverOpen"
+        aria-controls="event-categories"
         class="relative w-full max-w-full h-fit justify-between"
       >
         <template v-if="!model.length">
@@ -54,12 +56,13 @@ const filteredCategories = computed(() =>
       </UiButton>
     </UiPopoverTrigger>
     <UiPopoverContent
+      id="event-categories"
       align="start"
       side="bottom"
       :collision-padding="50"
       class="w-fit h-[33vh] p-0"
     >
-      <UiCommand v-model="modelBuffer" v-model:searchTerm="searchTerm" :multiple="true">
+      <UiCommand v-model="modelBuffer" v-model:search-term="searchTerm" :multiple="true">
         <UiCommandInput :placeholder="$t('entity.category.search')" />
         <UiCommandEmpty>{{ $t('entity.category.notFoundAny') }}</UiCommandEmpty>
         <UiCommandList>

app/components/calendar/input/EventCategory.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { PhCaretDown } from "@phosphor-icons/vue";
-import { cn } from "~/lib/utils";
-import type { Category } from "~/models/Category";
+import { cn } from "@/lib/utils";
+import type { Category } from "@@/models/Category";
 
 const isPopoverOpen = ref<boolean>(false)
 
@@ -34,6 +34,8 @@ const filteredCategories = computed(() =>
       <UiButton
         variant="outline"
         role="combobox"
+        :aria-expanded="isPopoverOpen"
+        aria-controls="event-category"
         class="w-full max-w-full justify-between"
       >
         <template v-if="!model">
@@ -52,6 +54,7 @@ const filteredCategories = computed(() =>
       </UiButton>
     </UiPopoverTrigger>
     <UiPopoverContent
+      id="event-category"
       align="start"
       side="bottom"
       :collision-padding="50"

app/components/calendar/input/MonthList.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { cn } from "~/lib/utils";
+import { cn } from "@/lib/utils";
 
 import { useSortable } from "@vueuse/integrations/useSortable";
-import type { CalendarMonth } from "~/models/CalendarMonth";
+import type { CalendarMonth } from "@@/models/CalendarMonth";
 
 import { PhList, PhPlus, PhTrash } from "@phosphor-icons/vue";
 

app/components/calendar/input/RPGDate.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { RPGDate } from "~/models/Date";
+import type { RPGDate } from "@@/models/Date";
 
 import {
   PhXCircle
@@ -135,15 +135,6 @@ function handleValueReset() {
 
         <UiInput v-model="model.year" type="number" />
 
-        <!-- <nav class="flex items-center justify-end gap-2">
-          <UiButton variant="outline" size="icon" class="w-8 h-8" @click="decrementModelMonth()">
-            <PhCaretLeft size="14" />
-          </UiButton>
-          <UiButton variant="outline" size="icon" class="w-8 h-8" @click="incrementModelMonth()">
-            <PhCaretRight size="14" />
-          </UiButton>
-        </nav> -->
-
         <hr class="col-span-2" >
 
         <div class="col-span-2">

app/components/calendar/input/TodaySelect.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { CalendarMonth } from "~/models/CalendarMonth";
-import type { RPGDate } from "~/models/Date";
+import type { CalendarMonth } from "@@/models/CalendarMonth";
+import type { RPGDate } from "@@/models/Date";
 
 import { PhCalendarBlank } from "@phosphor-icons/vue";
 

app/components/calendar/menu/Menu.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useCalendar } from "~/stores/CalendarStore"
+import { useCalendar } from "@/stores/CalendarStore"
 import { breakpointsTailwind } from "@vueuse/core"
 
 const breakpoints = useBreakpoints(

app/components/calendar/search/CalendarSearch.vue

@@ -2,12 +2,12 @@
 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"
+} from "@@/models/CalendarEvent"
 import { capitalize } from "~/utils/Strings"
 import { useMagicKeys, useScroll, useStorage, whenever } from "@vueuse/core"
 import { computed, ref, watch } from "vue"
@@ -24,8 +24,8 @@ import {
 } from "radix-vue"
 
 import SearchList from "./lists/SearchList.vue"
-import type { Category } from "~/models/Category"
-import { cn } from "~/lib/utils"
+import type { Category } from "@@/models/Category"
+import { cn } from "@/lib/utils"
 
 const { isAdvancedSearchOpen, allEvents, categories } = storeToRefs(useCalendar())
 const { characters } = storeToRefs(useCharacters())
@@ -88,7 +88,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
   results = dataToFilter.filter((item) => {
     // Filter calendar events
     if (isCalendarEvent(item)) {
-      const queryString = new String(searchQuery.value)
+      const queryString = (searchQuery.value as string)
         .replace(searchUnifier, "")
         .toLocaleLowerCase()
 
@@ -126,7 +126,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
 
     // Filter characters
     if (isCharacter(item)) {
-      const queryString = new String(searchQuery.value)
+      const queryString = (searchQuery.value as string)
         .replace(searchUnifier, "")
         .toLocaleLowerCase()
 
@@ -279,7 +279,6 @@ function handleCategoryUnselect(e: Category) {
         </UiDialogDescription>
       </VisuallyHidden>
 
-      <!-- UiDialog header -->
       <div id="searchForm" class="grid gap-3">
         <div class="relative w-full h-fit">
           <UiInput
@@ -307,10 +306,6 @@ function handleCategoryUnselect(e: Category) {
               <UiToggleGroupItem value="events" aria-label="Uniquement les évènements">
                 {{ $t('entity.calendar.event.namePlural') }}
               </UiToggleGroupItem>
-              <!-- Not used for now -->
-              <!-- <UiToggleGroupItem value="characters" aria-label="Uniquement les personnages">
-                {{ $t('entity.character.namePlural') }}
-              </UiToggleGroupItem> -->
             </UiToggleGroup>
           </div>
 

app/components/calendar/search/lists/CharacterCallout.vue

@@ -1,7 +1,7 @@
 <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"
@@ -12,7 +12,7 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  (e: "query:date-jump", payload: RPGDate): void
+  "query:date-jump": [payload: RPGDate]
 }>()
 
 const { getFormattedDateTitle } = useCalendar()

app/components/calendar/search/lists/EventCallout.vue

@@ -1,7 +1,7 @@
 <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"
 
 import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from "@phosphor-icons/vue"
 
@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  (e: "query:date-jump", payload: RPGDate): void
+  "query:date-jump": [payload: RPGDate]
 }>()
 
 const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()

app/components/calendar/search/lists/SearchList.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { isCharacter, type Character } from "~/models/Characters"
-import type { RPGDate, RPGDateOrder } from "~/models/Date"
-import { useCalendar } from "~/stores/CalendarStore"
+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 { isCalendarEvent, type CalendarEvent } from "@@/models/CalendarEvent"
 import type { SearchMode } from "../../SearchMode"
 
 import CharacterCallout from "./CharacterCallout.vue"

app/components/calendar/state/monthly/DayTile.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { RPGDate } from "~/models/Date"
-import type { CalendarEvent } from "~/models/CalendarEvent"
+import type { RPGDate } from "@@/models/Date"
+import type { CalendarEvent } from "@@/models/CalendarEvent"
 import { breakpointsTailwind, useElementBounding } from "@vueuse/core"
 import { storeToRefs } from "pinia"
 import { computed, ref, type ComputedRef } from "vue"
@@ -13,7 +13,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: "on-open-create-dialog", date: RPGDate): void
+  "on-open-create-dialog": [date: RPGDate]
 }>()
 
 const calendarTile = ref()

app/components/calendar/state/monthly/Layout.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useCalendar } from "~/stores/CalendarStore"
+import { useCalendar } from "@/stores/CalendarStore"
 import { useThrottleFn } from "@vueuse/core"
-import type { RPGDate } from "~/models/Date"
+import type { RPGDate } from "@@/models/Date"
 import { VisuallyHidden } from "radix-vue"
 
 const { currentDate, decrementViewMonth, incrementViewMonth, resetSkeleton } = useCalendar()

app/components/calendar/state/yearly/DayTile.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { RPGDate } from "~/models/Date"
+import type { RPGDate } from "@@/models/Date"
 import { storeToRefs } from "pinia"
 import { computed, type ComputedRef } from "vue"
 

app/components/calendar/state/yearly/Layout.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useCalendar } from "~/stores/CalendarStore"
+import { useCalendar } from "@/stores/CalendarStore"
 import { useThrottleFn } from "@vueuse/core"
 
 const { decrementViewYear, incrementViewYear } = useCalendar()
@@ -24,7 +24,7 @@ const moveCalendarRight = useThrottleFn(() => {
 </script>
 
 <template>
-  <div class="container mt-[10vh] mb-auto" @wheel="handleWheel">
+  <div class="container mx-auto mt-[10vh] mb-auto" @wheel="handleWheel">
     <div class="grid grid-cols-5 gap-x-8 gap-y-16">
       <CalendarStateYearlyMonthTile
         v-for="month in months"

app/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

app/components/global/Spacing.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { cn } from "~/lib/utils";
+import { cn } from "@/lib/utils";
 
 interface SpacingProps {
   size?: "xs" | "sm" | "md" | "lg" | "xlg" | "2xl" | "3xl"

app/components/global/input/Color.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { cn } from "~/lib/utils";
-import { type RPGColor, rpgColors } from "~/models/Color";
+import { cn } from "@/lib/utils";
+import { type RPGColor, rpgColors } from "@@/models/Color";
 
 const { id, theme = "normal", position = "popper" } = defineProps<{
   id: string

app/components/global/input/ContentState.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { contentStates, type ContentState } from "~/models/Entity";
+import { contentStates, type ContentState } from "@@/models/Entity";
 
 defineProps<{
   id: string

app/components/global/sidebar/Sidebar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { PhCompass, PhGlobeHemisphereEast, PhHurricane, PhX } from "@phosphor-icons/vue"
+import { PhCompass, PhGlobeHemisphereEast, PhHurricane, PhInfo, PhX } from "@phosphor-icons/vue"
 import type { SidebarMenuActionType, SidebarMenuIcon } from "./SidebarProps";
-import { cn } from "~/lib/utils";
+import { cn } from "@/lib/utils";
 import { breakpointsTailwind } from "@vueuse/core"
 
 const { revealAdvancedSearch } = useCalendar()
@@ -40,12 +40,12 @@ const breakpoints = useBreakpoints(
   <nav
     ref="sidebarRef"
     :class="cn(
-      ['md:relative md:isolate w-16 py-6 grid gap-4 grid-rows-[1fr_auto] justify-center transition-all'], // Base appearance
+      ['md:relative md:isolate w-16 py-6 grid gap-4 grid-rows-[1fr_auto] justify-center md:transition-none'], // Base appearance
       ['after:opacity-50 after:contrast-125 dark:after:opacity-75 dark:after:contrast-175 after:-hue-rotate-60'], // After styling
       ['border-r-[1px] bg-indigo-700 dark:bg-black text-white border-r-indigo-700 dark:border-r-indigo-950 shadow-navbar-light dark:shadow-navbar-dark'], // Colours
-      ['max-md:justify-stretch max-md:px-4 max-md:py-4 max-md:absolute max-md:left-0 max-md:inset-0 max-md:z-50 max-md:w-30 max-md:max-w-full'], // Responsive behaviours
+      ['max-md:justify-stretch max-md:px-4 max-md:py-4 max-md:absolute max-md:left-0 max-md:inset-0 max-md:z-50 max-md:w-40 max-md:max-w-full max-md:transition-all'], // Responsive behaviours
       {
-        'max-md:-translate-x-30': !isSidebarOpened,
+        'max-md:-translate-x-40': !isSidebarOpened,
         'max-md:-translate-x-0 shadow-navbar-dark dark:bg-slate-950': isSidebarOpened
       }
     )"
@@ -96,6 +96,40 @@ const breakpoints = useBreakpoints(
         </UiTooltipProvider>
       </li>
 
+      <li class="max-md:self-start">
+        <UiTooltipProvider :delay-duration="50" :disabled="!breakpoints.md.value">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton
+                variant="ghost"
+                size="icon"
+                class="rounded-full max-md:hidden"
+                as-child
+              >
+                <RouterLink to="/about">
+                  <PhInfo size="24" weight="fill" />
+                </RouterLink>
+              </UiButton>
+              <RouterLink
+                to="/about"
+                class="md:hidden flex items-center gap-[.6ch] underline-offset-4 hover:underline"
+              >
+                <PhInfo size="22" weight="fill" />
+
+                <span class="text-[.9em]">
+                  {{ $t('pages.about.menuLabel') }}
+                </span>
+              </RouterLink>
+            </UiTooltipTrigger>
+            <UiTooltipContent :side="'right'" :side-offset="6">
+              <p>
+                {{ $t('pages.about.menuLabel') }}
+              </p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </li>
+
       <ClientOnly>
         <li v-for="(item, i) in currentMenu" :key="i">
           <UiTooltipProvider :delay-duration="50">

app/components/global/user/CTA.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue"
 
 import { PhCheckCircle, PhUser, PhLaptop, PhMoon, PhPalette, PhSignIn, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
-import { cn } from "~/lib/utils";
+import { cn } from "@/lib/utils";
 
 const router = useRouter()
 
@@ -184,12 +184,6 @@ function pushRoute(to: AvailableRoutes) {
         <UiDropdownMenuSeparator />
 
         <template v-if="user">
-          <!-- <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my/settings')">
-            <PhGear size="20" weight="fill" />
-            <span>
-              {{ $t('ui.sidebarMenu.account') }}
-            </span>
-          </UiDropdownMenuItem> -->
           <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleLogout">
             <PhSignOut size="20" weight="fill" />
             <span>

app/components/ui/alert-dialog/AlertDialogAction.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { AlertDialogAction, type AlertDialogActionProps } from "radix-vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 import { buttonVariants } from "~/components/ui/button/index"
 
 const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()

app/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 import { buttonVariants } from "~/components/ui/button/index"
 
 const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()

app/components/ui/alert-dialog/AlertDialogContent.vue

@@ -8,7 +8,7 @@ import {
   AlertDialogPortal,
   useForwardPropsEmits,
 } from "radix-vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<AlertDialogContentEmits>()

app/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -4,7 +4,7 @@ import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from "radix-vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
 

app/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { AlertDialogTitle, type AlertDialogTitleProps } from "radix-vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
 

app/components/ui/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "@/components/ui/alert-dialog/AlertDialog.vue"
+export { default as AlertDialogTrigger } from "@/components/ui/alert-dialog/AlertDialogTrigger.vue"
+export { default as AlertDialogContent } from "@/components/ui/alert-dialog/AlertDialogContent.vue"
+export { default as AlertDialogHeader } from "@/components/ui/alert-dialog/AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "@/components/ui/alert-dialog/AlertDialogTitle.vue"
+export { default as AlertDialogDescription } from "@/components/ui/alert-dialog/AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "@/components/ui/alert-dialog/AlertDialogFooter.vue"
+export { default as AlertDialogAction } from "@/components/ui/alert-dialog/AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "@/components/ui/alert-dialog/AlertDialogCancel.vue"

app/components/ui/avatar/Avatar.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from "vue"
 import { AvatarRoot } from "radix-vue"
 import { type AvatarVariants, avatarVariant } from "."
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/avatar/index.ts

@@ -1,8 +1,8 @@
 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 "@/components/ui/avatar/Avatar.vue"
+export { default as AvatarImage } from "@/components/ui/avatar/AvatarImage.vue"
+export { default as AvatarFallback } from "@/components/ui/avatar/AvatarFallback.vue"
 
 export const avatarVariant = cva(
   "inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden",

app/components/ui/badge/Badge.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
 import { type BadgeVariants, badgeVariants } from "."
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   variant?: BadgeVariants["variant"]

app/components/ui/badge/index.ts

@@ -1,6 +1,6 @@
 import { type VariantProps, cva } from "class-variance-authority"
 
-export { default as Badge } from "./Badge.vue"
+export { default as Badge } from "@/components/ui/badge/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-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",

app/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 import { PhArrowsHorizontal } from "@phosphor-icons/vue";
 
 const props = defineProps<{

app/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PrimitiveProps } from "radix-vue"
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 import { Primitive } from "radix-vue"
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {

app/components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 import { PhCaretRight } from "@phosphor-icons/vue";
 
 const props = defineProps<{

app/components/ui/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "@/components/ui/breadcrumb/Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "@/components/ui/breadcrumb/BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "@/components/ui/breadcrumb/BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "@/components/ui/breadcrumb/BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "@/components/ui/breadcrumb/BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "@/components/ui/breadcrumb/BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "@/components/ui/breadcrumb/BreadcrumbSeparator.vue"

app/components/ui/button/Button.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from "vue"
 import { Primitive, type PrimitiveProps } from "radix-vue"
 import { type ButtonVariants, buttonVariants } from "."
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants["variant"]

app/components/ui/button/index.ts

@@ -1,6 +1,6 @@
 import { type VariantProps, cva } from "class-variance-authority"
 
-export { default as Button } from "./Button.vue"
+export { default as Button } from "@/components/ui/button/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-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30",

app/components/ui/card/Card.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/card/CardContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/card/CardDescription.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/card/CardFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/card/CardHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

app/components/ui/card/CardTitle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "~/lib/utils"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]