game systems: game system pages, game system create

components: moved DevTool to client component

components/devtools/DevTool.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { FC, PropsWithChildren, use, useEffect } from "react";
+import { DevToolboxContext } from "./context";
+
+export const DevTool: FC<PropsWithChildren<{ id: string }>> = (
+  { children, id },
+) => {
+  const { addTool, removeTool } = use(DevToolboxContext);
+  useEffect(() => {
+    addTool(id, children);
+    (() => removeTool(id));
+  }, [addTool, children, id, removeTool]);
+
+  return <></>;
+};

components/devtools/Toolbox.tsx

@@ -1,5 +1,5 @@
 import { Portal } from "@/lib/portal/components";
-import { FC, PropsWithChildren, use, useEffect, useState } from "react";
+import { FC, use, useState } from "react";
 import { DevToolboxContext } from "./context";
 import { WrenchScrewdriverIcon } from "@heroicons/react/24/solid";
 import { XMarkIcon } from "@heroicons/react/16/solid";
@@ -38,15 +38,3 @@ export const DevToolbox: FC = () => {
     )
     : <></>;
 };
-
-export const DevTool: FC<PropsWithChildren<{ id: string }>> = (
-  { children, id },
-) => {
-  const { addTool, removeTool } = use(DevToolboxContext);
-  useEffect(() => {
-    addTool(id, children);
-    (() => removeTool(id));
-  }, [addTool, children, id, removeTool]);
-
-  return <></>;
-};