From 87888cceb85b8d117d2c31ea337cd556528bd568 Mon Sep 17 00:00:00 2001
From: Iajret Creature <122297233+Steals-The-PRs@users.noreply.github.com>
Date: Thu, 11 Apr 2024 17:59:54 +0300
Subject: [PATCH] [MIRROR] Fixes TGUI debugging tools (#1921) (#2840)

* Fixes TGUI debugging tools (#82569)

This project doesn't interfere with the game logic and aims to fix
multiple debugging features that are currently broken. Unfortunately,
kitchen sink and debug layout became broken after migration to Redux.
This PR aims to fix those features.

* Fixes TGUI debugging tools

---------

Co-authored-by: NovaBot <154629622+NovaBot13@users.noreply.github.com>
Co-authored-by: Interception&? <137328283+intercepti0n@users.noreply.github.com>
---
 tgui/packages/tgui/backend.ts            |  4 ----
 tgui/packages/tgui/debug/KitchenSink.jsx |  9 +++++----
 tgui/packages/tgui/layouts/Pane.tsx      |  8 +++-----
 tgui/packages/tgui/layouts/Window.tsx    | 16 +++++-----------
 tgui/packages/tgui/routes.tsx            |  7 +++++--
 5 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/tgui/packages/tgui/backend.ts b/tgui/packages/tgui/backend.ts
index c85d5153210..9190d74dbe2 100644
--- a/tgui/packages/tgui/backend.ts
+++ b/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;
-  };
 };
 
 /**
diff --git a/tgui/packages/tgui/debug/KitchenSink.jsx b/tgui/packages/tgui/debug/KitchenSink.jsx
index d215ab777d8..19044ca98d0 100644
--- a/tgui/packages/tgui/debug/KitchenSink.jsx
+++ b/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;
diff --git a/tgui/packages/tgui/layouts/Pane.tsx b/tgui/packages/tgui/layouts/Pane.tsx
index a2858fae7fc..f34205545fb 100644
--- a/tgui/packages/tgui/layouts/Pane.tsx
+++ b/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}>
diff --git a/tgui/packages/tgui/layouts/Window.tsx b/tgui/packages/tgui/layouts/Window.tsx
index 2b6fbf87356..aa91370bfc3 100644
--- a/tgui/packages/tgui/layouts/Window.tsx
+++ b/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}
diff --git a/tgui/packages/tgui/routes.tsx b/tgui/packages/tgui/routes.tsx
index b819da32e16..d2894bc4cc0 100644
--- a/tgui/packages/tgui/routes.tsx
+++ b/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;
     }
   }