[chore] Refactor settings panel routing (and other fixes) (#2864)

7 files changed, 898 insertions, 0 deletions

diff --git a/web/source/settings/views/admin/emoji/category-select.tsx b/web/source/settings/views/admin/emoji/category-select.tsx
new file mode 100644
index 000000000..683e146d8
--- /dev/null
+++ b/web/source/settings/views/admin/emoji/category-select.tsx
@@ -0,0 +1,134 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useMemo, useEffect, PropsWithChildren, ReactElement } from "react";
+import { matchSorter } from "match-sorter";
+import ComboBox from "../../../components/combo-box";
+import { useListEmojiQuery } from "../../../lib/query/admin/custom-emoji";
+import { CustomEmoji } from "../../../lib/types/custom-emoji";
+import { ComboboxFormInputHook } from "../../../lib/form/types";
+import Loading from "../../../components/loading";
+import { Error } from "../../../components/error";
+
+/**
+ * Sort all emoji into a map keyed by
+ * the category names (or "Unsorted").
+ */
+export function useEmojiByCategory(emojis: CustomEmoji[]) {	
+	return useMemo(() => {
+		const byCategory = new Map<string, CustomEmoji[]>();
+		
+		emojis.forEach((emoji) => {
+			const key = emoji.category ?? "Unsorted";
+			const value = byCategory.get(key) ?? [];
+			value.push(emoji);
+			byCategory.set(key, value);
+		});
+
+		return byCategory;
+	}, [emojis]);
+}
+
+interface CategorySelectProps {
+	field: ComboboxFormInputHook;
+}
+
+/**
+ * 
+ * Renders a cute lil searchable "category select" dropdown.
+ */
+export function CategorySelect({ field, children }: PropsWithChildren<CategorySelectProps>) {
+	// Get all local emojis.
+	const {
+		data: emoji = [],
+		isLoading,
+		isSuccess,
+		isError,
+		error,
+	} = useListEmojiQuery({ filter: "domain:local" });
+
+	const emojiByCategory = useEmojiByCategory(emoji);	
+	const categories = useMemo(() => new Set(emojiByCategory.keys()), [emojiByCategory]);
+	const { value, setIsNew } = field;
+
+	// Data used by the ComboBox element
+	// to select an emoji category.
+	const categoryItems = useMemo(() => {
+		const categoriesArr = Array.from(categories); 
+
+		// Sorted by complex algorithm.
+		const categoryNames = matchSorter(
+			categoriesArr,
+			value ?? "",
+			{ threshold: matchSorter.rankings.NO_MATCH },
+		);
+
+		// Map each category to the static image
+		// of the first emoji it contains.
+		const categoryItems: [string, ReactElement][] = [];
+		categoryNames.forEach((categoryName) => {
+			let src: string | undefined;
+			const items = emojiByCategory.get(categoryName);
+			if (items && items.length > 0) {
+				src = items[0].static_url;
+			}
+
+			categoryItems.push([
+				categoryName,
+				<>
+					<img
+						src={src}
+						aria-hidden="true"
+					/>
+					{categoryName}
+				</>
+			]);
+		});
+
+		return categoryItems;
+	}, [emojiByCategory, categories, value]);
+
+	// New category if something has been entered
+	// and we don't have it in categories yet.
+	useEffect(() => {
+		if (value !== undefined) {
+			const trimmed = value.trim();
+			if (trimmed.length > 0) {
+				setIsNew(!categories.has(trimmed));
+			}
+		}
+	}, [categories, value, isSuccess, setIsNew]);
+
+	if (isLoading) {
+		return <Loading />;
+	} else if (isError) {
+		return <Error error={error} />;
+	} else {
+		return (
+			<ComboBox
+				field={field}
+				items={categoryItems}
+				label="Category"
+				placeholder="e.g., reactions"
+			>
+				{children}
+			</ComboBox>
+		);
+	}
+}
diff --git a/web/source/settings/views/admin/emoji/local/detail.tsx b/web/source/settings/views/admin/emoji/local/detail.tsx
new file mode 100644
index 000000000..2913b6c17
--- /dev/null
+++ b/web/source/settings/views/admin/emoji/local/detail.tsx
@@ -0,0 +1,142 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useEffect } from "react";
+import { Redirect, useParams } from "wouter";
+import { useComboBoxInput, useFileInput, useValue } from "../../../../lib/form";
+import useFormSubmit from "../../../../lib/form/submit";
+import { useBaseUrl } from "../../../../lib/navigation/util";
+import FakeToot from "../../../../components/fake-toot";
+import FormWithData from "../../../../lib/form/form-with-data";
+import Loading from "../../../../components/loading";
+import { FileInput } from "../../../../components/form/inputs";
+import MutationButton from "../../../../components/form/mutation-button";
+import { Error } from "../../../../components/error";
+import { useGetEmojiQuery, useEditEmojiMutation, useDeleteEmojiMutation } from "../../../../lib/query/admin/custom-emoji";
+import { CategorySelect } from "../category-select";
+import BackButton from "../../../../components/back-button";
+
+export default function EmojiDetail() {
+	const baseUrl = useBaseUrl();
+	const params = useParams();
+	return (
+		<div className="emoji-detail">
+			<BackButton to={`~${baseUrl}/local`} />
+			<FormWithData dataQuery={useGetEmojiQuery} queryArg={params.emojiId} DataForm={EmojiDetailForm} />
+		</div>
+	);
+}
+
+function EmojiDetailForm({ data: emoji }) {
+	const baseUrl = useBaseUrl();
+	const form = {
+		id: useValue("id", emoji.id),
+		category: useComboBoxInput("category", { source: emoji }),
+		image: useFileInput("image", {
+			withPreview: true,
+			maxSize: 50 * 1024 // TODO: get from instance api
+		})
+	};
+
+	const [modifyEmoji, result] = useFormSubmit(form, useEditEmojiMutation());
+
+	// Automatic submitting of category change
+	useEffect(() => {
+		if (
+			form.category.hasChanged() &&
+			!form.category.state.open &&
+			!form.category.isNew) {
+			modifyEmoji();
+		}
+		/* eslint-disable-next-line react-hooks/exhaustive-deps */
+	}, [form.category.hasChanged(), form.category.isNew, form.category.state.open]);
+
+	const [deleteEmoji, deleteResult] = useDeleteEmojiMutation();
+
+	if (deleteResult.isSuccess) {
+		return <Redirect to={`~${baseUrl}/local`} />;
+	}
+
+	return (
+		<>
+			<div className="emoji-header">
+				<img src={emoji.url} alt={emoji.shortcode} title={emoji.shortcode} />
+				<div>
+					<h2>{emoji.shortcode}</h2>
+					<MutationButton
+						label="Delete"
+						type="button"
+						onClick={() => deleteEmoji(emoji.id)}
+						className="danger"
+						showError={false}
+						result={deleteResult}
+						disabled={false}
+					/>
+				</div>
+			</div>
+
+			<form onSubmit={modifyEmoji} className="left-border">
+				<h2>Modify this emoji {result.isLoading && <Loading />}</h2>
+
+				<div className="update-category">
+					<CategorySelect
+						field={form.category}
+					>
+						<MutationButton
+							name="create-category"
+							label="Create"
+							result={result}
+							showError={false}
+							style={{ visibility: (form.category.isNew ? "initial" : "hidden") }}
+							disabled={!form.category.value}
+						/>
+					</CategorySelect>
+				</div>
+
+				<div className="update-image">
+					<FileInput
+						field={form.image}
+						label="Image"
+						accept="image/png,image/gif"
+					/>
+
+					<MutationButton
+						name="image"
+						label="Replace image"
+						showError={false}
+						result={result}
+						disabled={!form.image.value}
+					/>
+
+					<FakeToot>
+						Look at this new custom emoji <img
+							className="emoji"
+							src={form.image.previewValue ?? emoji.url}
+							title={`:${emoji.shortcode}:`}
+							alt={emoji.shortcode}
+						/> isn&apos;t it cool?
+					</FakeToot>
+
+					{result.error && <Error error={result.error} />}
+					{deleteResult.error && <Error error={deleteResult.error} />}
+				</div>
+			</form>
+		</>
+	);
+}
\ No newline at end of file
diff --git a/web/source/settings/views/admin/emoji/local/new-emoji.tsx b/web/source/settings/views/admin/emoji/local/new-emoji.tsx
new file mode 100644
index 000000000..73e846f16
--- /dev/null
+++ b/web/source/settings/views/admin/emoji/local/new-emoji.tsx
@@ -0,0 +1,112 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useMemo, useEffect } from "react";
+import { useFileInput, useComboBoxInput } from "../../../../lib/form";
+import useShortcode from "./use-shortcode";
+import useFormSubmit from "../../../../lib/form/submit";
+import { TextInput, FileInput } from "../../../../components/form/inputs";
+import { CategorySelect } from '../category-select';
+import FakeToot from "../../../../components/fake-toot";
+import MutationButton from "../../../../components/form/mutation-button";
+import { useAddEmojiMutation } from "../../../../lib/query/admin/custom-emoji";
+import { useInstanceV1Query } from "../../../../lib/query";
+
+export default function NewEmojiForm() {
+	const shortcode = useShortcode();
+
+	const { data: instance } = useInstanceV1Query();
+	const emojiMaxSize = useMemo(() => {
+		return instance?.configuration?.emojis?.emoji_size_limit ?? 50 * 1024;
+	}, [instance]);
+
+	const image = useFileInput("image", {
+		withPreview: true,
+		maxSize: emojiMaxSize
+	});
+
+	const category = useComboBoxInput("category");
+
+	const [submitForm, result] = useFormSubmit({
+		shortcode, image, category
+	}, useAddEmojiMutation());
+
+	useEffect(() => {
+		if (shortcode.value === undefined || shortcode.value.length == 0) {
+			if (image.value != undefined) {
+				let [name, _ext] = image.value.name.split(".");
+				shortcode.setter(name);
+			}
+		}
+
+		/* We explicitly don't want to have 'shortcode' as a dependency here
+			 because we only want to change the shortcode to the filename if the field is empty
+			 at the moment the file is selected, not some time after when the field is emptied
+		*/
+		/* eslint-disable-next-line react-hooks/exhaustive-deps */
+	}, [image.value]);
+
+	let emojiOrShortcode;
+
+	if (image.previewValue != undefined) {
+		emojiOrShortcode = <img
+			className="emoji"
+			src={image.previewValue}
+			title={`:${shortcode.value}:`}
+			alt={shortcode.value}
+		/>;
+	} else if (shortcode.value !== undefined && shortcode.value.length > 0) {
+		emojiOrShortcode = `:${shortcode.value}:`;
+	} else {
+		emojiOrShortcode = `:your_emoji_here:`;
+	}
+
+	return (
+		<div>
+			<h2>Add new custom emoji</h2>
+
+			<FakeToot>
+				Look at this new custom emoji {emojiOrShortcode} isn&apos;t it cool?
+			</FakeToot>
+
+			<form onSubmit={submitForm} className="form-flex">
+				<FileInput
+					field={image}
+					accept="image/png,image/gif,image/webp"
+				/>
+
+				<TextInput
+					field={shortcode}
+					label="Shortcode, must be unique among the instance's local emoji"
+				/>
+
+				<CategorySelect
+					field={category}
+					children={[]}
+				/>
+
+				<MutationButton
+					disabled={image.previewValue === undefined}
+					label="Upload emoji"
+					result={result}
+				/>
+			</form>
+		</div>
+	);
+}
diff --git a/web/source/settings/views/admin/emoji/local/overview.tsx b/web/source/settings/views/admin/emoji/local/overview.tsx
new file mode 100644
index 000000000..b28af59f3
--- /dev/null
+++ b/web/source/settings/views/admin/emoji/local/overview.tsx
@@ -0,0 +1,173 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useMemo, useState } from "react";
+import { Link } from "wouter";
+import { matchSorter } from "match-sorter";
+import NewEmojiForm from "./new-emoji";
+import { useTextInput } from "../../../../lib/form";
+import { useEmojiByCategory } from "../category-select";
+import Loading from "../../../../components/loading";
+import { Error } from "../../../../components/error";
+import { TextInput } from "../../../../components/form/inputs";
+import { useListEmojiQuery } from "../../../../lib/query/admin/custom-emoji";
+import { CustomEmoji } from "../../../../lib/types/custom-emoji";
+
+export function EmojiOverview() {
+	const { data: emoji = [], isLoading, isError, error } = useListEmojiQuery({ filter: "domain:local" });
+
+	let content: React.JSX.Element;
+	if (isLoading) {
+		content = <Loading />;
+	} else if (isError) {
+		content = <Error error={error} />;
+	} else {
+		content = (
+			<>
+				<EmojiList emoji={emoji} />
+				<NewEmojiForm />
+			</>
+		);
+	}
+
+	return (
+		<>
+			<h1>Local Custom Emoji</h1>
+			<p>
+				To use custom emoji in your toots they have to be 'local' to the instance.
+				You can either upload them here directly, or copy from those already
+				present on other (known) instances through the <Link to={`/remote`}>Remote Emoji</Link> page.
+			</p>
+			<p>
+				<strong>Be warned!</strong> If you upload more than about 300-400 custom emojis in
+				total on your instance, this may lead to rate-limiting issues for users and clients
+				if they try to load all the emoji images at once (which is what many clients do).
+			</p>
+			{content}
+		</>
+	);
+}
+
+interface EmojiListParams {
+	emoji: CustomEmoji[];
+}
+
+function EmojiList({ emoji }: EmojiListParams) {
+	const filterField = useTextInput("filter");
+	const filter = filterField.value ?? "";
+	const emojiByCategory = useEmojiByCategory(emoji);
+
+	// Filter emoji based on shortcode match
+	// with user input, hiding empty categories.
+	const { filteredEmojis, filteredCount } = useMemo(() => {
+		// Amount of emojis removed by the filter.
+		// Start with the length of the array since
+		// that's the max that can be filtered out.
+		let filteredCount = emoji.length;
+		
+		// Results of the filtering.
+		const filteredEmojis: [string, CustomEmoji[]][] = [];
+		
+		// Filter from emojis in this category.
+		emojiByCategory.forEach((entries, category) => {
+			const filteredEntries = matchSorter(entries, filter, {
+				keys: ["shortcode"]
+			});
+
+			if (filteredEntries.length == 0) {
+				// Nothing left in this category, don't
+				// bother adding it to filteredEmojis.
+				return;
+			}
+
+			filteredCount -= filteredEntries.length;
+			filteredEmojis.push([category, filteredEntries]);
+		});
+
+		return { filteredEmojis, filteredCount };
+	}, [filter, emojiByCategory, emoji.length]);
+
+	return (
+		<>
+			<h2>Overview</h2>
+			{emoji.length > 0
+				? <span>{emoji.length} custom emoji {filteredCount > 0 && `(${filteredCount} filtered)`}</span>
+				: <span>No custom emoji yet, you can add one below.</span>
+			}
+			<div className="list emoji-list">
+				<div className="header">
+					<TextInput
+						field={filterField}
+						name="emoji-shortcode"
+						placeholder="Search"
+					/>
+				</div>
+				<div className="entries scrolling">
+					{filteredEmojis.length > 0
+						? (
+							<div className="entries scrolling">
+								{filteredEmojis.map(([category, emojis]) => {
+									return <EmojiCategory key={category} category={category} emojis={emojis} />;
+								})}
+							</div>
+						)
+						: <div className="entry">No local emoji matched your filter.</div>
+					}
+				</div>
+			</div>
+		</>
+	);
+}
+
+interface EmojiCategoryProps {
+	category: string;
+	emojis: CustomEmoji[];
+}
+
+function EmojiCategory({ category, emojis }: EmojiCategoryProps) {
+	return (
+		<div className="entry">
+			<b>{category}</b>
+			<div className="emoji-group">
+				{emojis.map((emoji) => {
+					return (
+						<Link key={emoji.id} to={`/local/${emoji.id}`} >
+							<EmojiPreview emoji={emoji} />
+						</Link>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+function EmojiPreview({ emoji }) {
+	const [ animate, setAnimate ] = useState(false);
+
+	return (
+		<img
+			onMouseEnter={() => { setAnimate(true); }}
+			onMouseLeave={() => { setAnimate(false); }}
+			src={animate ? emoji.url : emoji.static_url}
+			alt={emoji.shortcode}
+			title={emoji.shortcode}
+			loading="lazy"
+		/>
+	);
+}
diff --git a/web/source/settings/views/admin/emoji/local/use-shortcode.ts b/web/source/settings/views/admin/emoji/local/use-shortcode.ts
new file mode 100644
index 000000000..358e711b0
--- /dev/null
+++ b/web/source/settings/views/admin/emoji/local/use-shortcode.ts
@@ -0,0 +1,56 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useMemo } from "react";
+
+import { useTextInput } from "../../../../lib/form";
+import { useListEmojiQuery } from "../../../../lib/query/admin/custom-emoji";
+
+const shortcodeRegex = /^\w{2,30}$/;
+
+export default function useShortcode() {
+	const { data: emoji = [] } = useListEmojiQuery({
+		filter: "domain:local"
+	});
+
+	const emojiCodes = useMemo(() => {
+		return new Set(emoji.map((e) => e.shortcode));
+	}, [emoji]);
+
+	return useTextInput("shortcode", {
+		validator: function validateShortcode(code) {
+			// technically invalid, but hacky fix to prevent validation error on page load
+			if (code == "") { return ""; }
+
+			if (emojiCodes.has(code)) {
+				return "Shortcode already in use";
+			}
+
+			if (code.length < 2 || code.length > 30) {
+				return "Shortcode must be between 2 and 30 characters";
+			}
+
+			if (!shortcodeRegex.test(code)) {
+				return "Shortcode must only contain letters, numbers, and underscores";
+			}
+
+			return "";
+		}
+	});
+}
diff --git a/web/source/settings/views/admin/emoji/remote/index.tsx b/web/source/settings/views/admin/emoji/remote/index.tsx
new file mode 100644
index 000000000..5521d1115
--- /dev/null
+++ b/web/source/settings/views/admin/emoji/remote/index.tsx
@@ -0,0 +1,46 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useMemo } from "react";
+
+import StealThisLook from "./steal-this-look";
+
+import Loading from "../../../../components/loading";
+import { Error } from "../../../../components/error";
+import { useListEmojiQuery } from "../../../../lib/query/admin/custom-emoji";
+
+export default function RemoteEmoji() {
+	// Local emoji are queried for
+	// shortcode collision detection
+	const {
+		data: emoji = [],
+		isLoading,
+		error
+	} = useListEmojiQuery({ filter: "domain:local" });
+
+	const emojiCodes = useMemo(() => new Set(emoji.map((e) => e.shortcode)), [emoji]);
+
+	return (
+		<>
+			<h1>Custom Emoji (remote)</h1>
+			{error && <Error error={error} />}
+			{isLoading ? <Loading /> : <StealThisLook emojiCodes={emojiCodes} />}
+		</>
+	);
+}
diff --git a/web/source/settings/views/admin/emoji/remote/steal-this-look.tsx b/web/source/settings/views/admin/emoji/remote/steal-this-look.tsx
new file mode 100644
index 000000000..43d0b83e1
--- /dev/null
+++ b/web/source/settings/views/admin/emoji/remote/steal-this-look.tsx
@@ -0,0 +1,235 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useCallback, useEffect } from "react";
+
+import { useTextInput, useComboBoxInput, useCheckListInput } from "../../../../lib/form";
+
+import useFormSubmit from "../../../../lib/form/submit";
+
+import CheckList from "../../../../components/check-list";
+import { CategorySelect } from '../category-select';
+
+import { TextInput } from "../../../../components/form/inputs";
+import MutationButton from "../../../../components/form/mutation-button";
+import { Error } from "../../../../components/error";
+import { useSearchItemForEmojiMutation, usePatchRemoteEmojisMutation } from "../../../../lib/query/admin/custom-emoji";
+
+export default function StealThisLook({ emojiCodes }) {
+	const [searchStatus, result] = useSearchItemForEmojiMutation();
+	const urlField = useTextInput("url");
+
+	function submitSearch(e) {
+		e.preventDefault();
+		if (urlField.value !== undefined && urlField.value.trim().length != 0) {
+			searchStatus(urlField.value);
+		}
+	}
+
+	return (
+		<div className="parse-emoji">
+			<h2>Steal this look</h2>
+			<form onSubmit={submitSearch}>
+				<div className="form-field text">
+					<label htmlFor="url">
+						Link to a status:
+					</label>
+					<div className="row">
+						<input
+							type="text"
+							id="url"
+							name="url"
+							onChange={urlField.onChange}
+							value={urlField.value}
+						/>
+						<button disabled={result.isLoading}>
+							<i className={[
+								"fa fa-fw",
+								(result.isLoading
+									? "fa-refresh fa-spin"
+									: "fa-search")
+							].join(" ")} aria-hidden="true" title="Search" />
+							<span className="sr-only">Search</span>
+						</button>
+					</div>
+				</div>
+			</form>
+			<SearchResult result={result} localEmojiCodes={emojiCodes} />
+		</div>
+	);
+}
+
+function SearchResult({ result, localEmojiCodes }) {
+	const { error, data, isSuccess, isError } = result;
+
+	if (!(isSuccess || isError)) {
+		return null;
+	}
+
+	if (error == "NONE_FOUND") {
+		return "No results found";
+	} else if (error == "LOCAL_INSTANCE") {
+		return <b>This is a local user/status, all referenced emoji are already on your instance</b>;
+	} else if (error != undefined) {
+		return <Error error={result.error} />;
+	}
+
+	if (data.list.length == 0) {
+		return <b>This {data.type == "statuses" ? "status" : "account"} doesn't use any custom emoji</b>;
+	}
+
+	return (
+		<CopyEmojiForm
+			localEmojiCodes={localEmojiCodes}
+			type={data.type}
+			emojiList={data.list}
+		/>
+	);
+}
+
+function CopyEmojiForm({ localEmojiCodes, type, emojiList }) {
+	const form = {
+		selectedEmoji: useCheckListInput("selectedEmoji", {
+			entries: emojiList,
+			uniqueKey: "id"
+		}),
+		category: useComboBoxInput("category")
+	};
+
+	const [formSubmit, result] = useFormSubmit(
+		form,
+		usePatchRemoteEmojisMutation(),
+		{
+			changedOnly: false,
+			onFinish: ({ data }) => {
+				if (data) {
+					// uncheck all successfully processed emoji
+					const processed = data.map((emoji) => {
+						return [emoji.id, { checked: false }];
+					});
+					form.selectedEmoji.updateMultiple(processed);
+				}
+			}
+		}
+	);
+
+	const buttonsInactive = form.selectedEmoji.someSelected
+		? {
+			disabled: false,
+			title: ""
+		}
+		: {
+			disabled: true,
+			title: "No emoji selected, cannot perform any actions"
+		};
+
+	const checkListExtraProps = useCallback(() => ({ localEmojiCodes }), [localEmojiCodes]);
+
+	return (
+		<div className="parsed">
+			<span>This {type == "statuses" ? "status" : "account"} uses the following custom emoji, select the ones you want to copy/disable:</span>
+			<form onSubmit={formSubmit}>
+				<CheckList
+					field={form.selectedEmoji}
+					header={<></>}
+					EntryComponent={EmojiEntry}
+					getExtraProps={checkListExtraProps}
+				/>
+
+				<CategorySelect
+					field={form.category}
+					children={[]}
+				/>
+
+				<div className="action-buttons row">
+					<MutationButton
+						name="copy"
+						label="Copy to local emoji"
+						result={result}
+						showError={false}
+						{...buttonsInactive}
+					/>
+					<MutationButton
+						name="disable"
+						label="Disable"
+						result={result}
+						className="button danger"
+						showError={false}
+						{...buttonsInactive}
+					/>
+				</div>
+				{result.error && (
+					Array.isArray(result.error)
+						? <ErrorList errors={result.error} />
+						: <Error error={result.error} />
+				)}
+			</form>
+		</div>
+	);
+}
+
+function ErrorList({ errors }) {
+	return (
+		<div className="error">
+			One or multiple emoji failed to process:
+			{errors.map(([shortcode, err]) => (
+				<div key={shortcode}>
+					<b>{shortcode}:</b> {err}
+				</div>
+			))}
+		</div>
+	);
+}
+
+function EmojiEntry({ entry: emoji, onChange, extraProps: { localEmojiCodes } }) {
+	const shortcodeField = useTextInput("shortcode", {
+		defaultValue: emoji.shortcode,
+		validator: function validateShortcode(code) {
+			return (emoji.checked && localEmojiCodes.has(code))
+				? "Shortcode already in use"
+				: "";
+		}
+	});
+
+	useEffect(() => {
+		if (emoji.valid != shortcodeField.valid) {
+			onChange({ valid: shortcodeField.valid });
+		}
+	}, [onChange, emoji.valid, shortcodeField.valid]);
+
+	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 (
+		<>
+			<img className="emoji" src={emoji.url} title={emoji.shortcode} />
+
+			<TextInput
+				field={shortcodeField}
+				onChange={(e) => {
+					shortcodeField.onChange(e);
+					onChange({ shortcode: e.target.value, checked: true });
+				}}
+			/>
+		</>
+	);
+}