From 6b01ce181d083f23e611e40ee75ef74cd24e1444 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 29 Apr 2025 16:16:45 +0200
Subject: [PATCH] Added back breadcrumb

---
 components/calendar/menu/Menu.vue |  7 +--
 components/global/Breadcrumb.vue  | 76 +++++++++++++++++--------------
 pages/my/calendars/[id].vue       |  4 +-
 pages/my/index.vue                | 21 +++++++--
 pages/my/worlds/[id].vue          | 16 +++----
 5 files changed, 69 insertions(+), 55 deletions(-)

diff --git a/components/calendar/menu/Menu.vue b/components/calendar/menu/Menu.vue
index e92f533..c63fbca 100644
--- a/components/calendar/menu/Menu.vue
+++ b/components/calendar/menu/Menu.vue
@@ -11,18 +11,15 @@ const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
 
 <template>
   <header class="md:mt-2 grid gap-3 md:gap-4 border-border border-b-[1px] transition-colors">
-    <div class="px-4 md:px-8 flex items-center justify-between gap-2">
+    <div class="px-5 md:px-8 flex items-center justify-between gap-2">
       <menu class="flex items-center md:gap-2">
         <li>
           <LazyCalendarDialogQuickCreateEvent v-if="!isReadOnly" />
         </li>
-        <li class="md:hidden">
-          <SidebarToggle />
-        </li>
         <li class="max-md:hidden">
           <LazyCalendarMenuToday v-if="defaultDate" />
         </li>
-        <li class="ml-4">
+        <li class="ml-2 md:ml-4">
           <CalendarCurrentDate />
         </li>
       </menu>
diff --git a/components/global/Breadcrumb.vue b/components/global/Breadcrumb.vue
index e32d0c0..4ea3e5e 100644
--- a/components/global/Breadcrumb.vue
+++ b/components/global/Breadcrumb.vue
@@ -15,46 +15,52 @@ defineProps<{
 </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>
+  <div class="flex gap-3 items-center">
+    <div class="md:hidden">
+      <SidebarToggle />
+    </div>
 
-      <template v-for="(item, index) in items" :key="index">
-        <UiBreadcrumbSeparator>
-          <PhCaretRight />
-        </UiBreadcrumbSeparator>
-        <UiBreadcrumbItem>
-          <UiBreadcrumbLink v-if="item.to" as-child>
-            <NuxtLink :to="item.to">
+    <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>
-            </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>
+            </UiBreadcrumbPage>
+          </UiBreadcrumbItem>
+        </template>
+      </UiBreadcrumbList>
+    </UiBreadcrumb>
+  </div>
 </template>
diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
index 719e0fd..c20b1f2 100644
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -60,8 +60,8 @@ watch([calendar], () => {
       <Title>{{ calendar.data.name }}</Title>
     </Head>
 
-    <div class="h-full md:grid md:grid-rows-[auto_1fr] pt-8 gap-y-1 md:gap-y-2">
-      <div class="px-5 md:px-8 max-md:hidden">
+    <div class="h-full grid grid-rows-[auto_1fr] pt-8 md:gap-y-2">
+      <div class="px-5 md:px-8 max-md:mb-2">
         <Breadcrumb
           v-if="calendar.data.world"
           :items="[
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 52ca22b..1693047 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -9,9 +9,11 @@ definePageMeta({
   middleware: ["auth-guard", "reset-menu"]
 })
 
-const { data: worlds } = await useLazyFetch<{ data: World[] }>("/api/worlds/query", { query: { gmId:  user?.value!.id } })
+const { data: worlds, status: worldStatus } = await useLazyFetch<{ data: World[] }>("/api/worlds/query", { query: { gmId:  user?.value!.id }, key: "user-worlds", keepalive: true })
 const sortedWorlds = computed(() => worlds.value?.data ? [...worlds.value.data].sort((a, b) => (a.id ?? 0) - (b.id ?? 0)) : [])
 
+const isLoading = computed(() => worldStatus.value === "idle")
+
 // Redirect user back home when they log out on the page
 watch(user, (n) => {
   if (!n) {
@@ -115,9 +117,15 @@ function hideEditModal() {
       <Title>{{ $t("pages.profile.metaTitle") }}</Title>
     </Head>
 
-    <Heading level="h1">
-      {{ $t("pages.profile.title", { user: user?.user_metadata.full_name }) }}
-    </Heading>
+    <div class="flex items-center gap-3">
+      <div class="md:hidden">
+        <SidebarToggle />
+      </div>
+
+      <Heading level="h1">
+        {{ $t("pages.profile.title", { user: user?.user_metadata.full_name }) }}
+      </Heading>
+    </div>
 
     <section class="mt-4">
       <Spacing size="lg">
@@ -127,7 +135,10 @@ function hideEditModal() {
           </Heading>
         </div>
 
-        <ul v-if="worlds?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
+        <div v-if="isLoading" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
+          <LoadingCard />
+        </div>
+        <ul v-else-if="worlds?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
           <li v-for="world in sortedWorlds" :key="world.id">
             <WorldPreviewCard :world="world" @on-edit="() => deployEditModal(world)" @on-delete="() => deployDeleteModal(world)" />
           </li>
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 38a5401..a9ffa2d 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -180,17 +180,17 @@ function hideEditModal() {
 
       <header class="mb-8">
         <Spacing size="lg">
-          <div class="max-md:hidden">
-            <Breadcrumb
-              :items="[
-                { label: world.data.name }
-              ]"
-            />
-          </div>
+          <Breadcrumb
+            :items="[
+              { label: world.data.name }
+            ]"
+          />
 
           <div class="lg:w-1/2">
             <div class="flex items-center gap-2 mb-2">
-              <Heading level="h1">{{ world.data.name }}</Heading>
+              <div class="flex items-center gap-3">
+                <Heading level="h1">{{ world.data.name }}</Heading>
+              </div>
 
               <UiTooltipProvider :delay-duration="250">
                 <UiTooltip>