Added explorer page

components/global/sidebar/Sidebar.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { PhGlobeHemisphereWest, PhList } from "@phosphor-icons/vue"
+import { PhCompass, PhList } from "@phosphor-icons/vue"
 import type { SidebarMenuActionType } from "./SidebarProps";
 
 const { revealAdvancedSearch } = useCalendar()
 const { currentMenu } = storeToRefs(useUiStore())
 
-const user = useSupabaseUser()
+// const user = useSupabaseUser()
 
 function handleMenuItemAction(actionType: SidebarMenuActionType) {
   if (actionType === "event-search") {
@@ -23,19 +23,19 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         </UiButton>
       </li>
 
-      <li v-if="user">
+      <li>
         <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>
               <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
-                <RouterLink to="/my">
+                <RouterLink to="/explore">
-                  <PhGlobeHemisphereWest size="24" weight="fill" />
+                  <PhCompass size="24" weight="fill" />
                 </RouterLink>
               </UiButton>
             </UiTooltipTrigger>
             <UiTooltipContent :side="'right'" :side-offset="6">
               <p>
-                {{ $t('entity.world.namePlural') }}
+                {{ $t('pages.explore.menuLabel') }}
               </p>
             </UiTooltipContent>
           </UiTooltip>

components/global/user/CTA.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from "vue"
 
-import { PhCheckCircle, PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignIn, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
+import { PhCheckCircle, PhGear, PhUser, PhLaptop, PhMoon, PhPalette, PhSignIn, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
 import { cn } from "~/lib/utils";
 
 const router = useRouter()
@@ -82,9 +82,9 @@ function pushRoute(to: AvailableRoutes) {
           </p>
 
           <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my')">
-            <PhGlobeHemisphereWest size="20" weight="fill" />
+            <PhUser size="20" weight="fill" />
             <span>
-              {{ $t('entity.world.namePlural') }}
+              {{ $t('ui.sidebarMenu.profile') }}
             </span>
           </UiDropdownMenuItem>
 

i18n.config.ts

@@ -41,6 +41,7 @@ export default defineI18nConfig(() => ({
         greeting: "Connected as {user}",
         anonymousGreeting: "Preferences",
         sidebarMenu: {
+          profile: "Profile",
           appearance: "Appearance",
           language: "Language",
           account: "Account",
@@ -94,6 +95,8 @@ export default defineI18nConfig(() => ({
         calendar: {
           nameSingular: "Calendar",
           namePlural: "Calendars",
+          namePublicSingular: "Public Calendar",
+          namePublicPlural: "Public Calendars",
           addSingle: "Add a calendar",
           notFound: "Calendar not found",
           notFoundDescription: "The link is not valid or the calendar has been deleted / archived.",
@@ -229,6 +232,12 @@ export default defineI18nConfig(() => ({
           nameSingular: "Character",
           namePlural: "Characters",
         }
+      },
+      pages: {
+        explore: {
+          menuLabel: "Explore",
+          title: "Explore worlds",
+        }
       }
     },
     fr: {
@@ -269,6 +278,7 @@ export default defineI18nConfig(() => ({
         greeting: "Connecté en tant que {user}",
         anonymousGreeting: "Préférences",
         sidebarMenu: {
+          profile: "Profil",
           appearance: "Apparence",
           language: "Langue",
           account: "Compte",
@@ -322,6 +332,8 @@ export default defineI18nConfig(() => ({
         calendar: {
           nameSingular: "Calendriers",
           namePlural: "Calendrier",
+          namePublicSingular: "Calendrier Public",
+          namePublicPlural: "Calendriers Publics",
           addSingle: "Ajouter un calendrier",
           notFound: "Aucun calendrier trouvé",
           notFoundDescription: "Le lien n'est pas valide ou le calendrier a été supprimé / archivé.",
@@ -458,6 +470,12 @@ export default defineI18nConfig(() => ({
           nameSingular: "Personnage",
           namePlural: "Personnages",
         }
+      },
+      pages: {
+        explore: {
+          menuLabel: "Explorer",
+          title: "Explorer les mondes",
+        }
       }
     }
   }

nuxt.config.ts

@@ -39,7 +39,8 @@ export default defineNuxtConfig({
       login: "/",
       callback: "/my/",
       exclude: [
-        "/calendars(/*)?"
+        "/calendars(/*)?",
+        "/explore(/*)?"
       ]
     }
   },

pages/explore.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import type { Calendar } from "~/models/CalendarConfig";
+
+const { data } = await useFetch("/api/calendars/query")
+
+const availableCalendars = data.value?.data as Calendar[]
+</script>
+
+<template>
+  <main class="p-8">
+    <Head>
+      <Title>{{ $t("pages.explore.title") }}</Title>
+    </Head>
+
+    <Spacing size="lg">
+      <Heading level="h1">
+        {{ $t("pages.explore.title") }}
+      </Heading>
+
+      <Spacing size="lg">
+        <Heading level="h2">
+          {{ $t("entity.calendar.namePublicPlural") }}
+        </Heading>
+
+        <ul v-if="availableCalendars && availableCalendars?.length > 0" class="grid md:grid-cols-3 gap-2">
+          <li v-for="calendar in availableCalendars" :key="calendar.shortId">
+            <UiCard
+              class="w-full transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
+              :link="`/calendars/${calendar.shortId}`"
+            >
+              <UiCardHeader>
+                <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
+              </UiCardHeader>
+
+              <UiCardContent>
+                <p class="italic">Description future (ou alors des informations sur le nb d'évènements)</p>
+              </UiCardContent>
+            </UiCard>
+          </li>
+        </ul>
+      </Spacing>
+    </Spacing>
+  </main>
+</template>