fix: highlight given diagonal cell's note on the piano keyboard when clicked

src/components/MatrixGrid.vue

@@ -73,10 +73,6 @@ function noteForColumnPlayback(cell: MatrixCell): string {
 
 function handleClick(cell: MatrixCell) {
   if (props.mode !== 'input') return
-  if (cell.isGiven) {
-    if (cell.note) playNote(noteForColumnPlayback(cell))
-    return
-  }
   emit('cell-click', cell.row, cell.col)
   if (cell.note) playNote(noteForColumnPlayback(cell))
 }

src/components/PlayingView.vue

@@ -68,7 +68,9 @@ const displayCells = computed<MatrixCell[][]>(() => {
 const activeCellNote = computed<string | null>({
   get() {
     if (!activeCell.value || session.value.phase !== 'playing') return null
-    return session.value.answers[activeCell.value.row]?.[activeCell.value.col] ?? null
+    const { row, col } = activeCell.value
+    const cell = session.value.puzzle.cells[row]?.[col]
+    return cell?.isGiven ? cell.note : (session.value.answers[row]?.[col] ?? null)
   },
   set(note: string | null) {
     if (!activeCell.value || note === null || session.value.phase !== 'playing') return

src/components/__tests__/MatrixGrid.spec.ts

@@ -72,13 +72,13 @@ describe('MatrixGrid', () => {
       expect(wrapper.emitted('cell-click')).toEqual([[2, 0]])
     })
 
-    it('does not emit cell-click when a given cell is clicked', async () => {
+    it('emits cell-click with correct row/col when a given cell is clicked', async () => {
       const wrapper = mount(MatrixGrid, {
         props: { cells: makeCells(3), mode: 'input', showDegreeLabels: false },
       })
       // Cell at DOM index 2 is (2,2) — on the diagonal, given.
       await wrapper.findAll('.matrix-cell')[2]!.trigger('click')
-      expect(wrapper.emitted('cell-click')).toBeUndefined()
+      expect(wrapper.emitted('cell-click')).toEqual([[2, 2]])
     })
 
     it('applies active class to the active cell', () => {

src/components/__tests__/PlayingView.spec.ts

@@ -92,6 +92,25 @@ describe('PlayingView', () => {
     })
   })
 
+  describe('piano keyboard', () => {
+    it('sets the active cell when a given cell is clicked', async () => {
+      startGame()
+      const wrapper = mountView()
+      const givenCell = wrapper.find('.matrix-cell.given')
+      await givenCell.trigger('click')
+      expect(wrapper.find('.matrix-cell.active').exists()).toBe(true)
+    })
+
+    it("highlights the given cell's note on the piano keyboard after clicking it", async () => {
+      startGame()
+      const wrapper = mountView()
+      const givenCell = wrapper.find('.matrix-cell.given')
+      const expectedNote = givenCell.text()
+      await givenCell.trigger('click')
+      expect(wrapper.findComponent({ name: 'PianoKeyboard' }).props('activeNote')).toBe(expectedNote)
+    })
+  })
+
   describe('answer submission flow', () => {
     it('stores the answer when NotePicker emits a note', async () => {
       const game = startGame()