UX: Improve composer presence-display positioning (#15235)

Previously the discourse-presence plugin was using a `position: absolute` hack to display the 'replying...' users in the top right of the composer. This commit adds a more suitable plugin outlet, and updates the discourse-presence styling so it slots into the flex-box layout at the top of the composer

app/assets/javascripts/discourse/app/templates/composer.hbs

@@ -44,6 +44,9 @@
                 {{/if}}
               </div>
             {{/unless}}
+
+            {{plugin-outlet name="before-composer-controls" args=(hash model=model) tagName="" connectorTagName=""}}
+
             {{composer-toggles
               composeState=model.composeState
               showToolbar=showToolbar

plugins/discourse-presence/assets/javascripts/discourse/components/composer-presence-display.js

@@ -7,6 +7,7 @@ import Component from "@ember/component";
 import { inject as service } from "@ember/service";
 
 export default Component.extend({
+  tagName: "",
   presence: service(),
   composerPresenceManager: service(),
 

plugins/discourse-presence/assets/javascripts/discourse/templates/components/composer-presence-display.hbs

@@ -12,10 +12,14 @@
         {{~else~}}
           {{i18n "presence.editing" count=presenceUsers.length}}
         {{~/if}}
-      </span>{{!-- (using comment to stop whitespace)
+        {{~""~}}
---}}</span>{{!--
+      </span>
---}}<span class="wave">
+      {{~""~}}
-      <span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
+      <span class="wave">
+        {{~""~}}
+        <span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
+        {{~""~}}
+      </span>
     </span>
   </div>
 {{/if}}

plugins/discourse-presence/assets/stylesheets/presence.scss

@@ -52,32 +52,15 @@
 }
 
 .composer-fields .presence-users {
-  position: absolute;
+  overflow: hidden;
-  top: 20px;
+  flex-shrink: 1;
-  right: 95px;
+  .presence-avatars {
-  @media screen and (max-width: $small-width) {
+    flex-wrap: nowrap;
-    max-width: 318px;
-    .presence-avatars {
-      flex-wrap: nowrap;
-    }
   }
 }
 
-.mobile-view {
+.mobile-view .composer-fields .presence-users .description {
-  .presence-users {
+  display: none;
-    font-size: $font-down-1;
-  }
-  .composer-fields .presence-users {
-    top: 7px;
-    right: 65px;
-    max-width: 70px;
-    .presence-avatars {
-      flex-wrap: nowrap;
-    }
-    .description {
-      display: none;
-    }
-  }
 }
 
 // TMP: RTL overrides

plugins/discourse-presence/test/javascripts/acceptance/discourse-presence-test.js

@@ -193,12 +193,7 @@ acceptance("Discourse Presence Plugin", function (needs) {
     await click("#topic-footer-buttons .btn.create");
     assert.ok(exists(".d-editor-input"), "the composer input is visible");
 
-    const avatarSelector =
+    const avatarSelector = ".composer-fields .presence-avatars .avatar";
-      ".composer-fields-outlet.presence .presence-avatars .avatar";
-    assert.ok(
-      exists(".composer-fields-outlet.presence"),
-      "includes the presence component"
-    );
     assert.strictEqual(count(avatarSelector), 0, "no avatars displayed");
 
     await joinChannel("/discourse-presence/reply/280", {