From 095f36f3749478ec30580c077212a5eae2024ced Mon Sep 17 00:00:00 2001
From: Emelia Smith <ThisIsMissEm@users.noreply.github.com>
Date: Tue, 7 Jan 2025 21:09:50 +0100
Subject: [PATCH] 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>
---
 .../features/compose/components/search.tsx    | 28 +++++++++++++++++++
 app/javascript/mastodon/locales/en.json       |  1 +
 .../styles/mastodon/components.scss           |  2 ++
 3 files changed, 31 insertions(+)

diff --git a/app/javascript/mastodon/features/compose/components/search.tsx b/app/javascript/mastodon/features/compose/components/search.tsx
index 84e11e44b52..fbbbe069331 100644
--- a/app/javascript/mastodon/features/compose/components/search.tsx
+++ b/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'>
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index cf5834835d1..96dfbf408f1 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/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}",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d21175595dd..92167d989c3 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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 {