Add a copy button to the article title

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/Article.js

@@ -12,6 +12,7 @@ function Article({ cache }) {
 	const [story, setStory] = useState(cache[id] || false);
 	const [error, setError] = useState('');
 	const [pConv, setPConv] = useState([]);
+	const [copyButtonText, setCopyButtonText] = useState('\ue92c');
 
 	useEffect(() => {
 		localForage.getItem(id)
@@ -42,6 +43,16 @@ function Article({ cache }) {
 			);
 	}, [id]);
 
+	const copyLink = () => {
+		navigator.clipboard.writeText(`${story.title}:\n${window.location.href}`).then(() => {
+			setCopyButtonText('\uea10');
+			setTimeout(() => setCopyButtonText('\ue92c'), 2000);
+		}, () => {
+			setCopyButtonText('\uea0f');
+			setTimeout(() => setCopyButtonText('\ue92c'), 2000);
+		});
+	};
+
 	const pConvert = (n) => {
 		setPConv(prevPConv => [...prevPConv, n]);
 	};
@@ -71,7 +82,7 @@ function Article({ cache }) {
 						<meta name="robots" content="noindex" />
 					</Helmet>
 
-					<h1>{story.title}</h1>
+					<h1>{story.title} <button className='copy-button' onClick={copyLink}>{copyButtonText}</button></h1>
 
 					<div className='info'>
 						Source: {sourceLink(story)}

webclient/src/Feed.js

@@ -101,7 +101,7 @@ function Feed({ updateCache }) {
 				<title>QotNews</title>
 				<meta name="robots" content="index" />
 			</Helmet>
-			{loadingStatus && <p>Fetching stories {loadingStatus.current} / {loadingStatus.total}...</p>}
+			{loadingStatus && <p>Preloading stories {loadingStatus.current} / {loadingStatus.total}...</p>}
 			{error &&
 				<details style={{marginBottom: '1rem'}}>
 					<summary>Connection error? Click to expand.</summary>

webclient/src/Style-light.css

@@ -121,6 +121,13 @@ span.source {
 	border-bottom: 1px solid #222222;
 }
 
+.article-title {
+	display: flex;
+	align-items: center;
+	margin-top: 0.67em;
+	margin-bottom: 0.67em;
+}
+
 .article h1 {
 	font-size: 1.6rem;
 }
@@ -260,3 +267,11 @@ span.source {
 .search form {
 	display: inline;
 }
+
+.copy-button {
+	font: 1.5rem/1 'icomoon2';
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	vertical-align: middle;
+}

webclient/src/fonts/Fonts.css

@@ -26,3 +26,8 @@
     font-family: 'Icomoon';
     src: url('icomoon.ttf') format('truetype');
 }
+
+@font-face {
+    font-family: 'Icomoon2';
+    src: url('icomoon2.ttf') format('truetype');
+}