formatting tgui files (#15754)

* formatting

* small chat setting adjustment

tgui/packages/tgui-panel/settings/reducer.js

@@ -89,8 +89,10 @@ export const settingsReducer = (state = initialState, action) => {
     nextState.initialized = true;
     let newFilters = {};
     for (let typeDef of MESSAGE_TYPES) {
-      // alert(typeDef.type);
-      if (nextState.storedTypes[typeDef.type] === null) {
+      if (
+        nextState.storedTypes[typeDef.type] === null ||
+        nextState.storedTypes[typeDef.type] === undefined
+      ) {
         newFilters[typeDef.type] = true;
       } else {
         newFilters[typeDef.type] = nextState.storedTypes[typeDef.type];

tgui/packages/tgui/components/Button.jsx

@@ -7,6 +7,7 @@
 import { KEY_ENTER, KEY_ESCAPE, KEY_SPACE } from 'common/keycodes';
 import { classes } from 'common/react';
 import { Component, createRef } from 'react';
+
 import { Box, computeBoxClassName, computeBoxProps } from './Box';
 import { Icon } from './Icon';
 import { Tooltip } from './Tooltip';

tgui/packages/tgui/interfaces/AICard.jsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, ProgressBar, LabeledList, Box, Section } from '../components';
+import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';
 
 export const AICard = (props) => {

tgui/packages/tgui/interfaces/APC.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import {
   Box,
@@ -10,8 +9,8 @@ import {
   Section,
 } from '../components';
 import { Window } from '../layouts';
-import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 import { FullscreenNotice } from './common/FullscreenNotice';
+import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
 
 export const APC = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/AccountsTerminal.jsx

@@ -2,8 +2,8 @@ import { useBackend, useSharedState } from '../backend';
 import {
   Box,
   Button,
-  LabeledList,
   Input,
+  LabeledList,
   Section,
   Table,
   Tabs,

tgui/packages/tgui/interfaces/AiAirlock.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/AiRestorer.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/AirAlarm.jsx

@@ -1,11 +1,12 @@
 import { toFixed } from 'common/math';
 import { Fragment } from 'react';
+
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, LabeledList, Section } from '../components';
-import { getGasLabel, getGasColor } from '../constants';
+import { getGasColor, getGasLabel } from '../constants';
 import { Window } from '../layouts';
+import { Scrubber, Vent } from './common/AtmosControls';
 import { InterfaceLockNoticeBox } from './common/InterfaceLockNoticeBox';
-import { Vent, Scrubber } from './common/AtmosControls';
 
 export const AirAlarm = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/AlgaeFarm.jsx

@@ -1,15 +1,16 @@
+import { capitalize } from 'common/string';
+
 import { useBackend } from '../backend';
 import {
   Box,
   Button,
-  NoticeBox,
   LabeledList,
+  NoticeBox,
   ProgressBar,
   Section,
   Table,
 } from '../components';
 import { Window } from '../layouts';
-import { capitalize } from 'common/string';
 
 export const AlgaeFarm = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/AssemblyProx.jsx

@@ -1,8 +1,9 @@
 import { round } from 'common/math';
+
 import { useBackend } from '../backend';
 import { Button, LabeledList, NumberInput, Section } from '../components';
-import { Window } from '../layouts';
 import { formatTime } from '../format';
+import { Window } from '../layouts';
 
 export const AssemblyProx = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/AssemblyTimer.jsx

@@ -1,8 +1,9 @@
 import { round } from 'common/math';
+
 import { useBackend } from '../backend';
 import { Button, LabeledList, NumberInput, Section } from '../components';
-import { Window } from '../layouts';
 import { formatTime } from '../format';
+import { Window } from '../layouts';
 
 export const AssemblyTimer = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/AtmosFilter.jsx

@@ -1,11 +1,11 @@
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
+  Box,
   Button,
   LabeledList,
   NumberInput,
   Section,
-  AnimatedNumber,
-  Box,
 } from '../components';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/Autolathe.jsx

@@ -1,10 +1,11 @@
-import { flow } from 'common/fp';
 import { filter, sortBy } from 'common/collections';
+import { flow } from 'common/fp';
+import { createSearch, toTitleCase } from 'common/string';
+
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, Flex, Input, Section, Dropdown } from '../components';
+import { Box, Button, Dropdown, Flex, Input, Section } from '../components';
 import { Window } from '../layouts';
 import { Materials } from './ExosuitFabricator';
-import { createSearch, toTitleCase } from 'common/string';
 
 const canBeMade = (recipe, materials, mult = 1) => {
   if (recipe.requirements === null) {

tgui/packages/tgui/interfaces/BeaconLocator.jsx

@@ -1,4 +1,5 @@
-import { toFixed, round } from 'common/math';
+import { round, toFixed } from 'common/math';
+
 import { useBackend } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/Biogenerator.jsx

@@ -1,5 +1,5 @@
 import { createSearch } from 'common/string';
-import { Fragment } from 'react';
+
 import { useBackend, useLocalState } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/BodyDesigner.jsx

@@ -1,13 +1,14 @@
 import { capitalize } from 'common/string';
+
 import { useBackend } from '../backend';
 import {
   Box,
-  ByondUi,
   Button,
+  ByondUi,
+  ColorBox,
   Flex,
   LabeledList,
   Section,
-  ColorBox,
 } from '../components';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/BodyScanner.jsx

@@ -1,5 +1,5 @@
 import { round } from 'common/math';
-import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
 import {
   AnimatedNumber,
@@ -301,7 +301,7 @@ const BodyScannerMainAbnormalities = (props) => {
       {abnormalities.map((a, i) => {
         if (occupant[a[0]]) {
           return (
-            <Box color={a[1]} bold={a[1] === 'bad'}>
+            <Box key={i} color={a[1]} bold={a[1] === 'bad'}>
               {a[2](occupant)}
             </Box>
           );

tgui/packages/tgui/interfaces/BombTester.jsx

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+
 import { useBackend } from '../backend';
 import { Box, Button, Icon, LabeledList, Section, Slider } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/BotanyEditor.jsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section, NoticeBox } from '../components';
+import { Box, Button, LabeledList, NoticeBox, Section } from '../components';
 import { Window } from '../layouts';
 
 export const BotanyEditor = (props) => {

tgui/packages/tgui/interfaces/BotanyIsolator.jsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section, NoticeBox } from '../components';
+import { Box, Button, LabeledList, NoticeBox, Section } from '../components';
 import { Window } from '../layouts';
 
 export const BotanyIsolator = (props) => {

tgui/packages/tgui/interfaces/BrigTimer.jsx

@@ -1,9 +1,9 @@
 import { round } from 'common/math';
-import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
-import { Button, Section, NumberInput, Flex } from '../components';
-import { Window } from '../layouts';
+import { Button, Flex, NumberInput, Section } from '../components';
 import { formatTime } from '../format';
+import { Window } from '../layouts';
 
 export const BrigTimer = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/Canister.jsx

@@ -1,4 +1,5 @@
 import { toFixed } from 'common/math';
+
 import { useBackend } from '../backend';
 import {
   AnimatedNumber,

tgui/packages/tgui/interfaces/Canvas.jsx

@@ -1,4 +1,5 @@
 import { Component, createRef } from 'react';
+
 import { useBackend } from '../backend';
 import { Box, Button } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/CasinoPrizeDispenser.jsx

@@ -1,5 +1,5 @@
 import { createSearch } from 'common/string';
-import { Fragment } from 'react';
+
 import { useBackend, useLocalState } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/ChemDispenser.jsx

@@ -1,6 +1,5 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
-import { Box, Button, Flex, LabeledList, Slider, Section } from '../components';
+import { Box, Button, Flex, LabeledList, Section, Slider } from '../components';
 import { BeakerContents } from '../interfaces/common/BeakerContents';
 import { Window } from '../layouts';
 
@@ -28,6 +27,7 @@ const ChemDispenserSettings = (properties) => {
         <LabeledList.Item label="Dispense" verticalAlign="middle">
           {dispenseAmounts.map((a, i) => (
             <Button
+              key={i}
               textAlign="center"
               selected={amount === a}
               content={a + 'u'}

tgui/packages/tgui/interfaces/ChemMaster.jsx

@@ -1,5 +1,3 @@
-import { Fragment } from 'react';
-
 import { useBackend } from '../backend';
 import { Box, Button, Flex, Icon, LabeledList, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/ClawMachine.jsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, ProgressBar, Box, LabeledList } from '../components';
+import { Box, Button, LabeledList, ProgressBar } from '../components';
 import { Window } from '../layouts';
 
 export const ClawMachine = (props) => {

tgui/packages/tgui/interfaces/CloningConsole.jsx

@@ -1,5 +1,5 @@
 import { round } from 'common/math';
-import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/ColorMate.tsx

@@ -1,5 +1,3 @@
-import { Fragment } from 'react';
-
 import { useBackend } from '../backend';
 import { Box, Button, Flex, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/CommunicationsConsole.jsx

@@ -1,6 +1,5 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
-import { Button, LabeledList, Box, Section } from '../components';
+import { Box, Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
 export const CommunicationsConsole = (props) => {

tgui/packages/tgui/interfaces/ComputerFabricator.jsx

@@ -1,4 +1,5 @@
 import { multiline } from 'common/string';
+
 import { useBackend } from '../backend';
 import { Box, Button, Grid, Section, Table, Tooltip } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/CookingAppliance.jsx

@@ -1,11 +1,11 @@
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
   Button,
   Flex,
   LabeledList,
   ProgressBar,
   Section,
-  AnimatedNumber,
 } from '../components';
 import { Window } from '../layouts';
 
@@ -46,7 +46,7 @@ export const CookingAppliance = (props) => {
             {our_contents.map((content, i) => {
               if (content.empty) {
                 return (
-                  <LabeledList.Item label={'Slot #' + (i + 1)}>
+                  <LabeledList.Item key={i} label={'Slot #' + (i + 1)}>
                     <Button onClick={() => act('slot', { slot: i + 1 })}>
                       Empty
                     </Button>

tgui/packages/tgui/interfaces/Cryo.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import {
   AnimatedNumber,

tgui/packages/tgui/interfaces/DNAForensics.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/DNAModifier.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/DiseaseSplicer.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/DishIncubator.jsx

@@ -1,5 +1,3 @@
-import { Fragment } from 'react';
-import { formatCommaNumber } from '../format';
 import { useBackend } from '../backend';
 import {
   Box,
@@ -9,6 +7,7 @@ import {
   ProgressBar,
   Section,
 } from '../components';
+import { formatCommaNumber } from '../format';
 import { Window } from '../layouts';
 
 export const DishIncubator = (props) => {

tgui/packages/tgui/interfaces/DroneConsole.jsx

@@ -1,6 +1,5 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section, Dropdown } from '../components';
+import { Box, Button, Dropdown, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
 export const DroneConsole = (props) => {

tgui/packages/tgui/interfaces/EmbeddedController.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import {
   Box,
@@ -10,7 +9,6 @@ import {
   Section,
 } from '../components';
 import { Window } from '../layouts';
-
 import { createLogger } from '../logging';
 const logger = createLogger('fuck');
 

tgui/packages/tgui/interfaces/ExosuitFabricator.jsx

@@ -1,23 +1,24 @@
-import { classes } from 'common/react';
 import { uniqBy } from 'common/collections';
+import { toFixed } from 'common/math';
+import { classes } from 'common/react';
+import { createSearch, toTitleCase } from 'common/string';
+import { Fragment } from 'react';
+
 import { useBackend, useSharedState } from '../backend';
-import { formatSiUnit, formatMoney } from '../format';
 import {
-  Flex,
-  Section,
-  Tabs,
   Box,
   Button,
-  ProgressBar,
-  NumberInput,
+  Flex,
   Icon,
   Input,
+  NumberInput,
+  ProgressBar,
+  Section,
+  Tabs,
   Tooltip,
 } from '../components';
-import { Fragment } from 'react';
+import { formatMoney, formatSiUnit } from '../format';
 import { Window } from '../layouts';
-import { createSearch, toTitleCase } from 'common/string';
-import { toFixed } from 'common/math';
 
 const MATERIAL_KEYS = {
   steel: 'sheet-metal_3',

tgui/packages/tgui/interfaces/FileCabinet.jsx

@@ -1,4 +1,5 @@
 import { sortBy } from 'common/collections';
+
 import { useBackend } from '../backend';
 import { Button, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/Floorbot.jsx

@@ -1,10 +1,10 @@
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
   Button,
+  Dropdown,
   LabeledList,
   Section,
-  AnimatedNumber,
-  Dropdown,
 } from '../components';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/GasPump.jsx

@@ -1,11 +1,11 @@
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
   Button,
+  LabeledControls,
   LabeledList,
   ProgressBar,
   Section,
-  LabeledControls,
-  AnimatedNumber,
 } from '../components';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/GasTemperatureSystem.jsx

@@ -1,13 +1,14 @@
 import { round } from 'common/math';
+
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
   Button,
+  Knob,
+  LabeledControls,
   LabeledList,
   Section,
-  Knob,
   Slider,
-  LabeledControls,
-  AnimatedNumber,
 } from '../components';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/GeneralAtmoControl.jsx

@@ -1,6 +1,5 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
-import { Box, Button, Flex, LabeledList, Slider, Section } from '../components';
+import { Box, Button, Flex, LabeledList, Section, Slider } from '../components';
 import { Window } from '../layouts';
 
 export const GeneralAtmoControl = (props) => {

tgui/packages/tgui/interfaces/Gps.jsx

@@ -2,7 +2,7 @@ import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { clamp } from 'common/math';
 import { vecLength, vecSubtract } from 'common/vector';
-import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
 import { Box, Button, Icon, LabeledList, Section, Table } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/GravityGenerator.jsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, Section, LabeledList } from '../components';
+import { Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
 export const GravityGenerator = (props) => {

tgui/packages/tgui/interfaces/GuestPass.jsx

@@ -1,5 +1,6 @@
 /* eslint react/no-danger: "off" */
 import { sortBy } from 'common/collections';
+
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/ICAssembly.jsx

@@ -1,15 +1,16 @@
 import { round } from 'common/math';
+
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
   Box,
   Button,
   LabeledList,
   ProgressBar,
   Section,
-  AnimatedNumber,
 } from '../components';
-import { Window } from '../layouts';
 import { formatPower } from '../format';
+import { Window } from '../layouts';
 
 export const ICAssembly = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/ICCircuit.jsx

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { decodeHtmlEntities } from 'common/string';
+
 import { useBackend } from '../backend';
 import { Box, Button, Flex, LabeledList, Section } from '../components';
-import { Window } from '../layouts';
-import { decodeHtmlEntities } from 'common/string';
 import { formatPower } from '../format';
+import { Window } from '../layouts';
 
 export const ICCircuit = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/ICDetailer.jsx

@@ -1,7 +1,8 @@
+import { toTitleCase } from 'common/string';
+
 import { useBackend } from '../backend';
 import { Button, Section } from '../components';
 import { Window } from '../layouts';
-import { toTitleCase } from 'common/string';
 
 export const ICDetailer = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/ICPrinter.jsx

@@ -1,3 +1,5 @@
+import { filter, sortBy } from 'common/collections';
+
 import { useBackend, useSharedState } from '../backend';
 import {
   Box,
@@ -5,11 +7,10 @@ import {
   LabeledList,
   ProgressBar,
   Section,
-  Tabs,
   Stack,
+  Tabs,
 } from '../components';
 import { Window } from '../layouts';
-import { sortBy, filter } from 'common/collections';
 
 export const ICPrinter = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/IDCard.jsx

@@ -1,5 +1,5 @@
-import { Box, Flex, LabeledList, Section, Icon } from '../components';
 import { useBackend } from '../backend';
+import { Box, Flex, Icon, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 import { RankIcon } from './common/RankIcon';
 

tgui/packages/tgui/interfaces/IdentificationComputer.jsx

@@ -1,5 +1,7 @@
 import { sortBy } from 'common/collections';
+import { decodeHtmlEntities } from 'common/string';
 import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
 import {
   Box,
@@ -12,7 +14,6 @@ import {
   Tabs,
 } from '../components';
 import { Window } from '../layouts';
-import { decodeHtmlEntities } from 'common/string';
 import { CrewManifestContent } from './CrewManifest';
 
 export const IdentificationComputer = () => {

tgui/packages/tgui/interfaces/IsolationCentrifuge.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, Flex, LabeledList, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/Jukebox.jsx

@@ -1,4 +1,5 @@
 import { round } from 'common/math';
+
 import { useBackend } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/LawManager.jsx

@@ -1,13 +1,12 @@
-import { Fragment } from 'react';
 import { useBackend, useSharedState } from '../backend';
 import {
   Button,
-  LabeledList,
-  Section,
-  Tabs,
-  NoticeBox,
-  Table,
   Input,
+  LabeledList,
+  NoticeBox,
+  Section,
+  Table,
+  Tabs,
 } from '../components';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/MechaControlConsole.jsx

@@ -1,16 +1,16 @@
-import { Fragment } from 'react';
+import { decodeHtmlEntities, toTitleCase } from 'common/string';
+
 import { useBackend } from '../backend';
 import {
   Box,
   Button,
-  Modal,
   LabeledList,
+  Modal,
+  NoticeBox,
   ProgressBar,
   Section,
-  NoticeBox,
 } from '../components';
 import { Window } from '../layouts';
-import { toTitleCase, decodeHtmlEntities } from 'common/string';
 
 export const MechaControlConsole = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/Medbot.jsx

@@ -3,9 +3,9 @@ import {
   Box,
   Button,
   LabeledList,
+  NumberInput,
   ProgressBar,
   Section,
-  NumberInput,
 } from '../components';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/MedicalRecords.jsx

@@ -1,4 +1,5 @@
 import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/Microwave.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/MiningOreProcessingConsole.jsx

@@ -1,13 +1,13 @@
 import { toTitleCase } from 'common/string';
-import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
   Box,
   Button,
   Dropdown,
-  Section,
   LabeledList,
-  AnimatedNumber,
+  Section,
 } from '../components';
 import { Window } from '../layouts';
 import { MiningUser } from './common/Mining';

tgui/packages/tgui/interfaces/MiningStackingConsole.jsx

@@ -1,11 +1,12 @@
 import { toTitleCase } from 'common/string';
+
 import { useBackend } from '../backend';
 import {
-  Button,
-  Section,
-  LabeledList,
   AnimatedNumber,
+  Button,
+  LabeledList,
   NumberInput,
+  Section,
 } from '../components';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/MiningVendor.jsx

@@ -1,4 +1,5 @@
 import { createSearch } from 'common/string';
+
 import { useBackend, useLocalState } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/MuleBot.tsx

@@ -1,5 +1,4 @@
 import { BooleanLike } from 'common/react';
-import { Fragment } from 'react';
 
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, Section } from '../components';

tgui/packages/tgui/interfaces/NTNetRelay.jsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, Box, Icon, LabeledList, Section } from '../components';
+import { Box, Button, Icon, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 import { FullscreenNotice } from './common/FullscreenNotice';
 

tgui/packages/tgui/interfaces/Newscaster.jsx

@@ -1,7 +1,7 @@
 import { decodeHtmlEntities } from 'common/string';
-import { Fragment } from 'react';
+
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, Flex, LabeledList, Input, Section } from '../components';
+import { Box, Button, Flex, Input, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 import { TemporaryNotice } from './common/TemporaryNotice';
 

tgui/packages/tgui/interfaces/NoticeBoard.tsx

@@ -1,5 +1,4 @@
 import { BooleanLike } from 'common/react';
-import { Fragment } from 'react';
 
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, Section } from '../components';

tgui/packages/tgui/interfaces/NtosConfiguration.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { NtosWindow } from '../layouts';

tgui/packages/tgui/interfaces/NtosDigitalWarrant.jsx

@@ -1,8 +1,8 @@
+import { filter } from 'common/collections';
+
 import { useBackend } from '../backend';
 import { Button, LabeledList, Section, Table } from '../components';
 import { NtosWindow } from '../layouts';
-import { filter } from 'common/collections';
-import { Fragment } from 'react';
 
 export const NtosDigitalWarrant = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/NtosEmailClient.jsx

@@ -1,20 +1,20 @@
 /* eslint react/no-danger: "off" */
-import { Fragment } from 'react';
+import { round } from 'common/math';
+
 import { useBackend } from '../backend';
 import {
-  Button,
+  AnimatedNumber,
   Box,
+  Button,
+  Flex,
+  Input,
+  LabeledList,
+  ProgressBar,
   Section,
   Table,
-  LabeledList,
-  Input,
   Tabs,
-  Flex,
-  AnimatedNumber,
-  ProgressBar,
 } from '../components';
 import { NtosWindow } from '../layouts';
-import { round } from 'common/math';
 
 export const NtosEmailClient = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/NtosFileManager.jsx

@@ -1,7 +1,7 @@
 /* eslint react/no-danger: "off" */
-import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
-import { Button, Section, Table, Flex } from '../components';
+import { Button, Flex, Section, Table } from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosFileManager = (props) => {

tgui/packages/tgui/interfaces/NtosNetChat.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, Icon, Input, Section, Table } from '../components';
 import { NtosWindow } from '../layouts';

tgui/packages/tgui/interfaces/NtosNetDos.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, NoticeBox, Section } from '../components';
 import { NtosWindow } from '../layouts';

tgui/packages/tgui/interfaces/NtosNetDownloader.jsx

@@ -1,4 +1,5 @@
 import { round } from 'common/math';
+
 import { useBackend } from '../backend';
 import {
   Box,

tgui/packages/tgui/interfaces/NtosNetMonitor.jsx

@@ -1,13 +1,12 @@
+import { useBackend } from '../backend';
 import {
-  Section,
   Box,
   Button,
-  NoticeBox,
   LabeledList,
+  NoticeBox,
   NumberInput,
+  Section,
 } from '../components';
-import { useBackend } from '../backend';
-import { Fragment } from 'react';
 import { NtosWindow } from '../layouts';
 
 export const NtosNetMonitor = (props) => {

tgui/packages/tgui/interfaces/NtosNetTransfer.jsx

@@ -1,11 +1,11 @@
 import { useBackend } from '../backend';
 import {
-  Button,
   Box,
+  Button,
+  Icon,
   LabeledList,
   ProgressBar,
   Section,
-  Icon,
 } from '../components';
 import { NtosWindow } from '../layouts';
 

tgui/packages/tgui/interfaces/NtosNewsBrowser.jsx

@@ -1,15 +1,14 @@
 /* eslint react/no-danger: "off" */
+import { resolveAsset } from '../assets';
 import { useBackend } from '../backend';
 import {
   Button,
   LabeledList,
+  NoticeBox,
   ProgressBar,
   Section,
-  NoticeBox,
 } from '../components';
 import { NtosWindow } from '../layouts';
-import { resolveAsset } from '../assets';
-import { Fragment } from 'react';
 
 export const NtosNewsBrowser = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/NtosWordProcessor.jsx

@@ -1,6 +1,6 @@
 /* eslint react/no-danger: "off" */
 import { useBackend } from '../backend';
-import { Button, Box, Section, Table } from '../components';
+import { Box, Button, Section, Table } from '../components';
 import { NtosWindow } from '../layouts';
 
 export const NtosWordProcessor = (props) => {

tgui/packages/tgui/interfaces/OmniFilter.tsx

@@ -1,5 +1,4 @@
 import { BooleanLike } from 'common/react';
-import { Fragment } from 'react';
 
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, Section } from '../components';

tgui/packages/tgui/interfaces/OmniMixer.tsx

@@ -1,5 +1,4 @@
 import { BooleanLike } from 'common/react';
-import { Fragment } from 'react';
 
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, Section, Table } from '../components';

tgui/packages/tgui/interfaces/OperatingComputer.jsx

@@ -1,7 +1,6 @@
 import { round } from 'common/math';
-import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
-import { Window } from '../layouts';
 import {
   Box,
   Button,
@@ -9,10 +8,11 @@ import {
   Icon,
   Knob,
   LabeledList,
+  ProgressBar,
   Section,
   Tabs,
-  ProgressBar,
 } from '../components';
+import { Window } from '../layouts';
 
 const stats = [
   ['good', 'Conscious'],

tgui/packages/tgui/interfaces/OvermapDisperser.jsx

@@ -1,11 +1,11 @@
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
   Box,
   Button,
   Flex,
   LabeledList,
   Section,
-  AnimatedNumber,
 } from '../components';
 import { Window } from '../layouts';
 import { OvermapPanControls } from './common/Overmap';

tgui/packages/tgui/interfaces/OvermapEngines.jsx

@@ -1,13 +1,12 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
   Box,
   Button,
+  Collapsible,
   Flex,
   LabeledList,
   Section,
-  AnimatedNumber,
-  Collapsible,
 } from '../components';
 import { Window } from '../layouts';
 
@@ -100,11 +99,15 @@ export const OvermapEnginesContent = (props) => {
                             : 'Booting'
                           : 'Offline'}
                       </Box>
-                      {engine.eng_status.map((status) => {
+                      {engine.eng_status.map((status, index) => {
                         if (Array.isArray(status)) {
-                          return <Box color={status[1]}>{status[0]}</Box>;
+                          return (
+                            <Box key={index} color={status[1]}>
+                              {status[0]}
+                            </Box>
+                          );
                         } else {
-                          return <Box>{status}</Box>;
+                          return <Box key={index}>{status}</Box>;
                         }
                       })}
                     </LabeledList.Item>

tgui/packages/tgui/interfaces/OvermapHelm.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, Flex, LabeledList, Section, Table } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/OvermapNavigation.tsx

@@ -1,5 +1,4 @@
 import { BooleanLike } from 'common/react';
-import { Fragment } from 'react';
 
 import { useBackend } from '../backend';
 import { Button, LabeledList, Section } from '../components';

tgui/packages/tgui/interfaces/OvermapShieldGenerator.jsx

@@ -1,12 +1,11 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import {
+  AnimatedNumber,
   Box,
   Button,
   LabeledList,
   ProgressBar,
   Section,
-  AnimatedNumber,
 } from '../components';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/OvermapShipSensors.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, ProgressBar, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/PartsLathe.jsx

@@ -1,15 +1,15 @@
-import { Fragment } from 'react';
+import { toTitleCase } from 'common/string';
+
 import { useBackend } from '../backend';
 import {
   Box,
   Button,
   LabeledList,
+  NoticeBox,
   ProgressBar,
   Section,
-  NoticeBox,
 } from '../components';
 import { Window } from '../layouts';
-import { toTitleCase } from 'common/string';
 import { Materials } from './ExosuitFabricator';
 
 export const PartsLathe = (props) => {

tgui/packages/tgui/interfaces/Photocopier.jsx

@@ -1,12 +1,12 @@
-import {
-  ProgressBar,
-  NumberInput,
-  Button,
-  Section,
-  Box,
-  Flex,
-} from '../components';
 import { useBackend } from '../backend';
+import {
+  Box,
+  Button,
+  Flex,
+  NumberInput,
+  ProgressBar,
+  Section,
+} from '../components';
 import { Window } from '../layouts';
 
 export const Photocopier = (props) => {

tgui/packages/tgui/interfaces/PlantAnalyzer.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/PortableGenerator.jsx

@@ -1,3 +1,5 @@
+import { round } from 'common/math';
+
 import { useBackend } from '../backend';
 import {
   Box,
@@ -8,7 +10,6 @@ import {
   Section,
 } from '../components';
 import { Window } from '../layouts';
-import { round } from 'common/math';
 
 export const PortableGenerator = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/PortablePump.jsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, LabeledList, Slider, Section } from '../components';
+import { Button, LabeledList, Section, Slider } from '../components';
 import { Window } from '../layouts';
 import { PortableBasicInfo } from './common/PortableAtmos';
 

tgui/packages/tgui/interfaces/PortableTurret.jsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
 import { Button, LabeledList, NoticeBox, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/PressureRegulator.jsx

@@ -1,6 +1,5 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
-import { Button, LabeledList, Section, AnimatedNumber } from '../components';
+import { AnimatedNumber, Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';
 
 export const PressureRegulator = (props) => {

tgui/packages/tgui/interfaces/PrisonerManagement.jsx

@@ -1,6 +1,5 @@
-import { Fragment } from 'react';
 import { useBackend } from '../backend';
-import { Button, Section, Box, Table } from '../components';
+import { Box, Button, Section, Table } from '../components';
 import { Window } from '../layouts';
 
 export const PrisonerManagement = (props) => {

tgui/packages/tgui/interfaces/RIGSuit.jsx

@@ -1,4 +1,5 @@
-import { Fragment } from 'react';
+import { capitalize, toTitleCase } from 'common/string';
+
 import { useBackend } from '../backend';
 import {
   Box,
@@ -9,7 +10,6 @@ import {
   Section,
 } from '../components';
 import { Window } from '../layouts';
-import { capitalize, toTitleCase } from 'common/string';
 
 export const RIGSuit = (props) => {
   const { act, data } = useBackend();

tgui/packages/tgui/interfaces/Radio.jsx

@@ -1,4 +1,5 @@
-import { toFixed, round } from 'common/math';
+import { round, toFixed } from 'common/math';
+
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, NumberInput, Section } from '../components';
 import { RADIO_CHANNELS } from '../constants';

tgui/packages/tgui/interfaces/RapidPipeDispenser.jsx

@@ -1,13 +1,14 @@
 import { classes } from 'common/react';
 import { capitalize } from 'common/string';
+
 import { useBackend, useLocalState } from '../backend';
 import {
   Box,
   Button,
   ColorBox,
-  Stack,
   LabeledList,
   Section,
+  Stack,
   Tabs,
 } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/RequestConsole.jsx

@@ -1,5 +1,5 @@
 import { decodeHtmlEntities } from 'common/string';
-import { Fragment } from 'react';
+
 import { useBackend } from '../backend';
 import { Box, Button, LabeledList, Section, Tabs } from '../components';
 import { Window } from '../layouts';