From dbb7cbd92f6cf95023aecd6165309c4ec696388b Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Thu, 9 Apr 2026 01:15:49 +0200
Subject: [PATCH] fix: use var(--x) not hsl(var(--x)) for oklch theme vars,
 redesign fretboard with explicit string lines

---
 .../chord-diagram/guitar-fretboard.tsx        | 194 +++++++++++-------
 .../components/chord-diagram/piano-keys.tsx   |  42 ++--
 2 files changed, 146 insertions(+), 90 deletions(-)

diff --git a/app/app/components/chord-diagram/guitar-fretboard.tsx b/app/app/components/chord-diagram/guitar-fretboard.tsx
index bb9b001..d4ff27d 100644
--- a/app/app/components/chord-diagram/guitar-fretboard.tsx
+++ b/app/app/components/chord-diagram/guitar-fretboard.tsx
@@ -1,7 +1,13 @@
 import type { GuitarVoicing } from '~/lib/chord-voicing';
 
-const FRETS_SHOWN = 4;
 const STRING_COUNT = 6;
+const FRET_COUNT = 4;
+const STRING_SPACING = 13; // px between adjacent string lines
+const FRET_HEIGHT = 18;    // px per fret
+const DOT_R = 5;           // finger dot radius
+
+const GRID_W = STRING_SPACING * (STRING_COUNT - 1); // 65px
+const GRID_H = FRET_HEIGHT * FRET_COUNT;            // 72px
 
 interface Props {
   voicing: GuitarVoicing | null;
@@ -10,93 +16,139 @@ interface Props {
 export function GuitarFretboard({ voicing }: Props) {
   if (!voicing) {
     return (
-      <div className="flex items-center justify-center text-muted-foreground text-xs h-20 w-24">
+      <div
+        className="flex items-center justify-center text-muted-foreground text-xs"
+        style={{ height: GRID_H + 20, width: GRID_W + 20 }}
+      >
         no voicing
       </div>
     );
   }
 
   const { frets, baseFret, barre } = voicing;
-
-  // Show fret number label when not at open position
   const showFretLabel = baseFret > 0;
 
   return (
-    <div className="flex flex-col items-center gap-1">
-      {/* Open/muted string indicators above nut */}
-      <div className="flex" style={{ gap: 2 }}>
-        {frets.map((f, i) => (
-          <div
-            key={i}
-            className="flex items-center justify-center text-xs font-mono"
-            style={{ width: 14 }}
-          >
-            {f === null ? (
-              <span className="text-destructive">✕</span>
-            ) : f === 0 ? (
-              <span className="text-muted-foreground">○</span>
-            ) : null}
-          </div>
-        ))}
+    <div className="flex flex-col items-center">
+      {/* O/X string indicators above nut */}
+      <div className="relative" style={{ width: GRID_W, height: 16 }}>
+        {frets.map((f, i) =>
+          f === null ? (
+            <span
+              key={i}
+              className="absolute font-mono text-destructive"
+              style={{ fontSize: 10, top: 2, left: i * STRING_SPACING - 4 }}
+            >
+              ✕
+            </span>
+          ) : f === 0 ? (
+            <span
+              key={i}
+              className="absolute font-mono text-muted-foreground"
+              style={{ fontSize: 10, top: 2, left: i * STRING_SPACING - 5 }}
+            >
+              ○
+            </span>
+          ) : null
+        )}
       </div>
 
-      {/* Fretboard grid */}
-      <div className="relative flex" style={{ gap: 0 }}>
-        {/* Fret number label */}
-        {showFretLabel && (
-          <div
-            className="absolute text-xs text-muted-foreground font-mono"
-            style={{ left: -18, top: 0, lineHeight: '18px' }}
-          >
-            {baseFret}
-          </div>
-        )}
+      {/* Fret number + grid */}
+      <div className="flex items-start" style={{ gap: 4 }}>
+        {/* Fret number label (barre position) */}
+        <div style={{ width: 12, textAlign: 'right' }}>
+          {showFretLabel && (
+            <span
+              className="font-mono text-muted-foreground"
+              style={{ fontSize: 9, lineHeight: `${FRET_HEIGHT}px` }}
+            >
+              {baseFret}
+            </span>
+          )}
+        </div>
 
-        {/* Strings (columns) */}
-        {frets.map((fret, stringIdx) => (
-          <div key={stringIdx} className="relative" style={{ width: 14 }}>
-            {/* Nut or top border */}
+        {/* Fretboard grid */}
+        <div
+          className="relative"
+          style={{
+            width: GRID_W,
+            height: GRID_H,
+            // Nut: thick when open position, thin when barre
+            borderTop: showFretLabel
+              ? `1px solid var(--border)`
+              : `4px solid var(--foreground)`,
+            borderBottom: `1px solid var(--border)`,
+          }}
+        >
+          {/* String lines (6 vertical lines) */}
+          {Array.from({ length: STRING_COUNT }, (_, i) => (
             <div
+              key={i}
               style={{
-                height: showFretLabel ? 2 : 4,
-                background: showFretLabel ? 'hsl(var(--border))' : 'hsl(var(--foreground))',
-                margin: '0 2px',
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: i * STRING_SPACING,
+                width: 1,
+                background: 'var(--foreground)',
+                opacity: 0.35,
               }}
             />
-            {/* Fret cells */}
-            {Array.from({ length: FRETS_SHOWN }, (_, fretIdx) => {
-              // Open position (baseFret=0): rows represent frets 1-4 (nut is shown above)
-              // Barre position (baseFret>0): rows represent frets baseFret, baseFret+1, …
-              const absoluteFret = baseFret === 0 ? fretIdx + 1 : baseFret + fretIdx;
-              const hasDot = fret !== null && fret > 0 && fret === absoluteFret;
-              return (
-                <div
-                  key={fretIdx}
-                  className="flex items-center justify-center border-b border-border"
-                  style={{ height: 18, borderLeft: stringIdx === 0 ? '1px solid hsl(var(--border))' : undefined, borderRight: '1px solid hsl(var(--border))' }}
-                >
-                  {hasDot && (
-                    <div className="w-3 h-3 rounded-full bg-primary z-10" />
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        ))}
+          ))}
 
-        {/* Barre indicator — only for actual barre chords (not open position) */}
-        {barre !== null && barre > 0 && (
-          <div
-            className="absolute rounded-full bg-primary"
-            style={{
-              left: 2,
-              right: 2,
-              height: 8,
-              top: (showFretLabel ? 2 : 4) + (barre - baseFret) * 18 + 5,
-              zIndex: 5,
-            }}
-          />
-        )}
+          {/* Fret lines (horizontal, between frets) */}
+          {Array.from({ length: FRET_COUNT - 1 }, (_, i) => (
+            <div
+              key={i}
+              style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: (i + 1) * FRET_HEIGHT,
+                height: 1,
+                background: 'var(--border)',
+              }}
+            />
+          ))}
+
+          {/* Barre bar — only for transposed barre chords */}
+          {barre !== null && barre > 0 && (
+            <div
+              className="absolute rounded-full"
+              style={{
+                left: 0,
+                right: 0,
+                height: DOT_R * 2,
+                top: (barre - baseFret) * FRET_HEIGHT + FRET_HEIGHT / 2 - DOT_R,
+                background: 'var(--primary)',
+                zIndex: 5,
+              }}
+            />
+          )}
+
+          {/* Finger dots */}
+          {frets.map((fret, stringIdx) => {
+            if (fret === null || fret === 0) return null;
+            // Skip strings covered by the barre bar
+            if (barre !== null && fret === barre) return null;
+            const fretIdx = baseFret === 0 ? fret - 1 : fret - baseFret;
+            if (fretIdx < 0 || fretIdx >= FRET_COUNT) return null;
+            return (
+              <div
+                key={stringIdx}
+                className="absolute rounded-full"
+                style={{
+                  width: DOT_R * 2,
+                  height: DOT_R * 2,
+                  left: stringIdx * STRING_SPACING - DOT_R,
+                  top: fretIdx * FRET_HEIGHT + FRET_HEIGHT / 2 - DOT_R,
+                  background: 'var(--primary)',
+                  zIndex: 10,
+                }}
+              />
+            );
+          })}
+        </div>
       </div>
     </div>
   );
diff --git a/app/app/components/chord-diagram/piano-keys.tsx b/app/app/components/chord-diagram/piano-keys.tsx
index d24534f..1292216 100644
--- a/app/app/components/chord-diagram/piano-keys.tsx
+++ b/app/app/components/chord-diagram/piano-keys.tsx
@@ -43,7 +43,7 @@ export function PianoKeys({ notes }: Props) {
     return (
       <div
         className="flex items-center justify-center text-muted-foreground text-xs"
-        style={{ width: totalWidth, height: WHITE_KEY_H + 14 }}
+        style={{ width: totalWidth, height: WHITE_KEY_H + 26 }}
       >
         ?
       </div>
@@ -52,7 +52,7 @@ export function PianoKeys({ notes }: Props) {
 
   return (
     <div style={{ width: totalWidth }}>
-      {/* Keyboard — light container so keys are visible in any theme */}
+      {/* Keyboard — gray container makes keys visible in any theme */}
       <div
         className="relative rounded-sm"
         style={{ width: totalWidth, height: WHITE_KEY_H, background: '#d0d0d0' }}
@@ -69,21 +69,20 @@ export function PianoKeys({ notes }: Props) {
                 top: 0,
                 width: WHITE_KEY_W - 2,
                 height: WHITE_KEY_H - 1,
-                background: active ? 'hsl(var(--primary) / 0.2)' : 'white',
-                borderBottom: active
-                  ? '3px solid hsl(var(--primary))'
-                  : '1px solid #bbb',
+                background: 'white',
+                borderBottom: active ? '3px solid var(--primary)' : '1px solid #bbb',
               }}
             >
               {active && (
                 <div
-                  className="absolute rounded-full bg-primary"
+                  className="absolute rounded-full"
                   style={{
                     width: 10,
                     height: 10,
                     bottom: 10,
                     left: '50%',
                     transform: 'translateX(-50%)',
+                    background: 'var(--primary)',
                   }}
                 />
               )}
@@ -103,19 +102,18 @@ export function PianoKeys({ notes }: Props) {
                 top: 0,
                 width: BLACK_KEY_W,
                 height: BLACK_KEY_H,
-                background: active ? 'hsl(var(--primary))' : '#1c1c1c',
+                background: active ? 'var(--primary)' : '#1c1c1c',
               }}
             >
               {active && (
                 <div
                   className="absolute rounded-full bg-white"
                   style={{
-                    width: 10,
-                    height: 10,
-                    bottom: 4,
+                    width: 7,
+                    height: 7,
+                    bottom: 5,
                     left: '50%',
                     transform: 'translateX(-50%)',
-                    border: '2px solid hsl(var(--primary))',
                   }}
                 />
               )}
@@ -124,15 +122,21 @@ export function PianoKeys({ notes }: Props) {
         })}
       </div>
 
-      {/* Note labels below keyboard */}
+      {/* White key note labels */}
       <div className="flex" style={{ width: totalWidth, marginTop: 2 }}>
         {WHITE_KEYS.map((note) => {
           const active = activeChroma.has(NOTE_CHROMA[note]);
           return (
             <div
               key={note}
-              className={`text-center font-mono select-none ${active ? 'text-primary font-bold' : 'text-muted-foreground'}`}
-              style={{ width: WHITE_KEY_W, fontSize: 8, lineHeight: '12px' }}
+              className="text-center font-mono select-none"
+              style={{
+                width: WHITE_KEY_W,
+                fontSize: 8,
+                lineHeight: '12px',
+                color: active ? 'var(--primary)' : undefined,
+                fontWeight: active ? 700 : undefined,
+              }}
             >
               {note}
             </div>
@@ -140,13 +144,13 @@ 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">
+      {/* Active note names — clearly lists all notes including black keys */}
+      <div className="flex flex-wrap justify-center gap-1" style={{ marginTop: 2 }}>
         {notes.map((note) => (
           <span
             key={note}
-            className="font-mono font-semibold text-primary"
-            style={{ fontSize: 9 }}
+            className="font-mono font-semibold"
+            style={{ fontSize: 9, color: 'var(--primary)' }}
           >
             {note}
           </span>