Indicate applied and partially applied relations for multi-selection

[aditya1010-max]

Summary

This PR improves the discoverability of applied relations in the relations dropdown. While the dropdown already lists nearby relations, it is not currently clear which of those relations are applied to the current selection.

This change surfaces that information directly in the UI.

Behavior

• Relations applied to all selected entities are labeled “Applied”
• Relations applied to some selected entities are labeled “Partially Applied”

These labels reflect existing state only and do not alter how relations are created or managed.

Scope / Non-goals

• No changes to relation or membership logic
• Does not prevent duplicate relation members
• Does not introduce warnings or blocking behavior

More invasive approaches (such as enforcing constraints or modifying actions) are intentionally left out of scope for this PR.

This PR addresses one aspect of issue #10981.

[tordans]

@aditya1010-max before look into this…

• remember to use let/const for new code
• UI: add (a) space between word
• UI suggestion: I suggest to move the new feature to a pill/badge like look to the right of the line https://tailwindcss.com/plus/ui-blocks/application-ui/elements/badges
• please explain why this is a draft and what you plan to do before un-drafting
• please move the relevant parts of your comment on the issue here; we want the conversation about the implementation in one place (here); not scattered on issue and PR

UI:
I wonder if we want this red-green look here. Its more of a "warning", "all good" signal where this information is more of an FYI, right? We could make both just a gray FYI label… – Lets see what others say.

[tordans]

Dont quite see the value in having this extracted and then only used once.

Suggested change

	var count = relationCounts.get(entity.id) || 0;
	var flags = {
	isCommon: count === selectedEntities.length,
	isPartial: count > 0 && count < selectedEntities.length
	};
	result.push({
	relation: entity,
	value,
	display: baseDisplayLabel(entity)
	display: baseDisplayLabel(entity, flags),
	title: value,
	isCommon: flags.isCommon,
	isPartial: flags.isPartial
	const count = relationCounts.get(entity.id) || 0;
	result.push({
	relation: entity,
	value,
	display: baseDisplayLabel(entity, flags),
	title: value,
	isCommon: count === selectedEntities.length,
	isPartial: count > 0 && count < selectedEntities.length

[aditya1010-max]

Thanks- Agreed. Since it’s only used once, I’ll simplify this.

[aditya1010-max]

Thanks for the feedback.

I’ll update the new code accordingly and also fix the spacing issues.

I like the suggestion of moving this to a pill/badge-style element on the right. I’ll explore different implementations and update the UI based on that direction.

This PR is marked as draft to get early feedback and iterate on UI details. Before un-drafting, I plan to address the UI feedback and make sure the behavior is aligned with expectations.

Regarding the green/orange signaling, I agree it’s quite bold and doesn’t align well with the iD style. A neutral FYI-style label makes more sense here, and I’m happy to adjust based on what others think.

I’ll also take the other suggestions into consideration.

[aditya1010-max]

SCREENSHOTS

[aditya1010-max]

I have addressed the feedback above and pushed the latest updates.

I would really appreciate any additional thoughts on the UI direction, especially around font size, spacing, background/border colors, or overall badge styling. If there are existing patterns in iD that this should align more closely with, I am happy to adjust it accordingly.

I will keep this PR in draft for a few more days while I review edge cases and look into adding tests where appropriate. If there are specific scenarios you’d like me to cover, please let me know.

I’ll follow up here once that’s complete.