From 951d27856207ed4eae91df67e862234c3d9bae64 Mon Sep 17 00:00:00 2001
From: Taken <taken@mairimashita.org>
Date: Tue, 16 Sep 2025 14:12:42 +0200
Subject: [PATCH] Updated cookies

---
 src/app/(main)/layout.tsx             |  2 +-
 src/app/(main)/settings/page.tsx      | 13 +++++++++++
 src/app/(stats)/player/[ign]/page.tsx |  2 +-
 src/components/clear-cookies.tsx      | 33 +++++++++++++++++++++++++++
 src/components/header.tsx             |  8 ++++++-
 5 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 src/app/(main)/settings/page.tsx
 create mode 100644 src/components/clear-cookies.tsx

diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 3936e8c..67ee0ba 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -4,7 +4,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
     return (
         <>
             <Header />
-            <div>
+            <div className="pt-header">
                 {children}
             </div>
         </>
diff --git a/src/app/(main)/settings/page.tsx b/src/app/(main)/settings/page.tsx
new file mode 100644
index 0000000..865319c
--- /dev/null
+++ b/src/app/(main)/settings/page.tsx
@@ -0,0 +1,13 @@
+import ClearCookiesButton from "@/components/clear-cookies"
+
+export default function SettingsPage() {
+    return (
+        <div className="p-8 space-y-4">
+            <div>
+                <h2 className="text-2xl font-bold">Cookies</h2>
+                <p>The site stores cookies to save prefrences. If you wish to delete these cookies use the bottom bellow.</p>
+            </div>
+            <ClearCookiesButton />
+        </div>
+    )
+}
diff --git a/src/app/(stats)/player/[ign]/page.tsx b/src/app/(stats)/player/[ign]/page.tsx
index 3a6c46f..dfa366a 100644
--- a/src/app/(stats)/player/[ign]/page.tsx
+++ b/src/app/(stats)/player/[ign]/page.tsx
@@ -78,7 +78,7 @@ async function SuspendedPage({ params }: Pick<PageProps<"/player/[ign]">, "param
     const { data: layout } = schema.safeParse(JSON.parse(c.get(COOKIE_VALUES.statsOrder)?.value ?? "null"))
 
     return (
-        <div className="flex flex-col items-center pt-20 pb-5">
+        <div className="flex flex-col items-center pb-5 pt-15">
             <DisplayName
                 ign={player.displayname}
                 uuid={player.uuid}
diff --git a/src/components/clear-cookies.tsx b/src/components/clear-cookies.tsx
new file mode 100644
index 0000000..0fe90e3
--- /dev/null
+++ b/src/components/clear-cookies.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { COOKIE_VALUES } from "@/data/general"
+import Cookies from "js-cookie"
+import { toast } from "sonner"
+import { Button } from "./ui/button"
+
+export default function ClearCookiesButton() {
+    return (
+        <Button
+            onClick={() => {
+                const values = Object.values(COOKIE_VALUES)
+                let existing: number = 0
+
+                for (const val of values) {
+                    const c = Cookies.get(val)
+                    if (c) existing++
+
+                    Cookies.remove(val)
+                }
+
+                if (existing === 0) {
+                    toast.success("No cookies to clear")
+                } else {
+                    toast.success("Cleared " + existing + " cookies")
+                }
+            }}
+            variant="destructive"
+        >
+            Clear Cookies
+        </Button>
+    )
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 03fca7c..d1e9e61 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,3 +1,4 @@
+import { Settings } from "lucide-react"
 import Link from "next/link"
 import { SearchBar } from "./search-bar"
 import { ThemeSwitcher } from "./theme-switcher"
@@ -10,7 +11,12 @@ export default function Header({ searchBar = false }: { searchBar?: boolean }) {
                     <span className="text-lg font-semibold">HypStats</span>
                 </Link>
                 {searchBar && <SearchBar navbar />}
-                <ThemeSwitcher />
+                <div className="flex gap-2 items-center">
+                    <ThemeSwitcher />
+                    <Link href="/settings">
+                        <Settings />
+                    </Link>
+                </div>
             </nav>
         </header>
     )