Fix crash when toggling chat button plugins without restart

src/api/ChatButtons.tsx

@@ -74,7 +74,7 @@ export interface ChatBarProps {
     };
 }
 
-export type ChatBarButton = (props: ChatBarProps, isMainChat: boolean) => ReactNode;
+export type ChatBarButton = (props: ChatBarProps & { isMainChat: boolean; }) => JSX.Element | null;
 
 const buttonFactories = new Map<string, ChatBarButton>();
 const logger = new Logger("ChatButtons");
@@ -82,13 +82,12 @@ const logger = new Logger("ChatButtons");
 export function _injectButtons(buttons: ReactNode[], props: ChatBarProps) {
     if (props.disabled) return;
 
-    for (const [key, makeButton] of buttonFactories) {
-        try {
-            const res = makeButton(props, props.type.analyticsName === "normal");
-            if (res) buttons.push(res);
-        } catch (e) {
-            logger.error(`Failed to render button ${key}`, e);
-        }
+    for (const [key, Button] of buttonFactories) {
+        buttons.push(
+            <ErrorBoundary noop key={key} onError={e => logger.error(`Failed to render ${key}`, e.error)}>
+                <Button {...props} isMainChat={props.type.analyticsName === "normal"} />
+            </ErrorBoundary>
+        );
     }
 }
 

src/plugins/invisibleChat.desktop/index.tsx

@@ -65,7 +65,7 @@ function Indicator() {
 
 }
 
-const ChatBarIcon: ChatBarButton = (_, isMainChat) => {
+const ChatBarIcon: ChatBarButton = ({ isMainChat }) => {
     if (!isMainChat) return null;
 
     return (

src/plugins/previewMessage/index.tsx

@@ -73,9 +73,7 @@ const getAttachments = async (channelId: string) =>
     );
 
 
-const PreviewButton: ChatBarButton = (props, isMainChat) => {
-    const { isEmpty, type: { attachments } } = props;
-
+const PreviewButton: ChatBarButton = ({ isMainChat, isEmpty, type: { attachments } }) => {
     const channelId = SelectedChannelStore.getChannelId();
     const draft = useStateFromStores([DraftStore], () => getDraft(channelId));
 

src/plugins/sendTimestamps/index.tsx

@@ -123,7 +123,7 @@ function PickerModal({ rootProps, close }: { rootProps: ModalProps, close(): voi
     );
 }
 
-const ChatBarIcon: ChatBarButton = (_, isMainChat) => {
+const ChatBarIcon: ChatBarButton = ({ isMainChat }) => {
     if (!isMainChat) return null;
 
     return (

src/plugins/silentMessageToggle/index.tsx

@@ -41,7 +41,7 @@ const settings = definePluginSettings({
     }
 });
 
-const SilentMessageToggle: ChatBarButton = (_, isMainChat) => {
+const SilentMessageToggle: ChatBarButton = ({ isMainChat }) => {
     const [enabled, setEnabled] = useState(lastState);
 
     function setEnabledValue(value: boolean) {

src/plugins/silentTyping/index.tsx

@@ -37,7 +37,7 @@ const settings = definePluginSettings({
     }
 });
 
-const SilentTypingToggle: ChatBarButton = (_, isMainChat) => {
+const SilentTypingToggle: ChatBarButton = ({ isMainChat }) => {
     const { isEnabled, showIcon } = settings.use(["isEnabled", "showIcon"]);
     const toggle = () => settings.store.isEnabled = !settings.store.isEnabled;
 

src/plugins/translate/TranslateIcon.tsx

@@ -39,7 +39,7 @@ export function TranslateIcon({ height = 24, width = 24, className }: { height?:
     );
 }
 
-export const TranslateChatBarIcon: ChatBarButton = (props, isMainChat) => {
+export const TranslateChatBarIcon: ChatBarButton = ({ isMainChat }) => {
     const { autoTranslate } = settings.use(["autoTranslate"]);
 
     if (!isMainChat) return null;