chore: rename Header to Toolbar

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>
 

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}>

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;