Add search box

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;
+}

frontend/src/App.jsx

@@ -20,6 +20,7 @@ function App() {
   const [editData, setEditData] = useState(null);
   const [showAdd, setShowAdd] = useState(false);
   const [confirmData, setConfirmData] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
 
   const loadSections = () => {
     fetchSections()
@@ -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}