From 22d1e71dc9fc59a4fa547d42cbcfa965fec373d4 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Wed, 11 Sep 2024 05:45:48 +0200
Subject: [PATCH] UX: AI post helper DMenu styling (#770)

---
 .../components/ai-helper-options-list.gjs     |  2 +-
 .../components/ai-post-helper-menu.gjs        |  6 +-
 .../modules/ai-helper/common/ai-helper.scss   | 70 +++++++------------
 .../desktop/ai-helper-fk-modals.scss          |  9 +++
 .../ai-helper/mobile/ai-helper-fk-modals.scss | 43 ++++++++++++
 config/locales/client.en.yml                  |  1 -
 plugin.rb                                     |  2 +
 7 files changed, 81 insertions(+), 52 deletions(-)
 create mode 100644 assets/stylesheets/modules/ai-helper/desktop/ai-helper-fk-modals.scss
 create mode 100644 assets/stylesheets/modules/ai-helper/mobile/ai-helper-fk-modals.scss

diff --git a/assets/javascripts/discourse/components/ai-helper-options-list.gjs b/assets/javascripts/discourse/components/ai-helper-options-list.gjs
index 860ec48b..b0499514 100644
--- a/assets/javascripts/discourse/components/ai-helper-options-list.gjs
+++ b/assets/javascripts/discourse/components/ai-helper-options-list.gjs
@@ -20,7 +20,7 @@ const AiHelperOptionsList = <template>
             @action={{fn @performAction option}}
             data-name={{option.name}}
             data-value={{option.id}}
-            class="btn-flat ai-helper-options__button"
+            class="ai-helper-options__button"
           />
         </li>
       {{/if}}
diff --git a/assets/javascripts/discourse/components/ai-post-helper-menu.gjs b/assets/javascripts/discourse/components/ai-post-helper-menu.gjs
index 99f345f4..2a9c36f6 100644
--- a/assets/javascripts/discourse/components/ai-post-helper-menu.gjs
+++ b/assets/javascripts/discourse/components/ai-post-helper-menu.gjs
@@ -13,7 +13,6 @@ import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { sanitize } from "discourse/lib/text";
 import { clipboardCopy } from "discourse/lib/utilities";
-import i18n from "discourse-common/helpers/i18n";
 import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 import eq from "truth-helpers/helpers/eq";
@@ -285,10 +284,7 @@ export default class AiPostHelperMenu extends Component {
       (and this.site.mobileView (eq this.menuState this.MENU_STATES.options))
     }}
       <div class="ai-post-helper-menu__selected-text">
-        <h2>
-          {{i18n "discourse_ai.ai_helper.post_options_menu.selected_text"}}
-        </h2>
-        <p>{{@data.selectedText}}</p>
+        {{@data.selectedText}}
       </div>
     {{/if}}
 
diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
index 99aa408f..70c8fac3 100644
--- a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
+++ b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss
@@ -78,7 +78,7 @@
 .ai-custom-prompt {
   display: flex;
   gap: 0.25rem;
-  margin-bottom: 0.5rem;
+  padding: 0.75em 1rem;
 
   &__input[type="text"] {
     border-color: var(--primary-400);
@@ -308,10 +308,19 @@
 
 .ai-post-helper {
   &__suggestion {
-    padding: 0.5rem;
     display: flex;
     flex-direction: column;
 
+    h2 {
+      font-size: var(--font-0);
+      border-bottom: 1px solid var(--primary-low);
+      padding-bottom: 0.5em;
+    }
+
+    p {
+      margin: 0;
+    }
+
     &__copy {
       .d-icon-check {
         color: var(--success);
@@ -325,18 +334,17 @@
     &__buttons {
       display: flex;
       align-items: center;
-      justify-content: stretch;
-      margin-top: 0.5rem;
       gap: 0.5rem;
       .btn {
-        width: 100%;
+        flex-grow: 1;
+        padding-inline: 0;
       }
     }
   }
 
   &__fast-edit {
     .fast-edit-container {
-      padding-top: 0.5em;
+      padding: 0.75em 1rem;
     }
   }
 }
@@ -556,43 +564,10 @@
   color: var(--primary-high);
 }
 
-.ai-post-helper-menu__selected-text {
-  padding: 0.75rem 1rem;
-  margin: 0.5rem;
-  border: 1px solid var(--primary-low-mid);
-  border-radius: var(--d-border-radius);
-
-  h2 {
-    font-size: var(--font-0);
-  }
-
-  p {
-    @include ellipsis;
-    font-size: var(--font-down-2);
-    margin: 0;
-  }
-}
-
-// Mobile Bottom Modal
-.ai-post-helper-menu-content {
-  .ai-helper-loading {
-    justify-content: center;
-  }
-
-  .ai-helper-options__button {
-    padding: 1rem;
-  }
-}
-
 // AI Helper Options List
 .ai-helper-options {
   margin: 0;
   list-style: none;
-  padding: 0.5rem;
-
-  li:not(:last-child) {
-    border-bottom: 1px solid var(--primary-low);
-  }
 
   &__button {
     justify-content: left;
@@ -601,19 +576,24 @@
     width: 100%;
     border-radius: 0;
     margin: 0;
-    padding-block: 0.6rem;
-
-    .d-button-label {
-      color: var(--primary-very-high);
-    }
+    padding: 0.5em 1rem;
 
     &:focus,
     &:hover {
       color: var(--primary);
       background: var(--d-hover);
 
+      .discourse-no-touch & {
+        color: var(--primary);
+        background: var(--d-hover);
+      }
+
       .d-icon {
-        color: var(--primary-medium);
+        color: var(--primary-high);
+
+        .discourse-no-touch & {
+          color: var(--primary-high);
+        }
       }
     }
   }
diff --git a/assets/stylesheets/modules/ai-helper/desktop/ai-helper-fk-modals.scss b/assets/stylesheets/modules/ai-helper/desktop/ai-helper-fk-modals.scss
new file mode 100644
index 00000000..f2fe3e1a
--- /dev/null
+++ b/assets/stylesheets/modules/ai-helper/desktop/ai-helper-fk-modals.scss
@@ -0,0 +1,9 @@
+.fk-d-menu {
+  .ai-post-helper {
+    &__suggestion__text,
+    &__suggestion__buttons {
+      padding: 0.75em 1rem;
+      margin: 0;
+    }
+  }
+}
diff --git a/assets/stylesheets/modules/ai-helper/mobile/ai-helper-fk-modals.scss b/assets/stylesheets/modules/ai-helper/mobile/ai-helper-fk-modals.scss
new file mode 100644
index 00000000..e61615f8
--- /dev/null
+++ b/assets/stylesheets/modules/ai-helper/mobile/ai-helper-fk-modals.scss
@@ -0,0 +1,43 @@
+.fk-d-menu-modal {
+  &.ai-post-helper-menu-content {
+    .ai-post-helper {
+      &__suggestion__text,
+      &__suggestion__buttons {
+        padding: 0.75em 1rem;
+        margin: 0;
+      }
+    }
+
+    .d-modal__body {
+      display: flex;
+      flex-direction: column;
+      max-height: 100%;
+      overflow: hidden;
+    }
+
+    .ai-post-helper-menu {
+      &__selected-text {
+        margin: 0.75em 1rem;
+        padding: 0.5em;
+        border-radius: var(--d-border-radius);
+        border: 1px solid var(--primary-low);
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
+        overflow: auto;
+        overscroll-behavior: contain;
+      }
+    }
+
+    .ai-helper-options {
+      padding: 0;
+    }
+
+    .ai-custom-prompt {
+      padding: 0.75em 1rem;
+      margin: 0;
+    }
+
+    .ai-helper-loading {
+      justify-content: center;
+    }
+  }
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 55d324f2..139e3627 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -318,7 +318,6 @@ en:
           cancel: "Cancel"
           insert_footnote: "Add footnote"
           footnote_credits: "Explanation by AI"
-          selected_text: "Selected Text"
         fast_edit:
           suggest_button: "Suggest Edit"
         thumbnail_suggestions:
diff --git a/plugin.rb b/plugin.rb
index a221f9db..7b9d51f6 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -16,7 +16,9 @@ enabled_site_setting :discourse_ai_enabled
 register_asset "stylesheets/common/streaming.scss"
 
 register_asset "stylesheets/modules/ai-helper/common/ai-helper.scss"
+register_asset "stylesheets/modules/ai-helper/desktop/ai-helper-fk-modals.scss", :desktop
 register_asset "stylesheets/modules/ai-helper/mobile/ai-helper.scss", :mobile
+register_asset "stylesheets/modules/ai-helper/mobile/ai-helper-fk-modals.scss", :mobile
 
 register_asset "stylesheets/modules/summarization/mobile/ai-summary.scss", :mobile
 register_asset "stylesheets/modules/summarization/common/ai-summary.scss"