Add type filter (All / Apps / Services) to topbar

This commit is contained in:
Julien Calixte
2026-04-05 21:50:59 +02:00
parent b50f1887ac
commit ef35eca49b
2 changed files with 32 additions and 3 deletions

View File

@@ -65,6 +65,21 @@
} }
} }
/* ── Type filter ─────────────────────────────────────────────── */
.type-filter {
display: flex;
& .type-btn {
border-radius: 0;
&:first-child { border-radius: 6px 0 0 6px; }
&:last-child { border-radius: 0 6px 6px 0; }
& + .type-btn { margin-left: -1px; }
}
}
/* ── Buttons ─────────────────────────────────────────────────── */ /* ── Buttons ─────────────────────────────────────────────────── */
.btn { .btn {

View File

@@ -118,6 +118,7 @@ export default function App() {
const [token, setToken] = createSignal(localStorage.getItem('coolify_token') ?? '') const [token, setToken] = createSignal(localStorage.getItem('coolify_token') ?? '')
const [settingsOpen, setSettingsOpen] = createSignal(!localStorage.getItem('coolify_url')) const [settingsOpen, setSettingsOpen] = createSignal(!localStorage.getItem('coolify_url'))
const [filter, setFilter] = createSignal('') const [filter, setFilter] = createSignal('')
const [typeFilter, setTypeFilter] = createSignal<'all' | 'application' | 'service'>('all')
const [tick, setTick] = createSignal(0) const [tick, setTick] = createSignal(0)
const source = () => const source = () =>
@@ -134,9 +135,11 @@ export default function App() {
const filtered = () => { const filtered = () => {
const q = filter().toLowerCase() const q = filter().toLowerCase()
return (data() ?? []).filter( const t = typeFilter()
e => !q || e.name.toLowerCase().includes(q) || e.domains.some(d => d.toLowerCase().includes(q)) return (data() ?? []).filter(e => {
) if (t !== 'all' && e.type !== t) return false
return !q || e.name.toLowerCase().includes(q) || e.domains.some(d => d.toLowerCase().includes(q))
})
} }
return ( return (
@@ -149,6 +152,17 @@ export default function App() {
</Show> </Show>
</div> </div>
<div class="topbar-right"> <div class="topbar-right">
<div class="type-filter">
{(['all', 'application', 'service'] as const).map(t => (
<button
class="btn type-btn"
classList={{ active: typeFilter() === t }}
onClick={() => setTypeFilter(t)}
>
{t === 'all' ? 'All' : t === 'application' ? 'Apps' : 'Services'}
</button>
))}
</div>
<input <input
type="search" type="search"
placeholder="Filter apps or domains…" placeholder="Filter apps or domains…"