🎨 Add SvgNotFound component and integrate it into search results; update globals for SVG request links

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>

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",
 };

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>

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>