Better system for messages

[alexmojaki]

Messages are the boxes that appear sometimes underneath the course text on the left after a user runs some code that didn't pass the current step. They mostly come from 3 things:

• Specific steps can return specific messages (ideally via an inner MessageStep) to deal with anticipated problems.
• Linting
• A failed test in an ExerciseStep

Once a message appears, the UI remembers it, and if another identical message is emitted it won't be shown again. Refreshing clears this state.

Some problems with this:

• The system assumes that the user is currently trying to solve the current step, not just experimenting with code, which we don't want to discourage.
• Sometimes the user may need to see the same message again.
• With ExerciseSteps, a new message may appear every time the user submits something wrong, which can get annoying quickly. Early in the course these are not shown when we assume the user can see the problem in their output (a potential problem in itself) but this doesn't happen when the exercise asks the user to write a function. This in itself could be fixed but it becomes especially tricky when input() is involved.

There needs to be a good UX for messages in the main course and I'd like it to also work in a full screen IDE. Even an IDE separate from the course should have linting.

Broadly I want a system that:

• Lets the user know when their code has led to some messages.
• Distinguishes between new messages and old ones, without having to discard old messages completely or supress them from being shown again.
• Doesn't annoy the user.

I'm vaguely imagining some sort of button/icon somewhere that:

• Animates when a new message appears
• Shows counts of different kinds of messages, like the notifications count badge/bubble on an app icon on a phone.
• Can be expanded by the user to see the messages within
• Has categories like 'brand new', 'produced by your last run but you've seen it before', and 'past history', but with better names.