From ae54fec0a60fad500d07538391726292ffb3fcaa Mon Sep 17 00:00:00 2001
From: zack <75211659+zackycodes@users.noreply.github.com>
Date: Sun, 31 May 2026 14:19:03 +0530
Subject: [PATCH 1/2] Add search input to settings page

Added a search input for settings with styling.
---
 src/settings.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/settings.html b/src/settings.html
index 995bb9e7..f5c28698 100644
--- a/src/settings.html
+++ b/src/settings.html
@@ -2,6 +2,15 @@
     <div></div>
 </div>
 
+<div id="settings-search-wrapper" style="padding: 10px 20px;">
+    <input 
+        type="text" 
+        id="settings-search" 
+        placeholder="Search settings... (e.g., wallpaper)" 
+        style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color, #333); background: var(--bg-color, #222); color: #fff; font-size: 14px;"
+    />
+</div>
+
 <div id="supporters-notif-container" class="dropdown">
     <div id="supporters-notif" tabindex="0">
         <button id="supporters-notif-close" tabindex="0">

From b6550d2784c8ed9e62f5c3ab7060537b7fef8cfa Mon Sep 17 00:00:00 2001
From: zack <75211659+zackycodes@users.noreply.github.com>
Date: Sun, 31 May 2026 14:26:01 +0530
Subject: [PATCH 2/2] Add search functionality to settings

---
 src/scripts/settings.ts | 44 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/src/scripts/settings.ts b/src/scripts/settings.ts
index 2288e935..7da635ce 100644
--- a/src/scripts/settings.ts
+++ b/src/scripts/settings.ts
@@ -120,6 +120,7 @@ function settingsInitEvent(event: Event): void {
     initOptionsValues(sync, local)
     initOptionsEvents()
     settingsFooter()
+    initSettingsSearch()
 
     // 3. Can be deferred
 
@@ -1608,3 +1609,46 @@ function setFormInput(id: string, defaults: string, value?: string): void {
         input.setAttribute('placeholder', defaults)
     }
 }
+
+function initSettingsSearch(): void {
+    const searchInput = document.getElementById('settings-search') as HTMLInputElement | null;
+    if (!searchInput) return;
+
+    searchInput.addEventListener('input', (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        const query = target.value.toLowerCase().trim();
+        
+        // Bonjourr wraps individual settings inside elements with a '.param' class
+        const params = document.querySelectorAll<HTMLElement>('#settings-container .param');
+
+        params.forEach((param) => {
+            const textContent = param.textContent?.toLowerCase() || '';
+
+            if (query === '') {
+                param.style.display = '';
+            } else if (textContent.includes(query)) {
+                param.style.display = '';
+            } else {
+                param.style.display = 'none';
+            }
+        });
+
+        // Hide or show group/section headers if all their nested controls are hidden
+        const categories = document.querySelectorAll<HTMLElement>('#settings-container .category, #settings-container fieldset');
+        categories.forEach((category) => {
+            if (query === '') {
+                category.style.display = '';
+                return;
+            }
+            
+            // Check if this specific group still has any visible parameters left
+            const visibleParams = category.querySelectorAll<HTMLElement>('.param:not([style*="display: none"])');
+            
+            if (visibleParams.length === 0) {
+                category.style.display = 'none';
+            } else {
+                category.style.display = '';
+            }
+        });
+    });
+}