dev day #80

frontend/src/pages/ArticleDetailPage.tsx

@@ -2,6 +2,7 @@ import { Box, Container, Heading, Image, Spinner, Stack, Text, HStack, Badge, Li
 import { useQuery } from '@tanstack/react-query';
 import { useParams, Link as RouterLink } from 'react-router-dom';
 import { getArticle, getArticleBySlug, getArticleMatchLink, trackArticleView, getArticles } from '../services/articles';
+import { articleRead } from '../services/engagement';
 import MainLayout from '../components/layout/MainLayout';
 import DOMPurify from 'dompurify';
 import { Helmet } from 'react-helmet-async';
@@ -68,6 +69,24 @@ const ArticleDetailPage: React.FC = () => {
     }
   }, [data]);
 
+  // Award engagement for article read after 15s dwell (once per article per device)
+  React.useEffect(() => {
+    const aid = (data as any)?.id;
+    if (!aid) return;
+    let timer: any;
+    const key = `fc_ar_read_${aid}`;
+    const already = (() => { try { return localStorage.getItem(key) === '1'; } catch { return false; } })();
+    if (!already) {
+      timer = setTimeout(async () => {
+        try {
+          await articleRead(Number(aid));
+          try { localStorage.setItem(key, '1'); } catch {}
+        } catch {}
+      }, 15000);
+    }
+    return () => { if (timer) clearTimeout(timer); };
+  }, [(data as any)?.id]);
+
   // Delegated click tracking for normal links inside content
   const contentRef = React.useRef<HTMLDivElement | null>(null);
   React.useEffect(() => {