Add button to clear all recent searches

This reimplements the changes from #27318 rebased to the latest icons and code

Co-authored-by: Hugh Rawlinson <hughr2005@gmail.com>

app/javascript/mastodon/features/compose/components/search.tsx

@@ -33,6 +33,10 @@ const messages = defineMessages({
     id: 'search.search_or_paste',
     defaultMessage: 'Search or paste URL',
   },
+  clearAllRecent: {
+    id: 'search.clear_all_recent',
+    defaultMessage: 'Clear all recent searches',
+  },
 });
 
 const labelForRecentSearch = (search: RecentSearch) => {
@@ -225,6 +229,17 @@ export const Search: React.FC<{
     },
   }));
 
+  const forgetAll = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      recent.forEach((search) => {
+        void dispatch(forgetSearchResult(search.q));
+      });
+    },
+    [dispatch, recent],
+  );
+
   const navigableOptions = hasValue
     ? quickActions.concat(searchOptions)
     : recentOptions.concat(quickActions, searchOptions);
@@ -451,6 +466,18 @@ export const Search: React.FC<{
     setSelectedOption(-1);
   }, [setExpanded, setSelectedOption]);
 
+  const clearAllRecentButton =
+    recentOptions.length === 0 ? null : (
+      <button
+        className='icon-button'
+        onMouseDown={forgetAll}
+        aria-label={intl.formatMessage(messages.clearAllRecent)}
+        title={intl.formatMessage(messages.clearAllRecent)}
+      >
+        <Icon id='times' icon={CloseIcon} />
+      </button>
+    );
+
   return (
     <form className={classNames('search', { active: expanded })}>
       <input
@@ -492,6 +519,7 @@ export const Search: React.FC<{
                 id='search_popout.recent'
                 defaultMessage='Recent searches'
               />
+              {clearAllRecentButton}
             </h4>
 
             <div className='search__popout__menu'>

app/javascript/mastodon/locales/en.json

@@ -762,6 +762,7 @@
   "report_notification.categories.violation": "Rule violation",
   "report_notification.categories.violation_sentence": "rule violation",
   "report_notification.open": "Open report",
+  "search.clear_all_recent": "Clear all recent searches",
   "search.no_recent_searches": "No recent searches",
   "search.placeholder": "Search",
   "search.quick_action.account_search": "Profiles matching {x}",

app/javascript/styles/mastodon/components.scss

@@ -5328,6 +5328,8 @@ a.status-card {
       font-weight: 500;
       padding: 0 10px;
       margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
     }
 
     .icon-button {