From 4ea7f05048a0c0e11f1e4ccadebe453e5ee842e9 Mon Sep 17 00:00:00 2001
From: Natalie Rose <natalie@omg.lol>
Date: Mon, 28 Sep 2026 12:07:55 +1000
Subject: [PATCH] Improve stats General tab formatting

---
 app/components/stats/general/bodiesTab.tsx    | 78 ++++++++-----------
 app/components/stats/general/buildingsTab.tsx | 50 ++++++------
 .../stats/general/collapsibleSection.tsx      | 27 -------
 app/components/stats/general/empiresTab.tsx   | 43 ++++------
 app/components/stats/general/glyphsTab.tsx    | 17 ++--
 app/components/stats/general/orbitsTab.tsx    | 38 ++++-----
 app/components/stats/general/shipsTab.tsx     | 68 ++++++++--------
 app/components/stats/general/spiesTab.tsx     | 21 ++---
 app/components/stats/general/starsTab.tsx     | 23 +++---
 app/components/stats/general/statRow.tsx      | 17 ++++
 10 files changed, 171 insertions(+), 211 deletions(-)
 delete mode 100644 app/components/stats/general/collapsibleSection.tsx
 create mode 100644 app/components/stats/general/statRow.tsx

diff --git a/app/components/stats/general/bodiesTab.tsx b/app/components/stats/general/bodiesTab.tsx
index 80301b76..94e17a13 100644
--- a/app/components/stats/general/bodiesTab.tsx
+++ b/app/components/stats/general/bodiesTab.tsx
@@ -1,58 +1,48 @@
 import React from 'react';
 import { ServerOverview, ServerOverviewBodyGroup } from 'app/interfaces';
-import CollapsibleSection from 'app/components/stats/general/collapsibleSection';
+import StatRow from 'app/components/stats/general/statRow';
 import * as util from 'app/util';
 
 type Props = {
   data: ServerOverview['bodies'];
 };
 
-const bodyGroupRows = (group: ServerOverviewBodyGroup) => (
-  <>
-    <li>
-      <label>Total:</label> {util.commify(group.count)}
-    </li>
-    <li>
-      <label>Average Orbit:</label> {group.average_orbit}
-    </li>
-    <li>
-      <label>Average Size:</label> {group.average_size}
-    </li>
-    <li>
-      <label>Largest Size:</label> {group.largest_size}
-    </li>
-    <li>
-      <label>Smallest Size:</label> {group.smallest_size}
-    </li>
-  </>
+const bodyGroupTable = (group: ServerOverviewBodyGroup) => (
+  <table className='table is-fullwidth is-narrow mt-2 mb-0'>
+    <tbody>
+      <StatRow label='Total'>{util.commify(group.count)}</StatRow>
+      <StatRow label='Average Orbit'>{group.average_orbit}</StatRow>
+      <StatRow label='Average Size'>{group.average_size}</StatRow>
+      <StatRow label='Largest Size'>{group.largest_size}</StatRow>
+      <StatRow label='Smallest Size'>{group.smallest_size}</StatRow>
+    </tbody>
+  </table>
 );
 
+const BODY_TYPES: Array<[string, keyof ServerOverview['bodies']['types']]> = [
+  ['Asteroids', 'asteroids'],
+  ['Gas Giants', 'gas_giants'],
+  ['Habitables', 'habitables'],
+  ['Stations', 'stations'],
+];
+
 const BodiesTab: React.FunctionComponent<Props> = ({ data }) => (
-  <ul>
-    <li>
-      <label>Total Bodies:</label> {util.commify(data.count)}
-    </li>
-    <li>
-      <label>Colonies:</label> {util.commify(data.colony_count)}
-    </li>
-    <li className='mt-4'>
-      <label>Types</label>
-      <ul>
-        <CollapsibleSection title='Asteroids'>
-          {bodyGroupRows(data.types.asteroids)}
-        </CollapsibleSection>
-        <CollapsibleSection title='Gas Giants'>
-          {bodyGroupRows(data.types.gas_giants)}
-        </CollapsibleSection>
-        <CollapsibleSection title='Habitables'>
-          {bodyGroupRows(data.types.habitables)}
-        </CollapsibleSection>
-        <CollapsibleSection title='Stations'>
-          {bodyGroupRows(data.types.stations)}
-        </CollapsibleSection>
-      </ul>
-    </li>
-  </ul>
+  <div>
+    <table className='table is-fullwidth is-borderless mb-4'>
+      <tbody>
+        <StatRow label='Total Bodies'>{util.commify(data.count)}</StatRow>
+        <StatRow label='Colonies'>{util.commify(data.colony_count)}</StatRow>
+      </tbody>
+    </table>
+
+    <p className='has-text-weight-bold mb-2'>Types</p>
+    {BODY_TYPES.map(([label, key]) => (
+      <details className='mb-4' key={key}>
+        <summary style={{ cursor: 'pointer', userSelect: 'none' }}>{label}</summary>
+        {bodyGroupTable(data.types[key])}
+      </details>
+    ))}
+  </div>
 );
 
 export default BodiesTab;
diff --git a/app/components/stats/general/buildingsTab.tsx b/app/components/stats/general/buildingsTab.tsx
index dd06d838..11909559 100644
--- a/app/components/stats/general/buildingsTab.tsx
+++ b/app/components/stats/general/buildingsTab.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ServerOverview } from 'app/interfaces';
-import CollapsibleSection from 'app/components/stats/general/collapsibleSection';
+import StatRow from 'app/components/stats/general/statRow';
 import * as util from 'app/util';
 
 type Props = {
@@ -8,31 +8,29 @@ type Props = {
 };
 
 const BuildingsTab: React.FunctionComponent<Props> = ({ data }) => (
-  <ul>
-    <li>
-      <label>Total Buildings:</label> {util.commify(data.count)}
-    </li>
-    <li className='mt-4'>
-      <label>Types</label>
-      <ul>
-        {Object.keys(data.types)
-          .sort()
-          .map((key) => (
-            <CollapsibleSection title={key} key={key}>
-              <li>
-                <label>Total:</label> {util.commify(data.types[key].count)}
-              </li>
-              <li>
-                <label>Average Level:</label> {data.types[key].average_level}
-              </li>
-              <li>
-                <label>Highest Level:</label> {data.types[key].highest_level}
-              </li>
-            </CollapsibleSection>
-          ))}
-      </ul>
-    </li>
-  </ul>
+  <div>
+    <table className='table is-fullwidth is-borderless mb-4'>
+      <tbody>
+        <StatRow label='Total Buildings'>{util.commify(data.count)}</StatRow>
+      </tbody>
+    </table>
+
+    <p className='has-text-weight-bold mb-2'>Types</p>
+    {Object.keys(data.types)
+      .sort()
+      .map((key) => (
+        <details className='mb-4' key={key}>
+          <summary style={{ cursor: 'pointer', userSelect: 'none' }}>{key}</summary>
+          <table className='table is-fullwidth is-narrow mt-2 mb-0'>
+            <tbody>
+              <StatRow label='Total'>{util.commify(data.types[key].count)}</StatRow>
+              <StatRow label='Average Level'>{data.types[key].average_level}</StatRow>
+              <StatRow label='Highest Level'>{data.types[key].highest_level}</StatRow>
+            </tbody>
+          </table>
+        </details>
+      ))}
+  </div>
 );
 
 export default BuildingsTab;
diff --git a/app/components/stats/general/collapsibleSection.tsx b/app/components/stats/general/collapsibleSection.tsx
deleted file mode 100644
index 6c102901..00000000
--- a/app/components/stats/general/collapsibleSection.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { useState } from 'react';
-
-type Props = {
-  title: string;
-  children: React.ReactNode;
-};
-
-//
-// Replaces the legacy tree's DOM-class-toggle expander (app/yui/stats.js's `expander`, driven by
-// clicks delegated to label.statsSubHeader) with plain component state.
-//
-const CollapsibleSection: React.FunctionComponent<Props> = ({ title, children }) => {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <li className='mb-4'>
-      <a onClick={() => setExpanded(!expanded)}>
-        <span className='has-text-weight-bold'>
-          {expanded ? '▾' : '▸'} {title}
-        </span>
-      </a>
-      {expanded && <ul className='ml-4'>{children}</ul>}
-    </li>
-  );
-};
-
-export default CollapsibleSection;
diff --git a/app/components/stats/general/empiresTab.tsx b/app/components/stats/general/empiresTab.tsx
index 4536288f..5d6fc035 100644
--- a/app/components/stats/general/empiresTab.tsx
+++ b/app/components/stats/general/empiresTab.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ServerOverview } from 'app/interfaces';
+import StatRow from 'app/components/stats/general/statRow';
 import * as util from 'app/util';
 
 type Props = {
@@ -7,32 +8,22 @@ type Props = {
 };
 
 const EmpiresTab: React.FunctionComponent<Props> = ({ data }) => (
-  <ul>
-    <li>
-      <label>Total Empires:</label> {util.commify(data.count)}
-    </li>
-    <li>
-      <label>Active This Week:</label> {util.commify(data.active_this_week_count)}
-    </li>
-    <li>
-      <label>Active Today:</label> {util.commify(data.active_today_count)}
-    </li>
-    <li>
-      <label>Currently Active:</label> {util.commify(data.currently_active_count)}
-    </li>
-    <li>
-      <label>Average University Level:</label> {util.commify(data.average_university_level)}
-    </li>
-    <li>
-      <label>Highest University Level:</label> {util.commify(data.highest_university_level)}
-    </li>
-    <li>
-      <label>Empires Using Essentia:</label> {util.commify(data.essentia_using_count)}
-    </li>
-    <li>
-      <label>Isolationist Empires:</label> {util.commify(data.isolationist_count)}
-    </li>
-  </ul>
+  <table className='table is-fullwidth is-borderless'>
+    <tbody>
+      <StatRow label='Total Empires'>{util.commify(data.count)}</StatRow>
+      <StatRow label='Active This Week'>{util.commify(data.active_this_week_count)}</StatRow>
+      <StatRow label='Active Today'>{util.commify(data.active_today_count)}</StatRow>
+      <StatRow label='Currently Active'>{util.commify(data.currently_active_count)}</StatRow>
+      <StatRow label='Average University Level'>
+        {util.commify(data.average_university_level)}
+      </StatRow>
+      <StatRow label='Highest University Level'>
+        {util.commify(data.highest_university_level)}
+      </StatRow>
+      <StatRow label='Empires Using Essentia'>{util.commify(data.essentia_using_count)}</StatRow>
+      <StatRow label='Isolationist Empires'>{util.commify(data.isolationist_count)}</StatRow>
+    </tbody>
+  </table>
 );
 
 export default EmpiresTab;
diff --git a/app/components/stats/general/glyphsTab.tsx b/app/components/stats/general/glyphsTab.tsx
index f6baa187..3390bc83 100644
--- a/app/components/stats/general/glyphsTab.tsx
+++ b/app/components/stats/general/glyphsTab.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ServerOverview } from 'app/interfaces';
+import StatRow from 'app/components/stats/general/statRow';
 import * as util from 'app/util';
 import _ from 'lodash';
 
