feat: update emoji picker; move settings bhnd expr

external/lang

@@ -1 +1 @@
-Subproject commit d4bc47b729c7e69ce97216469692b39f4cd1640e
+Subproject commit 58408da6c4090dd3a7808a663eaa95b8b1da7603

package.json

@@ -73,7 +73,7 @@
         "@hcaptcha/react-hcaptcha": "^0.3.6",
         "@insertish/vite-plugin-babel-macros": "^1.0.5",
         "@preact/preset-vite": "^2.0.0",
-        "@revoltchat/ui": "1.0.70",
+        "@revoltchat/ui": "1.0.72",
         "@rollup/plugin-replace": "^2.4.2",
         "@styled-icons/boxicons-logos": "^10.38.0",
         "@styled-icons/boxicons-regular": "^10.38.0",

src/components/common/messaging/MessageBox.tsx

@@ -22,7 +22,7 @@ import {
     SMOOTH_SCROLL_ON_RECEIVE,
 } from "../../../lib/renderer/Singleton";
 
-import { useApplicationState } from "../../../mobx/State";
+import { state, useApplicationState } from "../../../mobx/State";
 import { Reply } from "../../../mobx/stores/MessageQueue";
 
 import { emojiDictionary } from "../../../assets/emojis";
@@ -34,8 +34,8 @@ import {
     uploadFile,
 } from "../../../controllers/client/jsx/legacy/FileUploads";
 import { modalController } from "../../../controllers/modals/ModalController";
+import { RenderEmoji } from "../../markdown/plugins/emoji";
 import AutoComplete, { useAutoComplete } from "../AutoComplete";
-import Emoji from "../Emoji";
 import { PermissionTooltip } from "../Tooltip";
 import FilePreview from "./bars/FilePreview";
 import ReplyBar from "./bars/ReplyBar";
@@ -143,6 +143,56 @@ const RE_SED = new RegExp("^s/([^])*/([^])*$");
 // Tests for code block delimiters (``` at start of line)
 const RE_CODE_DELIMITER = new RegExp("^```", "gm");
 
+const HackAlertThisFileWillBeReplaced = observer(({ channel }: Props) => {
+    const renderEmoji = useMemo(
+        () =>
+            memo(({ emoji }: { emoji: string }) => (
+                <a
+                    onClick={() => {
+                        const v = state.draft.get(channel._id);
+                        state.draft.set(
+                            channel._id,
+                            `${v ? `${v} ` : ""}:${emoji}:`,
+                        );
+                    }}>
+                    <RenderEmoji match={emoji} {...({} as any)} />
+                </a>
+            )),
+        [],
+    );
+
+    const emojis: Record<string, any> = {
+        default: Object.keys(emojiDictionary),
+    };
+
+    // ! FIXME: also expose typing from component
+    const categories: any[] = [];
+
+    for (const server of state.ordering.orderedServers) {
+        // ! FIXME: add a separate map on each server for emoji
+        const list = [...channel.client.emojis.values()]
+            .filter((emoji) => emoji.parent.id === server._id)
+            .map((x) => x._id);
+
+        if (list.length > 0) {
+            emojis[server._id] = list;
+            categories.push({
+                id: server._id,
+                name: server.name,
+                iconURL: server.generateIconURL({ max_side: 256 }),
+            });
+        }
+    }
+
+    return (
+        <Picker
+            emojis={emojis}
+            categories={categories}
+            renderEmoji={renderEmoji}
+        />
+    );
+});
+
 // ! FIXME: add to app config and load from app config
 export const CAN_UPLOAD_AT_ONCE = 5;
 
