feat(site/src/pages/TemplateBuilder): prioritize template builder module display order (#26835)

Adds a curated priority ordering for modules in the template builder
module picker. Modules in the priority list appear first in the
specified order; unlisted modules appear after in their original order.

## Changes

- Added `MODULE_PRIORITY` constant in `ModuleSelectStep.tsx` with the
preferred display order
- Added `sortByPriority()` helper to sort modules against the priority
list
- Not-yet-imported module IDs (`codex`, `antigravity`, `kasmvnc`) are
included but commented out
- Both the module grid and category tabs respect the new ordering
- Search results still use fuzzy relevance ordering

> Generated by Coder Agents on behalf of @jeremyruppel
This commit is contained in:
Jeremy Ruppel
2026-06-29 17:04:26 -04:00
committed by GitHub
parent 48e8f70e09
commit 9f7caa04f9
@@ -70,6 +70,40 @@ const ConflictWarning: FC<ModuleConflict> = ({ moduleA, moduleB }) => {
);
};
// Preferred display order for modules. Modules in this list appear first,
// in this order. Unlisted modules appear after, in their original order.
const MODULE_PRIORITY: readonly string[] = [
"claude-code",
// "codex",
"cursor",
"vscode-desktop",
"code-server",
"jetbrains",
"vscode-web",
"zed",
// "antigravity",
"windsurf",
"git-clone",
"dotfiles",
"git-config",
"personalize",
"filebrowser",
// "kasmvnc",
];
function sortByPriority<T extends { id: string }>(
items: readonly T[],
priority: readonly string[],
): T[] {
const indexMap = new Map(priority.map((id, i) => [id, i]));
const fallback = priority.length;
return [...items].sort((a, b) => {
const ai = indexMap.get(a.id) ?? fallback;
const bi = indexMap.get(b.id) ?? fallback;
return ai - bi;
});
}
export const ModuleSelectStep: FC<ModuleSelectStepProps> = ({
baseId,
selectedModuleIds,
@@ -78,14 +112,15 @@ export const ModuleSelectStep: FC<ModuleSelectStepProps> = ({
const { data, error, isLoading } = useQuery(templateBuilderModules(baseId));
const [moduleSearchText, setModuleSearchText] = useState("");
const modules = data?.modules ?? [];
const sortedModules = sortByPriority(modules, MODULE_PRIORITY);
const categories = [
...new Set(modules.map((module) => module.category)),
...new Set(sortedModules.map((module) => module.category)),
].sort((a, b) => a.localeCompare(b));
const [selectedFilterTab, setSelectedFilterTab] = useState("All");
const searchedModules = useFuzzySearch({
allItems: modules,
allItems: sortedModules,
searchText: moduleSearchText,
searchProperties: ["display_name", "description"],
});