Don't show all versions by default + version ranges

src/app/Config.ts

@@ -1,4 +1,5 @@
 import config from '../config.json'
+import type { VersionId } from './services/Schemas.js'
 
 export interface ConfigLanguage {
 	code: string,
@@ -7,9 +8,11 @@ export interface ConfigLanguage {
 }
 
 export interface ConfigVersion {
-	id: string,
+	id: VersionId,
 	pack_format: number,
+	name: string,
 	ref?: string,
+	show?: boolean,
 	dynamic?: boolean,
 }
 

src/app/components/VersionSwitcher.tsx

@@ -1,8 +1,8 @@
-import { useMemo } from 'preact/hooks'
+import { useMemo, useState } from 'preact/hooks'
 import config from '../Config.js'
+import { Store } from '../Store.js'
 import { useLocale } from '../contexts/index.js'
 import type { VersionId } from '../services/index.js'
-import { Store } from '../Store.js'
 import { Btn } from './Btn.js'
 import { BtnMenu } from './BtnMenu.js'
 
@@ -16,16 +16,29 @@ interface Props {
 export function VersionSwitcher({ value, allowed, hasAny, onChange, onAny }: Props) {
 	const { locale } = useLocale()
 
+	const [showMore, setShowMore] = useState(false)
+
 	const versions = useMemo(() => {
-		if (allowed) return allowed
-		return config.versions
-			.map(v => v.id as VersionId)
-			.reverse()
+		if (allowed) {
+			return allowed
+				.map(a => config.versions.find(v => v.id === a)!)
+				.filter(v => v !== undefined)
+		}
+		return [...config.versions].reverse()
 	}, [allowed])
 
+	const hasMoreVersions = useMemo(() => {
+		return versions.some(v => !(v.show || v.id === value))
+	}, [])
+
+	const shownVersions = useMemo(() => {
+		return versions.filter(v => v.show || v.id === value || showMore)
+	}, [versions, showMore, value])
+
 	return <BtnMenu class={`version-switcher${Store.getVersion() === null ? ' attention' : ''}`} icon="tag" label={value ?? locale('any_version')} tooltip={locale('switch_version')}>
 		{hasAny && <Btn label={locale('any_version')} onClick={onAny} active={!value} />}
-		{versions.map((v: string) => 
-			<Btn label={v} active={v === value} onClick={() => onChange(v as VersionId)} />)}
+		{shownVersions.map(v => 
+			<Btn label={v.name} active={v.id === value} onClick={() => onChange(v.id)} />)}
+		{!showMore && hasMoreVersions && <Btn icon="chevron_down" label="More" onClick={e => {setShowMore(true);e.stopPropagation()}} />}
 	</BtnMenu>
 }

src/app/components/generator/GeneratorCard.tsx

@@ -1,10 +1,10 @@
 import { useMemo } from 'preact/hooks'
 import type { ConfigGenerator } from '../../Config.js'
 import config from '../../Config.js'
+import { cleanUrl } from '../../Utils.js'
 import { useLocale } from '../../contexts/Locale.jsx'
 import type { VersionId } from '../../services/Schemas.js'
 import { checkVersion } from '../../services/Schemas.js'
-import { cleanUrl } from '../../Utils.js'
 import { Badge, Card, Icons, ToolCard } from '../index.js'
 
 const VERSION_SEP = ' • '
@@ -39,6 +39,8 @@ export function GeneratorCard({ id, minimal }: Props) {
 			.map(v => v.id as VersionId)
 	}, [gen])
 
+	console.log(config.versions)
+
 	const versionText = useMemo(() => {
 		if (versions.length <= 5) {
 			return versions.join(VERSION_SEP)

src/config.json

@@ -59,57 +59,74 @@
     {
       "id": "1.15",
       "ref": "1.15.2",
+      "name": "1.15 — 1.15.2",
       "pack_format": 5
     },
     {
       "id": "1.16",
       "ref": "1.16.5",
+      "name": "1.16 — 1.16.5",
       "pack_format": 6
     },
     {
       "id": "1.17",
       "ref": "1.17.1",
+      "name": "1.17 — 1.17.1",
       "pack_format": 7
     },
     {
       "id": "1.18",
       "ref": "1.18.1",
+      "name": "1.18 — 1.18.1",
       "pack_format": 8
     },
     {
       "id": "1.18.2",
       "ref": "1.18.2",
-      "pack_format": 9
+      "name": "1.18.2",
+      "pack_format": 9,
+      "show": true
     },
     {
       "id": "1.19",
       "ref": "1.19.2",
-      "pack_format": 10
+      "name": "1.19 — 1.19.2",
+      "pack_format": 10,
+      "show": true
     },
     {
       "id": "1.19.3",
       "ref": "1.19.3",
+      "name": "1.19.3",
       "pack_format": 10
     },
     {
       "id": "1.19.4",
       "ref": "1.19.4",
-      "pack_format": 12
+      "name": "1.19.4",
+      "pack_format": 12,
+      "show": true
     },
     {
       "id": "1.20",
       "ref": "1.20.1",
-      "pack_format": 15
+      "name": "1.20 — 1.20.1",
+      "pack_format": 15,
+      "show": true
     },
     {
       "id": "1.20.2",
       "ref": "1.20.2",
-      "pack_format": 18
+      "name": "1.20.2",
+      "pack_format": 18,
+      "show": true
     },
     {
       "id": "1.20.3",
       "ref": "1.20.3",
-      "pack_format": 26
+      "name": "1.20.3",
+      "pack_format": 26,
+      "show": true
     }
   ],
   "generators": [