From 23bd6d7d7f6023b9c4b8b1601d2263587493f19c Mon Sep 17 00:00:00 2001
From: Peifan Li <frank.li.oxygen@gmail.com>
Date: Fri, 21 Nov 2025 17:42:38 -0500
Subject: [PATCH] feat(Home): Add reset search button in search results

---
 frontend/src/App.css        | 20 ++++++++++++++++++++
 frontend/src/App.jsx        |  1 +
 frontend/src/pages/Home.jsx |  8 +++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 71e3787..727ae83 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -963,6 +963,26 @@ body {
   line-height: 1;
 }
 
+.back-to-home-btn {
+  background-color: var(--secondary-color);
+  color: var(--text-color);
+  border: none;
+  border-radius: var(--border-radius);
+  padding: 8px 15px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;
+}
+
+.back-to-home-btn:hover {
+  background-color: var(--primary-color);
+  transform: translateX(-3px);
+}
+
 .search-results-section {
   margin-bottom: 40px;
 }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c085f19..23857d0 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -623,6 +623,7 @@ function App() {
                   youtubeLoading={youtubeLoading}
                   searchResults={searchResults}
                   onDownload={handleDownloadFromSearch}
+                  onResetSearch={resetSearch}
                 />
               }
             />
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index da355c4..208e331 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -14,7 +14,8 @@ const Home = ({
   localSearchResults = [],
   youtubeLoading = false,
   searchResults = [],
-  onDownload
+  onDownload,
+  onResetSearch
 }) => {
   // Add default empty array to ensure videos is always an array
   const videoArray = Array.isArray(videos) ? videos : [];
@@ -56,6 +57,11 @@ const Home = ({
       <div className="search-results">
         <div className="search-header">
           <h2>Search Results for "{searchTerm}"</h2>
+          {onResetSearch && (
+            <button className="back-to-home-btn" onClick={onResetSearch}>
+              ← Back to Home
+            </button>
+          )}
         </div>
 
         {/* Local Video Results */}