- Donate
+ Support
- View expenses
+ View transactions
@@ -478,7 +478,7 @@ function SearchInput({ searchQuery, setSearchQuery, totalIcons }: SearchInputPro
name="q"
autoFocus
type="search"
- placeholder={`Find any of ${totalIcons} icons by name or category...`}
+ placeholder={`Search our collection of ${totalIcons} icons by name or category...`}
className="pl-10 h-10 md:h-12 rounded-lg w-full border-border focus:border-primary/20 text-sm md:text-base"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
diff --git a/web/src/components/icon-card.tsx b/web/src/components/icon-card.tsx
new file mode 100644
index 00000000..8d547b5f
--- /dev/null
+++ b/web/src/components/icon-card.tsx
@@ -0,0 +1,36 @@
+import { MagicCard } from "@/components/magicui/magic-card"
+import { BASE_URL } from "@/constants"
+import { formatIconName } from "@/lib/utils"
+import type { Icon } from "@/types/icons"
+import Image from "next/image"
+import Link from "next/link"
+import { preload } from "react-dom"
+
+export function IconCard({
+ name,
+ data: iconData,
+ matchedAlias,
+}: {
+ name: string
+ data: Icon
+ matchedAlias?: string
+}) {
+ const formatedIconName = formatIconName(name)
+ return (
+
+
+
+
+ {formatedIconName}
+
+
+
+ )
+}
diff --git a/web/src/components/icon-details.tsx b/web/src/components/icon-details.tsx
index 63b8bf81..0f353a39 100644
--- a/web/src/components/icon-details.tsx
+++ b/web/src/components/icon-details.tsx
@@ -1,14 +1,17 @@
"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 { formatIconName } from "@/lib/utils"
+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, Type } from "lucide-react"
+import { ArrowRight, Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
+import dynamic from "next/dynamic"
import Image from "next/image"
import Link from "next/link"
import { useCallback, useState } from "react"
@@ -21,305 +24,10 @@ export type IconDetailsProps = {
icon: string
iconData: Icon
authorData: AuthorData
+ allIcons: IconFile
}
-function IconVariant({
- format,
- iconName,
- theme,
- isWordmark = false,
- iconData,
- onCopy,
- onDownload,
- copiedVariants
-}: {
- format: string
- iconName: string
- theme?: "light" | "dark"
- isWordmark?: boolean
- iconData: Icon
- onCopy: (url: string, variantKey: string, event?: React.MouseEvent) => void
- onDownload: (event: React.MouseEvent, url: string, filename: string) => void
- copiedVariants: Record
-}) {
- let variantName = '';
-
- if (isWordmark) {
- if (theme && iconData.wordmark && typeof iconData.wordmark !== 'string') {
- variantName = iconData.wordmark[theme] || `${iconName}_wordmark_${theme}`;
- } else if (iconData.wordmark && typeof iconData.wordmark === 'string') {
- variantName = iconData.wordmark;
- } else {
- variantName = `${iconName}_wordmark`;
- }
- } else {
- if (theme && iconData.colors) {
- variantName = iconData.colors[theme] || `${iconName}_${theme}`;
- } else {
- variantName = iconName;
- }
- }
-
- const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`;
- const githubUrl = `${REPO_PATH}/tree/main/${format}/${variantName}.${format}`;
- const variantKey = `${format}-${theme || "default"}${isWordmark ? "-wordmark" : ""}`;
- const isCopied = copiedVariants[variantKey] || false;
- const btnCopied = copiedVariants[`btn-${variantKey}`] || false;
-
- return (
-
-
-
-
-
- onCopy(imageUrl, variantKey, e)}
- >
-
-
-
- {isCopied && (
-
-
- )}
-
-
-
-
-
- Click to copy direct URL to clipboard
-
-
-
-
{format.toUpperCase()}
-
-
-
-
- onDownload(e, imageUrl, `${iconName}.${format}`)}
- >
-
-
-
- Download icon file
-
-
-
-
-
- onCopy(imageUrl, `btn-${variantKey}`, e)}
- >
- {btnCopied &&
-
-
- Copy direct URL to clipboard
-
-
-
-
-
-
-
-
-
- View on GitHub
-
-
-
-
-
- )
-}
-
-function IconVariantsSection({
- availableFormats,
- icon,
- theme,
- isWordmark = false,
- iconData,
- handleCopy,
- handleDownload,
- copiedVariants,
- title,
- iconElement
-}: {
- availableFormats: string[]
- icon: string
- theme?: "light" | "dark"
- isWordmark?: boolean
- iconData: Icon
- handleCopy: (url: string, variantKey: string, event?: React.MouseEvent) => void
- handleDownload: (event: React.MouseEvent, url: string, filename: string) => void
- copiedVariants: Record
- title: string
- iconElement: React.ReactNode
-}) {
- return (
-
-
- {iconElement}
- {title}
-
-
- {availableFormats.map((format) => (
-
-
-}) {
- if (!iconData.wordmark) return null;
-
- const isStringWordmark = typeof iconData.wordmark === 'string';
- const hasLightDarkVariants = !isStringWordmark && (iconData.wordmark.light || iconData.wordmark.dark);
-
- return (
-
-
-
-
- {(isStringWordmark || !hasLightDarkVariants) && (
-
- {availableFormats.map((format) => (
-
- )}
-
- {hasLightDarkVariants && (
-
- {iconData.wordmark.light && (
-
-
-
-
- {availableFormats.map((format) => (
-
-
- )}
-
- {iconData.wordmark.dark && (
-
-
-
-
- {availableFormats.map((format) => (
-
-
- )}
-
- )}
-
+
+
+
+
+ handleCopy(imageUrl, variantKey, e)}
+ aria-label={`Copy ${format.toUpperCase()} URL for ${iconName}${theme ? ` (${theme} theme)` : ""}`}
+ >
+
+
+
+
+
+
+
+
+
+
+ Click to copy direct URL to clipboard
+
+
+
+
{format.toUpperCase()}
+
+
+
+
+ handleDownload(e, imageUrl, `${iconName}.${format}`)}
+ aria-label={`Download ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
+ >
+
+
+
+ Download icon file
+
+
+
+
+
+ handleCopy(imageUrl, `btn-${variantKey}`, e)}
+ aria-label={`Copy URL for ${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
+ >
+ {copiedVariants[`btn-${variantKey}`] ?
+
+
+ Copy direct URL to clipboard
+
+
+
+
+
+
+
+
+
+ View on GitHub
+
+
+
+
+
+ )
+ }
+
+ const formatedIconName = formatIconName(icon)
+
return (
-
+
-
+
-
{icon}
+
+ {formatedIconName}
+
@@ -450,14 +282,14 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
- Updated on: {formattedDate}
+ Updated on: {formattedDate}
By:
- {authorName ? authorName.slice(0, 2).toUpperCase() : "??"}
{authorData.html_url && (
@@ -480,7 +312,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.categories && iconData.categories.length > 0 && (
-
Categories
+
Categories
{iconData.categories.map((category) => (
@@ -501,7 +333,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.aliases && iconData.aliases.length > 0 && (
-
Aliases
+
Aliases
{iconData.aliases.map((alias) => (
- About this icon
+ About this icon
Available in{" "}
- {availableFormats.length > 1 && (
- `${availableFormats.length} formats (${availableFormats.map((f) => f.toUpperCase()).join(", ")})`
- )}
- {availableFormats.length === 1 && (
- `${availableFormats[0].toUpperCase()} format`
- )}{" "}
+ {availableFormats.length > 1
+ ? `${availableFormats.length} formats (${availableFormats.map((f) => f.toUpperCase()).join(", ")}) `
+ : `${availableFormats[0].toUpperCase()} format `}
with a base format of {iconData.base.toUpperCase()}.
{iconData.colors && " Includes both light and dark theme variants for better integration with different UI designs."}
{iconData.wordmark && " Wordmark variants are also available for enhanced branding options."}
- Use the {icon} icon in your web applications, dashboards, or documentation to enhance visual communication and user
- experience.
+ Perfect for adding to dashboards, app directories, documentation, or anywhere you need the {formatIconName(icon)}{" "}
+ logo.
@@ -546,7 +375,9 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
- Icon variants
+
+ Icon variants
+
Click on any icon to copy its URL to your clipboard
@@ -613,7 +444,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
-
Base format
+
Base format
{iconData.base.toUpperCase()}
@@ -621,7 +452,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
-
Available formats
+
Available formats
{availableFormats.map((format) => (
@@ -633,7 +464,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.colors && (
-
Color variants
+
Color variants
{Object.entries(iconData.colors).map(([theme, variant]) => (
@@ -669,7 +500,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
)}
-
Source
+ Source
-
+ {iconData.categories &&
+ iconData.categories.length > 0 &&
+ (() => {
+ const MAX_RELATED_ICONS = 16
+ const currentCategories = iconData.categories || []
+
+ const relatedIconsWithScore = Object.entries(allIcons)
+ .map(([name, data]) => {
+ if (name === icon) return null // Exclude the current icon
+
+ const otherCategories = data.categories || []
+ const commonCategories = currentCategories.filter((cat) => otherCategories.includes(cat))
+ const score = commonCategories.length
+
+ return score > 0 ? { name, data, score } : null
+ })
+ .filter((item): item is { name: string; data: Icon; score: number } => item !== null) // Type guard
+ .sort((a, b) => b.score - a.score) // Sort by score DESC
+
+ const topRelatedIcons = relatedIconsWithScore.slice(0, MAX_RELATED_ICONS)
+
+ const viewMoreUrl = `/icons?${currentCategories.map((cat) => `category=${encodeURIComponent(cat)}`).join("&")}`
+
+ if (topRelatedIcons.length === 0) return null
+
+ return (
+
+
+
+
+
+
+
+ Other icons from {currentCategories.map((cat) => cat.replace(/-/g, " ")).join(", ")} categories
+
+
+
+
+
+
+
+
+
+ )
+ })()}
+
)
}
diff --git a/web/src/components/icon-grid.tsx b/web/src/components/icon-grid.tsx
new file mode 100644
index 00000000..f7ee8bb7
--- /dev/null
+++ b/web/src/components/icon-grid.tsx
@@ -0,0 +1,87 @@
+import type { Icon } from "@/types/icons"
+
+import { useWindowVirtualizer } from "@tanstack/react-virtual"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { IconCard } from "./icon-card"
+
+interface IconsGridProps {
+ filteredIcons: { name: string; data: Icon }[]
+ matchedAliases: Record
+}
+
+export function IconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
+ return (
+
+ {filteredIcons.slice(0, 120).map(({ name, data }) => (
+
+ )
+}
+
+export function VirtualizedIconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
+ const listRef = useRef(null)
+ const [windowWidth, setWindowWidth] = useState(0)
+
+ useEffect(() => {
+ setWindowWidth(window.innerWidth)
+
+ const handleResize = () => {
+ setWindowWidth(window.innerWidth)
+ }
+ window.addEventListener("resize", handleResize)
+ return () => window.removeEventListener("resize", handleResize)
+ }, [])
+
+ const columnCount = useMemo(() => {
+ if (windowWidth >= 1280) return 8 // xl
+ if (windowWidth >= 1024) return 6 // lg
+ if (windowWidth >= 768) return 4 // md
+ if (windowWidth >= 640) return 3 // sm
+ return 2 // default
+ }, [windowWidth])
+
+ const rowCount = Math.ceil(filteredIcons.length / columnCount)
+ const rowVirtualizer = useWindowVirtualizer({
+ count: rowCount,
+ estimateSize: () => 140,
+ overscan: 2,
+ })
+
+ return (
+
+
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const rowStart = virtualRow.index * columnCount
+ const rowEnd = Math.min(rowStart + columnCount, filteredIcons.length)
+ const rowIcons = filteredIcons.slice(rowStart, rowEnd)
+
+ return (
+
+ {rowIcons.map(({ name, data }) => (
+
+ )
+ })}
+
+
- Categories
+ Select Categories
@@ -314,7 +267,7 @@ export function IconSearch({ icons }: IconSearchProps) {
}}
className="cursor-pointer focus: focus:bg-rose-50 dark:focus:bg-rose-950/20"
>
- Clear all filters
+ Clear categories
)}
@@ -335,13 +288,15 @@ export function IconSearch({ icons }: IconSearchProps) {
handleSortChange(value as SortOption)}>
-
-
Clear all
+ Reset all
)}
-
Filters:
+
Selected:
{selectedCategories.map((category) => (
@@ -389,7 +344,7 @@ export function IconSearch({ icons }: IconSearchProps) {
}}
className="text-xs h-7 px-2 cursor-pointer"
>
- Clear all
+ Clear
)}
@@ -398,29 +353,37 @@ export function IconSearch({ icons }: IconSearchProps) {
-
-
We don't have this one...yet!
+
+
+
Icon not found
+
Help us expand our collection
+
+
+
+
+
+ Can't submit it yourself?
+ {
+ setIsLazyRequestSubmitted(true)
+ toast("Request received!", {
+ description: `We've noted your request for "${searchQuery || "this icon"}". Thanks for your suggestion.`,
+ })
+ posthog.capture("lazy icon request", {
+ query: searchQuery,
+ categories: selectedCategories,
+ })
+ }}
+ disabled={isLazyRequestSubmitted}
+ >
+ Request this icon
+
+
-
{
- 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
-
-
) : (
<>
@@ -435,57 +398,9 @@ export function IconSearch({ icons }: IconSearchProps) {
-
-
-
- {name.replace(/-/g, " ")}
-
-
- {matchedAlias && Alias: {matchedAlias} }
-
-
- )
-}
-
-interface IconsGridProps {
- filteredIcons: { name: string; data: Icon }[]
- matchedAliases: Record
-}
-
-function IconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) {
- return (
- <>
-
- {filteredIcons.slice(0, 120).map(({ name, data }) => (
-
- {filteredIcons.length > 120 && And {filteredIcons.length - 120} more...
}
-
- )
-}
diff --git a/web/src/components/icon-submission-form.tsx b/web/src/components/icon-submission-form.tsx
index b0f365e3..b45253fd 100644
--- a/web/src/components/icon-submission-form.tsx
+++ b/web/src/components/icon-submission-form.tsx
@@ -52,12 +52,12 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left cursor-pointer transition-all duration-300"
asChild
>
-
+
- {template.name}
- {template.name}
+
-
{template.description}
+
{template.description}
@@ -66,22 +66,26 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
-
-
-
-
-
+ {trigger ? (
+ {trigger}
+ ) : (
+
+
+
+
+ )}
+
- Contribute a new icon
- Choose a template below to suggest a new icon or improve an existing one.
+ Submit an icon
+ Select an option below to submit or update an icon.
-
+
setOpen(false)} />
diff --git a/web/src/components/magicui/animated-shiny-text.tsx b/web/src/components/magicui/animated-shiny-text.tsx
deleted file mode 100644
index 4b92a5c7..00000000
--- a/web/src/components/magicui/animated-shiny-text.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { CSSProperties, ComponentPropsWithoutRef, FC } from "react"
-
-import { cn } from "@/lib/utils"
-
-export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
- shimmerWidth?: number
-}
-
-export const AnimatedShinyText: FC
= ({ children, className, shimmerWidth = 100, ...props }) => {
- return (
-
- {children}
-
- )
-}
diff --git a/web/src/components/recently-added-icons.tsx b/web/src/components/recently-added-icons.tsx
index dc765f4a..963ec24c 100644
--- a/web/src/components/recently-added-icons.tsx
+++ b/web/src/components/recently-added-icons.tsx
@@ -2,7 +2,7 @@
import { Marquee } from "@/components/magicui/marquee"
import { BASE_URL } from "@/constants"
-import { cn } from "@/lib/utils"
+import { cn, formatIconName } from "@/lib/utils"
import type { Icon, IconWithName } from "@/types/icons"
import { format, isToday, isYesterday } from "date-fns"
import { ArrowRight, Clock, ExternalLink } from "lucide-react"
@@ -61,7 +61,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
href="/icons"
className="font-medium inline-flex items-center py-2 px-4 rounded-full border transition-all duration-200 group hover-lift soft-shadow"
>
- View complete collection
+ View all icons
@@ -99,7 +101,7 @@ function RecentIconCard({
/>
- {name.replace(/-/g, " ")}
+ {formattedIconName}
@@ -108,7 +110,7 @@ function RecentIconCard({
-
+
diff --git a/web/src/components/ui/command.tsx b/web/src/components/ui/command.tsx
index 4ca53497..24d046c0 100644
--- a/web/src/components/ui/command.tsx
+++ b/web/src/components/ui/command.tsx
@@ -33,10 +33,12 @@ function CommandDialog({
title = "Command Palette",
description = "Search for a command to run...",
children,
+ contentClassName,
...props
}: React.ComponentProps
& {
title?: string
description?: string
+ contentClassName?: string
}) {
return (
@@ -44,7 +46,7 @@ function CommandDialog({
{title}
{description}
-
+
{children}
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 9def50f7..2724465e 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -1,3 +1,4 @@
+import type { IconWithName } from "@/types/icons"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
@@ -5,6 +6,10 @@ export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
+export function formatIconName(name: string) {
+ return name.replace(/-/g, " ")
+}
+
/**
* Calculate Levenshtein distance between two strings
*/
@@ -80,46 +85,152 @@ export function containsCharsInOrder(str: string, query: string): number {
}
/**
- * Advanced fuzzy search with multiple scoring methods
- * Returns a score from 0-1, where 1 is a perfect match
+ * Advanced fuzzy search with composite scoring and bonuses:
+ * - Bonus for exact, prefix, substring matches (additive)
+ * - Penalize weak matches
+ * - Require all query words to be present somewhere for multi-word queries
+ * - Returns composite score (0-1+)
*/
export function fuzzySearch(text: string, query: string): number {
if (!query) return 1
if (!text) return 0
- // Direct inclusion check (highest priority)
const normalizedText = text.toLowerCase()
const normalizedQuery = query.toLowerCase()
- if (normalizedText === normalizedQuery) return 1
- if (normalizedText.includes(normalizedQuery)) return 0.9
+ let score = 0
- // Check for character sequence matches
+ // Bonuses for strong matches
+ if (normalizedText === normalizedQuery) score += 1.0
+ else if (normalizedText.startsWith(normalizedQuery)) score += 0.85
+ else if (normalizedText.includes(normalizedQuery)) score += 0.7
+
+ // Sequence, similarity, word match
const sequenceScore = containsCharsInOrder(normalizedText, normalizedQuery)
-
- // Calculate string similarity
const similarityScore = calculateStringSimilarity(normalizedText, normalizedQuery)
- // Word-by-word matching for multi-word queries
+ // Multi-word query: require all words to be present somewhere
const textWords = normalizedText.split(/\s+/)
const queryWords = normalizedQuery.split(/\s+/)
-
let wordMatchCount = 0
for (const queryWord of queryWords) {
for (const textWord of textWords) {
if (
+ textWord === queryWord ||
+ textWord.startsWith(queryWord) ||
textWord.includes(queryWord) ||
- calculateStringSimilarity(textWord, queryWord) > 0.7 ||
- containsCharsInOrder(textWord, queryWord) > 0
+ calculateStringSimilarity(textWord, queryWord) > 0.8 ||
+ containsCharsInOrder(textWord, queryWord) > 0.5
) {
wordMatchCount++
break
}
}
}
-
+ const allWordsPresent = wordMatchCount === queryWords.length
const wordMatchScore = queryWords.length > 0 ? wordMatchCount / queryWords.length : 0
- // Combine scores with weights
- return Math.max(sequenceScore * 0.3, similarityScore * 0.3, wordMatchScore * 0.4)
+ // Composite score
+ score += sequenceScore * 0.1 + similarityScore * 0.1 + wordMatchScore * 0.6
+
+ // Penalize if not all words present in multi-word query
+ if (queryWords.length > 1 && !allWordsPresent) score *= 0.4
+
+ // Penalize very weak matches
+ if (score < 0.5) score *= 0.3
+
+ return score
+}
+
+/**
+ * Filter and sort icons using advanced fuzzy search, categories, and sort options
+ * - Tunable weights for name, alias, category
+ * - Penalize if only category matches
+ * - Require all query words to be present in at least one field
+ */
+export type SortOption = "relevance" | "alphabetical-asc" | "alphabetical-desc" | "newest"
+
+export function filterAndSortIcons({
+ icons,
+ query = "",
+ categories = [],
+ sort = "relevance",
+ limit,
+}: {
+ icons: IconWithName[]
+ query?: string
+ categories?: string[]
+ sort?: SortOption
+ limit?: number
+}): IconWithName[] {
+ const NAME_WEIGHT = 2.0
+ const ALIAS_WEIGHT = 1.5
+ const CATEGORY_WEIGHT = 1.0
+ const CATEGORY_PENALTY = 0.7 // Penalize if only category matches
+
+ let filtered = icons
+
+ // Filter by categories if any are selected
+ if (categories.length > 0) {
+ filtered = filtered.filter(({ data }) =>
+ data.categories.some((cat) => categories.some((selectedCat) => cat.toLowerCase() === selectedCat.toLowerCase())),
+ )
+ }
+
+ if (query.trim()) {
+ const queryWords = query.toLowerCase().split(/\s+/)
+ const scored = filtered
+ .map((icon) => {
+ const nameScore = fuzzySearch(icon.name, query) * NAME_WEIGHT
+ const aliasScore =
+ icon.data.aliases && icon.data.aliases.length > 0
+ ? Math.max(...icon.data.aliases.map((alias) => fuzzySearch(alias, query))) * ALIAS_WEIGHT
+ : 0
+ const categoryScore =
+ icon.data.categories && icon.data.categories.length > 0
+ ? Math.max(...icon.data.categories.map((category) => fuzzySearch(category, query))) * CATEGORY_WEIGHT
+ : 0
+
+ const maxScore = Math.max(nameScore, aliasScore, categoryScore)
+
+ // Penalize if only category matches
+ const onlyCategoryMatch = categoryScore > 0.7 && nameScore < 0.5 && aliasScore < 0.5
+ const finalScore = onlyCategoryMatch ? maxScore * CATEGORY_PENALTY : maxScore
+
+ // Require all query words to be present in at least one field
+ const allWordsPresent = queryWords.every(
+ (word) =>
+ icon.name.toLowerCase().includes(word) ||
+ icon.data.aliases.some((alias) => alias.toLowerCase().includes(word)) ||
+ icon.data.categories.some((cat) => cat.toLowerCase().includes(word)),
+ )
+
+ return { icon, score: allWordsPresent ? finalScore : finalScore * 0.4 }
+ })
+ .filter((item) => item.score > 0.7)
+ .sort((a, b) => {
+ if (b.score !== a.score) return b.score - a.score
+ return a.icon.name.localeCompare(b.icon.name)
+ })
+
+ filtered = scored.map((item) => item.icon)
+ }
+
+ // Sorting
+ if (sort === "alphabetical-asc") {
+ filtered = filtered.slice().sort((a, b) => a.name.localeCompare(b.name))
+ } else if (sort === "alphabetical-desc") {
+ filtered = filtered.slice().sort((a, b) => b.name.localeCompare(a.name))
+ } else if (sort === "newest") {
+ filtered = filtered.slice().sort((a, b) => {
+ const aTime = a.data.update?.timestamp ? new Date(a.data.update.timestamp).getTime() : 0
+ const bTime = b.data.update?.timestamp ? new Date(b.data.update.timestamp).getTime() : 0
+ return bTime - aTime
+ })
+ } // else: relevance (already sorted by score)
+
+ if (limit && filtered.length > limit) {
+ return filtered.slice(0, limit)
+ }
+ return filtered
}
diff --git a/webp/atuin.webp b/webp/atuin.webp
index b7e03258..2a5d8ab0 100644
Binary files a/webp/atuin.webp and b/webp/atuin.webp differ
diff --git a/webp/cup.webp b/webp/cup.webp
new file mode 100644
index 00000000..b0ba4dba
Binary files /dev/null and b/webp/cup.webp differ
diff --git a/webp/greenlight.webp b/webp/greenlight.webp
new file mode 100644
index 00000000..faa8b775
Binary files /dev/null and b/webp/greenlight.webp differ
diff --git a/webp/jellystat-dark.webp b/webp/jellystat-dark.webp
new file mode 100644
index 00000000..bd0368ba
Binary files /dev/null and b/webp/jellystat-dark.webp differ
diff --git a/webp/jellystat.webp b/webp/jellystat.webp
index 6341ef2d..cbdc4254 100644
Binary files a/webp/jellystat.webp and b/webp/jellystat.webp differ
diff --git a/webp/mailpit.webp b/webp/mailpit.webp
new file mode 100644
index 00000000..481233c6
Binary files /dev/null and b/webp/mailpit.webp differ
diff --git a/webp/nastool.webp b/webp/nastool.webp
new file mode 100644
index 00000000..b14dee20
Binary files /dev/null and b/webp/nastool.webp differ
diff --git a/webp/nzbgeek.webp b/webp/nzbgeek.webp
new file mode 100644
index 00000000..37a6cd50
Binary files /dev/null and b/webp/nzbgeek.webp differ
diff --git a/webp/opengist-light.webp b/webp/opengist-light.webp
index f20588dc..9b3d201f 100644
Binary files a/webp/opengist-light.webp and b/webp/opengist-light.webp differ
diff --git a/webp/opengist.webp b/webp/opengist.webp
index dce9ffea..2cf9ce96 100644
Binary files a/webp/opengist.webp and b/webp/opengist.webp differ
diff --git a/webp/radarr-4k.webp b/webp/radarr-4k.webp
new file mode 100644
index 00000000..3e484d8a
Binary files /dev/null and b/webp/radarr-4k.webp differ
diff --git a/webp/reactjs.webp b/webp/reactjs.webp
new file mode 100644
index 00000000..ca7f56f4
Binary files /dev/null and b/webp/reactjs.webp differ
diff --git a/webp/signoz.webp b/webp/signoz.webp
new file mode 100644
index 00000000..e094ff22
Binary files /dev/null and b/webp/signoz.webp differ
diff --git a/webp/sonarr-4k.webp b/webp/sonarr-4k.webp
new file mode 100644
index 00000000..b16e0d6e
Binary files /dev/null and b/webp/sonarr-4k.webp differ
diff --git a/webp/strava.webp b/webp/strava.webp
new file mode 100644
index 00000000..8daf654e
Binary files /dev/null and b/webp/strava.webp differ
diff --git a/webp/uptimerobot.webp b/webp/uptimerobot.webp
new file mode 100644
index 00000000..02c3ef16
Binary files /dev/null and b/webp/uptimerobot.webp differ
diff --git a/webp/viber.webp b/webp/viber.webp
new file mode 100644
index 00000000..aa53221e
Binary files /dev/null and b/webp/viber.webp differ
diff --git a/webp/vitalpbx.webp b/webp/vitalpbx.webp
new file mode 100644
index 00000000..9973b56c
Binary files /dev/null and b/webp/vitalpbx.webp differ
diff --git a/webp/vite.webp b/webp/vite.webp
new file mode 100644
index 00000000..677b6c75
Binary files /dev/null and b/webp/vite.webp differ
diff --git a/webp/wireguard.webp b/webp/wireguard.webp
index ab9de80a..d1c008d8 100644
Binary files a/webp/wireguard.webp and b/webp/wireguard.webp differ
diff --git a/webp/zen-browser-dark.webp b/webp/zen-browser-dark.webp
new file mode 100644
index 00000000..5c4bb3c9
Binary files /dev/null and b/webp/zen-browser-dark.webp differ
diff --git a/webp/zen-browser.webp b/webp/zen-browser.webp
new file mode 100644
index 00000000..eeeb34ee
Binary files /dev/null and b/webp/zen-browser.webp differ
diff --git a/webp/zorin-linux.webp b/webp/zorin-linux.webp
new file mode 100644
index 00000000..b90ae6a9
Binary files /dev/null and b/webp/zorin-linux.webp differ