From 599c8fe5b7a0ac09ce9d9d645f116da97f511403 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Sat, 7 Mar 2026 14:03:35 -0800
Subject: [PATCH] feat: add share link button to character sheet panel

---
 .../components/game/CharacterSheetPanel.tsx   | 22 ++++++++++++++++---
 apps/web/src/styles.css                       |  5 +++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/game/CharacterSheetPanel.tsx b/apps/web/src/components/game/CharacterSheetPanel.tsx
index 17b6d2b..b448643 100644
--- a/apps/web/src/components/game/CharacterSheetPanel.tsx
+++ b/apps/web/src/components/game/CharacterSheetPanel.tsx
@@ -35,6 +35,7 @@ export const CharacterSheetPanel = (): React.JSX.Element => {
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [saved, setSaved] = useState(false);
+  const [copied, setCopied] = useState(false);
   const savedSettingsRef = useRef<ProfileSettings>({ ...DEFAULT_PROFILE_SETTINGS });
 
   useEffect(() => {
@@ -238,9 +239,24 @@ export const CharacterSheetPanel = (): React.JSX.Element => {
     <section className="panel character-sheet-panel">
       <div className="panel-header">
         <h2>📋 Character Sheet</h2>
-        <button className="character-sheet-edit-btn" onClick={handleEdit} type="button">
-          ✏️ Edit
-        </button>
+        <div className="character-sheet-header-actions">
+          <button
+            className="character-sheet-edit-btn"
+            onClick={() => {
+              const url = `${window.location.origin}/character/${player?.discordId ?? ""}`;
+              void navigator.clipboard.writeText(url).then(() => {
+                setCopied(true);
+                setTimeout(() => { setCopied(false); }, 2000);
+              });
+            }}
+            type="button"
+          >
+            {copied ? "✓ Copied!" : "🔗 Share"}
+          </button>
+          <button className="character-sheet-edit-btn" onClick={handleEdit} type="button">
+            ✏️ Edit
+          </button>
+        </div>
       </div>
 
       <div className="character-sheet-view">
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 7b231fa..e822729 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -3079,6 +3079,11 @@ body {
   margin-bottom: 1rem;
 }
 
+.character-sheet-header-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
 .character-sheet-edit-btn {
   background: var(--colour-surface);
   border: 1px solid var(--colour-border);