From b9fc1bd60ca2f50107f37cf2c62febfbe421e148 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Tue, 22 Oct 2024 20:39:29 +1100
Subject: [PATCH] FEATURE: suppress interested and not going buttons by default
 (#621)

Interested and not going are generally not used.

To avoid adding this clutter to the UI we now suppress this.

Sites wishing to have these buttons can amend the `event_participation_buttons` site setting

Also:

- Add a show participants button even if there are no participants (so admins can populate events)
- Fix localization for event participation
- Allow toggling attendance by pressing the same button
- Removes leave event button from the dropdown menu
- Refactors outlets to allow maximum flexibility

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
---
 .../discourse-post-event/creator.gjs          |  17 +-
 .../components/discourse-post-event/dates.gjs |   2 +-
 .../discourse-post-event/event-status.gjs     |  36 ++++
 .../components/discourse-post-event/index.gjs | 131 ++++---------
 .../discourse-post-event/invitees.gjs         |  94 ++++++----
 .../discourse-post-event/more-menu.gjs        |  59 +++---
 .../discourse-post-event/status.gjs           | 175 +++++++++++++-----
 .../components/discourse-post-event/url.gjs   |  24 +--
 .../common/discourse-post-event.scss          |  45 ++++-
 config/locales/client.en.yml                  |  13 ++
 config/locales/server.en.yml                  |   1 +
 config/settings.yml                           |  10 +
 12 files changed, 363 insertions(+), 244 deletions(-)
 create mode 100644 assets/javascripts/discourse/components/discourse-post-event/event-status.gjs

diff --git a/assets/javascripts/discourse/components/discourse-post-event/creator.gjs b/assets/javascripts/discourse/components/discourse-post-event/creator.gjs
index 5810e25dd..f115873d1 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/creator.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/creator.gjs
@@ -1,6 +1,7 @@
 import Component from "@glimmer/component";
 import avatar from "discourse/helpers/avatar";
 import { formatUsername } from "discourse/lib/utilities";
+import i18n from "discourse-common/helpers/i18n";
 
 export default class DiscoursePostEventCreator extends Component {
   get username() {
@@ -8,11 +9,17 @@ export default class DiscoursePostEventCreator extends Component {
   }
 
   <template>
-    <span class="event-creator">
-      <a class="topic-invitee-avatar" data-user-card={{@user.username}}>
-        {{avatar @user imageSize="tiny"}}
-        <span class="username">{{this.username}}</span>
-      </a>
+    <span class="creators">
+      <span class="created-by">{{i18n
+          "discourse_calendar.discourse_post_event.event_ui.created_by"
+        }}</span>
+
+      <span class="event-creator">
+        <a class="topic-invitee-avatar" data-user-card={{@user.username}}>
+          {{avatar @user imageSize="tiny"}}
+          <span class="username">{{this.username}}</span>
+        </a>
+      </span>
     </span>
   </template>
 }
diff --git a/assets/javascripts/discourse/components/discourse-post-event/dates.gjs b/assets/javascripts/discourse/components/discourse-post-event/dates.gjs
index 7032b0fed..2fde3e7e0 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/dates.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/dates.gjs
@@ -77,7 +77,7 @@ export default class DiscoursePostEventDates extends Component {
 
   <template>
     <section
-      class="event-dates"
+      class="event__section event-dates"
       {{didInsert this.computeDates}}
     >{{this.htmlDates}}</section>
   </template>
diff --git a/assets/javascripts/discourse/components/discourse-post-event/event-status.gjs b/assets/javascripts/discourse/components/discourse-post-event/event-status.gjs
new file mode 100644
index 000000000..86d95899b
--- /dev/null
+++ b/assets/javascripts/discourse/components/discourse-post-event/event-status.gjs
@@ -0,0 +1,36 @@
+import Component from "@glimmer/component";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class EventStatus extends Component {
+  get eventStatusLabel() {
+    return i18n(
+      `discourse_calendar.discourse_post_event.models.event.status.${this.args.event.status}.title`
+    );
+  }
+
+  get eventStatusDescription() {
+    return i18n(
+      `discourse_calendar.discourse_post_event.models.event.status.${this.args.event.status}.description`
+    );
+  }
+
+  get statusClass() {
+    return `status ${this.args.event.status}`;
+  }
+
+  <template>
+    {{#if @event.isExpired}}
+      <span class="status expired">
+        {{i18n "discourse_calendar.discourse_post_event.models.event.expired"}}
+      </span>
+    {{else if @event.isClosed}}
+      <span class="status closed">
+        {{i18n "discourse_calendar.discourse_post_event.models.event.closed"}}
+      </span>
+    {{else}}
+      <span class={{this.statusClass}} title={{this.eventStatusDescription}}>
+        {{this.eventStatusLabel}}
+      </span>
+    {{/if}}
+  </template>
+}
diff --git a/assets/javascripts/discourse/components/discourse-post-event/index.gjs b/assets/javascripts/discourse/components/discourse-post-event/index.gjs
index 63cfbb7c9..9c0c9c768 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/index.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/index.gjs
@@ -1,22 +1,32 @@
 import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
 import { service } from "@ember/service";
-import { htmlSafe } from "@ember/template";
 import { modifier } from "ember-modifier";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import concatClass from "discourse/helpers/concat-class";
 import routeAction from "discourse/helpers/route-action";
 import { emojiUnescape } from "discourse/lib/text";
 import { escapeExpression } from "discourse/lib/utilities";
-import i18n from "discourse-common/helpers/i18n";
+import icon from "discourse-common/helpers/d-icon";
 import Creator from "./creator";
 import Dates from "./dates";
+import EventStatus from "./event-status";
 import Invitees from "./invitees";
 import MoreMenu from "./more-menu";
 import Status from "./status";
 import Url from "./url";
 
-const Separator = <template><span class="separator">·</span></template>;
+const StatusSeparator = <template><span class="separator">·</span></template>;
+
+const InfoSection = <template>
+  <section class="event__section" ...attributes>
+    {{#if @icon}}
+      {{icon @icon}}
+    {{/if}}
+
+    {{yield}}
+  </section>
+</template>;
 
 export default class DiscoursePostEvent extends Component {
   @service currentUser;
@@ -34,18 +44,6 @@ export default class DiscoursePostEvent extends Component {
     return () => this.messageBus.unsubscribe(path);
   });
 
-  get eventStatusLabel() {
-    return i18n(
-      `discourse_calendar.discourse_post_event.models.event.status.${this.args.event.status}.title`
-    );
-  }
-
-  get eventStatusDescription() {
-    return i18n(
-      `discourse_calendar.discourse_post_event.models.event.status.${this.args.event.status}.description`
-    );
-  }
-
   get startsAtMonth() {
     return moment(this.args.event.startsAt).format("MMM");
   }
@@ -60,10 +58,6 @@ export default class DiscoursePostEvent extends Component {
     );
   }
 
-  get statusClass() {
-    return `status ${this.args.event.status}`;
-  }
-
   get isPublicEvent() {
     return this.args.event.status === "public";
   }
@@ -76,39 +70,12 @@ export default class DiscoursePostEvent extends Component {
     return this.currentUser && this.args.event.can_act_on_discourse_post_event;
   }
 
-  get containerHeight() {
-    const datesHeight = 50;
-    const urlHeight = 50;
-    const headerHeight = 75;
-    const bordersHeight = 10;
-    const separatorsHeight = 4;
-    const margins = 10;
-
-    let widgetHeight =
-      datesHeight + headerHeight + bordersHeight + separatorsHeight + margins;
-
-    if (this.args.event.shouldDisplayInvitees && !this.args.event.minimal) {
-      widgetHeight += 110;
-    }
-
-    if (this.args.event.canUpdateAttendance) {
-      widgetHeight += 60;
-    }
-
-    if (this.args.event.url) {
-      widgetHeight += urlHeight;
-    }
-
-    return htmlSafe(`height: ${widgetHeight}px`);
-  }
-
   <template>
     <div
       class={{concatClass
         "discourse-post-event"
         (if @event "is-loaded" "is-loading")
       }}
-      style={{this.containerHeight}}
     >
       <div class="discourse-post-event-widget">
         {{#if @event}}
@@ -123,39 +90,18 @@ export default class DiscoursePostEvent extends Component {
               </span>
               <div class="status-and-creators">
                 <PluginOutlet
-                  @name="discourse-post-event-status"
-                  @outletArgs={{hash event=@event Separator=Separator}}
+                  @name="discourse-post-event-status-and-creators"
+                  @outletArgs={{hash
+                    event=@event
+                    Separator=StatusSeparator
+                    Status=(component EventStatus event=@event)
+                    Creator=(component Creator user=@event.creator)
+                  }}
                 >
-                  {{#if @event.isExpired}}
-                    <span class="status expired">
-                      {{i18n
-                        "discourse_calendar.discourse_post_event.models.event.expired"
-                      }}
-                    </span>
-                  {{else if @event.isClosed}}
-                    <span class="status closed">
-                      {{i18n
-                        "discourse_calendar.discourse_post_event.models.event.closed"
-                      }}
-                    </span>
-                  {{else}}
-                    <span
-                      class={{this.statusClass}}
-                      title={{this.eventStatusDescription}}
-                    >
-                      {{this.eventStatusLabel}}
-                    </span>
-                  {{/if}}
-                </PluginOutlet>
-
-                <Separator />
-
-                <span class="creators">
-                  <span class="created-by">{{i18n
-                      "discourse_calendar.discourse_post_event.event_ui.created_by"
-                    }}</span>
+                  <EventStatus @event={{@event}} />
+                  <StatusSeparator />
                   <Creator @user={{@event.creator}} />
-                </span>
+                </PluginOutlet>
               </div>
             </div>
 
@@ -166,28 +112,25 @@ export default class DiscoursePostEvent extends Component {
           </header>
 
           {{#if @event.canUpdateAttendance}}
-            <section class="event-actions">
+            <section class="event__section event-actions">
               <Status @event={{@event}} />
             </section>
           {{/if}}
 
-          {{#if @event.url}}
-            <hr />
-
+          <PluginOutlet
+            @name="discourse-post-event-info"
+            @outletArgs={{hash
+              event=@event
+              Section=(component InfoSection event=@event)
+              Url=(component Url url=@event.url)
+              Dates=(component Dates event=@event)
+              Invitees=(component Invitees event=@event)
+            }}
+          >
             <Url @url={{@event.url}} />
-          {{/if}}
-
-          <hr />
-
-          <Dates @event={{@event}} />
-
-          {{#unless @event.minimal}}
-            {{#if @event.shouldDisplayInvitees}}
-              <hr />
-
-              <Invitees @event={{@event}} />
-            {{/if}}
-          {{/unless}}
+            <Dates @event={{@event}} />
+            <Invitees @event={{@event}} />
+          </PluginOutlet>
         {{/if}}
       </div>
     </div>
diff --git a/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs b/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs
index a0b355582..9f683393a 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs
@@ -8,6 +8,7 @@ import Invitee from "./invitee";
 
 export default class DiscoursePostEventInvitees extends Component {
   @service modal;
+  @service siteSettings;
 
   @action
   showAllInvitees() {
@@ -20,43 +21,62 @@ 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";
+      }
+
+      const count = this.args.event.stats[button] || 0;
+
+      const label = i18n(
+        `discourse_calendar.discourse_post_event.models.invitee.status.${localeKey}_count`,
+        { count }
+      );
+
+      stats.push({
+        class: `event-status-${localeKey}`,
+        label,
+      });
+    });
+
+    return stats;
+  }
+
   <template>
-    <section class="event-invitees">
-      <div class="header">
-        <div class="event-invitees-status">
-          <span>{{@event.stats.going}}
-            {{i18n
-              "discourse_calendar.discourse_post_event.models.invitee.status.going"
-            }}
-            -</span>
-          <span>{{@event.stats.interested}}
-            {{i18n
-              "discourse_calendar.discourse_post_event.models.invitee.status.interested"
-            }}
-            -</span>
-          <span>{{@event.stats.notGoing}}
-            {{i18n
-              "discourse_calendar.discourse_post_event.models.invitee.status.not_going"
-            }}</span>
-          {{#if @event.isPrivate}}
-            <span class="invited">- on
-              {{@event.stats.invited}}
-              users invited</span>
-          {{/if}}
-        </div>
-
-        <DButton
-          class="show-all btn-small"
-          @label="discourse_calendar.discourse_post_event.event_ui.show_all"
-          @action={{this.showAllInvitees}}
-        />
-
-      </div>
-      <ul class="event-invitees-avatars">
-        {{#each @event.sampleInvitees as |invitee|}}
-          <Invitee @invitee={{invitee}} />
-        {{/each}}
-      </ul>
-    </section>
+    {{#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_calendar.discourse_post_event.event_ui.show_all"
+              @action={{this.showAllInvitees}}
+            />
+          </div>
+          <ul class="event-invitees-avatars">
+            {{#each @event.sampleInvitees as |invitee|}}
+              <Invitee @invitee={{invitee}} />
+            {{/each}}
+          </ul>
+        </section>
+      {{/if}}
+    {{/unless}}
   </template>
 }
diff --git a/assets/javascripts/discourse/components/discourse-post-event/more-menu.gjs b/assets/javascripts/discourse/components/discourse-post-event/more-menu.gjs
index f564262f2..79c7bd1d7 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/more-menu.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/more-menu.gjs
@@ -15,9 +15,9 @@ import { buildParams, replaceRaw } from "../../lib/raw-event-helper";
 import PostEventBuilder from "../modal/post-event-builder";
 import PostEventBulkInvite from "../modal/post-event-bulk-invite";
 import PostEventInviteUserOrGroup from "../modal/post-event-invite-user-or-group";
+import PostEventInvitees from "../modal/post-event-invitees";
 
 export default class DiscoursePostEventMoreMenu extends Component {
-  @service appEvents;
   @service currentUser;
   @service dialog;
   @service discoursePostEventApi;
@@ -40,10 +40,6 @@ export default class DiscoursePostEventMoreMenu extends Component {
     );
   }
 
-  get canLeave() {
-    return this.args.event.watchingInvitee && this.args.event.isPublic;
-  }
-
   get canSeeUpcomingEvents() {
     return !this.args.event.isClosed && this.args.event.recurrence;
   }
@@ -107,24 +103,6 @@ export default class DiscoursePostEventMoreMenu extends Component {
     }
   }
 
-  @action
-  async leaveEvent() {
-    this.menuApi.close();
-
-    try {
-      const invitee = this.args.event.watchingInvitee;
-
-      await this.discoursePostEventApi.leaveEvent(this.args.event, invitee);
-
-      this.appEvents.trigger("calendar:invitee-left-event", {
-        invitee,
-        postId: this.args.event.id,
-      });
-    } catch (e) {
-      popupAjaxError(e);
-    }
-  }
-
   @action
   exportPostEvent() {
     this.menuApi.close();
@@ -196,6 +174,19 @@ export default class DiscoursePostEventMoreMenu extends Component {
     });
   }
 
+  @action
+  showParticipants() {
+    this.menuApi.close();
+
+    this.modal.show(PostEventInvitees, {
+      model: {
+        event: this.args.event,
+        title: this.args.event.title,
+        extraClass: this.args.event.extraClass,
+      },
+    });
+  }
+
   @action
   async closeEvent() {
     this.menuApi.close();
@@ -281,19 +272,6 @@ export default class DiscoursePostEventMoreMenu extends Component {
             </dropdown.item>
           {{/if}}
 
-          {{#if this.canLeave}}
-            <dropdown.item class="leave-event">
-              <DButton
-                @icon="times"
-                class="btn-transparent"
-                @translatedLabel={{i18n
-                  "discourse_calendar.discourse_post_event.event_ui.leave"
-                }}
-                @action={{this.leaveEvent}}
-              />
-            </dropdown.item>
-          {{/if}}
-
           {{#if this.canSeeUpcomingEvents}}
             <dropdown.item class="upcoming-events">
               <DButton
@@ -308,6 +286,15 @@ export default class DiscoursePostEventMoreMenu extends Component {
           {{/if}}
 
           {{#if this.canActOnEvent}}
+            <dropdown.item class="show-all-participants">
+              <DButton
+                @icon="user-group"
+                class="btn-transparent"
+                @label="discourse_calendar.discourse_post_event.event_ui.show_participants"
+                @action={{this.showParticipants}}
+              />
+            </dropdown.item>
+
             <dropdown.divider />
 
             <dropdown.item class="export-event">
diff --git a/assets/javascripts/discourse/components/discourse-post-event/status.gjs b/assets/javascripts/discourse/components/discourse-post-event/status.gjs
index 0b4a81813..ad8007801 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/status.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/status.gjs
@@ -5,39 +5,104 @@ import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import concatClass from "discourse/helpers/concat-class";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default class DiscoursePostEventStatus extends Component {
   @service appEvents;
   @service discoursePostEventApi;
+  @service siteSettings;
 
   get watchingInviteeStatus() {
     return this.args.event.watchingInvitee?.status;
   }
 
+  get eventButtons() {
+    return this.siteSettings.event_participation_buttons.split("|");
+  }
+
+  get showGoingButton() {
+    return !!this.eventButtons.find((button) => button === "going");
+  }
+
+  get showInterestedButton() {
+    return !!this.eventButtons.find((button) => button === "interested");
+  }
+
+  get showNotGoingButton() {
+    return !!this.eventButtons.find((button) => button === "not going");
+  }
+
+  get canLeave() {
+    return this.args.event.watchingInvitee && this.args.event.isPublic;
+  }
+
   @action
-  async changeWatchingInviteeStatus(status) {
-    if (this.args.event.watchingInvitee) {
-      const currentStatus = this.args.event.watchingInvitee.status;
-      let newStatus = status;
-      if (status === currentStatus && status === "interested") {
-        newStatus = null;
-      }
+  async leaveEvent() {
+    try {
+      const invitee = this.args.event.watchingInvitee;
+
+      await this.discoursePostEventApi.leaveEvent(this.args.event, invitee);
+
+      this.appEvents.trigger("calendar:invitee-left-event", {
+        invitee,
+        postId: this.args.event.id,
+      });
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
 
+  @action
+  async updateEventAttendance(status) {
+    try {
       await this.discoursePostEventApi.updateEventAttendance(this.args.event, {
-        status: newStatus,
+        status,
       });
 
       this.appEvents.trigger("calendar:update-invitee-status", {
-        status: newStatus,
+        status,
         postId: this.args.event.id,
       });
-    } else {
-      await this.discoursePostEventApi.joinEvent(this.args.event, { status });
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  @action
+  async joinEventWithStatus(status) {
+    try {
+      await this.discoursePostEventApi.joinEvent(this.args.event, {
+        status,
+      });
 
       this.appEvents.trigger("calendar:create-invitee-status", {
         status,
         postId: this.args.event.id,
       });
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  @action
+  async changeWatchingInviteeStatus(status) {
+    if (this.args.event.watchingInvitee) {
+      const currentStatus = this.args.event.watchingInvitee.status;
+      if (this.canLeave) {
+        if (status === currentStatus) {
+          await this.leaveEvent();
+        } else {
+          await this.updateEventAttendance(status);
+        }
+      } else {
+        if (status === currentStatus) {
+          status = null;
+        }
+
+        await this.updateEventAttendance(status);
+      }
+    } else {
+      await this.joinEventWithStatus(status);
     }
   }
 
@@ -55,54 +120,62 @@ export default class DiscoursePostEventStatus extends Component {
         @name="discourse-post-event-status-buttons"
         @outletArgs={{hash event=@event}}
       >
-        {{#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_calendar.discourse_post_event.models.invitee.status.going"
-              @action={{fn this.changeWatchingInviteeStatus "going"}}
-            />
-          </PluginOutlet>
-        {{/unless}}
-
-        <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_calendar.discourse_post_event.models.invitee.status.interested"
-            @action={{fn this.changeWatchingInviteeStatus "interested"}}
-          />
-        </PluginOutlet>
-
-        {{#unless @event.minimal}}
+        {{#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_calendar.discourse_post_event.models.invitee.status.going"
+                @action={{fn this.changeWatchingInviteeStatus "going"}}
+              />
+            </PluginOutlet>
+          {{/unless}}
+        {{/if}}
+
+        {{#if this.showInterestedButton}}
           <PluginOutlet
-            @name="discourse-post-event-status-not-going-button"
+            @name="discourse-post-event-status-interested-button"
             @outletArgs={{hash
               event=@event
-              markAsNotGoing=(fn this.changeWatchingInviteeStatus "not_going")
+              markAsInterested=(fn
+                this.changeWatchingInviteeStatus "interested"
+              )
             }}
           >
             <DButton
-              class="not-going-button"
-              @icon="times"
-              @label="discourse_calendar.discourse_post_event.models.invitee.status.not_going"
-              @action={{fn this.changeWatchingInviteeStatus "not_going"}}
+              class="interested-button"
+              @icon="star"
+              @label="discourse_calendar.discourse_post_event.models.invitee.status.interested"
+              @action={{fn this.changeWatchingInviteeStatus "interested"}}
             />
           </PluginOutlet>
-        {{/unless}}
+        {{/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_calendar.discourse_post_event.models.invitee.status.not_going"
+                @action={{fn this.changeWatchingInviteeStatus "not_going"}}
+              />
+            </PluginOutlet>
+          {{/unless}}
+        {{/if}}
       </PluginOutlet>
     </div>
   </template>
diff --git a/assets/javascripts/discourse/components/discourse-post-event/url.gjs b/assets/javascripts/discourse/components/discourse-post-event/url.gjs
index 278e88873..0ce02faaa 100644
--- a/assets/javascripts/discourse/components/discourse-post-event/url.gjs
+++ b/assets/javascripts/discourse/components/discourse-post-event/url.gjs
@@ -9,16 +9,18 @@ export default class DiscoursePostEventUrl extends Component {
   }
 
   <template>
-    <section class="event-url">
-      {{icon "link"}}
-      <a
-        class="url"
-        href={{this.url}}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {{@url}}
-      </a>
-    </section>
+    {{#if @url}}
+      <section class="event__section event-url">
+        {{icon "link"}}
+        <a
+          class="url"
+          href={{this.url}}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{@url}}
+        </a>
+      </section>
+    {{/if}}
   </template>
 }
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
index aed0181dd..4bdee323e 100644
--- a/assets/stylesheets/common/discourse-post-event.scss
+++ b/assets/stylesheets/common/discourse-post-event.scss
@@ -3,6 +3,30 @@ $interested: #fb985d;
 .discourse-post-event {
   display: flex;
 
+  .event__section {
+    padding: 0.5em 1em;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--primary-low);
+    }
+
+    &:first-child {
+      border-top: 1px solid var(--primary-low);
+    }
+
+    p {
+      margin: 0;
+    }
+
+    > .d-icon {
+      padding-right: 0.25em;
+    }
+
+    .discourse-local-date .d-icon {
+      padding-right: 0.25em;
+    }
+  }
+
   .discourse-post-event-widget {
     border: 5px solid var(--primary-low);
     display: flex;
@@ -175,8 +199,6 @@ $interested: #fb985d;
 
   .event-invitees {
     display: flex;
-    height: 110px;
-    padding: 0 1em;
     align-items: flex-start;
     justify-content: center;
     overflow-y: auto;
@@ -195,9 +217,14 @@ $interested: #fb985d;
 
       .event-invitees-status {
         font-weight: 700;
-
-        .invited {
-          font-weight: 500;
+        display: flex;
+        span:not(:last-child)::after {
+          content: "-";
+          font-weight: 400;
+          margin: 0 0.3em;
+        }
+        .event-status-invited {
+          font-weight: 600;
           color: var(--primary-medium);
         }
       }
@@ -269,9 +296,6 @@ $interested: #fb985d;
   .event-dates {
     display: flex;
     align-items: center;
-    padding: 0 1em;
-    height: 50px;
-    flex: 1;
 
     .d-icon {
       color: var(--primary-high);
@@ -280,13 +304,16 @@ $interested: #fb985d;
 
   .event-url {
     .url {
-      margin-left: 1em;
       max-width: 80%;
       @include ellipsis;
     }
   }
 
   .event-dates {
+    // hardcoded as cooking date is async and will change height after initial rendering otherwise
+    // not ideal but a decent low tech solution
+    height: 24px;
+
     .participants {
       margin-left: 0.5em;
       color: var(--primary-medium);
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 85152b8bd..aeb448f3f 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -336,6 +336,18 @@ en:
               going: "Going"
               not_going: "Not Going"
               interested: "Interested"
+              going_count:
+                one: "%{count} going"
+                other: "%{count} going"
+              not_going_count:
+                one: "%{count} not going"
+                other: "%{count} not going"
+              interested_count:
+                one: "%{count} interested"
+                other: "%{count} interested"
+              invited_count:
+                one: "%{count} user invited"
+                other: "%{count} users invited"
           event:
             expired: "Expired"
             closed: "Closed"
@@ -351,6 +363,7 @@ en:
                 description: "A private event can only be joined by invited users."
         event_ui:
           show_all: "Show all"
+          show_participants: "Show participants"
           participants:
             one: "%{count} user participated."
             other: "%{count} users participated."
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index 9e7424004..dee98cd61 100644
--- a/config/locales/server.en.yml
+++ b/config/locales/server.en.yml
@@ -55,6 +55,7 @@ en:
     sort_categories_by_event_start_date_enabled: "Enable the sorting of category topics by event start date."
     disable_resorting_on_categories_enabled: "Allow categories to disable the ability for users to sort on the event category."
     calendar_automatic_holidays_enabled: "Automatically set holiday status based on a users region (note: you can disable specific automatic holidays in plugin settings)"
+    event_participation_buttons: "List of event participation buttons users can use."
     sidebar_show_upcoming_events: "Show upcoming events link in the sidebar under 'More'."
     include_expired_events_on_calendar: "Include past/expired events on Category Calendar and Upcoming Events views."
   discourse_calendar:
diff --git a/config/settings.yml b/config/settings.yml
index 4fd08a67b..9ded4eede 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -59,6 +59,16 @@ discourse_calendar:
     default: false
     client: true
     hidden: true
+  event_participation_buttons:
+    default: "going"
+    client: true
+    type: list
+    list_type: simple
+    allow_any: false
+    choices:
+      - going
+      - interested
+      - not going
   discourse_post_event_enabled:
     default: false
     client: true