From 42e8da47f7542034e324e0458c728a91c15ee12b Mon Sep 17 00:00:00 2001
From: Misode <misoloo64@gmail.com>
Date: Wed, 7 Jun 2023 19:44:38 +0200
Subject: [PATCH] Special support for obsolete tags

---
 src/app/components/Badge.tsx                  | 10 ++++++++--
 src/app/components/Octicon.tsx                |  1 +
 src/app/components/versions/VersionDetail.tsx |  2 +-
 src/locales/en.json                           |  1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Badge.tsx b/src/app/components/Badge.tsx
index c70b1db4..979ce720 100644
--- a/src/app/components/Badge.tsx
+++ b/src/app/components/Badge.tsx
@@ -1,4 +1,5 @@
 import { hashString } from '../Utils.js'
+import { useLocale } from '../contexts/Locale.jsx'
 import { Octicon } from './index.js'
 
 interface Props {
@@ -7,9 +8,14 @@ interface Props {
 	onClick?: (e: MouseEvent) => unknown,
 }
 export function Badge({ label, active, onClick }: Props) {
-	const color = label === 'breaking' ? 5 : hashString(label) % 360
-	return <div class={`badge${active ? ' active' : ''}${onClick ? ' clickable' : ''}`} style={`--tint: ${color}`} onClick={onClick}>
+	const { locale } = useLocale()
+	const color = {
+		breaking: 5,
+		obsolete: 340,
+	}[label] ?? (hashString(label) % 360)
+	return <div class={`badge${active ? ' active' : ''}${onClick ? ' clickable' : ''}${label === 'obsolete' ? ' tooltipped tip-se' : ''}`} style={`--tint: ${color}`} onClick={onClick} aria-label={{ obsolete: locale('change.obsolete') }[label]}>
 		{label === 'breaking' && Octicon.alert}
+		{label === 'obsolete' && Octicon.circle_slash}
 		{label}
 	</div>
 }
diff --git a/src/app/components/Octicon.tsx b/src/app/components/Octicon.tsx
index a997264b..1e0ef8bf 100644
--- a/src/app/components/Octicon.tsx
+++ b/src/app/components/Octicon.tsx
@@ -9,6 +9,7 @@ export const Octicon = {
 	chevron_left: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"></path></svg>,
 	chevron_right: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"></path></svg>,
 	chevron_up: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.22 9.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L8 6.06 4.28 9.78a.75.75 0 01-1.06 0z"></path></svg>,
+	circle_slash: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM3.965 13.096a6.5 6.5 0 0 0 9.131-9.131ZM1.5 8a6.474 6.474 0 0 0 1.404 4.035l9.131-9.131A6.499 6.499 0 0 0 1.5 8Z"></path></svg>,
 	clippy: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>,
 	code: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z"></path></svg>,
 	codescan_checkmark: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M10.28 6.28a.75.75 0 10-1.06-1.06L6.25 8.19l-.97-.97a.75.75 0 00-1.06 1.06l1.5 1.5a.75.75 0 001.06 0l3.5-3.5z"></path><path fill-rule="evenodd" d="M7.5 15a7.469 7.469 0 004.746-1.693l2.474 2.473a.75.75 0 101.06-1.06l-2.473-2.474A7.5 7.5 0 107.5 15zm0-13.5a6 6 0 104.094 10.386.75.75 0 01.293-.292A6 6 0 007.5 1.5z"></path></svg>,
diff --git a/src/app/components/versions/VersionDetail.tsx b/src/app/components/versions/VersionDetail.tsx
index 38ef42ed..662a18c9 100644
--- a/src/app/components/versions/VersionDetail.tsx
+++ b/src/app/components/versions/VersionDetail.tsx
@@ -28,7 +28,7 @@ export function VersionDetail({ id, version }: Props) {
 	const { value: changes } = useAsync(fetchChangelogs, [])
 
 	const filteredChangelogs = useMemo(() =>
-		changes?.filter(c => c.version === id || c.group === id),
+		changes?.filter(c => c.version === id || (c.group === id && !c.tags.includes('obsolete'))),
 	[id, changes])
 
 	const articleLink = version && getArticleLink(version.id)
diff --git a/src/locales/en.json b/src/locales/en.json
index 139fe1ad..664ca374 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -10,6 +10,7 @@
   "atlas": "Atlas",
   "back": "Back",
   "block_definition": "Blockstate",
+  "change.obsolete": "This change has been replaced by a later change in this release cycle",
   "changelog": "Technical changelog",
   "changelog.search": "Search changes",
   "changelog.no_results": "No documented changes",