From dd86f928f005f62c04e1468011d3d2662434eaeb Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Wed, 15 Apr 2026 10:09:36 +0900
Subject: [PATCH 01/14] feat: show relative evaluation badge on confirmed grade
 icons

When a task has a confirmed grade and sufficient votes to compute a
median, display a badge (+, ++, -, --) in the top-right corner of the
grade icon to indicate how the community perceives the difficulty
relative to the official grade.

- Add calcGradeDiff / getRelativeEvaluationLabel utilities with tests
- Render amber badge for harder (+/++) and sky badge for easier (-/--)
- No badge shown for PENDING tasks or when vote count is below threshold

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../votes/components/VotableGrade.svelte      | 29 ++++++++-
 .../votes/utils/relative_evaluation.test.ts   | 64 +++++++++++++++++++
 .../votes/utils/relative_evaluation.ts        | 44 +++++++++++++
 3 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 src/features/votes/utils/relative_evaluation.test.ts
 create mode 100644 src/features/votes/utils/relative_evaluation.ts

diff --git a/src/features/votes/components/VotableGrade.svelte b/src/features/votes/components/VotableGrade.svelte
index 623692cd9..ee28df47e 100644
--- a/src/features/votes/components/VotableGrade.svelte
+++ b/src/features/votes/components/VotableGrade.svelte
@@ -17,6 +17,10 @@
 
   import { getTaskGradeLabel } from '$lib/utils/task';
   import { nonPendingGrades, resolveDisplayGrade } from '$features/votes/utils/grade_options';
+  import {
+    calcGradeDiff,
+    getRelativeEvaluationLabel,
+  } from '$features/votes/utils/relative_evaluation';
   import { SIGNUP_PAGE, LOGIN_PAGE, EDIT_PROFILE_PAGE } from '$lib/constants/navbar-links';
 
   import GradeLabel from '$lib/components/GradeLabel.svelte';
@@ -52,6 +56,14 @@
     taskResult.grade === TaskGrade.PENDING && displayGrade !== TaskGrade.PENDING,
   );
 
+  // Relative evaluation badge: shown only when grade is confirmed and a median vote exists.
+  const relativeEvaluationLabel = $derived.by(() => {
+    if (taskResult.grade === TaskGrade.PENDING || !estimatedGrade) {
+      return '';
+    }
+    return getRelativeEvaluationLabel(calcGradeDiff(taskResult.grade, estimatedGrade));
+  });
+
   let isOpening = $state(false);
   let votedGrade = $state<TaskGrade | null>(null);
   let voteAbortController: AbortController | null = null;
@@ -156,11 +168,26 @@
     onclick={() => onTriggerClick()}
   >
     <span class="sr-only">
-      Voted grade: {getTaskGradeLabel(displayGrade)}{isProvisional ? ', provisional' : ''}
+      Voted grade: {getTaskGradeLabel(displayGrade)}{relativeEvaluationLabel
+        ? `, relative evaluation: ${relativeEvaluationLabel}`
+        : ''}{isProvisional ? ', provisional' : ''}
     </span>
 
     <GradeLabel taskGrade={displayGrade} defaultPadding={0.25} defaultWidth={6} reducedWidth={6} />
 
+    {#if relativeEvaluationLabel}
+      {@const isHarder = relativeEvaluationLabel.startsWith('+')}
+      <span
+        aria-hidden="true"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.6rem] font-bold leading-none shadow-sm
+          {isHarder
+          ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/60 dark:text-orange-300'
+          : 'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-300'}"
+      >
+        {relativeEvaluationLabel}
+      </span>
+    {/if}
+
     <!-- Overlay -->
     <span
       aria-hidden="true"
diff --git a/src/features/votes/utils/relative_evaluation.test.ts b/src/features/votes/utils/relative_evaluation.test.ts
new file mode 100644
index 000000000..823f1a4b5
--- /dev/null
+++ b/src/features/votes/utils/relative_evaluation.test.ts
@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import { TaskGrade } from '$lib/types/task';
+import { calcGradeDiff, getRelativeEvaluationLabel } from './relative_evaluation';
+
+describe('calcGradeDiff', () => {
+  it('returns 0 when confirmed and median are the same grade', () => {
+    expect(calcGradeDiff(TaskGrade.Q5, TaskGrade.Q5)).toBe(0);
+  });
+
+  it('returns positive when median is harder than confirmed', () => {
+    // Q5(order 6) vs D1(order 12): diff = 12 - 6 = 6
+    expect(calcGradeDiff(TaskGrade.Q5, TaskGrade.D1)).toBeGreaterThan(0);
+  });
+
+  it('returns negative when median is easier than confirmed', () => {
+    // D1(order 12) vs Q5(order 6): diff = 6 - 12 = -6
+    expect(calcGradeDiff(TaskGrade.D1, TaskGrade.Q5)).toBeLessThan(0);
+  });
+
+  it('returns 1 for adjacent grade upward (Q3 -> Q2)', () => {
+    expect(calcGradeDiff(TaskGrade.Q3, TaskGrade.Q2)).toBe(1);
+  });
+
+  it('returns -1 for adjacent grade downward (Q2 -> Q3)', () => {
+    expect(calcGradeDiff(TaskGrade.Q2, TaskGrade.Q3)).toBe(-1);
+  });
+
+  it('returns 2 for two-step grade upward (Q3 -> Q1)', () => {
+    expect(calcGradeDiff(TaskGrade.Q3, TaskGrade.Q1)).toBe(2);
+  });
+
+  it('handles boundary grades Q11 and D6', () => {
+    // D6(17) - Q11(1) = 16
+    expect(calcGradeDiff(TaskGrade.Q11, TaskGrade.D6)).toBe(16);
+    // Q11(1) - D6(17) = -16
+    expect(calcGradeDiff(TaskGrade.D6, TaskGrade.Q11)).toBe(-16);
+  });
+});
+
+describe('getRelativeEvaluationLabel', () => {
+  it('returns "++" for diff >= 2', () => {
+    expect(getRelativeEvaluationLabel(2)).toBe('++');
+    expect(getRelativeEvaluationLabel(5)).toBe('++');
+    expect(getRelativeEvaluationLabel(16)).toBe('++');
+  });
+
+  it('returns "+" for diff === 1', () => {
+    expect(getRelativeEvaluationLabel(1)).toBe('+');
+  });
+
+  it('returns "" for diff === 0', () => {
+    expect(getRelativeEvaluationLabel(0)).toBe('');
+  });
+
+  it('returns "-" for diff === -1', () => {
+    expect(getRelativeEvaluationLabel(-1)).toBe('-');
+  });
+
+  it('returns "--" for diff <= -2', () => {
+    expect(getRelativeEvaluationLabel(-2)).toBe('--');
+    expect(getRelativeEvaluationLabel(-5)).toBe('--');
+    expect(getRelativeEvaluationLabel(-16)).toBe('--');
+  });
+});
diff --git a/src/features/votes/utils/relative_evaluation.ts b/src/features/votes/utils/relative_evaluation.ts
new file mode 100644
index 000000000..3001a1767
--- /dev/null
+++ b/src/features/votes/utils/relative_evaluation.ts
@@ -0,0 +1,44 @@
+import type { TaskGrade } from '$lib/types/task';
+import { getGradeOrder } from '$lib/utils/task';
+
+/**
+ * Computes the difference in grade order between the median vote and the confirmed grade.
+ * Positive means users consider the problem harder than confirmed; negative means easier.
+ *
+ * @param confirmedGrade - The officially confirmed grade stored in the DB.
+ * @param medianGrade - The median grade derived from user votes.
+ * @returns `gradeOrder(medianGrade) - gradeOrder(confirmedGrade)`
+ */
+export function calcGradeDiff(confirmedGrade: TaskGrade, medianGrade: TaskGrade): number {
+  return getGradeOrder(medianGrade) - getGradeOrder(confirmedGrade);
+}
+
+/**
+ * Converts a grade difference to a 5-level relative evaluation label.
+ *
+ * | diff   | label |
+ * | ------ | ----- |
+ * | ≤ −2   | `--`  |
+ * | −1     | `-`   |
+ * |  0     | `""`  |
+ * | +1     | `+`   |
+ * | ≥ +2   | `++`  |
+ *
+ * @param diff - The result of {@link calcGradeDiff}.
+ * @returns The display label string.
+ */
+export function getRelativeEvaluationLabel(diff: number): string {
+  if (diff <= -2) {
+    return '--';
+  }
+  if (diff === -1) {
+    return '-';
+  }
+  if (diff === 0) {
+    return '';
+  }
+  if (diff === 1) {
+    return '+';
+  }
+  return '++';
+}

