✨ Improve `SVG not found` component with category context and update search placeholder

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}

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,6 +106,7 @@
         </p>
       {/if}
     </div>
+    <div class="flex items-center space-x-2">
       <SortSvgs
         className={cn(filteredSvgs.length === 0 && "hidden")}
         isSorted={sorted}
@@ -113,6 +115,17 @@
           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} />

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>