feat: add username to navbar, pass title by props

app/src/components/GameHeaderPart.vue

@@ -1,9 +1,11 @@
 <script setup>
+import { defineProps, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { logout } from '../utils/auth'
 import { bugReportUrl } from '../config'
-import sessionStore, { reset } from '../store/session'
+import { reset } from '../store/session'
+import userProfileStore, { loadUserProfile } from '../store/userProfile'
 
 const router = useRouter()
 
@@ -29,6 +31,22 @@ const handleMap = async () => {
     console.error(err)
   }
 }
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+})
+
+onMounted(async () => {
+  try {
+    await loadUserProfile()
+  } catch (err) {
+    // toast.error('Failed to load user profile')
+    toast.error('無法讀取使用者資料')
+  }
+})
 </script>
 
 <template>
@@ -51,9 +69,8 @@ const handleMap = async () => {
           id="HeaderText"
           class="text-text-primary inline-block font-bold whitespace-nowrap"
           style="font-size: 2vh"
-          v-if="sessionStore.quest"
         >
-          {{ sessionStore.quest.title }}
+          {{ title }}
         </p>
       </div>
       <div class="h-full w-full flex gap-3 items-center justify-end">
@@ -75,6 +92,13 @@ const handleMap = async () => {
             class="text-text-primary h-full w-full"
           />
         </button> -->
+        <p
+          id="UsernameText"
+          class="text-text inline-block whitespace-nowrap"
+          style="font-size: 2vh"
+        >
+          {{ userProfileStore.username }}
+        </p>
         <button title="Map" @click="handleMap" class="h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'map']"