SRO: Add traces to sheets (#2562)

* prelim addition of traces to sheets

* add translations and enabled/disabled stat boosts

* refactor

* refactor + sheet utils

* minor fixes

libs/pando/ui-sheet/src/components/DocumentDisplay.tsx

@@ -3,7 +3,7 @@ import type { CardBackgroundColor } from '@genshin-optimizer/common/ui'
 import { CardThemed } from '@genshin-optimizer/common/ui'
 import { evalIfFunc } from '@genshin-optimizer/common/util'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import { Box, Collapse } from '@mui/material'
+import { Box, Collapse, Typography } from '@mui/material'
 import { useContext, useState } from 'react'
 import { CalcContext, TagContext } from '../context'
 import type { Document, FieldsDocument, TextDocument } from '../types'
@@ -68,7 +68,11 @@ function TextSectionDisplay({ textDocument }: { textDocument: TextDocument }) {
   const calculator = useContext(CalcContext)
   const tag = useContext(TagContext)
   if (!calculator) return null
-  return <div>{evalIfFunc(textDocument.text, calculator.withTag(tag))}</div>
+  return (
+    <Typography>
+      {evalIfFunc(textDocument.text, calculator.withTag(tag))}
+    </Typography>
+  )
 }
 function TextSectionDisplayCollapse({
   textDocument,

libs/pando/ui-sheet/src/components/FieldDisplay.tsx

@@ -57,7 +57,12 @@ export function TextFieldDisplay({
   return (
     <Box
       width="100%"
-      sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 1,
+        py: 0.25,
+      }}
       component={component}
     >
       <Typography color={`${variant}.main`}>
@@ -78,7 +83,7 @@ export function TagFieldDisplay({
   field,
   component = ListItem,
   emphasize,
-  showZero = false,
+  showZero = process.env.NODE_ENV === 'development',
 }: {
   field: TagField
   component?: React.ElementType

libs/pando/ui-sheet/src/types/sheet.ts

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react'
 import type { Document } from './document'
 
 export type UISheetElement = {
-  img: string | StaticImageData
+  img?: string | StaticImageData
   title: ReactNode
   subtitle?: ReactNode
   documents: Document[]