feat(utils): extract buildColumns from App

2026-06-23 16:20:48 -04:00
parent 87f4060487
commit 187aa4dfd6
1 changed files with 80 additions and 0 deletions
--- a/react-app/src/utils/columns.jsx
+++ b/react-app/src/utils/columns.jsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import { Box, Typography } from '@mui/material'
+import { SizeCell } from '../components/SizeCell.jsx'
+import { pctLabel, ptsLabel, changeColor } from './format.js'
+
+export function buildColumns({ isMobile, showFactionCol, onSelectSize }) {
+  const cols = [
+    {
+      field: 'name', headerName: 'Unit', flex: 3, minWidth: 80,
+      renderCell: (p) => (
+        <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', height: '100%', overflow: 'hidden' }}>
+          <Typography
+            variant="body2"
+            fontWeight={600}
+            sx={{
+              fontSize: { xs: '0.68rem', sm: '0.8rem' },
+              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+              '&:hover': { textDecoration: 'underline', color: 'primary.main' },
+              cursor: 'pointer',
+            }}
+          >
+            {p.row.name}
+          </Typography>
+        </Box>
+      ),
+    },
+    {
+      field: 'size', headerName: '#', flex: 0.6, minWidth: 36,
+      renderCell: (p) => <SizeCell row={p.row} onSelect={onSelectSize} />,
+    },
+    {
+      field: 'original', headerName: 'Old', flex: 0.8, minWidth: 36, align: 'right', headerAlign: 'right',
+      renderCell: (p) => (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', width: '100%', height: '100%' }}>
+          <Typography sx={{ fontFamily: 'monospace', fontSize: { xs: '0.68rem', sm: '0.8rem' } }}>{p.row.original ?? '—'}</Typography>
+        </Box>
+      ),
+    },
+    {
+      field: 'new', headerName: 'New', flex: 0.8, minWidth: 36, align: 'right', headerAlign: 'right',
+      renderCell: (p) => (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', width: '100%', height: '100%' }}>
+          <Typography sx={{ fontFamily: 'monospace', fontWeight: 600, fontSize: { xs: '0.68rem', sm: '0.8rem' } }}>{p.row.new ?? '—'}</Typography>
+        </Box>
+      ),
+    },
+    {
+      field: 'change_pct', headerName: 'Δ %', flex: 1, minWidth: 44, align: 'right', headerAlign: 'right',
+      renderCell: (p) => (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', width: '100%', height: '100%' }}>
+          <Typography sx={{ fontFamily: 'monospace', fontWeight: 600, fontSize: { xs: '0.68rem', sm: '0.8rem' }, color: changeColor(p.row.change_pct) }}>{pctLabel(p.row.change_pct)}</Typography>
+        </Box>
+      ),
+    },
+  ]
+
+  // Δ pts column — desktop only
+  if (!isMobile) {
+    cols.splice(4, 0, {
+      field: 'change_pts', headerName: 'Δ pts', flex: 0.8, minWidth: 40, align: 'right', headerAlign: 'right',
+      renderCell: (p) => (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', width: '100%', height: '100%' }}>
+          <Typography sx={{ fontFamily: 'monospace', fontSize: { xs: '0.68rem', sm: '0.8rem' }, color: changeColor(p.row.change_pts) }}>{ptsLabel(p.row.change_pts)}</Typography>
+        </Box>
+      ),
+    })
+  }
+
+  if (showFactionCol) {
+    cols.unshift({
+      field: 'faction_name', headerName: 'Faction', flex: 1.5, minWidth: 80,
+      renderCell: (p) => (
+        <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', height: '100%', overflow: 'hidden' }}>
+          <Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.68rem', sm: '0.8rem' }, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.row.faction_name}</Typography>
+        </Box>
+      ),
+    })
+  }
+  return cols
+}