Add "new" badge and store seen state

src/app/pages/Home.tsx

@@ -3,6 +3,7 @@ import contributors from '../../contributors.json'
 import { Store } from '../Store.js'
 import { shuffle } from '../Utils.js'
 import { Card, ChangelogEntry, Footer, GeneratorCard, Giscus, GuideCard, ToolCard, ToolGroup } from '../components/index.js'
+import { WhatsNewTime } from '../components/whatsnew/WhatsNewTime.jsx'
 import { useLocale, useTitle } from '../contexts/index.js'
 import { useAsync } from '../hooks/useAsync.js'
 import { useMediaQuery } from '../hooks/useMediaQuery.js'
@@ -26,14 +27,15 @@ export function Home({}: Props) {
 				<div class="card-column">
 					<PopularGenerators />
 					{smallScreen && <FavoriteGenerators />}
+					{smallScreen && <WhatsNew />}
 					<Changelog />
 					{smallScreen && <Guides />}
 					<Versions />
 					{smallScreen && <Tools />}
-					<WhatsNew />
 				</div>
 				{!smallScreen && <div class="card-column">
 					<FavoriteGenerators />
+					<WhatsNew />
 					<Guides />
 					<Tools />
 				</div>}
@@ -142,7 +144,7 @@ function WhatsNew() {
 	const { value: items } = useAsync(fetchWhatsNew)
 
 	return <ToolGroup title={locale('whats_new')} link="/whats-new/" titleIcon="megaphone">
-		{items?.slice(0, 3).map(item => <Card overlay={Intl.DateTimeFormat(undefined, { day: 'numeric',month: 'long', year: 'numeric' }).format(new Date(item.createdAt))}>{item.title}</Card>)}
+		{items?.slice(0, 3).map(item => <Card link="/whats-new/" overlay={<WhatsNewTime item={item} short={true} />}>{item.title}</Card>)}
 	</ToolGroup>
 }
 

src/app/pages/WhatsNew.tsx

@@ -1,8 +1,10 @@
-import { marked } from 'marked'
+import { useEffect } from 'preact/hooks'
+import { Store } from '../Store.js'
 import { ErrorPanel, Footer } from '../components/index.js'
+import { WhatsNewEntry } from '../components/whatsnew/WhatsNewEntry.jsx'
 import { useLocale, useTitle } from '../contexts/index.js'
+import { useActiveTimeout } from '../hooks/useActiveTimout.js'
 import { useAsync } from '../hooks/useAsync.js'
-import type { WhatsNewItem } from '../services/DataFetcher.js'
 import { fetchWhatsNew } from '../services/DataFetcher.js'
 
 interface Props {
@@ -14,6 +16,18 @@ export function WhatsNew({}: Props) {
 
 	const { value: items, error } = useAsync(fetchWhatsNew)
 
+	const [storeTime, startStoreTime] = useActiveTimeout()
+	useEffect(() => {
+		if (items !== undefined) {
+			startStoreTime()
+		}
+	}, [items])
+	useEffect(() => {
+		if (items !== undefined && storeTime) {
+			Store.seeWhatsNew(items.map(i => i.id))
+		}
+	}, [items, storeTime])
+
 	return <main>
 		<div class="container whats-new">
 			<p>{locale('whats_new.description')}</p>
@@ -23,16 +37,3 @@ export function WhatsNew({}: Props) {
 		<Footer />
 	</main>
 }
-
-interface EntryProps {
-	item: WhatsNewItem,
-}
-function WhatsNewEntry({ item }: EntryProps) {
-	return <article class="whats-new-entry">
-		<a href={item.url} target="_blank">
-			<time dateTime={item.createdAt} title={Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(new Date(item.createdAt))}>{Intl.DateTimeFormat(undefined, { day: 'numeric',month: 'long', year: 'numeric' }).format(new Date(item.createdAt))}</time>
-			<h2>{item.title}</h2>
-		</a>
-		<div class="guide-content" dangerouslySetInnerHTML={{ __html: marked(item.body) }} />
-	</article>
-}