From e5c9bba166de2eaef9f814b32fd9e8c8ef832781 Mon Sep 17 00:00:00 2001
From: Patricio Rivera Alfaro <patricio.rivera@continuumhq.com>
Date: Thu, 16 Jul 2026 23:17:49 -0400
Subject: [PATCH] fix: keep minor tetrad symbols lowercase in IdleView quality
 label

Follow-up to #131: the same blanket capitalization (text-transform:
capitalize) was still uppercasing raw chord symbols like m7b5 in
IdleView's quality label. Reuses formatQualityLabel/isChordSymbolQuality
from music/display.ts so only word-phrase labels get title-cased.
---
 src/components/IdleView.vue               |  9 +++++++--
 src/components/__tests__/IdleView.spec.ts | 11 +++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/IdleView.vue b/src/components/IdleView.vue
index 3be884f..6a646f2 100644
--- a/src/components/IdleView.vue
+++ b/src/components/IdleView.vue
@@ -8,6 +8,7 @@ import { FEATURES } from '@/config/features'
 import FreePlayPicker from '@/components/FreePlayPicker.vue'
 import SubStageProgressBar from '@/components/SubStageProgressBar.vue'
 import TheoryModal from '@/components/TheoryModal.vue'
+import { formatQualityLabel, isChordSymbolQuality } from '@/music/display'
 import type { ChordQuality } from '@/music/data/chords'
 import type { ScaleMode } from '@/music/data/scales'
 import type { IntervalGroup } from '@/music/data/intervals'
@@ -33,6 +34,11 @@ const quality = computed(() => progressStore.currentLearningQuality() ?? 'major'
 
 const progressRatio = computed(() => progressStore.progressRatio(quality.value))
 
+const qualityLabel = computed(() => {
+  const label = formatQualityLabel(quality.value)
+  return isChordSymbolQuality(quality.value) ? label : label.replace(/\b\w/g, (c) => c.toUpperCase())
+})
+
 function setMode(mode: 'learn' | 'freePlay'): void {
   progressStore.setIdleMode(mode)
 }
@@ -98,7 +104,7 @@ function onStageOpen(stageIndex: number): void {
       <template v-if="idleMode === 'learn'">
         <div class="learning-position">{{ stageName }}</div>
         <div class="quality-label">
-          <span>Quality: {{ quality }}</span>
+          <span>Quality: {{ qualityLabel }}</span>
           <button
             v-if="FEATURES.THEORY_MODAL"
             class="info-btn"
@@ -235,7 +241,6 @@ function onStageOpen(stageIndex: number): void {
   gap: 0.5rem;
   font-size: 1rem;
   font-weight: 600;
-  text-transform: capitalize;
 }
 
 .info-btn {
diff --git a/src/components/__tests__/IdleView.spec.ts b/src/components/__tests__/IdleView.spec.ts
index 70c9579..ad6d3ec 100644
--- a/src/components/__tests__/IdleView.spec.ts
+++ b/src/components/__tests__/IdleView.spec.ts
@@ -68,7 +68,7 @@ describe('IdleView', () => {
     it('shows quality matching current learning position', () => {
       const wrapper = mountView()
       // Default position is stage 1, subStage 1 → 'seconds' (Interval Basics SS-1)
-      expect(wrapper.text()).toContain('seconds')
+      expect(wrapper.text()).toContain('Seconds')
     })
 
     it('shows updated quality when learning position advances', async () => {
@@ -76,7 +76,14 @@ describe('IdleView', () => {
       progress.state.learning = { stage: 1, subStage: 2 }
       const wrapper = mountView()
       // stage 1, subStage 2 → 'thirds' (Interval Basics SS-2)
-      expect(wrapper.text()).toContain('thirds')
+      expect(wrapper.text()).toContain('Thirds')
+    })
+
+    it('keeps minor tetrad symbols lowercase in the quality label (m7b5)', () => {
+      const progress = useProgressStore()
+      progress.state.learning = { stage: 3, subStage: 5 }
+      const wrapper = mountView()
+      expect(wrapper.text()).toContain('Quality: ø7')
     })
 
     it('reflects accumulatedScore progress in the progress bar', async () => {