[MIRROR] Unify TGUI crew manifest across lobby and ghosts, make it a true table (#9223)

Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>
Co-authored-by: CHOMPStation2 <chompsation2@gmail.com>

code/modules/mob/dead/observer/observer.dm

@@ -717,11 +717,8 @@ This is the proc mobs get to turn into a ghost. Forked from ghostize due to comp
 	set name = "Show Crew Manifest"
 	set category = "Ghost.Game" //CHOMPEdit
 
-	var/dat
-	dat += "<h4>Crew Manifest</h4>"
-	dat += data_core.get_manifest()
-
-	src << browse(dat, "window=manifest;size=370x420;can_close=1")
+	var/datum/tgui_module/crew_manifest/self_deleting/S = new(src)
+	S.tgui_interact(src)
 
 //This is called when a ghost is drag clicked to something.
 /mob/observer/dead/MouseDrop(atom/over)

code/modules/mob/new_player/new_player.dm

@@ -777,13 +777,8 @@
 	return new_character
 
 /mob/new_player/proc/ViewManifest()
-	var/dat = "<div align='center'>"
-	dat += data_core.get_manifest(OOC = 1)
-
-	//src << browse(dat, "window=manifest;size=370x420;can_close=1")
-	var/datum/browser/popup = new(src, "Crew Manifest", "Crew Manifest", 370, 420, src)
-	popup.set_content(dat)
-	popup.open()
+	var/datum/tgui_module/crew_manifest/self_deleting/S = new(src)
+	S.tgui_interact(src)
 
 /mob/new_player/Move()
 	return 0

code/modules/tgui/modules/crew_manifest.dm

@@ -11,4 +11,14 @@
 
 /datum/tgui_module/crew_manifest/robot
 /datum/tgui_module/crew_manifest/robot/tgui_state(mob/user)
-	return GLOB.tgui_self_state
+	return GLOB.tgui_self_state
+
+// Module that deletes itself when it's closed
+/datum/tgui_module/crew_manifest/self_deleting
+
+/datum/tgui_module/crew_manifest/self_deleting/tgui_close(mob/user)
+	. = ..()
+	qdel(src)
+
+/datum/tgui_module/crew_manifest/self_deleting/tgui_state(mob/user)
+	return GLOB.tgui_always_state

tgui/packages/tgui/interfaces/CrewManifest.tsx

@@ -1,9 +1,8 @@
 import { decodeHtmlEntities } from 'common/string';
-
-import { useBackend } from '../backend';
-import { Box, Section, Table } from '../components';
-import { COLORS } from '../constants';
-import { Window } from '../layouts';
+import { useBackend } from 'tgui/backend';
+import { COLORS } from 'tgui/constants';
+import { Window } from 'tgui/layouts';
+import { Box, Section, Table } from 'tgui-core/components';
 
 /*
  * Shared by the following templates (and used individually too)
@@ -40,43 +39,63 @@ export const CrewManifestContent = (props) => {
 
   const { manifest } = data;
 
+  if (manifest.length === 0) {
+    return <Box color="average">No Manifest Data</Box>;
+  }
+
+  let crew_count = manifest
+    .map((val) => val.elems.length)
+    .reduce((a, c) => a + c, 0);
+  if (!crew_count) {
+    return <Box color="average">No Crew Detected</Box>;
+  }
+
   return (
-    <Section title="Crew Manifest" noTopPadding>
-      {manifest.map(
-        (cat) =>
-          !!cat.elems.length && (
-            <Section
-              title={
-                <Box
-                  backgroundColor={COLORS.manifest[cat.cat.toLowerCase()]}
-                  m={-1}
-                  pt={1}
-                  pb={1}
-                >
-                  <Box ml={1} textAlign="center" fontSize={1.4}>
-                    {cat.cat}
-                  </Box>
-                </Box>
-              }
-              key={cat.cat}
-            >
-              <Table>
+    <Section>
+      <Table>
+        {manifest.map(
+          (department) =>
+            !!department.elems.length && (
+              <>
+                <Table.Row header>
+                  <Table.Cell colSpan={3} textAlign="center" fontSize={1.4}>
+                    <Box
+                      pt={1}
+                      pb={1}
+                      mb={-1.2}
+                      mt={2}
+                      backgroundColor={
+                        COLORS.manifest[department.cat.toLowerCase()]
+                      }
+                    >
+                      {department.cat}
+                    </Box>
+                    {/* This uses style={{ height }} to avoid being turned into REM and causing rounding errors */}
+                    <Box
+                      backgroundColor="blue"
+                      mt={1}
+                      style={{ height: '2px' }}
+                    >
+                      &nbsp;
+                    </Box>
+                  </Table.Cell>
+                </Table.Row>
                 <Table.Row header color="white">
                   <Table.Cell>Name</Table.Cell>
                   <Table.Cell>Rank</Table.Cell>
                   <Table.Cell>Active</Table.Cell>
                 </Table.Row>
-                {cat.elems.map((person) => (
+                {department.elems.map((person) => (
                   <Table.Row color="average" key={person.name + person.rank}>
                     <Table.Cell>{decodeHtmlEntities(person.name)}</Table.Cell>
                     <Table.Cell>{person.rank}</Table.Cell>
                     <Table.Cell>{person.active}</Table.Cell>
                   </Table.Row>
                 ))}
-              </Table>
-            </Section>
-          ),
-      )}
+              </>
+            ),
+        )}
+      </Table>
     </Section>
   );
 };