feat(web): Stop saving release lookup inputs on change

This was a bit confusing since these inputs were not saved for active
lookups. Now we have a dedicated settings page and can do it better.

Since we still want to load persisted default values, persistent inputs
got yet another option to (not) store changes.

Author: kellnerd

server/components/ProviderInput.tsx

@@ -9,13 +9,15 @@ export function ProviderCheckbox({
 	internalName,
 	disabled = false,
 	enabled = false,
-	persistent = false,
+	loadDefaults = false,
+	storeChanges = false,
 }: {
 	providerName: string;
 	internalName: string;
 	disabled?: boolean;
 	enabled?: boolean;
-	persistent?: boolean;
+	loadDefaults?: boolean;
+	storeChanges?: boolean;
 }) {
 	const id = `${internalName}-input`;
 
@@ -27,25 +29,27 @@ export function ProviderCheckbox({
 		>
 			<ProviderIcon providerName={providerName} />
 			{providerName}
-			{(persistent && !disabled)
+			{(loadDefaults && !disabled)
 				? (
 					<PersistentCheckbox
 						name={internalName}
 						id={id}
 						namespace='persist'
 						initialValue={enabled}
 						formValue=''
-						useCookie
+						storeChanges={storeChanges}
+						useCookie={storeChanges}
 					/>
 				)
 				: <input type='checkbox' name={internalName} id={id} checked={enabled} value='' disabled={disabled} />}
 		</label>
 	);
 }
 
-export function ProviderCheckboxes({ enabledProviders, persistent = false }: {
+export function ProviderCheckboxes({ enabledProviders, loadDefaults = false, storeChanges = false }: {
 	enabledProviders?: Set<string>;
-	persistent?: boolean;
+	loadDefaults?: boolean;
+	storeChanges?: boolean;
 }) {
 	return (
 		<div class='row'>
@@ -59,7 +63,8 @@ export function ProviderCheckboxes({ enabledProviders, persistent = false }: {
 						disabled={providers.findByName(name)!.getQuality('GTIN lookup') <=
 							FeatureQuality.UNKNOWN}
 						enabled={enabledProviders?.has(internalName)}
-						persistent={persistent}
+						loadDefaults={loadDefaults}
+						storeChanges={storeChanges}
 					/>
 				);
 			})}

server/components/ReleaseLookup.tsx

@@ -55,15 +55,15 @@ export default function ReleaseLookup({
 								namespace='persist'
 								initialValue={regionValue}
 								placeholder='Region (Country Code)'
-								useCookie
+								storeChanges={false}
 							/>
 						),
 				)}
 				<InputWithOverlay type='submit' value='Lookup'>
 					<SpriteIcon name='search' />
 				</InputWithOverlay>
 			</div>
-			<ProviderCheckboxes enabledProviders={enabledProviders} persistent={!isActiveLookup} />
+			<ProviderCheckboxes enabledProviders={enabledProviders} loadDefaults={!isActiveLookup} storeChanges={false} />
 		</form>
 	);
 }

server/islands/PersistentInput.tsx

@@ -31,6 +31,8 @@ export interface PersistentInputProps extends JSX.HTMLAttributes<HTMLInputElemen
 	id?: string;
 	/** A namespace will be used to prefix the storage key of this input. */
 	namespace?: string;
+	/** Store the new value when the input changes. */
+	storeChanges?: boolean;
 	/** Store the value as cookie, making it available to the server. */
 	useCookie?: boolean;
 }
@@ -54,6 +56,7 @@ export function PersistentCheckbox({
 	trueValue = '1',
 	falseValue = '0',
 	formValue = '1',
+	storeChanges = true,
 	useCookie = false,
 	...props
 }: PersistentCheckboxProps) {
@@ -73,7 +76,9 @@ export function PersistentCheckbox({
 			{...props}
 			value={formValue}
 			checked={persistedValue.value !== falseValue}
-			onChange={(event) => persistedValue.value = event.currentTarget.checked ? trueValue : falseValue}
+			onChange={storeChanges
+				? ((event) => persistedValue.value = event.currentTarget.checked ? trueValue : falseValue)
+				: undefined}
 		/>
 	);
 }
@@ -88,6 +93,7 @@ export function PersistentTextInput({
 	id,
 	namespace,
 	initialValue = '',
+	storeChanges = true,
 	useCookie = false,
 	...props
 }: PersistentTextInputProps) {
@@ -106,7 +112,7 @@ export function PersistentTextInput({
 			id={id}
 			{...props}
 			value={text}
-			onChange={(event) => text.value = event.currentTarget.value}
+			onChange={storeChanges ? ((event) => text.value = event.currentTarget.value) : undefined}
 		/>
 	);
 }

server/routes/settings.tsx

@@ -15,7 +15,7 @@ export default function Settings() {
 			<h2>Settings</h2>
 			<h3>Lookup Defaults</h3>
 			<p>Providers which should be looked up by barcode:</p>
-			<ProviderCheckboxes enabledProviders={defaultProviders} persistent />
+			<ProviderCheckboxes enabledProviders={defaultProviders} loadDefaults storeChanges />
 			<p>
 				Some providers only do lookups for a specific region. Specify the region which should be tried if the looked up
 				URL doesn’t already contain a region.