- {entries.map((e) => {
- return (
-
-
- 
-
-
- );
- })}
-
- - 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 Remote Emoji page. -
-- Be warned! 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). -
- {content} - - ); -}; - -function EmojiList({ emoji }) { - 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 { filteredEmoji, hidden } = React.useMemo(() => { - let hidden = emoji.length; - const filteredEmoji = syncpipe(emojiByCategory, [ - (_) => Object.entries(emojiByCategory), - (_) => _.map(([category, entries]) => { - let filteredEntries = matchSorter(entries, filter, { keys: ["shortcode"] }); - if (filteredEntries.length == 0) { - return null; - } else { - hidden -= filteredEntries.length; - return [category, filteredEntries]; - } - }), - (_) => _.filter((value) => value !== null) - ]); - - return { filteredEmoji, hidden }; - }, [filter, emojiByCategory, emoji.length]); - - return ( -- The rules for your instance are listed on the about page, and can be selected when submitting reports. -
-
- {"An error occured, please report this on the "}
- GoToSocial issue tracker
- {" or "}
- Matrix support room.
-
Include the details below:
-
- {error.name}: {error.message}
-
- {componentStack && [
- "\n\nComponent trace:",
- componentStack
- ]}
- {["\n\nError trace: ", error.stack]}
-
- - or refresh the page -
-
+ {"An error occured, please report this on the "}
+ GoToSocial issue tracker
+ {" or "}
+ Matrix support room.
+
Include the details below:
+
+ {error.name}: {error.message}
+
+ {componentStack && [
+ "\n\nComponent trace:",
+ componentStack
+ ]}
+ {["\n\nError trace: ", error.stack]}
+
+ + or refresh the page +
+
isn't it cool?
diff --git a/web/source/settings/admin/emoji/local/new-emoji.tsx b/web/source/settings/views/admin/emoji/local/new-emoji.tsx
similarity index 86%
rename from web/source/settings/admin/emoji/local/new-emoji.tsx
rename to web/source/settings/views/admin/emoji/local/new-emoji.tsx
index c6a203765..73e846f16 100644
--- a/web/source/settings/admin/emoji/local/new-emoji.tsx
+++ b/web/source/settings/views/admin/emoji/local/new-emoji.tsx
@@ -18,19 +18,15 @@
*/
import React, { useMemo, useEffect } from "react";
-
-import { useFileInput, useComboBoxInput } from "../../../lib/form";
+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 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";
+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();
@@ -113,4 +109,4 @@ export default function NewEmojiForm() {
);
-}
\ No newline at end of file
+}
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 + 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 Remote Emoji page. +
++ Be warned! 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). +
+ {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 ( + <> +