From 0e4827592bd0f6ccb323f9c66182ee4ff66bb102 Mon Sep 17 00:00:00 2001
From: "NGOCDG280\\ngocdg" <pnd280@gmail.com>
Date: Sat, 19 Oct 2024 23:35:42 +0700
Subject: [PATCH] perf: refine css selectors

---
 .env.chromium                                   | 2 +-
 .env.gecko                                      | 2 +-
 docs/changelog.md                               | 8 ++++++++
 gulpfile.js                                     | 2 +-
 package.json                                    | 2 +-
 src/app.config.ts                               | 9 +++++----
 src/content-script/hooks/useQueryBoxObserver.ts | 3 ++-
 src/utils/DomSelectors.ts                       | 4 ++--
 8 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/.env.chromium b/.env.chromium
index 1a7e8f3c..5ff3190e 100644
--- a/.env.chromium
+++ b/.env.chromium
@@ -1 +1 @@
-TARGET_BROWSER=chrome
+VITE_TARGET_BROWSER=chrome
diff --git a/.env.gecko b/.env.gecko
index 9ffcb3c3..99e6cddf 100644
--- a/.env.gecko
+++ b/.env.gecko
@@ -1 +1 @@
-TARGET_BROWSER=firefox
+VITE_TARGET_BROWSER=firefox
diff --git a/docs/changelog.md b/docs/changelog.md
index 5fbe1ece..3b8ff87c 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -2,10 +2,18 @@
 
 ---
 
+Complexity is going freemium soon, offering access to more advanced features. Features up to the official transition will remain free forever. Read more about it [here](https://github.com/pnd280/complexity/issues/19).
+
 Consider giving a star ⭐ on [Github](https://github.com/pnd280/complexity).
 
 💖 Support the development via [Ko-fi](https://ko-fi.com/pnd280) or [Paypal](https://paypal.me/pnd280).
 
+## v0.0.4.1
+
+_Release date: 20th Oct, 2024_
+
+-   **FIX**: Fixed performance issues.
+
 ## v0.0.4.0
 
 _Release date: 18th Oct, 2024_
diff --git a/gulpfile.js b/gulpfile.js
index 963e5d2c..a3d9786f 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -29,7 +29,7 @@ function removeUnwantedFiles(cb) {
 function zip() {
   const require = createRequire(import.meta.url);
   const manifest = require("./package.json");
-  const zipFileName = `${manifest.name.replaceAll(" ", "-")}-${manifest.version}-${process.env.TARGET_BROWSER}.zip`;
+  const zipFileName = `${manifest.name.replaceAll(" ", "-")}-${manifest.version}-${process.env.VITE_TARGET_BROWSER}.zip`;
 
   return gulp
     .src("dist/**")
diff --git a/package.json b/package.json
index b82760e6..4b5f368e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "complexity",
   "displayName": "Complexity - Perplexity AI Supercharged",
-  "version": "0.0.4.0",
+  "version": "0.0.4.1",
   "author": "pnd280",
   "description": "⚡ Supercharge your Perplexity AI",
   "type": "module",
diff --git a/src/app.config.ts b/src/app.config.ts
index 5bd1e566..2ea519f9 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -4,17 +4,18 @@ const env = typeof process === "undefined" ? import.meta.env : process.env;
 
 const envSchema = z.object({
   NODE_ENV: z.enum(["development", "production", "test"]).optional(),
-  TARGET_BROWSER: z.enum(["chrome", "firefox"]).optional().default("chrome"),
+  VITE_TARGET_BROWSER: z
+    .enum(["chrome", "firefox"])
+    .optional()
+    .default("chrome"),
   DEV: z.string().or(z.boolean()).optional(),
-  VITE_METADATA_BRANCH: z.string().optional().default("alpha"),
 });
 
 const parsedEnv = envSchema.parse(env);
 
 const appConfig = {
-  BROWSER: parsedEnv.TARGET_BROWSER,
+  BROWSER: parsedEnv.VITE_TARGET_BROWSER,
   IS_DEV: Boolean(parsedEnv.DEV) || parsedEnv.NODE_ENV === "development",
-  METADATA_BRANCH: parsedEnv.VITE_METADATA_BRANCH,
   "perplexity-ai": {
     globalMatches: ["https://www.perplexity.ai/*", "https://perplexity.ai/*"],
     globalExcludeMatches: [
diff --git a/src/content-script/hooks/useQueryBoxObserver.ts b/src/content-script/hooks/useQueryBoxObserver.ts
index ca9808b0..993b90e6 100644
--- a/src/content-script/hooks/useQueryBoxObserver.ts
+++ b/src/content-script/hooks/useQueryBoxObserver.ts
@@ -67,6 +67,7 @@ export default function useQueryBoxObserver({
         DomObserver.destroy(mainId);
         DomObserver.destroy(followUpId);
         DomObserver.destroy(alterAttachButtonId);
+        DomObserver.destroy(imageGenerationPopoverId);
       };
     },
     [
@@ -127,7 +128,7 @@ function observeFollowUpQueryBox({
   if (location !== "thread" && location !== "page")
     return DomObserver.destroy(id);
 
-  const $toolbar = $('textarea[placeholder="Ask follow-up"]').parent().next();
+  const $toolbar = $(DomSelectors.QUERY_BOX.TEXTAREA.FOLLOW_UP).parent().next();
 
   if (!$toolbar.length || $toolbar.attr(`data-${id}`)) return;
 
diff --git a/src/utils/DomSelectors.ts b/src/utils/DomSelectors.ts
index b1d8d387..de88243c 100644
--- a/src/utils/DomSelectors.ts
+++ b/src/utils/DomSelectors.ts
@@ -52,9 +52,9 @@ const DomSelectors = {
   },
   QUERY_BOX: {
     TEXTAREA: {
-      MAIN: '[data-testid="quick-search-modal"] textarea[placeholder][autocomplete][style*="height: 48px !important;"], .max-w-screen-md textarea[placeholder][autocomplete][style*="height: 48px !important;"]',
+      MAIN: '.max-w-screen-md textarea[placeholder][autocomplete][style*="height: 48px !important;"]',
       FOLLOW_UP:
-        '[location="thread"] textarea[placeholder][autocomplete][style*="height: 48px !important;"]',
+        '[location="thread"] textarea[placeholder][autocomplete][style*="height: 24px !important;"]',
       SPACE:
         '[location="space"] textarea[placeholder][autocomplete][style*="height: 48px !important;"]',
       ARBITRARY: