[MIRROR] Fixes TGUI debugging tools

tgui/packages/tgui/backend.ts

@@ -274,10 +274,6 @@ type BackendState<TData> = {
   shared: Record<string, any>;
   suspending: boolean;
   suspended: boolean;
-  debug?: {
-    debugLayout: boolean;
-    kitchenSink: boolean;
-  };
 };
 
 /**

tgui/packages/tgui/debug/KitchenSink.jsx

@@ -4,11 +4,12 @@
  * @license MIT
  */
 
-import { useLocalState } from '../backend';
+import { useState } from 'react';
+
 import { Flex, Section, Tabs } from '../components';
 import { Pane, Window } from '../layouts';
 
-const r = require.context('../stories', false, /\.stories\.js$/);
+const r = require.context('../stories', false, /\.stories\.jsx$/);
 
 /**
  * @returns {{
@@ -22,8 +23,8 @@ const getStories = () => r.keys().map((path) => r(path));
 
 export const KitchenSink = (props) => {
   const { panel } = props;
-  const [theme] = useLocalState('kitchenSinkTheme');
-  const [pageIndex, setPageIndex] = useLocalState('pageIndex', 0);
+  const [theme] = useState(null);
+  const [pageIndex, setPageIndex] = useState(0);
   const stories = getStories();
   const story = stories[pageIndex];
   const Layout = panel ? Pane : Window;

tgui/packages/tgui/layouts/Pane.tsx

@@ -9,6 +9,7 @@ import { classes } from 'common/react';
 import { useBackend } from '../backend';
 import { Box } from '../components';
 import { BoxProps } from '../components/Box';
+import { useDebug } from '../debug';
 import { Layout } from './Layout';
 
 type Props = Partial<{
@@ -18,11 +19,8 @@ type Props = Partial<{
 
 export function Pane(props: Props) {
   const { theme, children, className, ...rest } = props;
-  const { suspended, debug } = useBackend();
-  let debugLayout = false;
-  if (debug) {
-    debugLayout = debug.debugLayout;
-  }
+  const { suspended } = useBackend();
+  const { debugLayout = false } = useDebug();
 
   return (
     <Layout className={classes(['Window', className])} theme={theme} {...rest}>

tgui/packages/tgui/layouts/Window.tsx

@@ -13,6 +13,7 @@ import { globalStore } from '../backend';
 import { Icon } from '../components';
 import { BoxProps } from '../components/Box';
 import { UI_DISABLED, UI_INTERACTIVE, UI_UPDATE } from '../constants';
+import { useDebug } from '../debug';
 import { toggleKitchenSink } from '../debug/actions';
 import {
   dragStartHandler,
@@ -48,10 +49,8 @@ export const Window = (props: Props) => {
     height,
   } = props;
 
-  const { config, suspended, debug } = useBackend();
-  if (suspended) {
-    return null;
-  }
+  const { config, suspended } = useBackend();
+  const { debugLayout = false } = useDebug();
 
   useEffect(() => {
     const updateGeometry = () => {
@@ -80,11 +79,6 @@ export const Window = (props: Props) => {
     };
   }, [width, height]);
 
-  let debugLayout = false;
-  if (debug) {
-    debugLayout = debug.debugLayout;
-  }
-
   const dispatch = globalStore.dispatch;
   const fancy = config.window?.fancy;
 
@@ -95,11 +89,11 @@ export const Window = (props: Props) => {
       ? config.status < UI_DISABLED
       : config.status < UI_INTERACTIVE);
 
-  return (
+  return suspended ? null : (
     <Layout className="Window" theme={theme}>
       <TitleBar
         className="Window__titleBar"
-        title={!suspended && (title || decodeHtmlEntities(config.title))}
+        title={title || decodeHtmlEntities(config.title)}
         status={config.status}
         fancy={fancy}
         onDragStart={dragStartHandler}

tgui/packages/tgui/routes.tsx

@@ -5,6 +5,7 @@
  */
 
 import { useBackend } from './backend';
+import { useDebug } from './debug';
 import { LoadingScreen } from './interfaces/common/LoadingToolbox';
 import { Window } from './layouts';
 
@@ -52,7 +53,9 @@ const RefreshingWindow = () => {
 
 // Get the component for the current route
 export const getRoutedComponent = () => {
-  const { suspended, config, debug } = useBackend();
+  const { suspended, config } = useBackend();
+  const { kitchenSink = false } = useDebug();
+
   if (suspended) {
     return SuspendedWindow;
   }
@@ -61,7 +64,7 @@ export const getRoutedComponent = () => {
   }
   if (process.env.NODE_ENV !== 'production') {
     // Show a kitchen sink
-    if (debug?.kitchenSink) {
+    if (kitchenSink) {
       return require('./debug').KitchenSink;
     }
   }