From 6042e960cca37f1e162c22e722391cb6aa3effa7 Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Wed, 15 Apr 2026 10:18:24 +0900
Subject: [PATCH 02/14] docs: clarify diff direction and fix branch name typo
 in plan.md

- Document that diff = gradeOrder(median) - gradeOrder(confirmed),
  positive means harder than confirmed
- Note that badge is hidden when votes are below MIN_VOTES_FOR_STATISTICS
- Fix typo: evalution -> evaluation in branch name

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../relative_evalution_voting/plan.md         | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 docs/dev-notes/2026-04-15/relative_evalution_voting/plan.md

diff --git a/docs/dev-notes/2026-04-15/relative_evalution_voting/plan.md b/docs/dev-notes/2026-04-15/relative_evalution_voting/plan.md
new file mode 100644
index 000000000..c0ea85f22
--- /dev/null
+++ b/docs/dev-notes/2026-04-15/relative_evalution_voting/plan.md
@@ -0,0 +1,30 @@
+# 概要
+このタスクでは、投票（相対評価）の実装を行う。
+相対評価とは、既にグレードが確定している問題に対してもユーザーの投票が反映される仕組みである。
+
+# 仕組み
+まず、ユーザーが投票したグレードから中央値を取得する。この処理はすでに実装済みである。
+
+そして、中央値グレードと確定しているグレードの差を求める。
+差は `gradeOrder(中央値) − gradeOrder(確定グレード)` で計算する（Q11=1, ..., D6=17）。
+正値はユーザーが確定グレードより難しいと感じていることを意味し、負値は簡単と感じていることを意味する。
+
+投票数が最小閾値（`MIN_VOTES_FOR_STATISTICS`）未満の場合は中央値が算出されないため、バッジは表示しない。
+
+差に応じて、以下のように5段階評価を行う。
+
+- 差が-2以下: --
+- 差が-1: -
+- 差が0: 何もなし（バッジ非表示）
+- 差が1: +
+- 差が2以上: ++
+
+グレードが未定のものに対しては、これまでと同様絶対評価を行う。
+
+# UI
+グレードが確定している問題のグレードアイコンの右上に「++」、「+」、「何もなし」、「-」、「--」の5段階評価を表示することで、確定したグレードからの体感難易度の乖離を表す。
+
+投票の際のUIは既存のものから変更しない。
+
+# 作業ブランチ
+`feature/relative_evaluation_voting`

From a1568f3f6968da589df4ece10013973476ad84bc Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 09:59:20 +0900
Subject: [PATCH 03/14] fix: address PR #3416 review feedback for relative
 evaluation voting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add RelativeEvaluationBadge component with tooltip explaining ++/+/-/-- meaning
- Show badge on /votes list, /votes/[slug] detail, and /vote_management admin pages
- Fix stale badge on confirmed-grade tasks after voting via latestMedianGrade local state
- Add tracking-wider and more saturated colors to improve badge readability
- Rename confirmedGrade → officialGrade in calcGradeDiff utility
- Fix test comment: Q5(order 6) → Q5(order 7)
- Add D-tier and Q1/D1 boundary tests to relative_evaluation.test.ts
- Fix MD022 heading blank lines in plan.md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../relative_evalution_voting/plan.md         |  4 ++
 .../components/RelativeEvaluationBadge.svelte | 64 +++++++++++++++++++
 .../votes/components/VotableGrade.svelte      | 40 +++++++-----
 .../votes/utils/relative_evaluation.test.ts   | 42 ++++++++++--
 .../votes/utils/relative_evaluation.ts        | 12 ++--
 .../(admin)/vote_management/+page.svelte      | 24 +++++--
 src/routes/votes/+page.svelte                 | 12 +++-
 src/routes/votes/[slug]/+page.svelte          | 12 +++-
 8 files changed, 173 insertions(+), 37 deletions(-)
 create mode 100644 src/features/votes/components/RelativeEvaluationBadge.svelte

diff --git a/docs/dev-notes/2026-04-15/relative_evalution_voting/plan.md b/docs/dev-notes/2026-04-15/relative_evalution_voting/plan.md
index c0ea85f22..40eda90b0 100644
--- a/docs/dev-notes/2026-04-15/relative_evalution_voting/plan.md
+++ b/docs/dev-notes/2026-04-15/relative_evalution_voting/plan.md
@@ -1,8 +1,10 @@
 # 概要
+
 このタスクでは、投票（相対評価）の実装を行う。
 相対評価とは、既にグレードが確定している問題に対してもユーザーの投票が反映される仕組みである。
 
 # 仕組み
+
 まず、ユーザーが投票したグレードから中央値を取得する。この処理はすでに実装済みである。
 
 そして、中央値グレードと確定しているグレードの差を求める。
@@ -22,9 +24,11 @@
 グレードが未定のものに対しては、これまでと同様絶対評価を行う。
 
 # UI
+
 グレードが確定している問題のグレードアイコンの右上に「++」、「+」、「何もなし」、「-」、「--」の5段階評価を表示することで、確定したグレードからの体感難易度の乖離を表す。
 
 投票の際のUIは既存のものから変更しない。
 
 # 作業ブランチ
+
 `feature/relative_evaluation_voting`
