feat(mobx): server notification options + data store

2026-03-07 09:25:27 +00:00 · 2021-12-11 23:34:46 +00:00
parent f8b8d96d3d
commit 413bf6949b
10 changed files with 237 additions and 102 deletions
--- a/src/lib/contextmenu/CMNotifications.tsx
+++ b/src/lib/contextmenu/CMNotifications.tsx
@@ -0,0 +1,119 @@
+import {
+    At,
+    Bell,
+    BellOff,
+    Check,
+    CheckSquare,
+    Block,
+    Square,
+    LeftArrowAlt,
+} from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Server } from "revolt.js/dist/maps/Servers";
+
+import { ContextMenuWithData, MenuItem } from "preact-context-menu";
+import { Text } from "preact-i18n";
+
+import { useApplicationState } from "../../mobx/State";
+import { NotificationState } from "../../mobx/stores/NotificationOptions";
+
+import LineDivider from "../../components/ui/LineDivider";
+
+import { Children } from "../../types/Preact";
+
+interface Action {
+    key: string;
+    type: "channel" | "server";
+    state?: NotificationState;
+}
+
+/**
+ * Provides a context menu for controlling notification options.
+ */
+export default observer(() => {
+    const notifications = useApplicationState().notifications;
+
+    const contextClick = (data?: Action) =>
+        data &&
+        (data.type === "channel"
+            ? notifications.setChannelState(data.key, data.state)
+            : notifications.setServerState(data.key, data.state));
+
+    return (
+        <ContextMenuWithData id="NotificationOptions" onClose={contextClick}>
+            {({ channel, server }: { channel?: Channel; server?: Server }) => {
+                // Find the computed and actual state values for channel / server.
+                const state = channel
+                    ? notifications.getChannelState(channel._id)
+                    : notifications.computeForServer(server!._id);
+
+                const actual = channel
+                    ? notifications.computeForChannel(channel)
+                    : undefined;
+
+                // If we're editing channel, show a default option too.
+                const elements: Children[] = channel
+                    ? [
+                          <MenuItem
+                              key="notif"
+                              data={{
+                                  key: channel._id,
+                                  type: "channel",
+                              }}>
+                              <Text
+                                  id={`app.main.channel.notifications.default`}
+                              />
+                              <div className="tip">
+                                  {state !== undefined && <Square size={20} />}
+                                  {state === undefined && (
+                                      <CheckSquare size={20} />
+                                  )}
+                              </div>
+                          </MenuItem>,
+                          <LineDivider />,
+                      ]
+                    : [];
+
+                /**
+                 * Generate a new entry we can select.
+                 * @param key Notification state
+                 * @param icon Icon for this state
+                 */
+                function generate(key: string, icon: Children) {
+                    elements.push(
+                        <MenuItem
+                            key={key}
+                            data={{
+                                key: channel ? channel._id : server!._id,
+                                type: channel ? "channel" : "server",
+                                state: key,
+                            }}>
+                            {icon}
+                            <Text
+                                id={`app.main.channel.notifications.${key}`}
+                            />
+                            {state === undefined && actual === key && (
+                                <div className="tip">
+                                    <LeftArrowAlt size={20} />
+                                </div>
+                            )}
+                            {state === key && (
+                                <div className="tip">
+                                    <Check size={20} />
+                                </div>
+                            )}
+                        </MenuItem>,
+                    );
+                }
+
+                generate("all", <Bell size={24} />);
+                generate("mention", <At size={24} />);
+                generate("none", <BellOff size={24} />);
+                generate("muted", <Block size={24} />);
+
+                return elements;
+            }}
+        </ContextMenuWithData>
+    );
+});