From 62511cbc14df079d4a7767f07221611e353c54cc Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Fri, 4 Jul 2025 11:36:51 +0300
Subject: [PATCH] Add search box

---
 frontend/src/App.css | 22 ++++++++++++++++++++++
 frontend/src/App.jsx | 35 +++++++++++++++++++++++++++--------
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 9fc1cd5..52d4107 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -33,3 +33,25 @@ body {
   display: inline-block;
   vertical-align: middle;
 }
+
+.search-input {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid #2e6dc0;
+  color: white;
+  font-family: 'Rajdhani', sans-serif;
+  font-size: 1.1rem;
+  padding: 0.4rem 0;
+  width: 240px;
+  transition: border-color 0.3s ease;
+  outline: none;
+}
+
+.search-input::placeholder {
+  color: #7a8aa5;
+  font-style: italic;
+}
+
+.search-input:focus {
+  border-bottom: 2px solid #4a90e2;
+}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e896ba0..0abd78d 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -20,15 +20,16 @@ function App() {
   const [editData, setEditData] = useState(null);
   const [showAdd, setShowAdd] = useState(false);
   const [confirmData, setConfirmData] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
 
   const loadSections = () => {
-  fetchSections()
-    .then(data => {
-      const filtered = (data.sections || []).filter(section => (section.apps?.length ?? 0) > 0);
-      setSections(filtered);
-    })
-    .catch(err => console.error('Failed to fetch sections:', err));
-};
+    fetchSections()
+      .then(data => {
+        const filtered = (data.sections || []).filter(section => (section.apps?.length ?? 0) > 0);
+        setSections(filtered);
+      })
+      .catch(err => console.error('Failed to fetch sections:', err));
+  };
 
   useEffect(() => {
     loadSections();
@@ -87,6 +88,13 @@ function App() {
     }
   };
 
+  const filteredSections = sections.map(section => ({
+    ...section,
+    apps: section.apps.filter(app =>
+      app.name.toLowerCase().includes(searchTerm.toLowerCase())
+    ),
+  })).filter(section => section.apps.length > 0);
+
   return (
     <div className="App">
       <Clock />
@@ -95,6 +103,17 @@ function App() {
         Navix
       </h1>
 
+      {/* 🔍 Search Box */}
+      <div style={{ display: 'flex', justifyContent: 'flex-start', marginLeft: '2rem' }}>
+        <input
+          type="text"
+          placeholder="Search apps..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="search-input"
+        />
+      </div>
+
       {showAdd && (
         <AppModal
           mode="add"
@@ -122,7 +141,7 @@ function App() {
         />
       )}
 
-      {sections.map((section) => (
+      {filteredSections.map((section) => (
         <SectionGrid
           key={section.name}
           section={section}