Simplify optimization tab

.github/workflows/build-frontend.yml

@@ -21,9 +21,20 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
+      - name: Get Cache Key
+        id: get-cache-key
+        run: |
+          echo "key=$(git ls-tree -r HEAD | grep '^160000' | sha256sum | cut -d " " -f 1)" >> $GITHUB_OUTPUT
+      - uses: actions/cache/restore@v4
+        with:
+          path: .git/modules
+          key: submodule-${{ steps.get-cache-key.outputs.key }}
+          restore-keys: |
+            submodule-
+      - uses: actions/checkout@v4
         with:
+          persist-credentials: false
           submodules: true
       - uses: actions/setup-node@v4
         with:

.github/workflows/build-go-wr-pr.yml

@@ -2,7 +2,6 @@ name: Build GO (WR) PR
 run-name: Build GO (WR) for ${{ github.event.number }} - ${{ github.event.pull_request.title }}
 
 permissions:
-  actions: read
   contents: read
 
 on:

.github/workflows/build-new-release.yml

@@ -0,0 +1,67 @@
+name: Build New Release
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    if: ${{ github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'release') }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+      - name: Get version
+        id: get-version
+        run: |
+          echo "version=$(printf '%s' '${{ github.event.pull_request.title }}' | awk '{print $3}')" >> $GITHUB_OUTPUT
+      - name: Set git config
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+      - name: Get commit msg
+        id: get-commit-msg
+        run: |
+          if [[ -z "${{ steps.get-version.outputs.version }}" ]]; then
+            echo "msg=deploy: $(git rev-parse HEAD)" >> $GITHUB_OUTPUT
+            echo "title-deploy=Deploy ref $(git rev-parse HEAD)" >> $GITHUB_OUTPUT
+          else
+            echo "msg=deploy: version ${{ steps.get-version.outputs.version }} $(git rev-parse HEAD)" >> $GITHUB_OUTPUT
+            echo "title-deploy=Deploy version ${{ steps.get-version.outputs.version }} $(git rev-parse HEAD)" >> $GITHUB_OUTPUT
+          fi
+      - name: Yarn install
+        run: |
+          yarn install --immutable --immutable-cache
+      - name: Setup .env
+        run: |
+          printf '%s' "$ENVFILE" > apps/frontend/.env.local
+        env:
+          ENVFILE: ${{ vars.ENVFILE }}
+      - name: Build genshin-optimizer
+        run: |
+          NX_URL_GITHUB_GO_CURRENT_VERSION="https://github.com/${{ github.repository }}/commit/$(git rev-parse HEAD)" \
+          yarn run nx run frontend:build-vite:production
+      - name: Create Deploy PR
+        run: |
+          git fetch origin gh-pages --depth=1
+          git worktree add ../gh-pages gh-pages --no-checkout
+          cp -rT dist/apps/frontend ../gh-pages
+          cd ../gh-pages
+          git add --all .
+          git commit -m "${{ steps.get-commit-msg.outputs.msg }}"
+          git push origin HEAD:actions/deploy-gh-pages --force
+          gh pr create --base gh-pages --head actions/deploy-gh-pages --title '${{ steps.get-commit-msg.outputs.title-deploy }}' --body ''
+        env:
+          GH_TOKEN: ${{ github.token }}
+      - name: Make release
+        if: steps.get-version.outputs.version != ''
+        run: |
+          gh release create ${{ steps.get-version.outputs.version }} --generate-notes --target $(git rev-parse HEAD)
+        env:
+          GH_TOKEN: ${{ github.token }}

.github/workflows/build-sro-pr.yml

@@ -2,7 +2,6 @@ name: Build SRO PR
 run-name: Build SRO for ${{ github.event.number }} - ${{ github.event.pull_request.title }}
 
 permissions:
-  actions: read
   contents: read
 
 on:

.github/workflows/ci.yml

@@ -1,5 +1,8 @@
 name: CI
 
+permissions:
+  contents: read
+
 on:
   push:
     branches:
@@ -78,8 +81,6 @@ jobs:
     timeout-minutes: 10
     steps:
       - uses: actions/checkout@v4
-        with:
-          persist-credentials: false
       - name: Get Cache Key
         id: get-cache-key
         run: |
@@ -92,8 +93,13 @@ jobs:
             submodule-
       - uses: actions/checkout@v4
         with:
+          ref: ${{ github.sha }} # Force checking of the whole repo when running on pushes to master
           persist-credentials: false
           submodules: true
+      - name: Fetch master
+        if: ${{ github.event_name == 'pull_request' }}
+        run: |
+          git fetch --no-tags --no-recurse-submodules --filter=blob:none origin +master:refs/heads/master
       - name: Sparse Checkout
         run: |
           $(cd libs/gi/dm/GenshinData  && git sparse-checkout set TextMap ExcelBinOutput)
