From ca6c8ac9b343db5f7ce1d0c5a8517501cf38396f Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Mon, 30 Dec 2024 06:13:10 +0000
Subject: [PATCH 01/32] =?UTF-8?q?=E2=9C=A8=20Add=20task=20table=20tab=20fo?=
 =?UTF-8?q?r=20ABC212=20-=20=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/problems/+page.svelte | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/routes/problems/+page.svelte b/src/routes/problems/+page.svelte
index 499b3b367..9831286b6 100644
--- a/src/routes/problems/+page.svelte
+++ b/src/routes/problems/+page.svelte
@@ -7,6 +7,7 @@
 
   import HeadingOne from '$lib/components/HeadingOne.svelte';
   import TabItemWrapper from '$lib/components/TabItemWrapper.svelte';
+  import TaskTable from '$lib/components/TaskTables/TaskTable.svelte';
   import TaskGradeList from '$lib/components/TaskGradeList.svelte';
   import GradeGuidelineTable from '$lib/components/TaskGrades/GradeGuidelineTable.svelte';
 
@@ -25,8 +26,16 @@
   <!-- See: -->
   <!-- https://flowbite-svelte.com/docs/components/tabs -->
   <Tabs tabStyle="underline" contentClass="bg-white dark:bg-gray-800">
+    <!-- Task table -->
+    <!-- WIP: UIのデザインが試行錯誤の段階であるため、管理者のみ閲覧可能 -->
+    {#if isAdmin}
+      <TabItemWrapper workbookType={null} isOpen={true} title="テーブル">
+        <TaskTable {taskResults} />
+      </TabItemWrapper>
+    {/if}
+
     <!-- Grades -->
-    <TabItemWrapper workbookType={null} isOpen={true} title="グレード">
+    <TabItemWrapper workbookType={null} title="グレード">
       <TaskGradeList {taskResults} {isAdmin} {isLoggedIn}></TaskGradeList>
     </TabItemWrapper>
 
@@ -45,12 +54,5 @@
     <!-- <TabItemWrapper title="Latest">
       <div class="m-4">Comming Soon.</div>
     </TabItemWrapper> -->
-
-    <!-- Table -->
-    <!-- TODO: コンテスト種類をトグルボタンで切り替えられるようにする -->
-    <!-- <TabItemWrapper title="Table"> -->
-    <!-- <TaskTable {taskResults} /> -->
-    <!-- <div class="m-4">Comming Soon.</div>
-    </TabItemWrapper> -->
   </Tabs>
 </div>

From 15f9e7d0bf9bee142bde24bf6d7f602e2b51e364 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Mon, 30 Dec 2024 06:13:49 +0000
Subject: [PATCH 02/32] =?UTF-8?q?=E2=9C=A8=20Select=20ABC212=20-=20tasks?=
 =?UTF-8?q?=20=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TaskTables/TaskTable.svelte    | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/lib/components/TaskTables/TaskTable.svelte

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
new file mode 100644
index 000000000..3fdf1a049
--- /dev/null
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import {
+    ButtonGroup,
+    Button,
+    Table,
+    TableBody,
+    TableBodyCell,
+    TableBodyRow,
+    TableHead,
+    TableHeadCell,
+  } from 'flowbite-svelte';
+
+  import type { TaskResults, TaskResult } from '$lib/types/task';
+  import { ContestType } from '$lib/types/contest';
+  import { classifyContest, getContestNameLabel } from '$lib/utils/contest';
+  import { getTaskTableHeaderName } from '$lib/utils/task';
+  export let taskResults: TaskResults;
+
+  let selectedContestType: ContestType;
+  let selectedTaskResults: TaskResults | null = null;
+  let contestNames: Array<string> | null = null;
+  let headerNames: Array<string> | null = null;
+
+  $: selectedTaskResults = taskResults.filter(fromABC212_Onwards);
+
+  // FIXME: 冗長な記述をリファクタリング
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  const handleClick = (event: any) => {
+    selectedContestType = event.target.value;
+    selectedTaskResults = taskResults.filter(
+      (taskResult: TaskResult) => classifyContest(taskResult.contest_id) === selectedContestType,
+    );
+
+    const contestList = selectedTaskResults.map((taskResult: TaskResult) => taskResult.contest_id);
+    contestNames = Array.from(new Set(contestList)).sort().reverse();
+
+    const headerList = selectedTaskResults.map((taskResult: TaskResult) =>
+      getTaskTableHeaderName(selectedContestType, taskResult),
+    );
+
+    headerNames = Array.from(new Set(headerList)).sort();
+  };
+
+  function filterByContestType(condition: (taskResult: TaskResult) => boolean): void {
+    selectedTaskResults = taskResults.filter(condition);
+  }
+
+  // Note:
+  // Before and from ABC212 onwards, the number and tendency of tasks are very different.
+  const fromABC212_Onwards = (taskResult: TaskResult) =>
+    classifyContest(taskResult.contest_id) === ContestType.ABC && taskResult.contest_id >= 'abc212';
+</script>
+
+<!-- TODO: ボタンの並び順を決める -->
+<!-- See: -->
+<!-- https://flowbite-svelte.com/docs/components/button-group -->
+<ButtonGroup class="m-4 contents-center">
+  <Button on:click={() => filterByContestType(fromABC212_Onwards)}>ABC212〜</Button>
+</ButtonGroup>
+
+<!-- TODO: 該当する問題をテーブル形式で表示する -->
+<h2 class="dark:text-gray-100">AtCoder Beginners Contest</h2>
+
+{#if selectedTaskResults !== null && selectedTaskResults.length}
+  <p>問題数: {selectedTaskResults.length}</p>
+{/if}
+
+<!-- TODO: ABC212〜、〜ABC211で分離 -->
+<!-- FIXME: nullの状態のときは表示しないようにする -->
+<Table shadow hoverable={true}>
+  <TableHead>
+    <TableHeadCell>Contest</TableHeadCell>
+    {#if headerNames !== null && headerNames.length}
+      {#each headerNames as headerName}
+        <TableHeadCell>{headerName}</TableHeadCell>
+      {/each}
+    {/if}
+  </TableHead>
+  <TableBody tableBodyClass="divede-y">
+    {#if contestNames !== null && contestNames.length}
+      <!-- HACK: for ABC only. -->
+      {#if selectedContestType === ContestType.ABC}
+        {#each contestNames as contestName}
+          <TableBodyRow>
+            <TableBodyCell>{getContestNameLabel(contestName)}</TableBodyCell>
+          </TableBodyRow>
+        {/each}
+      {/if}
+    {/if}
+  </TableBody>
+</Table>

From abd8767f6c15fd80d18c4c59b4f9ada354db3eca Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Mon, 30 Dec 2024 06:44:38 +0000
Subject: [PATCH 03/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Rename=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TaskTables/TaskTable.svelte    | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 3fdf1a049..da6cd8182 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -21,28 +21,29 @@
   let contestNames: Array<string> | null = null;
   let headerNames: Array<string> | null = null;
 
-  $: selectedTaskResults = taskResults.filter(fromABC212_Onwards);
+  $: selectedTaskResults = filterTaskResultsByContestType(fromABC212_Onwards);
+  $: contestNames = getContestNames(selectedTaskResults);
+  $: headerNames = getTaskIndices(selectedTaskResults, ContestType.ABC);
 
-  // FIXME: 冗長な記述をリファクタリング
-  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-  const handleClick = (event: any) => {
-    selectedContestType = event.target.value;
-    selectedTaskResults = taskResults.filter(
-      (taskResult: TaskResult) => classifyContest(taskResult.contest_id) === selectedContestType,
-    );
+  function filterTaskResultsByContestType(
+    condition: (taskResult: TaskResult) => boolean,
+  ): TaskResults {
+    return taskResults.filter(condition);
+  }
 
+  function getContestNames(selectedTaskResults: TaskResults): Array<string> {
     const contestList = selectedTaskResults.map((taskResult: TaskResult) => taskResult.contest_id);
-    contestNames = Array.from(new Set(contestList)).sort().reverse();
+    return Array.from(new Set(contestList)).sort().reverse();
+  }
 
+  function getTaskIndices(
+    selectedTaskResults: TaskResults,
+    selectedContestType: ContestType,
+  ): Array<string> {
     const headerList = selectedTaskResults.map((taskResult: TaskResult) =>
       getTaskTableHeaderName(selectedContestType, taskResult),
     );
-
-    headerNames = Array.from(new Set(headerList)).sort();
-  };
-
-  function filterByContestType(condition: (taskResult: TaskResult) => boolean): void {
-    selectedTaskResults = taskResults.filter(condition);
+    return Array.from(new Set(headerList)).sort();
   }
 
   // Note:
@@ -55,7 +56,7 @@
 <!-- See: -->
 <!-- https://flowbite-svelte.com/docs/components/button-group -->
 <ButtonGroup class="m-4 contents-center">
-  <Button on:click={() => filterByContestType(fromABC212_Onwards)}>ABC212〜</Button>
+  <Button on:click={() => filterTaskResultsByContestType(fromABC212_Onwards)}>ABC212〜</Button>
 </ButtonGroup>
 
 <!-- TODO: 該当する問題をテーブル形式で表示する -->

From 4416a23050312e99f2b911e50bd42dcaece83417 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Mon, 30 Dec 2024 06:48:16 +0000
Subject: [PATCH 04/32] :bug: Fix conflict (#1611)

---
 .../components/TaskTables/TaskTable.svelte    | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index da6cd8182..6d67af3e6 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -16,10 +16,9 @@
   import { getTaskTableHeaderName } from '$lib/utils/task';
   export let taskResults: TaskResults;
 
-  let selectedContestType: ContestType;
-  let selectedTaskResults: TaskResults | null = null;
-  let contestNames: Array<string> | null = null;
-  let headerNames: Array<string> | null = null;
+  let selectedTaskResults: TaskResults;
+  let contestNames: Array<string>;
+  let headerNames: Array<string>;
 
   $: selectedTaskResults = filterTaskResultsByContestType(fromABC212_Onwards);
   $: contestNames = getContestNames(selectedTaskResults);
@@ -52,41 +51,36 @@
     classifyContest(taskResult.contest_id) === ContestType.ABC && taskResult.contest_id >= 'abc212';
 </script>
 
-<!-- TODO: ボタンの並び順を決める -->
+<!-- TODO: コンテスト種別のボタンの並び順を決める -->
 <!-- See: -->
 <!-- https://flowbite-svelte.com/docs/components/button-group -->
 <ButtonGroup class="m-4 contents-center">
   <Button on:click={() => filterTaskResultsByContestType(fromABC212_Onwards)}>ABC212〜</Button>
 </ButtonGroup>
 
-<!-- TODO: 該当する問題をテーブル形式で表示する -->
+<!-- TODO: コンテスト種別に応じて変更できるようにする -->
 <h2 class="dark:text-gray-100">AtCoder Beginners Contest</h2>
 
-{#if selectedTaskResults !== null && selectedTaskResults.length}
+{#if selectedTaskResults.length}
   <p>問題数: {selectedTaskResults.length}</p>
 {/if}
 
-<!-- TODO: ABC212〜、〜ABC211で分離 -->
-<!-- FIXME: nullの状態のときは表示しないようにする -->
 <Table shadow hoverable={true}>
   <TableHead>
     <TableHeadCell>Contest</TableHeadCell>
-    {#if headerNames !== null && headerNames.length}
+    {#if headerNames.length}
       {#each headerNames as headerName}
         <TableHeadCell>{headerName}</TableHeadCell>
       {/each}
     {/if}
   </TableHead>
   <TableBody tableBodyClass="divede-y">
-    {#if contestNames !== null && contestNames.length}
-      <!-- HACK: for ABC only. -->
-      {#if selectedContestType === ContestType.ABC}
-        {#each contestNames as contestName}
-          <TableBodyRow>
-            <TableBodyCell>{getContestNameLabel(contestName)}</TableBodyCell>
-          </TableBodyRow>
-        {/each}
-      {/if}
+    {#if contestNames.length}
+      {#each contestNames as contestName}
+        <TableBodyRow>
+          <TableBodyCell>{getContestNameLabel(contestName)}</TableBodyCell>
+        </TableBodyRow>
+      {/each}
     {/if}
   </TableBody>
 </Table>

From 630892e5627ce19c3187c36f76cb2127d709f292 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Mon, 30 Dec 2024 11:45:35 +0000
Subject: [PATCH 05/32] :books: Add future tasks to comment (#1611)

---
 src/lib/components/TaskTables/TaskTable.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 6d67af3e6..c622bf6da 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -30,6 +30,7 @@
     return taskResults.filter(condition);
   }
 
+  // TODO: 任意のコンテスト種別に拡張
   function getContestNames(selectedTaskResults: TaskResults): Array<string> {
     const contestList = selectedTaskResults.map((taskResult: TaskResult) => taskResult.contest_id);
     return Array.from(new Set(contestList)).sort().reverse();

From 04f6fe70c415271a545037a018e376a17b433ffc Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Mon, 30 Dec 2024 11:46:32 +0000
Subject: [PATCH 06/32] :books: Add future tasks to comment (#1611)

---
 src/lib/components/TaskTables/TaskTable.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index c622bf6da..26e396eab 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -66,6 +66,7 @@
   <p>問題数: {selectedTaskResults.length}</p>
 {/if}
 
+<!-- TODO: ページネーションを実装 -->
 <Table shadow hoverable={true}>
   <TableHead>
     <TableHeadCell>Contest</TableHeadCell>

From 013db189314a5153e446d1e145999f449f748ed6 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Mon, 30 Dec 2024 12:39:32 +0000
Subject: [PATCH 07/32] =?UTF-8?q?=E2=9C=A8=20Show=20task=20title=20in=20ta?=
 =?UTF-8?q?sk=20table=20=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TaskTables/TaskTable.svelte    | 81 ++++++++++++++-----
 1 file changed, 59 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 26e396eab..d93c09325 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -11,18 +11,23 @@
   } from 'flowbite-svelte';
 
   import type { TaskResults, TaskResult } from '$lib/types/task';
+
   import { ContestType } from '$lib/types/contest';
   import { classifyContest, getContestNameLabel } from '$lib/utils/contest';
   import { getTaskTableHeaderName } from '$lib/utils/task';
+
   export let taskResults: TaskResults;
 
   let selectedTaskResults: TaskResults;
-  let contestNames: Array<string>;
-  let headerNames: Array<string>;
+  let contestIds: Array<string>;
+  let taskTableIndices: Array<string>;
+  let taskTable: Record<string, Record<string, TaskResult>>;
 
+  // TODO: 任意のコンテスト種別に拡張
   $: selectedTaskResults = filterTaskResultsByContestType(fromABC212_Onwards);
-  $: contestNames = getContestNames(selectedTaskResults);
-  $: headerNames = getTaskIndices(selectedTaskResults, ContestType.ABC);
+  $: contestIds = getContestIds(selectedTaskResults);
+  $: taskTableIndices = getTaskTableIndices(selectedTaskResults, ContestType.ABC);
+  $: taskTable = prepareTaskTable(selectedTaskResults, ContestType.ABC);
 
   function filterTaskResultsByContestType(
     condition: (taskResult: TaskResult) => boolean,
@@ -30,13 +35,17 @@
     return taskResults.filter(condition);
   }
 
-  // TODO: 任意のコンテスト種別に拡張
-  function getContestNames(selectedTaskResults: TaskResults): Array<string> {
+  // Note:
+  // Before and from ABC212 onwards, the number and tendency of tasks are very different.
+  const fromABC212_Onwards = (taskResult: TaskResult) =>
+    classifyContest(taskResult.contest_id) === ContestType.ABC && taskResult.contest_id >= 'abc212';
+
+  function getContestIds(selectedTaskResults: TaskResults): Array<string> {
     const contestList = selectedTaskResults.map((taskResult: TaskResult) => taskResult.contest_id);
     return Array.from(new Set(contestList)).sort().reverse();
   }
 
-  function getTaskIndices(
+  function getTaskTableIndices(
     selectedTaskResults: TaskResults,
     selectedContestType: ContestType,
   ): Array<string> {
@@ -46,10 +55,25 @@
     return Array.from(new Set(headerList)).sort();
   }
 
-  // Note:
-  // Before and from ABC212 onwards, the number and tendency of tasks are very different.
-  const fromABC212_Onwards = (taskResult: TaskResult) =>
-    classifyContest(taskResult.contest_id) === ContestType.ABC && taskResult.contest_id >= 'abc212';
+  function prepareTaskTable(
+    selectedTaskResults: TaskResults,
+    selectedContestType: ContestType,
+  ): Record<string, Record<string, TaskResult>> {
+    const table: Record<string, Record<string, TaskResult>> = {};
+
+    selectedTaskResults.forEach((taskResult: TaskResult) => {
+      const contestId = taskResult.contest_id;
+      const taskTableIndex = getTaskTableHeaderName(selectedContestType, taskResult);
+
+      if (!table[contestId]) {
+        table[contestId] = {};
+      }
+
+      table[contestId][taskTableIndex] = taskResult;
+    });
+
+    return table;
+  }
 </script>
 
 <!-- TODO: コンテスト種別のボタンの並び順を決める -->
@@ -62,25 +86,38 @@
 <!-- TODO: コンテスト種別に応じて変更できるようにする -->
 <h2 class="dark:text-gray-100">AtCoder Beginners Contest</h2>
 
-{#if selectedTaskResults.length}
-  <p>問題数: {selectedTaskResults.length}</p>
-{/if}
-
 <!-- TODO: ページネーションを実装 -->
-<Table shadow hoverable={true}>
+<Table shadow>
   <TableHead>
-    <TableHeadCell>Contest</TableHeadCell>
-    {#if headerNames.length}
-      {#each headerNames as headerName}
-        <TableHeadCell>{headerName}</TableHeadCell>
+    <TableHeadCell>Round</TableHeadCell>
+
+    {#if taskTableIndices.length}
+      {#each taskTableIndices as taskIndex}
+        <TableHeadCell>{taskIndex}</TableHeadCell>
       {/each}
     {/if}
   </TableHead>
+
   <TableBody tableBodyClass="divede-y">
-    {#if contestNames.length}
-      {#each contestNames as contestName}
+    {#if contestIds.length && taskTableIndices.length}
+      {#each contestIds as contestName}
         <TableBodyRow>
           <TableBodyCell>{getContestNameLabel(contestName)}</TableBodyCell>
+
+          {#each taskTableIndices as taskIndex}
+            <TableBodyCell>
+              {#if taskTable[contestName][taskIndex]}
+                {taskTable[contestName][taskIndex].title}
+                <!-- <a
+                  href={`https://atcoder.jp/contests/${contestName}/tasks/${taskIndex}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {contestIdAndTaskIndexTable[contestName][taskIndex].task_name}
+                </a> -->
+              {/if}
+            </TableBodyCell>
+          {/each}
         </TableBodyRow>
       {/each}
     {/if}

From 9f14afe3dd5a8b9568b40ab85187a3442cd1b2bd Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Mon, 30 Dec 2024 13:14:54 +0000
Subject: [PATCH 08/32] :art: Show external links and add styles (#1611)

---
 .../components/TaskTables/TaskTable.svelte    | 88 ++++++++++---------
 1 file changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index d93c09325..99413eda6 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import {
+    Heading,
     ButtonGroup,
     Button,
     Table,
@@ -11,10 +12,12 @@
   } from 'flowbite-svelte';
 
   import type { TaskResults, TaskResult } from '$lib/types/task';
-
   import { ContestType } from '$lib/types/contest';
+
+  import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
+
   import { classifyContest, getContestNameLabel } from '$lib/utils/contest';
-  import { getTaskTableHeaderName } from '$lib/utils/task';
+  import { getTaskTableHeaderName, getTaskUrl, removeTaskIndexFromTitle } from '$lib/utils/task';
 
   export let taskResults: TaskResults;
 
@@ -83,43 +86,48 @@
   <Button on:click={() => filterTaskResultsByContestType(fromABC212_Onwards)}>ABC212〜</Button>
 </ButtonGroup>
 
-<!-- TODO: コンテスト種別に応じて変更できるようにする -->
-<h2 class="dark:text-gray-100">AtCoder Beginners Contest</h2>
+<!-- TODO: コンテスト種別に応じて動的に変更できるようにする -->
+<Heading tag="h2" class="text-2xl pb-3 text-gray-900 dark:text-white">
+  {'AtCoder Beginners Contest'}
+</Heading>
 
 <!-- TODO: ページネーションを実装 -->
-<Table shadow>
-  <TableHead>
-    <TableHeadCell>Round</TableHeadCell>
-
-    {#if taskTableIndices.length}
-      {#each taskTableIndices as taskIndex}
-        <TableHeadCell>{taskIndex}</TableHeadCell>
-      {/each}
-    {/if}
-  </TableHead>
-
-  <TableBody tableBodyClass="divede-y">
-    {#if contestIds.length && taskTableIndices.length}
-      {#each contestIds as contestName}
-        <TableBodyRow>
-          <TableBodyCell>{getContestNameLabel(contestName)}</TableBodyCell>
-
-          {#each taskTableIndices as taskIndex}
-            <TableBodyCell>
-              {#if taskTable[contestName][taskIndex]}
-                {taskTable[contestName][taskIndex].title}
-                <!-- <a
-                  href={`https://atcoder.jp/contests/${contestName}/tasks/${taskIndex}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {contestIdAndTaskIndexTable[contestName][taskIndex].task_name}
-                </a> -->
-              {/if}
-            </TableBodyCell>
-          {/each}
-        </TableBodyRow>
-      {/each}
-    {/if}
-  </TableBody>
-</Table>
+<div class="overflow-auto rounded-md border">
+  <Table shadow class="text-md">
+    <TableHead class="text-sm bg-gray-100">
+      <TableHeadCell>Round</TableHeadCell>
+
+      {#if taskTableIndices.length}
+        {#each taskTableIndices as taskIndex}
+          <TableHeadCell>{taskIndex}</TableHeadCell>
+        {/each}
+      {/if}
+    </TableHead>
+
+    <TableBody tableBodyClass="divede-y">
+      {#if contestIds.length && taskTableIndices.length}
+        {#each contestIds as contestId}
+          <TableBodyRow>
+            <TableBodyCell>{getContestNameLabel(contestId)}</TableBodyCell>
+
+            {#each taskTableIndices as taskIndex}
+              <TableBodyCell>
+                {#if taskTable[contestId][taskIndex]}
+                  <ExternalLinkWrapper
+                    url={getTaskUrl(contestId, taskTable[contestId][taskIndex].task_id)}
+                    description={removeTaskIndexFromTitle(
+                      taskTable[contestId][taskIndex].title,
+                      taskTable[contestId][taskIndex].task_table_index,
+                    )}
+                    textSize="xs:text-md"
+                    textColorInDarkMode="dark:text-gray-300"
+                  />
+                {/if}
+              </TableBodyCell>
+            {/each}
+          </TableBodyRow>
+        {/each}
+      {/if}
+    </TableBody>
+  </Table>
+</div>

From 2063e7716023156e0baaf271845a3e21c6ec96b5 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Mon, 30 Dec 2024 14:00:47 +0000
Subject: [PATCH 09/32] :art: Add components and styles (#1611)

---
 .../components/TaskTables/TaskTable.svelte    | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 99413eda6..51cea213b 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -15,6 +15,7 @@
   import { ContestType } from '$lib/types/contest';
 
   import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
+  import GradeLabel from '$lib/components/GradeLabel.svelte';
 
   import { classifyContest, getContestNameLabel } from '$lib/utils/contest';
   import { getTaskTableHeaderName, getTaskUrl, removeTaskIndexFromTitle } from '$lib/utils/task';
@@ -95,11 +96,11 @@
 <div class="overflow-auto rounded-md border">
   <Table shadow class="text-md">
     <TableHead class="text-sm bg-gray-100">
-      <TableHeadCell>Round</TableHeadCell>
+      <TableHeadCell class="text-center border-r">Round</TableHeadCell>
 
       {#if taskTableIndices.length}
-        {#each taskTableIndices as taskIndex}
-          <TableHeadCell>{taskIndex}</TableHeadCell>
+        {#each taskTableIndices as taskTableIndex}
+          <TableHeadCell class="text-center border-r">{taskTableIndex}</TableHeadCell>
         {/each}
       {/if}
     </TableHead>
@@ -108,20 +109,28 @@
       {#if contestIds.length && taskTableIndices.length}
         {#each contestIds as contestId}
           <TableBodyRow>
-            <TableBodyCell>{getContestNameLabel(contestId)}</TableBodyCell>
+            <TableBodyCell class="px-3 py-2 text-center border-r">
+              {getContestNameLabel(contestId)}
+            </TableBodyCell>
 
             {#each taskTableIndices as taskIndex}
-              <TableBodyCell>
+              <TableBodyCell class="px-2 py-2 border-r">
                 {#if taskTable[contestId][taskIndex]}
-                  <ExternalLinkWrapper
-                    url={getTaskUrl(contestId, taskTable[contestId][taskIndex].task_id)}
-                    description={removeTaskIndexFromTitle(
-                      taskTable[contestId][taskIndex].title,
-                      taskTable[contestId][taskIndex].task_table_index,
-                    )}
-                    textSize="xs:text-md"
-                    textColorInDarkMode="dark:text-gray-300"
-                  />
+                  <!-- TODO: コンポーネントとして切り出す -->
+                  <div class="w-28 truncate">
+                    <ExternalLinkWrapper
+                      url={getTaskUrl(contestId, taskTable[contestId][taskIndex].task_id)}
+                      description={removeTaskIndexFromTitle(
+                        taskTable[contestId][taskIndex].title,
+                        taskTable[contestId][taskIndex].task_table_index,
+                      )}
+                      textSize="xs:text-md"
+                      textColorInDarkMode="dark:text-gray-300"
+                    />
+                  </div>
+                  <GradeLabel taskGrade={taskTable[contestId][taskIndex].grade} />
+                  {'更新'}
+                  {'詳細'}
                 {/if}
               </TableBodyCell>
             {/each}

From 9403c08e3cc4ce5585f6ecbbda5c557a58cf61c8 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Tue, 31 Dec 2024 09:16:36 +0000
Subject: [PATCH 10/32] =?UTF-8?q?=E2=9C=A8=20Add=20textOverflow=20and=20ic?=
 =?UTF-8?q?onSize=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/ExternalLinkWrapper.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ExternalLinkWrapper.svelte b/src/lib/components/ExternalLinkWrapper.svelte
index 13bb32e8e..7edc80cf4 100644
--- a/src/lib/components/ExternalLinkWrapper.svelte
+++ b/src/lib/components/ExternalLinkWrapper.svelte
@@ -5,6 +5,8 @@
   export let description: string;
   export let textSize: string = '';
   export let textColorInDarkMode = 'dark:text-primary-500';
+  export let textOverflow = '';
+  export let iconSize = 4;
 </script>
 
 <a
@@ -13,10 +15,12 @@
   target="_blank"
   rel="noreferrer"
 >
-  {description}
+  <div class="{textOverflow} truncate">
+    {description}
+  </div>
 
   <div class="ml-1.5">
-    <ExternalLinkIcon size="w-4 h-4" />
+    <ExternalLinkIcon size="w-{iconSize} h-{iconSize}" />
   </div>
 </a>
 

From dec29c51acb558c82189509c5f4d68e8b4a7d381 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Tue, 31 Dec 2024 09:17:06 +0000
Subject: [PATCH 11/32] :art: Add and update styles (#1611)

---
 .../components/TaskTables/TaskTable.svelte    | 56 ++++++++++++-------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 51cea213b..6cb17b820 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -89,18 +89,21 @@
 
 <!-- TODO: コンテスト種別に応じて動的に変更できるようにする -->
 <Heading tag="h2" class="text-2xl pb-3 text-gray-900 dark:text-white">
-  {'AtCoder Beginners Contest'}
+  {'AtCoder Beginners Contest 212 〜'}
 </Heading>
 
 <!-- TODO: ページネーションを実装 -->
-<div class="overflow-auto rounded-md border">
-  <Table shadow class="text-md">
+<!-- See: -->
+<!-- https://github.com/kenkoooo/AtCoderProblems/blob/master/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx -->
+<!-- https://github.com/birdou/atcoder-blogs/blob/main/app/atcoder-blogs-frontend/src/pages/BlogTablePage/BlogTablePage.tsx -->
+<div class="container w-full overflow-auto rounded-md">
+  <Table shadow id="task-table" class="text-md table-fixed" aria-label="Task table">
     <TableHead class="text-sm bg-gray-100">
-      <TableHeadCell class="text-center border-r">Round</TableHeadCell>
+      <TableHeadCell class="w-16 px-2 text-center border">Round</TableHeadCell>
 
       {#if taskTableIndices.length}
         {#each taskTableIndices as taskTableIndex}
-          <TableHeadCell class="text-center border-r">{taskTableIndex}</TableHeadCell>
+          <TableHeadCell class="text-center border">{taskTableIndex}</TableHeadCell>
         {/each}
       {/if}
     </TableHead>
@@ -109,28 +112,39 @@
       {#if contestIds.length && taskTableIndices.length}
         {#each contestIds as contestId}
           <TableBodyRow>
-            <TableBodyCell class="px-3 py-2 text-center border-r">
-              {getContestNameLabel(contestId)}
+            <TableBodyCell class="w-16 truncate px-2 py-2 text-center border">
+              <!-- FIXME: コンテスト種別に合わせて修正できるようにする -->
+              {getContestNameLabel(contestId).replace('ABC ', '')}
             </TableBodyCell>
 
             {#each taskTableIndices as taskIndex}
-              <TableBodyCell class="px-2 py-2 border-r">
+              <TableBodyCell class="px-2 py-2 border">
                 {#if taskTable[contestId][taskIndex]}
                   <!-- TODO: コンポーネントとして切り出す -->
-                  <div class="w-28 truncate">
-                    <ExternalLinkWrapper
-                      url={getTaskUrl(contestId, taskTable[contestId][taskIndex].task_id)}
-                      description={removeTaskIndexFromTitle(
-                        taskTable[contestId][taskIndex].title,
-                        taskTable[contestId][taskIndex].task_table_index,
-                      )}
-                      textSize="xs:text-md"
-                      textColorInDarkMode="dark:text-gray-300"
-                    />
+                  <ExternalLinkWrapper
+                    url={getTaskUrl(contestId, taskTable[contestId][taskIndex].task_id)}
+                    description={removeTaskIndexFromTitle(
+                      taskTable[contestId][taskIndex].title,
+                      taskTable[contestId][taskIndex].task_table_index,
+                    )}
+                    textSize="xs:text-md"
+                    textColorInDarkMode="dark:text-gray-300"
+                    textOverflow="min-w-[60px] max-w-[132px]"
+                    iconSize={0}
+                  />
+
+                  <div class="flex items-center justify-center space-x-3 py-0.5">
+                    <GradeLabel taskGrade={taskTable[contestId][taskIndex].grade} />
+                  </div>
+
+                  <div class="place-items-center">
+                    <div>
+                      {'更新'}
+                    </div>
+                    <div>
+                      {'詳細'}
+                    </div>
                   </div>
-                  <GradeLabel taskGrade={taskTable[contestId][taskIndex].grade} />
-                  {'更新'}
-                  {'詳細'}
                 {/if}
               </TableBodyCell>
             {/each}

From fd9d7f0fa520fb76fd1389364af5ada97a35d7a4 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Tue, 31 Dec 2024 11:25:47 +0000
Subject: [PATCH 12/32] :art: Enable to hide icon (#1611)

---
 .../components/SubmissionStatus/SubmissionStatusImage.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte b/src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte
index c3ad796e4..4190cd5ba 100644
--- a/src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte
+++ b/src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte
@@ -5,6 +5,7 @@
 
   import type { TaskResult } from '$lib/types/task';
 
+  export let isHideImage: boolean = false;
   export let taskResult: TaskResult;
   export let isLoggedIn: boolean;
 
@@ -17,7 +18,9 @@
   }
 </script>
 
-<Img src={imagePath} alt={imageAlt} class="h-7 xs:h-8 w-7 xs:w-8" />
+{#if !isHideImage}
+  <Img src={imagePath} alt={imageAlt} class="h-7 xs:h-8 w-7 xs:w-8" />
+{/if}
 
 {#if isLoggedIn}
   <div class="flex flex-col items-center ml-2 md:ml-4 text-xs">

From 2f366090530a4aaa9bc9190ff9c43a0677c12936 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Tue, 31 Dec 2024 11:26:44 +0000
Subject: [PATCH 13/32] :art: Add submission status icon and colors (#1611)

---
 .../components/TaskTables/TaskTable.svelte    | 27 ++++++++++++++++---
 src/routes/problems/+page.svelte              |  2 +-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 6cb17b820..ac050bf0d 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -16,11 +16,14 @@
 
   import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
   import GradeLabel from '$lib/components/GradeLabel.svelte';
+  import SubmissionStatusImage from '$lib/components/SubmissionStatus/SubmissionStatusImage.svelte';
 
   import { classifyContest, getContestNameLabel } from '$lib/utils/contest';
   import { getTaskTableHeaderName, getTaskUrl, removeTaskIndexFromTitle } from '$lib/utils/task';
+  import { getBackgroundColorFrom } from '$lib/services/submission_status';
 
   export let taskResults: TaskResults;
+  export let isLoggedIn: boolean;
 
   let selectedTaskResults: TaskResults;
   let contestIds: Array<string>;
@@ -78,6 +81,16 @@
 
     return table;
   }
+
+  function getBackgroundColor(taskResult: TaskResult): string {
+    const statusName = taskResult?.status_name;
+
+    if (taskResult && statusName !== 'ns') {
+      return getBackgroundColorFrom(statusName);
+    }
+
+    return '';
+  }
 </script>
 
 <!-- TODO: コンテスト種別のボタンの並び順を決める -->
@@ -96,7 +109,7 @@
 <!-- See: -->
 <!-- https://github.com/kenkoooo/AtCoderProblems/blob/master/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx -->
 <!-- https://github.com/birdou/atcoder-blogs/blob/main/app/atcoder-blogs-frontend/src/pages/BlogTablePage/BlogTablePage.tsx -->
-<div class="container w-full overflow-auto rounded-md">
+<div class="container w-full overflow-auto border rounded-md">
   <Table shadow id="task-table" class="text-md table-fixed" aria-label="Task table">
     <TableHead class="text-sm bg-gray-100">
       <TableHeadCell class="w-16 px-2 text-center border">Round</TableHeadCell>
@@ -118,9 +131,12 @@
             </TableBodyCell>
 
             {#each taskTableIndices as taskIndex}
-              <TableBodyCell class="px-2 py-2 border">
+              <TableBodyCell
+                class="px-2 py-2 border {getBackgroundColor(taskTable[contestId][taskIndex])}"
+              >
                 {#if taskTable[contestId][taskIndex]}
                   <!-- TODO: コンポーネントとして切り出す -->
+                  <!-- Task name and URL -->
                   <ExternalLinkWrapper
                     url={getTaskUrl(contestId, taskTable[contestId][taskIndex].task_id)}
                     description={removeTaskIndexFromTitle(
@@ -133,13 +149,18 @@
                     iconSize={0}
                   />
 
+                  <!-- Grade -->
                   <div class="flex items-center justify-center space-x-3 py-0.5">
                     <GradeLabel taskGrade={taskTable[contestId][taskIndex].grade} />
                   </div>
 
                   <div class="place-items-center">
                     <div>
-                      {'更新'}
+                      <SubmissionStatusImage
+                        isHideImage={true}
+                        taskResult={taskTable[contestId][taskIndex]}
+                        {isLoggedIn}
+                      />
                     </div>
                     <div>
                       {'詳細'}
diff --git a/src/routes/problems/+page.svelte b/src/routes/problems/+page.svelte
index 9831286b6..65e4fe22b 100644
--- a/src/routes/problems/+page.svelte
+++ b/src/routes/problems/+page.svelte
@@ -30,7 +30,7 @@
     <!-- WIP: UIのデザインが試行錯誤の段階であるため、管理者のみ閲覧可能 -->
     {#if isAdmin}
       <TabItemWrapper workbookType={null} isOpen={true} title="テーブル">
-        <TaskTable {taskResults} />
+        <TaskTable {taskResults} {isLoggedIn} />
       </TabItemWrapper>
     {/if}
 

From a7218b9c0cf562d437d3f699a0b88c31d0bfce63 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Tue, 31 Dec 2024 11:27:45 +0000
Subject: [PATCH 14/32] =?UTF-8?q?=E2=9C=A8=20Add=20helper=20method=20(#161?=
 =?UTF-8?q?1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/utils/task.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/lib/utils/task.ts b/src/lib/utils/task.ts
index 758fd5900..362649649 100644
--- a/src/lib/utils/task.ts
+++ b/src/lib/utils/task.ts
@@ -1,4 +1,5 @@
 import type { UrlGenerator, UrlGenerators } from '$lib/types/url';
+import { ContestType } from '$lib/types/contest';
 import { type TaskResult, type TaskResults, TaskGrade, type TaskGrades } from '$lib/types/task';
 import { type WorkBookTaskBase } from '$lib/types/workbook';
 import { ATCODER_BASE_CONTEST_URL, AOJ_TASKS_URL } from '$lib/constants/urls';
@@ -92,6 +93,18 @@ export function compareByContestIdAndTaskId(first: TaskResult, second: TaskResul
   return first.task_table_index.localeCompare(second.task_table_index);
 }
 
+// See:
+// https://github.com/kenkoooo/AtCoderProblems/blob/master/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx
+export const getTaskTableHeaderName = (contestType: ContestType, taskResult: TaskResult) => {
+  if (contestType === ContestType.ABC && taskResult.task_table_index === 'H') {
+    return 'H/Ex';
+  } else if (taskResult.task_table_index === 'Ex') {
+    return 'H/Ex';
+  }
+
+  return taskResult.task_table_index;
+};
+
 // 問題一覧や問題集の詳細ページでは、AtCoder ProblemsのAPIから取得したタイトルからプレフィックス（A., B., ..., G. など）を非表示にする
 // 理由: 問題を解くときに、プレフィックスからの先入観を受けないようにするため
 // その他: プレフィックスは、同じテーブルの出典に記載する

From 2969d7564d90921ff8f88d4fda3309c849ae24ef Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Tue, 31 Dec 2024 11:46:23 +0000
Subject: [PATCH 15/32] :art: Add and update styles (#1611)

---
 src/lib/components/TaskTables/TaskTable.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index ac050bf0d..1f6df3f10 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -132,7 +132,9 @@
 
             {#each taskTableIndices as taskIndex}
               <TableBodyCell
-                class="px-2 py-2 border {getBackgroundColor(taskTable[contestId][taskIndex])}"
+                class="px-2 py-2 text-center border {getBackgroundColor(
+                  taskTable[contestId][taskIndex],
+                )}"
               >
                 {#if taskTable[contestId][taskIndex]}
                   <!-- TODO: コンポーネントとして切り出す -->
@@ -150,11 +152,12 @@
                   />
 
                   <!-- Grade -->
-                  <div class="flex items-center justify-center space-x-3 py-0.5">
+                  <div class="flex items-center justify-center space-x-3 py-2">
                     <GradeLabel taskGrade={taskTable[contestId][taskIndex].grade} />
                   </div>
 
-                  <div class="place-items-center">
+                  <!-- Submission updater and links of task detail page -->
+                  <div class="flex justify-between space-x-3">
                     <div>
                       <SubmissionStatusImage
                         isHideImage={true}
@@ -162,7 +165,7 @@
                         {isLoggedIn}
                       />
                     </div>
-                    <div>
+                    <div class="flex items-center justify-center text-sm">
                       {'詳細'}
                     </div>
                   </div>

From f654aea80e49f12025597511dcafdc5c8466cc1b Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Wed, 1 Jan 2025 12:28:48 +0000
Subject: [PATCH 16/32] :art: Fix title position and size (#1611)

---
 .../components/TaskTables/TaskTable.svelte    | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 1f6df3f10..f31979e71 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -132,24 +132,24 @@
 
             {#each taskTableIndices as taskIndex}
               <TableBodyCell
-                class="px-2 py-2 text-center border {getBackgroundColor(
-                  taskTable[contestId][taskIndex],
-                )}"
+                class="px-2 py-2 border {getBackgroundColor(taskTable[contestId][taskIndex])}"
               >
                 {#if taskTable[contestId][taskIndex]}
                   <!-- TODO: コンポーネントとして切り出す -->
                   <!-- Task name and URL -->
-                  <ExternalLinkWrapper
-                    url={getTaskUrl(contestId, taskTable[contestId][taskIndex].task_id)}
-                    description={removeTaskIndexFromTitle(
-                      taskTable[contestId][taskIndex].title,
-                      taskTable[contestId][taskIndex].task_table_index,
-                    )}
-                    textSize="xs:text-md"
-                    textColorInDarkMode="dark:text-gray-300"
-                    textOverflow="min-w-[60px] max-w-[132px]"
-                    iconSize={0}
-                  />
+                  <div class="text-left text-lg">
+                    <ExternalLinkWrapper
+                      url={getTaskUrl(contestId, taskTable[contestId][taskIndex].task_id)}
+                      description={removeTaskIndexFromTitle(
+                        taskTable[contestId][taskIndex].title,
+                        taskTable[contestId][taskIndex].task_table_index,
+                      )}
+                      textSize="xs:text-md"
+                      textColorInDarkMode="dark:text-gray-300"
+                      textOverflow="min-w-[60px] max-w-[132px]"
+                      iconSize={0}
+                    />
+                  </div>
 
                   <!-- Grade -->
                   <div class="flex items-center justify-center space-x-3 py-2">

From 026409abacbc90c3c92c8235556b4e5fbf32591d Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Wed, 1 Jan 2025 12:52:06 +0000
Subject: [PATCH 17/32] :art: Fix icon size (#1611)

---
 src/lib/components/GradeLabel.svelte           | 4 +++-
 src/lib/components/TaskTables/TaskTable.svelte | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/GradeLabel.svelte b/src/lib/components/GradeLabel.svelte
index 9d0e6be27..4de0d01e6 100644
--- a/src/lib/components/GradeLabel.svelte
+++ b/src/lib/components/GradeLabel.svelte
@@ -3,6 +3,8 @@
   import { TaskGrade } from '$lib/types/task';
 
   export let taskGrade: TaskGrade | string;
+  export let defaultPadding: number = 1;
+  export let defaultWidth: number = 10;
 
   $: grade = getTaskGradeLabel(taskGrade);
   $: gradeColor = getTaskGradeColor(taskGrade);
@@ -10,7 +12,7 @@
 
 <div class="rounded-lg border-2 border-white">
   <div
-    class="p-1 w-8 xs:w-10 text-sm xs:text-md text-center rounded-md {toWhiteTextIfNeeds(
+    class="p-{defaultPadding} w-8 xs:w-{defaultWidth} text-sm xs:text-md text-center rounded-md {toWhiteTextIfNeeds(
       grade,
     )} {gradeColor}"
   >
diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index f31979e71..c87bd78bb 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -153,7 +153,11 @@
 
                   <!-- Grade -->
                   <div class="flex items-center justify-center space-x-3 py-2">
-                    <GradeLabel taskGrade={taskTable[contestId][taskIndex].grade} />
+                    <GradeLabel
+                      taskGrade={taskTable[contestId][taskIndex].grade}
+                      defaultPadding={0.5}
+                      defaultWidth={8}
+                    />
                   </div>
 
                   <!-- Submission updater and links of task detail page -->

From 4f96b9dbf116a6e95768f23bfa2f4f28c02c1693 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Wed, 1 Jan 2025 13:15:11 +0000
Subject: [PATCH 18/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Split=20image=20and?=
 =?UTF-8?q?=20text=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SubmissionStatus/IconForUpdating.svelte    | 18 ++++++++++++++++++
 .../SubmissionStatusImage.svelte               |  5 +----
 src/lib/components/TaskTables/TaskTable.svelte |  8 ++------
 3 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/components/SubmissionStatus/IconForUpdating.svelte

diff --git a/src/lib/components/SubmissionStatus/IconForUpdating.svelte b/src/lib/components/SubmissionStatus/IconForUpdating.svelte
new file mode 100644
index 000000000..62bef1cb9
--- /dev/null
+++ b/src/lib/components/SubmissionStatus/IconForUpdating.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  // @ts-ignore
+  import ChevronDownOutline from 'flowbite-svelte-icons/ChevronDownOutline.svelte';
+
+  export let isLoggedIn: boolean;
+</script>
+
+<!-- HACK: 以下のコンポーネントと類似しているが、差分が大きいため別コンポーネントとして用意 -->
+<!-- src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte -->
+{#if isLoggedIn}
+  <div class="flex items-center text-sm">
+    <div class="dark:text-gray-300">
+      {'更新'}
+    </div>
+
+    <ChevronDownOutline class="w-5 h-5 text-primary-600 dark:text-gray-300 inline" />
+  </div>
+{/if}
diff --git a/src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte b/src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte
index 4190cd5ba..c3ad796e4 100644
--- a/src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte
+++ b/src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte
@@ -5,7 +5,6 @@
 
   import type { TaskResult } from '$lib/types/task';
 
-  export let isHideImage: boolean = false;
   export let taskResult: TaskResult;
   export let isLoggedIn: boolean;
 
@@ -18,9 +17,7 @@
   }
 </script>
 
-{#if !isHideImage}
-  <Img src={imagePath} alt={imageAlt} class="h-7 xs:h-8 w-7 xs:w-8" />
-{/if}
+<Img src={imagePath} alt={imageAlt} class="h-7 xs:h-8 w-7 xs:w-8" />
 
 {#if isLoggedIn}
   <div class="flex flex-col items-center ml-2 md:ml-4 text-xs">
diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index c87bd78bb..ac1a53a68 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -16,7 +16,7 @@
 
   import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
   import GradeLabel from '$lib/components/GradeLabel.svelte';
-  import SubmissionStatusImage from '$lib/components/SubmissionStatus/SubmissionStatusImage.svelte';
+  import IconForUpdating from '$lib/components/SubmissionStatus/IconForUpdating.svelte';
 
   import { classifyContest, getContestNameLabel } from '$lib/utils/contest';
   import { getTaskTableHeaderName, getTaskUrl, removeTaskIndexFromTitle } from '$lib/utils/task';
@@ -163,11 +163,7 @@
                   <!-- Submission updater and links of task detail page -->
                   <div class="flex justify-between space-x-3">
                     <div>
-                      <SubmissionStatusImage
-                        isHideImage={true}
-                        taskResult={taskTable[contestId][taskIndex]}
-                        {isLoggedIn}
-                      />
+                      <IconForUpdating {isLoggedIn} />
                     </div>
                     <div class="flex items-center justify-center text-sm">
                       {'詳細'}

From 47aff4b5e01c8e8030d142f6c91260237adb9cdf Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Wed, 1 Jan 2025 13:48:13 +0000
Subject: [PATCH 19/32] :art: Fix layout (#1611)

---
 .../components/SubmissionStatus/IconForUpdating.svelte |  2 +-
 src/lib/components/TaskTables/TaskTable.svelte         | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/SubmissionStatus/IconForUpdating.svelte b/src/lib/components/SubmissionStatus/IconForUpdating.svelte
index 62bef1cb9..6b9af9aa9 100644
--- a/src/lib/components/SubmissionStatus/IconForUpdating.svelte
+++ b/src/lib/components/SubmissionStatus/IconForUpdating.svelte
@@ -8,7 +8,7 @@
 <!-- HACK: 以下のコンポーネントと類似しているが、差分が大きいため別コンポーネントとして用意 -->
 <!-- src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte -->
 {#if isLoggedIn}
-  <div class="flex items-center text-sm">
+  <div class="flex items-center justify-center text-sm">
     <div class="dark:text-gray-300">
       {'更新'}
     </div>
diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index ac1a53a68..651be6ceb 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -152,7 +152,7 @@
                   </div>
 
                   <!-- Grade -->
-                  <div class="flex items-center justify-center space-x-3 py-2">
+                  <div class="flex items-center justify-center py-2">
                     <GradeLabel
                       taskGrade={taskTable[contestId][taskIndex].grade}
                       defaultPadding={0.5}
@@ -161,11 +161,13 @@
                   </div>
 
                   <!-- Submission updater and links of task detail page -->
-                  <div class="flex justify-between space-x-3">
-                    <div>
+                  <div class="flex items-center justify-between">
+                    <div class="flex-1 text-center">
                       <IconForUpdating {isLoggedIn} />
                     </div>
-                    <div class="flex items-center justify-center text-sm">
+
+                    <!-- TODO: Add link of detailed page. -->
+                    <div class="flex-1 text-center text-sm">
                       {'詳細'}
                     </div>
                   </div>

From 6923c6755f56a6933c18ebbfaf1a9ba127bcdd71 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Wed, 1 Jan 2025 14:26:26 +0000
Subject: [PATCH 20/32] =?UTF-8?q?=E2=9C=A8=20Enable=20to=20update=20submis?=
 =?UTF-8?q?sion=20status=20from=20task=20table=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TaskTables/TaskTable.svelte    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 651be6ceb..22b028a66 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -16,6 +16,7 @@
 
   import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
   import GradeLabel from '$lib/components/GradeLabel.svelte';
+  import UpdatingModal from '$lib/components/SubmissionStatus/UpdatingModal.svelte';
   import IconForUpdating from '$lib/components/SubmissionStatus/IconForUpdating.svelte';
 
   import { classifyContest, getContestNameLabel } from '$lib/utils/contest';
@@ -29,14 +30,16 @@
   let contestIds: Array<string>;
   let taskTableIndices: Array<string>;
   let taskTable: Record<string, Record<string, TaskResult>>;
+  let updatingModal: UpdatingModal;
 
   // TODO: 任意のコンテスト種別に拡張
-  $: selectedTaskResults = filterTaskResultsByContestType(fromABC212_Onwards);
+  $: selectedTaskResults = filterTaskResultsByContestType(taskResults, fromABC212_Onwards);
   $: contestIds = getContestIds(selectedTaskResults);
   $: taskTableIndices = getTaskTableIndices(selectedTaskResults, ContestType.ABC);
   $: taskTable = prepareTaskTable(selectedTaskResults, ContestType.ABC);
 
   function filterTaskResultsByContestType(
+    taskResults: TaskResults,
     condition: (taskResult: TaskResult) => boolean,
   ): TaskResults {
     return taskResults.filter(condition);
@@ -97,7 +100,9 @@
 <!-- See: -->
 <!-- https://flowbite-svelte.com/docs/components/button-group -->
 <ButtonGroup class="m-4 contents-center">
-  <Button on:click={() => filterTaskResultsByContestType(fromABC212_Onwards)}>ABC212〜</Button>
+  <Button on:click={() => filterTaskResultsByContestType(taskResults, fromABC212_Onwards)}>
+    ABC212〜
+  </Button>
 </ButtonGroup>
 
 <!-- TODO: コンテスト種別に応じて動的に変更できるようにする -->
@@ -162,9 +167,14 @@
 
                   <!-- Submission updater and links of task detail page -->
                   <div class="flex items-center justify-between">
-                    <div class="flex-1 text-center">
+                    <button
+                      type="button"
+                      class="flex-1 text-center"
+                      on:click={() => updatingModal.openModal(taskTable[contestId][taskIndex])}
+                      aria-label="Update submission"
+                    >
                       <IconForUpdating {isLoggedIn} />
-                    </div>
+                    </button>
 
                     <!-- TODO: Add link of detailed page. -->
                     <div class="flex-1 text-center text-sm">
@@ -180,3 +190,5 @@
     </TableBody>
   </Table>
 </div>
+
+<UpdatingModal bind:this={updatingModal} {isLoggedIn} />

From a34c7d59e8097012b50d4ec7b4dd0ccc7e9f5fce Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Thu, 2 Jan 2025 02:30:46 +0000
Subject: [PATCH 21/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20component?=
 =?UTF-8?q?=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TaskTables/TaskTable.svelte    | 54 +++----------------
 .../TaskTables/TaskTableBodyCell.svelte       | 48 +++++++++++++++++
 2 files changed, 56 insertions(+), 46 deletions(-)
 create mode 100644 src/lib/components/TaskTables/TaskTableBodyCell.svelte

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 22b028a66..5cae6c5c4 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -14,13 +14,11 @@
   import type { TaskResults, TaskResult } from '$lib/types/task';
   import { ContestType } from '$lib/types/contest';
 
-  import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
-  import GradeLabel from '$lib/components/GradeLabel.svelte';
   import UpdatingModal from '$lib/components/SubmissionStatus/UpdatingModal.svelte';
-  import IconForUpdating from '$lib/components/SubmissionStatus/IconForUpdating.svelte';
+  import TaskTableBodyCell from '$lib/components/TaskTables/TaskTableBodyCell.svelte';
 
   import { classifyContest, getContestNameLabel } from '$lib/utils/contest';
-  import { getTaskTableHeaderName, getTaskUrl, removeTaskIndexFromTitle } from '$lib/utils/task';
+  import { getTaskTableHeaderName } from '$lib/utils/task';
   import { getBackgroundColorFrom } from '$lib/services/submission_status';
 
   export let taskResults: TaskResults;
@@ -126,7 +124,7 @@
       {/if}
     </TableHead>
 
-    <TableBody tableBodyClass="divede-y">
+    <TableBody tableBodyClass="divide-y">
       {#if contestIds.length && taskTableIndices.length}
         {#each contestIds as contestId}
           <TableBodyRow>
@@ -140,47 +138,11 @@
                 class="px-2 py-2 border {getBackgroundColor(taskTable[contestId][taskIndex])}"
               >
                 {#if taskTable[contestId][taskIndex]}
-                  <!-- TODO: コンポーネントとして切り出す -->
-                  <!-- Task name and URL -->
-                  <div class="text-left text-lg">
-                    <ExternalLinkWrapper
-                      url={getTaskUrl(contestId, taskTable[contestId][taskIndex].task_id)}
-                      description={removeTaskIndexFromTitle(
-                        taskTable[contestId][taskIndex].title,
-                        taskTable[contestId][taskIndex].task_table_index,
-                      )}
-                      textSize="xs:text-md"
-                      textColorInDarkMode="dark:text-gray-300"
-                      textOverflow="min-w-[60px] max-w-[132px]"
-                      iconSize={0}
-                    />
-                  </div>
-
-                  <!-- Grade -->
-                  <div class="flex items-center justify-center py-2">
-                    <GradeLabel
-                      taskGrade={taskTable[contestId][taskIndex].grade}
-                      defaultPadding={0.5}
-                      defaultWidth={8}
-                    />
-                  </div>
-
-                  <!-- Submission updater and links of task detail page -->
-                  <div class="flex items-center justify-between">
-                    <button
-                      type="button"
-                      class="flex-1 text-center"
-                      on:click={() => updatingModal.openModal(taskTable[contestId][taskIndex])}
-                      aria-label="Update submission"
-                    >
-                      <IconForUpdating {isLoggedIn} />
-                    </button>
-
-                    <!-- TODO: Add link of detailed page. -->
-                    <div class="flex-1 text-center text-sm">
-                      {'詳細'}
-                    </div>
-                  </div>
+                  <TaskTableBodyCell
+                    taskResult={taskTable[contestId][taskIndex]}
+                    {isLoggedIn}
+                    {updatingModal}
+                  />
                 {/if}
               </TableBodyCell>
             {/each}
diff --git a/src/lib/components/TaskTables/TaskTableBodyCell.svelte b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
new file mode 100644
index 000000000..46535ce5d
--- /dev/null
+++ b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { TaskResult } from '$lib/types/task';
+
+  import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
+  import GradeLabel from '$lib/components/GradeLabel.svelte';
+  import IconForUpdating from '$lib/components/SubmissionStatus/IconForUpdating.svelte';
+  import UpdatingModal from '$lib/components/SubmissionStatus/UpdatingModal.svelte';
+
+  import { getTaskUrl, removeTaskIndexFromTitle } from '$lib/utils/task';
+
+  export let taskResult: TaskResult;
+  export let isLoggedIn: boolean;
+  export let updatingModal: UpdatingModal;
+</script>
+
+<!-- Task title and an external link -->
+<div class="text-left text-lg">
+  <ExternalLinkWrapper
+    url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
+    description={removeTaskIndexFromTitle(taskResult.title, taskResult.task_table_index)}
+    textSize="xs:text-md"
+    textColorInDarkMode="dark:text-gray-300"
+    textOverflow="min-w-[60px] max-w-[132px]"
+    iconSize={0}
+  />
+</div>
+
+<!-- Grade -->
+<div class="flex items-center justify-center py-2">
+  <GradeLabel taskGrade={taskResult.grade} defaultPadding={0.5} defaultWidth={8} />
+</div>
+
+<!-- Submission updater and links of task detail page -->
+<div class="flex items-center justify-between">
+  <button
+    type="button"
+    class="flex-1 text-center"
+    on:click={() => updatingModal.openModal(taskResult)}
+    aria-label="Update submission"
+  >
+    <IconForUpdating {isLoggedIn} />
+  </button>
+
+  <!-- TODO: Add link of detailed page. -->
+  <div class="flex-1 text-center text-sm dark:text-gray-300">
+    {'詳細'}
+  </div>
+</div>

From dd7c19a140fd491c33d3e433aebc9c209908c4f4 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 06:59:35 +0000
Subject: [PATCH 22/32] :art: Improve layout (#1611)

---
 .../SubmissionStatus/IconForUpdating.svelte    |  2 +-
 src/lib/components/TaskTables/TaskTable.svelte | 11 +++++++----
 .../TaskTables/TaskTableBodyCell.svelte        | 18 ++++++++----------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/SubmissionStatus/IconForUpdating.svelte b/src/lib/components/SubmissionStatus/IconForUpdating.svelte
index 6b9af9aa9..352775538 100644
--- a/src/lib/components/SubmissionStatus/IconForUpdating.svelte
+++ b/src/lib/components/SubmissionStatus/IconForUpdating.svelte
@@ -13,6 +13,6 @@
       {'更新'}
     </div>
 
-    <ChevronDownOutline class="w-5 h-5 text-primary-600 dark:text-gray-300 inline" />
+    <ChevronDownOutline class="w-4 h-4 text-primary-600 dark:text-gray-300 inline" />
   </div>
 {/if}
diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 5cae6c5c4..8c31990bf 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -115,7 +115,7 @@
 <div class="container w-full overflow-auto border rounded-md">
   <Table shadow id="task-table" class="text-md table-fixed" aria-label="Task table">
     <TableHead class="text-sm bg-gray-100">
-      <TableHeadCell class="w-16 px-2 text-center border">Round</TableHeadCell>
+      <TableHeadCell class="w-full xl:w-16 px-2 text-center border">Round</TableHeadCell>
 
       {#if taskTableIndices.length}
         {#each taskTableIndices as taskTableIndex}
@@ -127,15 +127,18 @@
     <TableBody tableBodyClass="divide-y">
       {#if contestIds.length && taskTableIndices.length}
         {#each contestIds as contestId}
-          <TableBodyRow>
-            <TableBodyCell class="w-16 truncate px-2 py-2 text-center border">
+          <TableBodyRow class="flex flex-wrap xl:flex-row xl:table-row">
+            <TableBodyCell class="w-full xl:w-16 truncate px-2 py-2 text-center border">
               <!-- FIXME: コンテスト種別に合わせて修正できるようにする -->
               {getContestNameLabel(contestId).replace('ABC ', '')}
             </TableBodyCell>
 
             {#each taskTableIndices as taskIndex}
               <TableBodyCell
-                class="px-2 py-2 border {getBackgroundColor(taskTable[contestId][taskIndex])}"
+                key={contestId + '-' + taskIndex}
+                class="w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1 border {getBackgroundColor(
+                  taskTable[contestId][taskIndex],
+                )}"
               >
                 {#if taskTable[contestId][taskIndex]}
                   <TaskTableBodyCell
diff --git a/src/lib/components/TaskTables/TaskTableBodyCell.svelte b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
index 46535ce5d..53cf1f2de 100644
--- a/src/lib/components/TaskTables/TaskTableBodyCell.svelte
+++ b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
@@ -14,24 +14,22 @@
 </script>
 
 <!-- Task title and an external link -->
-<div class="text-left text-lg">
+<div class="text-left text-md sm:text-lg">
   <ExternalLinkWrapper
     url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
-    description={removeTaskIndexFromTitle(taskResult.title, taskResult.task_table_index)}
+    description={taskResult.title}
     textSize="xs:text-md"
     textColorInDarkMode="dark:text-gray-300"
-    textOverflow="min-w-[60px] max-w-[132px]"
+    textOverflow="min-w-[60px] max-w-[120px]"
     iconSize={0}
   />
 </div>
 
-<!-- Grade -->
-<div class="flex items-center justify-center py-2">
-  <GradeLabel taskGrade={taskResult.grade} defaultPadding={0.5} defaultWidth={8} />
-</div>
+<div class="flex items-center justify-between py-1">
+  <!-- Task grade -->
+  <GradeLabel taskGrade={taskResult.grade} defaultPadding={0.25} defaultWidth={8} />
 
-<!-- Submission updater and links of task detail page -->
-<div class="flex items-center justify-between">
+  <!-- Submission updater and links of task detail page -->
   <button
     type="button"
     class="flex-1 text-center"
@@ -42,7 +40,7 @@
   </button>
 
   <!-- TODO: Add link of detailed page. -->
-  <div class="flex-1 text-center text-sm dark:text-gray-300">
+  <div class="flex-1 text-center text-sm dark:text-gray-300 max-w-[32px]">
     {'詳細'}
   </div>
 </div>

From 0fb55e0b796bec6ba406ef374786282d7f34febe Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 07:02:21 +0000
Subject: [PATCH 23/32] :bug: Fix lint error (#1611)

---
 src/lib/components/TaskTables/TaskTableBodyCell.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/TaskTables/TaskTableBodyCell.svelte b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
index 53cf1f2de..79a2cb83b 100644
--- a/src/lib/components/TaskTables/TaskTableBodyCell.svelte
+++ b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
@@ -6,7 +6,7 @@
   import IconForUpdating from '$lib/components/SubmissionStatus/IconForUpdating.svelte';
   import UpdatingModal from '$lib/components/SubmissionStatus/UpdatingModal.svelte';
 
-  import { getTaskUrl, removeTaskIndexFromTitle } from '$lib/utils/task';
+  import { getTaskUrl } from '$lib/utils/task';
 
   export let taskResult: TaskResult;
   export let isLoggedIn: boolean;

From c05abd8c94becf79b833f3ba8971ab3ee245beb6 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 11:35:22 +0000
Subject: [PATCH 24/32] :art: Improve accessibility (#1611)

---
 src/lib/components/TaskTables/TaskTableBodyCell.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/TaskTables/TaskTableBodyCell.svelte b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
index 79a2cb83b..418023412 100644
--- a/src/lib/components/TaskTables/TaskTableBodyCell.svelte
+++ b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
@@ -34,7 +34,7 @@
     type="button"
     class="flex-1 text-center"
     on:click={() => updatingModal.openModal(taskResult)}
-    aria-label="Update submission"
+    aria-label="Update submission for {taskResult.title}"
   >
     <IconForUpdating {isLoggedIn} />
   </button>

From a40715d35eff97f11a1f610d0f9b0bbd4b1201c9 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 11:35:44 +0000
Subject: [PATCH 25/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20method=20(?=
 =?UTF-8?q?#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/TaskTables/TaskTable.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 8c31990bf..b7ba02f1b 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -92,6 +92,13 @@
 
     return '';
   }
+
+  function getBodyCellClasses(contestId: string, taskIndex: string): string {
+    const baseClasses = 'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1 border';
+    const backgroundColor = getBackgroundColor(taskTable[contestId][taskIndex]);
+
+    return `${baseClasses} ${backgroundColor}`;
+  }
 </script>
 
 <!-- TODO: コンテスト種別のボタンの並び順を決める -->
@@ -127,7 +134,7 @@
     <TableBody tableBodyClass="divide-y">
       {#if contestIds.length && taskTableIndices.length}
         {#each contestIds as contestId}
-          <TableBodyRow class="flex flex-wrap xl:flex-row xl:table-row">
+          <TableBodyRow class="flex flex-wrap xl:table-row">
             <TableBodyCell class="w-full xl:w-16 truncate px-2 py-2 text-center border">
               <!-- FIXME: コンテスト種別に合わせて修正できるようにする -->
               {getContestNameLabel(contestId).replace('ABC ', '')}
@@ -136,9 +143,7 @@
             {#each taskTableIndices as taskIndex}
               <TableBodyCell
                 key={contestId + '-' + taskIndex}
-                class="w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1 border {getBackgroundColor(
-                  taskTable[contestId][taskIndex],
-                )}"
+                class={getBodyCellClasses(contestId, taskIndex)}
               >
                 {#if taskTable[contestId][taskIndex]}
                   <TaskTableBodyCell

From d45bd4d171b8c1984bb8253a616da0d08c0d6b0d Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 11:45:07 +0000
Subject: [PATCH 26/32] :art: Improve styles (#1611)

---
 src/lib/components/TaskTables/TaskTableBodyCell.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/TaskTables/TaskTableBodyCell.svelte b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
index 418023412..830b64f08 100644
--- a/src/lib/components/TaskTables/TaskTableBodyCell.svelte
+++ b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
@@ -32,7 +32,7 @@
   <!-- Submission updater and links of task detail page -->
   <button
     type="button"
-    class="flex-1 text-center"
+    class="mx-2 w-8 text-center"
     on:click={() => updatingModal.openModal(taskResult)}
     aria-label="Update submission for {taskResult.title}"
   >

From a88893a24be17d887910b1b1c3ed5a07c83f2537 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 11:56:56 +0000
Subject: [PATCH 27/32] =?UTF-8?q?=F0=9F=93=96=20Add=20docs=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/TaskTables/TaskTable.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index b7ba02f1b..8d977225d 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -63,6 +63,16 @@
     return Array.from(new Set(headerList)).sort();
   }
 
+  /**
+   * Prepare a table for task and submission statuses.
+   *
+   * Computational complexity of preparation table: O(N), where N is the number of task results.
+   * Computational complexity of accessing table: O(1).
+   *
+   * @param selectedTaskResults Task results to be shown in the table.
+   * @param selectedContestType Contest type of the task results.
+   * @returns A table for task and submission statuses.
+   */
   function prepareTaskTable(
     selectedTaskResults: TaskResults,
     selectedContestType: ContestType,

From 0ea88fb3cd5e2868238d275f1bd1526c54cb9014 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 12:41:02 +0000
Subject: [PATCH 28/32] =?UTF-8?q?=F0=9F=9A=A8=20Add=20tests=20for=20task?=
 =?UTF-8?q?=20table=20header=20name=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/test/lib/utils/task.test.ts               | 142 ++++++++++++++++++
 .../test_cases/task_table_header_name.ts      |  71 +++++++++
 2 files changed, 213 insertions(+)
 create mode 100644 src/test/lib/utils/test_cases/task_table_header_name.ts

diff --git a/src/test/lib/utils/task.test.ts b/src/test/lib/utils/task.test.ts
index d2b6adc51..5e2e46484 100644
--- a/src/test/lib/utils/task.test.ts
+++ b/src/test/lib/utils/task.test.ts
@@ -11,6 +11,7 @@ import {
   threeWorkBookTasks,
   tasksForVerificationOfOrder,
 } from './test_cases/task_results';
+import { taskResultsForTaskTableHeaderName } from './test_cases/task_table_header_name';
 import {
   getTaskUrl,
   countAcceptedTasks,
@@ -18,8 +19,10 @@ import {
   areAllTasksAccepted,
   compareByContestIdAndTaskId,
   removeTaskIndexFromTitle,
+  getTaskTableHeaderName,
 } from '$lib/utils/task';
 import type { WorkBookTaskBase } from '$lib/types/workbook';
+import { ContestType } from '$lib/types/contest';
 import { type TaskResult, type TaskResults } from '$lib/types/task';
 
 type TestCaseForTaskResults = {
@@ -53,6 +56,14 @@ type TestCaseForNewTitle = {
 
 type TestCasesForNewTitle = TestCaseForNewTitle[];
 
+type TestCaseForTaskTableHeaderName = {
+  contestType: ContestType;
+  taskResult: TaskResult;
+  expected: string;
+};
+
+type TestCasesForTaskTableHeaderName = TestCaseForTaskTableHeaderName[];
+
 describe('Task', () => {
   describe('task url', () => {
     describe('when contest ids and task ids for AtCoder are given', () => {
@@ -450,6 +461,137 @@ describe('Task', () => {
     });
   });
 
+  describe('get task table header name', () => {
+    describe('when ABCxxx A, B, F and G are given', () => {
+      const testCases: TestCasesForTaskTableHeaderName = [
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc212_a,
+          expected: 'A',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc212_b,
+          expected: 'B',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc212_f,
+          expected: 'F',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc212_g,
+          expected: 'G',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc233_a,
+          expected: 'A',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc233_b,
+          expected: 'B',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc319_a,
+          expected: 'A',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc319_b,
+          expected: 'B',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc319_f,
+          expected: 'F',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc319_g,
+          expected: 'G',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc386_g,
+          expected: 'G',
+        },
+      ];
+
+      runTests(
+        'getTaskTableHeaderName',
+        testCases,
+        ({ contestType, taskResult, expected }: TestCaseForTaskTableHeaderName) => {
+          expect(getTaskTableHeaderName(contestType, taskResult)).toBe(expected);
+        },
+      );
+    });
+
+    describe('when ABCxxx H are given', () => {
+      const testCases: TestCasesForTaskTableHeaderName = [
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc212_h,
+          expected: 'H/Ex',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc213_h,
+          expected: 'H/Ex',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc232_h,
+          expected: 'H/Ex',
+        },
+      ];
+
+      runTests(
+        'getTaskTableHeaderName',
+        testCases,
+        ({ contestType, taskResult, expected }: TestCaseForTaskTableHeaderName) => {
+          expect(getTaskTableHeaderName(contestType, taskResult)).toBe(expected);
+        },
+      );
+    });
+
+    describe('when ABCxxx Ex are given', () => {
+      const testCases: TestCasesForTaskTableHeaderName = [
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc233_ex,
+          expected: 'H/Ex',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc234_ex,
+          expected: 'H/Ex',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc317_ex,
+          expected: 'H/Ex',
+        },
+        {
+          contestType: ContestType.ABC,
+          taskResult: taskResultsForTaskTableHeaderName.abc318_ex,
+          expected: 'H/Ex',
+        },
+      ];
+
+      runTests(
+        'getTaskTableHeaderName',
+        testCases,
+        ({ contestType, taskResult, expected }: TestCaseForTaskTableHeaderName) => {
+          expect(getTaskTableHeaderName(contestType, taskResult)).toBe(expected);
+        },
+      );
+    });
+  });
+
   describe('remove task index from title', () => {
     describe('when ABC371 is given', () => {
       const testCases: TestCasesForNewTitle = [
diff --git a/src/test/lib/utils/test_cases/task_table_header_name.ts b/src/test/lib/utils/test_cases/task_table_header_name.ts
new file mode 100644
index 000000000..83aa6e214
--- /dev/null
+++ b/src/test/lib/utils/test_cases/task_table_header_name.ts
@@ -0,0 +1,71 @@
+import type { TaskResult } from '$lib/types/task';
+
+// For the default task result, the updated_at field is set to the Unix epoch.
+// why: only use the parameter task_table_index
+const defaultTaskResult: TaskResult = {
+  is_ac: true,
+  user_id: '',
+  status_name: '',
+  status_id: '',
+  submission_status_image_path: '',
+  submission_status_label_name: '',
+  contest_id: '',
+  task_table_index: '',
+  task_id: '',
+  title: '',
+  grade: '',
+  updated_at: new Date(0), // Use the Unix epoch as the default value.
+};
+
+function createTaskResultWithTaskTableIndex(taskId: string, taskTableIndex: string): TaskResult {
+  return {
+    ...defaultTaskResult,
+    task_id: taskId,
+    task_table_index: taskTableIndex,
+  };
+}
+
+// ABC212 - ABC232: 8 tasks (A, B, C, D, E, F, G, H)
+const abc212_a = createTaskResultWithTaskTableIndex('abc212', 'A');
+const abc212_b = createTaskResultWithTaskTableIndex('abc212', 'B');
+const abc212_f = createTaskResultWithTaskTableIndex('abc212', 'F');
+const abc212_g = createTaskResultWithTaskTableIndex('abc212', 'G');
+const abc212_h = createTaskResultWithTaskTableIndex('abc212', 'H');
+const abc213_h = createTaskResultWithTaskTableIndex('abc213', 'H');
+const abc232_h = createTaskResultWithTaskTableIndex('abc232', 'H');
+
+// ABC233 - ABC318: 8 tasks (A, B, C, D, E, F, G, Ex)
+const abc233_a = createTaskResultWithTaskTableIndex('abc233', 'A');
+const abc233_b = createTaskResultWithTaskTableIndex('abc233', 'B');
+const abc233_ex = createTaskResultWithTaskTableIndex('abc233', 'Ex');
+const abc234_ex = createTaskResultWithTaskTableIndex('abc234', 'Ex');
+const abc317_ex = createTaskResultWithTaskTableIndex('abc317', 'Ex');
+const abc318_ex = createTaskResultWithTaskTableIndex('abc318', 'Ex');
+
+// ABC319 - : 7 tasks (A, B, C, D, E, F, G)
+const abc319_a = createTaskResultWithTaskTableIndex('abc319', 'A');
+const abc319_b = createTaskResultWithTaskTableIndex('abc319', 'B');
+const abc319_f = createTaskResultWithTaskTableIndex('abc319', 'F');
+const abc319_g = createTaskResultWithTaskTableIndex('abc319', 'G');
+const abc386_g = createTaskResultWithTaskTableIndex('abc386', 'G');
+
+export const taskResultsForTaskTableHeaderName = {
+  abc212_a,
+  abc212_b,
+  abc212_f,
+  abc212_g,
+  abc212_h,
+  abc213_h,
+  abc232_h,
+  abc233_a,
+  abc233_b,
+  abc233_ex,
+  abc234_ex,
+  abc317_ex,
+  abc318_ex,
+  abc319_a,
+  abc319_b,
+  abc319_f,
+  abc319_g,
+  abc386_g,
+};

From cc8845cdfb8379b715732ae6c679dbcab928085f Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 12:51:24 +0000
Subject: [PATCH 29/32] =?UTF-8?q?=F0=9F=93=96=20Add=20and=20update=20docs?=
 =?UTF-8?q?=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/test/lib/utils/test_cases/task_table_header_name.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/test/lib/utils/test_cases/task_table_header_name.ts b/src/test/lib/utils/test_cases/task_table_header_name.ts
index 83aa6e214..4304834b5 100644
--- a/src/test/lib/utils/test_cases/task_table_header_name.ts
+++ b/src/test/lib/utils/test_cases/task_table_header_name.ts
@@ -17,6 +17,9 @@ const defaultTaskResult: TaskResult = {
   updated_at: new Date(0), // Use the Unix epoch as the default value.
 };
 
+/**
+ * Creates a new TaskResult using defaultTaskResult as a base, overriding the taskId and taskTableIndex.
+ */
 function createTaskResultWithTaskTableIndex(taskId: string, taskTableIndex: string): TaskResult {
   return {
     ...defaultTaskResult,
@@ -25,7 +28,7 @@ function createTaskResultWithTaskTableIndex(taskId: string, taskTableIndex: stri
   };
 }
 
-// ABC212 - ABC232: 8 tasks (A, B, C, D, E, F, G, H)
+// ABC212 - ABC232: 8 tasks (A, B, C, D, E, F, G and H)
 const abc212_a = createTaskResultWithTaskTableIndex('abc212', 'A');
 const abc212_b = createTaskResultWithTaskTableIndex('abc212', 'B');
 const abc212_f = createTaskResultWithTaskTableIndex('abc212', 'F');
@@ -34,7 +37,7 @@ const abc212_h = createTaskResultWithTaskTableIndex('abc212', 'H');
 const abc213_h = createTaskResultWithTaskTableIndex('abc213', 'H');
 const abc232_h = createTaskResultWithTaskTableIndex('abc232', 'H');
 
-// ABC233 - ABC318: 8 tasks (A, B, C, D, E, F, G, Ex)
+// ABC233 - ABC318: 8 tasks (A, B, C, D, E, F, G and Ex)
 const abc233_a = createTaskResultWithTaskTableIndex('abc233', 'A');
 const abc233_b = createTaskResultWithTaskTableIndex('abc233', 'B');
 const abc233_ex = createTaskResultWithTaskTableIndex('abc233', 'Ex');
@@ -42,7 +45,7 @@ const abc234_ex = createTaskResultWithTaskTableIndex('abc234', 'Ex');
 const abc317_ex = createTaskResultWithTaskTableIndex('abc317', 'Ex');
 const abc318_ex = createTaskResultWithTaskTableIndex('abc318', 'Ex');
 
-// ABC319 - : 7 tasks (A, B, C, D, E, F, G)
+// ABC319 - : 7 tasks (A, B, C, D, E, F and G)
 const abc319_a = createTaskResultWithTaskTableIndex('abc319', 'A');
 const abc319_b = createTaskResultWithTaskTableIndex('abc319', 'B');
 const abc319_f = createTaskResultWithTaskTableIndex('abc319', 'F');

From 37c1018479f8c2eed854bdedb1d104e19080b08c Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 13:03:37 +0000
Subject: [PATCH 30/32] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20method=20(?=
 =?UTF-8?q?#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TaskTables/TaskTable.svelte    | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 8d977225d..67660ebcd 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -93,14 +93,17 @@
     return table;
   }
 
-  function getBackgroundColor(taskResult: TaskResult): string {
-    const statusName = taskResult?.status_name;
-
-    if (taskResult && statusName !== 'ns') {
-      return getBackgroundColorFrom(statusName);
+  function getContestNameLabelForTaskTable(contestId: string): string {
+    let contestNameLabel = getContestNameLabel(contestId);
+    const contestType = classifyContest(contestId);
+
+    switch (contestType) {
+      case ContestType.ABC:
+        return contestNameLabel.replace('ABC ', '');
+      // TODO: Add cases for other contest types.
+      default:
+        return contestNameLabel;
     }
-
-    return '';
   }
 
   function getBodyCellClasses(contestId: string, taskIndex: string): string {
@@ -109,6 +112,16 @@
 
     return `${baseClasses} ${backgroundColor}`;
   }
+
+  function getBackgroundColor(taskResult: TaskResult): string {
+    const statusName = taskResult?.status_name;
+
+    if (taskResult && statusName !== 'ns') {
+      return getBackgroundColorFrom(statusName);
+    }
+
+    return '';
+  }
 </script>
 
 <!-- TODO: コンテスト種別のボタンの並び順を決める -->
@@ -126,17 +139,19 @@
 </Heading>
 
 <!-- TODO: ページネーションを実装 -->
+<!-- TODO: ページネーションライブラリを導入するには、Svelte v4 から v5 へのアップデートが必要 -->
 <!-- See: -->
 <!-- https://github.com/kenkoooo/AtCoderProblems/blob/master/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx -->
 <!-- https://github.com/birdou/atcoder-blogs/blob/main/app/atcoder-blogs-frontend/src/pages/BlogTablePage/BlogTablePage.tsx -->
 <div class="container w-full overflow-auto border rounded-md">
   <Table shadow id="task-table" class="text-md table-fixed" aria-label="Task table">
     <TableHead class="text-sm bg-gray-100">
-      <TableHeadCell class="w-full xl:w-16 px-2 text-center border">Round</TableHeadCell>
+      <TableHeadCell class="w-full xl:w-16 px-2 text-center border" scope="col">Round</TableHeadCell
+      >
 
       {#if taskTableIndices.length}
         {#each taskTableIndices as taskTableIndex}
-          <TableHeadCell class="text-center border">{taskTableIndex}</TableHeadCell>
+          <TableHeadCell class="text-center border" scope="col">{taskTableIndex}</TableHeadCell>
         {/each}
       {/if}
     </TableHead>
@@ -147,7 +162,7 @@
           <TableBodyRow class="flex flex-wrap xl:table-row">
             <TableBodyCell class="w-full xl:w-16 truncate px-2 py-2 text-center border">
               <!-- FIXME: コンテスト種別に合わせて修正できるようにする -->
-              {getContestNameLabel(contestId).replace('ABC ', '')}
+              {getContestNameLabelForTaskTable(contestId)}
             </TableBodyCell>
 
             {#each taskTableIndices as taskIndex}

From da519fa3bd926d7adb293ffb6584bf7615e24710 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 13:09:47 +0000
Subject: [PATCH 31/32] =?UTF-8?q?=F0=9F=93=96=20Update=20docs=20(#1611)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/test/lib/utils/test_cases/task_table_header_name.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/test/lib/utils/test_cases/task_table_header_name.ts b/src/test/lib/utils/test_cases/task_table_header_name.ts
index 4304834b5..382de06d3 100644
--- a/src/test/lib/utils/test_cases/task_table_header_name.ts
+++ b/src/test/lib/utils/test_cases/task_table_header_name.ts
@@ -1,7 +1,9 @@
 import type { TaskResult } from '$lib/types/task';
 
-// For the default task result, the updated_at field is set to the Unix epoch.
-// why: only use the parameter task_table_index
+// Default task result with minimal initialization.
+// Most fields are empty strings as they're not relevant for these tests.
+// The updated_at field is set to Unix epoch as we only care about task_table_index
+// and task_id for header name testing.
 const defaultTaskResult: TaskResult = {
   is_ac: true,
   user_id: '',
@@ -19,6 +21,9 @@ const defaultTaskResult: TaskResult = {
 
 /**
  * Creates a new TaskResult using defaultTaskResult as a base, overriding the taskId and taskTableIndex.
+ * @param taskId - The ID of the task (e.g., 'abc212')
+ * @param taskTableIndex - The index of the task in the table (e.g., 'A', 'B', 'Ex')
+ * @returns A new TaskResult object with the specified taskId and taskTableIndex
  */
 function createTaskResultWithTaskTableIndex(taskId: string, taskTableIndex: string): TaskResult {
   return {

From f6f55ba02e0b68fdb1713bb0447b910db8ab3b75 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Fri, 3 Jan 2025 13:11:32 +0000
Subject: [PATCH 32/32] :art: Add accessibility attributes (#1611)

---
 src/lib/components/TaskTables/TaskTable.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 67660ebcd..275430fc6 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -127,8 +127,11 @@
 <!-- TODO: コンテスト種別のボタンの並び順を決める -->
 <!-- See: -->
 <!-- https://flowbite-svelte.com/docs/components/button-group -->
-<ButtonGroup class="m-4 contents-center">
-  <Button on:click={() => filterTaskResultsByContestType(taskResults, fromABC212_Onwards)}>
+<ButtonGroup class="m-4 contents-center" aria-label="Contest filter options">
+  <Button
+    on:click={() => filterTaskResultsByContestType(taskResults, fromABC212_Onwards)}
+    aria-label="Filter contests from ABC212 onwards"
+  >
     ABC212〜
   </Button>
 </ButtonGroup>