From ed669b2e3ae6a5bfffc08e78bfcab87bb8468102 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Thu, 9 Apr 2026 01:07:39 +0200
Subject: [PATCH] fix: larger black key dots, active note names list on piano

---
 .../components/chord-diagram/piano-keys.tsx   | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/app/components/chord-diagram/piano-keys.tsx b/app/app/components/chord-diagram/piano-keys.tsx
index ac67eb0..d24534f 100644
--- a/app/app/components/chord-diagram/piano-keys.tsx
+++ b/app/app/components/chord-diagram/piano-keys.tsx
@@ -110,11 +110,12 @@ export function PianoKeys({ notes }: Props) {
                 <div
                   className="absolute rounded-full bg-white"
                   style={{
-                    width: 6,
-                    height: 6,
-                    bottom: 5,
+                    width: 10,
+                    height: 10,
+                    bottom: 4,
                     left: '50%',
                     transform: 'translateX(-50%)',
+                    border: '2px solid hsl(var(--primary))',
                   }}
                 />
               )}
@@ -138,6 +139,19 @@ export function PianoKeys({ notes }: Props) {
           );
         })}
       </div>
+
+      {/* Active note names — unambiguous list including black keys */}
+      <div className="flex flex-wrap justify-center gap-1 mt-1">
+        {notes.map((note) => (
+          <span
+            key={note}
+            className="font-mono font-semibold text-primary"
+            style={{ fontSize: 9 }}
+          >
+            {note}
+          </span>
+        ))}
+      </div>
     </div>
   );
 }