Template Part: Make it clearer which is currently in use in replace modal

[annezazu]

What problem does this address?

This came up as part of the FSE Outreach Program's twelfth call for testing:

(In modul) Current in use template part should always show in the top left corner with the words in use/current (perhaps also an extra border around it or some other visual mark to say current in use). Making it obvious which header/template part is currently in use.

current.headeer.mov

What is your proposed solution?

Have a way to indicate the current in use template part. The same likely needs to happen when switching between pattern options as well as it may not be clear at a glance what is currently in use.

cc @jameskoster since I know you're exploring things here!

[jameskoster]

We often use blue outlines to indicate selection throughout the UI. This convention could probably work here as well:

What do you think?

[annezazu]

Ship it. I dig (as long as this will also be clear from an accessibility standpoint too).

[paaljoachim]

That sounds helpful!

[ribaricplusplus]

I'm not sure if it makes sense to implement this for patterns. What happens when a user selects a pattern and then changes it? By change, I mean change the properties of the blocks in the pattern, for example. It would be confusing to still show the pattern as "selected" in the modal, wouldn't it?

Also, the current behavior is to remove the template part which is in use from the modal. So I'm not sure that the issue demonstrated in the video, which shows patterns, and the proposed design, which shows template parts, are on the same page.