[tgui] Linter fixes 5 (#92051)

## About The Pull Request
Batch of fixes from the biome linter. Many files could have their syntax
shortened.

I also fixed a prettier ignore file issue so that tgui.html can properly
get formatted
## Command
Get [Biome](https://biomejs.dev/guides/manual-installation/) (the
executable, at least)
`biome lint --write --only "useOptionalChain" --unsafe`

## Why It's Good For The Game
Moving us to a simple linter/formatter and shaving off a number of
packages, tech debt
## Changelog

.prettierignore

@@ -4,16 +4,11 @@ data
 font-awesome
 jquery
 juke
+**/build
+**/dist
+**/node_modules
 
-## Tgui
-node_modules
-.yarn
-# Avoid running on any bundles.
-tgui/public
-# Running it on tgui.html is fine, however.
-!/tgui/public/tgui.html
-# Specific files
-package-lock.json
 # File names / types
 *.min.*
 *.pnp.*
+*.bundle.*

tgui/.prettierignore

@@ -1,8 +1,5 @@
-.pnp.*
-.yarn
 node_modules
+public
 
-# Avoid running on any bundles.
-/public/**/*
 # Running it on tgui.html is fine, however.
 !/public/tgui.html

tgui/packages/tgui/interfaces/ExodroneConsole.tsx

@@ -542,9 +542,9 @@ const TravelTargetSelectionScreen = (props: {
       dest.band_info[s] !== undefined && dest.band_info[s] !== 0;
     return Object.keys(all_bands).filter(band_check);
   };
-  const valid_destinations =
+  const valid_destinations = sites?.filter(
-    sites &&
+    (destination) => !site || destination.ref !== site.ref,
-    sites.filter((destination) => !site || destination.ref !== site.ref);
+  );
   return (
     (drone.drone_status === DroneStatusEnum.Travel && (
       <TravelDimmer drone={drone} />

tgui/packages/tgui/interfaces/ExoscannerConsole.tsx

@@ -224,10 +224,9 @@ export const ExoscannerConsole = (props) => {
                 </Stack.Item>
               </Stack>
               <Section title="Special Scan Condtions">
-                {scan_conditions &&
+                {scan_conditions?.map((condition) => (
-                  scan_conditions.map((condition) => (
+                  <NoticeBox key={condition}>{condition}</NoticeBox>
-                    <NoticeBox key={condition}>{condition}</NoticeBox>
+                ))}
-                  ))}
               </Section>
             </Section>
           </Stack.Item>

tgui/packages/tgui/interfaces/ExosuitFabricator.tsx

@@ -330,14 +330,11 @@ const QueueList = (props: QueueListProps) => {
                   <Box
                     width={'32px'}
                     height={'32px'}
-                    className={classes([
+                    className={classes(['design32x32', entry.design?.icon])}
-                      'design32x32',
-                      entry.design && entry.design.icon,
-                    ])}
                   />
                 </div>
                 <div className="FabricatorRecipe__Label">
-                  {entry.design && entry.design.name}
+                  {entry.design?.name}
                 </div>
               </div>
             </Tooltip>

tgui/packages/tgui/interfaces/Fabrication/DesignBrowser.tsx

@@ -500,7 +500,7 @@ const CategoryView = <T extends Design = Design>(
       title={category.title}
       key={category.anchorKey}
       container_id={category.anchorKey}
-      buttons={categoryButtons && categoryButtons(category)}
+      buttons={categoryButtons?.(category)}
     >
       {body}
     </Section>

tgui/packages/tgui/interfaces/Fabrication/MaterialAccessBar.tsx

@@ -63,7 +63,7 @@ export const MaterialAccessBar = (props: MaterialAccessBarProps) => {
             material={material}
             SHEET_MATERIAL_AMOUNT={SHEET_MATERIAL_AMOUNT}
             onEjectRequested={(quantity) =>
-              onEjectRequested && onEjectRequested(material, quantity)
+              onEjectRequested?.(material, quantity)
             }
           />
         </Flex.Item>

tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx

@@ -429,7 +429,7 @@ export class IntegratedCircuit extends Component {
         for (const output of input.connected_to) {
           const output_port = locations[output];
           connections.push({
-            color: (output_port && output_port.color) || 'blue',
+            color: output_port?.color || 'blue',
             from: output_port,
             to: locations[input.ref],
           });
@@ -446,7 +446,7 @@ export class IntegratedCircuit extends Component {
         y: (mouseY + ABSOLUTE_Y_OFFSET) * Math.pow(zoom, -1),
       };
       connections.push({
-        color: (portLocation && portLocation.color) || 'blue',
+        color: portLocation?.color || 'blue',
         from: isOutput ? portLocation : mouseCoords,
         to: isOutput ? mouseCoords : portLocation,
       });

tgui/packages/tgui/interfaces/LuaEditor/ListMapper.tsx

@@ -264,7 +264,7 @@ export const ListMapper = (props: ListMapperProps) => {
 
   const inner = (
     <>
-      {list && list.map(ListMapperInner)}
+      {list?.map(ListMapperInner)}
       {editable && (
         <Button
           icon="plus"

tgui/packages/tgui/interfaces/MafiaPanel.tsx

@@ -164,12 +164,7 @@ export const MafiaPanel = (props) => {
   const { act, data } = useBackend<MafiaData>();
   const { roleinfo } = data;
   return (
-    <Window
+    <Window title="Mafia" theme={roleinfo?.role_theme} width={900} height={600}>
-      title="Mafia"
-      theme={roleinfo && roleinfo.role_theme}
-      width={900}
-      height={600}
-    >
       <Window.Content>
         <MafiaPanelData />
       </Window.Content>

tgui/packages/tgui/interfaces/MechBayPowerConsole.jsx

@@ -13,8 +13,8 @@ import { Window } from '../layouts';
 export const MechBayPowerConsole = (props) => {
   const { act, data } = useBackend();
   const { recharge_port } = data;
-  const mech = recharge_port && recharge_port.mech;
+  const mech = recharge_port?.mech;
-  const cell = mech && mech.cell;
+  const cell = mech?.cell;
   return (
     <Window width={400} height={200}>
       <Window.Content>

tgui/packages/tgui/interfaces/NtosNetChat.jsx

@@ -171,14 +171,14 @@ export const NtosNetChat = (props) => {
               </Stack.Item>
               {!!in_channel && (
                 <Input
-                  backgroundColor={this_client && this_client.muted && 'red'}
+                  backgroundColor={this_client?.muted && 'red'}
                   height="22px"
                   placeholder={
-                    (this_client && this_client.muted && 'You are muted!') ||
+                    (this_client?.muted && 'You are muted!') ||
                     'Message ' + title
                   }
                   fluid
-                  disabled={this_client && this_client.muted}
+                  disabled={this_client?.muted}
                   selfClear
                   mt={1}
                   onEnter={(value) =>

tgui/packages/tgui/interfaces/PersonalCrafting/content/RecipeContent.tsx

@@ -229,14 +229,12 @@ export function RecipeContent(props: FullProps) {
                 {(item.tool_paths || item.tool_behaviors) && (
                   <Box>
                     <GroupTitle title="Tools" />
-                    {item.tool_paths &&
+                    {item.tool_paths?.map((tool) => (
-                      item.tool_paths.map((tool) => (
+                      <AtomContent key={tool} atom_id={tool} amount={1} />
-                        <AtomContent key={tool} atom_id={tool} amount={1} />
+                    ))}
-                      ))}
+                    {item.tool_behaviors?.map((tool) => (
-                    {item.tool_behaviors &&
+                      <ToolContent key={tool} tool={tool} />
-                      item.tool_behaviors.map((tool) => (
+                    ))}
-                        <ToolContent key={tool} tool={tool} />
-                      ))}
                   </Box>
                 )}
                 {item.machinery && (

tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/AntagsPage.tsx

@@ -111,8 +111,7 @@ function AntagSelection(props: AntagSelectionProps) {
           const isBanned =
             data.antag_bans && data.antag_bans.indexOf(antagonist.key) !== -1;
 
-          const daysLeft =
+          const daysLeft = data.antag_days_left?.[antagonist.key] || 0;
-            (data.antag_days_left && data.antag_days_left[antagonist.key]) || 0;
 
           return (
             <Flex.Item

tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx

@@ -193,8 +193,7 @@ function JobRow(props: JobRowProps) {
 
   const createSetPriority = createCreateSetPriorityFromName(name);
 
-  const experienceNeeded =
+  const experienceNeeded = data.job_required_experience?.[name];
-    data.job_required_experience && data.job_required_experience[name];
   const daysLeft = data.job_days_left ? data.job_days_left[name] : 0;
 
   // SKYRAT EDIT ADDITION

tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/MainPage.tsx

@@ -490,7 +490,7 @@ export function MainPage(props: MainPageProps) {
   const serverData = useServerPrefs();
 
   const currentSpeciesData =
-    serverData && serverData.species[data.character_preferences.misc.species];
+    serverData?.species[data.character_preferences.misc.species];
 
   const contextualPreferences =
     data.character_preferences.secondary_features || [];

tgui/packages/tgui/interfaces/Spellbook.tsx

@@ -626,7 +626,7 @@ const CategoryDisplay = (props: { ActiveCat: TabType }) => {
           </Stack.Item>
         )}
         <Stack.Item>
-          {(ActiveCat.component && ActiveCat.component()) || (
+          {ActiveCat.component?.() || (
             <SpellTabDisplay TabSpells={TabSpells} PointOffset={38} />
           )}
         </Stack.Item>

tgui/packages/tgui/interfaces/Vending.tsx

@@ -219,7 +219,7 @@ const ProductDisplay = (props: {
         <Stack>
           {!all_products_free && user && (
             <Stack.Item fontSize="16px" color="green">
-              {(user && user.cash) || 0}
+              {user?.cash || 0}
               {displayed_currency_name}
               <Icon name={displayed_currency_icon} color="gold" />
             </Stack.Item>

tgui/packages/tgui/stories/ByondUi.stories.tsx

@@ -38,7 +38,7 @@ function Story() {
               setTimeout(() => {
                 try {
                   const result = new Function('return (' + code + ')')();
-                  if (result && result.then) {
+                  if (result?.then) {
                     logger.log('Promise');
                     result.then(logger.log);
                   } else {