feat: notifications open the message #10

src/seqta/utils/ReactFiber.ts

@@ -1,72 +1,81 @@
-import browser from 'webextension-polyfill';
-
 class ReactFiber {
   private selector: string;
   private debug: boolean;
   private messageIdCounter: number = 0; // Counter for unique message IDs
 
-  constructor(selector: string, options: { debug?: boolean } = {}) {
+  constructor(selector: string, options: {
+    debug ? : boolean
+  } = {}) {
     this.selector = selector;
     this.debug = options.debug || false;
   }
 
-  static find(selector: string, options: { debug?: boolean } = {}) {
+  static find(selector: string, options: {
+    debug ? : boolean
+  } = {}) {
     return new ReactFiber(selector, options);
   }
 
-    private async sendMessage(action: string, payload: any = {}): Promise<any> {
-      return new Promise((resolve, _) => {
-          const messageId = this.messageIdCounter++;
-          const message = {
-              type: "reactFiberRequest",
-              selector: this.selector,
-              action,
-              payload,
-              debug: this.debug,
-              messageId, // Include the unique message ID
-          };
+  private async sendMessage(action: string, payload: any = {}): Promise < any > {
+    return new Promise((resolve, _) => {
+      const messageId = this.messageIdCounter++;
+      const message = {
+        type: "reactFiberRequest",
+        selector: this.selector,
+        action,
+        payload,
+        debug: this.debug,
+        messageId,
+      };
 
-            const listener = (response: any) => {
-              if (response.data?.type === 'reactFiberResponse' && response.data?.messageId === messageId) {
-                    if (this.debug) {
-                        console.log("Content Received Response:", response.data.response);
-                    }
-                    resolve(response.data.response);
-                    window.removeEventListener("message", listener)
-                }
-            };
-          window.addEventListener('message', listener);
-          window.postMessage(message, "*");
-      });
+      const listener = (response: any) => {
+        if (response.data?.type === 'reactFiberResponse' && response.data?.messageId === messageId) {
+          if (this.debug) {
+            console.log("Content Received Response:", response.data.response);
+          }
+          resolve(response.data.response);
+          window.removeEventListener("message", listener)
+        }
+      };
+      window.addEventListener('message', listener);
+      window.postMessage(message, "*");
+    });
   }
 
 
-  async getState(key?: string | string[]): Promise<any> { // Type change: allow string or string[]
-    return this.sendMessage("getState", { key });
+  async getState(key ? : string | string[]): Promise < any > {
+    return this.sendMessage("getState", {
+      key
+    });
   }
 
-  async setState(update: any | ((prevState: any) => any)): Promise<ReactFiber> {
-    // Now async again.
+  async setState(update: any | ((prevState: any) => any)): Promise < ReactFiber > {
     const updateFnString = typeof update === 'function' ? update.toString() : null;
     const updateObject = typeof update !== 'function' ? update : null;
 
-    await this.sendMessage("setState", { updateFn: updateFnString, updateObject });
+    await this.sendMessage("setState", {
+      updateFn: updateFnString,
+      updateObject
+    });
     return this;
   }
 
 
-  async getProp(propName: string): Promise<any> {
-    return this.sendMessage("getProp", { propName });
+  async getProps(propName ? : string): Promise < any > {
+    return this.sendMessage("getProp", {
+      propName
+    });
   }
 
-  async setProp(propName: string, value: any): Promise<ReactFiber> {
-    // Now async again
-    await this.sendMessage("setProp", { propName, value });
+  async setProp(propName: string, value: any): Promise < ReactFiber > {
+    await this.sendMessage("setProp", {
+      propName,
+      value
+    });
     return this;
   }
 
-  async forceUpdate(): Promise<ReactFiber> {
-    // Now async again
+  async forceUpdate(): Promise < ReactFiber > {
     await this.sendMessage("forceUpdate");
     return this;
   }

src/seqta/utils/listeners/ClickListeners.ts

@@ -0,0 +1,46 @@
+import { waitForElm } from "@/SEQTA";
+import ReactFiber from "../ReactFiber";
+
+const handleNotificationClick = async (target: HTMLElement) => {
+  const notificationItem = target.closest('.notifications__item___2ErJN') as HTMLElement | null;
+  if (!notificationItem) return;
+
+  const buttonType = notificationItem.getAttribute('data-type');
+  if (buttonType !== 'message') return;
+
+  const notificationList = await ReactFiber.find('.notifications__list___rp2L2').getState();
+  const buttonId = notificationItem.getAttribute('data-id');
+  if (!buttonId) return;
+
+  const matchingNotification = notificationList.storeState.notifications.items.find(
+    (item: any) => item.notificationID === parseInt(buttonId)
+  );
+
+  await waitForElm('.Viewer__Viewer___32BH-', true, 20);
+
+  // Select the specific direct message
+  ReactFiber.find('.Viewer__Viewer___32BH-').setState({ selected: new Set([matchingNotification.message.messageID]) });
+};
+
+const clickListeners = [
+  {
+    selector: '.notifications__item___2ErJN',
+    handler: handleNotificationClick,
+  },
+];
+
+const registerClickListeners = () => {
+  console.log("Registering click listeners...");
+  
+  document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    
+    clickListeners.forEach(({ selector, handler }) => {
+      if (target.closest(selector)) {
+        handler(target);
+      }
+    });
+  });
+};
+
+export default registerClickListeners;