From 44f7fd939b4cda6c45ab823930ed47e6541e60e2 Mon Sep 17 00:00:00 2001
From: Tim McCarthy <thoomfish@gmail.com>
Date: Mon, 15 Jun 2026 09:14:27 -0700
Subject: [PATCH] Home: list Rejoin a Crew above Muster, with a gap between

Returning players are the common case, so surface their saved crews first.
The two glass panels had no margin between them; add spacing on the
Rejoin box so it sits clear of the Muster box below it.

Also tidies the TODO 'Polish' section (renamed from 'UI Polish'; drops the
now-committed Rank-3 bonus 'Gameplay gaps' entry).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 TODO.md                        | 12 +++----
 frontend/src/pages/Home.svelte | 58 ++++++++++++++++++----------------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/TODO.md b/TODO.md
index 293ea35..8ad743e 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,18 +1,14 @@
-## UI Polish
+## Polish
 
-- [ ] On the home page, rejoin a crew should be above muster a crew, and there should be a gap between the two boxes
+- [x] On the home page, rejoin a crew should be above muster a crew, and there should be a gap between the two boxes
+- [ ] **Version number and change log** Start keeping track of version number. It's fine to just start with v1 and increment on every commit. In the hamburger menu, add an "About" item that pops up a modal with the current version number and a change log. The change log should only cover user-facing changes. Add a note to AGENTS.md about maintaining the change log.
+- [ ] **Example Play formatting.** The Example Play section of the Rules page could use a bit more formatting for legibility. Make diagrams of the card state at each step rather than just a text listing. 
 
 ## Words Words Words
 
-- [ ] **Example Play formatting.** The Example Play section of the Rules page could use a bit more formatting for legibility. Make diagrams of the card state at each step rather than just a text listing. 
 - [ ] **Suggestions.** Take a pass through all of the suggestions in suggestions.js, rewrite ones that are stiff, awkward, or don't fit the theme/setting as described in the rulebook. Move the suggestion pool from suggestions.js into a backend API endpoint.
 - [ ] **TLDR rules**. A one page summary sheet of the rulebook, for the impatient
-- [ ] **Version number and change log**
 
 ## Security
 
 - [ ] **Defensive coding.** While we trust our players, this app is exposed on the open internet. I'd like to take basic precautions like making sure we're safe against SQL injection (SQLModel should handle this?), doing some basic sanitizing of free inputs from players (valid unicode only + generous character limit should be enough), and making sure that every game action API call is specific and constrained enough that it can't just do arbitrary database updates.
-
-## Gameplay gaps
-
-- [x] **Finish the Rank-3 story bonus.** A Pi-Rat who completes their 3rd Personal Objective (RULEBOOK §93) now gets a "⭐ Your Story is Complete!" modal (`RankBonusModal.svelte`, keyed on `needs_rank_3_bonus`) to grant another eligible crewmate +1 Rank — or forfeit it when none qualify. *(Done 2026-06-15: logic in `crud_scene.grant_story_bonus_rank` reusing the shared `is_eligible_nominee` guard; route slimmed to the (ok, msg) convention; unit tests added; verified end-to-end in the browser.)*
diff --git a/frontend/src/pages/Home.svelte b/frontend/src/pages/Home.svelte
index 3673fe1..79ccc3c 100644
--- a/frontend/src/pages/Home.svelte
+++ b/frontend/src/pages/Home.svelte
@@ -63,33 +63,6 @@
         <div class="hero-flourish" aria-hidden="true">🐀 ⚓ 🐀</div>
     </header>
 
-    <div class="glass-panel creation-card">
-        <h2>Muster a New Crew</h2>
-        <form on:submit|preventDefault={createGame}>
-            <div class="form-group">
-                <label for="crewName">Crew Name</label>
-                <input
-                    type="text"
-                    id="crewName"
-                    bind:value={crewName}
-                    required
-                    placeholder="e.g. The Salty Dogs"
-                    class="input-field input-large"
-                    autocomplete="off"
-                />
-            </div>
-
-            {#if error}
-                <div class="alert alert-danger">{error}</div>
-            {/if}
-
-            <button type="submit" class="btn btn-primary btn-large btn-full" disabled={creating}>
-                {creating ? 'Creating...' : 'Create Game'}
-            </button>
-        </form>
-        <p class="join-hint">Joining someone else's crew? Ask the game creator for the join link from their lobby.</p>
-    </div>
-
     {#if sessions.length > 0}
     <div class="glass-panel creation-card saved-sessions">
         <h2>Rejoin a Crew</h2>
@@ -118,12 +91,43 @@
     </div>
     {/if}
 
+    <div class="glass-panel creation-card">
+        <h2>Muster a New Crew</h2>
+        <form on:submit|preventDefault={createGame}>
+            <div class="form-group">
+                <label for="crewName">Crew Name</label>
+                <input
+                    type="text"
+                    id="crewName"
+                    bind:value={crewName}
+                    required
+                    placeholder="e.g. The Salty Dogs"
+                    class="input-field input-large"
+                    autocomplete="off"
+                />
+            </div>
+
+            {#if error}
+                <div class="alert alert-danger">{error}</div>
+            {/if}
+
+            <button type="submit" class="btn btn-primary btn-large btn-full" disabled={creating}>
+                {creating ? 'Creating...' : 'Create Game'}
+            </button>
+        </form>
+        <p class="join-hint">Joining someone else's crew? Ask the game creator for the join link from their lobby.</p>
+    </div>
+
     <div class="welcome-links">
         <a href="/rules" target="_blank" rel="noopener" class="btn btn-secondary">📖 Read the Rules</a>
     </div>
 </div>
 
 <style>
+    /* Space the Rejoin box off the Muster box below it. */
+    .saved-sessions {
+        margin-bottom: 1.75rem;
+    }
     .session-list {
         list-style: none;
         margin: 0;