From 625fd06744d87b3f19c6b6ca355b9fcd75afb776 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 4 Dec 2024 17:04:26 -0500
Subject: [PATCH] UX: improve layout of inline title editing buttons (#1000)

---
 .../ai-category-suggester.gjs                 |  2 +-
 .../suggestion-menus/ai-tag-suggester.gjs     |  2 +-
 .../suggestion-menus/ai-title-suggester.gjs   |  2 +-
 .../modules/ai-helper/common/ai-helper.scss   | 50 ++++++++++++++++---
 4 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/assets/javascripts/discourse/components/suggestion-menus/ai-category-suggester.gjs b/assets/javascripts/discourse/components/suggestion-menus/ai-category-suggester.gjs
index 2728630b..9ed3ebe6 100644
--- a/assets/javascripts/discourse/components/suggestion-menus/ai-category-suggester.gjs
+++ b/assets/javascripts/discourse/components/suggestion-menus/ai-category-suggester.gjs
@@ -115,7 +115,7 @@ export default class AiCategorySuggester extends Component {
         @icon={{this.triggerIcon}}
         @identifier="ai-category-suggester"
         @onClose={{this.onClose}}
-        @triggerClass="suggestion-button suggest-category-button {{if
+        @triggerClass="btn-transparent suggestion-button suggest-category-button {{if
           this.loading
           'is-loading'
         }}"
diff --git a/assets/javascripts/discourse/components/suggestion-menus/ai-tag-suggester.gjs b/assets/javascripts/discourse/components/suggestion-menus/ai-tag-suggester.gjs
index dbc5ab86..c6adb0c0 100644
--- a/assets/javascripts/discourse/components/suggestion-menus/ai-tag-suggester.gjs
+++ b/assets/javascripts/discourse/components/suggestion-menus/ai-tag-suggester.gjs
@@ -180,7 +180,7 @@ export default class AiTagSuggester extends Component {
         @icon={{this.triggerIcon}}
         @identifier="ai-tag-suggester"
         @onClose={{this.onClose}}
-        @triggerClass="suggestion-button suggest-tags-button {{if
+        @triggerClass="btn-transparent suggestion-button suggest-tags-button {{if
           this.loading
           'is-loading'
         }}"
diff --git a/assets/javascripts/discourse/components/suggestion-menus/ai-title-suggester.gjs b/assets/javascripts/discourse/components/suggestion-menus/ai-title-suggester.gjs
index 286274c4..91da2a67 100644
--- a/assets/javascripts/discourse/components/suggestion-menus/ai-title-suggester.gjs
+++ b/assets/javascripts/discourse/components/suggestion-menus/ai-title-suggester.gjs
@@ -117,7 +117,7 @@ export default class AiTitleSuggester extends Component {
         @icon={{this.triggerIcon}}
         @identifier="ai-title-suggester"
         @onClose={{this.onClose}}
-        @triggerClass="suggestion-button suggest-titles-button {{if
+        @triggerClass="btn-transparent suggestion-button suggest-titles-button {{if
           this.loading
           'is-loading'
         }}"
diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
index 7cf4518b..d731a324 100644
--- a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
+++ b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
@@ -209,6 +209,30 @@
       border-bottom-right-radius: 0;
     }
   }
+
+  #edit-title {
+    padding-right: 2em;
+  }
+
+  .category-chooser {
+    .select-kit-header-wrapper {
+      padding-right: 1.5em;
+    }
+  }
+
+  .mini-tag-chooser {
+    .multi-select-header {
+      padding-right: 2em;
+    }
+  }
+
+  .select-kit.is-expanded {
+    // need to raise the z-index so the sibling input buttons don't cover the dropdown
+    z-index: z("dropdown") + 1;
+    + button {
+      z-index: z("dropdown") + 1;
+    }
+  }
 }
 
 .suggestion-button {
@@ -217,15 +241,23 @@
   }
 }
 
+.edit-title__wrapper,
+.edit-category__wrapper,
+.edit-tags__wrapper {
+  position: relative;
+}
+
 .suggest-titles-button,
 .suggest-tags-button,
 .suggest-category-button {
-  align-self: baseline;
-  border: 1px solid var(--primary-400);
-  border-left: none;
-  background: none;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  position: absolute;
+  right: 0;
+  top: 1px; // container border width
+  z-index: z("dropdown");
+
+  #reply-control & {
+    z-index: z("composer", "dropdown") + 1;
+  }
 }
 
 .ai-category-suggester-content,
@@ -319,6 +351,12 @@
       }
     }
   }
+
+  .showing-ai-suggestions {
+    #reply-title {
+      padding-right: 2em;
+    }
+  }
 }
 
 .suggest-tags-button + .ai-suggestions-menu {