feat(icons/id): Add related icons

web/src/components/icon-card.tsx

@@ -0,0 +1,35 @@
+import { MagicCard } from "@/components/magicui/magic-card"
+import { BASE_URL } from "@/constants"
+import type { Icon } from "@/types/icons"
+import Image from "next/image"
+import Link from "next/link"
+
+export function IconCard({
+	name,
+	data: iconData,
+	matchedAlias,
+}: {
+	name: string
+	data: Icon
+	matchedAlias?: string | null
+}) {
+	return (
+		<MagicCard className="rounded-md shadow-md">
+			<Link prefetch={false} href={`/icons/${name}`} className="group flex flex-col items-center p-3 sm:p-4 cursor-pointer">
+				<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
+					<Image
+						src={`${BASE_URL}/${iconData.base}/${name}.${iconData.base}`}
+						alt={`${name} icon`}
+						fill
+						className="object-contain p-1 group-hover:scale-110 transition-transform duration-300"
+					/>
+				</div>
+				<span className="text-xs sm:text-sm text-center truncate w-full capitalize group- dark:group-hover:text-primary transition-colors duration-200 font-medium">
+					{name.replace(/-/g, " ")}
+				</span>
+
+				{matchedAlias && <span className="text-[10px] text-center truncate w-full mt-1">Alias: {matchedAlias}</span>}
+			</Link>
+		</MagicCard>
+	)
+}

web/src/components/icon-details.tsx

@@ -1,15 +1,15 @@
 "use client"
 
