Work on channels, render content of messages.

src/context/Locale.tsx

@@ -1,7 +1,7 @@
 import { IntlProvider } from "preact-i18n";
 import { connectState } from "../redux/connector";
-import definition from "../../external/lang/en.json";
 import { useEffect, useState } from "preact/hooks";
+import definition from "../../external/lang/en.json";
 
 import dayjs from "dayjs";
 import calendar from "dayjs/plugin/calendar";

src/context/intermediate/modals/Prompt.tsx

@@ -9,7 +9,8 @@ import Modal, { Action } from "../../../components/ui/Modal";
 import { Channels, Servers } from "revolt.js/dist/api/objects";
 import { useContext, useEffect, useState } from "preact/hooks";
 import { AppContext } from "../../revoltjs/RevoltClient";
-import { takeError } from "../../revoltjs/util";
+import { mapMessage, takeError } from "../../revoltjs/util";
+import Message from "../../../components/common/messaging/Message";
 
 interface Props {
     onClose: () => void;
@@ -57,26 +58,23 @@ export function SpecialPromptModal(props: SpecialProps) {
         case 'close_dm':
         case 'leave_server':
         case 'delete_server': 
-        case 'delete_message': 
         case 'delete_channel': {
             const EVENTS = {
                 'close_dm':       'confirm_close_dm',
                 'delete_server':  'confirm_delete',
                 'delete_channel': 'confirm_delete',
-                'delete_message': 'confirm_delete_message',
                 'leave_group':    'confirm_leave',
                 'leave_server':   'confirm_leave'
             };
 
             let event = EVENTS[props.type];
-            let name = props.type === 'close_dm' ? client.users.get(client.channels.getRecipient(props.target._id))?.username : 
-                 props.type === 'delete_message' ? undefined : props.target.name;
+            let name = props.type === 'close_dm' ? client.users.get(client.channels.getRecipient(props.target._id))?.username : props.target.name;
 
             return (
                 <PromptModal
                     onClose={onClose}
                     question={<Text
-                        id={props.type === 'delete_message' ? 'app.context_menu.delete_message' : `app.special.modals.prompt.${event}`}
+                        id={`app.special.modals.prompt.${event}`}
                         fields={{ name }}
                     />}
                     actions={[
@@ -91,8 +89,6 @@ export function SpecialPromptModal(props: SpecialProps) {
                                 try {
                                     if (props.type === 'leave_group' || props.type === 'close_dm' || props.type === 'delete_channel') {
                                         await client.channels.delete(props.target._id);
-                                    } else if (props.type === 'delete_message') {
-                                        await client.channels.deleteMessage(props.target.channel, props.target._id);
                                     } else {
                                         await client.servers.delete(props.target._id);
                                     }
@@ -112,6 +108,41 @@ export function SpecialPromptModal(props: SpecialProps) {
                 />
             )
         }
+        case 'delete_message': {
+            return (
+                <PromptModal
+                    onClose={onClose}
+                    question={<Text id={'app.context_menu.delete_message'} />}
+                    actions={[
+                        {
+                            confirmation: true,
+                            contrast: true,
+                            error: true,
+                            text: <Text id="app.special.modals.actions.delete" />,
+                            onClick: async () => {
+                                setProcessing(true);
+
+                                try {
+                                    await client.channels.deleteMessage(props.target.channel, props.target._id);
+
+                                    onClose();
+                                } catch (err) {
+                                    setError(takeError(err));
+                                    setProcessing(false);
+                                }
+                            }
+                        },
+                        { text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
+                    ]}
+                    content={<>
+                        <Text id={`app.special.modals.prompt.confirm_delete_message_long`} />
+                        <Message message={mapMessage(props.target)} head={true} contrast />
+                    </>}
+                    disabled={processing}
+                    error={error}
+                />
+            )
+        }
         case "create_invite": {
             const [ code, setCode ] = useState('abcdef');
             const { writeClipboard } = useIntermediate();

src/context/revoltjs/RevoltClient.tsx

@@ -4,13 +4,14 @@ import { takeError } from "./util";
 import { createContext } from "preact";
 import { Children } from "../../types/Preact";
 import { Route } from "revolt.js/dist/api/routes";
-import { useEffect, useMemo, useState } from "preact/hooks";
 import { connectState } from "../../redux/connector";
 import Preloader from "../../components/ui/Preloader";
 import { WithDispatcher } from "../../redux/reducers";
 import { AuthState } from "../../redux/reducers/auth";
 import { SyncOptions } from "../../redux/reducers/sync";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { registerEvents, setReconnectDisallowed } from "./events";
+import { SingletonMessageRenderer } from '../../lib/renderer/Singleton';
 
 export enum ClientStatus {
     INIT,
@@ -61,13 +62,15 @@ function Context({ auth, sync, children, dispatcher }: Props) {
                 console.error('Failed to open IndexedDB store, continuing without.');
             }
 
-            setClient(new Client({
+            const client = new Client({
                 autoReconnect: false,
                 apiURL: import.meta.env.VITE_API_URL,
                 debug: import.meta.env.DEV,
                 db
-            }));
+            });
 
+            setClient(client);
+            SingletonMessageRenderer.subscribe(client);
             setStatus(ClientStatus.LOADING);
         })();
     }, [ ]);
@@ -131,10 +134,7 @@ function Context({ auth, sync, children, dispatcher }: Props) {
         }
     }, [ client, auth.active ]);
 
-    useEffect(
-        () => registerEvents({ operations, dispatcher }, setStatus, client),
-        [ client ]
-    );
+    useEffect(() => registerEvents({ operations, dispatcher }, setStatus, client), [ client ]);
 
     useEffect(() => {
         (async () => {

src/context/revoltjs/util.tsx

@@ -22,14 +22,13 @@ export function takeError(
     return id;
 }
 
-export function getChannelName(client: Client, channel: Channel, users: User[], prefixType?: boolean): Children {
+export function getChannelName(client: Client, channel: Channel, prefixType?: boolean): Children {
     if (channel.channel_type === "SavedMessages")
         return <Text id="app.navigation.tabs.saved" />;
 
     if (channel.channel_type === "DirectMessage") {
         let uid = client.channels.getRecipient(channel._id);
-
-        return <>{prefixType && "@"}{users.find(x => x._id === uid)?.username}</>;
+        return <>{prefixType && "@"}{client.users.get(uid)?.username}</>;
     }
 
     if (channel.channel_type === "TextChannel" && prefixType) {