scheduled_message_overlay: Add a failed delivery indicator.

Fixes #25501

web/shared/icons/exclamation-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>

web/src/tippyjs.js

@@ -405,6 +405,7 @@ export function initialize() {
             "#stream-specific-notify-table .unmute_stream",
             "#add_streams_tooltip",
             "#filter_streams_tooltip",
+            ".error-icon-message-recipient .zulip-icon",
         ],
         appendTo: () => document.body,
     });

web/styles/zulip.css

@@ -88,6 +88,7 @@ body,
     --color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%);
     --color-navbar-bottom-border: hsl(0deg 0% 80%);
     --color-unread-marker: hsl(217deg 100% 50%);
+    --color-failed-message-send-icon: hsl(0deg 100% 50%);
 }
 
 %dark-theme {
@@ -227,7 +228,6 @@ p.n-margin {
     display: none;
 }
 
-.scheduled-messages-loading-logo,
 .alert-zulip-logo,
 .top-messages-logo,
 .bottom-messages-logo {
@@ -1096,7 +1096,7 @@ td.pointer {
 
         .failed_message_action {
             opacity: 1 !important;
-            color: hsl(0deg 100% 50%);
+            color: var(--color-failed-message-send-icon);
             font-weight: bold;
             padding: 1px;
         }
@@ -3135,3 +3135,17 @@ select.invite-as {
         display: none;
     }
 }
+
+#scheduled_messages_overlay .error-icon-message-recipient {
+    width: 15px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-grow: 1;
+    color: var(--color-failed-message-send-icon);
+
+    .zulip-icon {
+        padding: 5px;
+    }
+}

web/templates/scheduled_message_stream_pm_common.hbs

@@ -1 +1,6 @@
+{{#if failed}}
+<div class="error-icon-message-recipient">
+    <i class="zulip-icon zulip-icon-exclamation-circle" data-tippy-content="{{t 'Message could not be sent at the scheduled time. Reschedule by editing it.' }}"></i>
+</div>
+{{/if}}
 <div class="recipient_row_date">{{ formatted_send_at_time }}</div>