Add type filter (All / Apps / Services) to topbar
This commit is contained in:
15
src/App.css
15
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 ─────────────────────────────────────────────────── */
|
/* ── Buttons ─────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
|||||||
20
src/App.tsx
20
src/App.tsx
@@ -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…"
|
||||||
|
|||||||
Reference in New Issue
Block a user