refactor(web): extract grid classes and add documentation

Extract shared grid classes into GRID_CLASSES constant for reusability. Add JSDoc comments to explain the purpose of IconsGrid (non-virtualized for small lists) and VirtualizedIconsGrid (optimized for large datasets) components

web/src/components/icon-grid.tsx

@@ -8,9 +8,19 @@ interface IconsGridProps {
 	matchedAliases: Record<string, string>
 }
 
+/**
+ * Base grid layout component used for both regular icon display and virtualized display
+ * Displays icons in a responsive grid with different column counts per breakpoint
+ */
+export const GRID_CLASSES = "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4"
+
+/**
+ * Simple non-virtualized grid for displaying icons
+ * Used for smaller lists (e.g., related icons, first 120 results)
+ */
 export function IconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
 	return (
-		<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-2">
+		<div className={`${GRID_CLASSES} mt-2`}>
 			{filteredIcons.slice(0, 120).map(({ name, data }) => (
 				<IconCard key={name} name={name} data={data} matchedAlias={matchedAliases[name]} />
 			))}
@@ -18,6 +28,10 @@ export function IconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
 	)
 }
 
+/**
+ * Virtualized grid for displaying large lists of icons efficiently
+ * Only renders visible rows for better performance with thousands of icons
+ */
 export function VirtualizedIconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
 	const listRef = useRef<HTMLDivElement | null>(null)
 	const [windowWidth, setWindowWidth] = useState(0)
@@ -72,7 +86,7 @@ export function VirtualizedIconsGrid({ filteredIcons, matchedAliases }: IconsGri
 								width: "100%",
 								transform: `translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px)`,
 							}}
-							className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4"
+							className={GRID_CLASSES}
 						>
 							{rowIcons.map(({ name, data }) => (
 								<IconCard key={name} name={name} data={data} matchedAlias={matchedAliases[name]} />