From b98d69bbfa8e1953348df3697dd5e2f1588c0db3 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <jordan@jordanvidrine.com>
Date: Thu, 24 Oct 2024 17:04:45 -0500
Subject: [PATCH 1/2] UX: Change placement and position of status buttons

---
 .../components/discourse-post-event/index.gjs |  11 +-
 .../discourse-post-event/status.gjs           | 166 +++++++++++-------
 .../common/discourse-post-event.scss          |  13 +-
 config/locales/client.en.yml                  |   1 +
 4 files changed, 120 insertions(+), 71 deletions(-)

diff --git a/assets/javascripts/discourse/components/discourse-post-event/index.gjs b/assets/javascripts/discourse/components/discourse-post-event/index.gjs
index 1c8c9e649..c2a66ffe0 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/index.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/index.gjs
@@ -108,12 +108,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
@@ -127,6 +121,11 @@ export default class DiscoursePostEvent extends Component {
             <Url @url={{@event.url}} />
             <Dates @event={{@event}} />
             <Invitees @event={{@event}} />
+            {{#if @event.canUpdateAttendance}}
+              <section class="event__section event-actions">
+                <Status @event={{@event}} />
+              </section>
+            {{/if}}
           </PluginOutlet>
         {{/if}}
       </div>
diff --git a/assets/javascripts/discourse/components/discourse-post-event/status.gjs b/assets/javascripts/discourse/components/discourse-post-event/status.gjs
index 056177769..ffcf63754 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/status.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/status.gjs
@@ -2,10 +2,15 @@ import Component from "@glimmer/component";
 import { concat, fn, hash } from "@ember/helper";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import { eq } from "truth-helpers";
 import DButton from "discourse/components/d-button";
+import DropdownMenu from "discourse/components/dropdown-menu";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import concatClass from "discourse/helpers/concat-class";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
+import DMenu from "float-kit/components/d-menu";
 
 export default class DiscoursePostEventStatus extends Component {
   @service appEvents;
@@ -16,6 +21,26 @@ export default class DiscoursePostEventStatus extends Component {
     return this.args.event.watchingInvitee?.status;
   }
 
+  get inviteeButtonText() {
+    let status = this.args.event.watchingInvitee?.status;
+    return status === "going"
+      ? "discourse_post_event.models.invitee.status.going"
+      : status === "interested"
+      ? "discourse_post_event.models.invitee.status.interested"
+      : status === "not_going"
+      ? "discourse_post_event.models.invitee.status.not_going"
+      : "discourse_post_event.models.invitee.status.not_set";
+  }
+
+  get inviteButtonIcon() {
+    let status = this.args.event.watchingInvitee?.status;
+    return status === "going"
+      ? "check"
+      : status === "interested"
+      ? "star"
+      : "question";
+  }
+
   get eventButtons() {
     return this.siteSettings.event_participation_buttons.split("|");
   }
@@ -116,67 +141,86 @@ export default class DiscoursePostEventStatus extends Component {
         )
       }}
     >
-      <PluginOutlet
-        @name="discourse-post-event-status-buttons"
-        @outletArgs={{hash event=@event}}
-      >
-        {{#if this.showGoingButton}}
-          {{#unless @event.minimal}}
-            <PluginOutlet
-              @name="discourse-post-event-status-going-button"
-              @outletArgs={{hash
-                event=@event
-                markAsGoing=(fn this.changeWatchingInviteeStatus "going")
-              }}
-            >
-              <DButton
-                class="going-button"
-                @icon="check"
-                @label="discourse_post_event.models.invitee.status.going"
-                @action={{fn this.changeWatchingInviteeStatus "going"}}
-              />
-            </PluginOutlet>
-          {{/unless}}
-        {{/if}}
-
-        {{#if this.showInterestedButton}}
-          <PluginOutlet
-            @name="discourse-post-event-status-interested-button"
-            @outletArgs={{hash
-              event=@event
-              markAsInterested=(fn
-                this.changeWatchingInviteeStatus "interested"
-              )
-            }}
-          >
-            <DButton
-              class="interested-button"
-              @icon="star"
-              @label="discourse_post_event.models.invitee.status.interested"
-              @action={{fn this.changeWatchingInviteeStatus "interested"}}
-            />
-          </PluginOutlet>
-        {{/if}}
-
-        {{#if this.showNotGoingButton}}
-          {{#unless @event.minimal}}
-            <PluginOutlet
-              @name="discourse-post-event-status-not-going-button"
-              @outletArgs={{hash
-                event=@event
-                markAsNotGoing=(fn this.changeWatchingInviteeStatus "not_going")
-              }}
-            >
-              <DButton
-                class="not-going-button"
-                @icon="times"
-                @label="discourse_post_event.models.invitee.status.not_going"
-                @action={{fn this.changeWatchingInviteeStatus "not_going"}}
-              />
-            </PluginOutlet>
-          {{/unless}}
-        {{/if}}
-      </PluginOutlet>
+      <DMenu @identifier="discourse-post-event-status" @title="Event Status">
+        <:trigger>
+          {{icon this.inviteButtonIcon}}
+          <span class="d-button-label event-status-label">{{i18n
+              this.inviteeButtonText
+            }}</span>
+          {{icon "angle-down"}}
+        </:trigger>
+        <:content>
+          <DropdownMenu as |dropdown|>
+            {{#if this.showGoingButton}}
+              {{#unless @event.minimal}}
+                <dropdown.item>
+                  <PluginOutlet
+                    @name="discourse-post-event-status-going-button"
+                    @outletArgs={{hash
+                      event=@event
+                      markAsGoing=(fn this.changeWatchingInviteeStatus "going")
+                    }}
+                  >
+                    <DButton
+                      class="going-button"
+                      @icon="check"
+                      @label="discourse_post_event.models.invitee.status.going"
+                      @action={{fn this.changeWatchingInviteeStatus "going"}}
+                    />
+                  </PluginOutlet>
+                </dropdown.item>
+              {{/unless}}
+            {{/if}}
+
+            {{#if this.showInterestedButton}}
+              <dropdown.item>
+                <PluginOutlet
+                  @name="discourse-post-event-status-interested-button"
+                  @outletArgs={{hash
+                    event=@event
+                    markAsInterested=(fn
+                      this.changeWatchingInviteeStatus "interested"
+                    )
+                  }}
+                >
+                  <DButton
+                    class="interested-button"
+                    @icon="star"
+                    @label="discourse_post_event.models.invitee.status.interested"
+                    @action={{fn this.changeWatchingInviteeStatus "interested"}}
+                  />
+                </PluginOutlet>
+              </dropdown.item>
+            {{/if}}
+
+            {{#if this.showNotGoingButton}}
+              {{#unless @event.minimal}}
+                <dropdown.item>
+                  <PluginOutlet
+                    @name="discourse-post-event-status-not-going-button"
+                    @outletArgs={{hash
+                      event=@event
+                      markAsNotGoing=(fn
+                        this.changeWatchingInviteeStatus "not_going"
+                      )
+                    }}
+                  >
+                    <DButton
+                      class="not-going-button"
+                      @icon="times"
+                      @label="discourse_post_event.models.invitee.status.not_going"
+                      @action={{fn
+                        this.changeWatchingInviteeStatus
+                        "not_going"
+                      }}
+                    />
+                  </PluginOutlet>
+                </dropdown.item>
+              {{/unless}}
+            {{/if}}
+          </DropdownMenu>
+        </:content>
+      </DMenu>
     </div>
   </template>
 }
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
index 4bdee323e..3b6d3d62b 100644
--- a/assets/stylesheets/common/discourse-post-event.scss
+++ b/assets/stylesheets/common/discourse-post-event.scss
@@ -6,6 +6,10 @@ $interested: #fb985d;
   .event__section {
     padding: 0.5em 1em;
 
+    &.event-actions svg {
+      padding-right: 0.25em;
+    }
+
     &:not(:last-child) {
       border-bottom: 1px solid var(--primary-low);
     }
@@ -70,6 +74,7 @@ $interested: #fb985d;
     align-items: center;
     padding: 0 1em;
     height: 75px;
+    border-bottom: 1px solid var(--primary-low);
 
     .more-dropdown {
       margin-left: auto;
@@ -171,7 +176,7 @@ $interested: #fb985d;
 
   .event-actions {
     display: flex;
-    justify-content: space-between;
+    justify-content: end;
     align-items: center;
     height: 60px;
     padding: 0 1em;
@@ -179,13 +184,13 @@ $interested: #fb985d;
     .event-status {
       margin: 0;
 
-      &.status-going .going-button .d-icon {
+      &.status-going .d-icon:not(.d-icon-angle-down) {
         color: var(--success);
       }
-      &.status-interested .interested-button .d-icon {
+      &.status-interested .d-icon:not(.d-icon-angle-down) {
         color: $interested;
       }
-      &.status-not_going .not-going-button .d-icon {
+      &.status-not_going .d-icon:not(.d-icon-angle-down) {
         color: var(--danger);
       }
     }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 5de542ba7..23096cf97 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -389,6 +389,7 @@ en:
         invitee:
           no_users: "No users found"
           status:
+            not_set: "RSVP"
             unknown: "Not interested"
             going: "Going"
             not_going: "Not Going"

From c6854b1bed06fcb5681788aca5042952a62d9a7f Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <jordan@jordanvidrine.com>
Date: Fri, 25 Oct 2024 16:06:26 -0500
Subject: [PATCH 2/2] UX: move invitees rendering into a DMenu

---
 .../components/discourse-post-event/index.gjs |  28 +++-
 .../discourse-post-event/invitee.gjs          |   4 +-
 .../discourse-post-event/invitees.gjs         | 123 +++++++++++-------
 .../common/discourse-post-event.scss          |  64 ++++++++-
 4 files changed, 165 insertions(+), 54 deletions(-)

diff --git a/assets/javascripts/discourse/components/discourse-post-event/index.gjs b/assets/javascripts/discourse/components/discourse-post-event/index.gjs
index c2a66ffe0..a55e49701 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/index.gjs
+++ b/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
@@ -120,12 +125,25 @@ export default class DiscoursePostEvent extends Component {
           >
             <Url @url={{@event.url}} />
             <Dates @event={{@event}} />
-            <Invitees @event={{@event}} />
-            {{#if @event.canUpdateAttendance}}
-              <section class="event__section event-actions">
+            <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}} />
-              </section>
-            {{/if}}
+              {{/if}}
+            </section>
           </PluginOutlet>
         {{/if}}
       </div>
diff --git a/assets/javascripts/discourse/components/discourse-post-event/invitee.gjs b/assets/javascripts/discourse/components/discourse-post-event/invitee.gjs
index 755088731..89048155a 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/invitee.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/invitee.gjs
@@ -41,12 +41,12 @@ export default class DiscoursePostEventInvitee extends Component {
           @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>
diff --git a/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs b/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs
index a3bb470b3..a5758140a 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs
@@ -1,7 +1,10 @@
 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";
@@ -9,6 +12,15 @@ 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 @@ export default class DiscoursePostEventInvitees extends Component {
     });
   }
 
-  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}}
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
index 3b6d3d62b..6a32f5f0c 100644
--- a/assets/stylesheets/common/discourse-post-event.scss
+++ b/assets/stylesheets/common/discourse-post-event.scss
@@ -176,11 +176,16 @@ $interested: #fb985d;
 
   .event-actions {
     display: flex;
-    justify-content: end;
+    justify-content: space-between;
     align-items: center;
     height: 60px;
     padding: 0 1em;
 
+    .fk-d-tooltip__trigger-container {
+      display: flex;
+      align-items: center;
+    }
+
     .event-status {
       margin: 0;
 
@@ -342,3 +347,60 @@ $interested: #fb985d;
     }
   }
 }
+
+.event__section.event-invitees {
+  .event-invitees-avatars {
+    list-style: none;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    &-item {
+      display: flex;
+      align-items: center;
+      .d-icon {
+        margin-right: 0.5em;
+      }
+      .d-icon-star {
+        color: #fb985d;
+      }
+      .d-icon-check {
+        color: var(--success);
+      }
+      .d-icon-times {
+        color: var(--danger);
+      }
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--primary-low);
+      }
+      padding: 0.25em 0;
+      &:first-of-type {
+        padding-top: 0;
+      }
+      &:last-of-type {
+        padding-bottom: 0;
+      }
+      .event-invitees-count {
+        margin-right: 0.5em;
+        font-size: var(--font-down-1);
+        color: var(--primary-medium);
+      }
+    }
+    &-sublist {
+      list-style: none;
+      display: grid;
+      grid-column-gap: 0.25em;
+      grid-row-gap: 0.25em;
+      grid-template-rows: 22.5px;
+      grid-template-columns: repeat(7, 22.5px);
+    }
+  }
+  .event-invitee {
+    width: 22px;
+    height: 22px;
+  }
+  .topic-invitee-avatar img {
+    width: 100%;
+    height: 100%;
+  }
+  display: flex;
+}