From 317ded1ddcaf2dd40a90592338f99f47bbfb39a1 Mon Sep 17 00:00:00 2001
From: Nevo David <me@nevos.io>
Date: Sat, 17 May 2025 15:57:57 +0700
Subject: [PATCH] feat: fix x buttons

---
 apps/extension/package.json                   |  2 +-
 .../content/elements/action.component.tsx     |  7 +++++--
 .../src/pages/content/main.content.tsx        | 21 +++++++++++++++++++
 .../src/providers/list/x.provider.ts          |  2 +-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/apps/extension/package.json b/apps/extension/package.json
index e417706a..a3feacd9 100644
--- a/apps/extension/package.json
+++ b/apps/extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "postiz-extension",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A simple chrome & firefox extension template with Vite, React, TypeScript and Tailwind CSS.",
   "scripts": {
     "build": "rm -rf dist && vite build --config vite.config.chrome.ts && zip -r extension.zip dist",
diff --git a/apps/extension/src/pages/content/elements/action.component.tsx b/apps/extension/src/pages/content/elements/action.component.tsx
index aad68cc5..ea6ec012 100644
--- a/apps/extension/src/pages/content/elements/action.component.tsx
+++ b/apps/extension/src/pages/content/elements/action.component.tsx
@@ -61,8 +61,9 @@ export const ActionComponent: FC<{
   actionType: string;
   provider: ProviderInterface;
   wrap: boolean;
+  selector: string;
 }> = memo((props) => {
-  const { wrap, provider, target, actionType } = props;
+  const { wrap, provider, selector, target, actionType } = props;
   const [modal, showModal] = useState(false);
   const handle = useCallback(async (e: any) => {
     showModal(true);
@@ -72,7 +73,8 @@ export const ActionComponent: FC<{
 
   useEffect(() => {
     const blockingDiv = document.createElement('div');
-    if (document.querySelector('#blockingDiv')) {
+    if (document.querySelector(`.${selector}`)) {
+      console.log('already exists');
       return;
     }
 
@@ -87,6 +89,7 @@ export const ActionComponent: FC<{
       blockingDiv.style.width = `${targetInformation.width}px`;
       blockingDiv.style.height = `${targetInformation.height}px`;
       blockingDiv.style.zIndex = '9999';
+      blockingDiv.className = selector;
 
       document.body.appendChild(blockingDiv);
       blockingDiv.addEventListener('click', handle);
diff --git a/apps/extension/src/pages/content/main.content.tsx b/apps/extension/src/pages/content/main.content.tsx
index b9bdf635..339fbbfd 100644
--- a/apps/extension/src/pages/content/main.content.tsx
+++ b/apps/extension/src/pages/content/main.content.tsx
@@ -157,9 +157,30 @@ export const MainContentInner: FC = (props) => {
           actionType={actionEl.actionType}
           provider={provider}
           wrap={true}
+          selector={stringToABC(provider.element.split(',').map(z => z.trim()).find(p => actionEl.element.matches(p)) || '')}
         />,
         actionEl.element
       )}
     </Fragment>
   ));
 };
+
+function stringToABC(text: string, length = 8) {
+  // Simple DJB2-like hash (non-cryptographic!)
+  let hash = 5381;
+  for (let i = 0; i < text.length; i++) {
+    hash = (hash * 33) ^ text.charCodeAt(i);
+  }
+
+  hash = Math.abs(hash);
+
+  // Convert to base-26 string using a–z
+  const alphabet = 'abcdefghijklmnopqrstuvwxyz';
+  let result = '';
+  while (result.length < length) {
+    result = alphabet[hash % 26] + result;
+    hash = Math.floor(hash / 26);
+  }
+
+  return result;
+}
diff --git a/apps/extension/src/providers/list/x.provider.ts b/apps/extension/src/providers/list/x.provider.ts
index df7f7c40..52e62c9a 100644
--- a/apps/extension/src/providers/list/x.provider.ts
+++ b/apps/extension/src/providers/list/x.provider.ts
@@ -3,7 +3,7 @@ import { ProviderInterface } from '@gitroom/extension/providers/provider.interfa
 export class XProvider implements ProviderInterface {
   identifier = 'x';
   baseUrl = 'https://x.com';
-  element = `[data-testid="tweetTextarea_0_label"]`;
+  element = `[data-testid="primaryColumn"]:has([data-testid="toolBar"]) [data-testid="tweetTextarea_0_label"], [data-testid="SideNav_NewTweet_Button"]`;
   attachTo = `#react-root`;
   style = "dark" as "dark";
   findIdentifier = (element: HTMLElement) => {