UX: Change placement and position of status buttons

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

@@ -7,6 +7,7 @@ import concatClass from "discourse/helpers/concat-class";
 import replaceEmoji from "discourse/helpers/replace-emoji";
 import routeAction from "discourse/helpers/route-action";
 import icon from "discourse-common/helpers/d-icon";
+import DTooltip from "float-kit/components/d-tooltip";
 import Creator from "./creator";
 import Dates from "./dates";
 import EventStatus from "./event-status";
@@ -67,6 +68,10 @@ export default class DiscoursePostEvent extends Component {
     return this.currentUser && this.args.event.can_act_on_discourse_post_event;
   }
 
+  get eventStatsGoingInterestedCount() {
+    return this.args.event.stats.going + this.args.event.stats.interested;
+  }
+
   <template>
     <div
       class={{concatClass
@@ -108,12 +113,6 @@ export default class DiscoursePostEvent extends Component {
             />
           </header>
 
-          {{#if @event.canUpdateAttendance}}
-            <section class="event__section event-actions">
-              <Status @event={{@event}} />
-            </section>
-          {{/if}}
-
           <PluginOutlet
             @name="discourse-post-event-info"
             @outletArgs={{hash
@@ -126,7 +125,25 @@ export default class DiscoursePostEvent extends Component {
           >
             <Url @url={{@event.url}} />
             <Dates @event={{@event}} />
-            <Invitees @event={{@event}} />
+            <section class="event__section event-actions">
+              <DTooltip
+                @arrow={{false}}
+                @interactive={{true}}
+                @triggers="click"
+                @class="event-invitees-tooltip"
+              >
+                <:trigger>
+                  {{icon "users"}}
+                  <span>{{this.eventStatsGoingInterestedCount}}</span>
+                </:trigger>
+                <:content>
+                  <Invitees @event={{@event}} />
+                </:content>
+              </DTooltip>
+              {{#if @event.canUpdateAttendance}}
+                <Status @event={{@event}} />
+              {{/if}}
+            </section>
           </PluginOutlet>
         {{/if}}
       </div>

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

@@ -2,7 +2,7 @@
 import { concat } from "@ember/helper";
 import { service } from "@ember/service";
 import { eq } from "truth-helpers";
 import AvatarFlair from "discourse/components/avatar-flair";
 import avatar from "discourse/helpers/avatar";
 import concatClass from "discourse/helpers/concat-class";
 import i18n from "discourse-common/helpers/i18n";
@@ -41,12 +41,12 @@
           @invitee.user
           imageSize=(if this.site.mobileView "tiny" "large")
         }}
-        {{#if this.statusIcon}}
+        {{!-- {{#if this.statusIcon}}
           <AvatarFlair
             @flairName={{this.flairName}}
             @flairUrl={{this.statusIcon}}
           />
-        {{/if}}
+        {{/if}} --}}
       </a>
     </li>
   </template>

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

@@ -1,14 +1,26 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 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;
+  @service discoursePostEventApi;
+
+  @tracked isLoading = false;
+  @tracked inviteesList = {};
+
+  constructor() {
+    super(...arguments);
+    this._fetchInvitees();
+  }
 
   @action
   showAllInvitees() {
@@ -21,60 +33,79 @@
     });
   }
 
-  get statsInfo() {
-    const stats = [];
-    const visibleStats = this.siteSettings.event_participation_buttons
-      .split("|")
-      .filter(Boolean);
-
-    if (this.args.event.isPrivate) {
-      visibleStats.push("invited");
-    }
-
-    visibleStats.forEach((button) => {
-      const localeKey = button.replace(" ", "_");
-      if (button === "not_going") {
-        button = "notGoing";
-      }
+  async _fetchInvitees() {
+    try {
+      this.isLoading = true;
 
-      const count = this.args.event.stats[button] || 0;
+      const [going, interested, notGoing] = await Promise.all([
+        this.discoursePostEventApi.listEventInvitees(this.args.event, {
+          type: "going",
+        }),
+        this.discoursePostEventApi.listEventInvitees(this.args.event, {
+          type: "interested",
+        }),
+        this.discoursePostEventApi.listEventInvitees(this.args.event, {
+          type: "not_going",
+        }),
+      ]);
 
-      const label = i18n(
-        `discourse_post_event.models.invitee.status.${localeKey}_count`,
-        { count }
-      );
-
-      stats.push({
-        class: `event-status-${localeKey}`,
-        label,
-      });
-    });
-
-    return stats;
+      this.inviteesList["going"] = going;
+      this.inviteesList["interested"] = interested;
+      this.inviteesList["not_going"] = notGoing;
+    } catch (error) {
+      console.error("Error fetching invitees:", error);
+    } finally {
+      this.isLoading = false;
+    }
   }
 
   <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>
-          <ul class="event-invitees-avatars">
-            {{#each @event.sampleInvitees as |invitee|}}
-              <Invitee @invitee={{invitee}} />
-            {{/each}}
-          </ul>
+          <ConditionalLoadingSpinner @condition={{this.isLoading}}>
+            <ul class="event-invitees-avatars">
+              {{#if this.inviteesList.going}}
+                <li class="event-invitees-avatars-item">
+                  {{icon "check"}}
+                  <span class="event-invitees-count">
+                    {{this.inviteesList.going.invitees.length}}
+                  </span>
+                  <ul class="event-invitees-avatars-sublist">
+                    {{#each this.inviteesList.going.invitees as |invitee|}}
+                      <Invitee @invitee={{invitee}} />
+                    {{/each}}
+                  </ul>
+                </li>
+              {{/if}}
+              {{#if this.inviteesList.interested}}
+                <li class="event-invitees-avatars-item">
+                  {{icon "star"}}
+                  <span class="event-invitees-count">
+                    {{this.inviteesList.interested.invitees.length}}
+                  </span>
+                  <ul class="event-invitees-avatars-sublist">
+                    {{#each this.inviteesList.interested.invitees as |invitee|}}
+                      <Invitee @invitee={{invitee}} />
+                    {{/each}}
+                  </ul>
+                </li>
+              {{/if}}
+              {{#if this.inviteesList.not_going}}
+                <li class="event-invitees-avatars-item">
+                  {{icon "times"}}
+                  <span class="event-invitees-count">
+                    {{this.inviteesList.not_going.invitees.length}}
+                  </span>
+                  <ul class="event-invitees-avatars-sublist">
+                    {{#each this.inviteesList.not_going.invitees as |invitee|}}
+                      <Invitee @invitee={{invitee}} />
+                    {{/each}}
+                  </ul>
+                </li>
+              {{/if}}
+            </ul>
+          </ConditionalLoadingSpinner>
         </section>
       {{/if}}
     {{/unless}}