whattheflat/JamBuddy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

compact layout, instrument select near fretboard, collapsible tuner, chord sensitivity tuning

Browse Source
This commit is contained in:
vadimwit
2026-03-06 00:08:15 +00:00
parent d3a2840454
commit ca6b901bc8
5 changed files with 64 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChordDisplay.jsx
+4 -4
View File
@@ -3,13 +3,13 @@ export default function ChordDisplay({ history }) {
const past = history.slice(-8, -1)
return (
<div className="bg-panel border border-border rounded-2xl p-6">
<p className="text-sm text-gray-500 uppercase tracking-widest mb-3">Chord</p>
<p className="text-5xl font-bold text-amber-400">
<div className="bg-panel border border-border rounded-2xl p-4">
<p className="text-xs text-gray-500 uppercase tracking-widest mb-2">Chord</p>
<p className="text-4xl font-bold text-amber-400">
{current ?? '—'}
</p>
{past.length > 0 && (
<div className="mt-4 flex gap-2 flex-wrap">
<div className="mt-2 flex gap-2 flex-wrap">
{past.map((chord, i) => (
<span
key={i}
src/components/KeyDisplay.jsx
+3 -3
View File
@@ -3,13 +3,13 @@ export default function KeyDisplay({ keyInfo, locked = false }) {
const pct = confidence ? Math.round(confidence * 100) : 0
return (
<div className="bg-panel border border-border rounded-2xl p-6 text-center">
<p className="text-sm text-gray-500 uppercase tracking-widest mb-1">
<div className="bg-panel border border-border rounded-2xl p-4 text-center">
<p className="text-xs text-gray-500 uppercase tracking-widest mb-1">
{locked ? '🔒 Key (locked)' : 'Detected Key'}
</p>
{root ? (
<>
<p className="text-6xl font-bold text-accent leading-none">
<p className="text-5xl font-bold text-accent leading-none">
{root}
<span className="text-3xl text-gray-400 ml-2">{mode}</span>
</p>
src/components/ProgressionSuggestions.jsx
+6 -6
View File
@@ -8,17 +8,17 @@ export default function ProgressionSuggestions({ keyInfo }) {
const progressions = getSuggestedProgressions(root, mode)
return (
<div className="bg-panel border border-border rounded-2xl p-6">
<p className="text-sm text-gray-500 uppercase tracking-widest mb-4">
<div className="bg-panel border border-border rounded-2xl p-4">
<p className="text-xs text-gray-500 uppercase tracking-widest mb-2">
Progressions in {root} {mode}
</p>
<div className="space-y-3">
<div className="space-y-2">
{progressions.map(prog => (
<div key={prog.genre} className="flex items-center gap-3">
<div key={prog.genre} className="flex items-center gap-2">
<span className="text-xs text-gray-500 w-10 shrink-0">{prog.genre}</span>
<div className="flex gap-2 flex-wrap">
<div className="flex gap-1.5 flex-wrap">
{prog.chords.map((chord, i) => (
<span key={i} className="px-3 py-1 bg-border rounded text-sm font-medium">
<span key={i} className="px-2 py-0.5 bg-border rounded text-sm font-medium">
{chord}
<span className="ml-1 text-gray-600 text-xs">({prog.rn[i]})</span>
</span>
src/components/SafeNotes.jsx
+5 -5
View File
@@ -12,15 +12,15 @@ export default function SafeNotes({ keyInfo, currentChord }) {
const chordTones = currentChord ? getChordTones(currentChord) : []
return (
<div className="bg-panel border border-border rounded-2xl p-6">
<p className="text-sm text-gray-500 uppercase tracking-widest mb-4">Safe Notes</p>
<div className="flex gap-2 flex-wrap">
<div className="bg-panel border border-border rounded-2xl p-4">
<p className="text-xs text-gray-500 uppercase tracking-widest mb-2">Safe Notes</p>
<div className="flex gap-1.5 flex-wrap">
{ALL_NOTES.map(note => {
const isChordTone = chordTones.includes(note)
const isPenta = penta.includes(note)
const isScale = full.includes(note)
let cls = 'px-3 py-2 rounded-lg text-sm font-semibold border transition-all '
let cls = 'px-2.5 py-1.5 rounded-lg text-sm font-semibold border transition-all '
if (isChordTone) {
cls += 'bg-accent text-white border-accent scale-105'
} else if (isPenta) {
@@ -36,7 +36,7 @@ export default function SafeNotes({ keyInfo, currentChord }) {
)
})}
</div>
<div className="mt-3 flex gap-4 text-xs text-gray-500">
<div className="mt-2 flex gap-4 text-xs text-gray-500">
<span><span className="text-accent">■</span> Chord tone</span>
<span><span className="text-accent/60">■</span> Pentatonic</span>
<span><span className="text-gray-500">■</span> Scale</span>