diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 00b32e23..f391afc6 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -8,6 +8,8 @@
import { IsInViewport } from 'runed'
import Icon from '$lib/components/Icon.svelte'
import Button from '$lib/components/ui/Button.svelte'
+ import PageMeta from '$lib/components/PageMeta.svelte'
+ import * as m from '$lib/paraglide/messages'
const { data }: { data: PageData } = $props()
const isOwner = $derived(data.isOwner || false)
@@ -62,9 +64,10 @@
})
-
- {data.user.username}'s Teams | Hensei
-
+
= {
+ 0: '⚪', // null/unknown
+ 1: '🔴', // fire
+ 2: '🔵', // water
+ 3: '🟤', // earth
+ 4: '🟢', // wind
+ 5: '🟡', // light
+ 6: '🟣' // dark
+ }
+ return emojis[element ?? 0] ?? '⚪'
+ }
+
// Map URL segment to GridType
const tabMap: Record = {
weapons: GridType.Weapon,
@@ -41,8 +57,26 @@
// Use query data if available, fall back to server data
// This allows the query to refetch and update the UI automatically
const party = $derived(partyQuery.data ?? data.party)
+
+ // Generate dynamic page title
+ const pageTitle = $derived(() => {
+ if (!party) return 'Team / granblue.team'
+ const emoji = getElementEmoji(party.element)
+ const teamName = party.name || 'Unnamed Team'
+ const username = party.user?.username || 'Anonymous'
+ return m.page_title_party({ emoji, teamName, username })
+ })
+
+ const pageDescription = $derived(() => {
+ if (!party) return m.page_desc_home()
+ const raidName = party.raid?.name || 'Unknown Raid'
+ const username = party.user?.username || 'Anonymous'
+ return m.page_desc_party({ raidName, username })
+ })
+
+
{#if party}
{:else}