Make version switcher more obvious

src/app/Analytics.ts

@@ -76,6 +76,12 @@ export namespace Analytics {
 		})
 	}
 
+	export function setSelectedVersion(selected_version: string) {
+		gtag('set', {
+			selected_version,
+		})
+	}
+
 	export function changeVersion(prev_version: string, version: string) {
 		setVersion(version)
 		event(ID_GENERATOR, 'set-version', version)

src/app/Store.ts

@@ -22,7 +22,7 @@ export namespace Store {
 		return localStorage.getItem(ID_THEME) ?? 'dark'
 	}
 
-	export function getVersion(): VersionId {
+	export function getVersionOrDefault(): VersionId {
 		const version = localStorage.getItem(ID_VERSION)
 		if (version && VersionIds.includes(version as VersionId)) {
 			return version as VersionId
@@ -30,6 +30,14 @@ export namespace Store {
 		return '1.19'
 	}
 
+	export function getVersion(): VersionId | null {
+		const version = localStorage.getItem(ID_VERSION)
+		if (version && VersionIds.includes(version as VersionId)) {
+			return version as VersionId
+		}
+		return null
+	}
+
 	export function getIndent() {
 		return localStorage.getItem(ID_INDENT) ?? '2_spaces'
 	}

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'

src/app/contexts/Version.tsx

@@ -25,7 +25,7 @@ export function useVersion() {
 }
 
 export function VersionProvider({ children }: { children: ComponentChildren }) {
-	const [version, setVersion] = useState<VersionId>(Store.getVersion())
+	const [version, setVersion] = useState<VersionId>(Store.getVersionOrDefault())
 
 	const [targetVersion, changeTargetVersion] = useSearchParam(VERSION_PARAM)
 
@@ -49,6 +49,7 @@ export function VersionProvider({ children }: { children: ComponentChildren }) {
 
 	useEffect(() => {
 		Analytics.setVersion(version)
+		Analytics.setSelectedVersion(Store.getVersion() ?? 'default')
 	}, [])
 
 	const value: Version = {

src/app/pages/Generator.tsx

@@ -3,7 +3,7 @@ import { getCurrentUrl, route } from 'preact-router'
 import { useEffect, useErrorBoundary, useMemo, useRef, useState } from 'preact/hooks'
 import config from '../../config.json'
 import { Analytics } from '../Analytics'
-import { Ad, Btn, BtnMenu, ErrorPanel, Footer, HasPreview, Octicon, PreviewPanel, SearchList, SourcePanel, TextInput, Tree } from '../components'
+import { Ad, Btn, BtnMenu, ErrorPanel, Footer, HasPreview, Octicon, PreviewPanel, SearchList, SourcePanel, TextInput, Tree, VersionSwitcher } from '../components'
 import { useLocale, useProject, useTitle, useVersion } from '../contexts'
 import { AsyncCancel, useActiveTimeout, useAsync, useModel, useSearchParam } from '../hooks'
 import { getOutput } from '../schema/transformOutput'
@@ -363,11 +363,7 @@ export function Generator({}: Props) {
 					<BtnMenu icon="archive" label={locale('presets')} relative={false}>
 						<SearchList searchPlaceholder={locale('search')} noResults={locale('no_presets')} values={presets} onSelect={selectPreset}/>
 					</BtnMenu>
-					<BtnMenu icon="tag" label={version} tooltip={locale('switch_version')} data-cy="version-switcher">
-						{allowedVersions.map(v =>
-							<Btn label={v} active={v === version} onClick={() => selectVersion(v)} />
-						)}
-					</BtnMenu>
+					<VersionSwitcher value={version} onChange={selectVersion} allowed={allowedVersions} />
 					<BtnMenu icon="kebab_horizontal" tooltip={locale('more')}>
 						<Btn icon="history" label={locale('reset')} onClick={reset} />
 						<Btn icon="arrow_left" label={locale('undo')} onClick={undo} />

src/app/pages/Guide.tsx

@@ -4,7 +4,7 @@ import { marked } from 'marked'
 import { route } from 'preact-router'
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
 import config from '../../config.json'
-import { Ad, Btn, BtnMenu, ChangelogTag, Footer, Giscus, Octicon } from '../components'
+import { Ad, Btn, ChangelogTag, Footer, Giscus, Octicon, VersionSwitcher } from '../components'
 import { useLocale, useTitle, useVersion } from '../contexts'
 import { useActiveTimeout, useAsync, useHash } from '../hooks'
 import type { VersionId } from '../services'
@@ -50,7 +50,7 @@ export function Guide({ id }: Props) {
 
 	const allowedVersions = useMemo(() => {
 		const orderedVersions = config.versions.map(v => v.id)
-		return (frontMatter?.versions as string[])
+		return (frontMatter?.versions as VersionId[])
 			?.sort((a, b) => orderedVersions.indexOf(b) - orderedVersions.indexOf(a))
 	}, [frontMatter?.versions])
 
@@ -179,10 +179,7 @@ export function Guide({ id }: Props) {
 					{locale('guides.all')}
 				</a>
 				<Btn icon={shareActive ? 'check' : 'link'} label={locale('share')} onClick={onShare} active={shareActive} tooltip={locale(shareActive ? 'copied' : 'copy_share')} class="guide-share" />
-				{allowedVersions && <BtnMenu icon="tag" label={guideVersion} tooltip={locale('switch_version')}>
-					{allowedVersions.map((v: string) => 
-						<Btn label={v} active={v === guideVersion} onClick={() => changeVersion(v as VersionId)} />)}
-				</BtnMenu>}
+				{allowedVersions && <VersionSwitcher value={guideVersion} allowed={allowedVersions} onChange={changeVersion} />}
 			</div>
 			{(frontMatter?.tags && frontMatter.tags.length > 0) && <div class="guide-tags">
 				{frontMatter.tags.map((tag: string) =>

src/app/pages/Guides.tsx

@@ -1,9 +1,7 @@
 import { useMemo, useState } from 'preact/hooks'
-import config from '../../config.json'
-import { Btn, BtnMenu, ChangelogTag, Footer, GuideCard, TextInput } from '../components'
+import { ChangelogTag, Footer, GuideCard, TextInput, VersionSwitcher } from '../components'
 import { useLocale, useTitle, useVersion } from '../contexts'
 import { useTags } from '../hooks/useTags'
-import type { VersionId } from '../services'
 
 interface Guide {
 	id: string,
@@ -54,12 +52,7 @@ export function Guides({}: Props) {
 		<div class="guides">
 			<div class="changelog-query">
 				<TextInput class="btn btn-input changelog-search" placeholder={locale('guides.search')} value={search} onChange={setSearch} />
-				<BtnMenu icon="tag" label={versionFilter ? version : locale('any_version')} tooltip={locale('switch_version')}>
-					<Btn label={locale('any_version')} active={!versionFilter} onClick={() => setVersionFiler(!versionFilter)} />
-					{config.versions.slice().reverse().map(v =>
-						<Btn label={v.id} active={versionFilter && v.id === version} onClick={() => {changeVersion(v.id as VersionId); setVersionFiler(true)}} />
-					)}
-				</BtnMenu>
+				<VersionSwitcher value={versionFilter ? version : undefined} onChange={v => {changeVersion(v); setVersionFiler(true)}} hasAny onAny={() => setVersionFiler(false)} />
 			</div>
 			{activeTags.length > 0 && <div class="changelog-tags">
 				{activeTags.map(tag => <ChangelogTag label={tag} onClick={() => toggleTag(tag)} />)}

src/app/pages/Sounds.tsx

@@ -1,10 +1,8 @@
 import type { Howl, HowlOptions } from 'howler'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import config from '../../config.json'
-import { Btn, BtnMenu, ErrorPanel, Footer, SoundConfig, TextInput } from '../components'
+import { Btn, ErrorPanel, Footer, SoundConfig, TextInput, VersionSwitcher } from '../components'
 import { useLocale, useTitle, useVersion } from '../contexts'
 import { useAsync } from '../hooks'
-import type { VersionId } from '../services'
 import { fetchSounds } from '../services'
 import { hexId } from '../Utils'
 
@@ -71,11 +69,7 @@ export function Sounds({}: Props) {
 				{configs.length > 1 && <Btn icon="play" label={ locale('sounds.play_all')} class="play-all-sounds" onClick={playAll} />}
 				<div class="spacer"></div>
 				<Btn icon="download" label={locale('download')} tooltip={locale('sounds.download_function')} tooltipLoc="se" class="download-sounds" onClick={downloadFunction} />
-				<BtnMenu icon="tag" label={version} tooltip={locale('switch_version')}>
-					{config.versions.slice().reverse().map(v =>
-						<Btn label={v.id} active={v.id === version} onClick={() => changeVersion(v.id as VersionId)} />
-					)}
-				</BtnMenu>
+				<VersionSwitcher value={version} onChange={changeVersion} />
 			</div>
 			<div class="sounds">
 				{sounds && howler && configs.map(c =>

src/styles/global.css

@@ -654,6 +654,32 @@ main.has-preview {
 	border-bottom-right-radius: 6px;
 }
 
+.version-switcher > .btn {
+	background-color: #307328;
+}
+
+.version-switcher > .btn:hover {
+	background-color: #296422;
+}
+
+.version-switcher.attention > .btn {
+	outline: 2px solid transparent;
+	animation: outline-grow 2s ease-out 1s 4 forwards;
+}
+
+@keyframes outline-grow {
+	0% {
+		outline-offset: 0px;
+		outline-width: 2px;
+		outline-color: #307328;
+	}
+	50%, 100% {
+		outline-offset: 10px;
+		outline-width: 0px;
+		outline-color: transparent;
+	}
+}
+
 .popup-actions {
 	display: flex;
 	position: fixed;