From f749358b979f21a89bcc1d606d82afa064ead86e Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 22 Sep 2025 18:53:46 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Add=20warning=20store?=
 =?UTF-8?q?=20&=20message?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/warningMessage.svelte | 41 ++++++++++++++++++++++++++++
 src/routes/+page.svelte              |  5 ++++
 src/stores/warning.store.ts          | 23 ++++++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 src/components/warningMessage.svelte
 create mode 100644 src/stores/warning.store.ts

diff --git a/src/components/warningMessage.svelte b/src/components/warningMessage.svelte
new file mode 100644
index 0000000..5732436
--- /dev/null
+++ b/src/components/warningMessage.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import Button from "@/components/ui/button/button.svelte";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import AlertTriangleIcon from "@lucide/svelte/icons/alert-triangle";
+
+  import { warningStore, acceptWarning } from "@/stores/warning.store";
+</script>
+
+{#if !$warningStore}
+  <div
+    class={cn(
+      "flex w-full flex-col items-center justify-between space-y-2 px-3 py-4 text-sm md:flex-row md:space-y-0 md:space-x-2 md:py-2",
+      "bg-white dark:bg-neutral-900",
+      "border-b border-neutral-200 dark:border-neutral-800",
+    )}
+  >
+    <div class="flex flex-col items-center gap-2 md:flex-row">
+      <AlertTriangleIcon
+        size={18}
+        strokeWidth={2}
+        class="flex-shrink-0 animate-pulse text-yellow-600 dark:text-yellow-500"
+      />
+      <p>
+        Each SVG includes a link to its respective product. Permission must be
+        obtained before using a logo. For removal requests,
+        <a
+          href="https://github.com/pheralb/svgl/issues/new"
+          target="_blank"
+          class="underline decoration-neutral-500 underline-offset-4"
+        >
+          please open an issue on GitHub
+        </a>.
+      </p>
+    </div>
+    <Button size="sm" onclick={acceptWarning}>
+      <CheckIcon size={14} strokeWidth={2} />
+      <span>Accept</span>
+    </Button>
+  </div>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b78d4a2..77948d8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { iSVG } from "@/types/svg";
   import type { PageProps } from "./$types";
+  import { browser } from "$app/environment";
 
   import { cn } from "@/utils/cn";
   import { deleteParam } from "@/utils/searchParams";
@@ -22,6 +23,7 @@
   import PageHeader from "@/components/pageHeader.svelte";
   import Button from "@/components/ui/button/button.svelte";
   import SvgNotFound from "@/components/svgs/svgNotFound.svelte";
+  import WarningMessage from "@/components/warningMessage.svelte";
 
   // SSR Data:
   let { data }: PageProps = $props();
@@ -127,6 +129,9 @@
       {/if}
     </div>
   </PageHeader>
+  {#if browser}
+    <WarningMessage />
+  {/if}
   <Container className="my-6">
     <Grid>
       {#each displaySvgs as svg (svg.id)}
diff --git a/src/stores/warning.store.ts b/src/stores/warning.store.ts
new file mode 100644
index 0000000..c9b1286
--- /dev/null
+++ b/src/stores/warning.store.ts
@@ -0,0 +1,23 @@
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
+
+const localStorageKey = "svgl_warning";
+
+function getInitialWarningState(): boolean {
+  if (browser) {
+    const stored = localStorage.getItem(localStorageKey);
+    return stored === "true";
+  }
+  return false;
+}
+
+const warningStore = writable<boolean>(getInitialWarningState());
+
+function acceptWarning() {
+  warningStore.set(true);
+  if (browser) {
+    localStorage.setItem(localStorageKey, "true");
+  }
+}
+
+export { warningStore, acceptWarning };