@@ -113,6 +119,17 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
+      - uses: actions/checkout@v4
+      - name: Get Cache Key
+        id: get-cache-key
+        run: |
+          echo "key=$(git ls-tree -r HEAD | grep '^160000' | sha256sum | cut -d " " -f 1)" >> $GITHUB_OUTPUT
+      - uses: actions/cache/restore@v4
+        with:
+          path: .git/modules
+          key: submodule-${{ steps.get-cache-key.outputs.key }}
+          restore-keys: |
+            submodule-
       - uses: actions/checkout@v4
         with:
           persist-credentials: false

.github/workflows/deploy-frontend.yml

@@ -14,7 +14,8 @@ on:
 jobs:
   deploy:
     runs-on: ubuntu-latest
-    timeout-minutes: 15
+    timeout-minutes: 5
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download build artifact
         uses: actions/download-artifact@v4

.github/workflows/new-release.yml

@@ -10,17 +10,11 @@ on:
 jobs:
   deploy:
     runs-on: ubuntu-latest
-    timeout-minutes: 15
+    timeout-minutes: 10
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-        with:
-          submodules: true
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'yarn'
-      - name: Get version # TODO(eeeqeee) add option to increment from current version
+      - name: Get version
         id: get-version
         run: |
           echo "version=${{ inputs.version }}" >> $GITHUB_OUTPUT
@@ -40,38 +34,14 @@ jobs:
         id: get-commit-msg
         run: |
           if [[ -z "${{ steps.get-version.outputs.version }}" ]]; then
-            echo "msg=deploy: $(git rev-parse HEAD)" >> $GITHUB_OUTPUT
+            echo "title-release=Release ref $(git rev-parse HEAD)" >> $GITHUB_OUTPUT
           else
-            echo "msg=deploy: version ${{ steps.get-version.outputs.version }} $(git rev-parse HEAD)" >> $GITHUB_OUTPUT
+            echo "title-release=Release version ${{ steps.get-version.outputs.version }} $(git rev-parse HEAD)" >> $GITHUB_OUTPUT
           fi
-      - name: Yarn install
-        run: |
-          yarn install --immutable --immutable-cache
-      - name: Setup .env
-        run: |
-          printf '%s' "$ENVFILE" > apps/frontend/.env.local
-        env:
-          ENVFILE: ${{ vars.ENVFILE }}
-      - name: Build genshin-optimizer
-        run: |
-          NX_URL_GITHUB_GO_CURRENT_VERSION="https://github.com/${{ github.repository }}/commit/$(git rev-parse HEAD)" \
-          yarn run nx run frontend:build-vite:production
-      - name: Deploy to Github Pages
-        run: |
-          git fetch origin gh-pages --depth=1
-          git worktree add ../gh-pages gh-pages --no-checkout
-          cp -rT dist/apps/frontend ../gh-pages
-          cd ../gh-pages
-          git add --all .
-          git commit -m "${{ steps.get-commit-msg.outputs.msg }}"
-          git push
-      - name: Push
+      - name: Create PR
         run: |
           git status
-          git push
-      - name: Make release
-        if: steps.get-version.outputs.version != ''
-        run: |
-          gh release create ${{ steps.get-version.outputs.version }} --generate-notes --target $(git rev-parse HEAD)
+          git push origin HEAD:actions/new-release --force
+          gh pr create --base $(git rev-parse --abbrev-ref HEAD) --head actions/new-release --title '${{ steps.get-commit-msg.outputs.title-release }}' --body '' --label release
         env:
           GH_TOKEN: ${{ github.token }}

apps/frontend/src/app/App.tsx