diff --git a/src/features/votes/components/RelativeEvaluationBadge.svelte b/src/features/votes/components/RelativeEvaluationBadge.svelte
new file mode 100644
index 000000000..5257a7265
--- /dev/null
+++ b/src/features/votes/components/RelativeEvaluationBadge.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { Tooltip } from 'flowbite-svelte';
+
+  import type { TaskGrade } from '$lib/types/task';
+  import {
+    calcGradeDiff,
+    getRelativeEvaluationLabel,
+  } from '$features/votes/utils/relative_evaluation';
+
+  interface Props {
+    officialGrade: TaskGrade;
+    medianGrade: TaskGrade;
+    /** Unique element ID used to anchor the Tooltip. Must be unique on the page. */
+    badgeId: string;
+    /**
+     * Set to false when the badge is rendered inside a `<button>`.
+     * The tooltip is suppressed and aria-hidden is applied since the
+     * parent button's sr-only text already covers screen reader needs.
+     * Default: true
+     */
+    showTooltip?: boolean;
+  }
+
+  let { officialGrade, medianGrade, badgeId, showTooltip = true }: Props = $props();
+
+  const label = $derived(getRelativeEvaluationLabel(calcGradeDiff(officialGrade, medianGrade)));
+  const isHarder = $derived(label.startsWith('+'));
+
+  const tooltipText = $derived.by(() => {
+    switch (label) {
+      case '++':
+        return '投票中央値が公式グレードより2段階以上高い（難しい）';
+      case '+':
+        return '投票中央値が公式グレードより1段階高い（難しい）';
+      case '-':
+        return '投票中央値が公式グレードより1段階低い（易しい）';
+      case '--':
+        return '投票中央値が公式グレードより2段階以上低い（易しい）';
+      default:
+        return '';
+    }
+  });
+</script>
+
+{#if label}
+  <span
+    id={badgeId}
+    class="absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.65rem] font-bold leading-none tracking-wider shadow-sm
+      {isHarder
+      ? 'bg-orange-200 text-orange-800 dark:bg-orange-800/70 dark:text-orange-200'
+      : 'bg-sky-200 text-sky-800 dark:bg-sky-800/70 dark:text-sky-200'}"
+    aria-hidden={!showTooltip}
+    role={showTooltip ? 'img' : undefined}
+    aria-label={showTooltip ? tooltipText : undefined}
+    tabindex={showTooltip ? 0 : undefined}
+  >
+    {label}
+  </span>
+  {#if showTooltip && tooltipText}
+    <Tooltip triggeredBy="#{badgeId}" placement="top">
+      {tooltipText}
+    </Tooltip>
+  {/if}
+{/if}
diff --git a/src/features/votes/components/VotableGrade.svelte b/src/features/votes/components/VotableGrade.svelte
index ee28df47e..95fdf0eb2 100644
--- a/src/features/votes/components/VotableGrade.svelte
+++ b/src/features/votes/components/VotableGrade.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { tick, untrack } from 'svelte';
   import { enhance } from '$app/forms';
   import { resolve } from '$app/paths';
 
@@ -25,6 +25,7 @@
 
   import GradeLabel from '$lib/components/GradeLabel.svelte';
   import InputFieldWrapper from '$lib/components/InputFieldWrapper.svelte';
+  import RelativeEvaluationBadge from '$features/votes/components/RelativeEvaluationBadge.svelte';
 
   interface Props {
     taskResult: TaskResult;
@@ -56,12 +57,17 @@
     taskResult.grade === TaskGrade.PENDING && displayGrade !== TaskGrade.PENDING,
   );
 
-  // Relative evaluation badge: shown only when grade is confirmed and a median vote exists.
+  // Track the latest median grade locally so the badge updates immediately after voting,
+  // even for confirmed-grade tasks (where displayGrade does not change on vote).
+  // Initialized from the prop; updated by the vote handler after fetchMedianVote.
+  let latestMedianGrade = $state<TaskGrade | null>(untrack(() => estimatedGrade ?? null));
+
+  // Relative evaluation badge label: shown only for confirmed grades with a known median.
   const relativeEvaluationLabel = $derived.by(() => {
-    if (taskResult.grade === TaskGrade.PENDING || !estimatedGrade) {
+    if (taskResult.grade === TaskGrade.PENDING || !latestMedianGrade) {
       return '';
     }
-    return getRelativeEvaluationLabel(calcGradeDiff(taskResult.grade, estimatedGrade));
+    return getRelativeEvaluationLabel(calcGradeDiff(taskResult.grade, latestMedianGrade));
   });
 
   let isOpening = $state(false);
@@ -125,8 +131,12 @@
           const taskId = formData.get('taskId') as string;
           const medianGrade = await fetchMedianVote(taskId, signal);
 
-          if (medianGrade !== null && taskResult.grade === TaskGrade.PENDING) {
-            displayGrade = medianGrade;
+          if (medianGrade !== null) {
+            // Always update latestMedianGrade so the relative evaluation badge refreshes.
+            latestMedianGrade = medianGrade;
+            if (taskResult.grade === TaskGrade.PENDING) {
+              displayGrade = medianGrade;
+            }
           }
         })
         .catch((error) => {
@@ -175,17 +185,13 @@
 
     <GradeLabel taskGrade={displayGrade} defaultPadding={0.25} defaultWidth={6} reducedWidth={6} />
 
-    {#if relativeEvaluationLabel}
-      {@const isHarder = relativeEvaluationLabel.startsWith('+')}
-      <span
-        aria-hidden="true"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.6rem] font-bold leading-none shadow-sm
-          {isHarder
-          ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/60 dark:text-orange-300'
-          : 'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-300'}"
-      >
-        {relativeEvaluationLabel}
-      </span>
+    {#if taskResult.grade !== TaskGrade.PENDING && latestMedianGrade}
+      <RelativeEvaluationBadge
+        officialGrade={taskResult.grade}
+        medianGrade={latestMedianGrade}
+        badgeId="relative-eval-{componentId}"
+        showTooltip={false}
+      />
     {/if}
 
     <!-- Overlay -->
diff --git a/src/features/votes/utils/relative_evaluation.test.ts b/src/features/votes/utils/relative_evaluation.test.ts
index 823f1a4b5..5a2574894 100644
--- a/src/features/votes/utils/relative_evaluation.test.ts
+++ b/src/features/votes/utils/relative_evaluation.test.ts
@@ -3,17 +3,17 @@ import { TaskGrade } from '$lib/types/task';
 import { calcGradeDiff, getRelativeEvaluationLabel } from './relative_evaluation';
 
 describe('calcGradeDiff', () => {
-  it('returns 0 when confirmed and median are the same grade', () => {
+  it('returns 0 when official and median are the same grade', () => {
     expect(calcGradeDiff(TaskGrade.Q5, TaskGrade.Q5)).toBe(0);
   });
 
-  it('returns positive when median is harder than confirmed', () => {
-    // Q5(order 6) vs D1(order 12): diff = 12 - 6 = 6
+  it('returns positive when median is harder than official', () => {
+    // Q5(order 7) vs D1(order 12): diff = 12 - 7 = 5
     expect(calcGradeDiff(TaskGrade.Q5, TaskGrade.D1)).toBeGreaterThan(0);
   });
 
-  it('returns negative when median is easier than confirmed', () => {
-    // D1(order 12) vs Q5(order 6): diff = 6 - 12 = -6
+  it('returns negative when median is easier than official', () => {
+    // D1(order 12) vs Q5(order 7): diff = 7 - 12 = -5
     expect(calcGradeDiff(TaskGrade.D1, TaskGrade.Q5)).toBeLessThan(0);
   });
 
@@ -35,6 +35,38 @@ describe('calcGradeDiff', () => {
     // Q11(1) - D6(17) = -16
     expect(calcGradeDiff(TaskGrade.D6, TaskGrade.Q11)).toBe(-16);
   });
+
+  describe('D-tier grades', () => {
+    it('returns 0 when both are the same D grade', () => {
+      expect(calcGradeDiff(TaskGrade.D3, TaskGrade.D3)).toBe(0);
+    });
+
+    it('returns -1 for adjacent D grade downward (D3 -> D2)', () => {
+      expect(calcGradeDiff(TaskGrade.D3, TaskGrade.D2)).toBe(-1);
+    });
+
+    it('returns 1 for adjacent D grade upward (D2 -> D3)', () => {
+      expect(calcGradeDiff(TaskGrade.D2, TaskGrade.D3)).toBe(1);
+    });
+
+    it('returns -2 for two-step D grade downward (D4 -> D2)', () => {
+      expect(calcGradeDiff(TaskGrade.D4, TaskGrade.D2)).toBe(-2);
+    });
+
+    it('returns 2 for two-step D grade upward (D2 -> D4)', () => {
+      expect(calcGradeDiff(TaskGrade.D2, TaskGrade.D4)).toBe(2);
+    });
+  });
+
+  describe('Q1/D1 boundary', () => {
+    it('returns 1 when median crosses from Q1 to D1 (adjacent upward)', () => {
+      expect(calcGradeDiff(TaskGrade.Q1, TaskGrade.D1)).toBe(1);
+    });
+
+    it('returns -1 when median crosses from D1 to Q1 (adjacent downward)', () => {
+      expect(calcGradeDiff(TaskGrade.D1, TaskGrade.Q1)).toBe(-1);
+    });
+  });
 });
 
 describe('getRelativeEvaluationLabel', () => {
diff --git a/src/features/votes/utils/relative_evaluation.ts b/src/features/votes/utils/relative_evaluation.ts
index 3001a1767..ff823f7a6 100644
--- a/src/features/votes/utils/relative_evaluation.ts
+++ b/src/features/votes/utils/relative_evaluation.ts
@@ -2,15 +2,15 @@ import type { TaskGrade } from '$lib/types/task';
 import { getGradeOrder } from '$lib/utils/task';
 
 /**
- * Computes the difference in grade order between the median vote and the confirmed grade.
- * Positive means users consider the problem harder than confirmed; negative means easier.
+ * Computes the difference in grade order between the median vote and the official grade.
+ * Positive means users consider the problem harder than the official grade; negative means easier.
  *
- * @param confirmedGrade - The officially confirmed grade stored in the DB.
+ * @param officialGrade - The officially confirmed grade stored in the DB.
  * @param medianGrade - The median grade derived from user votes.
- * @returns `gradeOrder(medianGrade) - gradeOrder(confirmedGrade)`
+ * @returns `gradeOrder(medianGrade) - gradeOrder(officialGrade)`
  */
-export function calcGradeDiff(confirmedGrade: TaskGrade, medianGrade: TaskGrade): number {
-  return getGradeOrder(medianGrade) - getGradeOrder(confirmedGrade);
+export function calcGradeDiff(officialGrade: TaskGrade, medianGrade: TaskGrade): number {
+  return getGradeOrder(medianGrade) - getGradeOrder(officialGrade);
 }
 
 /**
diff --git a/src/routes/(admin)/vote_management/+page.svelte b/src/routes/(admin)/vote_management/+page.svelte
index 399426bc9..cc9b800c1 100644
--- a/src/routes/(admin)/vote_management/+page.svelte
+++ b/src/routes/(admin)/vote_management/+page.svelte
@@ -12,8 +12,9 @@
 
   import HeadingOne from '$lib/components/HeadingOne.svelte';
   import GradeLabel from '$lib/components/GradeLabel.svelte';
+  import RelativeEvaluationBadge from '$features/votes/components/RelativeEvaluationBadge.svelte';
 
-  import { taskGradeValues } from '$lib/types/task';
+  import { taskGradeValues, TaskGrade } from '$lib/types/task';
   import { getTaskGradeLabel } from '$lib/utils/task';
 
   let { data } = $props();
@@ -63,12 +64,21 @@
             </form>
           </TableBodyCell>
           <TableBodyCell>
-            <GradeLabel
-              taskGrade={stat.estimatedGrade}
-              defaultPadding={0.25}
-              defaultWidth={6}
-              reducedWidth={6}
-            />
+            <div class="relative inline-block">
+              <GradeLabel
+                taskGrade={stat.estimatedGrade}
+                defaultPadding={0.25}
+                defaultWidth={6}
+                reducedWidth={6}
+              />
+              {#if stat.dbGrade !== TaskGrade.PENDING}
+                <RelativeEvaluationBadge
+                  officialGrade={stat.dbGrade}
+                  medianGrade={stat.estimatedGrade}
+                  badgeId="relative-eval-{stat.taskId}"
+                />
+              {/if}
+            </div>
           </TableBodyCell>
           <TableBodyCell class="text-sm">{stat.voteTotal}</TableBodyCell>
         </TableBodyRow>
diff --git a/src/routes/votes/+page.svelte b/src/routes/votes/+page.svelte
index fd81136ed..28e5292be 100644
--- a/src/routes/votes/+page.svelte
+++ b/src/routes/votes/+page.svelte
@@ -15,6 +15,7 @@
 
   import HeadingOne from '$lib/components/HeadingOne.svelte';
   import GradeLabel from '$lib/components/GradeLabel.svelte';
+  import RelativeEvaluationBadge from '$features/votes/components/RelativeEvaluationBadge.svelte';
 
   import { TaskGrade } from '$lib/types/task';
 
@@ -78,7 +79,16 @@
                     </Tooltip>
                   {/if}
 
-                  <GradeLabel taskGrade={displayGrade} />
+                  <div class="relative inline-block">
+                    <GradeLabel taskGrade={displayGrade} />
+                    {#if task.grade !== TaskGrade.PENDING && task.estimatedGrade}
+                      <RelativeEvaluationBadge
+                        officialGrade={task.grade}
+                        medianGrade={task.estimatedGrade}
+                        badgeId="relative-eval-{task.task_id}"
+                      />
+                    {/if}
+                  </div>
                 </div>
               </TableBodyCell>
               <TableBodyCell class="text-base">
diff --git a/src/routes/votes/[slug]/+page.svelte b/src/routes/votes/[slug]/+page.svelte
index 79e24a8de..021bfa3d9 100644
--- a/src/routes/votes/[slug]/+page.svelte
+++ b/src/routes/votes/[slug]/+page.svelte
@@ -4,6 +4,7 @@
   import { Button, Tooltip } from 'flowbite-svelte';
   import FlaskConical from '@lucide/svelte/icons/flask-conical';
   import GradeLabel from '$lib/components/GradeLabel.svelte';
+  import RelativeEvaluationBadge from '$features/votes/components/RelativeEvaluationBadge.svelte';
 
   import { TaskGrade } from '$lib/types/task';
   import {
@@ -48,7 +49,16 @@
         {MIN_VOTES_FOR_STATISTICS}票以上集まると中央値が暫定グレードとして一覧表に反映されます。
       </Tooltip>
     {/if}
-    <GradeLabel taskGrade={displayGrade} />
+    <div class="relative inline-block">
+      <GradeLabel taskGrade={displayGrade} />
+      {#if data.task.grade !== TaskGrade.PENDING && data.stats?.grade}
+        <RelativeEvaluationBadge
+          officialGrade={data.task.grade}
+          medianGrade={data.stats.grade}
+          badgeId="relative-eval-{data.task.task_id}"
+        />
+      {/if}
+    </div>
     <h1 class="text-3xl font-normal truncate dark:text-white">
       <a
         href={getTaskUrl(data.task.contest_id, data.task.task_id)}

From 9660dd78931cce2ece978ff3a0fdd54ed5640422 Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 10:04:31 +0900
Subject: [PATCH 04/14] fix: move relative evaluation badge to DB grade column
 in vote_management

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../(admin)/vote_management/+page.svelte      | 66 +++++++++++--------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/routes/(admin)/vote_management/+page.svelte b/src/routes/(admin)/vote_management/+page.svelte
index cc9b800c1..01c58d6c7 100644
--- a/src/routes/(admin)/vote_management/+page.svelte
+++ b/src/routes/(admin)/vote_management/+page.svelte
@@ -48,38 +48,46 @@
           </TableBodyCell>
           <TableBodyCell class="text-sm">{stat.contestId}</TableBodyCell>
           <TableBodyCell>
-            <form method="POST" action="?/setTaskGrade" use:enhance>
-              <input type="hidden" name="taskId" value={stat.taskId} />
-              <select
-                name="grade"
-                onchange={(e) => (e.currentTarget as HTMLSelectElement).form?.requestSubmit()}
-                class="text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 px-2 py-1 focus:ring-primary-500 focus:border-primary-500 min-w-20"
-              >
-                {#each taskGradeValues as grade (grade)}
-                  <option value={grade} selected={stat.dbGrade === grade}>
-                    {grade === 'PENDING' ? '-' : getTaskGradeLabel(grade)}
-                  </option>
-                {/each}
-              </select>
-            </form>
-          </TableBodyCell>
-          <TableBodyCell>
-            <div class="relative inline-block">
-              <GradeLabel
-                taskGrade={stat.estimatedGrade}
-                defaultPadding={0.25}
-                defaultWidth={6}
-                reducedWidth={6}
-              />
-              {#if stat.dbGrade !== TaskGrade.PENDING}
-                <RelativeEvaluationBadge
-                  officialGrade={stat.dbGrade}
-                  medianGrade={stat.estimatedGrade}
-                  badgeId="relative-eval-{stat.taskId}"
-                />
+            <div class="flex items-center gap-2">
+              <form method="POST" action="?/setTaskGrade" use:enhance>
+                <input type="hidden" name="taskId" value={stat.taskId} />
+                <select
+                  name="grade"
+                  onchange={(e) => (e.currentTarget as HTMLSelectElement).form?.requestSubmit()}
+                  class="text-sm rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 px-2 py-1 focus:ring-primary-500 focus:border-primary-500 min-w-20"
+                >
+                  {#each taskGradeValues as grade (grade)}
+                    <option value={grade} selected={stat.dbGrade === grade}>
+                      {grade === 'PENDING' ? '-' : getTaskGradeLabel(grade)}
+                    </option>
+                  {/each}
+                </select>
+              </form>
+              {#if stat.dbGrade !== TaskGrade.PENDING && stat.estimatedGrade !== TaskGrade.PENDING}
+                <div class="relative inline-block">
+                  <GradeLabel
+                    taskGrade={stat.dbGrade}
+                    defaultPadding={0.25}
+                    defaultWidth={6}
+                    reducedWidth={6}
+                  />
+                  <RelativeEvaluationBadge
+                    officialGrade={stat.dbGrade}
+                    medianGrade={stat.estimatedGrade}
+                    badgeId="relative-eval-{stat.taskId}"
+                  />
+                </div>
               {/if}
             </div>
           </TableBodyCell>
+          <TableBodyCell>
+            <GradeLabel
+              taskGrade={stat.estimatedGrade}
+              defaultPadding={0.25}
+              defaultWidth={6}
+              reducedWidth={6}
+            />
+          </TableBodyCell>
           <TableBodyCell class="text-sm">{stat.voteTotal}</TableBodyCell>
         </TableBodyRow>
       {/each}

From 0c8b37f2fa91774b07dbe583512b0f07b6fb2615 Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 10:11:32 +0900
Subject: [PATCH 05/14] fix: guard estimatedGrade with truthy check in
 vote_management badge condition

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/routes/(admin)/vote_management/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(admin)/vote_management/+page.svelte b/src/routes/(admin)/vote_management/+page.svelte
index 01c58d6c7..0b87519b7 100644
--- a/src/routes/(admin)/vote_management/+page.svelte
+++ b/src/routes/(admin)/vote_management/+page.svelte
@@ -63,7 +63,7 @@
                   {/each}
                 </select>
               </form>
-              {#if stat.dbGrade !== TaskGrade.PENDING && stat.estimatedGrade !== TaskGrade.PENDING}
+              {#if stat.dbGrade !== TaskGrade.PENDING && stat.estimatedGrade}
                 <div class="relative inline-block">
                   <GradeLabel
                     taskGrade={stat.dbGrade}

From 217803deaf6b130b40c0b38f43f2c22254a8d1dd Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 11:18:17 +0900
Subject: [PATCH 06/14] fix: improve relative evaluation badge visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- tracking-wider → tracking-widest to separate '--' characters
- bg-*-200 text-*-800 → bg-*-400 text-white for stronger contrast against page background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../votes/components/RelativeEvaluationBadge.svelte         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/votes/components/RelativeEvaluationBadge.svelte b/src/features/votes/components/RelativeEvaluationBadge.svelte
index 5257a7265..245b04844 100644
--- a/src/features/votes/components/RelativeEvaluationBadge.svelte
+++ b/src/features/votes/components/RelativeEvaluationBadge.svelte
@@ -45,10 +45,10 @@
 {#if label}
   <span
     id={badgeId}
-    class="absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.65rem] font-bold leading-none tracking-wider shadow-sm
+    class="absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.65rem] font-bold leading-none tracking-widest shadow-sm
       {isHarder
-      ? 'bg-orange-200 text-orange-800 dark:bg-orange-800/70 dark:text-orange-200'
-      : 'bg-sky-200 text-sky-800 dark:bg-sky-800/70 dark:text-sky-200'}"
+      ? 'bg-orange-400 text-white dark:bg-orange-500 dark:text-white'
+      : 'bg-sky-400 text-white dark:bg-sky-500 dark:text-white'}"
     aria-hidden={!showTooltip}
     role={showTooltip ? 'img' : undefined}
     aria-label={showTooltip ? tooltipText : undefined}

From 645d5900dd0c5d27aa90e28d9a53c20adcfb3d26 Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 11:18:50 +0900
Subject: [PATCH 07/14] fix: remove tabindex from non-interactive span in
 RelativeEvaluationBadge

aria-label already covers screen reader needs; tabindex on a non-interactive
element triggers a11y_no_noninteractive_tabindex.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/features/votes/components/RelativeEvaluationBadge.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/votes/components/RelativeEvaluationBadge.svelte b/src/features/votes/components/RelativeEvaluationBadge.svelte
index 245b04844..f3a09d12e 100644
--- a/src/features/votes/components/RelativeEvaluationBadge.svelte
+++ b/src/features/votes/components/RelativeEvaluationBadge.svelte
@@ -52,7 +52,6 @@
     aria-hidden={!showTooltip}
     role={showTooltip ? 'img' : undefined}
     aria-label={showTooltip ? tooltipText : undefined}
-    tabindex={showTooltip ? 0 : undefined}
   >
     {label}
   </span>

From bd0471d12ccbbc447b25e8b6b9445f980d8deab7 Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 11:21:59 +0900
Subject: [PATCH 08/14] fix: increase letter-spacing on badge to visually
 separate '--' characters

tracking-widest (0.1em) was insufficient at 0.65rem font size; use tracking-[0.25em].

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/features/votes/components/RelativeEvaluationBadge.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/votes/components/RelativeEvaluationBadge.svelte b/src/features/votes/components/RelativeEvaluationBadge.svelte
index f3a09d12e..b252efc22 100644
--- a/src/features/votes/components/RelativeEvaluationBadge.svelte
+++ b/src/features/votes/components/RelativeEvaluationBadge.svelte
@@ -45,7 +45,7 @@
 {#if label}
   <span
     id={badgeId}
-    class="absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.65rem] font-bold leading-none tracking-widest shadow-sm
+    class="absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.65rem] font-bold leading-none tracking-[0.25em] shadow-sm
       {isHarder
       ? 'bg-orange-400 text-white dark:bg-orange-500 dark:text-white'
       : 'bg-sky-400 text-white dark:bg-sky-500 dark:text-white'}"

From 0a0f976dd544d1f2e7f61363cbb2c03838c29d19 Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 11:24:52 +0900
Subject: [PATCH 09/14] fix: balance badge letter-spacing with negative
 margin-right

tracking-[0.25em] -> tracking-[0.375em] (1.5x wider gap between '--' chars)
Add -mr-[0.375em] to cancel the trailing letter-spacing, keeping the badge symmetric.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/features/votes/components/RelativeEvaluationBadge.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/votes/components/RelativeEvaluationBadge.svelte b/src/features/votes/components/RelativeEvaluationBadge.svelte
index b252efc22..ab783a2b9 100644
--- a/src/features/votes/components/RelativeEvaluationBadge.svelte
+++ b/src/features/votes/components/RelativeEvaluationBadge.svelte
@@ -45,7 +45,7 @@
 {#if label}
   <span
     id={badgeId}
-    class="absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.65rem] font-bold leading-none tracking-[0.25em] shadow-sm
+    class="absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.65rem] font-bold leading-none tracking-[0.375em] -mr-[0.375em] shadow-sm
       {isHarder
       ? 'bg-orange-400 text-white dark:bg-orange-500 dark:text-white'
       : 'bg-sky-400 text-white dark:bg-sky-500 dark:text-white'}"

From 5c18b97b3a693a4887b26aa11bd6ade6eaee9375 Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 11:29:46 +0900
Subject: [PATCH 10/14] fix: use inline style for letter-spacing and negative
 margin-right on badge

Tailwind arbitrary class -mr-[0.375em] was not compensating the trailing
letter-spacing. Use inline style to reliably cancel the trailing gap.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/features/votes/components/RelativeEvaluationBadge.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/votes/components/RelativeEvaluationBadge.svelte b/src/features/votes/components/RelativeEvaluationBadge.svelte
index ab783a2b9..82f8856aa 100644
--- a/src/features/votes/components/RelativeEvaluationBadge.svelte
+++ b/src/features/votes/components/RelativeEvaluationBadge.svelte
@@ -45,10 +45,11 @@
 {#if label}
   <span
     id={badgeId}
-    class="absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.65rem] font-bold leading-none tracking-[0.375em] -mr-[0.375em] shadow-sm
+    class="absolute -top-2 -right-2 z-10 rounded-full px-1 py-px text-[0.65rem] font-bold leading-none shadow-sm
       {isHarder
       ? 'bg-orange-400 text-white dark:bg-orange-500 dark:text-white'
       : 'bg-sky-400 text-white dark:bg-sky-500 dark:text-white'}"
+    style="letter-spacing: 0.375em; margin-right: -0.375em;"
     aria-hidden={!showTooltip}
     role={showTooltip ? 'img' : undefined}
     aria-label={showTooltip ? tooltipText : undefined}

From d61a23fc24f22e6c7000c398f6801e3b9fddc229 Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 11:31:54 +0900
Subject: [PATCH 11/14] fix: replace letter-spacing with thinsp between
 '--'/'++' chars in badge

letter-spacing adds trailing space after the last character, which cannot be
cancelled on absolute-positioned elements. Insert &thinsp; between characters
only for '--' and '++' labels so spacing is symmetric.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../votes/components/RelativeEvaluationBadge.svelte      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/features/votes/components/RelativeEvaluationBadge.svelte b/src/features/votes/components/RelativeEvaluationBadge.svelte
index 82f8856aa..a427be388 100644
--- a/src/features/votes/components/RelativeEvaluationBadge.svelte
+++ b/src/features/votes/components/RelativeEvaluationBadge.svelte
@@ -49,12 +49,17 @@
       {isHarder
       ? 'bg-orange-400 text-white dark:bg-orange-500 dark:text-white'
       : 'bg-sky-400 text-white dark:bg-sky-500 dark:text-white'}"
-    style="letter-spacing: 0.375em; margin-right: -0.375em;"
     aria-hidden={!showTooltip}
     role={showTooltip ? 'img' : undefined}
     aria-label={showTooltip ? tooltipText : undefined}
   >
-    {label}
+    {#if label === '--'}
+      -&thinsp;-
+    {:else if label === '++'}
+      +&thinsp;+
+    {:else}
+      {label}
+    {/if}
   </span>
   {#if showTooltip && tooltipText}
     <Tooltip triggeredBy="#{badgeId}" placement="top">

From 1f5cc7725611375085adf69cf8e8e4973252c85d Mon Sep 17 00:00:00 2001
From: river0525 <0525sotaro@gmail.com>
Date: Thu, 16 Apr 2026 11:41:22 +0900
Subject: [PATCH 12/14] refactor: extract getRelativeEvaluationTooltipText to
 relative_evaluation utils

Move tooltip text mapping out of RelativeEvaluationBadge.svelte into
src/features/votes/utils/relative_evaluation.ts per coding guidelines
(business logic belongs in utils/, not inside <script> blocks).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/RelativeEvaluationBadge.svelte | 16 ++------------
 .../votes/utils/relative_evaluation.ts        | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/features/votes/components/RelativeEvaluationBadge.svelte b/src/features/votes/components/RelativeEvaluationBadge.svelte
index a427be388..cefff7294 100644
--- a/src/features/votes/components/RelativeEvaluationBadge.svelte
+++ b/src/features/votes/components/RelativeEvaluationBadge.svelte
@@ -5,6 +5,7 @@
   import {
     calcGradeDiff,
     getRelativeEvaluationLabel,
+    getRelativeEvaluationTooltipText,
   } from '$features/votes/utils/relative_evaluation';
 
   interface Props {
@@ -26,20 +27,7 @@
   const label = $derived(getRelativeEvaluationLabel(calcGradeDiff(officialGrade, medianGrade)));
   const isHarder = $derived(label.startsWith('+'));
 
-  const tooltipText = $derived.by(() => {
-    switch (label) {
-      case '++':
-        return '投票中央値が公式グレードより2段階以上高い（難しい）';
-      case '+':
-        return '投票中央値が公式グレードより1段階高い（難しい）';
-      case '-':
-        return '投票中央値が公式グレードより1段階低い（易しい）';
-      case '--':
-        return '投票中央値が公式グレードより2段階以上低い（易しい）';
-      default:
-        return '';
-    }
-  });
+  const tooltipText = $derived(getRelativeEvaluationTooltipText(label));
 </script>
 
 {#if label}
diff --git a/src/features/votes/utils/relative_evaluation.ts b/src/features/votes/utils/relative_evaluation.ts
index ff823f7a6..014b1d747 100644
--- a/src/features/votes/utils/relative_evaluation.ts
+++ b/src/features/votes/utils/relative_evaluation.ts
@@ -13,6 +13,27 @@ export function calcGradeDiff(officialGrade: TaskGrade, medianGrade: TaskGrade):
   return getGradeOrder(medianGrade) - getGradeOrder(officialGrade);
 }
 
+/**
+ * Returns a Japanese tooltip string explaining the relative evaluation label.
+ *
+ * @param label - The label returned by {@link getRelativeEvaluationLabel}.
+ * @returns A human-readable explanation, or `''` when label is empty.
+ */
+export function getRelativeEvaluationTooltipText(label: string): string {
+  switch (label) {
+    case '++':
+      return '投票中央値が公式グレードより2段階以上高い（難しい）';
+    case '+':
+      return '投票中央値が公式グレードより1段階高い（難しい）';
+    case '-':
+      return '投票中央値が公式グレードより1段階低い（易しい）';
+    case '--':
+      return '投票中央値が公式グレードより2段階以上低い（易しい）';
+    default:
+      return '';
+  }
+}
+
 /**
  * Converts a grade difference to a 5-level relative evaluation label.
  *

From 8ecf079c2b257a2f21f4e220058af344573eb04a Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Thu, 16 Apr 2026 09:56:45 +0000
Subject: [PATCH 13/14] refactor: shorten tooltip text for relative evaluation
 labels

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../votes/utils/relative_evaluation.test.ts   | 69 +++++++++++++------
 .../votes/utils/relative_evaluation.ts        |  8 +--
 2 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/features/votes/utils/relative_evaluation.test.ts b/src/features/votes/utils/relative_evaluation.test.ts
index 5a2574894..0c240c85a 100644
--- a/src/features/votes/utils/relative_evaluation.test.ts
+++ b/src/features/votes/utils/relative_evaluation.test.ts
@@ -1,35 +1,40 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, test } from 'vitest';
+
 import { TaskGrade } from '$lib/types/task';
-import { calcGradeDiff, getRelativeEvaluationLabel } from './relative_evaluation';
+import {
+  calcGradeDiff,
+  getRelativeEvaluationLabel,
+  getRelativeEvaluationTooltipText,
+} from './relative_evaluation';
 
 describe('calcGradeDiff', () => {
-  it('returns 0 when official and median are the same grade', () => {
+  test('returns 0 when official and median are the same grade', () => {
     expect(calcGradeDiff(TaskGrade.Q5, TaskGrade.Q5)).toBe(0);
   });
 
-  it('returns positive when median is harder than official', () => {
+  test('returns positive when median is harder than official', () => {
     // Q5(order 7) vs D1(order 12): diff = 12 - 7 = 5
     expect(calcGradeDiff(TaskGrade.Q5, TaskGrade.D1)).toBeGreaterThan(0);
   });
 
-  it('returns negative when median is easier than official', () => {
+  test('returns negative when median is easier than official', () => {
     // D1(order 12) vs Q5(order 7): diff = 7 - 12 = -5
     expect(calcGradeDiff(TaskGrade.D1, TaskGrade.Q5)).toBeLessThan(0);
   });
 
-  it('returns 1 for adjacent grade upward (Q3 -> Q2)', () => {
+  test('returns 1 for adjacent grade upward (Q3 -> Q2)', () => {
     expect(calcGradeDiff(TaskGrade.Q3, TaskGrade.Q2)).toBe(1);
   });
 
-  it('returns -1 for adjacent grade downward (Q2 -> Q3)', () => {
+  test('returns -1 for adjacent grade downward (Q2 -> Q3)', () => {
     expect(calcGradeDiff(TaskGrade.Q2, TaskGrade.Q3)).toBe(-1);
   });
 
-  it('returns 2 for two-step grade upward (Q3 -> Q1)', () => {
+  test('returns 2 for two-step grade upward (Q3 -> Q1)', () => {
     expect(calcGradeDiff(TaskGrade.Q3, TaskGrade.Q1)).toBe(2);
   });
 
-  it('handles boundary grades Q11 and D6', () => {
+  test('handles boundary grades Q11 and D6', () => {
     // D6(17) - Q11(1) = 16
     expect(calcGradeDiff(TaskGrade.Q11, TaskGrade.D6)).toBe(16);
     // Q11(1) - D6(17) = -16
@@ -37,60 +42,82 @@ describe('calcGradeDiff', () => {
   });
 
   describe('D-tier grades', () => {
-    it('returns 0 when both are the same D grade', () => {
+    test('returns 0 when both are the same D grade', () => {
       expect(calcGradeDiff(TaskGrade.D3, TaskGrade.D3)).toBe(0);
     });
 
-    it('returns -1 for adjacent D grade downward (D3 -> D2)', () => {
+    test('returns -1 for adjacent D grade downward (D3 -> D2)', () => {
       expect(calcGradeDiff(TaskGrade.D3, TaskGrade.D2)).toBe(-1);
     });
 
-    it('returns 1 for adjacent D grade upward (D2 -> D3)', () => {
+    test('returns 1 for adjacent D grade upward (D2 -> D3)', () => {
       expect(calcGradeDiff(TaskGrade.D2, TaskGrade.D3)).toBe(1);
     });
 
-    it('returns -2 for two-step D grade downward (D4 -> D2)', () => {
+    test('returns -2 for two-step D grade downward (D4 -> D2)', () => {
       expect(calcGradeDiff(TaskGrade.D4, TaskGrade.D2)).toBe(-2);
     });
 
-    it('returns 2 for two-step D grade upward (D2 -> D4)', () => {
+    test('returns 2 for two-step D grade upward (D2 -> D4)', () => {
       expect(calcGradeDiff(TaskGrade.D2, TaskGrade.D4)).toBe(2);
     });
   });
 
   describe('Q1/D1 boundary', () => {
-    it('returns 1 when median crosses from Q1 to D1 (adjacent upward)', () => {
+    test('returns 1 when median crosses from Q1 to D1 (adjacent upward)', () => {
       expect(calcGradeDiff(TaskGrade.Q1, TaskGrade.D1)).toBe(1);
     });
 
-    it('returns -1 when median crosses from D1 to Q1 (adjacent downward)', () => {
+    test('returns -1 when median crosses from D1 to Q1 (adjacent downward)', () => {
       expect(calcGradeDiff(TaskGrade.D1, TaskGrade.Q1)).toBe(-1);
     });
   });
 });
 
 describe('getRelativeEvaluationLabel', () => {
-  it('returns "++" for diff >= 2', () => {
+  test('returns "++" for diff >= 2', () => {
     expect(getRelativeEvaluationLabel(2)).toBe('++');
     expect(getRelativeEvaluationLabel(5)).toBe('++');
     expect(getRelativeEvaluationLabel(16)).toBe('++');
   });
 
-  it('returns "+" for diff === 1', () => {
+  test('returns "+" for diff === 1', () => {
     expect(getRelativeEvaluationLabel(1)).toBe('+');
   });
 
-  it('returns "" for diff === 0', () => {
+  test('returns "" for diff === 0', () => {
     expect(getRelativeEvaluationLabel(0)).toBe('');
   });
 
-  it('returns "-" for diff === -1', () => {
+  test('returns "-" for diff === -1', () => {
     expect(getRelativeEvaluationLabel(-1)).toBe('-');
   });
 
-  it('returns "--" for diff <= -2', () => {
+  test('returns "--" for diff <= -2', () => {
     expect(getRelativeEvaluationLabel(-2)).toBe('--');
     expect(getRelativeEvaluationLabel(-5)).toBe('--');
     expect(getRelativeEvaluationLabel(-16)).toBe('--');
   });
 });
+
+describe('getRelativeEvaluationTooltipText', () => {
+  test('returns "" for empty string (default case)', () => {
+    expect(getRelativeEvaluationTooltipText('')).toBe('');
+  });
+
+  test('returns the harder-by-2 explanation for "++"', () => {
+    expect(getRelativeEvaluationTooltipText('++')).toBe('投票: 2グレード以上難しい');
+  });
+
+  test('returns the harder-by-1 explanation for "+"', () => {
+    expect(getRelativeEvaluationTooltipText('+')).toBe('投票: 1グレード難しい');
+  });
+
+  test('returns the easier-by-1 explanation for "-"', () => {
+    expect(getRelativeEvaluationTooltipText('-')).toBe('投票: 1グレード易しい');
+  });
+
+  test('returns the easier-by-2 explanation for "--"', () => {
+    expect(getRelativeEvaluationTooltipText('--')).toBe('投票: 2グレード以上易しい');
+  });
+});
diff --git a/src/features/votes/utils/relative_evaluation.ts b/src/features/votes/utils/relative_evaluation.ts
index 014b1d747..1712a8022 100644
--- a/src/features/votes/utils/relative_evaluation.ts
+++ b/src/features/votes/utils/relative_evaluation.ts
@@ -22,13 +22,13 @@ export function calcGradeDiff(officialGrade: TaskGrade, medianGrade: TaskGrade):
 export function getRelativeEvaluationTooltipText(label: string): string {
   switch (label) {
     case '++':
-      return '投票中央値が公式グレードより2段階以上高い（難しい）';
+      return '投票: 2グレード以上難しい';
     case '+':
-      return '投票中央値が公式グレードより1段階高い（難しい）';
+      return '投票: 1グレード難しい';
     case '-':
-      return '投票中央値が公式グレードより1段階低い（易しい）';
+      return '投票: 1グレード易しい';
     case '--':
-      return '投票中央値が公式グレードより2段階以上低い（易しい）';
+      return '投票: 2グレード以上易しい';
     default:
       return '';
   }

From 553e5354c0a7a727526dea3ba1c645725ba0d143 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Thu, 16 Apr 2026 11:11:09 +0000
Subject: [PATCH 14/14] refactor: update tooltip text to user-centric phrasing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../votes/utils/relative_evaluation.test.ts      | 16 ++++++++--------
 src/features/votes/utils/relative_evaluation.ts  |  8 ++++----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/features/votes/utils/relative_evaluation.test.ts b/src/features/votes/utils/relative_evaluation.test.ts
index 0c240c85a..39aa29085 100644
--- a/src/features/votes/utils/relative_evaluation.test.ts
+++ b/src/features/votes/utils/relative_evaluation.test.ts
@@ -105,19 +105,19 @@ describe('getRelativeEvaluationTooltipText', () => {
     expect(getRelativeEvaluationTooltipText('')).toBe('');
   });
 
-  test('returns the harder-by-2 explanation for "++"', () => {
-    expect(getRelativeEvaluationTooltipText('++')).toBe('投票: 2グレード以上難しい');
+  test('returns ++ for users feel the difficult than official grade', () => {
+    expect(getRelativeEvaluationTooltipText('++')).toBe('ユーザは「難しい」と評価');
   });
 
-  test('returns the harder-by-1 explanation for "+"', () => {
-    expect(getRelativeEvaluationTooltipText('+')).toBe('投票: 1グレード難しい');
+  test('returns + for users feel the slightly difficult than official grade', () => {
+    expect(getRelativeEvaluationTooltipText('+')).toBe('ユーザは「やや難しい」と評価');
   });
 
-  test('returns the easier-by-1 explanation for "-"', () => {
-    expect(getRelativeEvaluationTooltipText('-')).toBe('投票: 1グレード易しい');
+  test('returns - for users feel the slightly easy than official grade', () => {
+    expect(getRelativeEvaluationTooltipText('-')).toBe('ユーザは「やや易しい」と評価');
   });
 
-  test('returns the easier-by-2 explanation for "--"', () => {
-    expect(getRelativeEvaluationTooltipText('--')).toBe('投票: 2グレード以上易しい');
+  test('returns -- for users feel the easy than official grade', () => {
+    expect(getRelativeEvaluationTooltipText('--')).toBe('ユーザは「易しい」と評価');
   });
 });
diff --git a/src/features/votes/utils/relative_evaluation.ts b/src/features/votes/utils/relative_evaluation.ts
index 1712a8022..5fd56c729 100644
--- a/src/features/votes/utils/relative_evaluation.ts
+++ b/src/features/votes/utils/relative_evaluation.ts
@@ -22,13 +22,13 @@ export function calcGradeDiff(officialGrade: TaskGrade, medianGrade: TaskGrade):
 export function getRelativeEvaluationTooltipText(label: string): string {
   switch (label) {
     case '++':
-      return '投票: 2グレード以上難しい';
+      return 'ユーザは「難しい」と評価';
     case '+':
-      return '投票: 1グレード難しい';
+      return 'ユーザは「やや難しい」と評価';
     case '-':
-      return '投票: 1グレード易しい';
+      return 'ユーザは「やや易しい」と評価';
     case '--':
-      return '投票: 2グレード以上易しい';
+      return 'ユーザは「易しい」と評価';
     default:
       return '';
   }