Make version switcher more obvious

src/app/components/BtnMenu.tsx

@@ -15,7 +15,7 @@ export function BtnMenu(props: BtnMenuProps) {
 	const { icon, label, relative, tooltip, tooltipLoc, children } = props
 	const [active, setActive] = useFocus()
 
-	return <div class={`btn-menu${relative === false ? ' no-relative' : ''}`} {...props}>
+	return <div {...props} class={`btn-menu${relative === false ? ' no-relative' : ''} ${props.class}`}>
 		<Btn {...{icon, label, tooltip, tooltipLoc}} onClick={setActive} />
 		{active && <div class="btn-group">
 			{children}

src/app/components/VersionSwitcher.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'preact/hooks'
+import config from '../../config.json'
+import { useLocale } from '../contexts'
+import type { VersionId } from '../services'
+import { Store } from '../Store'
+import { Btn } from './Btn'
+import { BtnMenu } from './BtnMenu'
+
+interface Props {
+	value?: VersionId,
+	allowed?: VersionId[],
+	hasAny?: boolean,
+	onChange: (version: VersionId) => void,
+	onAny?: () => void,
+}
+export function VersionSwitcher({ value, allowed, hasAny, onChange, onAny }: Props) {
+	const { locale } = useLocale()
+
+	const versions = useMemo(() => {
+		if (allowed) return allowed
+		return config.versions
+			.map(v => v.id as VersionId)
+			.reverse()
+	}, [allowed])
+
+	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)} />)}
+	</BtnMenu>
+}

src/app/components/index.ts

@@ -16,3 +16,4 @@ export * from './sounds'
 export * from './ToolCard'
 export * from './TreeView'
 export * from './versions'
+export * from './VersionSwitcher'