Resolve sticky messages in STUI (#5581)

# About the pull request

<!-- Remove this text and explain what the purpose of your PR is.

Mention if you have tested your changes. If you changed a map, make sure
you used the mapmerge tool.
If this is an Issue Correction, you can type "Fixes Issue #169420" to
link the PR to the corresponding Issue number #169420.

Remember: something that is self-evident to you might not be to others.
Explain your rationale fully, even if you feel it goes without saying.
-->

Fixed the issue for STUI locally. The issue appears have happened
because infernojs and react deal with key management on iterators
differently. By using the index for the iterator, rather than the entire
log message, this seems to have resolved it.

# Explain why it's good for the game
Resolves #5557

# Testing Photographs and Procedure
<details>
<summary>Screenshots & Videos</summary>

Put screenshots and videos here with an empty line between the
screenshots and the `<details>` tags.

</details>


# Changelog
:cl:
code: fixes sticky messages in STUI
refactor: STUI is now a TSX component
/:cl:

tgui/packages/tgui/interfaces/STUI.jsx → tgui/packages/tgui/interfaces/STUI.tsx

@@ -1,20 +1,45 @@
+import { useEffect, useState } from 'react';
 import { useBackend, useLocalState } from '../backend';
 import { Tabs, Section, Box, Flex, Input, Slider, LabeledList } from '../components';
 import { Window } from '../layouts';
 
-export const STUI = (props) => {
-  const { act, data } = useBackend();
-  const tabs = data.tabs || ['Attack'];
-  const [selectedTab, setSelectedTab] = useLocalState('progress', tabs[0]);
-  const logs = data.logs[selectedTab].length ? data.logs[selectedTab] : [''];
+type STUIData = {
+  tabs: Array<string>;
+  logs: Map<string, Array<string>>;
+};
 
+const useSearchTerm = () => {
   const [searchTerm, setSearchTerm] = useLocalState('searchTerm', '');
+  return { searchTerm, setSearchTerm };
+};
 
+const useLogFont = () => {
   const [logsfontnumber, setLogsFontSize] = useLocalState('logsfontnumber', 7);
-  const logsfontsize = logsfontnumber + 'pt';
+  return {
+    logsfontnumber,
+    setLogsFontSize,
+  };
+};
 
-  const bigfontnumber = logsfontnumber + 5;
-  const bigfontsize = bigfontnumber + 'pt';
+const useTabs = () => {
+  const [selectedTab, setSelectedTab] = useLocalState('progress', 'Attack');
+  return {
+    selectedTab,
+    setSelectedTab,
+  };
+};
+
+export const STUI = () => {
+  const { data } = useBackend<STUIData>();
+  const { selectedTab } = useTabs();
+  const { searchTerm, setSearchTerm } = useSearchTerm();
+  const { logsfontnumber, setLogsFontSize } = useLogFont();
+
+  const [logs, setLogs] = useState<Array<string>>([]);
+
+  useEffect(() => {
+    setLogs(data.logs[selectedTab].length ? data.logs[selectedTab] : []);
+  }, [data.logs, selectedTab]);
 
   return (
     <Window width={900} height={700}>
@@ -50,38 +75,47 @@ export const STUI = (props) => {
             </LabeledList>
           </Flex.Item>
           <Flex.Item mt={1} grow={1} basis={0}>
-            <Section fill scrollable>
-              {logs.map((log) => {
-                if (!log.toLowerCase().match(searchTerm)) {
-                  return;
-                }
-                return (
-                  <Box fontSize={logsfontsize} key={log}>
-                    {log}
-                  </Box>
-                );
-              })}
-              {(logs.length > 1 && (
-                <Box align="center" fontSize={bigfontsize}>
-                  --- End of Logs --
-                </Box>
-              )) || (
-                <Box align="center" fontSize={bigfontsize}>
-                  --- No Logs --
-                </Box>
-              )}
-            </Section>
+            <RenderLogs logs={logs} />
           </Flex.Item>
         </Flex>
       </Window.Content>
     </Window>
   );
 };
 
-const STUItabs = (props) => {
-  const { act, data } = useBackend();
-  const tabs = data.tabs || ['Attack'];
-  const [selectedTab, setSelectedTab] = useLocalState('progress', tabs[0]);
+const RenderLogs = (props: { readonly logs: Array<string> }) => {
+  const { searchTerm } = useSearchTerm();
+  const { logs } = props;
+  const { logsfontnumber } = useLogFont();
+  const bigfontsize = logsfontnumber + 5 + 'pt';
+  return (
+    <Section fill scrollable>
+      {logs
+        .filter((x) => x.toLowerCase().match(searchTerm) !== null)
+        .map((log, i) => (
+          <RenderLog log={log} key={i} />
+        ))}
+      <Box align="center" fontSize={bigfontsize}>
+        {logs.length > 1 ? '--- End of Logs --' : '--- No Logs --'}
+      </Box>
+    </Section>
+  );
+};
+
+const RenderLog = (props: { readonly log: string }) => {
+  const { logsfontnumber } = useLogFont();
+  const logsfontsize = logsfontnumber + 'pt';
+  return (
+    <Box fontSize={logsfontsize} key={props.log}>
+      {props.log}
+    </Box>
+  );
+};
+
+const STUItabs = () => {
+  const { act, data } = useBackend<STUIData>();
+  const tabs = data.tabs ?? [''];
+  const { selectedTab, setSelectedTab } = useTabs();
   return (
     <Tabs fluid textAlign="center">
       <Tabs.Tab