From 5d45c720b463ce18f521dca4d468aa38e0847573 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 17 Sep 2025 12:03:56 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Improve=20``SVG=20not=20found``=20c?=
 =?UTF-8?q?omponent=20with=20category=20context=20and=20update=20search=20?=
 =?UTF-8?q?placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/svgs/svgNotFound.svelte       | 24 +++++++++++-
 src/routes/+page.svelte                      | 40 ++++++++++++++------
 src/routes/directory/[category]/+page.svelte |  4 +-
 3 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/components/svgs/svgNotFound.svelte b/src/components/svgs/svgNotFound.svelte
index 9f28895..81d3764 100644
--- a/src/components/svgs/svgNotFound.svelte
+++ b/src/components/svgs/svgNotFound.svelte
@@ -2,20 +2,40 @@
   import { globals } from "@/globals";
 
   import { buttonVariants } from "@/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
   import ArrowUpRight from "@lucide/svelte/icons/arrow-up-right";
   import BoxesIcon from "@/components/ui/moving-icons/boxes-icon.svelte";
 
   interface Props {
     svgTitle: string;
+    category?: string;
   }
 
-  let { svgTitle }: Props = $props();
+  let { svgTitle, category }: Props = $props();
 </script>
 
 <div class="flex w-full flex-col items-center justify-center space-y-4">
   <BoxesIcon size={48} strokeWidth={1} />
-  <p>"{svgTitle}" not found</p>
+  <h2 class="text-xl font-semibold">SVG not found</h2>
+  {#if category}
+    <p class="text-neutral-600 dark:text-neutral-400">
+      "{svgTitle}" not found in "{category}" category
+    </p>
+  {:else}
+    <p class="text-neutral-600 dark:text-neutral-400">
+      "{svgTitle}" not found
+    </p>
+  {/if}
   <div class="flex items-center justify-center space-x-2">
+    {#if category}
+      <a
+        href={`/?search=${svgTitle}`}
+        class={buttonVariants({ variant: "outline" })}
+      >
+        <SearchIcon size={14} strokeWidth={1.5} />
+        <span>Search globally</span>
+      </a>
+    {/if}
     <a
       target="_blank"
       href={globals.requestSvgUrl}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 94470b7..b78d4a2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -18,6 +18,7 @@
   import PageCard from "@/components/pageCard.svelte";
   import FolderIcon from "@lucide/svelte/icons/folder";
   import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
   import PageHeader from "@/components/pageHeader.svelte";
   import Button from "@/components/ui/button/button.svelte";
   import SvgNotFound from "@/components/svgs/svgNotFound.svelte";
@@ -105,14 +106,26 @@
         </p>
       {/if}
     </div>
-    <SortSvgs
-      className={cn(filteredSvgs.length === 0 && "hidden")}
-      isSorted={sorted}
-      onSortedChange={(value) => {
-        sorted = value;
-        searchSvgs();
-      }}
-    />
+    <div class="flex items-center space-x-2">
+      <SortSvgs
+        className={cn(filteredSvgs.length === 0 && "hidden")}
+        isSorted={sorted}
+        onSortedChange={(value) => {
+          sorted = value;
+          searchSvgs();
+        }}
+      />
+      {#if showAll && filteredSvgs.length > maxDisplay}
+        <Button
+          variant="ghost"
+          class="px-2.5"
+          onclick={() => (showAll = false)}
+        >
+          <span>Show Less</span>
+          <ChevronUpIcon size={16} strokeWidth={2} />
+        </Button>
+      {/if}
+    </div>
   </PageHeader>
   <Container className="my-6">
     <Grid>
@@ -120,11 +133,16 @@
         <SvgCard svgInfo={svg} />
       {/each}
     </Grid>
-    {#if showAll === false && filteredSvgs.length > maxDisplay}
+    {#if !showAll && filteredSvgs.length > maxDisplay}
       <div class="mt-6 flex justify-center">
-        <Button variant="outline" size="lg" onclick={() => (showAll = true)}>
+        <Button
+          variant="outline"
+          size="lg"
+          class="px-2.5"
+          onclick={() => (showAll = true)}
+        >
           <span>Show All</span>
-          <span class="text-neutral-500 dark:text-neutral-500">
+          <span class="text-neutral-600 dark:text-neutral-400">
             (+ {filteredSvgs.length - maxDisplay} SVGs)
           </span>
           <ChevronDownIcon size={16} strokeWidth={2} />
diff --git a/src/routes/directory/[category]/+page.svelte b/src/routes/directory/[category]/+page.svelte
index 4bef0d4..a3ca100 100644
--- a/src/routes/directory/[category]/+page.svelte
+++ b/src/routes/directory/[category]/+page.svelte
@@ -73,7 +73,7 @@
 <Search
   searchValue={searchTerm}
   onSearch={handleSearch}
-  placeholder="Search..."
+  placeholder={`Search ${directoryData.category}'s SVGs...`}
 />
 
 <PageCard>
@@ -130,7 +130,7 @@
       {/each}
     </Grid>
     {#if filteredSvgs.length === 0}
-      <SvgNotFound svgTitle={searchTerm} />
+      <SvgNotFound svgTitle={searchTerm} category={directoryData.category} />
     {/if}
   </Container>
 </PageCard>