From d68333ec05ed7826e11b80354484631cc0a7e418 Mon Sep 17 00:00:00 2001
From: Tim McCarthy <thoomfish@gmail.com>
Date: Fri, 12 Jun 2026 21:09:36 -0700
Subject: [PATCH] Add crew/player/rat name to page title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each routed page now sets a descriptive document.title so tabs and
browser history entries are distinguishable: the dashboard shows the
Pi-Rat (and human player) name plus crew, the admin panel shows
"Admin · {crew}", the join page is labeled, and home resets to the
app name. New lib/title.js helper composes "{parts} — Rats with Gats".

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 TODO.md                             | 1 -
 frontend/src/lib/title.js           | 9 +++++++++
 frontend/src/pages/Admin.svelte     | 3 +++
 frontend/src/pages/Dashboard.svelte | 5 +++++
 frontend/src/pages/Home.svelte      | 4 ++++
 frontend/src/pages/Join.svelte      | 4 ++++
 6 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/title.js

diff --git a/TODO.md b/TODO.md
index bb0728c..25391cf 100644
--- a/TODO.md
+++ b/TODO.md
@@ -5,7 +5,6 @@
 
 ## Minor Gameplay Polish
 
-- [ ] **Add crew/player/rat name to page title, if available**. This will make it easier to distinguish tabs/browser history entries
 - [ ] **Save active sessions in browser local storage**. Whenever you create or join a game, your browser local storage should be updated with the game ID, player ID, crew name, and player/rat names (if available). Going to the home page with saved sessions should provide a menu of games to rejoin in addition to the ability to start a new game. It should be possible to delete entries from this list, which only affects the browser local storage, not the backend database, and is undoable (the entry doesn't disappear immediately, it's just marked as deleted until page refresh).
 - [ ] **Dead Pi-Rat rank voting streamlined**. Don't allow voting for dead Pi-Rats. If a player's only vote options are dead, then they skip voting entirely.
 
diff --git a/frontend/src/lib/title.js b/frontend/src/lib/title.js
new file mode 100644
index 0000000..5654eb7
--- /dev/null
+++ b/frontend/src/lib/title.js
@@ -0,0 +1,9 @@
+// Sets document.title to a " · "-joined set of page specifics followed by the
+// app name, so tabs and browser history entries are easy to tell apart.
+// Falsy parts are dropped; with no parts the title is just the app name.
+const BASE = 'Rats with Gats';
+
+export function setPageTitle(...parts) {
+    const prefix = parts.filter(Boolean).join(' · ');
+    document.title = prefix ? `${prefix} — ${BASE}` : BASE;
+}
diff --git a/frontend/src/pages/Admin.svelte b/frontend/src/pages/Admin.svelte
index 6d2ac4e..4eea047 100644
--- a/frontend/src/pages/Admin.svelte
+++ b/frontend/src/pages/Admin.svelte
@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import { apiRequest } from '../lib/api';
+    import { setPageTitle } from '../lib/title';
 
     export let params = {};
     let gameId = params.id;
@@ -13,6 +14,8 @@
     let copiedInvite = false;
     let copiedInviteTimer = null;
 
+    $: setPageTitle('Admin', data?.game?.crew_name);
+
     function rejoinLink(playerId) {
         return `${window.location.origin}/#/game/${gameId}/player/${playerId}`;
     }
diff --git a/frontend/src/pages/Dashboard.svelte b/frontend/src/pages/Dashboard.svelte
index 2d25d57..23206f8 100644
--- a/frontend/src/pages/Dashboard.svelte
+++ b/frontend/src/pages/Dashboard.svelte
@@ -3,6 +3,8 @@
     import { apiRequest } from '../lib/api';
     import { extraMenuLinks } from '../lib/menu';
     import { getSuggestion } from '../lib/suggestions';
+    import { displayName } from '../lib/cards';
+    import { setPageTitle } from '../lib/title';
 
     import LobbyPhase from '../components/LobbyPhase.svelte';
     import CharacterCreationPhase from '../components/CharacterCreationPhase.svelte';
@@ -103,6 +105,9 @@
         }
     }
 
+    // Distinguish tabs/history by the Pi-Rat (and crew) this dashboard is for
+    $: setPageTitle(state ? displayName(state.player) : null, state?.game?.crew_name);
+
     // Admins get the admin key in their state blob; stash it so the Admin page works for them too
     $: if (state?.player?.is_admin && state?.game?.admin_key) {
         localStorage.setItem(`admin_key_${gameId}`, state.game.admin_key);
diff --git a/frontend/src/pages/Home.svelte b/frontend/src/pages/Home.svelte
index 5c9aae9..455b6c0 100644
--- a/frontend/src/pages/Home.svelte
+++ b/frontend/src/pages/Home.svelte
@@ -1,6 +1,10 @@
 <script>
+    import { onMount } from 'svelte';
     import { push } from 'svelte-spa-router';
     import { apiRequest } from '../lib/api';
+    import { setPageTitle } from '../lib/title';
+
+    onMount(() => setPageTitle());
 
     let crewName = '';
     let error = '';
diff --git a/frontend/src/pages/Join.svelte b/frontend/src/pages/Join.svelte
index a891a04..808e189 100644
--- a/frontend/src/pages/Join.svelte
+++ b/frontend/src/pages/Join.svelte
@@ -1,7 +1,11 @@
 <script>
+    import { onMount } from 'svelte';
     import { push } from 'svelte-spa-router';
     import { apiRequest } from '../lib/api';
+    import { setPageTitle } from '../lib/title';
     export let params = {};
+
+    onMount(() => setPageTitle('Join the Crew'));
     let gameId = params.id;
     let playerName = '';
     let error = '';