Fixes broken accordion ref

Fixes broken poppable ref
adds Schema page
Fixes schema creation not including game system id

lib/poppables/components/poppable.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import { FC, PropsWithChildren, ReactNode, useCallback, useState } from "react";
+import {
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
 import { PoppableContent } from "./poppable-content";
 import { useDebounce } from "../../../hooks/useDebounce";
 
@@ -12,38 +19,45 @@ interface IProps {
   spacing?: number;
 }
 
-export const Poppable: FC<PropsWithChildren<IProps>> = (
-  { className, content, children, preferredEdge, preferredAlign, spacing },
-) => {
+export const Poppable: FC<PropsWithChildren<IProps>> = ({
+  className,
+  content,
+  children,
+  preferredEdge,
+  preferredAlign,
+  spacing,
+}) => {
   const [isHovered, setIsHovered] = useState(false);
   const closing = useDebounce(!isHovered, 1000);
   const closed = useDebounce(closing, 300);
 
-  const [ref, setRef] = useState<HTMLElement>();
+  // const [ref, setRef] = useState<HTMLElement>();
 
-  const updateRef = useCallback((node: HTMLElement) => {
-    if (!node) return;
-    setRef(node);
-  }, []);
+  // const updateRef = useCallback((node: HTMLElement) => {
+  // if (!node) return;
+  // setRef(node);
+  // }, []);
+
+  const ref = useRef(null);
 
   return (
     <>
       <span
-        ref={updateRef}
+        ref={ref}
         className={className}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
         {children}
       </span>
-      {!!ref && (
+      {!!ref.current && (
         <PoppableContent
           preferredAlign={preferredAlign}
           preferredEdge={preferredEdge}
           spacing={spacing}
           isClosing={closing}
           isClosed={closed}
-          relativeElement={ref}
+          relativeElement={ref.current}
           setHover={setIsHovered}
         >
           {content}