From 3f201b90e3a00401cf90f18abcdd8a5aa4f2df3f Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 25 Aug 2024 18:24:59 +0200
Subject: [PATCH] Refactored user menu and titles

---
 components/global/user/CTA.vue | 120 +++++++++++++++++++++++++--------
 pages/index.vue                |   3 +-
 pages/my/calendars/[id].vue    |  11 +--
 pages/my/index.vue             |   9 +--
 pages/my/worlds/[id].vue       |   2 +-
 5 files changed, 105 insertions(+), 40 deletions(-)

diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index 726f696..ef8e109 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { computed } from "vue"
 
-import { PhFaders, PhSignOut, PhUserCircle } from "@phosphor-icons/vue"
+import { PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
 
 const router = useRouter()
+const { preference } = useColorMode()
 
 const { auth } = useSupabaseClient()
 const user = useSupabaseUser()
@@ -44,8 +45,14 @@ async function handleLogout() {
   }
 }
 
-function gotoPreferencesPage() {
-  // router.push({ path: "/my/preferences" })
+function gotoProfilePage() {
+  router.push({ path: "/my/preferences" })
+
+  closeMenu()
+}
+
+function gotoSettingsPage() {
+  router.push({ path: "/my/settings" })
 
   closeMenu()
 }
@@ -53,8 +60,8 @@ function gotoPreferencesPage() {
 
 <template>
   <ClientOnly>
-    <UiPopover v-model:open="menuOpened">
-      <UiPopoverTrigger>
+    <UiDropdownMenu v-model:open="menuOpened">
+      <UiDropdownMenuTrigger>
         <UiAvatar v-if="user" class="cursor-pointer">
           <UiAvatarImage
             :src="userMeta?.avatar_url"
@@ -66,29 +73,84 @@ function gotoPreferencesPage() {
         <UiButton v-else variant="outline" size="icon">
           <PhUserCircle size="18" />
         </UiButton>
-      </UiPopoverTrigger>
-      <UiPopoverContent class="w-fit p-0" :align="'start'" :side="'top'" :collision-padding="20">
-        <UiCommand>
-          <UiCommandList v-if="user">
-            <UiCommandGroup :heading="`Connecté en tant que ${user?.email}`">
-              <UiCommandItem value="preferences" class="flex gap-[.5ch] items-center" @select="gotoPreferencesPage">
-                <PhFaders size="20" />
-                <span>Préférences</span>
-              </UiCommandItem>
-            </UiCommandGroup>
-            <UiCommandSeparator />
-            <UiCommandGroup>
-              <UiCommandItem value="logout" class="flex gap-[.5ch] items-center" @select="handleLogout">
-                <PhSignOut size="20" weight="fill" />
-                <span>Déconnexion</span>
-              </UiCommandItem>
-            </UiCommandGroup>
-          </UiCommandList>
-          <UiCommandList v-else>
-            <UiCommandItem value="logout" @select="handleGoogleLogin"> Connexion </UiCommandItem>
-          </UiCommandList>
-        </UiCommand>
-      </UiPopoverContent>
-    </UiPopover>
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent class="w-fit p-0" :align="'start'" :side="'top'" :side-offset="10" :align-offset="25" :collision-padding="40">
+
+        <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">
+            <PhGlobeHemisphereWest size="20" weight="fill" />
+            <span>Mondes</span>
+          </UiDropdownMenuItem>
+
+          <UiDropdownMenuSeparator />
+
+          <UiDropdownMenuSub>
+            <UiDropdownMenuSubTrigger class="p-0">
+              <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <PhPalette size="20" weight="fill" />
+                <span>Apparence</span>
+              </UiDropdownMenuItem>
+            </UiDropdownMenuSubTrigger>
+            <UiDropdownMenuPortal>
+              <UiDropdownMenuSubContent>
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                  <PhMoon size="20" />
+                  <span>Sombre</span>
+                </UiDropdownMenuItem>
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                  <PhSun size="20" />
+                  <span>Clair</span>
+                </UiDropdownMenuItem>
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                  <PhLaptop size="20" />
+                  <span>Système</span>
+                </UiDropdownMenuItem>
+              </UiDropdownMenuSubContent>
+            </UiDropdownMenuPortal>
+          </UiDropdownMenuSub>
+
+          <UiDropdownMenuSub>
+            <UiDropdownMenuSubTrigger class="p-0">
+              <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <PhTranslate size="20" />
+                <span>Langage</span>
+              </UiDropdownMenuItem>
+            </UiDropdownMenuSubTrigger>
+            <UiDropdownMenuPortal>
+              <UiDropdownMenuSubContent>
+                <UiDropdownMenuSubContent>
+                  <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                    <span>Français</span>
+                  </UiDropdownMenuItem>
+                  <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                    <span>English</span>
+                  </UiDropdownMenuItem>
+                </UiDropdownMenuSubContent>
+              </UiDropdownMenuSubContent>
+            </UiDropdownMenuPortal>
+          </UiDropdownMenuSub>
+
+          <UiDropdownMenuSeparator />
+
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="gotoSettingsPage">
+            <PhGear size="20" weight="fill" />
+            <span>Compte</span>
+          </UiDropdownMenuItem>
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleLogout">
+            <PhSignOut size="20" weight="fill" />
+            <span>Déconnexion</span>
+          </UiDropdownMenuItem>
+        </template>
+
+        <template v-else>
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleGoogleLogin">
+            <PhGear size="20" weight="fill" />
+            <span>Connexion</span>
+          </UiDropdownMenuItem>
+        </template>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>
   </ClientOnly>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 55e3b85..d3151fa 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 useHead({
-  title: "Dashboard"
+  title: "TTTools — Calendriers de JDR",
+  titleTemplate: null
 })
 </script>
 
diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
index 4883481..b8a9f11 100644
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -3,9 +3,6 @@ import { PhCircleNotch } from "@phosphor-icons/vue";
 import type { Calendar } from "~/models/CalendarConfig";
 import type { Category } from "~/models/Category";
 
-useHead({
-  title: "Calendrier"
-})
 definePageMeta({
   middleware: ["auth-guard"]
 })
@@ -21,11 +18,15 @@ watch(user, (n) => {
 const route = useRoute()
 const id = route.params.id
 
-const { data: calendarData, pending: calPending } = useLazyFetch("/api/calendars/query", { key: `calendar-${id}`, query: { id, full: true } })
-const { data: catData, pending: catPending } = useLazyFetch("/api/calendars/categories/query", { key: `categories-${id}` })
+const { data: calendarData, pending: calPending } = await useLazyFetch("/api/calendars/query", { key: `calendar-${id}`, query: { id, full: true } })
+const { data: catData, pending: catPending } = await useLazyFetch("/api/calendars/categories/query", { key: `categories-${id}` })
 
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
+
+useHead({
+  title: cal.value.name
+})
 </script>
 
 <template>
diff --git a/pages/my/index.vue b/pages/my/index.vue
index fffc952..79db25e 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -2,15 +2,16 @@
 import type { RealtimeChannel } from "@supabase/supabase-js"
 import type { World } from "~/models/World";
 
+useHead({
+  title: "Mondes"
+})
+
 const supabase = useSupabaseClient()
 
 const { data: res } = await useFetch("/api/worlds/query")
 
 const worlds = ref<World[]>(res.value?.data as World[])
 
-useHead({
-  title: "Profil"
-})
 definePageMeta({
   middleware: ["auth-guard"]
 })
@@ -18,7 +19,7 @@ definePageMeta({
 const user = useSupabaseUser()
 
 // Redirect user back home when they log out on the page
-watch(user, (n, _o) => {
+watch(user, (n) => {
   if (!n) {
     navigateTo("/")
   }
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 01ef662..8121317 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -13,7 +13,7 @@ const { data: res, pending } = await useFetch("/api/worlds/query", { query: { id
 const world = ref<World>(res.value?.data as World)
 
 useHead({
-  title: "Profil"
+  title: world.value.name
 })
 definePageMeta({
   middleware: ["auth-guard"]