mirror/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-11-09 04:58:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): Update descriptions and consistency (#1264)

Browse Source 
* refactor(web): Update descriptions and consistency

* revert: Issue templates

* refactor(web): More extensive search placeholder

---------

Signed-off-by: Bjorn Lammers <bjorn@lammers.media>
Co-authored-by: Thomas Camlong <thomas@ajnart.fr>
This commit is contained in:
Bjorn Lammers
2025-04-25 17:55:17 +02:00
committed by GitHub
parent 25f545d632
commit 1bba45f6b4
8 changed files with 149 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/app/error.tsx
View File

@@ -32,16 +32,16 @@ export default function ErrorPage({
</div>
<h1 className="text-2xl font-bold">Something went wrong</h1>
<p className="text-muted-foreground">
An unexpected error occurred while loading this page. We've been notified and are looking into it.
Unable to load this page. We're looking into the issue.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
<Button variant="outline" onClick={() => reset()} className="cursor-pointer">
<RefreshCcw className="mr-2 h-4 w-4" />
Try again
Retry
</Button>
<Button onClick={handleGoBack} className="cursor-pointer">
<ArrowLeft className="mr-2 h-4 w-4" />
Go back
Back
</Button>
</div>
{error.digest && <p className="text-xs text-muted-foreground mt-6">Error ID: {error.digest}</p>}

96
web/src/app/icons/components/icon-search.tsx
View File

@@ -228,11 +228,11 @@ export function IconSearch({ icons }: IconSearchProps) {
const getSortLabel = (sort: SortOption) => {
switch (sort) {
case "relevance":
return "Best match"
return "Relevance"
case "alphabetical-asc":
return "A to Z"
return "Name (A-Z)"
case "alphabetical-desc":
return "Z to A"
return "Name (Z-A)"
case "newest":
return "Newest first"
default:
@@ -265,7 +265,7 @@ export function IconSearch({ icons }: IconSearchProps) {
</div>
<Input
type="search"
placeholder="Search icons by name, alias, or category..."
placeholder="Search for icons..."
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)}
@@ -277,18 +277,18 @@ export function IconSearch({ icons }: IconSearchProps) {
{/* Filter dropdown */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm ">
<Button
variant="outline"
size="sm"
className="flex-1 sm:flex-none cursor-pointer bg-background border-border shadow-sm"
aria-label="Filter icons"
>
<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>
)}
<span>{selectedCategories.length > 0 ? `Filters (${selectedCategories.length})` : "Filter"}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-64 sm:w-56">
<DropdownMenuLabel className="font-semibold">Categories</DropdownMenuLabel>
<DropdownMenuLabel className="font-semibold">Select Categories</DropdownMenuLabel>
<DropdownMenuSeparator />
<div className="max-h-[40vh] overflow-y-auto p-1">
@@ -314,7 +314,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
</DropdownMenuItem>
</>
)}
@@ -330,18 +330,18 @@ export function IconSearch({ icons }: IconSearchProps) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-56">
<DropdownMenuLabel className="font-semibold">Sort By</DropdownMenuLabel>
<DropdownMenuLabel className="font-semibold">Sort Icons</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
Relevance
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="alphabetical-asc" className="cursor-pointer">
<ArrowDownAZ className="h-4 w-4 mr-2" />A to Z
<ArrowDownAZ className="h-4 w-4 mr-2" />Name (A-Z)
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="alphabetical-desc" className="cursor-pointer">
<ArrowUpZA className="h-4 w-4 mr-2" />Z to A
<ArrowUpZA className="h-4 w-4 mr-2" />Name (Z-A)
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="newest" className="cursor-pointer">
<Calendar className="h-4 w-4 mr-2" />
@@ -353,9 +353,15 @@ export function IconSearch({ icons }: IconSearchProps) {
{/* 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">
<Button
variant="outline"
size="sm"
onClick={clearFilters}
className="flex-1 sm:flex-none cursor-pointer bg-background"
aria-label="Reset all filters"
>
<X className="h-4 w-4 mr-2" />
<span>Clear all</span>
<span>Reset</span>
</Button>
)}
</div>
@@ -363,7 +369,7 @@ export function IconSearch({ icons }: IconSearchProps) {
{/* 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>
<span className="text-sm text-muted-foreground">Selected:</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">
@@ -389,7 +395,7 @@ export function IconSearch({ icons }: IconSearchProps) {
}}
className="text-xs h-7 px-2 cursor-pointer"
>
Clear all
Clear
</Button>
</div>
)}
@@ -400,27 +406,33 @@ export function IconSearch({ icons }: IconSearchProps) {
{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>
<h2 className="text-3xl sm:text-5xl font-semibold">Icon not found</h2>
<p className="text-lg text-muted-foreground mt-2">Help us expand our collection</p>
</div>
<div className="flex flex-col gap-4 items-center w-full">
<IconSubmissionContent />
<div className="mt-4 flex items-center gap-2 justify-center">
<span className="text-sm text-muted-foreground">Can't submit it yourself?</span>
<Button
className="cursor-pointer"
variant="outline"
size="sm"
onClick={() => {
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
</Button>
</div>
</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>
) : (
<>
@@ -462,7 +474,7 @@ function IconCard({
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-rose-400 transition-colors duration-200 font-medium">
<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-500 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
{name.replace(/-/g, " ")}
</span>

10
web/src/app/not-found.tsx
View File

@@ -15,9 +15,9 @@ export default function NotFound({
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
<AlertTriangle className="w-8 h-8" />
</div>
<h1 className="text-2xl sm:text-3xl font-bold mt-6">Icon not found</h1>
<h1 className="text-2xl sm:text-3xl font-bold mt-6">Not found</h1>
<p className="text-muted-foreground mt-3 max-w-md">
The icon you are looking for could not be found or there was an error loading it.
This icon does not exist or could not be loaded.
</p>
</div>
@@ -25,16 +25,16 @@ export default function NotFound({
<Button asChild variant="outline">
<Link href="/icons">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to all icons
Back to icons
</Link>
</Button>
</div>
<div className="border-t border-border pt-8 mt-8">
<div className="text-center mb-6">
<h2 className="text-xl font-semibold">Can't find what you're looking for?</h2>
<h2 className="text-xl font-semibold">Missing an icon?</h2>
<p className="text-muted-foreground mt-2">
Contribute to our icon collection by suggesting a new icon or improving an existing one.
Submit a new icon or suggest improvements to our collection.
</p>
</div>