diff --git a/src/App.css b/src/App.css index ac334ea..7e485b0 100644 --- a/src/App.css +++ b/src/App.css @@ -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 ─────────────────────────────────────────────────── */ .btn { diff --git a/src/App.tsx b/src/App.tsx index 8e7f411..dacf9a0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -118,6 +118,7 @@ export default function App() { const [token, setToken] = createSignal(localStorage.getItem('coolify_token') ?? '') const [settingsOpen, setSettingsOpen] = createSignal(!localStorage.getItem('coolify_url')) const [filter, setFilter] = createSignal('') + const [typeFilter, setTypeFilter] = createSignal<'all' | 'application' | 'service'>('all') const [tick, setTick] = createSignal(0) const source = () => @@ -134,9 +135,11 @@ export default function App() { const filtered = () => { const q = filter().toLowerCase() - return (data() ?? []).filter( - e => !q || e.name.toLowerCase().includes(q) || e.domains.some(d => d.toLowerCase().includes(q)) - ) + const t = typeFilter() + 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 ( @@ -149,6 +152,17 @@ export default function App() {