Display chord summary at the beginning of songs

[KaykCaputo]

Description

Add a visual summary of all chords used in a song at the top of the lyrics screen. This helps musicians quickly identify which chords they need to know before playing the song.

User Story

As a musician, I want to see all the chords used in a song at the beginning so that I can prepare and practice unfamiliar chords before playing.

Current Behavior

• Chords are only displayed inline with the lyrics
• Users must scroll through the entire song to find all chords
• No quick overview of required chords

Proposed Behavior

Display a chord summary section at the top of the lyrics, showing:

• All unique chords used in the song
• Chords displayed as clickable chips/badges
• Optional: Visual representation using the guitar.json data

Implementation Approach

Step 1: Extract Chords from Lyrics

def extract_chords(self, lyrics_text):
    """Extract all unique chords from parsed lyrics."""
    # Match chords in [b][color=44AAFF]CHORD[/color][/b] format
    pattern = r'\[b\]\[color=44AAFF\](.*?)\[/color\]\[/b\]'
    chords = re.findall(pattern, lyrics_text)
    
    # Remove duplicates and sort
    unique_chords = sorted(set(chords))
    return unique_chords

Step 2: Create Chord Summary Widget

def create_chord_summary(self, chords):
    """Create a visual summary of chords."""
    from kivymd.uix.chip import MDChip
    from kivymd.uix.boxlayout import MDBoxLayout
    
    summary = MDBoxLayout(
        orientation='horizontal',
        adaptive_height=True,
        spacing=dp(8),
        padding=[dp(8), dp(16)]
    )
    
    title = MDLabel(
        text="Chords used:",
        size_hint=(None, None),
        height=dp(30),
        bold=True
    )
    summary.add_widget(title)
    
    for chord in chords:
        chip = MDChip(
            text=chord,
            theme_text_color="Custom",
            text_color=(0.267, 0.667, 1, 1),
            md_bg_color=(0.2, 0.2, 0.2, 1)
        )
        chip.bind(on_release=lambda x, c=chord: self.show_chord_diagram(c))
        summary.add_widget(chip)
    
    return summary

Future Enhancements

• Display chord diagrams from guitar.json when clicking on a chord
• Show chord fingering positions in a popup/bottom sheet
• Highlight the current chord being played (for auto-scroll feature)
• Allow filtering/searching chords in the summary

Benefits

• Quick overview of song complexity
• Better preparation for musicians
• Utilizes the existing guitar.json database
• Improves learning experience
• Professional songbook appearance

Related Files

• main.py - Main implementation (lines 254-296)
• guitar.json - Chord diagram database

Acceptance Criteria

• All unique chords are extracted correctly
• Chords are displayed at the top of the lyrics screen
• Chord summary is visually distinct from lyrics
• Works with both simple (C, Am) and complex chords (Dm7, Cadd9)
• No performance impact on rendering
• Maintains existing functionality