More TGUI Hotfixes (#22628)

This PR will remain open/WIP for a short period of time for me to add
more bugfixes to it as they are reported.

changes:
- bugfix: "Fixes LateJoin and Manifest interfaces not displaying
department colors by creating a shared component for both interfaces to
use."
- bugfix: "Fixes the Manifest interface not displaying colors for crew
status."

html/changelogs/Bat-TGUIHotfixes2.yml

@@ -0,0 +1,5 @@
+author: Batrachophrenoboocosmomachia
+delete-after: True
+changes:
+  - bugfix: "Fixes LateJoin and Manifest interfaces not displaying department colors by creating a shared component for both interfaces to use."
+  - bugfix: "Fixes the Manifest interface not displaying colors for crew status."

tgui/packages/tgui/interfaces/CrewManifest.tsx

@@ -1,11 +1,11 @@
 import { Window } from '../layouts';
-import { Manifest } from './common/Manifest';
+import { ManifestSection } from './common/ManifestSection';
 
 export const CrewManifest = () => {
   return (
-    <Window title={'Crew Manifest'}>
+    <Window title="Crew Manifest" width={500} height={700}>
       <Window.Content scrollable>
-        <Manifest />
+        <ManifestSection />
       </Window.Content>
     </Window>
   );

tgui/packages/tgui/interfaces/LateJoin.tsx

@@ -8,6 +8,7 @@ import {
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend } from '../backend';
 import { Window } from '../layouts';
+import { departmentClass } from './common/departmentClass';
 
 export type LateJoinData = {
   character_name: string;
@@ -90,7 +91,7 @@ export const JobsList = (props) => {
         <Section
           title={department}
           key={department}
-          className={'border-dept-' + department.toLowerCase()}
+          className={departmentClass(department)}
         >
           {data.jobs_list
             .filter((job) => job.department === department)

tgui/packages/tgui/interfaces/common/ManifestSection.tsx

@@ -1,6 +1,7 @@
 import { Button, Icon, Section, Table, Tooltip } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend } from '../../backend';
+import { departmentClass } from './departmentClass';
 
 type ManifestData = {
   manifest: { department: Crew[] };
@@ -28,7 +29,7 @@ export const ManifestSection = (props) => {
             key={dept}
             title={dept}
             textAlign="center"
-            className={`border-dept-${dept.toLowerCase()}`}
+            className={departmentClass(dept)}
             backgroundColor="rgba(10, 10, 10, 0.75)"
           >
             <Table>

tgui/packages/tgui/interfaces/common/departmentClass.ts

@@ -0,0 +1,5 @@
+export const departmentClass = (department: string) =>
+  `border-dept-${department
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')}`;

tgui/packages/tgui/styles/interfaces/CrewManifest.scss

@@ -1,29 +1,52 @@
 $department_map: (
-  'Cargo': var(--color-brown),
-  'Command': var(--color-yellow),
-  'Security': var(--color-red),
-  'Engineering': var(--color-orange),
-  'Medical': var(--color-teal),
-  'Misc': var(--color-white),
-  'Science': var(--color-purple),
-  'Service': var(--color-green),
-  'Silicon': var(--color-pink),
+  'cargo': var(--color-brown),
+  'operations': var(--color-brown),
+  'command': var(--color-yellow),
+  'command-support': var(--color-blue),
+  'security': var(--color-red),
+  'engineering': var(--color-orange),
+  'medical': var(--color-teal),
+  'misc': var(--color-white),
+  'miscellaneous': var(--color-white),
+  'science': var(--color-purple),
+  'service': var(--color-green),
+  'civilian': var(--color-green),
+  'silicon': var(--color-pink),
+  'equipment': var(--color-pink),
+  'off-ship': var(--color-white),
 );
 
-.CrewManifest {
-  @each $department-name, $color-value in $department_map {
-    &--#{$department-name} {
-      .Section {
-        &__title {
-          border-color: $color-value;
-        }
-        &__titleText {
-          color: $color-value;
-        }
+$manifest_status_map: (
+  'active': var(--color-green),
+  'online': var(--color-green),
+  'away-mission': var(--color-blue),
+  'ssd': var(--color-yellow),
+  'deceased': var(--color-red),
+  'missing': var(--color-orange),
+  'physically-unfit': var(--color-orange),
+  'disabled': var(--color-grey),
+);
+
+@each $department-name, $color-value in $department_map {
+  .border-dept-#{$department-name} {
+    .Section {
+      &__title {
+        border-color: $color-value;
+      }
+      &__titleText {
+        color: $color-value;
       }
     }
   }
+}
 
+@each $status-name, $color-value in $manifest_status_map {
+  .manifest-indicator-#{$status-name} {
+    color: $color-value;
+  }
+}
+
+.CrewManifest {
   &__Cell {
     padding: var(--space-s) 0;