dealjus/justin.deal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide Service Categories lacking search results

Browse Source
This commit is contained in:
Justin Deal 2025-05-02 23:19:20 -07:00
parent aa66156388
commit dc75b39596
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/homelab/index.astro
View File

@ -32,6 +32,8 @@ import { services } from "./services.ts";
<div x-data="{ searchQuery: '' }" x-init="
$watch('searchQuery', (query) => {
query = query.toLowerCase();
// First, process all app cards
document.querySelectorAll('.app-card').forEach(card => {
const appName = card.getAttribute('data-app-name').toLowerCase();
if (query === '' || appName.includes(query)) {
@ -40,6 +42,21 @@ import { services } from "./services.ts";
card.style.display = 'none';
}
});
// Then, check each category to see if it has any visible apps
document.querySelectorAll('.category-section').forEach(category => {
const categoryName = category.getAttribute('data-category');
const hasVisibleApps = Array.from(
category.querySelectorAll('.app-card')
).some(card => card.style.display !== 'none');
// Show/hide the category based on whether it has visible apps
if (query === '' || hasVisibleApps) {
category.style.display = '';
} else {
category.style.display = 'none';
}
});
})
">
<div class="flex items-center gap-4 pt-8 pb-4">
@ -67,7 +84,7 @@ import { services } from "./services.ts";
</div>
{Object.entries(services).map(([category, apps], index) => (
<div class="mb-8" x-data="{ open: true }">
<div class="mb-8 category-section" data-category={category} x-data="{ open: true }">
<button
@click="open = !open"
class="text-xl font-semibold mb-4 w-full text-left flex items-center justify-between"