Add mentioning for channels

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

@@ -0,0 +1,42 @@
+import { useEffect, useMemo } from "preact/hooks";
+import { useQuery } from "react-query";
+import { fetchGuildChannels, fetchGuildRoles } from "../../api";
+import Tribute from "tributejs";
+import { useGuild } from "./useGuild";
+
+export const Mentions = ({ input }) => {
+    const guild = useGuild();
+
+    const { data: roles } = useQuery(fetchGuildRoles(guild));
+    const { data: channels } = useQuery(fetchGuildChannels(guild));
+
+    const tribute = useMemo(() => {
+        return new Tribute({
+            collection: [
+                {
+                    trigger: "@",
+                    values: (roles || []).map(({ id, name }) => ({ key: name, value: id })),
+                    allowSpaces: true,
+                    selectTemplate: (item) => `<@&${item.original.value}>`,
+                    menuItemTemplate: (item) => `@${item.original.key}`,
+                },
+                {
+                    trigger: "#",
+                    values: (channels || []).map(({ id, name }) => ({ key: name, value: id })),
+                    allowSpaces: true,
+                    selectTemplate: (item) => `<#${item.original.value}>`,
+                    menuItemTemplate: (item) => `#${item.original.key}`,
+                },
+            ],
+        });
+    }, [roles, channels]);
+
+    useEffect(() => {
+        tribute.detach(input.current);
+        if (input.current !== null) {
+            tribute.attach(input.current);
+        }
+    }, [tribute]);
+
+    return <></>;
+};