Updated title functions on pages

components/global/user/CTA.vue

@@ -45,20 +45,17 @@ async function handleLogout() {
   }
 }
 
-function gotoProfilePage() {
-  router.push({ path: "/my/preferences" })
+type AvailableRoutes = "/my" | "/my/settings"
 
-  closeMenu()
-}
-
-function gotoSettingsPage() {
-  router.push({ path: "/my/settings" })
+function pushRoute(to: AvailableRoutes) {
+  router.push({ path: to })
 
   closeMenu()
 }
 </script>
 
 <template>
+  {{ preference }}
   <ClientOnly>
     <UiDropdownMenu v-model:open="menuOpened">
       <UiDropdownMenuTrigger>
@@ -79,7 +76,7 @@ function gotoSettingsPage() {
         <template v-if="user">
           <p class="p-2 text-xs opacity-75">Connecté en tant que {{ user?.email }}</p>
 
-          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="gotoProfilePage">
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my')">
             <PhGlobeHemisphereWest size="20" weight="fill" />
             <span>Mondes</span>
           </UiDropdownMenuItem>
@@ -95,15 +92,15 @@ function gotoSettingsPage() {
             </UiDropdownMenuSubTrigger>
             <UiDropdownMenuPortal>
               <UiDropdownMenuSubContent>
-                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'dark'">
                   <PhMoon size="20" />
                   <span>Sombre</span>
                 </UiDropdownMenuItem>
-                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'light'">
                   <PhSun size="20" />
                   <span>Clair</span>
                 </UiDropdownMenuItem>
-                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'system'">
                   <PhLaptop size="20" />
                   <span>Système</span>
                 </UiDropdownMenuItem>
@@ -134,7 +131,7 @@ function gotoSettingsPage() {
 
           <UiDropdownMenuSeparator />
 
-          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="gotoSettingsPage">
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my/settings')">
             <PhGear size="20" weight="fill" />
             <span>Compte</span>
           </UiDropdownMenuItem>

models/CalendarConfig.ts

@@ -12,7 +12,7 @@ export interface Calendar extends CalendarConfig {
   id?: number
   name: string
   events: CalendarEvent[]
-  color?: string,
+  color?: string
 }
 
 export const postCalendarSchema = z.object({

pages/my/calendars/[id].vue

@@ -24,8 +24,16 @@ const { data: catData, pending: catPending } = await useLazyFetch("/api/calendar
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
 
-useHead({
-  title: cal.value.name
+if (cal.value) {
+  useHead({
+    title: cal.value.name
+  })
+}
+
+watch(cal, (n) => {
+  useHead({
+    title: n.name
+  })
 })
 </script>
 

pages/my/worlds/[id].vue

@@ -12,9 +12,20 @@ const { data: res, pending } = await useFetch("/api/worlds/query", { query: { id
 
 const world = ref<World>(res.value?.data as World)
 
-useHead({
-  title: world.value.name
-})
+if (world.value) {
+  useHead({
+    title: world.value.name
+  })
+}
+
+watch(world, (n) => {
+  if (n) {
+    useHead({
+      title: n.name
+    })
+  }
+}, { deep: true })
+
 definePageMeta({
   middleware: ["auth-guard"]
 })