diff --git a/web/src/stream_popover.ts b/web/src/stream_popover.ts
index 4f0d92b79c..4ddb271a2d 100644
--- a/web/src/stream_popover.ts
+++ b/web/src/stream_popover.ts
@@ -5,6 +5,7 @@ import type * as tippy from "tippy.js";
import {z} from "zod";
import render_inline_decorated_stream_name from "../templates/inline_decorated_stream_name.hbs";
+import render_inline_stream_or_topic_reference from "../templates/inline_stream_or_topic_reference.hbs";
import render_move_topic_to_stream from "../templates/move_topic_to_stream.hbs";
import render_left_sidebar_stream_actions_popover from "../templates/popovers/left_sidebar/left_sidebar_stream_actions_popover.hbs";
@@ -379,31 +380,40 @@ export async function build_move_topic_to_stream_popover(
let modal_heading;
if (only_topic_edit) {
modal_heading = $t_html(
- {defaultMessage: "Rename > {topic_name}"},
+ {defaultMessage: "Rename "},
{
- topic_name,
- "z-stream": () =>
- render_inline_decorated_stream_name({stream, show_colored_icon: true}),
+ "z-stream-or-topic": () =>
+ render_inline_stream_or_topic_reference({
+ topic_name,
+ stream,
+ show_colored_icon: true,
+ }),
},
);
} else {
modal_heading = $t_html(
- {defaultMessage: "Move > {topic_name}"},
+ {defaultMessage: "Move "},
{
- topic_name,
- "z-stream": () =>
- render_inline_decorated_stream_name({stream, show_colored_icon: true}),
+ "z-stream-or-topic": () =>
+ render_inline_stream_or_topic_reference({
+ topic_name,
+ stream,
+ show_colored_icon: true,
+ }),
},
);
}
if (message !== undefined) {
modal_heading = $t_html(
- {defaultMessage: "Move messages from > {topic_name}"},
+ {defaultMessage: "Move messages from "},
{
- topic_name,
- "z-stream": () =>
- render_inline_decorated_stream_name({stream, show_colored_icon: true}),
+ "z-stream-or-topic": () =>
+ render_inline_stream_or_topic_reference({
+ stream,
+ topic_name,
+ show_colored_icon: true,
+ }),
},
);
// We disable topic input only for modal is opened from the message actions
diff --git a/web/styles/modal.css b/web/styles/modal.css
index 27c55c3d56..aef2294869 100644
--- a/web/styles/modal.css
+++ b/web/styles/modal.css
@@ -57,6 +57,19 @@
}
}
+.modal__title:has(.stream-or-topic-reference) {
+ /* Reduce the font weight of headings that
+ include stream or topic references (e.g.,
+ topic move/rename modals). */
+ font-weight: 450;
+
+ .stream-or-topic-reference {
+ /* Make the stream or topic references
+ more prominent. */
+ font-weight: 600;
+ }
+}
+
.user-profile-name-heading {
max-width: 80%;
display: flex;
diff --git a/web/templates/inline_stream_or_topic_reference.hbs b/web/templates/inline_stream_or_topic_reference.hbs
new file mode 100644
index 0000000000..52722b9011
--- /dev/null
+++ b/web/templates/inline_stream_or_topic_reference.hbs
@@ -0,0 +1,7 @@
+
+ {{~#if stream~}}
+ {{> inline_decorated_stream_name stream=stream show_colored_icon=show_colored_icon}}
+ {{#if topic_name~}} > {{/if}}
+ {{~/if~}}
+ {{~ topic_name ~}}
+