Add server emoji picker

reminder-dashboard/src/components/App/Mentions.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "preact/hooks";
 import { useQuery } from "react-query";
-import { fetchGuildChannels, fetchGuildRoles } from "../../api";
+import { fetchGuildChannels, fetchGuildRoles, fetchGuildEmojis } from "../../api";
 import Tribute from "tributejs";
 import { useGuild } from "./useGuild";
 
@@ -9,6 +9,7 @@ export const Mentions = ({ input }) => {
 
     const { data: roles } = useQuery(fetchGuildRoles(guild));
     const { data: channels } = useQuery(fetchGuildChannels(guild));
+    const { data: emojis } = useQuery(fetchGuildEmojis(guild));
 
     const tribute = useMemo(() => {
         return new Tribute({
@@ -27,9 +28,16 @@ export const Mentions = ({ input }) => {
                     selectTemplate: (item) => `<#${item.original.value}>`,
                     menuItemTemplate: (item) => `#${item.original.key}`,
                 },
+                {
+                    trigger: ":",
+                    values: (emojis || []).map(({ fmt, name }) => ({ key: name, value: fmt })),
+                    allowSpaces: true,
+                    selectTemplate: (item) => item.original.value,
+                    menuItemTemplate: (item) => `:${item.original.key}:`,
+                },
             ],
         });
-    }, [roles, channels]);
+    }, [roles, channels, emojis]);
 
     useEffect(() => {
         tribute.detach(input.current);

reminder-dashboard/src/components/Guild/GuildError.tsx

@@ -8,6 +8,7 @@ export const GuildError = () => {
                         The bot may have just been restarted, in which case please try again in a
                         few minutes.
                         <br />
+                        <br />
                         Otherwise, please check Reminder Bot is in the server, and has correct
                         permissions.
                     </p>