Add tooltips to all buttons and tweak hover colors

src/app/components/Btn.tsx

@@ -4,11 +4,13 @@ type BtnProps = {
 	icon?: keyof typeof Octicon,
 	label?: string,
 	active?: boolean,
+	tooltip?: string,
+	tooltipLoc?: 'se' | 'sw' | 'nw',
 	class?: string,
 	onClick?: (event: MouseEvent) => unknown,
 }
-export function Btn({ icon, label, active, class: class_, onClick }: BtnProps) {
-	return <div class={`btn${active ? ' active' : ''}${class_ ? ` ${class_}` : ''}`} onClick={onClick}>
+export function Btn({ icon, label, active, class: clazz, tooltip, tooltipLoc, onClick }: BtnProps) {
+	return <div class={`btn${active ? ' active' : ''}${clazz ? ` ${clazz}` : ''}${tooltip ? ` tooltipped tip-${tooltipLoc ?? 'sw'}` : ''}`} onClick={onClick} aria-label={tooltip}>
 		{icon && Octicon[icon]}
 		{label && <span>{label}</span>}
 	</div>

src/app/components/BtnInput.tsx

@@ -7,9 +7,10 @@ type BtnInputProps = {
 	large?: boolean,
 	doSelect?: number,
 	value?: string,
+	placeholder?: string,
 	onChange?: (value: string) => unknown,
 }
-export function BtnInput({ icon, label, large, doSelect, value, onChange }: BtnInputProps) {
+export function BtnInput({ icon, label, large, doSelect, value, placeholder, onChange }: BtnInputProps) {
 	const onInput = onChange === undefined ? () => {} : (e: any) => {
 		const value = (e.target as HTMLInputElement).value
 		onChange?.(value)
@@ -25,6 +26,6 @@ export function BtnInput({ icon, label, large, doSelect, value, onChange }: BtnI
 	return <div class={`btn btn-input ${large ? 'large-input' : ''}`} onClick={e => e.stopPropagation()}>
 		{icon && Octicon[icon]}
 		{label && <span>{label}</span>}
-		<input ref={ref} type="text" value={value} onChange={onInput} />
+		<input ref={ref} type="text" value={value} onChange={onInput} placeholder={placeholder} />
 	</div>
 }

src/app/components/BtnMenu.tsx

@@ -7,13 +7,14 @@ type BtnMenuProps = {
 	icon?: keyof typeof Octicon,
 	label?: string,
 	relative?: boolean,
+	tooltip?: string,
 	children: ComponentChildren,
 }
-export function BtnMenu({ icon, label, relative, children }: BtnMenuProps) {
+export function BtnMenu({ icon, label, relative, tooltip, children }: BtnMenuProps) {
 	const [active, setActive] = useFocus()
 
 	return <div class={`btn-menu${relative === false ? ' no-relative' : ''}`}>
-		<Btn icon={icon} label={label} onClick={setActive} />
+		<Btn {...{icon, label, tooltip}} onClick={setActive} />
 		{active && <div class="btn-group">
 			{children}
 		</div>}

src/app/components/Header.tsx

@@ -27,9 +27,9 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 
 	return <header>
 		<div class="title">
-			<Link class="home-link" href="/">{Icons.home}</Link>
+			<Link class="home-link" href="/" aria-label={loc('home')}>{Icons.home}</Link>
 			<h2>{title}</h2>
-			{gen && <BtnMenu icon="chevron_down">
+			{gen && <BtnMenu icon="chevron_down" tooltip={loc('switch_generator')}>
 				{config.generators
 					.filter(g => g.category === gen?.category && checkVersion(version, g.minVersion))
 					.map(g =>
@@ -40,7 +40,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 		<nav>
 			<ul>
 				<li>
-					<BtnMenu icon="globe">
+					<BtnMenu icon="globe" tooltip={loc('language')}>
 						{config.languages.map(({ code, name }) =>
 							<Btn label={name} active={code === language}
 								onClick={() => changeLanguage(code)} />
@@ -48,7 +48,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 					</BtnMenu>
 				</li>
 				<li>
-					<BtnMenu icon={Themes[theme]}>
+					<BtnMenu icon={Themes[theme]} tooltip={loc('theme')}>
 						{Object.entries(Themes).map(([th, icon]) =>
 							<Btn icon={icon} label={loc(`theme.${th}`)} active={th === theme}
 								onClick={() => changeTheme(th)} />
@@ -56,7 +56,7 @@ export function Header({ lang, title, version, theme, changeTheme, language, cha
 					</BtnMenu>
 				</li>
 				<li class="dimmed">
-					<a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer" title={loc('github')}>
+					<a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer" class="tooltipped tip-sw" aria-label={loc('github')}>
 						{Octicon.mark_github}
 					</a>
 				</li>

src/app/components/SourcePanel.tsx

@@ -37,7 +37,7 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 	const getOutput = useCallback((model: DataModel, blockStates: BlockStateRegistry) => {
 		const data = model.schema.hook(transformOutput, new ModelPath(model), model.data, { blockStates })
 		return JSON.stringify(data, null, INDENT[indent]) + '\n'
-	}, [])
+	}, [indent])
 
 	useEffect(() => {
 		retransform.current = () => {
@@ -109,7 +109,7 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 
 	return <> 
 		<div class="controls">
-			<BtnMenu icon="gear">
+			<BtnMenu icon="gear" tooltip={loc('output_settings')}>
 				{Object.entries(INDENT).map(([key]) =>
 					<Btn label={loc(`indentation.${key}`)} active={indent === key}
 						onClick={() => changeIndent(key)}/>

src/app/components/previews/BiomeSourcePreview.tsx

@@ -5,10 +5,11 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import type { PreviewProps } from '.'
 import { Btn } from '..'
 import { useCanvas } from '../../hooks'
+import { locale } from '../../Locales'
 import { biomeMap, getBiome } from '../../previews'
 import { newSeed } from '../../Utils'
 
-export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps) => {
+export const BiomeSourcePreview = ({ model, data, shown, lang, version }: PreviewProps) => {
 	const [scale, setScale] = useState(2)
 	const [focused, setFocused] = useState<string | undefined>(undefined)
 	const offset = useRef<[number, number]>([0, 0])
@@ -69,11 +70,14 @@ export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps
 		<div class="controls">
 			{focused && <Btn label={focused} class="no-pointer" />}
 			{(type === 'multi_noise' || type === 'checkerboard') && <>
-				<Btn icon="dash" onClick={() => changeScale(scale * 1.5)} />
-				<Btn icon="plus" onClick={() => changeScale(scale / 1.5)} />
+				<Btn icon="dash" tooltip={locale(lang, 'zoom_out')}
+					onClick={() => changeScale(scale * 1.5)} />
+				<Btn icon="plus" tooltip={locale(lang, 'zoom_in')}
+					onClick={() => changeScale(scale / 1.5)} />
 			</>}
 			{type === 'multi_noise' &&
-				<Btn icon="sync" onClick={() => newSeed(model)} />}
+				<Btn icon="sync" tooltip={locale(lang, 'generate_new_seed')}
+					onClick={() => newSeed(model)} />}
 		</div>
 		<canvas ref={canvas} width="200" height="200"></canvas>
 	</>

src/app/components/previews/DecoratorPreview.tsx

@@ -2,10 +2,11 @@ import { useEffect, useState } from 'preact/hooks'
 import type { PreviewProps } from '.'
 import { Btn } from '..'
 import { useCanvas } from '../../hooks'
+import { locale } from '../../Locales'
 import { decorator } from '../../previews'
 import { randomSeed } from '../../Utils'
 
-export const DecoratorPreview = ({ data, version, shown }: PreviewProps) => {
+export const DecoratorPreview = ({ data, version, shown, lang }: PreviewProps) => {
 	const [scale, setScale] = useState(4)
 	const [seed, setSeed] = useState(randomSeed())
 
@@ -27,9 +28,12 @@ export const DecoratorPreview = ({ data, version, shown }: PreviewProps) => {
 
 	return <>
 		<div class="controls">
-			<Btn icon="dash" onClick={() => setScale(Math.min(16, scale + 1))} />
-			<Btn icon="plus" onClick={() => setScale(Math.max(1, scale - 1))} />
-			<Btn icon="sync" onClick={() => setSeed(randomSeed())} />
+			<Btn icon="dash" tooltip={locale(lang, 'zoom_out')}
+				onClick={() => setScale(Math.min(16, scale + 1))} />
+			<Btn icon="plus" tooltip={locale(lang, 'zoom_in')}
+				onClick={() => setScale(Math.max(1, scale - 1))} />
+			<Btn icon="sync" tooltip={locale(lang, 'generate_new_seed')}
+				onClick={() => setSeed(randomSeed())} />
 		</div>
 		<canvas ref={canvas} width="64" height="64"></canvas>
 	</>

src/app/components/previews/NoiseSettingsPreview.tsx

@@ -54,7 +54,7 @@ export const NoiseSettingsPreview = ({ lang, data, shown, version }: PreviewProp
 	return <>
 		<div class="controls">
 			{focused && <Btn label={`Y = ${focused}`} class="no-pointer" />}
-			<BtnMenu icon="gear">
+			<BtnMenu icon="gear" tooltip={locale(lang, 'terrain_settings')}>
 				{hasPeaks ? <>
 					<BtnInput label={loc('preview.factor')} value={`${biomeFactor}`} onChange={v => setBiomeFactor(Number(v))} />
 					<BtnInput label={loc('preview.offset')} value={`${biomeOffset}`} onChange={v => setBiomeOffset(Number(v))} />
@@ -64,7 +64,8 @@ export const NoiseSettingsPreview = ({ lang, data, shown, version }: PreviewProp
 					<BtnInput label={loc('preview.depth')} value={`${biomeOffset}`} onChange={v => setBiomeOffset(Number(v))} />
 				</>}
 			</BtnMenu>
-			<Btn icon="sync" onClick={() => setSeed(randomSeed())} />
+			<Btn icon="sync" tooltip={locale(lang, 'generate_new_seed')}
+				onClick={() => setSeed(randomSeed())} />
 		</div>
 		<canvas ref={canvas} width={size} height={size}></canvas>
 	</>