diff --git a/web/src/app/error.tsx b/web/src/app/error.tsx index 8c7660fc..817702ae 100644 --- a/web/src/app/error.tsx +++ b/web/src/app/error.tsx @@ -31,9 +31,7 @@ export default function ErrorPage({

Something went wrong

-

- Unable to load this page. We're looking into the issue. -

+

Unable to load this page. We're looking into the issue.

@@ -476,57 +473,63 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail - {iconData.categories && iconData.categories.length > 0 && (() => { - const MAX_RELATED_ICONS = 16 - const currentCategories = iconData.categories || [] + {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 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 + 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 + 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 topRelatedIcons = relatedIconsWithScore.slice(0, MAX_RELATED_ICONS) - const viewMoreUrl = `/icons?${currentCategories.map((cat) => `category=${encodeURIComponent(cat)}`).join("&")}` + const viewMoreUrl = `/icons?${currentCategories.map((cat) => `category=${encodeURIComponent(cat)}`).join("&")}` - if (topRelatedIcons.length === 0) return null + if (topRelatedIcons.length === 0) return null - return ( -
- - - - - - - Other icons from {currentCategories.map((cat) => cat.replace(/-/g, " ")).join(", ")} categories - - - - - {relatedIconsWithScore.length > MAX_RELATED_ICONS && ( -
- -
- )} - - -
- ) - })()} + return ( +
+ + + + + + + Other icons from {currentCategories.map((cat) => cat.replace(/-/g, " ")).join(", ")} categories + + + + + {relatedIconsWithScore.length > MAX_RELATED_ICONS && ( +
+ +
+ )} + + +
+ ) + })()} ) } diff --git a/web/src/components/icon-grid.tsx b/web/src/components/icon-grid.tsx index 7ae8ec53..54c44357 100644 --- a/web/src/components/icon-grid.tsx +++ b/web/src/components/icon-grid.tsx @@ -25,7 +25,7 @@ export function VirtualizedIconsGrid({ filteredIcons, matchedAliases }: IconsGri useEffect(() => { setWindowWidth(window.innerWidth) - + const handleResize = () => { setWindowWidth(window.innerWidth) } diff --git a/web/src/components/icon-search.tsx b/web/src/components/icon-search.tsx index 7d690326..c3f08647 100644 --- a/web/src/components/icon-search.tsx +++ b/web/src/components/icon-search.tsx @@ -335,10 +335,12 @@ export function IconSearch({ icons }: IconSearchProps) { Relevance - Name (A-Z) + + Name (A-Z) - Name (Z-A) + + Name (Z-A)