[bugfix] use instance configured emoji maxsize on emoji update valida…

…tion (#3056)

web/source/settings/views/admin/emoji/local/detail.tsx

@@ -17,7 +17,7 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { Redirect, useParams } from "wouter";
 import { useComboBoxInput, useFileInput, useValue } from "../../../../lib/form";
 import useFormSubmit from "../../../../lib/form/submit";
@@ -29,6 +29,7 @@ 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 { useInstanceV1Query } from "../../../../lib/query/gts-api";
 import { CategorySelect } from "../category-select";
 import BackButton from "../../../../components/back-button";
 
@@ -44,13 +45,18 @@ export default function EmojiDetail() {
 }
 
 function EmojiDetailForm({ data: emoji }) {
+	const { data: instance } = useInstanceV1Query();
+	const emojiMaxSize = useMemo(() => {
+		return instance?.configuration?.emojis?.emoji_size_limit ?? 50 * 1024;
+	}, [instance]);
+
 	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
+			maxSize: emojiMaxSize
 		})
 	};