feat: Allow DebugPanel to be visible when flag__debug=true

app/components/debug-panel/DebugPanel.tsx

@@ -165,13 +165,14 @@ DESCRIBE <${configuratorState.dataSet ?? ""}>`
   );
 };
 
-const DebugPanel = ({
-  configurator = false,
-  interactiveFilters = false,
-}: {
+export type DebugPanelProps = {
   configurator?: Boolean;
   interactiveFilters?: Boolean;
-}) => {
+};
+
+const DebugPanel = (props: DebugPanelProps) => {
+  const { configurator = false, interactiveFilters = false } = props;
+
   return (
     <Box
       sx={{
@@ -198,9 +199,4 @@ const DebugPanel = ({
   );
 };
 
-const DebugPanelNull = () => null;
-
-const ExportedDebugPanel =
-  process.env.NODE_ENV === "development" ? DebugPanel : DebugPanelNull;
-
-export default ExportedDebugPanel;
+export default DebugPanel;

app/components/debug-panel/index.tsx

@@ -2,12 +2,24 @@ import { CircularProgress } from "@mui/material";
 import dynamic from "next/dynamic";
 import { Suspense } from "react";
 
-const LazyDebugPanel = dynamic(() => import("./DebugPanel"));
-
-export default process.env.NODE_ENV === "development"
-  ? (props: React.ComponentProps<typeof LazyDebugPanel>) => (
-      <Suspense fallback={<CircularProgress />}>
-        <LazyDebugPanel {...props} />
-      </Suspense>
-    )
-  : () => null;
+import { flag } from "@/flags";
+
+import { DebugPanelProps } from "./DebugPanel";
+
+const LazyDebugPanel = dynamic(() => import("./DebugPanel"), { ssr: false });
+
+const DebugPanel = (props: DebugPanelProps) => {
+  const shouldShow = flag("debug") || process.env.NODE_ENV === "development";
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={<CircularProgress />}>
+      <LazyDebugPanel {...props} />
+    </Suspense>
+  );
+};
+
+export default DebugPanel;