Open History to see the last commit
1import { useRef } from "react";
2
3import { APP_VERSION } from "../../branding";
4import { useCopyToClipboard } from "../../hooks/useCopyToClipboard";
5import { showAnchoredCopySuccessToast } from "../ui/anchoredCopyToast";
6import { InlineButton } from "../ui/button";
7import { stackedThreadToast, toastManager } from "../ui/toast";
8import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
9
10export function AboutVersionTitle() {
11 const copyButtonRef = useRef<HTMLButtonElement>(null);
12 const { copyToClipboard } = useCopyToClipboard<void>({
13 target: "version",
14 onCopy: () => showAnchoredCopySuccessToast(copyButtonRef),
15 onError: (error) => {
16 toastManager.add(
17 stackedThreadToast({
18 type: "error",
19 title: "Could not copy version",
20 description: error.message,
21 }),
22 );
23 },
24 });
25
26 return (
27 <span className="inline-flex items-baseline gap-2">
28 <span>Version</span>
29 <code className="text-2xs font-medium">
30 <Tooltip>
31 <TooltipTrigger
32 render={
33 <InlineButton
34 ref={copyButtonRef}
35 tone="muted"
36 aria-label={`Copy version ${APP_VERSION}`}
37 onClick={() => copyToClipboard(APP_VERSION, undefined)}
38 >
39 {APP_VERSION}
40 </InlineButton>
41 }
42 />
43 <TooltipPopup>Copy version</TooltipPopup>
44 </Tooltip>
45 </code>
46 </span>
47 );
48}