inbox: Add icon in search box to clear any text.

web/src/inbox_ui.js

@@ -1046,4 +1046,10 @@ export function initialize() {
             unread_ops.mark_stream_as_read(stream_id);
         }
     });
+
+    $("body").on("click", "#inbox-clear-search", () => {
+        $("#inbox-search").val("");
+        search_and_update();
+        focus_inbox_search();
+    });
 }

web/styles/inbox.css

@@ -61,9 +61,49 @@
                 position: absolute;
                 top: 23px;
                 left: 6px;
-                color: var(--color-icon-inbox-search);
+                color: var(--color-icons-inbox);
                 opacity: 0.4;
             }
+
+            #inbox-clear-search {
+                border: 1px solid transparent;
+                background: transparent;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 2px;
+                cursor: pointer;
+                font-size: 16px;
+                color: var(--color-icons-inbox);
+                opacity: 0.4;
+                transition: all 140ms;
+                padding: 5px;
+                margin: 0;
+                /* = -Width of the button. */
+                margin-right: -28px;
+                position: relative;
+                top: 0;
+                right: 30px;
+
+                &:focus {
+                    outline: none;
+                }
+
+                &:hover,
+                &:focus-visible {
+                    opacity: 1;
+                    background-color: var(--color-background-icon-close-hover);
+                }
+
+                &:active {
+                    opacity: 1;
+                    transform: scale(0.9);
+                }
+            }
+        }
+
+        #inbox-search:placeholder-shown + #inbox-clear-search {
+            display: none;
         }
 
         #inbox-search {
@@ -72,7 +112,7 @@
             overflow: hidden;
             width: var(--width-inbox-search);
             height: var(--height-inbox-search);
-            padding-right: 20px;
+            padding-right: 28px;
             padding-left: 30px;
             font-size: 14px;
             font-style: normal;
@@ -83,7 +123,8 @@
             color: var(--color-inbox-search-text);
             border: 1px solid var(--color-border-inbox-search);
 
-            &:not(:placeholder-shown), &:hover {
+            &:not(:placeholder-shown),
+            &:hover {
                 background-color: var(--color-background-inbox-search-hover);
                 border: 1px solid var(--color-border-inbox-search-hover);
             }

web/styles/zulip.css

@@ -255,6 +255,8 @@ body {
     --color-background-btn-inbox-selected: hsl(0deg 0% 0% / 5%);
     --color-background-btn-inbox-focus: hsl(0deg 0% 80%);
     --color-border-inbox: hsl(0deg 0% 84.31%);
+    --color-icons-inbox: hsl(0deg 0% 0%);
+    --color-background-icon-close-hover: hsl(0deg 0% 0% / 5%);
 }
 
 %dark-theme {
@@ -348,6 +350,8 @@ body {
     --color-background-btn-inbox-selected: hsl(0deg 0% 100% / 5%);
     --color-background-btn-inbox-focus: hsl(0deg 0% 20%);
     --color-border-inbox: hsl(0deg 0% 0% / 60%);
+    --color-icons-inbox: hsl(0deg 0% 100%);
+    --color-background-icon-close-hover: hsl(0deg 0% 100% / 5%);
 }
 
 @media screen {

web/templates/inbox_view/inbox_view.hbs

@@ -1,6 +1,9 @@
 <div id="inbox-main" class="no-select">
     <div class="search_group" id="inbox-filters" role="group">
         <input type="text" id="{{INBOX_SEARCH_ID}}" value="{{search_val}}" autocomplete="off" placeholder="{{t 'Filter' }}" />
+        <button id="inbox-clear-search">
+            <i class="zulip-icon zulip-icon-close-small"></i>
+        </button>
         <i class="zulip-icon zulip-icon-search-inbox"></i>
         <button data-filter="include_muted" id="{{MUTED_FILTER_ID}}" type="button" class="btn btn-default btn-inbox-filter {{#if is_spectator}}fake_disabled_button{{/if}}" role="checkbox" aria-checked="false" tabindex="0">
             <i id="inbox_filter_mute_toggle" class="fa fa-square-o"></i>