@@ -11,13 +12,15 @@ const GlyphsTab: React.FunctionComponent<Props> = ({ data }) => {
   const glyphs = Object.keys(data.types).sort();
 
   return (
-    <ul>
-      {glyphs.map((type) => (
-        <li key={type}>
-          <label>{_.capitalize(type)}:</label> {util.commify(data.types[type])}
-        </li>
-      ))}
-    </ul>
+    <table className='table is-fullwidth is-borderless'>
+      <tbody>
+        {glyphs.map((type) => (
+          <StatRow label={_.capitalize(type)} key={type}>
+            {util.commify(data.types[type])}
+          </StatRow>
+        ))}
+      </tbody>
+    </table>
   );
 };
 
diff --git a/app/components/stats/general/orbitsTab.tsx b/app/components/stats/general/orbitsTab.tsx
index 6e2b2663..62e23645 100644
--- a/app/components/stats/general/orbitsTab.tsx
+++ b/app/components/stats/general/orbitsTab.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ServerOverview } from 'app/interfaces';
-import CollapsibleSection from 'app/components/stats/general/collapsibleSection';
+import StatRow from 'app/components/stats/general/statRow';
 import * as util from 'app/util';
 
 type Props = {
@@ -10,26 +10,22 @@ type Props = {
 const ORBIT_LABELS = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'];
 
 const OrbitsTab: React.FunctionComponent<Props> = ({ data }) => (
-  <ul>
-    <li>
-      <label>Orbits</label>
-      <ul>
-        {ORBIT_LABELS.map((label, index) => {
-          const orbit = data[String(index + 1)];
-          return (
-            <CollapsibleSection title={label} key={label}>
-              <li>
-                <label>Total Bodies:</label> {util.commify(orbit.bodies)}
-              </li>
-              <li>
-                <label>Inhabited:</label> {util.commify(orbit.inhabited)}
-              </li>
-            </CollapsibleSection>
-          );
-        })}
-      </ul>
-    </li>
-  </ul>
+  <div>
+    {ORBIT_LABELS.map((label, index) => {
+      const orbit = data[String(index + 1)];
+      return (
+        <details className='mb-4' key={label}>
+          <summary style={{ cursor: 'pointer', userSelect: 'none' }}>{label}</summary>
+          <table className='table is-fullwidth is-narrow mt-2 mb-0'>
+            <tbody>
+              <StatRow label='Total Bodies'>{util.commify(orbit.bodies)}</StatRow>
+              <StatRow label='Inhabited'>{util.commify(orbit.inhabited)}</StatRow>
+            </tbody>
+          </table>
+        </details>
+      );
+    })}
+  </div>
 );
 
 export default OrbitsTab;
diff --git a/app/components/stats/general/shipsTab.tsx b/app/components/stats/general/shipsTab.tsx
index 40691f68..eaa34cc6 100644
--- a/app/components/stats/general/shipsTab.tsx
+++ b/app/components/stats/general/shipsTab.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ServerOverview } from 'app/interfaces';
-import CollapsibleSection from 'app/components/stats/general/collapsibleSection';
+import StatRow from 'app/components/stats/general/statRow';
 import * as util from 'app/util';
 
 type Props = {
@@ -8,41 +8,37 @@ type Props = {
 };
 
 const ShipsTab: React.FunctionComponent<Props> = ({ data }) => (
-  <ul>
-    <li>
-      <label>Total Ships:</label> {util.commify(data.count)}
-    </li>
-    <li className='mt-4'>
-      <label>Types</label>
-      <ul>
-        {Object.keys(data.types).map((key) => (
-          <CollapsibleSection title={util.humanize(key)} key={key}>
-            <li>
-              <label>Total:</label> {util.commify(data.types[key].count)}
-            </li>
-            <li>
-              <label>Smallest Hold Size:</label> {util.commify(data.types[key].smallest_hold_size)}
-            </li>
-            <li>
-              <label>Average Hold Size:</label> {util.commify(data.types[key].average_hold_size)}
-            </li>
-            <li>
-              <label>Largest Hold Size:</label> {util.commify(data.types[key].largest_hold_size)}
-            </li>
-            <li>
-              <label>Slowest Speed:</label> {util.commify(data.types[key].slowest_speed)}
-            </li>
-            <li>
-              <label>Average Speed:</label> {util.commify(data.types[key].average_speed)}
-            </li>
-            <li>
-              <label>Fastest Speed:</label> {util.commify(data.types[key].fastest_speed)}
-            </li>
-          </CollapsibleSection>
-        ))}
-      </ul>
-    </li>
-  </ul>
+  <div>
+    <table className='table is-fullwidth is-borderless mb-4'>
+      <tbody>
+        <StatRow label='Total Ships'>{util.commify(data.count)}</StatRow>
+      </tbody>
+    </table>
+
+    <p className='has-text-weight-bold mb-2'>Types</p>
+    {Object.keys(data.types).map((key) => (
+      <details className='mb-4' key={key}>
+        <summary style={{ cursor: 'pointer', userSelect: 'none' }}>{util.humanize(key)}</summary>
+        <table className='table is-fullwidth is-narrow mt-2 mb-0'>
+          <tbody>
+            <StatRow label='Total'>{util.commify(data.types[key].count)}</StatRow>
+            <StatRow label='Smallest Hold Size'>
+              {util.commify(data.types[key].smallest_hold_size)}
+            </StatRow>
+            <StatRow label='Average Hold Size'>
+              {util.commify(data.types[key].average_hold_size)}
+            </StatRow>
+            <StatRow label='Largest Hold Size'>
+              {util.commify(data.types[key].largest_hold_size)}
+            </StatRow>
+            <StatRow label='Slowest Speed'>{util.commify(data.types[key].slowest_speed)}</StatRow>
+            <StatRow label='Average Speed'>{util.commify(data.types[key].average_speed)}</StatRow>
+            <StatRow label='Fastest Speed'>{util.commify(data.types[key].fastest_speed)}</StatRow>
+          </tbody>
+        </table>
+      </details>
+    ))}
+  </div>
 );
 
 export default ShipsTab;
diff --git a/app/components/stats/general/spiesTab.tsx b/app/components/stats/general/spiesTab.tsx
index 4fed39eb..ed0fa5a6 100644
--- a/app/components/stats/general/spiesTab.tsx
+++ b/app/components/stats/general/spiesTab.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ServerOverview } from 'app/interfaces';
+import StatRow from 'app/components/stats/general/statRow';
 import * as util from 'app/util';
 
 type Props = {
@@ -40,16 +41,16 @@ const rows: Array<[string, keyof ServerOverview['spies']]> = [
 ];
 
 const SpiesTab: React.FunctionComponent<Props> = ({ data }) => (
-  <ul>
-    <li>
-      <label>Total Spies:</label> {util.commify(data.count)}
-    </li>
-    {rows.map(([label, key]) => (
-      <li key={key}>
-        <label>{label}:</label> {util.commify(data[key])}
-      </li>
-    ))}
-  </ul>
+  <table className='table is-fullwidth is-borderless'>
+    <tbody>
+      <StatRow label='Total Spies'>{util.commify(data.count)}</StatRow>
+      {rows.map(([label, key]) => (
+        <StatRow label={label} key={key}>
+          {util.commify(data[key])}
+        </StatRow>
+      ))}
+    </tbody>
+  </table>
 );
 
 export default SpiesTab;
diff --git a/app/components/stats/general/starsTab.tsx b/app/components/stats/general/starsTab.tsx
index b566c94d..12c4bd50 100644
--- a/app/components/stats/general/starsTab.tsx
+++ b/app/components/stats/general/starsTab.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ServerOverview } from 'app/interfaces';
+import StatRow from 'app/components/stats/general/statRow';
 import * as util from 'app/util';
 
 type Props = {
@@ -7,20 +8,14 @@ type Props = {
 };
 
 const StarsTab: React.FunctionComponent<Props> = ({ data }) => (
-  <ul>
-    <li>
-      <label>Total Stars:</label> {util.commify(data.count)}
-    </li>
-    <li>
-      <label>Seized Stars:</label> {util.commify(data.seized_count)}
-    </li>
-    <li>
-      <label>Probed Stars:</label> {util.commify(data.probed_count)}
-    </li>
-    <li>
-      <label>Total Probes:</label> {util.commify(data.probes_count)}
-    </li>
-  </ul>
+  <table className='table is-fullwidth is-borderless'>
+    <tbody>
+      <StatRow label='Total Stars'>{util.commify(data.count)}</StatRow>
+      <StatRow label='Seized Stars'>{util.commify(data.seized_count)}</StatRow>
+      <StatRow label='Probed Stars'>{util.commify(data.probed_count)}</StatRow>
+      <StatRow label='Total Probes'>{util.commify(data.probes_count)}</StatRow>
+    </tbody>
+  </table>
 );
 
 export default StarsTab;
diff --git a/app/components/stats/general/statRow.tsx b/app/components/stats/general/statRow.tsx
new file mode 100644
index 00000000..2f41e7c7
--- /dev/null
+++ b/app/components/stats/general/statRow.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+type Props = {
+  label: string;
+  children: React.ReactNode;
+};
+
+const StatRow: React.FunctionComponent<Props> = ({ label, children }) => (
+  <tr>
+    <td>
+      <span className='has-text-weight-bold'>{label}</span>
+    </td>
+    <td>{children}</td>
+  </tr>
+);
+
+export default StatRow;
-- 
2.51.2