Artifact Upgrade Probability Calculator (dev-mode only)

apps/frontend/src/app/Components/AddArtInfo.tsx

@@ -0,0 +1,14 @@
+import { Alert, Link } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+
+export default function AddArtInfo() {
+  return (
+    <Alert severity="info" variant="filled">
+      Looks like you haven't added any artifacts yet. If you want, there are
+      <Link color="warning.main" component={RouterLink} to="/scanner">
+        automatic scanners
+      </Link>
+      that can speed up the import process!
+    </Alert>
+  )
+}

apps/frontend/src/app/Components/NoArtWarning.tsx

@@ -0,0 +1,19 @@
+import { Alert, Link } from '@mui/material'
+import { Trans, useTranslation } from 'react-i18next'
+import { Link as RouterLink } from 'react-router-dom'
+
+export default function NoArtWarning() {
+  const { t } = useTranslation('page_character_optimize')
+  return (
+    <Alert severity="warning" variant="filled">
+      <Trans t={t} i18nKey="noArtis">
+        Oops! It looks like you haven't added any artifacts to GO yet! You
+        should go to the
+        <Link component={RouterLink} to="/artifacts">
+          Artifacts
+        </Link>
+        page and add some!
+      </Trans>
+    </Alert>
+  )
+}

apps/frontend/src/app/PageArtifact/index.tsx

@@ -8,12 +8,10 @@ import { clamp, filterFunction, sortFunction } from '@genshin-optimizer/util'
 import { Add } from '@mui/icons-material'
 import DifferenceIcon from '@mui/icons-material/Difference'
 import {
-  Alert,
   Box,
   Button,
   CardContent,
   Grid,
-  Link,
   Pagination,
   Skeleton,
   Typography,
@@ -30,7 +28,7 @@ import React, {
 } from 'react'
 import ReactGA from 'react-ga4'
 import { Trans, useTranslation } from 'react-i18next'
-import { Link as RouterLink } from 'react-router-dom'
+import AddArtInfo from '../Components/AddArtInfo'
 import SubstatToggle from '../Components/Artifact/SubstatToggle'
 import BootstrapTooltip from '../Components/BootstrapTooltip'
 import CardDark from '../Components/Card/CardDark'
@@ -197,15 +195,7 @@ export default function PageArtifact() {
         <InfoDisplay />
       </InfoComponent>
 
-      {noArtifact && (
-        <Alert severity="info" variant="filled">
-          Looks like you haven't added any artifacts yet. If you want, there are
-          <Link color="warning.main" component={RouterLink} to="/scanner">
-            automatic scanners
-          </Link>
-          that can speed up the import process!
-        </Alert>
-      )}
+      {noArtifact && <AddArtInfo />}
 
       <ArtifactFilter
         numShowing={artifactIds.length}

apps/frontend/src/app/PageCharacter/CharacterDisplay/Tabs/TabOptimize/index.tsx

@@ -13,14 +13,12 @@ import {
 import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive'
 import NotificationsOffIcon from '@mui/icons-material/NotificationsOff'
 import {
-  Alert,
   Box,
   Button,
   ButtonGroup,
   CardContent,
   Divider,
   Grid,
-  Link,
   MenuItem,
   Skeleton,
   ToggleButton,
@@ -37,7 +35,7 @@ import React, {
   useState,
 } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import ArtifactLevelSlider from '../../../../Components/Artifact/ArtifactLevelSlider'
 import BootstrapTooltip from '../../../../Components/BootstrapTooltip'
 import CardLight from '../../../../Components/Card/CardLight'
@@ -48,6 +46,7 @@ import {
   ReactionToggle,
 } from '../../../../Components/HitModeEditor'
 import InfoTooltip from '../../../../Components/InfoTooltip'
+import NoArtWarning from '../../../../Components/NoArtWarning'
 import SolidToggleButtonGroup from '../../../../Components/SolidToggleButtonGroup'
 import SqBadge from '../../../../Components/SqBadge'
 import { CharacterContext } from '../../../../Context/CharacterContext'
@@ -503,18 +502,7 @@ export default function TabBuild() {
   const getNormBuildLabel = useCallback((index: number) => `#${index + 1}`, [])
   return (
     <Box display="flex" flexDirection="column" gap={1}>
-      {noArtifact && (
-        <Alert severity="warning" variant="filled">
-          <Trans t={t} i18nKey="noArtis">
-            Oops! It looks like you haven't added any artifacts to GO yet! You
-            should go to the
-            <Link component={RouterLink} to="/artifacts">
-              Artifacts
-            </Link>
-            page and add some!
-          </Trans>
-        </Alert>
-      )}
+      {noArtifact && <NoArtWarning />}
       {/* Build Generator Editor */}
       {dataContext && (
         <DataContext.Provider value={dataContext}>