@@ -146,7 +146,7 @@ function Content() {
       <Grid item>
         <Header anchor="back-to-top-anchor" />
       </Grid>
-      <Container maxWidth="xl" sx={{ px: { xs: 0.5, sm: 1, md: 2 } }}>
+      <Container maxWidth="xl" sx={{ px: { xs: 0.5, sm: 1 } }}>
         <Suspense
           fallback={
             <Skeleton

apps/frontend/src/app/Components/Artifact/ArtifactSwapModal.tsx

@@ -3,7 +3,8 @@ import {
   useForceUpdate,
   useMediaQueryUp,
 } from '@genshin-optimizer/common/react-util'
-import { clamp, filterFunction } from '@genshin-optimizer/common/util'
+import { useOnScreen } from '@genshin-optimizer/common/ui'
+import { filterFunction } from '@genshin-optimizer/common/util'
 import { imgAssets } from '@genshin-optimizer/gi/assets'
 import type { ArtifactSlotKey } from '@genshin-optimizer/gi/consts'
 import { useDatabase } from '@genshin-optimizer/gi/db-ui'
@@ -24,7 +25,6 @@ import {
   useEffect,
   useMemo,
   useReducer,
-  useRef,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -39,7 +39,7 @@ import CloseButton from '../CloseButton'
 import CompareBuildButton from '../CompareBuildButton'
 import ImgIcon from '../Image/ImgIcon'
 import ModalWrapper from '../ModalWrapper'
-import PageAndSortOptionSelect from '../PageAndSortOptionSelect'
+import ShowingAndSortOptionSelect from '../ShowingAndSortOptionSelect'
 
 const numToShowMap = { xs: 2 * 3, sm: 2 * 3, md: 3 * 3, lg: 4 * 3, xl: 4 * 3 }
 const ArtifactEditor = lazy(() => import('../../PageArtifact/ArtifactEditor'))
@@ -86,53 +86,42 @@ export default function ArtifactSwapModal({
   }, [database, forceUpdate])
 
   const brPt = useMediaQueryUp()
-  const maxNumArtifactsToDisplay = numToShowMap[brPt]
-
-  const [pageIdex, setpageIdex] = useState(0)
-  const invScrollRef = useRef<HTMLDivElement>(null)
 
   const filterConfigs = useMemo(() => artifactFilterConfigs(), [])
   const totalArtNum = database.arts.values.filter(
     (s) => s.slotKey === filterOption.slotKeys[0]
   ).length
-  const artIdList = useMemo(() => {
+
+  const artifactIds = useMemo(() => {
     const filterFunc = filterFunction(filterOption, filterConfigs)
     return (
       dbDirty && database.arts.values.filter(filterFunc).map((art) => art.id)
     )
   }, [dbDirty, database, filterConfigs, filterOption])
 
-  const { artifactIdsToShow, numPages, currentPageIndex } = useMemo(() => {
-    const numPages = Math.ceil(artIdList.length / maxNumArtifactsToDisplay)
-    const currentPageIndex = clamp(pageIdex, 0, numPages - 1)
-    return {
-      artifactIdsToShow: artIdList.slice(
-        currentPageIndex * maxNumArtifactsToDisplay,
-        (currentPageIndex + 1) * maxNumArtifactsToDisplay
-      ),
-      numPages,
-      currentPageIndex,
-    }
-  }, [artIdList, pageIdex, maxNumArtifactsToDisplay])
+  const [numShow, setNumShow] = useState(numToShowMap[brPt])
+  // reset the numShow when artifactIds changes
+  useEffect(() => {
+    artifactIds && setNumShow(numToShowMap[brPt])
+  }, [artifactIds, brPt])
 
-  // for pagination
-  const totalShowing =
-    artIdList.length !== totalArtNum
-      ? `${artIdList.length}/${totalArtNum}`
-      : `${totalArtNum}`
-  const setPage = useCallback(
-    (e, value) => {
-      invScrollRef.current?.scrollIntoView({ behavior: 'smooth' })
-      setpageIdex(value - 1)
-    },
-    [setpageIdex, invScrollRef]
+  const [element, setElement] = useState<HTMLElement | undefined>()
+  const trigger = useOnScreen(element)
+  const shouldIncrease = trigger && numShow < artifactIds.length
+  useEffect(() => {
+    if (!shouldIncrease) return
+    setNumShow((num) => num + numToShowMap[brPt])
+  }, [shouldIncrease, brPt])
+
+  const artifactIdsToShow = useMemo(
+    () => artifactIds.slice(0, numShow),
+    [artifactIds, numShow]
   )
 
-  const paginationProps = {
-    count: numPages,
-    page: currentPageIndex + 1,
-    onChange: setPage,
-  }
+  const totalShowing =
+    artifactIds.length !== totalArtNum
+      ? `${artifactIds.length}/${totalArtNum}`
+      : `${totalArtNum}`
 
   const showingTextProps = {
     numShowing: artifactIdsToShow.length,
@@ -181,7 +170,7 @@ export default function ArtifactSwapModal({
             <ArtifactFilterDisplay
               filterOption={filterOption}
               filterOptionDispatch={filterOptionDispatch}
-              filteredIds={artIdList}
+              filteredIds={artifactIds}
               disableSlotFilter
             />
           </Suspense>
@@ -195,10 +184,7 @@ export default function ArtifactSwapModal({
             alignItems="flex-end"
             flexWrap="wrap"
           >
-            <PageAndSortOptionSelect
-              paginationProps={paginationProps}
-              showingTextProps={showingTextProps}
-            />
+            <ShowingAndSortOptionSelect showingTextProps={showingTextProps} />
           </Box>
           <Button
             fullWidth
@@ -227,19 +213,17 @@ export default function ArtifactSwapModal({
               </Grid>
             </Suspense>
           </Box>
-          {numPages > 1 && (
-            <Box
-              pt={2}
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              flexWrap="wrap"
-            >
-              <PageAndSortOptionSelect
-                paginationProps={paginationProps}
-                showingTextProps={showingTextProps}
-              />
-            </Box>
+          {artifactIds.length !== artifactIdsToShow.length && (
+            <Skeleton
+              ref={(node) => {
+                if (!node) return
+                setElement(node)
+              }}
+              sx={{ borderRadius: 1, mt: 1 }}
+              variant="rectangular"
+              width="100%"
+              height={100}
+            />
           )}
         </CardContent>
       </CardDark>