UX: Allow warning / hint to be clicked to toggle whispering

common/common.scss

@@ -3,6 +3,9 @@
   padding: 2px 8px;
   font-size: var(--font-down-2);
   border-radius: 10px;
+  .d-icon {
+    margin-right: 4px;
+  }
   &.whispering {
     color: var(--tertiary);
     background-color: var(--tertiary-low);

javascripts/discourse/api-initializers/whisper-warning.js

@@ -0,0 +1,6 @@
+import { apiInitializer } from "discourse/lib/api";
+import whisperWarning from "../components/whisper-warning";
+
+export default apiInitializer("1.8.0", (api) => {
+  api.renderInOutlet("composer-action-after", whisperWarning);
+});

javascripts/discourse/connectors/composer-action-after/whisper-warning.js → javascripts/discourse/components/whisper-warning.gjs

@@ -1,11 +1,15 @@
 import Component from "@glimmer/component";
+import { action } from "@ember/object";
 import { service } from "@ember/service";
-import I18n from "discourse-i18n";
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
+import I18n from "discourse-common/helpers/i18n";
 
 export default class WhisperWarning extends Component {
   @service currentUser;
+  @service composer;
 
-  get shouldRender() {
+  get showWarning() {
     // checks if the current user is replying in a group PM
     const allowedGroups =
       this.args.outletArgs.model.topic?.get("allowedGroups");
@@ -29,7 +33,7 @@ export default class WhisperWarning extends Component {
       this.currentUser.groups?.filter((group) => {
         return group.name === "accidentalloudmouths";
       }).length > 0;
-    const canWhisper = this.currentUser.whisperer;
+    const canWhisper = this.composer.showWhisperToggle;
     const isNotNewTopic =
       this.args.outletArgs.model.get("action") !== "createTopic";
     const isNotNewPM =
@@ -48,16 +52,30 @@ export default class WhisperWarning extends Component {
     );
   }
 
-  get isWhispering() {
-    let whisper = this.args.outletArgs.model.get("whisper");
-    return whisper;
+  get translatedLabel() {
+    if (this.composer.isWhispering) {
+      I18n.t(themePrefix("whispering"));
+    } else {
+      I18n.t(themePrefix("public_reply"));
+    }
   }
 
-  get publicLabel() {
-    return I18n.t(themePrefix("public_reply"));
-  }
-
-  get whisperLabel() {
-    return I18n.t(themePrefix("whispering"));
+  @action
+  toggleWhisper() {
+    this.composer.toggleWhisper();
   }
+  <template>
+    {{#if this.showWarning}}
+      <DButton
+        @preventFocus={{true}}
+        @action={{this.toggleWhisper}}
+        @icon="far-eye-slash"
+        @class={{concatClass
+          "whisper-hint"
+          (if this.composer.isWhispering "whispering" "public")
+        }}
+        @translatedLabel={{this.translatedLabel}}
+      />
+    {{/if}}
+  </template>
 }