Highlight / Pulse the instrument button when its associated instrument is played

Feature Description

These are the instrument buttons:

Each instrument button belongs to a specific instrument. When you click on it the bottom half of the UI is used to configure that specific instrument. Or in other words, click on it changes the "Selected Sound" to be the one that is associated with that button.

One improvement we can make here is light up the button if its associated instrument is played. The active state is already a glow/light up effect, we could pulse to that state when the instrument is played. If the button is active, maybe we pulse to slightly dim it for a short duration?

To play a sound while developing, you'll need cmajor tools installed in vscode: https://github.com/lilyvanoekel/percupuff?tab=readme-ov-file#building-and-running

Run Percupuff using Cmajor: Run patch in the command palette and note the keyboard interface:

If you drag your mouse over the keyboard you should hear some of the drum sounds play.

Motivation / Use Case

It's a nice effect, but might also help to know what sound it is you're hearing, and where to click to configure it.

Alternatives Considered

No response

Additional Context

This ticket does assume some Cmajor knowledge, but it might be not too bad. The data needed to work with is already present in the front-end, have a look at view/src/components/instrument-config/MidiAssignment.tsx, specifically this part:

useEffect(() => {
    const patchConnection = getPatchConnection();

    const midiNoteOn = (midiNote: any) => {
      if (isRecording) {
        updateParam(midiParam, midiNote.pitch);
      }
    };

    patchConnection?.addEndpointListener("noteOn", midiNoteOn);
    return () => {
      patchConnection?.removeEndpointListener("noteOn", midiNoteOn);
    };
  });