From 0336fabaa8346a21332a5211b55e667e3631badb Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 14 Dec 2025 21:55:54 -0800
Subject: [PATCH] add dynamic page titles for profiles and teams

---
 src/routes/(app)/[username]/+page.svelte      |  9 +++--
 .../(app)/teams/[id]/[[tab=tab]]/+page.svelte | 34 +++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

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 @@
 	})
 </script>
 
-<svelte:head>
-	<title>{data.user.username}'s Teams | Hensei</title>
-</svelte:head>
+<PageMeta
+	title={m.page_title_profile({ username: data.user?.username ?? '' })}
+	description={m.page_desc_profile({ username: data.user?.username ?? '' })}
+/>
 
 <section class="profile">
 	<ProfileHeader
diff --git a/src/routes/(app)/teams/[id]/[[tab=tab]]/+page.svelte b/src/routes/(app)/teams/[id]/[[tab=tab]]/+page.svelte
index 943bb1df..c6fb646a 100644
--- a/src/routes/(app)/teams/[id]/[[tab=tab]]/+page.svelte
+++ b/src/routes/(app)/teams/[id]/[[tab=tab]]/+page.svelte
@@ -5,9 +5,25 @@
 	import { partyQueries } from '$lib/api/queries/party.queries'
 	import { withInitialData } from '$lib/query/ssr'
 	import { GridType } from '$lib/types/enums'
+	import PageMeta from '$lib/components/PageMeta.svelte'
+	import * as m from '$lib/paraglide/messages'
 
 	let { data }: { data: PageData } = $props()
 
+	// Element emoji mapping for party titles
+	function getElementEmoji(element: number | undefined | null): string {
+		const emojis: Record<number, string> = {
+			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<string, GridType> = {
 		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 })
+	})
 </script>
 
+<PageMeta title={pageTitle()} description={pageDescription()} />
+
 {#if party}
 	<Party party={party} canEdit={data.canEdit || false} authUserId={data.authUserId} {initialTab} />
 {:else}