Allow multiple errors and dismissing errors

src/app/components/ErrorPanel.tsx

@@ -1,5 +1,12 @@
-export function ErrorPanel({ error }: { error: string }) {
+import { Octicon } from './Octicon'
+
+type ErrorPanelProps = {
+	error: string,
+	onDismiss?: () => unknown,
+}
+export function ErrorPanel({ error, onDismiss }: ErrorPanelProps) {
 	return <div class="error">
+		{onDismiss && <div class="error-dismiss" onClick={onDismiss}>{Octicon.x}</div>}
 		<h3>{error}</h3>
 		<p>You can report this as a bug <a href="https://github.com/misode/misode.github.io/issues/new" target="_blank">on GitHub</a></p>
 	</div>

src/app/components/Octicon.tsx

@@ -26,5 +26,6 @@ export const Octicon = {
 	three_bars: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"></path></svg>,
 	unfold: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z"></path></svg>,
 	upload: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.53 1.22a.75.75 0 00-1.06 0L3.72 4.97a.75.75 0 001.06 1.06l2.47-2.47v6.69a.75.75 0 001.5 0V3.56l2.47 2.47a.75.75 0 101.06-1.06L8.53 1.22zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"></path></svg>,
+	x: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>,
 	x_circle: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.404 12.596a6.5 6.5 0 119.192-9.192 6.5 6.5 0 01-9.192 9.192zM2.344 2.343a8 8 0 1011.313 11.314A8 8 0 002.343 2.343zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>,
 }

src/app/components/PreviewPanel.tsx

@@ -44,7 +44,7 @@ export const Previews: {
 	},
 ]
 
-type PreviewProps = {
+type PreviewPanelProps = {
 	lang: string,
 	model: DataModel | null,
 	version: VersionId,
@@ -52,7 +52,7 @@ type PreviewProps = {
 	shown: boolean,
 	onError: (message: string) => unknown,
 }
-export function PreviewPanel({ lang, model, version, id, shown }: PreviewProps) {
+export function PreviewPanel({ lang, model, version, id, shown }: PreviewPanelProps) {
 	const [, setCount] = useState(0)
 
 	useModel(model, () => {

src/app/pages/Generator.tsx

@@ -19,7 +19,13 @@ type GeneratorProps = {
 }
 export function Generator({ lang, changeTitle, version, onChangeVersion }: GeneratorProps) {
 	const loc = locale.bind(null, lang)
-	const [error, setError] = useState('')
+	const [errors, setErrors] = useState<string[]>([])
+	const addError = (error: string) => {
+		setErrors([...errors, error])
+	}
+	const dismissError = (error: string) => {
+		setErrors(errors.filter(e => e !== error))
+	}
 	const [errorBoundary] = useErrorBoundary()
 	if (errorBoundary) {
 		return <main><ErrorPanel error={`Something went wrong rendering the generator: ${errorBoundary.message}`}/></main>
@@ -45,7 +51,7 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener
 			.then(b => setBlockStates(b))
 		getModel(version, generator.id)
 			.then(m => setModel(m))
-			.catch(e => { console.error(e); setError(e.message) })
+			.catch(e => { console.error(e); addError(e.message) })
 	}, [version, generator.id])
 
 	const reset = () => {
@@ -92,7 +98,7 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener
 					setPresetResults(presets)
 				}
 			})
-			.catch(e => { console.error(e); setError(e.message) })
+			.catch(e => { console.error(e); addError(e.message) })
 	}, [version, generator.id, presetFilter])
 
 	const loadPreset = (id: string) => {
@@ -163,8 +169,8 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener
 					<Btn icon="arrow_right" label={loc('redo')} onClick={redo} />
 				</BtnMenu>
 			</div>
-			{error && <ErrorPanel error={error} />}
-			<Tree {...{lang, model, version, blockStates}} onError={setError} />
+			{errors.map(e => <ErrorPanel error={e} onDismiss={() => dismissError(e)} />)}
+			<Tree {...{lang, model, version, blockStates}} onError={addError} />
 		</main>
 		<div class="popup-actions" style={`--offset: -${10 + actionsShown * 50}px;`}>
 			<div class={`popup-action action-preview${hasPreview ? ' shown' : ''}`} onClick={togglePreview}>
@@ -181,10 +187,10 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener
 			</div>
 		</div>
 		<div class={`popup-preview${previewShown ? ' shown' : ''}`}>
-			<PreviewPanel {...{lang, model, version, id: generator.id}} shown={previewShown} onError={setError} />
+			<PreviewPanel {...{lang, model, version, id: generator.id}} shown={previewShown} onError={addError} />
 		</div>
 		<div class={`popup-source${sourceShown ? ' shown' : ''}`}>
-			<SourcePanel {...{lang, model, blockStates, doCopy, doDownload, doImport}} name={generator.schema ?? 'data'} onError={setError} />
+			<SourcePanel {...{lang, model, blockStates, doCopy, doDownload, doImport}} name={generator.schema ?? 'data'} onError={addError} />
 		</div>
 	</>
 }