From 8c93cac6b8236570e6faaa42990e6aac2b227701 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 21 May 2025 05:52:42 +0000
Subject: [PATCH] feat: Add search functionality to header

- Moved search input from Sidebar to Header.
- Implemented search logic to filter repositories by name and description (case-insensitive).
- Updated App and Header components to manage and pass search term.
- Removed search functionality from Sidebar.
---
 web/App.tsx                | 18 +++++++++---------
 web/components/Header.tsx  | 22 ++++++++++++++++++++--
 web/components/Sidebar.tsx |  4 ----
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/web/App.tsx b/web/App.tsx
index cd83b4a..e469cfb 100644
--- a/web/App.tsx
+++ b/web/App.tsx
@@ -11,7 +11,7 @@ function App() {
   );
   const [filteredRepos, setFilteredRepos] = useState<Repository[]>([]);
   const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);
-  const [searchTerm, setSearchTerm] = useState('');
+  const [headerSearchTerm, setHeaderSearchTerm] = useState('');
 
   // Filter repositories based on selected language and search term
   useEffect(() => {
@@ -21,8 +21,8 @@ function App() {
       filtered = filtered.filter(repo => repo.language === selectedLanguage);
     }
 
-    if (searchTerm) {
-      const term = searchTerm.toLowerCase();
+    if (headerSearchTerm) {
+      const term = headerSearchTerm.toLowerCase();
       filtered = filtered.filter(
         repo =>
           repo.name.toLowerCase().includes(term) ||
@@ -31,23 +31,25 @@ function App() {
     }
 
     setFilteredRepos(filtered);
-  }, [repositories, selectedLanguage, searchTerm]);
+  }, [repositories, selectedLanguage, headerSearchTerm]);
 
   // Get unique languages
   const languages = [
     ...new Set(repositories.map(repo => repo.language).filter(Boolean)),
   ];
 
+  const handleHeaderSearchTermChange = (term: string) => {
+    setHeaderSearchTerm(term);
+  };
+
   return (
     <div>
-      <Header />
+      <Header onSearchTermChange={handleHeaderSearchTermChange} />
       <div className="flex items-start divide-x">
         <Sidebar
           languages={languages as string[]}
           selectedLanguage={selectedLanguage}
           onSelectLanguage={setSelectedLanguage}
-          searchTerm={searchTerm}
-          onSearchChange={setSearchTerm}
           totalRepos={repositories.length}
           filteredCount={filteredRepos.length}
         />
@@ -65,8 +67,6 @@ function App() {
             languages={languages as string[]}
             selectedLanguage={selectedLanguage}
             onSelectLanguage={setSelectedLanguage}
-            searchTerm={searchTerm}
-            onSearchChange={setSearchTerm}
             totalRepos={repositories.length}
             filteredCount={filteredRepos.length}
           />
diff --git a/web/components/Header.tsx b/web/components/Header.tsx
index fe4be91..55da46f 100644
--- a/web/components/Header.tsx
+++ b/web/components/Header.tsx
@@ -1,12 +1,30 @@
 import logo from './starkit.svg';
 import { Input } from './ui/Input';
+import { useState } from 'react';
+
+interface HeaderProps {
+  onSearchTermChange: (searchTerm: string) => void;
+}
+
+function Header({ onSearchTermChange }: HeaderProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const onSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newSearchTerm = event.target.value;
+    setSearchTerm(newSearchTerm);
+    onSearchTermChange(newSearchTerm);
+  };
 
-function Header() {
   return (
     <div className="h-20 flex items-center px-10 justify-between border-b sticky top-0 bg-background/50 backdrop-blur-md z-50">
       <img draggable={false} src={logo} className="w-10 aspect-square" />
       <div className="flex items-center gap-2">
-        <Input placeholder="Search" className="w-60" />
+        <Input
+          placeholder="Search"
+          className="w-60"
+          value={searchTerm}
+          onChange={onSearchChange}
+        />
       </div>
     </div>
   );
diff --git a/web/components/Sidebar.tsx b/web/components/Sidebar.tsx
index 36675a7..828511e 100644
--- a/web/components/Sidebar.tsx
+++ b/web/components/Sidebar.tsx
@@ -5,8 +5,6 @@ interface SidebarProps {
   languages: string[];
   selectedLanguage: string | null;
   onSelectLanguage: (language: string | null) => void;
-  searchTerm: string;
-  onSearchChange: (search: string) => void;
   totalRepos: number;
   filteredCount: number;
 }
@@ -15,8 +13,6 @@ const Sidebar: React.FC<SidebarProps> = ({
   languages,
   selectedLanguage,
   onSelectLanguage,
-  searchTerm,
-  onSearchChange,
   totalRepos,
   filteredCount,
 }) => {