settings: Improve success feedback for deleting alert words

We add the alert word that was removed to the banner text, and also
reorder a bit for clearer UI.

Fixes #22813

frontend_tests/node_tests/alert_words_ui.js

@@ -86,7 +86,10 @@ run_test("remove_alert_word", ({override_rewire}) => {
     // test success
     success_func();
     assert.ok($alert_word_status.hasClass("alert-success"));
-    assert.equal($alert_word_status_text.text(), "translated: Alert word removed successfully!");
+    assert.equal(
+        $alert_word_status_text.text(),
+        `translated: Alert word "translated: zot" removed successfully!`,
+    );
     assert.ok($alert_word_status.visible());
 });
 

frontend_tests/puppeteer_tests/settings.ts

@@ -322,7 +322,7 @@ async function delete_alert_word(page: Page, word: string): Promise<void> {
 async function test_alert_word_deletion(page: Page, word: string): Promise<void> {
     await delete_alert_word(page, word);
     const status_text = await get_alert_words_status_text(page);
-    assert.strictEqual(status_text, "Alert word removed successfully!");
+    assert.strictEqual(status_text, `Alert word "${word}" removed successfully!`);
     await close_alert_words_status(page);
 }
 

static/js/alert_words_ui.js

@@ -70,7 +70,10 @@ function remove_alert_word(alert_word) {
         data: {alert_words: JSON.stringify(words_to_be_removed)},
         success() {
             update_alert_word_status(
-                $t({defaultMessage: "Alert word removed successfully!"}),
+                $t(
+                    {defaultMessage: `Alert word "{alert_word}" removed successfully!`},
+                    {alert_word},
+                ),
                 false,
             );
         },

static/templates/settings/alert_word_settings.hbs

@@ -4,12 +4,6 @@
             {{t "Alert words allow you to be notified as if you were @-mentioned when certain words or phrases are used in Zulip. Alert words are not case sensitive."}}
         </p>
     </form>
-    <div class="alert" id="alert_word_status" role="alert">
-        <button type="button" class="close close-alert-word-status" aria-label="{{t 'Close' }}">
-            <span aria-hidden="true">&times;</span>
-        </button>
-        <span class="alert_word_status_text"></span>
-    </div>
     <button class="button rounded sea-green" id="open-add-alert-word-modal" type="button">
         {{t 'Add alert word'}}
     </button>
@@ -17,6 +11,12 @@
     <div class="settings_panel_list_header">
         <h3>{{t "Alert words"}}</h3>
     </div>
+    <div class="alert" id="alert_word_status" role="alert">
+        <button type="button" class="close close-alert-word-status" aria-label="{{t 'Close' }}">
+            <span aria-hidden="true">&times;</span>
+        </button>
+        <span class="alert_word_status_text"></span>
+    </div>
     <div class="progressive-table-wrapper" data-simplebar>
         <table class="table table-condensed table-striped wrapped-table">
             <thead class="table-sticky-headers">