88722598ac
- Added zebra striping to extension lists for improved readability across various screen sizes. - Updated the ExtensionStoreView to include margin adjustments for better layout. - Enhanced InstallButton component to manage pending actions more effectively, improving user feedback during installation processes. - Refactored McpServersPanel and SkillsPanel to apply new grid classes for consistent styling. - Adjusted CapabilityChips and CategoryChips for better spacing and visual consistency. - Improved the TeamProvisioningBanner to handle state changes more efficiently. - Updated KanbanTaskCard to replace icons for better clarity in task actions. - Enhanced teamSlice to manage provisioning runs and spawn statuses more effectively, ensuring better state handling.
67 lines
2 KiB
TypeScript
67 lines
2 KiB
TypeScript
/**
|
|
* CategoryChips — horizontal filter chips for plugin categories.
|
|
*/
|
|
|
|
import { useMemo } from 'react';
|
|
|
|
import { Button } from '@renderer/components/ui/button';
|
|
import { normalizeCategory } from '@shared/utils/extensionNormalizers';
|
|
|
|
import type { EnrichedPlugin } from '@shared/types/extensions';
|
|
|
|
interface CategoryChipsProps {
|
|
plugins: EnrichedPlugin[];
|
|
selected: string[];
|
|
onToggle: (category: string) => void;
|
|
}
|
|
|
|
export const CategoryChips = ({
|
|
plugins,
|
|
selected,
|
|
onToggle,
|
|
}: CategoryChipsProps): React.JSX.Element => {
|
|
const categoryCounts = useMemo(() => {
|
|
const counts = new Map<string, number>();
|
|
for (const p of plugins) {
|
|
const cat = normalizeCategory(p.category);
|
|
counts.set(cat, (counts.get(cat) ?? 0) + 1);
|
|
}
|
|
// Sort by count descending
|
|
return [...counts.entries()].sort((a, b) => b[1] - a[1]);
|
|
}, [plugins]);
|
|
|
|
if (categoryCounts.length === 0) return <></>;
|
|
|
|
return (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{categoryCounts.map(([category, count]) => {
|
|
const isActive = selected.includes(category);
|
|
return (
|
|
<Button
|
|
key={category}
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onToggle(category)}
|
|
aria-pressed={isActive}
|
|
className={`h-7 rounded-full border px-2.5 text-[11px] font-medium transition-all ${
|
|
isActive
|
|
? 'border-blue-500/40 bg-blue-500/15 text-blue-300 shadow-sm'
|
|
: 'hover:bg-surface-raised/60 border-border bg-transparent text-text-secondary hover:border-border-emphasis hover:text-text'
|
|
}`}
|
|
>
|
|
<span>{category}</span>
|
|
<span
|
|
className={`ml-1.5 rounded-full px-1 py-0.5 text-[9px] leading-none ${
|
|
isActive
|
|
? 'bg-surface-raised text-text-secondary'
|
|
: 'bg-surface-raised/70 text-text-muted'
|
|
}`}
|
|
>
|
|
{count}
|
|
</span>
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|