From 50c2d56aff75689ecd21640633db823839b2e11c Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Mon, 26 Aug 2024 08:32:39 -0700
Subject: [PATCH] UX: Topic summary UI improvements due to DMenu changes (#772)

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
---
 .../ai-summary-box.gjs                        |   2 +-
 .../summarization/common/ai-summary.scss      | 328 +++++++++---------
 .../summarization/desktop/ai-summary.scss     |  10 +-
 .../summarization/mobile/ai-summary.scss      |   3 +
 plugin.rb                                     |   1 +
 5 files changed, 170 insertions(+), 174 deletions(-)
 create mode 100644 assets/stylesheets/modules/summarization/mobile/ai-summary.scss

diff --git a/assets/javascripts/discourse/connectors/topic-map-expanded-after/ai-summary-box.gjs b/assets/javascripts/discourse/connectors/topic-map-expanded-after/ai-summary-box.gjs
index 177890e7..40e944ba 100644
--- a/assets/javascripts/discourse/connectors/topic-map-expanded-after/ai-summary-box.gjs
+++ b/assets/javascripts/discourse/connectors/topic-map-expanded-after/ai-summary-box.gjs
@@ -177,7 +177,7 @@ export default class AiSummaryBox extends Component {
       >
         <DMenu
           @onShow={{this.generateSummary}}
-          @arrow={{true}}
+          @arrow={{false}}
           @identifier="topic-map__ai-summary"
           @onRegisterApi={{this.onRegisterApi}}
           @interactive={{true}}
diff --git a/assets/stylesheets/modules/summarization/common/ai-summary.scss b/assets/stylesheets/modules/summarization/common/ai-summary.scss
index dccb2a7b..b467da50 100644
--- a/assets/stylesheets/modules/summarization/common/ai-summary.scss
+++ b/assets/stylesheets/modules/summarization/common/ai-summary.scss
@@ -39,174 +39,174 @@
 }
 
 .topic-map__ai-summary-content {
-  .fk-d-menu__inner-content,
-  .d-modal__body {
-    .ai-summary-container {
-      width: 100%;
+  .ai-summary-container {
+    width: 100%;
+  }
+
+  .ai-summary {
+    &__list {
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+      margin: 0;
     }
-
-    .ai-summary {
-      &__list {
-        list-style: none;
-        display: flex;
-        flex-wrap: wrap;
-        padding: 0;
-        margin: 0;
-      }
-      &__list-item {
-        background: var(--primary-300);
-        border-radius: var(--d-border-radius);
-        margin-right: 8px;
-        margin-bottom: 8px;
-        height: 1em;
-        opacity: 0;
-        display: block;
-        &:nth-child(1) {
-          width: 10%;
-        }
-
-        &:nth-child(2) {
-          width: 12%;
-        }
-
-        &:nth-child(3) {
-          width: 18%;
-        }
-
-        &:nth-child(4) {
-          width: 14%;
-        }
-
-        &:nth-child(5) {
-          width: 18%;
-        }
-
-        &:nth-child(6) {
-          width: 14%;
-        }
-
-        &:nth-child(7) {
-          width: 22%;
-        }
-
-        &:nth-child(8) {
-          width: 05%;
-        }
-
-        &:nth-child(9) {
-          width: 25%;
-        }
-
-        &:nth-child(10) {
-          width: 14%;
-        }
-
-        &:nth-child(11) {
-          width: 18%;
-        }
-
-        &:nth-child(12) {
-          width: 12%;
-        }
-
-        &:nth-child(13) {
-          width: 22%;
-        }
-
-        &:nth-child(14) {
-          width: 18%;
-        }
-
-        &:nth-child(15) {
-          width: 13%;
-        }
-
-        &:nth-child(16) {
-          width: 22%;
-        }
-
-        &:nth-child(17) {
-          width: 19%;
-        }
-
-        &:nth-child(18) {
-          width: 13%;
-        }
-
-        &:nth-child(19) {
-          width: 22%;
-        }
-
-        &:nth-child(20) {
-          width: 25%;
-        }
-        &.is-shown {
-          opacity: 1;
-        }
-        &.show {
-          animation: appear 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
-            forwards;
-          @media (prefers-reduced-motion) {
-            animation-duration: 0s;
-          }
-        }
-        @media (prefers-reduced-motion: no-preference) {
-          &.blink {
-            animation: blink 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
-          }
-        }
-      }
-      &__generating-text {
-        display: inline-block;
-        margin-left: 3px;
-      }
-      &__indicator-wave {
-        flex: 0 0 auto;
-        display: inline-flex;
-      }
-      &__indicator-dot {
-        display: inline-block;
-        @media (prefers-reduced-motion: no-preference) {
-          animation: ai-summary__indicator-wave 1.8s linear infinite;
-        }
-        &:nth-child(2) {
-          animation-delay: -1.6s;
-        }
-        &:nth-child(3) {
-          animation-delay: -1.4s;
-        }
-      }
-    }
-
-    .placeholder-summary {
-      padding-top: 0.5em;
-    }
-
-    .placeholder-summary-text {
-      display: inline-block;
+    &__list-item {
+      background: var(--primary-300);
+      border-radius: var(--d-border-radius);
+      margin-right: 8px;
+      margin-bottom: 8px;
       height: 1em;
-      margin-top: 0.6em;
-      width: 100%;
-    }
-
-    .summarized-on p {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 4px;
-      margin-bottom: 0;
-    }
-
-    .outdated-summary {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      button {
-        margin-top: 0.5em;
+      opacity: 0;
+      display: block;
+      &:nth-child(1) {
+        width: 10%;
       }
-      p {
-        color: var(--primary-medium);
+
+      &:nth-child(2) {
+        width: 12%;
       }
+
+      &:nth-child(3) {
+        width: 18%;
+      }
+
+      &:nth-child(4) {
+        width: 14%;
+      }
+
+      &:nth-child(5) {
+        width: 18%;
+      }
+
+      &:nth-child(6) {
+        width: 14%;
+      }
+
+      &:nth-child(7) {
+        width: 22%;
+      }
+
+      &:nth-child(8) {
+        width: 05%;
+      }
+
+      &:nth-child(9) {
+        width: 25%;
+      }
+
+      &:nth-child(10) {
+        width: 14%;
+      }
+
+      &:nth-child(11) {
+        width: 18%;
+      }
+
+      &:nth-child(12) {
+        width: 12%;
+      }
+
+      &:nth-child(13) {
+        width: 22%;
+      }
+
+      &:nth-child(14) {
+        width: 18%;
+      }
+
+      &:nth-child(15) {
+        width: 13%;
+      }
+
+      &:nth-child(16) {
+        width: 22%;
+      }
+
+      &:nth-child(17) {
+        width: 19%;
+      }
+
+      &:nth-child(18) {
+        width: 13%;
+      }
+
+      &:nth-child(19) {
+        width: 22%;
+      }
+
+      &:nth-child(20) {
+        width: 25%;
+      }
+      &.is-shown {
+        opacity: 1;
+      }
+      &.show {
+        animation: appear 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s forwards;
+        @media (prefers-reduced-motion) {
+          animation-duration: 0s;
+        }
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        &.blink {
+          animation: blink 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+        }
+      }
+    }
+    &__generating-text {
+      display: inline-block;
+      margin-left: 3px;
+    }
+    &__indicator-wave {
+      flex: 0 0 auto;
+      display: inline-flex;
+    }
+    &__indicator-dot {
+      display: inline-block;
+      @media (prefers-reduced-motion: no-preference) {
+        animation: ai-summary__indicator-wave 1.8s linear infinite;
+      }
+      &:nth-child(2) {
+        animation-delay: -1.6s;
+      }
+      &:nth-child(3) {
+        animation-delay: -1.4s;
+      }
+    }
+  }
+
+  .placeholder-summary {
+    padding-top: 0.5em;
+  }
+
+  .placeholder-summary-text {
+    display: inline-block;
+    height: 1em;
+    margin-top: 0.6em;
+    width: 100%;
+  }
+
+  .generated-summary p {
+    margin: 0;
+  }
+
+  .summarized-on p {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.25em;
+    margin-bottom: 0;
+  }
+
+  .outdated-summary {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    button {
+      margin-top: 0.5em;
+    }
+    p {
+      color: var(--primary-medium);
     }
   }
 }
diff --git a/assets/stylesheets/modules/summarization/desktop/ai-summary.scss b/assets/stylesheets/modules/summarization/desktop/ai-summary.scss
index f6054af9..3ae9e084 100644
--- a/assets/stylesheets/modules/summarization/desktop/ai-summary.scss
+++ b/assets/stylesheets/modules/summarization/desktop/ai-summary.scss
@@ -9,14 +9,9 @@
       max-width: 470px !important; //overruling JS
       max-height: calc(100vh - var(--header-offset) - 3rem);
 
-      &__inner-content {
-        max-height: unset;
-        padding: 0;
-      }
-
       .ai-summary__header,
       .ai-summary-box {
-        padding-inline: 1.5rem;
+        padding: 0.75em 1rem;
         box-sizing: border-box;
       }
 
@@ -36,9 +31,6 @@
             margin: 0;
           }
         }
-        &-box {
-          padding-block: 1rem;
-        }
       }
     }
   }
diff --git a/assets/stylesheets/modules/summarization/mobile/ai-summary.scss b/assets/stylesheets/modules/summarization/mobile/ai-summary.scss
new file mode 100644
index 00000000..e9092b13
--- /dev/null
+++ b/assets/stylesheets/modules/summarization/mobile/ai-summary.scss
@@ -0,0 +1,3 @@
+.ai-summary-box {
+  padding: 0.75em 1rem;
+}
diff --git a/plugin.rb b/plugin.rb
index 0d513384..501a0304 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -16,6 +16,7 @@ enabled_site_setting :discourse_ai_enabled
 register_asset "stylesheets/modules/ai-helper/common/ai-helper.scss"
 register_asset "stylesheets/modules/ai-helper/mobile/ai-helper.scss", :mobile
 
+register_asset "stylesheets/modules/summarization/mobile/ai-summary.scss", :mobile
 register_asset "stylesheets/modules/summarization/common/ai-summary.scss"
 register_asset "stylesheets/modules/summarization/desktop/ai-summary.scss", :desktop