Add fixed bugs tab to versions

src/app/components/versions/Issue.tsx

@@ -0,0 +1,15 @@
+import type { Bugfix } from '../../services/DataFetcher.js'
+import { Badge } from '../Badge.jsx'
+import { Card } from '../Card.jsx'
+
+interface Props {
+	fix: Bugfix
+}
+export function Issue({ fix }: Props) {
+	return <Card overlay={fix.id} link={`https://bugs.mojang.com/browse/${fix.id}`}>
+		<div class="changelog-content">{fix.summary}</div>
+		<div class="badges-list">
+			{fix.categories.map(c => <Badge label={c} />)}
+		</div>
+	</Card>
+}

src/app/components/versions/IssueList.tsx

@@ -0,0 +1,23 @@
+import { useLocale } from '../../contexts/Locale.jsx'
+import { useAsync } from '../../hooks/useAsync.js'
+import { fetchBugfixes } from '../../services/DataFetcher.js'
+import type { VersionId } from '../../services/Schemas.js'
+import { Issue } from './Issue.jsx'
+
+interface Props {
+	version: string
+}
+export function IssueList({ version }: Props) {
+	const { locale } = useLocale()
+	const { value: issues, loading } = useAsync(() => fetchBugfixes(version as VersionId), [version])
+
+	return <div class="card-column">
+		{issues === undefined || loading ? <>
+			<span class="note">{locale('loading')}</span>
+		</> : issues.length === 0 ? <>
+			<span class="note">{locale('versions.fixes.no_results')}</span>
+		</> : <>
+			{issues?.map(issue => <Issue key={issue.id} fix={issue} />)}
+		</>}
+	</div>
+}

src/app/components/versions/VersionDetail.tsx

@@ -1,14 +1,15 @@
-import { useMemo, useState } from 'preact/hooks'
+import { useEffect, useMemo } from 'preact/hooks'
 import { useLocale } from '../../contexts/index.js'
 import { useAsync } from '../../hooks/useAsync.js'
+import { useSearchParam } from '../../hooks/useSearchParam.js'
 import type { VersionMeta } from '../../services/index.js'
 import { fetchChangelogs, getArticleLink } from '../../services/index.js'
 import { Giscus } from '../Giscus.js'
 import { Octicon } from '../Octicon.js'
 import { ChangelogList } from './ChangelogList.js'
-import { VersionMetaData } from './index.js'
+import { IssueList, VersionMetaData } from './index.js'
 
-type Tab = 'changelog' | 'discussion' 
+const Tabs = ['changelog', 'discussion', 'fixes']
 
 interface Props {
 	id: string,
@@ -17,7 +18,12 @@ interface Props {
 export function VersionDetail({ id, version }: Props) {
 	const { locale } = useLocale()
 
-	const [tab, setTab] = useState<Tab>('changelog')
+	const [tab, setTab] = useSearchParam('tab')
+	useEffect(() => {
+		if (tab === undefined || !Tabs.includes(tab)) {
+			setTab(Tabs[0])
+		}
+	}, [tab])
 
 	const { value: changes } = useAsync(fetchChangelogs, [])
 
@@ -47,6 +53,7 @@ export function VersionDetail({ id, version }: Props) {
 			<div class="version-tabs">
 				<span class={tab === 'changelog' ? 'selected' : ''} onClick={() => setTab('changelog')}>{locale('versions.technical_changes')}</span>
 				<span class={tab === 'discussion' ? 'selected' : ''} onClick={() => setTab('discussion')}>{locale('versions.discussion')}</span>
+				<span class={tab === 'fixes' ? 'selected' : ''} onClick={() => setTab('fixes')}>{locale('versions.fixes')}</span>
 				{articleLink && <a href={articleLink} target="_blank">
 					{locale('versions.article')}
 					{Octicon.link_external}
@@ -55,6 +62,7 @@ export function VersionDetail({ id, version }: Props) {
 			<div class="version-tab">
 				{tab === 'changelog' && <ChangelogList changes={filteredChangelogs} defaultOrder="asc" />}
 				{tab === 'discussion' && <Giscus term={`version/${id}/`} />}
+				{tab === 'fixes' && <IssueList version={id} />}
 			</div>
 		</div>
 	</>

src/app/components/versions/index.ts

@@ -1,6 +1,7 @@
 export * from '../Badge.jsx'
 export * from './ChangelogEntry.js'
 export * from './ChangelogList.js'
+export * from './IssueList.jsx'
 export * from './VersionDetail.js'
 export * from './VersionEntry.js'
 export * from './VersionList.js'