From ccc2a3fd57118865efff41ba3bd5c6e9f9a782e7 Mon Sep 17 00:00:00 2001
From: Aditya Tripathi <aditya@climactic.co>
Date: Fri, 18 Sep 2026 09:25:40 +0000
Subject: [PATCH] refactor(ui): make settings filter subordinate to the global
 search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two full-width, equally weighted search boxes (global ⌘K search + settings
search) sat side by side and read as duplicates. Restyle the settings one as a
quiet inline filter: borderless recessed fill instead of a bordered box, 28px
instead of 32px, 'Filter settings' instead of 'Search settings', and a subtle
focus tint. It now reads clearly as a list filter, not a second search bar.
---
 .../application/configuration-sidebar.blade.php  | 16 +++++++++-------
 tests/Feature/SettingsSidebarAccordionTest.php   |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/resources/views/components/application/configuration-sidebar.blade.php b/resources/views/components/application/configuration-sidebar.blade.php
index b77e369d94..7eab0ce997 100644
--- a/resources/views/components/application/configuration-sidebar.blade.php
+++ b/resources/views/components/application/configuration-sidebar.blade.php
@@ -282,14 +282,16 @@
                 <nav aria-label="Configuration sections"
                     x-data="settingsSidebarAccordion({ activeGroup: @js($activeGroup), storageKey: 'coolify.settings-sidebar.application', labels: @js($searchTexts) })"
                     class="grid grid-cols-2 gap-0.5 border-y border-neutral-200 py-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-1 xl:border-y-0 xl:py-0 dark:border-white/[0.06]">
-                    <div class="relative col-span-full mb-1 xl:mb-2">
+                    {{-- A quiet inline filter, deliberately lighter than the global ⌘K
+                         search so the two don't read as duplicate search bars. --}}
+                    <div class="relative col-span-full mb-1.5 xl:mb-2">
                         <x-reicon name="search"
-                            class="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-neutral-400 dark:text-fg-faint" />
-                        <input x-model.debounce.100ms="search" type="search" placeholder="Search settings"
-                            aria-label="Search settings"
-                            class="h-8 w-full rounded-lg border border-neutral-200 bg-white py-0 pr-7 pl-8 text-[12px] shadow-none placeholder:text-neutral-400 focus:border-accent focus:ring-0 dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg dark:placeholder:text-fg-faint">
-                        <button x-cloak x-show="searching" type="button" @click="search = ''" aria-label="Clear search"
-                            class="absolute top-1/2 right-1.5 flex size-5 -translate-y-1/2 items-center justify-center rounded text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-black dark:text-fg-faint dark:hover:bg-white/[0.07] dark:hover:text-fg">
+                            class="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-neutral-400 dark:text-fg-faint" />
+                        <input x-model.debounce.100ms="search" type="search" placeholder="Filter settings"
+                            aria-label="Filter settings"
+                            class="h-7 w-full rounded-md border-0 bg-black/[0.035] py-0 pr-7 pl-7 text-[12px] text-nav-text shadow-none outline-none ring-0 transition-colors placeholder:text-neutral-400 focus:bg-black/[0.05] focus-visible:ring-1 focus-visible:ring-accent/40 dark:bg-white/[0.04] dark:text-fg dark:placeholder:text-fg-faint dark:focus:bg-white/[0.06]">
+                        <button x-cloak x-show="searching" type="button" @click="search = ''" aria-label="Clear filter"
+                            class="absolute top-1/2 right-1 flex size-5 -translate-y-1/2 items-center justify-center rounded text-neutral-400 transition-colors hover:text-black dark:text-fg-faint dark:hover:text-fg">
                             <x-reicon name="x" class="size-3" />
                         </button>
                     </div>
diff --git a/tests/Feature/SettingsSidebarAccordionTest.php b/tests/Feature/SettingsSidebarAccordionTest.php
index 81b0d693de..698e5643cf 100644
--- a/tests/Feature/SettingsSidebarAccordionTest.php
+++ b/tests/Feature/SettingsSidebarAccordionTest.php
@@ -37,7 +37,7 @@ it('adds a client-side search to the application settings sidebar', function ()
     $sidebar = file_get_contents(base_path('resources/views/components/application/configuration-sidebar.blade.php'));
 
     expect($sidebar)
-        ->toContain('Search settings')
+        ->toContain('Filter settings')
         ->toContain('x-model.debounce.100ms="search"')
         ->toContain('matches(')
         // Results are built from a flat index that also covers in-page sub-sections,