[feature/frogend] (Mastodon) domain block CSV import (#1390)

* checkbox-list styling with taller <p> element

* CSV import/export, UI/UX improvements to import-export interface

* minor styling tweaks

* csv export, clean up export type branching

* abstract domain block entry validation

* foundation for PSL check + suggestions

* Squashed commit of the following:

commit e3655ba
Author: f0x <f0x@cthu.lu>
Date:   Tue Jan 31 15:19:10 2023 +0100

    let debug depend on env (prod/debug) again

commit 79c792b
Author: f0x <f0x@cthu.lu>
Date:   Tue Jan 31 00:34:01 2023 +0100

    update checklist components

commit 4367960
Author: f0x <f0x@cthu.lu>
Date:   Mon Jan 30 23:46:20 2023 +0100

    checklist performance improvements

commit 204a4c0
Author: f0x <f0x@cthu.lu>
Date:   Mon Jan 30 20:05:34 2023 +0100

    checklist field: use reducer for state

* remove debug logging

* show and use domain block suggestion

* restructure import/export buttons

* updating suggestions

* suggestion overview

* restructure check-list behavior, domain import/export

web/source/css/base.css

@@ -315,7 +315,7 @@ input, select, textarea, .input {
 		border-color: $input-focus-border;
 	}
 
-	&:invalid {
+	&:invalid, .invalid & {
 		border-color: $input-error-border;
 	}
 

web/source/index.js

@@ -66,10 +66,15 @@ skulk({
 			],
 		},
 		settings: {
-			debug: false,
 			entryFile: "settings",
 			outputFile: "settings.js",
 			prodCfg: prodCfg,
+			transform: [
+				["babelify", {
+					global: true,
+					ignore: [/node_modules\/(?!nanoid)/]
+				}]
+			],
 			presets: [
 				"react",
 				["postcss", {

web/source/package.json

@@ -19,9 +19,12 @@
     "langs": "^2.0.0",
     "match-sorter": "^6.3.1",
     "modern-normalize": "^1.1.0",
+    "nanoid": "^4.0.0",
+    "papaparse": "^5.3.2",
     "photoswipe": "^5.3.3",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
     "photoswipe-video-plugin": "^1.0.2",
+    "psl": "^1.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",

web/source/settings/admin/emoji/remote/parse-from-toot.js

@@ -129,14 +129,16 @@ function CopyEmojiForm({ localEmojiCodes, type, emojiList }) {
 			title: "No emoji selected, cannot perform any actions"
 		};
 
+	const checkListExtraProps = React.useCallback(() => ({ localEmojiCodes }), [localEmojiCodes]);
+
 	return (
 		<div className="parsed">
 			<span>This {type == "statuses" ? "toot" : "account"} uses the following custom emoji, select the ones you want to copy/disable:</span>
 			<form onSubmit={formSubmit}>
 				<CheckList
 					field={form.selectedEmoji}
-					Component={EmojiEntry}
-					localEmojiCodes={localEmojiCodes}
+					EntryComponent={EmojiEntry}
+					getExtraProps={checkListExtraProps}
 				/>
 
 				<CategorySelect
@@ -170,7 +172,7 @@ function ErrorList({ errors }) {
 	);
 }
 
-function EmojiEntry({ entry: emoji, localEmojiCodes, onChange }) {
+function EmojiEntry({ entry: emoji, onChange, extraProps: { localEmojiCodes } }) {
 	const shortcodeField = useTextInput("shortcode", {
 		defaultValue: emoji.shortcode,
 		validator: function validateShortcode(code) {
@@ -181,9 +183,16 @@ function EmojiEntry({ entry: emoji, localEmojiCodes, onChange }) {
 	});
 
 	React.useEffect(() => {
-		onChange({ valid: shortcodeField.valid });
-		/* eslint-disable-next-line react-hooks/exhaustive-deps */
-	}, [shortcodeField.valid]);
+		if (emoji.valid != shortcodeField.valid) {
+			onChange({ valid: shortcodeField.valid });
+		}
+	}, [onChange, emoji.valid, shortcodeField.valid]);
+
+	React.useEffect(() => {
+		shortcodeField.validate();
+		// only need this update if it's the emoji.checked that updated, not shortcodeField
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [emoji.checked]);
 
 	return (
 		<>