Skip to content

ndg-templates: avoid reparenting option cards while filtering #303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NotAShelf merged 2 commits into from
Oct 7, 2026
Merged

ndg-templates: avoid reparenting option cards while filtering #303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e27efd
fix(templates): avoid reparenting option cards while filtering
karol-broda Oct 6, 2026
3dd2506
docs(changelog): note options filter performance fix
karol-broda Oct 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,12 @@ changes.
are added. JSON uses the same starter values without activating example paths
or sidebar rules. Long time coming honestly.

### Fixed

- Option filtering keeps cards in place and hides nonmatches, reducing delays
from browser extensions that rescan removed and reinserted content. Results
retain their original order, and keyboard navigation skips hidden cards.

## [2.10.2]

### Fixed
Expand Down
89 changes: 67 additions & 22 deletions crates/ndg-templates/templates/default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1398,35 +1398,51 @@ mark {

/* Dark mode SVG icon adjustments */
@media (prefers-color-scheme: dark) {
:where(:root:not([data-theme="light"])) .admonition.note .admonition-title::before {
:where(:root:not([data-theme="light"]))
.admonition.note
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root:not([data-theme="light"])) .admonition.tip .admonition-title::before {
:where(:root:not([data-theme="light"]))
.admonition.tip
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root:not([data-theme="light"])) .admonition.warning .admonition-title::before {
:where(:root:not([data-theme="light"]))
.admonition.warning
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root:not([data-theme="light"])) .admonition.danger .admonition-title::before {
:where(:root:not([data-theme="light"]))
.admonition.danger
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'%3E%3C/polygon%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root:not([data-theme="light"])) .admonition.info .admonition-title::before {
:where(:root:not([data-theme="light"]))
.admonition.info
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23818cf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 16v-4'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root:not([data-theme="light"])) .admonition.important .admonition-title::before {
:where(:root:not([data-theme="light"]))
.admonition.important
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 8v4'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root:not([data-theme="light"])) .admonition.example .admonition-title::before {
:where(:root:not([data-theme="light"]))
.admonition.example
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cpolyline points='12 19 20 19'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root:not([data-theme="light"])) .admonition.caution .admonition-title::before {
:where(:root:not([data-theme="light"]))
.admonition.caution
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23fb923c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
}
}
Expand All @@ -1451,7 +1467,9 @@ mark {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23818cf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 16v-4'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root[data-theme="dark"]) .admonition.important .admonition-title::before {
:where(:root[data-theme="dark"])
.admonition.important
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 8v4'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
}

Expand All @@ -1465,35 +1483,51 @@ mark {

/* Light mode SVG icon adjustments */
@media (prefers-color-scheme: light) {
:where(:root:not([data-theme="dark"])) .admonition.note .admonition-title::before {
:where(:root:not([data-theme="dark"]))
.admonition.note
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root:not([data-theme="dark"])) .admonition.tip .admonition-title::before {
:where(:root:not([data-theme="dark"]))
.admonition.tip
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root:not([data-theme="dark"])) .admonition.warning .admonition-title::before {
:where(:root:not([data-theme="dark"]))
.admonition.warning
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root:not([data-theme="dark"])) .admonition.danger .admonition-title::before {
:where(:root:not([data-theme="dark"]))
.admonition.danger
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'%3E%3C/polygon%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

:where(:root:not([data-theme="dark"])) .admonition.info .admonition-title::before {
:where(:root:not([data-theme="dark"]))
.admonition.info
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 16v-4'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root:not([data-theme="dark"])) .admonition.important .admonition-title::before {
:where(:root:not([data-theme="dark"]))
.admonition.important
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 8v4'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root:not([data-theme="dark"])) .admonition.example .admonition-title::before {
:where(:root:not([data-theme="dark"]))
.admonition.example
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cpolyline points='12 19 20 19'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root:not([data-theme="dark"])) .admonition.caution .admonition-title::before {
:where(:root:not([data-theme="dark"]))
.admonition.caution
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
}
}
Expand All @@ -1506,7 +1540,9 @@ mark {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root[data-theme="light"]) .admonition.warning .admonition-title::before {
:where(:root[data-theme="light"])
.admonition.warning
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

Expand All @@ -1518,15 +1554,21 @@ mark {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 16v-4'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root[data-theme="light"]) .admonition.important .admonition-title::before {
:where(:root[data-theme="light"])
.admonition.important
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M12 8v4'%3E%3C/path%3E%3Cpath d='M12 16h.01'%3E%3C/path%3E%3C/svg%3E");
}

:where(:root[data-theme="light"]) .admonition.example .admonition-title::before {
:where(:root[data-theme="light"])
.admonition.example
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%2306b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cpolyline points='12 19 20 19'%3E%3C/polyline%3E%3C/svg%3E");
}

:where(:root[data-theme="light"]) .admonition.caution .admonition-title::before {
:where(:root[data-theme="light"])
.admonition.caution
.admonition-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
}

Expand Down Expand Up @@ -2005,7 +2047,10 @@ h6:hover .copy-link {
color: white;
}

/* Option styling */
.option[hidden] {
display: none;
}

.options-page .content {
max-width: 960px;
}
Expand Down
93 changes: 68 additions & 25 deletions crates/ndg-templates/templates/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,7 +425,7 @@ function setupOptionKeyboardNavigation(signal) {
const optionLinks = () =>
Array.from(
container.querySelectorAll(".option .option-anchor, .option-page-row"),
);
).filter((link) => !link.closest("[hidden]"));
const focusOption = (link) => {
link.focus({ preventScroll: true });
link
Expand Down Expand Up @@ -638,28 +638,49 @@ function setupOptionChunkLoading(signal) {
return { hashReady, loadAll };
}

function getFilterMatches(searchTerm, originalOrder, data) {
function getFilterRank({ name, searchText }, term) {
const position = name.indexOf(term);
return {
rank: position === -1 ? 1 : 0,
position: position === -1 ? searchText.indexOf(term) : position,
};
}

function getFilterMatches(
searchTerm,
originalOrder,
data,
preserveOrder = false,
) {
if (searchTerm === "") {
return originalOrder.map((element, index) => ({ element, index }));
}

const terms = searchTerm.split(/\s+/).filter(Boolean);
const firstTerm = terms[0] || "";

return data
.filter((item) => terms.every((term) => item.searchText.includes(term)))
.sort((a, b) => {
const aRank = a.name.includes(firstTerm) ? 0 : 1;
const bRank = b.name.includes(firstTerm) ? 0 : 1;
if (aRank !== bRank) return aRank - bRank;
const aPos = a.name.includes(firstTerm)
? a.name.indexOf(firstTerm)
: a.searchText.indexOf(firstTerm);
const bPos = b.name.includes(firstTerm)
? b.name.indexOf(firstTerm)
: b.searchText.indexOf(firstTerm);
return aPos - bPos || a.index - b.index;
});
const matches = data.filter((item) =>
terms.every((term) => item.searchText.includes(term)),
);
if (preserveOrder) return matches;

return matches.sort((a, b) => {
const aRank = getFilterRank(a, firstTerm);
const bRank = getFilterRank(b, firstTerm);
return (
aRank.rank - bRank.rank ||
aRank.position - bRank.position ||
a.index - b.index
);
});
}

function setFilteredItemVisibility(data, matches) {
const visibleElements = new Set(matches.map((item) => item.element));
for (const { element } of data) {
const hidden = !visibleElements.has(element);
if (element.hidden !== hidden) element.hidden = hidden;
}
}

function reconcileFilteredItems({
Expand All @@ -670,7 +691,16 @@ function reconcileFilteredItems({
reduceMotion,
animateChanges,
isCurrentRun,
preserveOrder = false,
}) {
if (preserveOrder) {
setFilteredItemVisibility(data, matches);
return;
}

for (const { element } of data) {
element.classList.remove("filter-entering", "filter-leaving");
}
const visibleElements = new Set(matches.map((item) => item.element));
const leaving = [];

Expand Down Expand Up @@ -730,15 +760,25 @@ function reconcileFilteredItems({
}

function setupListFilter(
{ inputId, containerSelector, itemSelector, nameSelector, noun, prepare },
{
inputId,
containerSelector,
itemSelector,
nameSelector,
noun,
prepare,
preserveOrder = false,
},
signal,
) {
const input = document.getElementById(inputId);
const container = document.querySelector(containerSelector);
if (!input || !container) return;

const hiddenContainer = document.createElement("template");
document.body.appendChild(hiddenContainer);
const hiddenContainer = preserveOrder
? null
: document.createElement("template");
if (hiddenContainer) document.body.appendChild(hiddenContainer);

const filterResults = document.createElement("div");
filterResults.className = "filter-results";
Expand Down Expand Up @@ -790,11 +830,12 @@ function setupListFilter(
lastTerm = searchTerm;
filterRun += 1;
const currentRun = filterRun;
for (const item of data) {
item.element.classList.remove("filter-entering", "filter-leaving");
}

const matches = getFilterMatches(searchTerm, originalOrder, data);
const matches = getFilterMatches(
searchTerm,
originalOrder,
data,
preserveOrder,
);
reconcileFilteredItems({
container,
hiddenContainer,
Expand All @@ -803,6 +844,7 @@ function setupListFilter(
reduceMotion,
animateChanges,
isCurrentRun: () => currentRun === filterRun,
preserveOrder,
});

if (searchTerm !== "" && matches.length < totalCount) {
Expand Down Expand Up @@ -840,7 +882,7 @@ function setupListFilter(
"abort",
() => {
clearTimeout(timeout);
hiddenContainer.remove();
hiddenContainer?.remove();
},
{ once: true },
);
Expand Down Expand Up @@ -1042,6 +1084,7 @@ function setupOptionsFilter(signal, optionChunks) {
nameSelector: ".option-name",
noun: "options",
prepare: optionChunks?.loadAll,
preserveOrder: true,
};
if (optionsIndexList) {
config = {
Expand Down
Loading
Loading