From 0f2f0268035bf09748baff31a34fbbd150480c53 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Tue, 16 Sep 2025 13:45:23 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20SvgNotFound=20component=20?=
 =?UTF-8?q?and=20integrate=20it=20into=20search=20results;=20update=20glob?=
 =?UTF-8?q?als=20for=20SVG=20request=20links?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/svgs/svgNotFound.svelte       | 36 ++++++++++++++++++++
 src/globals.ts                               |  2 ++
 src/routes/+page.svelte                      |  9 +++--
 src/routes/directory/[category]/+page.svelte |  7 +++-
 4 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/components/svgs/svgNotFound.svelte

diff --git a/src/components/svgs/svgNotFound.svelte b/src/components/svgs/svgNotFound.svelte
new file mode 100644
index 0000000..9f28895
--- /dev/null
+++ b/src/components/svgs/svgNotFound.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { globals } from "@/globals";
+
+  import { buttonVariants } from "@/components/ui/button";
+  import ArrowUpRight from "@lucide/svelte/icons/arrow-up-right";
+  import BoxesIcon from "@/components/ui/moving-icons/boxes-icon.svelte";
+
+  interface Props {
+    svgTitle: string;
+  }
+
+  let { svgTitle }: 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>
+  <div class="flex items-center justify-center space-x-2">
+    <a
+      target="_blank"
+      href={globals.requestSvgUrl}
+      class={buttonVariants({ variant: "outline" })}
+    >
+      <span>Request SVG</span>
+      <ArrowUpRight size={14} strokeWidth={1.5} />
+    </a>
+    <a
+      target="_blank"
+      href={globals.submitUrl}
+      class={buttonVariants({ variant: "outline" })}
+    >
+      <span>Submit SVG</span>
+      <ArrowUpRight size={14} strokeWidth={1.5} />
+    </a>
+  </div>
+</div>
diff --git a/src/globals.ts b/src/globals.ts
index dee1f29..fa46680 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -4,4 +4,6 @@ export const globals = {
   twitterUrl: "https://x.com/pheralb_",
   submitUrl:
     "https://github.com/pheralb/svgl?tab=readme-ov-file#-getting-started",
+  requestSvgUrl:
+    "https://github.com/pheralb/svgl/issues/new?template=request-svg.yml",
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4da1c3b..94470b7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -20,6 +20,7 @@
   import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
   import PageHeader from "@/components/pageHeader.svelte";
   import Button from "@/components/ui/button/button.svelte";
+  import SvgNotFound from "@/components/svgs/svgNotFound.svelte";
 
   // SSR Data:
   let { data }: PageProps = $props();
@@ -44,7 +45,8 @@
       updateDisplaySvgs();
       return;
     }
-    filteredSvgs = searchSvgsWithFuse(filteredSvgs)
+    const baseData = sorted ? alphabeticallySorted : latestSorted;
+    filteredSvgs = searchSvgsWithFuse(baseData)
       .search(searchTerm)
       .map((result) => result.item);
     updateDisplaySvgs();
@@ -122,12 +124,15 @@
       <div class="mt-6 flex justify-center">
         <Button variant="outline" size="lg" onclick={() => (showAll = true)}>
           <span>Show All</span>
-          <span class="text-neutral-500 dark:text-neutral-700">
+          <span class="text-neutral-500 dark:text-neutral-500">
             (+ {filteredSvgs.length - maxDisplay} SVGs)
           </span>
           <ChevronDownIcon size={16} strokeWidth={2} />
         </Button>
       </div>
     {/if}
+    {#if filteredSvgs.length === 0}
+      <SvgNotFound svgTitle={searchTerm} />
+    {/if}
   </Container>
 </PageCard>
diff --git a/src/routes/directory/[category]/+page.svelte b/src/routes/directory/[category]/+page.svelte
index a1a8254..4bef0d4 100644
--- a/src/routes/directory/[category]/+page.svelte
+++ b/src/routes/directory/[category]/+page.svelte
@@ -19,6 +19,7 @@
   import { Button, buttonVariants } from "@/components/ui/button";
   import SortSvgs from "@/components/svgs/sortSvgs.svelte";
   import { deleteParam } from "@/utils/searchParams";
+  import SvgNotFound from "@/components/svgs/svgNotFound.svelte";
 
   // SSR Data:
   let { data }: PageProps = $props();
@@ -42,7 +43,8 @@
       updateDisplaySvgs();
       return;
     }
-    filteredSvgs = searchSvgsWithFuse(filteredSvgs)
+    const baseData = sorted ? data.alphabeticallySorted : data.latestSorted;
+    filteredSvgs = searchSvgsWithFuse(baseData)
       .search(searchTerm)
       .map((result) => result.item);
     updateDisplaySvgs();
@@ -127,5 +129,8 @@
         <SvgCard svgInfo={svg} />
       {/each}
     </Grid>
+    {#if filteredSvgs.length === 0}
+      <SvgNotFound svgTitle={searchTerm} />
+    {/if}
   </Container>
 </PageCard>