games: collapse non-featured game chips behind +N more; slide-only flyout animation
All checks were successful
Deploy production / deploy (push) Successful in 1m9s

This commit is contained in:
2026-10-25 15:25:41 +00:00
parent d79b73ad83
commit 968ec34ac5
3 changed files with 9 additions and 3 deletions

View File

@@ -35,7 +35,11 @@
let expanded = $state<Record<string, boolean>>({});
const visibleChildren = (group: Item) => {
const all = group.children ?? [];
return expanded[group.name] ? all : all.filter((c) => c.featured ?? true);
return expanded[group.name]
? all
: all.some((c) => c.featured)
? all.filter((c) => c.featured)
: all;
};
const hiddenCount = (group: Item) =>
(group.children?.length ?? 0) - visibleChildren(group).length;

View File

@@ -693,8 +693,8 @@
--flyout-from: 4px;
}
@keyframes flyout-in {
/* Slide only: an opacity fade here left the flyout half see-through after hovering. */
from {
opacity: 0;
transform: translateX(var(--flyout-from));
}
}

View File

@@ -69,7 +69,9 @@
const tileChildren = (t: Group) =>
filtering || expandedGroups[t.name]
? (t.children ?? [])
: (t.children ?? []).filter((c) => c.featured ?? true);
: (t.children ?? []).some((c) => c.featured)
? (t.children ?? []).filter((c) => c.featured)
: (t.children ?? []);
const hiddenChildren = (t: Group) => (t.children?.length ?? 0) - tileChildren(t).length;
// The links filter (f) also narrows the trackers; a group stays if it or a chip matches.
const shownTrackers = $derived.by(() => {