Skip to content

Commit 31a6904

Browse files
cjw6kclaude
andcommitted
feat: Add copy-to-clipboard button for version SHA in About modal
Click the clipboard icon next to the version to copy the SHA. Shows a green checkmark for 2 seconds to confirm the copy. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 678ccb6 commit 31a6904

File tree

1 file changed

+27
-1
lines changed

1 file changed

+27
-1
lines changed

tidal-harmonics/src/components/ui/BottomLeftButtons.tsx

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,17 @@ export function BottomLeftButtons() {
88
const [showAbout, setShowAbout] = useState(false);
99
const [showGlossary, setShowGlossary] = useState(false);
1010
const [showHistory, setShowHistory] = useState(false);
11+
const [copied, setCopied] = useState(false);
12+
13+
const copyVersionToClipboard = async () => {
14+
try {
15+
await navigator.clipboard.writeText(__GIT_SHA__);
16+
setCopied(true);
17+
setTimeout(() => setCopied(false), 2000);
18+
} catch (err) {
19+
console.error('Failed to copy:', err);
20+
}
21+
};
1122

1223
// Keyboard shortcut to toggle shortcuts help
1324
useEffect(() => {
@@ -188,7 +199,7 @@ export function BottomLeftButtons() {
188199
</button>
189200
</div>
190201
<div className="flex items-center gap-3 text-xs text-slate-500">
191-
<span>
202+
<span className="flex items-center gap-1">
192203
Version:{' '}
193204
<a
194205
href={`https://github.com/cjw6k/tidal-harmonics-visualizer/commit/${__GIT_SHA__}`}
@@ -198,6 +209,21 @@ export function BottomLeftButtons() {
198209
>
199210
{__GIT_SHA__}
200211
</a>
212+
<button
213+
onClick={copyVersionToClipboard}
214+
className="p-0.5 text-slate-600 hover:text-slate-400 transition-colors"
215+
title="Copy SHA to clipboard"
216+
>
217+
{copied ? (
218+
<svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
219+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
220+
</svg>
221+
) : (
222+
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
223+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
224+
</svg>
225+
)}
226+
</button>
201227
</span>
202228
<span>
203229
Made by{' '}

0 commit comments

Comments
 (0)