feat: add share link button to character sheet panel

This commit is contained in:
2026-03-07 14:03:35 -08:00
committed by Naomi Carrigan
parent 8f0d038da1
commit 599c8fe5b7
2 changed files with 24 additions and 3 deletions
@@ -35,6 +35,7 @@ export const CharacterSheetPanel = (): React.JSX.Element => {
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [saved, setSaved] = useState(false); const [saved, setSaved] = useState(false);
const [copied, setCopied] = useState(false);
const savedSettingsRef = useRef<ProfileSettings>({ ...DEFAULT_PROFILE_SETTINGS }); const savedSettingsRef = useRef<ProfileSettings>({ ...DEFAULT_PROFILE_SETTINGS });
useEffect(() => { useEffect(() => {
@@ -238,9 +239,24 @@ export const CharacterSheetPanel = (): React.JSX.Element => {
<section className="panel character-sheet-panel"> <section className="panel character-sheet-panel">
<div className="panel-header"> <div className="panel-header">
<h2>📋 Character Sheet</h2> <h2>📋 Character Sheet</h2>
<button className="character-sheet-edit-btn" onClick={handleEdit} type="button"> <div className="character-sheet-header-actions">
Edit <button
</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>
<div className="character-sheet-view"> <div className="character-sheet-view">
+5
View File
@@ -3079,6 +3079,11 @@ body {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.character-sheet-header-actions {
display: flex;
gap: 0.5rem;
}
.character-sheet-edit-btn { .character-sheet-edit-btn {
background: var(--colour-surface); background: var(--colour-surface);
border: 1px solid var(--colour-border); border: 1px solid var(--colour-border);