starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-09-26 09:20:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): make settings filter subordinate to the global search

Browse Source 
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.
This commit is contained in:
Aditya Tripathi
2026-09-18 09:25:40 +00:00
parent df83ea2b17
commit ccc2a3fd57
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/application/configuration-sidebar.blade.php
+9 -7
View File
@@ -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>
tests/Feature/SettingsSidebarAccordionTest.php
+1 -1
View File
@@ -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,