asset_backups/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-11-04 10:22:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor CommandMenu to prevent duplicate scripts across categories (#5463)

Browse Source
This commit is contained in:
Bram Suurd
2025-06-25 20:35:17 +02:00
committed by GitHub
parent ac885f8adb
commit d1deffb235
1 changed files with 48 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/components/CommandMenu.tsx
View File

@@ -134,34 +134,54 @@ export default function CommandMenu() {
<CommandInput placeholder="Search for a script..." />
<CommandList>
<CommandEmpty>{isLoading ? "Loading..." : "No scripts found."}</CommandEmpty>
{links.map((category) => (
<CommandGroup key={`category:${category.name}`} heading={category.name}>
{category.scripts.map((script) => (
<CommandItem
key={`script:${script.slug}`}
value={`${script.slug}-${script.name}`}
onSelect={() => {
setOpen(false);
router.push(`/scripts?id=${script.slug}`);
}}
>
<div className="flex gap-2" onClick={() => setOpen(false)}>
<Image
src={script.logo || `/${basePath}/logo.png`}
onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
unoptimized
width={16}
height={16}
alt=""
className="h-5 w-5"
/>
<span>{script.name}</span>
<span>{formattedBadge(script.type)}</span>
</div>
</CommandItem>
))}
</CommandGroup>
))}
{(() => {
// Track seen scripts globally to avoid duplicates across all categories
const globalSeenScripts = new Set<string>();
return links.map((category) => {
const uniqueScripts = category.scripts.filter((script) => {
if (globalSeenScripts.has(script.slug)) {
return false;
}
globalSeenScripts.add(script.slug);
return true;
});
// Only render category if it has unique scripts
if (uniqueScripts.length === 0) {
return null;
}
return (
<CommandGroup key={`category:${category.name}`} heading={category.name}>
{uniqueScripts.map((script) => (
<CommandItem
key={`script:${script.slug}`}
value={`${script.slug}-${script.name}`}
onSelect={() => {
setOpen(false);
router.push(`/scripts?id=${script.slug}`);
}}
>
<div className="flex gap-2" onClick={() => setOpen(false)}>
<Image
src={script.logo || `/${basePath}/logo.png`}
onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
unoptimized
width={16}
height={16}
alt=""
className="h-5 w-5"
/>
<span>{script.name}</span>
<span>{formattedBadge(script.type)}</span>
</div>
</CommandItem>
))}
</CommandGroup>
);
});
})()}
</CommandList>
</CommandDialog>
</>