From 2cdf793e67ef15afee29cc1bfbf109dbd9bca08c Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 12 Mar 2025 21:05:20 +0100
Subject: [PATCH 1/8] Removed unused setting link

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

diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index 14d8adb..5075222 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from "vue"
 
-import { PhCheckCircle, PhGear, PhUser, PhLaptop, PhMoon, PhPalette, PhSignIn, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
+import { PhCheckCircle, PhUser, PhLaptop, PhMoon, PhPalette, PhSignIn, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
 import { cn } from "~/lib/utils";
 
 const router = useRouter()
@@ -186,12 +186,12 @@ function pushRoute(to: AvailableRoutes) {
         <UiDropdownMenuSeparator />
 
         <template v-if="user">
-          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my/settings')">
+          <!-- <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> -->
           <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleLogout">
             <PhSignOut size="20" weight="fill" />
             <span>

From fdb77a20f384505956ea77e3d2449b2c5373ceb0 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Thu, 13 Mar 2025 12:25:34 +0100
Subject: [PATCH 2/8] Added catch layout for error pages

---
 components/global/Heading.vue |  11 ++--
 error.vue                     | 104 ++++++++++++++++++++++++++++++++++
 i18n.config.ts                |  36 ++++++++++++
 3 files changed, 147 insertions(+), 4 deletions(-)
 create mode 100644 error.vue

diff --git a/components/global/Heading.vue b/components/global/Heading.vue
index 8e51843..bbb6f0f 100644
--- a/components/global/Heading.vue
+++ b/components/global/Heading.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-type HeadingLevel = "h1" | "h2" | "h3"
+type HeadingLevel = "h0" | "h1" | "h2" | "h3"
 
 interface HeadingProps {
   level?: HeadingLevel
@@ -11,13 +11,16 @@ withDefaults(defineProps<HeadingProps>(), {
 </script>
 
 <template>
-  <h1 v-if="level === 'h1'" class="text-4xl font-bold flex">
+  <h1 v-if="level === 'h0'" class="text-4xl md:text-6xl font-bold flex">
     <slot />
   </h1>
-  <h2 v-else-if="level === 'h2'" class="text-2xl font-bold flex">
+  <h1 v-else-if="level === 'h1'" class="text-2xl md:text-4xl font-bold flex">
+    <slot />
+  </h1>
+  <h2 v-else-if="level === 'h2'" class="text-xl md:text-2xl font-bold flex">
     <slot />
   </h2>
-  <h3 v-if="level === 'h3'" class="text-xl font-bold flex">
+  <h3 v-if="level === 'h3'" class="text-lg md:text-xl font-bold flex">
     <slot />
   </h3>
 </template>
diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..b8100dc
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+import { PhArrowBendDoubleUpLeft, PhBugBeetle, PhImageBroken, PhLinkBreak } from "@phosphor-icons/vue";
+
+useHead({
+  titleTemplate: (titleChunk) => {
+    return titleChunk ? `${titleChunk} — TTTools` : "TTTools";
+  },
+  meta: [
+    { name: "charset", content: "UTF-8" },
+    { name: "viewport", content: "width=device-width, initial-scale=1.0" },
+    { name: "author", content: "Alexis Pelé" },
+    { name: "generator", content: "Nuxt" },
+    { name: "msapplication-TileColor", content: "00aba9" },
+    { name: "theme-color", content: "00aba9" },
+    { name: "og:type", content: "tabletop-tools" },
+    { name: "og:url", content: "ttt.alexcreates.fr" },
+    { 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" },
+  ]
+})
+
+const props = defineProps({
+  // eslint-disable-next-line vue/require-default-prop
+  error: Object as () => NuxtError
+})
+
+const { statusCode } = props.error!
+
+let titleKey: string
+let descriptionKey: string
+let subDescriptionKey: string
+
+switch (statusCode) {
+  case 404:
+    titleKey = "error.notFound.title"
+    descriptionKey = "error.notFound.descriptionMain"
+    subDescriptionKey = "error.notFound.descriptionSub"
+    break;
+
+  case 500:
+    titleKey = "error.unknownServer.title"
+    descriptionKey = "error.unknownServer.descriptionMain"
+    subDescriptionKey = "error.unknownServer.descriptionSub"
+    break;
+
+  default:
+    titleKey = "error.default.title"
+    descriptionKey = "error.default.descriptionMain"
+    subDescriptionKey = "error.default.descriptionSub"
+    break;
+}
+</script>
+
+<template>
+  <div class="h-screen">
+    <div class="h-full grid grid-cols-[auto_1fr] dark:bg-black transition-colors">
+      <Sidebar />
+
+      <div class="wrapper shadow-body-light dark:shadow-body-dark transition-all">
+        <div class="h-full w-full grid place-items-center">
+          <Head>
+            <Title>{{ $t(titleKey) }}</Title>
+          </Head>
+
+          <div class="grid justify-items-center opacity-80">
+            <PhImageBroken v-if="statusCode === 404" size="100" class="opacity-60" />
+            <PhLinkBreak v-else-if="statusCode === 500" size="100" class="opacity-60" />
+            <PhBugBeetle v-else size="100" class="opacity-60" />
+
+            <Heading level="h0">
+              {{ $t(titleKey) }}
+            </Heading>
+
+            <div class="mt-6 md:text-lg text-center">
+              <p>{{ $t(descriptionKey) }}</p>
+              <p>{{ $t(subDescriptionKey) }}</p>
+            </div>
+
+            <UiButton variant="default" class="mt-6 gap-2" as-child>
+              <RouterLink to="/">
+                <PhArrowBendDoubleUpLeft size="24" />
+
+                {{ $t('ui.backToHome') }}
+              </RouterLink>
+            </UiButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper > * {
+  height: 100%;
+}
+</style>
diff --git a/i18n.config.ts b/i18n.config.ts
index 8ee5b1e..6aa8d35 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -8,6 +8,23 @@ export default defineI18nConfig(() => ({
         title: "Fantasy calendars for TTRPGs",
         description: "Tools for players and game masters to help them visualize fantasy worlds better.",
       },
+      error: {
+        default: {
+          title: "An error occured",
+          description: "An error occured while loading the page.",
+          descriptionSub: "Please try again later or contact the administrator !"
+        },
+        notFound: {
+          title: "Page not found",
+          description: "The page you're looking for doesn't exist.",
+          descriptionSub: "Maybe it has been deleted or moved ?"
+        },
+        unknownServer: {
+          title: "Internal server error",
+          description: "An error occured while loading the page.",
+          descriptionSub: "Please try again later or contact the administrator !"
+        },
+      },
       ui: {
         action: {
           back: "Back",
@@ -49,6 +66,7 @@ export default defineI18nConfig(() => ({
         greeting: "Connected as {user}",
         anonymousGreeting: "Preferences",
         backToProfile: "Back to profile",
+        backToHome: "Back to home",
         sidebarMenu: {
           profile: "Profile",
           appearance: "Appearance",
@@ -273,6 +291,23 @@ export default defineI18nConfig(() => ({
         title: "Calendriers fantasies pour JDR",
         description: "Outils destinés aux joueurs et maîtres de jeux pour visualiser plus facilement leurs univers.",
       },
+      error: {
+        default: {
+          title: "Une erreur est survenue",
+          descriptionMain: "Une erreur est survenue lors du chargement de la page.",
+          descriptionSub: "Merci de rééssayer plus tard ou de contacter l'administrateur !"
+        },
+        notFound: {
+          title: "Page introuvable",
+          descriptionMain: "La page que vous cherchez n'existe pas.",
+          descriptionSub: "Peut-être a t-elle été supprimée ou déplacée ?"
+        },
+        unknownServer: {
+          title: "Une erreur du serveur est survenue",
+          descriptionMain: "Une erreur est survenue lors du chargement de la page.",
+          descriptionSub: "Merci de rééssayer plus tard ou de contacter l'administrateur !"
+        },
+      },
       ui: {
         action: {
           back: "Retour",
@@ -314,6 +349,7 @@ export default defineI18nConfig(() => ({
         greeting: "Connecté en tant que {user}",
         anonymousGreeting: "Préférences",
         backToProfile: "Retour au profil",
+        backToHome: "Retourner à l'accueil",
         sidebarMenu: {
           profile: "Profil",
           appearance: "Apparence",

From f0e3fc2167114c22036c2947f0f3ad3e0637d826 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Thu, 13 Mar 2025 18:25:04 +0100
Subject: [PATCH 3/8] Changed the way the sidebar works

---
 components/global/sidebar/Sidebar.vue     | 71 +++++++++++++++--------
 components/global/sidebar/SidebarProps.ts |  8 ++-
 error.vue                                 |  4 +-
 i18n.config.ts                            | 12 ++++
 middleware/resetMenu.ts                   |  4 ++
 pages/index.vue                           |  4 ++
 pages/my/calendars/[id].vue               | 18 ++++++
 pages/my/index.vue                        |  9 +--
 pages/my/worlds/[id].vue                  | 14 +++++
 stores/UiStore.ts                         |  7 ++-
 10 files changed, 117 insertions(+), 34 deletions(-)
 create mode 100644 middleware/resetMenu.ts

diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index e0c8ec9..c4fbc44 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -1,17 +1,26 @@
 <script lang="ts" setup>
-import { PhCompass, PhList } from "@phosphor-icons/vue"
-import type { SidebarMenuActionType } from "./SidebarProps";
+import { PhCompass, PhGlobeHemisphereEast, PhHurricane, PhList } from "@phosphor-icons/vue"
+import type { SidebarMenuActionType, SidebarMenuIcon } from "./SidebarProps";
 
 const { revealAdvancedSearch } = useCalendar()
 const { currentMenu } = storeToRefs(useUiStore())
 
-// const user = useSupabaseUser()
-
 function handleMenuItemAction(actionType: SidebarMenuActionType) {
   if (actionType === "event-search") {
     revealAdvancedSearch()
   }
 }
+
+function computeMenuItemIcon(iconString: SidebarMenuIcon) {
+  switch (iconString) {
+    case "universe":
+      return PhHurricane
+    case "world":
+      return PhGlobeHemisphereEast
+    default:
+      return PhCompass
+  }
+}
 </script>
 
 <template>
@@ -27,7 +36,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>
-              <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
+              <UiButton variant="ghost" size="icon" class="rounded-full text-indigo-400" as-child>
                 <RouterLink to="/explore">
                   <PhCompass size="24" weight="fill" />
                 </RouterLink>
@@ -42,25 +51,39 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         </UiTooltipProvider>
       </li>
 
-      <li v-for="(item, i) in currentMenu" :key="i">
-        <UiTooltipProvider :delay-duration="50">
-          <UiTooltip>
-            <UiTooltipTrigger as-child>
-              <UiButton v-if="item.to" variant="ghost" size="icon" class="rounded-full" as-child>
-                <RouterLink :to="item.to">
-                  <component :is="item.phIcon" size="24" weight="fill" />
-                </RouterLink>
-              </UiButton>
-              <UiButton v-if="item.action" variant="ghost" size="icon" class="rounded-full" @click="handleMenuItemAction(item.action!)">
-                <component :is="item.phIcon" size="24" weight="fill" />
-              </UiButton>
-            </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'" :side-offset="6">
-              <p>{{ item.tooltip }}</p>
-            </UiTooltipContent>
-          </UiTooltip>
-        </UiTooltipProvider>
-      </li>
+      <ClientOnly>
+        <li v-for="(item, i) in currentMenu" :key="i">
+          <UiTooltipProvider :delay-duration="50">
+            <UiTooltip>
+              <UiTooltipTrigger as-child>
+                <UiButton
+                  v-if="item.to"
+                  variant="ghost"
+                  size="icon"
+                  class="rounded-full"
+                  as-child
+                >
+                  <RouterLink :to="item.to">
+                    <component :is="computeMenuItemIcon(item.phIcon)" size="24" :weight="item.phIconWeight || 'fill'" />
+                  </RouterLink>
+                </UiButton>
+                <UiButton
+                  v-if="item.action"
+                  variant="ghost"
+                  size="icon"
+                  class="rounded-full"
+                  @click="handleMenuItemAction(item.action!)"
+                >
+                  <component :is="computeMenuItemIcon(item.phIcon)" size="24" :weight="item.phIconWeight || 'fill'" />
+                </UiButton>
+              </UiTooltipTrigger>
+              <UiTooltipContent :side="'right'" :side-offset="6">
+                <p>{{ item.tooltip }}</p>
+              </UiTooltipContent>
+            </UiTooltip>
+          </UiTooltipProvider>
+        </li>
+      </ClientOnly>
     </menu>
 
     <UserCTA />
diff --git a/components/global/sidebar/SidebarProps.ts b/components/global/sidebar/SidebarProps.ts
index ef80e7e..1e104c9 100644
--- a/components/global/sidebar/SidebarProps.ts
+++ b/components/global/sidebar/SidebarProps.ts
@@ -1,9 +1,11 @@
-import type { ShallowRef } from "vue"
-
 export type SidebarMenuActionType = "event-search"
 
+export type SidebarMenuIcon = "universe" | "world"
+
 export interface SidebarMenuItem {
-  phIcon: ShallowRef // use shallowRef to build phIcon
+  phIcon: SidebarMenuIcon,
+  phIconWeight?: "regular" | "light" | "fill" | "duotone" | "bold" | "thin"
+  highlight?: boolean
   tooltip: string
   action?: SidebarMenuActionType
   to?: string
diff --git a/error.vue b/error.vue
index b8100dc..f12bd30 100644
--- a/error.vue
+++ b/error.vue
@@ -69,7 +69,7 @@ switch (statusCode) {
             <Title>{{ $t(titleKey) }}</Title>
           </Head>
 
-          <div class="grid justify-items-center opacity-80">
+          <div class="grid text-center justify-items-center opacity-80">
             <PhImageBroken v-if="statusCode === 404" size="100" class="opacity-60" />
             <PhLinkBreak v-else-if="statusCode === 500" size="100" class="opacity-60" />
             <PhBugBeetle v-else size="100" class="opacity-60" />
@@ -78,7 +78,7 @@ switch (statusCode) {
               {{ $t(titleKey) }}
             </Heading>
 
-            <div class="mt-6 md:text-lg text-center">
+            <div class="mt-6 md:text-lg">
               <p>{{ $t(descriptionKey) }}</p>
               <p>{{ $t(subDescriptionKey) }}</p>
             </div>
diff --git a/i18n.config.ts b/i18n.config.ts
index 6aa8d35..4c6cab2 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -108,6 +108,8 @@ export default defineI18nConfig(() => ({
         world: {
           nameSingular: "World",
           namePlural: "Worlds",
+          backToMy: "Back to my universe",
+          backToSingle: "Back to {world}",
           addSingle: "Add a world",
           addSingleFirst: "Add your first world !",
           editSingle: "Edit world",
@@ -283,6 +285,10 @@ export default defineI18nConfig(() => ({
         explore: {
           menuLabel: "Explore",
           title: "Explore worlds",
+        },
+        profile: {
+          title: "{user} — My universe",
+          metaTitle: "My universe",
         }
       }
     },
@@ -391,6 +397,8 @@ export default defineI18nConfig(() => ({
         world: {
           nameSingular: "Monde",
           namePlural: "Mondes",
+          backToMy: "Retourner à mon univers",
+          backToSingle: "Retourner sur {world}",
           addSingle: "Ajouter un monde",
           addSingleFirst: "Ajouter votre premier monde !",
           editSingle: "Modifier le monde",
@@ -570,6 +578,10 @@ export default defineI18nConfig(() => ({
         explore: {
           menuLabel: "Explorer",
           title: "Explorer les mondes",
+        },
+        profile: {
+          title: "{user} — Mon univers",
+          metaTitle: "Mon univers",
         }
       }
     }
diff --git a/middleware/resetMenu.ts b/middleware/resetMenu.ts
new file mode 100644
index 0000000..6046f8b
--- /dev/null
+++ b/middleware/resetMenu.ts
@@ -0,0 +1,4 @@
+export default defineNuxtRouteMiddleware(() => {
+  const { resetMenu } = useUiStore()
+  resetMenu()
+})
diff --git a/pages/index.vue b/pages/index.vue
index 8e579e3..a1e58b2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,6 +2,10 @@
 useHead({
   titleTemplate: null
 })
+
+definePageMeta({
+  middleware: ["reset-menu"]
+})
 </script>
 
 <template>
diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
index 99facd0..9d76305 100644
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -40,6 +40,24 @@ const {
 )
 
 const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
+
+// Set custom menu
+const { t } = useI18n()
+const { setCurrentMenu } = useUiStore()
+
+setCurrentMenu([
+  {
+    tooltip: t("entity.world.backToMy"),
+    to: "/my",
+    phIcon: "universe",
+    phIconWeight: "regular"
+  },
+  {
+    tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
+    to: `/my/worlds/${calendar.value?.data.world?.id}`,
+    phIcon: "world"
+  },
+])
 </script>
 
 <template>
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 0ea9b66..cac05f0 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -6,7 +6,7 @@ const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 
 definePageMeta({
-  middleware: ["auth-guard"]
+  middleware: ["auth-guard", "reset-menu"]
 })
 
 const { data: worlds } = await useLazyFetch<{ data: World[] }>("/api/worlds/query", { query: { gmId:  user?.value!.id } })
@@ -31,7 +31,6 @@ function hideCreateDialog() {
 /** Active world channel */
 let worldChannel: RealtimeChannel
 
-
 /** Handles world insertion realtime events */
 function handleInsertedWorld(newWorld: WorldChannelPayload) {
   if (!worlds.value?.data) return
@@ -121,10 +120,12 @@ function hideEditModal() {
 <template>
   <main class="p-8">
     <Head>
-      <Title>{{ $t("entity.world.namePlural") }}</Title>
+      <Title>{{ $t("pages.profile.metaTitle") }}</Title>
     </Head>
 
-    <Heading level="h1">{{ user?.user_metadata.full_name }}</Heading>
+    <Heading level="h1">
+      {{ $t("pages.profile.title", { user: user?.user_metadata.full_name }) }}
+    </Heading>
 
     <section class="mt-4">
       <Spacing size="lg">
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 0ba9ada..920f127 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -4,6 +4,8 @@ import type { World } from "~/models/World";
 import type { Calendar, CalendarChannelPayload } from "~/models/CalendarConfig";
 import { PhArrowBendDoubleUpLeft, PhGlobeHemisphereWest, PhPencil } from "@phosphor-icons/vue";
 
+const { t } = useI18n()
+
 const supabase = useSupabaseClient()
 const route = useRoute()
 const id = route.params.id
@@ -24,6 +26,18 @@ watch(user, (n) => {
   }
 })
 
+// Set custom menu
+const { setCurrentMenu } = useUiStore()
+
+setCurrentMenu([
+  {
+    tooltip: t("entity.world.backToMy"),
+    to: "/my",
+    phIcon: "universe",
+    highlight: true
+  },
+])
+
 /**
  * === Subscriptions ===
  */
diff --git a/stores/UiStore.ts b/stores/UiStore.ts
index 43dbda6..6fea08c 100644
--- a/stores/UiStore.ts
+++ b/stores/UiStore.ts
@@ -7,8 +7,13 @@ export const useUiStore = defineStore("ui", () => {
     currentMenu.value = items
   }
 
+  function resetMenu() {
+    currentMenu.value = []
+  }
+
   return {
     currentMenu,
-    setCurrentMenu
+    setCurrentMenu,
+    resetMenu
   }
 })

From 1de5f13df6a2aaf837f063040939ab7dd7be03a3 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Thu, 13 Mar 2025 18:25:27 +0100
Subject: [PATCH 4/8] Added reset menu to explorer

---
 pages/explore.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pages/explore.vue b/pages/explore.vue
index 1d01797..b9663d4 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import type { Calendar } from "~/models/CalendarConfig";
 
+definePageMeta({
+  middleware: ["reset-menu"]
+})
+
 const { data: availableCalendars } = await useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
 </script>
 

From 0126d42762582547b09c3c2862a5edb74954af54 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Thu, 13 Mar 2025 22:11:19 +0100
Subject: [PATCH 5/8] Fixed data loading timing issue

---
 pages/my/calendars/[id].vue | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
index 9d76305..82cea2b 100644
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -45,19 +45,24 @@ const isLoading = computed(() => calendarStatus.value === "pending" || categorie
 const { t } = useI18n()
 const { setCurrentMenu } = useUiStore()
 
-setCurrentMenu([
-  {
-    tooltip: t("entity.world.backToMy"),
-    to: "/my",
-    phIcon: "universe",
-    phIconWeight: "regular"
-  },
-  {
-    tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
-    to: `/my/worlds/${calendar.value?.data.world?.id}`,
-    phIcon: "world"
-  },
-])
+// Set menu once we have the calendar data
+watch(calendar, (n) => {
+  if (n?.data) {
+    setCurrentMenu([
+      {
+        tooltip: t("entity.world.backToMy"),
+        to: "/my",
+        phIcon: "universe",
+        phIconWeight: "regular"
+      },
+      {
+        tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
+        to: `/my/worlds/${calendar.value?.data.world?.id}`,
+        phIcon: "world"
+      },
+    ])
+  }
+}, { immediate: true })
 </script>
 
 <template>

From 895d8a887b04eb2cff21a5547e5b6ad0bba01bdb Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 14 Mar 2025 12:07:03 +0100
Subject: [PATCH 6/8] Removed sidebar and added breadcrumbs

---
 components/calendar/CalendarMenu.vue          |  8 +--
 components/global/Breadcrumb.vue              | 60 ++++++++++++++++
 components/ui/breadcrumb/Breadcrumb.vue       | 13 ++++
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      | 22 ++++++
 components/ui/breadcrumb/BreadcrumbItem.vue   | 16 +++++
 components/ui/breadcrumb/BreadcrumbLink.vue   | 20 ++++++
 components/ui/breadcrumb/BreadcrumbList.vue   | 16 +++++
 components/ui/breadcrumb/BreadcrumbPage.vue   | 19 +++++
 .../ui/breadcrumb/BreadcrumbSeparator.vue     | 21 ++++++
 components/ui/breadcrumb/index.ts             |  7 ++
 i18n.config.ts                                | 14 ++++
 pages/my/calendars/[id].vue                   | 56 +++++++++------
 pages/my/worlds/[id].vue                      | 70 +++++++++++--------
 13 files changed, 286 insertions(+), 56 deletions(-)
 create mode 100644 components/global/Breadcrumb.vue
 create mode 100644 components/ui/breadcrumb/Breadcrumb.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbEllipsis.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbItem.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbLink.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbList.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbPage.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbSeparator.vue
 create mode 100644 components/ui/breadcrumb/index.ts

diff --git a/components/calendar/CalendarMenu.vue b/components/calendar/CalendarMenu.vue
index 0cb67af..e07481b 100644
--- a/components/calendar/CalendarMenu.vue
+++ b/components/calendar/CalendarMenu.vue
@@ -8,8 +8,8 @@ const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
-  <header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
-    <div class="px-6 flex justify-between">
+  <header class="border-slate-400 dark:border-slate-700 border-b-[1px]">
+    <div class="px-8 flex justify-between">
       <menu class="flex items-center gap-2">
         <li v-if="!isReadOnly">
           <CalendarDialogQuickCreateEvent />
@@ -20,7 +20,7 @@ const { isReadOnly } = storeToRefs(useCalendar())
         <li>
           <CalendarMenuNav />
         </li>
-        <li class="ml-6">
+        <li class="ml-4">
           <CalendarCurrentDate />
         </li>
       </menu>
@@ -40,7 +40,7 @@ const { isReadOnly } = storeToRefs(useCalendar())
       </menu>
     </div>
 
-    <div class="ml-6">
+    <div class="ml-8">
       <CalendarMenuSubnav />
     </div>
   </header>
diff --git a/components/global/Breadcrumb.vue b/components/global/Breadcrumb.vue
new file mode 100644
index 0000000..e32d0c0
--- /dev/null
+++ b/components/global/Breadcrumb.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { PhCaretRight } from "@phosphor-icons/vue";
+
+const route = useRoute()
+
+export type BreadcrumbItem = {
+  label?: string;
+  translateKey?: string;
+  to?: string;
+}
+
+defineProps<{
+  items?: BreadcrumbItem[];
+}>()
+</script>
+
+<template>
+  <UiBreadcrumb>
+    <UiBreadcrumbList>
+      <UiBreadcrumbItem v-if="route.path !== '/my'">
+        <UiBreadcrumbLink as-child>
+          <NuxtLink to="/my">
+            {{ $t("breadcrumbs.profile") }}
+          </NuxtLink>
+        </UiBreadcrumbLink>
+      </UiBreadcrumbItem>
+      <UiBreadcrumbItem v-else>
+        <UiBreadcrumbPage>
+          {{ $t("breadcrumbs.profile") }}
+        </UiBreadcrumbPage>
+      </UiBreadcrumbItem>
+
+      <template v-for="(item, index) in items" :key="index">
+        <UiBreadcrumbSeparator>
+          <PhCaretRight />
+        </UiBreadcrumbSeparator>
+        <UiBreadcrumbItem>
+          <UiBreadcrumbLink v-if="item.to" as-child>
+            <NuxtLink :to="item.to">
+              <template v-if="item.label">
+                {{ item.label }}
+              </template>
+              <template v-else>
+                {{ $t(`breadcrumbs.${item.translateKey}`) }}
+              </template>
+            </NuxtLink>
+          </UiBreadcrumbLink>
+          <UiBreadcrumbPage v-else>
+            <template v-if="item.label">
+              {{ item.label }}
+            </template>
+            <template v-else>
+              {{ $t(`breadcrumbs.${item.translateKey}`) }}
+            </template>
+          </UiBreadcrumbPage>
+        </UiBreadcrumbItem>
+      </template>
+    </UiBreadcrumbList>
+  </UiBreadcrumb>
+</template>
diff --git a/components/ui/breadcrumb/Breadcrumb.vue b/components/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 0000000..b4fc008
--- /dev/null
+++ b/components/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/components/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 0000000..bb7fd6e
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { MoreHorizontal } from "lucide-vue-next"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbItem.vue b/components/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 0000000..dcdd26e
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbLink.vue b/components/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 0000000..e91abf1
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "radix-vue"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Primitive } from "radix-vue"
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbList.vue b/components/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 0000000..06ba68f
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbPage.vue b/components/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 0000000..64e61b9
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbSeparator.vue b/components/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 0000000..1dd57c0
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { ChevronRight } from "lucide-vue-next"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:w-3 [&>svg]:h-3', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/components/ui/breadcrumb/index.ts b/components/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..f4eafdc
--- /dev/null
+++ b/components/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
diff --git a/i18n.config.ts b/i18n.config.ts
index 4c6cab2..67fbf01 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -290,6 +290,13 @@ export default defineI18nConfig(() => ({
           title: "{user} — My universe",
           metaTitle: "My universe",
         }
+      },
+      breadcrumbs: {
+        home: "Home",
+        explore: "Explore",
+        profile: "Universe",
+        world: "World",
+        calendar: "Calendar"
       }
     },
     fr: {
@@ -583,6 +590,13 @@ export default defineI18nConfig(() => ({
           title: "{user} — Mon univers",
           metaTitle: "Mon univers",
         }
+      },
+      breadcrumbs: {
+        home: "Accueil",
+        explore: "Explorer",
+        profile: "Univers",
+        world: "Monde",
+        calendar: "Calendrier"
       }
     }
   }
diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
index 82cea2b..219053f 100644
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -42,27 +42,29 @@ const {
 const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
 
 // Set custom menu
-const { t } = useI18n()
-const { setCurrentMenu } = useUiStore()
+// This should be reserved for actions, not for breadcrumbs
+//
+// const { t } = useI18n()
+// const { setCurrentMenu } = useUiStore()
 
-// Set menu once we have the calendar data
-watch(calendar, (n) => {
-  if (n?.data) {
-    setCurrentMenu([
-      {
-        tooltip: t("entity.world.backToMy"),
-        to: "/my",
-        phIcon: "universe",
-        phIconWeight: "regular"
-      },
-      {
-        tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
-        to: `/my/worlds/${calendar.value?.data.world?.id}`,
-        phIcon: "world"
-      },
-    ])
-  }
-}, { immediate: true })
+// // Set menu once we have the calendar data
+// watch(calendar, (n) => {
+//   if (n?.data) {
+//     setCurrentMenu([
+//       {
+//         tooltip: t("entity.world.backToMy"),
+//         to: "/my",
+//         phIcon: "universe",
+//         phIconWeight: "regular"
+//       },
+//       {
+//         tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
+//         to: `/my/worlds/${calendar.value?.data.world?.id}`,
+//         phIcon: "world"
+//       },
+//     ])
+//   }
+// }, { immediate: true })
 </script>
 
 <template>
@@ -84,7 +86,19 @@ watch(calendar, (n) => {
       <Title>{{ calendar.data.name }}</Title>
     </Head>
 
-    <Calendar :calendar-data="calendar.data" :categories="categories.data" />
+    <div class="h-full grid grid-rows-[auto_1fr] pt-8 gap-y-2">
+      <div class="px-8">
+        <Breadcrumb
+          v-if="calendar.data.world"
+          :items="[
+            { label: calendar.data.world.name, to: `/my/worlds/${calendar.data.world.id}` },
+            { label: calendar.data.name },
+          ]"
+        />
+      </div>
+
+      <Calendar :calendar-data="calendar.data" :categories="categories.data" />
+    </div>
   </div>
 
   <div v-else class="h-full w-full grid place-items-center">
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 920f127..c26464d 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -4,8 +4,6 @@ import type { World } from "~/models/World";
 import type { Calendar, CalendarChannelPayload } from "~/models/CalendarConfig";
 import { PhArrowBendDoubleUpLeft, PhGlobeHemisphereWest, PhPencil } from "@phosphor-icons/vue";
 
-const { t } = useI18n()
-
 const supabase = useSupabaseClient()
 const route = useRoute()
 const id = route.params.id
@@ -27,16 +25,18 @@ watch(user, (n) => {
 })
 
 // Set custom menu
-const { setCurrentMenu } = useUiStore()
+// This should be reserved for actions, not for breadcrumbs
+//
+// const { setCurrentMenu } = useUiStore()
 
-setCurrentMenu([
-  {
-    tooltip: t("entity.world.backToMy"),
-    to: "/my",
-    phIcon: "universe",
-    highlight: true
-  },
-])
+// setCurrentMenu([
+//   {
+//     tooltip: t("entity.world.backToMy"),
+//     to: "/my",
+//     phIcon: "universe",
+//     highlight: true
+//   },
+// ])
 
 /**
  * === Subscriptions ===
@@ -186,28 +186,36 @@ function hideEditModal() {
         <Title>{{ world.data.name }}</Title>
       </Head>
 
-      <header class="lg:w-1/2 mb-8">
-        <Spacing>
-          <div class="flex items-center gap-2">
-            <Heading level="h1">{{ world.data.name }}</Heading>
+      <header class="mb-8">
+        <Spacing size="lg">
+          <Breadcrumb
+            :items="[
+              { label: world.data.name }
+            ]"
+          />
 
-            <UiTooltipProvider :delay-duration="250">
-              <UiTooltip>
-                <UiTooltipTrigger as-child>
-                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="deployEditModal">
-                    <PhPencil size="17" weight="fill" />
-                  </UiButton>
-                </UiTooltipTrigger>
-                <UiTooltipContent :side-offset="12" side="right">
-                  <p>
-                    {{ $t('entity.world.editSingle') }}
-                  </p>
-                </UiTooltipContent>
-              </UiTooltip>
-            </UiTooltipProvider>
+          <div class="lg:w-1/2">
+            <div class="flex items-center gap-2 mb-2">
+              <Heading level="h1">{{ world.data.name }}</Heading>
+
+              <UiTooltipProvider :delay-duration="250">
+                <UiTooltip>
+                  <UiTooltipTrigger as-child>
+                    <UiButton size="icon" class="rounded-full h-8 w-8" @click="deployEditModal">
+                      <PhPencil size="17" weight="fill" />
+                    </UiButton>
+                  </UiTooltipTrigger>
+                  <UiTooltipContent :side-offset="12" side="right">
+                    <p>
+                      {{ $t('entity.world.editSingle') }}
+                    </p>
+                  </UiTooltipContent>
+                </UiTooltip>
+              </UiTooltipProvider>
+            </div>
+
+            <p>{{ world.data.description }}</p>
           </div>
-
-          <p>{{ world.data.description }}</p>
         </Spacing>
       </header>
 

From c249dc8334e07eeaef58ffbbd0b505701e0a0c89 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 14 Mar 2025 12:10:46 +0100
Subject: [PATCH 7/8] Fixed regression on new event popover closing

The setTimeout isn't good for reseting the skeleton ; it basically overrides the next time we open another day to add an event
---
 components/calendar/dialog/CreateEvent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/calendar/dialog/CreateEvent.vue b/components/calendar/dialog/CreateEvent.vue
index ea87e02..b28d68a 100644
--- a/components/calendar/dialog/CreateEvent.vue
+++ b/components/calendar/dialog/CreateEvent.vue
@@ -38,7 +38,7 @@ function openEventCreatePopover() {
 function handleClosing(e: Event) {
   e.preventDefault()
   popoverOpen.value = false
-  setTimeout(() => resetSkeleton(), 100)
+  resetSkeleton()
 }
 </script>
 

From c3c4554e099c9b370e3a8085f5ac029c38a09884 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 14 Mar 2025 12:15:36 +0100
Subject: [PATCH 8/8] Fixed calendar grid colours

---
 components/calendar/CalendarMenu.vue          | 2 +-
 components/calendar/state/monthly/DayTile.vue | 2 +-
 components/global/sidebar/Sidebar.vue         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/calendar/CalendarMenu.vue b/components/calendar/CalendarMenu.vue
index e07481b..f37698f 100644
--- a/components/calendar/CalendarMenu.vue
+++ b/components/calendar/CalendarMenu.vue
@@ -8,7 +8,7 @@ const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
-  <header class="border-slate-400 dark:border-slate-700 border-b-[1px]">
+  <header class="border-slate-200 contrast-more:border-slate-500 dark:border-slate-700 border-b-[1px]">
     <div class="px-8 flex justify-between">
       <menu class="flex items-center gap-2">
         <li v-if="!isReadOnly">
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index 7c0e8ff..95245f2 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -73,7 +73,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 <template>
   <div
     ref="calendarTile"
-    class="tile relative text-xs p-2 border-slate-400 dark:border-slate-700 dark:bg-black transition-colors"
+    class="tile relative text-xs p-2 border-slate-200 contrast-more:border-slate-500 dark:border-slate-700 dark:bg-black transition-colors"
     :class="{
       'text-slate-300 dark:text-slate-500': props.faded,
       'text-slate-500 dark:text-slate-300': !props.faded
diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index c4fbc44..895539f 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -36,7 +36,7 @@ function computeMenuItemIcon(iconString: SidebarMenuIcon) {
         <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>
-              <UiButton variant="ghost" size="icon" class="rounded-full text-indigo-400" as-child>
+              <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
                 <RouterLink to="/explore">
                   <PhCompass size="24" weight="fill" />
                 </RouterLink>