From f6996a6ef0d872150862c5d38937a9279d9f0c0a Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Fri, 3 Nov 2023 11:41:57 -0700
Subject: [PATCH] DEV: Add wrapping classes and remove `has()` usage (#281)

---
 .../components/ai-suggestion-dropdown.gjs     | 30 ++++++++++++++++++-
 .../modules/ai-helper/common/ai-helper.scss   |  8 ++---
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/assets/javascripts/discourse/components/ai-suggestion-dropdown.gjs b/assets/javascripts/discourse/components/ai-suggestion-dropdown.gjs
index eeb5fe35..722b228a 100644
--- a/assets/javascripts/discourse/components/ai-suggestion-dropdown.gjs
+++ b/assets/javascripts/discourse/components/ai-suggestion-dropdown.gjs
@@ -32,13 +32,33 @@ export default class AISuggestionDropdown extends Component {
 
   get showAIButton() {
     const minCharacterCount = 40;
-    return this.composer.model.replyLength > minCharacterCount;
+    const isShowAIButton = this.composer.model.replyLength > minCharacterCount;
+    const composerFields = document.querySelector(".composer-fields");
+    
+    if (composerFields) {
+      if (isShowAIButton) {
+        composerFields.classList.add("showing-ai-suggestions");
+      } else {
+        composerFields.classList.remove("showing-ai-suggestions");
+      }
+    }
+
+    return isShowAIButton;
   }
 
   get disableSuggestionButton() {
     return this.loading;
   }
 
+  @action
+  applyClasses() {
+    if (this.showAIButton) {
+      document.querySelector(".composer-fields")?.classList.add("showing-ai-suggestions");
+    } else {
+      document.querySelector(".composer-fields")?.classList.remove("showing-ai-suggestions");
+    }
+  }
+
   @bind
   onClickOutside(event) {
     const menu = document.querySelector(".ai-title-suggestions-menu");
@@ -111,10 +131,18 @@ export default class AISuggestionDropdown extends Component {
         this.loading = false;
         this.suggestIcon = "sync-alt";
         this.showMenu = true;
+
+        if (this.args.mode === "suggest_category") {
+          document.querySelector(".category-input")?.classList.add("showing-ai-suggestion-menu");
+        }
       });
   }
 
   #closeMenu() {
+    if (this.showMenu && this.args.mode === "suggest_category") {
+      document.querySelector(".category-input")?.classList.remove("showing-ai-suggestion-menu");
+    }
+
     this.suggestIcon = "discourse-sparkles";
     this.showMenu = false;
     this.showErrors = false;
diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
index 6ae177eb..f29be273 100644
--- a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
+++ b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
@@ -249,7 +249,7 @@
   border-left: none;
 }
 
-.title-input:has(.suggestion-button) {
+.showing-ai-suggestions .title-input {
   // border on focus should be on top of suggestion button
   input:focus {
     z-index: 1;
@@ -288,14 +288,14 @@
   }
 }
 
-.category-input:has(.ai-suggestions-menu) {
+.category-input.showing-ai-suggestion-menu {
   position: relative;
 }
 
 // Prevent suggestion button from wrapping on smaller screens
 @media screen and (max-width: 768px) {
-  #reply-control {
-    .category-input:has(.suggestion-button) {
+  #reply-control .composer-fields.showing-ai-suggestions {
+    .category-input {
       .category-chooser {
         width: 10px;
       }