fix: dynamic seqta classes failing to load #248

src/seqta/ui/dev/hideSensitiveContent.ts

@@ -77,26 +77,26 @@ const contentConfig: ContentConfig = {
   },
 
   messageSubject: {
-    selector: '.MessageList__subject___1NV5O',
+    selector: '[class*="MessageList__subject___"]',
     action: (element) => { element.textContent = getRandomElement(mockData.messages.subjects); }
   },
 
   messageSender: {
-    selector: '.MessageList__value___1sN24',
+    selector: '[class*="MessageList__value___"]',
     action: (element) => { element.textContent = getRandomElement(mockData.messages.sender); }
   },
 
   messageRecipients: {
-    selector: '.MessageList__recipients___3hqpE .MessageList__value___1sN24',
+    selector: '[class*="MessageList__recipients___"] [class*="MessageList__value___"]',
     action: (element) => { element.textContent = 'Recipient(s) Redacted'; }
   },
 
   messageDate: {
-    selector: '.MessageList__date___7muMb',
+    selector: '[class*="MessageList__date___"]',
     action: (element) => { element.textContent = getRandomDate().toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'long' }); }
   },
   avatarImage: {
-    selector: '.Avatar__Avatar___gE5kx',
+    selector: '[class*="Avatar__Avatar___"]',
     action: (element) => { 
       if (element instanceof HTMLElement) {
         element.style.removeProperty('background-image');
@@ -105,7 +105,7 @@ const contentConfig: ContentConfig = {
     }
   },
   notificationCount: {
-    selector: '.notifications__bubble___1EkSQ',
+    selector: '[class*="notifications__bubble___"]',
     action: (element) => { element.textContent = Math.floor(Math.random() * 100).toString(); }
   },
   schoolName: {

src/seqta/utils/listeners/ClickListeners.ts

@@ -2,13 +2,13 @@ import { waitForElm } from "@/seqta/utils/waitForElm"
 import ReactFiber from "../ReactFiber";
 
 const handleNotificationClick = async (target: HTMLElement) => {
-  const notificationItem = target.closest('.notifications__item___2ErJN') as HTMLElement | null;
+  const notificationItem = target.closest('[class*="notifications__item___"]') 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 notificationList = await ReactFiber.find('[class*="notifications__list___"]').getState();
   const buttonId = notificationItem.getAttribute('data-id');
   if (!buttonId) return;
 
@@ -16,19 +16,19 @@ const handleNotificationClick = async (target: HTMLElement) => {
     (item: any) => item.notificationID === parseInt(buttonId)
   );
 
-  await waitForElm('.Viewer__Viewer___32BH-', true, 20);
+  await waitForElm('[class*="Viewer__Viewer___"] > div', true, 20);
 
   // Select the specific direct message
-  ReactFiber.find('.Viewer__Viewer___32BH-').setState({ selected: new Set([matchingNotification.message.messageID]) });
+  ReactFiber.find('[class*="Viewer__Viewer___"] > div').setState({ selected: new Set([matchingNotification.message.messageID]) });
 
   // Close the notifications panel
-  const notificationButton = document.querySelector('.notifications__notifications___3mmLY > button') as HTMLButtonElement | null;
+  const notificationButton = document.querySelector('[class*="notifications__notifications___"] > button') as HTMLButtonElement | null;
   notificationButton?.click();
 };
 
 const clickListeners = [
   {
-    selector: '.notifications__item___2ErJN',
+    selector: '[class*="notifications__item___"]',
     handler: handleNotificationClick,
   },
 ];