Process 1 build 0203261953

frontend/app/changelog/page.tsx

@@ -8,15 +8,42 @@ type SiteInfo = {
   changelog?: string
 }
 
-const parseChangelog = (raw: string) =>
-  raw
-    .split('\n')
-    .map((line) => line.trim())
-    .filter(Boolean)
+type ChangelogGroup = {
+  date: string
+  entries: string[]
+}
+
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/
+
+const parseChangelog = (raw: string): ChangelogGroup[] => {
+  const groups: ChangelogGroup[] = []
+  for (const rawLine of raw.split('\n')) {
+    const line = rawLine.trim()
+    if (!line) continue
+    const [candidateDate, ...messageParts] = line.split('|')
+    if (DATE_PATTERN.test(candidateDate) && messageParts.length > 0) {
+      const message = messageParts.join('|').trim()
+      if (!message) continue
+      const currentGroup = groups[groups.length - 1]
+      if (currentGroup?.date === candidateDate) {
+        currentGroup.entries.push(message)
+      } else {
+        groups.push({ date: candidateDate, entries: [message] })
+      }
+      continue
+    }
+    if (groups.length === 0) {
+      groups.push({ date: 'Updates', entries: [line] })
+    } else {
+      groups[groups.length - 1].entries.push(line)
+    }
+  }
+  return groups
+}
 
 export default function ChangelogPage() {
   const router = useRouter()
-  const [entries, setEntries] = useState<string[]>([])
+  const [groups, setGroups] = useState<ChangelogGroup[]>([])
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -40,11 +67,11 @@ export default function ChangelogPage() {
         }
         const data: SiteInfo = await response.json()
         if (!active) return
-        setEntries(parseChangelog(data?.changelog ?? ''))
+        setGroups(parseChangelog(data?.changelog ?? ''))
       } catch (err) {
         console.error(err)
         if (!active) return
-        setEntries([])
+        setGroups([])
       } finally {
         if (active) setLoading(false)
       }
@@ -59,17 +86,24 @@ export default function ChangelogPage() {
     if (loading) {
       return <div className="loading-text">Loading changelog...</div>
     }
-    if (entries.length === 0) {
+    if (groups.length === 0) {
       return <div className="meta">No updates posted yet.</div>
     }
     return (
-      <ul className="changelog-list">
-        {entries.map((entry, index) => (
-          <li key={`${entry}-${index}`}>{entry}</li>
+      <div className="changelog-groups">
+        {groups.map((group) => (
+          <section key={group.date} className="changelog-group">
+            <h2>{group.date}</h2>
+            <ul className="changelog-list">
+              {group.entries.map((entry, index) => (
+                <li key={`${group.date}-${entry}-${index}`}>{entry}</li>
+              ))}
+            </ul>
+          </section>
         ))}
-      </ul>
+      </div>
     )
-  }, [entries, loading])
+  }, [groups, loading])
 
   return (
     <div className="page">