Add names characters limit and truncate

apps/frontend/src/app/Components/Character/CharacterEditor/Content.tsx

@@ -4,7 +4,7 @@ import {
   CardThemed,
   SqBadge,
 } from '@genshin-optimizer/common/ui'
-import { objKeyMap } from '@genshin-optimizer/common/util'
+import { objKeyMap, truncateString } from '@genshin-optimizer/common/util'
 import {
   allArtifactSlotKeys,
   charKeyToLocCharKey,
@@ -277,7 +277,7 @@ function InTeam() {
           <CardThemed key={teamCharId} bgt="light">
             <CardContent>
               <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-                <Typography>{name}</Typography>
+                <Typography>{truncateString(name, 100)}</Typography>
                 <BootstrapTooltip
                   title={<Typography>{description}</Typography>}
                 >

apps/frontend/src/app/PageTeam/BuildDropdown.tsx

@@ -1,5 +1,6 @@
 import type { DropdownButtonProps } from '@genshin-optimizer/common/ui'
 import { DropdownButton, SqBadge } from '@genshin-optimizer/common/ui'
+import { truncateString } from '@genshin-optimizer/common/util'
 import type { LoadoutDatum } from '@genshin-optimizer/gi/db'
 import { useDatabase } from '@genshin-optimizer/gi/db-ui'
 import CheckroomIcon from '@mui/icons-material/Checkroom'
@@ -26,7 +27,12 @@ export default function BuildDropdown({
       startIcon={<CheckroomIcon />}
       title={
         <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-          <span>{database.teams.getActiveBuildName(loadoutDatum)}</span>
+          <span>
+            {truncateString(
+              database.teams.getActiveBuildName(loadoutDatum),
+              50
+            )}
+          </span>
           {buildType === 'tc' && <SqBadge color="success">TC</SqBadge>}
         </Box>
       }
@@ -50,7 +56,7 @@ export default function BuildDropdown({
             }
             sx={{ display: 'flex', gap: 1 }}
           >
-            {name}
+            {truncateString(name, 50)}
           </MenuItem>
         )
       })}
@@ -66,7 +72,7 @@ export default function BuildDropdown({
             }
             sx={{ display: 'flex', gap: 1 }}
           >
-            <span>{name}</span>
+            <span>{truncateString(name, 50)}</span>
             <SqBadge color="success">TC</SqBadge>
           </MenuItem>
         )

apps/frontend/src/app/PageTeam/CharacterDisplay/Build/BuildReal.tsx

@@ -263,9 +263,10 @@ function BuildEditor({
         <TextField
           fullWidth
           label="Build Name"
-          placeholder="Build Name"
+          placeholder="Build Name (max 100 characters)"
           value={name}
           onChange={(e) => setName(e.target.value)}
+          inputProps={{ maxLength: 100 }}
         />
         <TextField
           fullWidth

apps/frontend/src/app/PageTeam/CharacterDisplay/Build/BuildTc.tsx

@@ -236,9 +236,10 @@ function BuildTcEditor({
         <TextField
           fullWidth
           label="Build Name"
-          placeholder="Build Name"
+          placeholder="Build Name (max 100 characters)"
           value={name}
           onChange={(e) => setName(e.target.value)}
+          inputProps={{ maxLength: 100 }}
         />
         <TextField
           fullWidth

apps/frontend/src/app/PageTeam/CharacterDisplay/LoadoutSettingElement.tsx

@@ -28,6 +28,7 @@ import { LoadoutDropdown } from '../LoadoutDropdown'
 import { BuildEquipped } from './Build/BuildEquipped'
 import BuildReal from './Build/BuildReal'
 import BuildTc from './Build/BuildTc'
+import { truncateString } from '@genshin-optimizer/common/util'
 // TODO: Translation
 const columns = { xs: 1, sm: 1, md: 2, lg: 2 }
 export default function LoadoutSettingElement() {
@@ -101,13 +102,18 @@ export default function LoadoutSettingElement() {
             onClick={() => setOpen((o) => !o)}
           >
             <Typography sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-              <strong>{teamChar.name}</strong>
+              <strong>{truncateString(teamChar.name, 100)}</strong>
               <SqBadge
                 color="success"
                 sx={{ display: 'flex', gap: 1, alignItems: 'center' }}
               >
                 <CheckroomIcon />
-                <span>{database.teams.getActiveBuildName(loadoutDatum)}</span>
+                <span>
+                  {truncateString(
+                    database.teams.getActiveBuildName(loadoutDatum),
+                    50
+                  )}
+                </span>
               </SqBadge>
               <SqBadge color={buildIds.length ? 'primary' : 'secondary'}>
                 {buildIds.length} Builds
@@ -154,9 +160,10 @@ export default function LoadoutSettingElement() {
             <TextField
               fullWidth
               label="Loadout Name"
-              placeholder="Loadout Name"
+              placeholder="Loadout Name (max 300 characters)"
               value={name}
               onChange={(e) => setName(e.target.value)}
+              inputProps={{ maxLength: 300 }}
             />
             <TextField
               fullWidth

apps/frontend/src/app/PageTeam/LoadoutDropdown.tsx

@@ -6,6 +6,7 @@ import {
   ModalWrapper,
   SqBadge,
 } from '@genshin-optimizer/common/ui'
+import { truncateString } from '@genshin-optimizer/common/util'
 import { useDBMeta, useDatabase } from '@genshin-optimizer/gi/db-ui'
 import { CharacterName } from '@genshin-optimizer/gi/ui'
 import PersonIcon from '@mui/icons-material/Person'
@@ -75,9 +76,10 @@ export function LoadoutDropdown({
             <TextField
               fullWidth
               label="New Loadout Name"
-              placeholder="New Loadout Name"
+              placeholder="New Loadout Name (max 300 characters)"
               value={newName}
               onChange={(e) => setNewName(e.target.value)}
+              inputProps={{ maxLength: 300 }}
             />
             <TextField
               fullWidth
@@ -115,7 +117,7 @@ export function LoadoutDropdown({
               justifyContent: 'center',
             }}
           >
-            <span>{name}</span>
+            <span>{truncateString(name, 100)}</span>
             <SqBadge color={buildIds.length ? 'success' : 'secondary'}>
               {buildIds.length} Builds
             </SqBadge>
@@ -142,7 +144,7 @@ export function LoadoutDropdown({
               onClick={() => onChangeTeamCharId(tcId)}
               sx={{ display: 'flex', gap: 1 }}
             >
-              <span>{name}</span>
+              <span>{truncateString(name, 100)}</span>
               <SqBadge
                 color={buildIds.length ? 'primary' : 'secondary'}
                 sx={{ marginLeft: 'auto' }}

apps/frontend/src/app/PageTeam/TeamSetting/index.tsx

@@ -42,6 +42,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import type { TeamCharacterContextObj } from '../../Context/TeamCharacterContext'
 import { TeamCharacterContext } from '../../Context/TeamCharacterContext'
 import BuildDropdown from '../BuildDropdown'
+import { truncateString } from '@genshin-optimizer/common/util'
 // TODO: Translation
 
 export default function TeamSetting({
@@ -122,7 +123,7 @@ export default function TeamSetting({
           endIcon={<SettingsIcon />}
           onClick={() => setOpen((open) => !open)}
         >
-          <Typography variant="h6">{team.name}</Typography>
+          <Typography variant="h6">{truncateString(team.name, 100)}</Typography>
         </Button>
       </BootstrapTooltip>
 
@@ -154,9 +155,10 @@ export default function TeamSetting({
             <TextField
               fullWidth
               label="Team Name"
-              placeholder="Team Name"
+              placeholder="Team Name (max 300 characters)"
               value={name}
               onChange={(e) => setName(e.target.value)}
+              inputProps={{ maxLength: 300 }}
             />
             <TextField
               fullWidth

apps/frontend/src/app/PageTeams/TeamCard.tsx

@@ -1,5 +1,5 @@
 import { BootstrapTooltip, CardThemed } from '@genshin-optimizer/common/ui'
-import { hexToColor } from '@genshin-optimizer/common/util'
+import { hexToColor, truncateString } from '@genshin-optimizer/common/util'
 import type { CharacterKey, ElementKey } from '@genshin-optimizer/gi/consts'
 import type { ICachedArtifact } from '@genshin-optimizer/gi/db'
 import {
@@ -88,7 +88,7 @@ export default function TeamCard({
       >
         <CardActionArea onClick={() => onClick()} sx={{ p: 1 }}>
           <Typography sx={{ display: 'flex', gap: 1 }}>
-            <span>{name}</span>{' '}
+            <span>{truncateString(name, 100)}</span>{' '}
             <BootstrapTooltip title={<Typography>{description}</Typography>}>
               <InfoIcon />
             </BootstrapTooltip>

libs/common/util/src/lib/string.ts

@@ -36,3 +36,8 @@ export function levenshteinDistance(str1: string, str2: string) {
   }
   return arr[str2.length][str1.length]
 }
+
+// truncate string to a certain length, and add ellipsis if it's longer
+export function truncateString(str: string, length: number) {
+  return str.length > length ? str.slice(0, length) + '...' : str
+}