@@ -306,6 +356,7 @@ export default observer(({ channel }: Props) => {
     async function sendFile(content: string) {
         if (uploadState.type !== "attached") return;
         const attachments: string[] = [];
+        setMessage;
 
         const cancel = Axios.CancelToken.source();
         const files = uploadState.files;
@@ -464,26 +515,6 @@ export default observer(({ channel }: Props) => {
                 : undefined,
     });
 
-    const renderEmoji = useMemo(
-        () =>
-            memo(({ emoji }: { emoji: string }) => (
-                <a
-                    onClick={() => {
-                        const v = state.draft.get(channel._id);
-                        setMessage(`${v ? `${v} ` : ""}:${emoji}:`);
-                    }}>
-                    <Emoji
-                        emoji={
-                            emojiDictionary[
-                                emoji as keyof typeof emojiDictionary
-                            ]
-                        }
-                    />
-                </a>
-            )),
-        [],
-    );
-
     return (
         <>
             <AutoComplete {...autoCompleteProps} />
@@ -527,10 +558,7 @@ export default observer(({ channel }: Props) => {
             />
             <FloatingLayer>
                 {picker && (
-                    <Picker
+                    <HackAlertThisFileWillBeReplaced channel={channel} />
-                        emojis={Object.keys(emojiDictionary)}
-                        renderEmoji={renderEmoji}
-                    />
                 )}
             </FloatingLayer>
             <Base>

src/mobx/stores/Experiments.ts

@@ -43,8 +43,9 @@ export const EXPERIMENTS: {
             "This will enable the experimental plugin API. Only touch this if you know what you're doing.",
     },
     picker: {
-        title: "Emoji Picker",
+        title: "Custom Emoji",
-        description: "This will enable a work-in-progress emoji picker.",
+        description:
+            "This will enable a work-in-progress emoji picker and custom emoji settings.",
     },
 };
 

src/pages/settings/ServerSettings.tsx

@@ -16,6 +16,8 @@ import { Text } from "preact-i18n";
 
 import { LineDivider } from "@revoltchat/ui";
 
+import { state } from "../../mobx/State";
+
 import ButtonItem from "../../components/navigation/items/ButtonItem";
 import { useClient } from "../../controllers/client/ClientController";
 import RequiresOnline from "../../controllers/client/jsx/RequiresOnline";
@@ -77,6 +79,7 @@ export default observer(() => {
                     id: "emojis",
                     icon: <HappyBeaming size={20} />,
                     title: <Text id="app.settings.server_pages.emojis.title" />,
+                    hidden: !state.experiments.isEnabled("picker"),
                 },
                 {
                     category: (

src/pages/settings/server/Emojis.tsx

@@ -2,6 +2,8 @@ import { observer } from "mobx-react-lite";
 import { Server } from "revolt.js";
 import styled from "styled-components";
 
+import { Text } from "preact-i18n";
+
 import { Button, Column, Row, Stacked } from "@revoltchat/ui";
 
 import UserShort from "../../../components/common/user/UserShort";
@@ -48,7 +50,11 @@ export const Emojis = observer(({ server }: Props) => {
     return (
         <Column>
             <EmojiUploader server={server} />
-            <h3>Emojis – {emoji.length}</h3>
+            <h3>
+                <Text id="app.settings.server_pages.emojis.title" />
+                {" – "}
+                {emoji.length}
+            </h3>
             <List>
                 {emoji.map((emoji) => (
                     <Emoji key={emoji._id} centred>
@@ -64,7 +70,10 @@ export const Emojis = observer(({ server }: Props) => {
                             onClick={() =>
                                 modalController.writeText(emoji._id)
                             }>
-                            Copy ID
+                            <Text id="app.context_menu.copy_id" />
+                        </Button>
+                        <Button palette="plain" onClick={() => emoji.delete()}>
+                            <Text id="app.special.modals.actions.delete" />
                         </Button>
                     </Emoji>
                 ))}

yarn.lock

@@ -2240,9 +2240,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@revoltchat/ui@npm:1.0.70":
+"@revoltchat/ui@npm:1.0.72":
-  version: 1.0.70
+  version: 1.0.72
-  resolution: "@revoltchat/ui@npm:1.0.70"
+  resolution: "@revoltchat/ui@npm:1.0.72"
   dependencies:
     "@styled-icons/boxicons-logos": ^10.38.0
     "@styled-icons/boxicons-regular": ^10.38.0
@@ -2256,7 +2256,7 @@ __metadata:
     react-virtuoso: ^2.12.0
   peerDependencies:
     revolt.js: "*"
-  checksum: 70eba00f8b2d4fed3f83cdd64488ab4eb99acc9dd0427333a41f203912d9664f878ec04300bc3eaea2a67fef1620472cce9ff7048ef1280f950825593cf316a7
+  checksum: 8ca6d68709591a9505cc62089ab42fe887fcd4ceaac81c7f673b41b7be1d850ba852d0c2dc09bb77c8e1bce22b3255ebfbf95922d57aa2c3d2288aacd7819a25
   languageName: node
   linkType: hard
 
@@ -3626,7 +3626,7 @@ __metadata:
     "@hcaptcha/react-hcaptcha": ^0.3.6
     "@insertish/vite-plugin-babel-macros": ^1.0.5
     "@preact/preset-vite": ^2.0.0
-    "@revoltchat/ui": 1.0.70
+    "@revoltchat/ui": 1.0.72
     "@rollup/plugin-replace": ^2.4.2
     "@styled-icons/boxicons-logos": ^10.38.0
     "@styled-icons/boxicons-regular": ^10.38.0