adds fen export on copy button

src/components/react/ChessStudy.tsx

@@ -271,6 +271,14 @@ export const ChessStudy = ({
 							})
 						}
 						onSaveButtonClick={onSaveButtonClick}
+						onCopyButtonClick={() => {
+							try {
+								navigator.clipboard.writeText(chessLogic.fen())
+								new Notice('Copied to clipboard!');
+							} catch (e) {
+								new Notice('Could not copy to clipboard:', e);
+							}
+						}}
 					/>
 				</div>
 			</div>

src/components/react/PgnViewer/index.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeft, ArrowRight, Save } from 'lucide-react';
+import { ArrowLeft, ArrowRight, Copy, Save, Undo2 } from 'lucide-react';
 import * as React from 'react';
 import { ReactNode, useEffect, useMemo, useRef } from 'react';
 import { ChessStudyMove } from 'src/lib/storage';
@@ -112,6 +112,7 @@ export const PgnViewer = React.memo(
 		onForwardButtonClick,
 		onMoveItemClick,
 		onSaveButtonClick,
+		onCopyButtonClick,
 	}: {
 		history: ChessStudyMove[];
 		currentMoveId: string;
@@ -119,6 +120,7 @@ export const PgnViewer = React.memo(
 		onForwardButtonClick: () => void;
 		onMoveItemClick: (moveId: string) => void;
 		onSaveButtonClick: () => void;
+		onCopyButtonClick: () => void;
 	}) => {
 		const movePairs = useMemo(() => chunkArray(history, 2), [history]);
 
@@ -268,15 +270,23 @@ export const PgnViewer = React.memo(
 					</div>
 				</div>
 				<div className="button-section">
+					<button onClick={() => onBackButtonClick()}>
+						<Undo2 />
+					</button>
 					<button onClick={() => onBackButtonClick()}>
 						<ArrowLeft />
 					</button>
 					<button onClick={() => onForwardButtonClick()}>
 						<ArrowRight />
 					</button>
+				</div>
+				<div className="button-section">
 					<button onClick={() => onSaveButtonClick()}>
 						<Save strokeWidth={'1px'} />
 					</button>
+					<button onClick={() => onCopyButtonClick()}>
+						<Copy strokeWidth={'1px'} />
+					</button>
 				</div>
 			</div>
 		);

src/main.css

@@ -78,7 +78,7 @@
 /* PGN Viewer */
 
 .chess-study .move-item-section {
-	height: 415px;
+	height: 380px;
 }
 
 .chess-study .button-section {
@@ -97,7 +97,7 @@
 	grid-template-columns: 0.15fr 0.425fr 0.425fr;
 	grid-auto-rows: minmax(30px, auto);
 	width: 100%;
-	max-height: 415px;
+	max-height: 380px;
 	overflow-y: scroll;
 }