Fix website docs (#5873)

There was a 500 on the playground and the switch between core and
metadata

packages/twenty-website/src/app/_components/playground/token-form.tsx

@@ -195,7 +195,9 @@ const TokenForm = ({
             className="select"
             onChange={(event) =>
               router.replace(
-                '/' + pathname.split('/').at(-2) + '/' + event.target.value,
+                pathname.split('/').slice(0, -1).join('/') +
+                  '/' +
+                  event.target.value,
               )
             }
             value={pathname.split('/').at(-1)}

packages/twenty-website/src/app/developers/graphql/core/page.tsx

@@ -1,6 +1,11 @@
+'use client';
 import React from 'react';
+import dynamic from 'next/dynamic';
 
-import GraphQlPlayground from '../../../_components/playground/graphql-playground';
+const GraphQlPlayground = dynamic(
+  () => import('../../../_components/playground/graphql-playground'),
+  { ssr: false },
+);
 
 const CoreGraphql = () => {
   return <GraphQlPlayground subDoc={'core'} />;

packages/twenty-website/src/app/developers/graphql/metadata/page.tsx

@@ -1,6 +1,11 @@
+'use client';
 import React from 'react';
+import dynamic from 'next/dynamic';
 
-import GraphQlPlayground from '../../../_components/playground/graphql-playground';
+const GraphQlPlayground = dynamic(
+  () => import('../../../_components/playground/graphql-playground'),
+  { ssr: false },
+);
 
 const CoreGraphql = () => {
   return <GraphQlPlayground subDoc={'metadata'} />;