+import { IconsGrid } from "@/components/icon-grid"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { BASE_URL, REPO_PATH } from "@/constants"
-import type { AuthorData, Icon } from "@/types/icons"
+import type { AuthorData, Icon, IconFile } from "@/types/icons"
 import confetti from "canvas-confetti"
 import { motion } from "framer-motion"
 import { Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
 import Image from "next/image"
 import Link from "next/link"
 import { useCallback, useState } from "react"
@@ -22,9 +22,10 @@ export type IconDetailsProps = {
 	icon: string
 	iconData: Icon
 	authorData: AuthorData
+	allIcons: IconFile
 }
 
-export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
+export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetailsProps) {
 	const authorName = authorData.name || authorData.login || ""
 	const iconColorVariants = iconData.colors
 	const formattedDate = new Date(iconData.update.timestamp).toLocaleDateString("en-GB", {
@@ -159,6 +160,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 									whileHover={{ scale: 1.05 }}
 									whileTap={{ scale: 0.95 }}
 									onClick={(e) => handleCopy(imageUrl, variantKey, e)}
+									aria-label={`Copy ${format.toUpperCase()} URL for ${iconName}${theme ? ` (${theme} theme)` : ""}`}
 								>
 									<div className="absolute inset-0 border-2 border-transparent group-hover:border-primary/20 rounded-xl z-10 transition-colors" />
 
@@ -264,23 +266,25 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 	}
 
 	return (
-		<div className="container mx-auto pt-12 pb-14 px-4 sm:px-6 lg:px-8">
+		<main className="container mx-auto pt-12 pb-14 px-4 sm:px-6 lg:px-8">
 			<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
 				{/* Left Column: Icon Info and Author */}
 				<div className="lg:col-span-1">
 					<Card className="h-full bg-background/50 border shadow-lg">
 						<CardHeader className="pb-4">
 							<div className="flex flex-col items-center">
-								<div className="relative w-32 h-32  rounded-xl overflow-hidden border flex items-center justify-center p-3 ">
+								<div className="relative w-32 h-32 rounded-xl overflow-hidden border flex items-center justify-center p-3">
 									<Image
 										src={`${BASE_URL}/${iconData.base}/${icon}.${iconData.base}`}
 										width={96}
 										height={96}
-										alt={icon}
+										alt={`High quality ${icon.replace(/-/g, " ")} icon in ${iconData.base.toUpperCase()} format`}
 										className="w-full h-full object-contain"
 									/>
 								</div>
-								<CardTitle className="text-2xl font-bold capitalize text-center mb-2">{icon}</CardTitle>
+								<CardTitle className="text-2xl font-bold capitalize text-center mb-2">
+									<h1>{icon.replace(/-/g, " ")}</h1>
+								</CardTitle>
 							</div>
 						</CardHeader>
 						<CardContent>
@@ -289,14 +293,14 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 									<div className="space-y-2">
 										<div className="flex items-center gap-2">
 											<p className="text-sm">
-												<span className="font-medium">Updated on:</span> {formattedDate}
+												<span className="font-medium">Updated on:</span> <time dateTime={iconData.update.timestamp}>{formattedDate}</time>
 											</p>
 										</div>
 										<div className="flex items-center gap-2">
 											<div className="flex items-center gap-2">
 												<p className="text-sm font-medium">By:</p>
 												<Avatar className="h-5 w-5 border">
-													<AvatarImage src={authorData.avatar_url} alt={authorName} />
+													<AvatarImage src={authorData.avatar_url} alt={`${authorName}'s avatar`} />
 													<AvatarFallback>{authorName ? authorName.slice(0, 2).toUpperCase() : "??"}</AvatarFallback>
 												</Avatar>
 												{authorData.html_url ? (
@@ -379,7 +383,9 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 				<div className="lg:col-span-2">
 					<Card className="h-full bg-background/50 shadow-lg">
 						<CardHeader>
-							<CardTitle>Icon variants</CardTitle>
+							<CardTitle>
+								<h2>Icon variants</h2>
+							</CardTitle>
 							<CardDescription>Click on any icon to copy its URL to your clipboard</CardDescription>
 						</CardHeader>
 						<CardContent>
@@ -470,6 +476,31 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
 					</Card>
 				</div>
 			</div>
-		</div>
+			{iconData.categories && iconData.categories.length > 0 && (
+				<section className="container mx-auto mt-12" aria-labelledby="related-icons-title">
+					<Card className="bg-background/50 border shadow-lg">
+						<CardHeader>
+							<CardTitle>
+								<h2 id="related-icons-title">Related Icons</h2>
+							</CardTitle>
+							<CardDescription>
+								Other icons from {iconData.categories.map((cat) => cat.replace(/-/g, " ")).join(", ")} categories
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<IconsGrid
+								filteredIcons={Object.entries(allIcons)
+									.filter(([name, data]) => {
+										if (name === icon) return false
+										return data.categories?.some((cat) => iconData.categories?.includes(cat))
+									})
+									.map(([name, data]) => ({ name, data }))}
+								matchedAliases={{}}
+							/>
+						</CardContent>
+					</Card>
+				</section>
+			)}
+		</main>
 	)
 }

web/src/components/icon-grid.tsx

@@ -0,0 +1,21 @@
+import type { Icon } from "@/types/icons"
+
+import { IconCard } from "./icon-card"
+
+interface IconsGridProps {
+	filteredIcons: { name: string; data: Icon }[]
+	matchedAliases: Record<string, string>
+}
+
+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">
+				{filteredIcons.slice(0, 120).map(({ name, data }) => (
+					<IconCard key={name} name={name} data={data} matchedAlias={matchedAliases[name] || null} />
+				))}
+			</div>
+			{filteredIcons.length > 120 && <p className="text-sm text-muted-foreground">And {filteredIcons.length - 120} more...</p>}
+		</>
+	)
+}

web/src/components/icon-search.tsx

@@ -0,0 +1,440 @@
+"use client"
+
+import { IconsGrid } from "@/components/icon-grid"
+import { IconSubmissionContent } from "@/components/icon-submission-form"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import type { IconSearchProps } from "@/types/icons"
+import { ArrowDownAZ, ArrowUpZA, Calendar, Filter, Search, SortAsc, X } from "lucide-react"
+import { useTheme } from "next-themes"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import posthog from "posthog-js"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { toast } from "sonner"
+
+type SortOption = "relevance" | "alphabetical-asc" | "alphabetical-desc" | "newest"
+
+export function IconSearch({ icons }: IconSearchProps) {
+	const searchParams = useSearchParams()
+	const initialQuery = searchParams.get("q")
+	const initialCategories = searchParams.getAll("category")
+	const initialSort = (searchParams.get("sort") as SortOption) || "relevance"
+	const router = useRouter()
+	const pathname = usePathname()
+	const [searchQuery, setSearchQuery] = useState(initialQuery ?? "")
+	const [debouncedQuery, setDebouncedQuery] = useState(initialQuery ?? "")
+	const [selectedCategories, setSelectedCategories] = useState<string[]>(initialCategories ?? [])
+	const [sortOption, setSortOption] = useState<SortOption>(initialSort)
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+	const { resolvedTheme } = useTheme()
+	const [isLazyRequestSubmitted, setIsLazyRequestSubmitted] = useState(false)
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedQuery(searchQuery)
+		}, 200)
+
+		return () => clearTimeout(timer)
+	}, [searchQuery])
+
+	// Extract all unique categories
+	const allCategories = useMemo(() => {
+		const categories = new Set<string>()
+		for (const icon of icons) {
+			for (const category of icon.data.categories) {
+				categories.add(category)
+			}
+		}
+		return Array.from(categories).sort()
+	}, [icons])
+
+	// Simple filter function using substring matching
+	const filterIcons = useCallback(
+		(query: string, categories: string[], sort: SortOption) => {
+			// First filter by categories if any are selected
+			let filtered = icons
+			if (categories.length > 0) {
+				filtered = filtered.filter(({ data }) =>
+					data.categories.some((cat) => categories.some((selectedCat) => cat.toLowerCase() === selectedCat.toLowerCase())),
+				)
+			}
+
+			// Then filter by search query
+			if (query.trim()) {
+				// Normalization function: lowercase, remove spaces and hyphens
+				const normalizeString = (str: string) => str.toLowerCase().replace(/[-\s]/g, "")
+				const normalizedQuery = normalizeString(query)
+
+				filtered = filtered.filter(({ name, data }) => {
+					// Check normalized name
+					if (normalizeString(name).includes(normalizedQuery)) return true
+					// Check normalized aliases
+					if (data.aliases.some((alias) => normalizeString(alias).includes(normalizedQuery))) return true
+					// Check normalized categories
+					if (data.categories.some((category) => normalizeString(category).includes(normalizedQuery))) return true
+					return false
+				})
+			}
+
+			// Apply sorting
+			if (sort === "alphabetical-asc") {
+				return filtered.sort((a, b) => a.name.localeCompare(b.name))
+			}
+			if (sort === "alphabetical-desc") {
+				return filtered.sort((a, b) => b.name.localeCompare(a.name))
+			}
+			if (sort === "newest") {
+				return filtered.sort((a, b) => {
+					return new Date(b.data.update.timestamp).getTime() - new Date(a.data.update.timestamp).getTime()
+				})
+			}
+
+			// Default sort (relevance or fallback to alphabetical)
+			// TODO: Implement actual relevance sorting
+			return filtered.sort((a, b) => a.name.localeCompare(b.name))
+		},
+		[icons],
+	)
+
+	// Find matched aliases for display purposes
+	const matchedAliases = useMemo(() => {
+		if (!searchQuery.trim()) return {}
+
+		const q = searchQuery.toLowerCase()
+		const matches: Record<string, string> = {}
+
+		for (const { name, data } of icons) {
+			// If name doesn't match but an alias does, store the first matching alias
+			if (!name.toLowerCase().includes(q)) {
+				const matchingAlias = data.aliases.find((alias) => alias.toLowerCase().includes(q))
+				if (matchingAlias) {
+					matches[name] = matchingAlias
+				}
+			}
+		}
+
+		return matches
+	}, [icons, searchQuery])
+
+	// Use useMemo for filtered icons with debounced query
+	const filteredIcons = useMemo(() => {
+		return filterIcons(debouncedQuery, selectedCategories, sortOption)
+	}, [filterIcons, debouncedQuery, selectedCategories, sortOption])
+
+	const updateResults = useCallback(
+		(query: string, categories: string[], sort: SortOption) => {
+			const params = new URLSearchParams()
+			if (query) params.set("q", query)
+
+			// Clear existing category params and add new ones
+			for (const category of categories) {
+				params.append("category", category)
+			}
+
+			// Add sort parameter if not default
+			if (sort !== "relevance" || initialSort !== "relevance") {
+				params.set("sort", sort)
+			}
+
+			const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname
+			router.push(newUrl, { scroll: false })
+		},
+		[pathname, router, initialSort],
+	)
+
+	const handleSearch = useCallback(
+		(query: string) => {
+			setSearchQuery(query)
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+			timeoutRef.current = setTimeout(() => {
+				updateResults(query, selectedCategories, sortOption)
+			}, 200) // Changed from 100ms to 200ms
+		},
+		[updateResults, selectedCategories, sortOption],
+	)
+
+	const handleCategoryChange = useCallback(
+		(category: string) => {
+			let newCategories: string[]
+
+			if (selectedCategories.includes(category)) {
+				// Remove the category if it's already selected
+				newCategories = selectedCategories.filter((c) => c !== category)
+			} else {
+				// Add the category if it's not selected
+				newCategories = [...selectedCategories, category]
+			}
+
+			setSelectedCategories(newCategories)
+			updateResults(searchQuery, newCategories, sortOption)
+		},
+		[updateResults, searchQuery, selectedCategories, sortOption],
+	)
+
+	const handleSortChange = useCallback(
+		(sort: SortOption) => {
+			setSortOption(sort)
+			updateResults(searchQuery, selectedCategories, sort)
+		},
+		[updateResults, searchQuery, selectedCategories],
+	)
+
+	const clearFilters = useCallback(() => {
+		setSearchQuery("")
+		setSelectedCategories([])
+		setSortOption("relevance")
+		updateResults("", [], "relevance")
+	}, [updateResults])
+
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+		}
+	}, [])
+
+	useEffect(() => {
+		if (filteredIcons.length === 0 && searchQuery) {
+			console.log("no icons found", {
+				query: searchQuery,
+			})
+			posthog.capture("no icons found", {
+				query: searchQuery,
+			})
+		}
+	}, [filteredIcons, searchQuery])
+
+	if (!searchParams) return null
+
+	const getSortLabel = (sort: SortOption) => {
+		switch (sort) {
+			case "relevance":
+				return "Best match"
+			case "alphabetical-asc":
+				return "A to Z"
+			case "alphabetical-desc":
+				return "Z to A"
+			case "newest":
+				return "Newest first"
+			default:
+				return "Sort"
+		}
+	}
+
+	const getSortIcon = (sort: SortOption) => {
+		switch (sort) {
+			case "relevance":
+				return <Search className="h-4 w-4" />
+			case "alphabetical-asc":
+				return <ArrowDownAZ className="h-4 w-4" />
+			case "alphabetical-desc":
+				return <ArrowUpZA className="h-4 w-4" />
+			case "newest":
+				return <Calendar className="h-4 w-4" />
+			default:
+				return <SortAsc className="h-4 w-4" />
+		}
+	}
+
+	return (
+		<>
+			<div className="space-y-4 w-full">
+				{/* Search input */}
+				<div className="relative w-full">
+					<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground transition-all duration-300">
+						<Search className="h-4 w-4" />
+					</div>
+					<Input
+						type="search"
+						placeholder="Search icons by name, alias, or category..."
+						className="w-full h-10 pl-9 cursor-text transition-all duration-300 text-sm md:text-base   border-border shadow-sm"
+						value={searchQuery}
+						onChange={(e) => handleSearch(e.target.value)}
+					/>
+				</div>
+
+				{/* Filter and sort controls */}
+				<div className="flex flex-wrap gap-2 justify-start">
+					{/* Filter dropdown */}
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm ">
+								<Filter className="h-4 w-4 mr-2" />
+								<span>Filter</span>
+								{selectedCategories.length > 0 && (
+									<Badge variant="secondary" className="ml-2 px-1.5">
+										{selectedCategories.length}
+									</Badge>
+								)}
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="start" className="w-64 sm:w-56">
+							<DropdownMenuLabel className="font-semibold">Categories</DropdownMenuLabel>
+							<DropdownMenuSeparator />
+
+							<div className="max-h-[40vh] overflow-y-auto p-1">
+								{allCategories.map((category) => (
+									<DropdownMenuCheckboxItem
+										key={category}
+										checked={selectedCategories.includes(category)}
+										onCheckedChange={() => handleCategoryChange(category)}
+										className="cursor-pointer capitalize"
+									>
+										{category.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
+									</DropdownMenuCheckboxItem>
+								))}
+							</div>
+
+							{selectedCategories.length > 0 && (
+								<>
+									<DropdownMenuSeparator />
+									<DropdownMenuItem
+										onClick={() => {
+											setSelectedCategories([])
+											updateResults(searchQuery, [], sortOption)
+										}}
+										className="cursor-pointer  focus: focus:bg-rose-50 dark:focus:bg-rose-950/20"
+									>
+										Clear all filters
+									</DropdownMenuItem>
+								</>
+							)}
+						</DropdownMenuContent>
+					</DropdownMenu>
+
+					{/* Sort dropdown */}
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm">
+								{getSortIcon(sortOption)}
+								<span className="ml-2">{getSortLabel(sortOption)}</span>
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="start" className="w-56">
+							<DropdownMenuLabel className="font-semibold">Sort By</DropdownMenuLabel>
+							<DropdownMenuSeparator />
+							<DropdownMenuRadioGroup value={sortOption} onValueChange={(value) => handleSortChange(value as SortOption)}>
+								<DropdownMenuRadioItem value="relevance" className="cursor-pointer">
+									<Search className="h-4 w-4 mr-2" />
+									Best match
+								</DropdownMenuRadioItem>
+								<DropdownMenuRadioItem value="alphabetical-asc" className="cursor-pointer">
+									<ArrowDownAZ className="h-4 w-4 mr-2" />A to Z
+								</DropdownMenuRadioItem>
+								<DropdownMenuRadioItem value="alphabetical-desc" className="cursor-pointer">
+									<ArrowUpZA className="h-4 w-4 mr-2" />Z to A
+								</DropdownMenuRadioItem>
+								<DropdownMenuRadioItem value="newest" className="cursor-pointer">
+									<Calendar className="h-4 w-4 mr-2" />
+									Newest first
+								</DropdownMenuRadioItem>
+							</DropdownMenuRadioGroup>
+						</DropdownMenuContent>
+					</DropdownMenu>
+
+					{/* Clear all button */}
+					{(searchQuery || selectedCategories.length > 0 || sortOption !== "relevance") && (
+						<Button variant="outline" size="sm" onClick={clearFilters} className="flex-1 sm:flex-none cursor-pointer bg-background">
+							<X className="h-4 w-4 mr-2" />
+							<span>Clear all</span>
+						</Button>
+					)}
+				</div>
+
+				{/* Active filter badges */}
+				{selectedCategories.length > 0 && (
+					<div className="flex flex-wrap items-center gap-2 mt-2">
+						<span className="text-sm text-muted-foreground">Filters:</span>
+						<div className="flex flex-wrap gap-2">
+							{selectedCategories.map((category) => (
+								<Badge key={category} variant="secondary" className="flex items-center gap-1 pl-2 pr-1">
+									{category.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
+									<Button
+										variant="ghost"
+										size="sm"
+										className="h-4 w-4 p-0 hover:bg-transparent cursor-pointer"
+										onClick={() => handleCategoryChange(category)}
+									>
+										<X className="h-3 w-3" />
+									</Button>
+								</Badge>
+							))}
+						</div>
+
+						<Button
+							variant="ghost"
+							size="sm"
+							onClick={() => {
+								setSelectedCategories([])
+								updateResults(searchQuery, [], sortOption)
+							}}
+							className="text-xs h-7 px-2 cursor-pointer"
+						>
+							Clear all
+						</Button>
+					</div>
+				)}
+
+				<Separator className="my-2" />
+			</div>
+
+			{filteredIcons.length === 0 ? (
+				<div className="flex flex-col gap-8 py-12 max-w-2xl mx-auto items-center">
+					<div className="text-center">
+						<h2 className="text-3xl sm:text-5xl font-semibold">We don't have this one...yet!</h2>
+					</div>
+					<Button
+						className="cursor-pointer motion-preset-pop"
+						variant="default"
+						size="lg"
+						onClick={() => {
+							setIsLazyRequestSubmitted(true)
+							toast("We hear you!", {
+								description: `Okay, okay... we'll consider adding "${searchQuery || "that icon"}" just for you. 😉`,
+							})
+							posthog.capture("lazy icon request", {
+								query: searchQuery,
+								categories: selectedCategories,
+							})
+						}}
+						disabled={isLazyRequestSubmitted}
+					>
+						I want this icon added but I'm too lazy to add it myself
+					</Button>
+					<IconSubmissionContent />
+				</div>
+			) : (
+				<>
+					<div className="flex justify-between items-center pb-2">
+						<p className="text-sm text-muted-foreground">
+							Found {filteredIcons.length} icon
+							{filteredIcons.length !== 1 ? "s" : ""}.
+						</p>
+						<div className="flex items-center gap-1 text-xs text-muted-foreground">
+							{getSortIcon(sortOption)}
+							<span>{getSortLabel(sortOption)}</span>
+						</div>
+					</div>
+
+					<IconsGrid filteredIcons={filteredIcons} matchedAliases={matchedAliases} />
+				</>
+			)}
+		</>
+	)
+}