UX: Render invitees count (#663)

assets/javascripts/discourse/components/discourse-post-event/invitees.gjs

@@ -1,78 +1,38 @@
 import Component from "@glimmer/component";
-import { action } from "@ember/object";
 import { service } from "@ember/service";
-import DButton from "discourse/components/d-button";
 import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
-import PostEventInvitees from "../modal/post-event-invitees";
 import Invitee from "./invitee";
 
 export default class DiscoursePostEventInvitees extends Component {
   @service modal;
   @service siteSettings;
 
-  @action
-  showAllInvitees() {
-    this.modal.show(PostEventInvitees, {
-      model: {
-        event: this.args.event,
-        title: this.args.event.title,
-        extraClass: this.args.event.extraClass,
-      },
-    });
+  get hasAttendees() {
+    return this.args.event.stats.going > 0;
   }
 
   get statsInfo() {
-    const stats = [];
-    const visibleStats = this.siteSettings.event_participation_buttons
-      .split("|")
-      .filter(Boolean);
+    return this.args.event.stats.going;
+  }
 
-    if (this.args.event.isPrivate) {
-      visibleStats.push("invited");
-    }
-
-    visibleStats.forEach((button) => {
-      const localeKey = button.replace(" ", "_");
-      if (button === "not_going") {
-        button = "notGoing";
-      }
-
-      const count = this.args.event.stats[button] || 0;
-
-      const label = i18n(
-        `discourse_post_event.models.invitee.status.${localeKey}_count`,
-        { count }
-      );
-
-      stats.push({
-        class: `event-status-${localeKey}`,
-        label,
-      });
+  get inviteesTitle() {
+    return i18n("discourse_post_event.models.invitee.status.going_count", {
+      count: this.args.event.stats.going,
     });
-
-    return stats;
   }
 
   <template>
     {{#unless @event.minimal}}
       {{#if @event.shouldDisplayInvitees}}
         <section class="event__section event-invitees">
-          <div class="header">
-            <div class="event-invitees-status">
-              {{#each this.statsInfo as |info|}}
-                <span class={{info.class}}>{{info.label}}</span>
-              {{/each}}
-            </div>
-
-            <DButton
-              class="show-all btn-small"
-              @label="discourse_post_event.show_all"
-              @action={{this.showAllInvitees}}
-            />
-          </div>
           <div class="event-invitees-avatars-container">
-            {{icon "users"}}
+            <div class="event-invitees-icon" title={{this.inviteesTitle}}>
+              {{icon "users"}}
+              {{#if this.hasAttendees}}
+                <span class="going">{{this.statsInfo}}</span>
+              {{/if}}
+            </div>
             <ul class="event-invitees-avatars">
               {{#each @event.sampleInvitees as |invitee|}}
                 <Invitee @invitee={{invitee}} />

assets/stylesheets/common/discourse-post-event.scss

@@ -401,4 +401,20 @@ $show-interested: inherit;
     font-weight: 400;
     grid-column-start: 2;
   }
+  .event-invitees-icon {
+    position: relative;
+    display: flex;
+  }
+  .event-invitees-icon .going {
+    font-size: var(--font-down-3);
+    position: absolute;
+    right: 4px;
+    bottom: -8px;
+    background: var(--secondary);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary-medium);
+  }
 }