From 801fd82c4208656693c66d2be3ee8972bf1bd79e Mon Sep 17 00:00:00 2001
From: lajbel <lajbelms@gmail.com>
Date: Thu, 9 May 2024 16:16:49 -0300
Subject: [PATCH] chore: rename Header to Toolbar

---
 src/components/About/AboutDialog.tsx |  8 +++
 src/components/Header.tsx            | 81 ----------------------------
 src/components/Playground.tsx        | 21 +++++---
 src/components/Toolbar.tsx           | 79 +++++++++++++++++++++++++++
 4 files changed, 102 insertions(+), 87 deletions(-)
 delete mode 100644 src/components/Header.tsx
 create mode 100644 src/components/Toolbar.tsx

diff --git a/src/components/About/AboutDialog.tsx b/src/components/About/AboutDialog.tsx
index 74792de..f573f6c 100644
--- a/src/components/About/AboutDialog.tsx
+++ b/src/components/About/AboutDialog.tsx
@@ -38,6 +38,14 @@ const AboutDialog = () => {
                         >
                             Give a star
                         </a>
+                        <br />
+                        <a
+                            className="font-medium link link-primary"
+                            href={REPO + "/issues"}
+                            target="_blank"
+                        >
+                            Report an issue
+                        </a>
                     </p>
                 </main>
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index 97873cc..0000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { type FC, useRef } from "react";
-import kaplayLogo from "../assets/kaplay.png";
-import runIcon from "../assets/run.png";
-import AboutButton from "./About/AboutButton";
-import ProjectMenu from "./Projects/ProjectMenu";
-import ThemeToggler from "./ThemeToggler";
-
-type Props = {
-    run: () => void;
-    onShare?: () => void;
-    onThemeChange?: (theme: string) => void;
-};
-
-const Header: FC<Props> = ({ run, onThemeChange, onShare }) => {
-    const shareButton = useRef<HTMLButtonElement>(null);
-
-    const handleRun = () => {
-        run();
-    };
-
-    const handleShare = () => {
-        onShare?.();
-
-        if (shareButton.current) {
-            const shareText = shareButton.current.querySelector(".share-text");
-
-            if (shareText) {
-                shareText.textContent = "Copied!";
-                setTimeout(() => {
-                    shareText.textContent = "Share";
-                }, 1000);
-            }
-        }
-    };
-
-    return (
-        <header className="flex h-[6%]">
-            <nav className="flex flex-1 py-2 justify-between items-center bg-base-300 px-4">
-                <a className="btn btn-xs btn-ghost text-lg">
-                    <img alt="Logo" src={kaplayLogo.src} className="h-6" />
-                    <h1 className="sr-only">KAPLAY</h1>
-                </a>
-
-                <ul className="flex flex-row items-center gap-2">
-                    <li>
-                        <button
-                            className="btn btn-xs btn-primary"
-                            onClick={handleRun}
-                        >
-                            Run
-                            <img src={runIcon.src} alt="Run" className="w-4" />
-                        </button>
-                    </li>
-                    <li>
-                        <button
-                            className="btn btn-xs btn-primary"
-                            onClick={handleShare}
-                            ref={shareButton}
-                        >
-                            <span className="share-text">Share</span>
-                            <img src={runIcon.src} alt="Run" className="w-4" />
-                        </button>
-                    </li>
-                    <li>
-                        <ThemeToggler
-                            onThemeChange={onThemeChange}
-                        />
-                    </li>
-                    <li>
-                        <ProjectMenu />
-                    </li>
-                    <li>
-                        <AboutButton />
-                    </li>
-                </ul>
-            </nav>
-        </header>
-    );
-};
-
-export default Header;
diff --git a/src/components/Playground.tsx b/src/components/Playground.tsx
index 24f8e19..46c8711 100644
--- a/src/components/Playground.tsx
+++ b/src/components/Playground.tsx
@@ -5,9 +5,9 @@ import { compressCode } from "../util/compressCode";
 import AboutDialog from "./About/AboutDialog";
 import Editor, { type EditorRef } from "./Editor/Editor";
 import GameView, { type GameViewRef } from "./GameView";
-import Header from "./Header";
 import Tabs from "./Tabs/Tabs";
 import { darkThemes } from "./ThemeToggler";
+import Toolbar from "./Toolbar";
 import "allotment/dist/style.css";
 
 const Playground = () => {
@@ -35,6 +35,13 @@ const Playground = () => {
         const code = editorRef.current?.getValue();
         const url = new URL(window.location.href);
         url.searchParams.set("code", compressCode(code ?? "") || "");
+
+        if (url.toString().length > 3000) {
+            alert(
+                "The URL is too lengthy; it has been copied, but using the new project import/export feature is recommended.",
+            );
+        }
+
         navigator.clipboard.writeText(url.toString());
     };
 
@@ -47,11 +54,13 @@ const Playground = () => {
 
     return (
         <div className="h-full">
-            <Header
-                run={handleRun}
-                onThemeChange={handleThemeChange}
-                onShare={handleShare}
-            />
+            <header className="h-[6%] flex">
+                <Toolbar
+                    run={handleRun}
+                    onThemeChange={handleThemeChange}
+                    onShare={handleShare}
+                />
+            </header>
             <main className="h-[94%] overflow-hidden">
                 <Allotment>
                     <Allotment.Pane minSize={200}>
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
new file mode 100644
index 0000000..d662ec5
--- /dev/null
+++ b/src/components/Toolbar.tsx
@@ -0,0 +1,79 @@
+import { type FC, useRef } from "react";
+import kaplayLogo from "../assets/kaplay.png";
+import runIcon from "../assets/run.png";
+import AboutButton from "./About/AboutButton";
+import ProjectMenu from "./Projects/ProjectMenu";
+import ThemeToggler from "./ThemeToggler";
+
+type Props = {
+    run: () => void;
+    onShare?: () => void;
+    onThemeChange?: (theme: string) => void;
+};
+
+const Toolbar: FC<Props> = ({ run, onThemeChange, onShare }) => {
+    const shareButton = useRef<HTMLButtonElement>(null);
+
+    const handleRun = () => {
+        run();
+    };
+
+    const handleShare = () => {
+        onShare?.();
+
+        if (shareButton.current) {
+            const shareText = shareButton.current.querySelector(".share-text");
+
+            if (shareText) {
+                shareText.textContent = "Copied!";
+                setTimeout(() => {
+                    shareText.textContent = "Share";
+                }, 1000);
+            }
+        }
+    };
+
+    return (
+        <nav className="flex flex-1 py-2 justify-between items-center bg-base-300 px-4">
+            <a className="btn btn-xs btn-ghost text-lg">
+                <img alt="Logo" src={kaplayLogo.src} className="h-6" />
+                <h1 className="sr-only">KAPLAY</h1>
+            </a>
+
+            <ul className="flex flex-row items-center gap-2">
+                <li>
+                    <button
+                        className="btn btn-xs btn-primary"
+                        onClick={handleRun}
+                    >
+                        Run
+                        <img src={runIcon.src} alt="Run" className="w-4" />
+                    </button>
+                </li>
+                <li>
+                    <button
+                        className="btn btn-xs btn-primary"
+                        onClick={handleShare}
+                        ref={shareButton}
+                    >
+                        <span className="share-text">Share</span>
+                        <img src={runIcon.src} alt="Run" className="w-4" />
+                    </button>
+                </li>
+                <li>
+                    <ThemeToggler
+                        onThemeChange={onThemeChange}
+                    />
+                </li>
+                <li>
+                    <ProjectMenu />
+                </li>
+                <li>
+                    <AboutButton />
+                </li>
+            </ul>
+        </nav>
+    );
+};
+
+export default Toolbar;