Function BucketRow

src/components/CardMemoryAnalyticsView.tsx:197–321

({
  b,
  isOverall,
  idx,
  isSubset,
}: {
  b: CardBucketStats;
  isOverall: boolean;
  idx: number;
  isSubset?: boolean;
})

// --- Table -----------------------------------------------------------------

const cellStyle: React.CSSProperties = {
  padding: '4px 5px',
  fontSize: '10.5px',
  lineHeight: 1.3,
  whiteSpace: 'nowrap',
  textAlign: 'right',
};

const headerCellStyle: React.CSSProperties = {
  padding: '4px 5px',
  fontSize: '9.5px',
  fontWeight: 700,
  textTransform: 'uppercase',
  letterSpacing: '0.03em',
  color: 'var(--rn-clr-content-tertiary)',
  textAlign: 'right',
  whiteSpace: 'nowrap',
  cursor: 'help',
};

/**
 * Where one column group ends and the next begins. The group header row alone
 * could not carry this: its cells are centred over their span, so a wide group
 * reads as a label floating somewhere above the numbers. The edge is drawn on
 * the group header, the column header AND the body cells so a column can be
 * traced to its group down the whole table.
 */
const GROUP_EDGE = '2px solid var(--rn-clr-background-tertiary)';

/** Alternating tints, one per group, so adjacent groups never share a shade. */
const groupTint = (idx: number): string =>
  idx % 2 === 0 ? 'var(--rn-clr-background-secondary)' : 'var(--rn-clr-background-tertiary)';

const groupHeaderStyle: React.CSSProperties = {
  padding: '3px 5px',
  fontSize: '9px',
  fontWeight: 700,
  textTransform: 'uppercase',
  letterSpacing: '0.06em',
  color: 'var(--rn-clr-content-secondary)',
  textAlign: 'center',
  background: 'var(--rn-clr-background-secondary)',
  borderBottom: '1px solid var(--rn-clr-background-tertiary)',
  cursor: 'help',
};

function BucketRow({
  b,
  isOverall,
  idx,
  isSubset,
}: {
  b: CardBucketStats;
  isOverall: boolean;
  idx: number;
  isSubset?: boolean;
}) {