Add "new" badge and store seen state

src/app/components/whatsnew/WhatsNewEntry.tsx

@@ -0,0 +1,16 @@
+import { marked } from 'marked'
+import type { WhatsNewItem } from '../../services/DataFetcher.js'
+import { WhatsNewTime } from './WhatsNewTime.jsx'
+
+interface EntryProps {
+	item: WhatsNewItem,
+}
+export function WhatsNewEntry({ item }: EntryProps) {
+	return <article class="whats-new-entry">
+		<a href={item.url} target="_blank">
+			<WhatsNewTime item={item} />
+			<h2>{item.title}</h2>
+		</a>
+		<div class="guide-content" dangerouslySetInnerHTML={{ __html: marked(item.body) }} />
+	</article>
+}

src/app/components/whatsnew/WhatsNewTime.tsx

@@ -0,0 +1,14 @@
+import { useLocale } from '../../contexts/Locale.jsx'
+import type { WhatsNewItem } from '../../services/DataFetcher.js'
+
+interface Props {
+	item: WhatsNewItem,
+	short?: boolean,
+}
+export function WhatsNewTime({ item, short }: Props) {
+	const { locale } = useLocale()
+	return <time dateTime={item.createdAt} title={Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(new Date(item.createdAt))}>
+		{(!short || item.seenAt !== undefined) && Intl.DateTimeFormat(undefined, { day: 'numeric',month: 'long', year: 'numeric' }).format(new Date(item.createdAt))}
+		{item.seenAt === undefined && <span class="new-badge">{locale('whats_new.new')}</span>}
+	</time>
+}

src/app/components/whatsnew/index.ts

@@ -0,0 +1,2 @@
+export * from './WhatsNewEntry.jsx'
+export * from './WhatsNewTime.jsx'