From cd4ccb4ac8cbe361ed5ca7babe6ff2e9312021f5 Mon Sep 17 00:00:00 2001
From: Justin Paul <justin@jpaul.me>
Date: Mon, 8 Jun 2026 09:16:38 -0400
Subject: [PATCH] Show a sex symbol after the name on the person page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A blue ♂ (male) or pink ♀ (female) symbol now follows the person's name in the
detail header, using the same gender tints as the tree cards. Nothing shows when
sex is unknown.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../app/trees/[id]/persons/[personId]/page.tsx     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/app/trees/[id]/persons/[personId]/page.tsx b/frontend/app/trees/[id]/persons/[personId]/page.tsx
index 9389c6b..506c697 100644
--- a/frontend/app/trees/[id]/persons/[personId]/page.tsx
+++ b/frontend/app/trees/[id]/persons/[personId]/page.tsx
@@ -686,7 +686,19 @@ export default function PersonDetailPage() {
       ) : (
         <div className="flex flex-wrap items-center justify-between gap-2">
           <h1 className="flex flex-wrap items-center gap-3 text-3xl font-semibold">
-            {person.primary_name ?? "Unnamed person"}
+            <span className="inline-flex items-center gap-2">
+              {person.primary_name ?? "Unnamed person"}
+              {person.gender === "male" && (
+                <span title="Male" aria-label="Male" style={{ color: "rgb(120, 159, 172)" }}>
+                  ♂
+                </span>
+              )}
+              {person.gender === "female" && (
+                <span title="Female" aria-label="Female" style={{ color: "rgb(196, 138, 146)" }}>
+                  ♀
+                </span>
+              )}
+            </span>
             {isSelf && (
               <span className="rounded-full bg-bronze/15 px-2.5 py-1 text-xs font-medium text-bronze">
                 This is you
-- 
2.52.0