UX: Change placement and position of status buttons

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>

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}}
+      <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}}
-          <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.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}}
-            <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>
+            {{#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>
 }

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);
       }
     }

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"