Add problem title header to ListTable

Author: iilj

src/interfaces/MergedProblem.ts

@@ -43,6 +43,8 @@ export interface MergedProblem extends Problem {
   readonly Difficulty?: Difficulty;
   /** experimental difficulty かどうか */
   readonly Augmented?: boolean;
+  /** コンテスト中の問題インデックス */
+  readonly Index?: number;
 }
 
 /** コンテスト情報，解答状況，およびショートコード情報をマージした問題 */

src/pages/ListPage/ListTable.tsx

@@ -28,6 +28,7 @@ import {
 import { ProblemDetailModal } from '../../components/ProblemDetailModal';
 import { useNavigate } from 'react-router';
 import { useSearchParams } from 'react-router-dom';
+import { getHeader } from '../../utils';
 
 export type FilterState = 'All' | 'Only Trying' | 'Only AC';
 
@@ -115,9 +116,11 @@ export const ListTable: React.FC<Props> = (props) => {
         title: string,
         row: RankingMergedProblem
       ) {
+        const header =
+          row.Index !== undefined ? `${getHeader(row.Index)}. ` : '';
         return (
           <ProblemLink
-            problemTitle={title}
+            problemTitle={`${header}${title}`}
             problemNo={row.No as ProblemNo}
             level={row.Level}
             problemLinkColorMode={problemLinkColorMode}

src/pages/ProblemDetailPage/index.tsx

@@ -26,6 +26,7 @@ import { ContestLink } from '../../components/ContestLink';
 import { ProblemTypeIconSpanWithName } from '../../components/ProblemTypeIcon';
 import { TabbedDifficultyChart } from './TabbedDifficultyChart';
 import { useResetScroll } from '../../utils/UseResetScroll';
+import { getHeader } from '../../utils';
 
 const initialUniversalState = {
   problem: {} as Problem,
@@ -96,6 +97,11 @@ export const ProblemDetailPage: React.FC = () => {
 
   const contestId = problemContestMap.get(problemId);
   const contest = contestId ? contestMap.get(contestId) : undefined;
+  const header = contest
+    ? `${getHeader(
+        contest.ProblemIdList.findIndex((pid) => pid === problem.ProblemId)
+      )}. `
+    : '';
 
   const shortestRankingProblem = golferProblemMap.get(problemId);
   const pureShortestRankingProblem = golferPureProblemMap.get(problemId);
@@ -157,7 +163,7 @@ export const ProblemDetailPage: React.FC = () => {
               <th>Title</th>
               <td>
                 <ProblemLink
-                  problemTitle={problem.Title}
+                  problemTitle={`${header}${problem.Title}`}
                   problemNo={problem.No as ProblemNo}
                   level={problem.Level}
                   problemLinkColorMode={colorMode}

src/utils/MergeProcs.ts

@@ -27,6 +27,13 @@ export const mergeSolveStatus = (
       }),
     new Map<ContestId, ExtendedContest>()
   );
+  const problemIndexMap = contests.reduce((map, contest) => {
+    contest.ProblemIdList.forEach((pid, i) => {
+      if (pid < 0) return;
+      map.set(pid, i);
+    });
+    return map;
+  }, new Map<ProblemId, number>());
   const mergedProblems = problems.map(
     (problem): MergedProblem => {
       const DateNum = Date.parse(problem.Date as string);
@@ -66,6 +73,7 @@ export const mergeSolveStatus = (
           SolveStatus,
           Difficulty,
           Augmented,
+          Index: undefined,
         };
       }
       // assert コンテスト情報あり
@@ -78,6 +86,7 @@ export const mergeSolveStatus = (
           SolveStatus: ProblemSolveStatus.Trying,
           Difficulty,
           Augmented,
+          Index: problemIndexMap.get(problem.ProblemId),
         };
       }
       // assert AC 済み
@@ -102,6 +111,7 @@ export const mergeSolveStatus = (
         SolveStatus,
         Difficulty,
         Augmented,
+        Index: problemIndexMap.get(problem.ProblemId),
       };
     }
   );