compose: Allow DMs to take muted-recipient logic.

web/src/compose_recipient.ts

@@ -46,7 +46,11 @@ function composing_to_current_private_message_narrow(): boolean {
 }
 
 export let maybe_mute_recipient_row = (): void => {
-    if (composing_to_current_topic_narrow() && compose_state.has_full_recipient()) {
+    if (
+        composing_to_current_topic_narrow() &&
+        compose_state.has_full_recipient() &&
+        !compose_state.is_recipient_edited_manually()
+    ) {
         $("#compose-recipient").toggleClass("muted-recipient-row", true);
     } else {
         $("#compose-recipient").toggleClass("muted-recipient-row", false);
@@ -341,16 +345,12 @@ export function initialize(): void {
     });
     compose_select_recipient_dropdown_widget.setup();
 
-    // `input` isn't relevant for streams since it registers as a change only
-    // when an item in the dropdown is selected.
-    $("#stream_message_recipient_topic,#private_message_recipient").on(
-        "input",
-        update_on_recipient_change,
-    );
     // changes for the stream dropdown are handled in on_compose_select_recipient_update
-    $("#stream_message_recipient_topic,#private_message_recipient").on("change", () => {
-        update_on_recipient_change();
+    $("#stream_message_recipient_topic,#private_message_recipient").on("input change", () => {
+        // To make sure the checks in update_on_recipient_change() are correct,
+        // we update manual editing first.
         compose_state.set_recipient_edited_manually(true);
+        update_on_recipient_change();
     });
 
     $("#private_message_recipient").on("input", restore_placeholder_in_firefox_for_no_input);

web/src/compose_setup.js

@@ -614,6 +614,14 @@ export function initialize() {
         compose_recipient.update_compose_area_placeholder_text();
     });
 
+    $("#private_message_recipient").on("focus", () => {
+        // Once the DM input has been focused, we no longer treat
+        // the recipient row as muted, as we assume the user is
+        // doing something that requires keeping attention called
+        // to the recipient row
+        compose_recipient.unmute_recipient_row();
+    });
+
     $("body").on("click", ".formatting_button", function (e) {
         const $compose_click_target = $(this);
         const $textarea = $compose_click_target.closest("form").find("textarea");

web/styles/app_variables.css

@@ -1821,6 +1821,10 @@
         hsl(237deg 68% 94% / 50%),
         hsl(240deg 65% 60% / 60%)
     );
+    --color-outline-muted-input-pill: light-dark(
+        hsl(237deg 68% 88%),
+        hsl(240deg 65% 60% / 22%)
+    );
     --color-focus-outline-input-pill: light-dark(
         hsl(240deg 50% 50%),
         hsl(0deg 0% 100% / 60%)

web/styles/compose.css

@@ -1229,12 +1229,19 @@ textarea.new_message_textarea {
 #compose.compose-box-open:hover {
     .muted-recipient-row {
         #compose_select_recipient_widget,
-        #compose_recipient_box {
+        #compose_recipient_box,
+        #compose-direct-recipient .pill-container {
             transition: 250ms ease;
             transition-delay: 150ms;
             transition-property: background-color, border-color;
         }
 
+        #compose-direct-recipient .pill {
+            transition: 250ms ease;
+            transition-delay: 150ms;
+            transition-property: outline-color;
+        }
+
         &#compose-recipient {
             .decorated-channel-name,
             .zulip-icon-chevron-down,
@@ -1248,10 +1255,7 @@ textarea.new_message_textarea {
     }
 }
 
-/* For now, we're restricting muted recipient-row styles
-   to stream topics only, as restyling DM pills will
-   will take additional work. */
-.muted-recipient-row:not(.compose-recipient-direct-selected) {
+.muted-recipient-row {
     &#compose-recipient {
         .decorated-channel-name,
         .conversation-arrow,
@@ -1265,10 +1269,24 @@ textarea.new_message_textarea {
     }
 
     #compose_select_recipient_widget,
-    #compose_recipient_box {
+    #compose_recipient_box,
+    #compose-direct-recipient .pill-container {
         background-color: transparent;
         border-color: transparent;
 
+        /* Particularly in light mode, pill colors are almost identical
+           to the compose-box background. We place a higher-contrast
+           outline on them in the muted state. */
+        .pill {
+            outline: 1px solid var(--color-outline-muted-input-pill);
+        }
+
+        &:hover {
+            .pill {
+                outline-color: transparent;
+            }
+        }
+
         /* We don't want to trigger the recipient-box-wide hover
            effects when someone is just hovering the new-topic
            button. */

web/styles/input_pill.css

@@ -245,11 +245,6 @@
         opacity: 0.5;
     }
 
-    .pill + .input:empty::before {
-        content: attr(data-some-recipients-text);
-        opacity: 0.5;
-    }
-
     &:has(.input:focus) {
         border-color: var(--color-compose-recipient-box-has-focus);
     }