Support preference tags in settings view

[JonasHelming]

What it does

Implement visualization of preference tags in Theia's settings UI, similar to VS Code's behavior. Previously, preferences with tags defined in their schema (e.g., tags: ['experimental']) were not displayed in the UI, making it difficult for users to identify special preference categories.

How to test

Can also be tested in #16784

1. Set a tag on a preference (e.g. tags: ['experimental'])
2. Navigate to File > Preferences > Settings (or use the command palette: "Preferences: Open Settings (UI)") and look at the preference
3. Verify that:
   • Tags appear as styled badges next to the preference name
   • Multiple tags are displayed with proper spacing
   • Tags follow the theme colors and remain readable in both light and dark themes
   • The tags don't interfere with other UI elements (prefix, suffix, modified indicators)

Breaking changes

• This PR introduces breaking changes and requires careful review. If yes, the breaking changes section in the changelog has been updated.

Attribution

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines
• User-facing text is internationalized using the nls service (for details, please see the Internationalization/Localization section in the Coding Guidelines)

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[ndoschek]

Thanks @JonasHelming, this works and looks great and is a nice improvement for the settings UI! 🎉
I added two comments inline, would be great if you could have a look when you have some time.

Besides that, I noticed our settings UI does not support searching for tags, although the PreferenceSchema descriptions says so, however this should not block this PR and we can look at this in a follow up as well, from my POV.

[ndoschek]

I was missing a proper title on hover for the experimental tag for example, as it just showed the preference id.
Having a quick look at VS Code there are good default strings we should reuse too.
Since extensions can also contribute preferences with tags, I would not manipulate the tag, but that's just a personal preference.

However I would strongly suggest to reuse the available descriptions and labels, e.g. something like:

Suggested change

	tags.forEach(tag => {
	const tagElement = document.createElement('span');
	tagElement.classList.add('preference-tag');
	tagElement.textContent = tag.charAt(0).toUpperCase() + tag.slice(1);
	tagsWrapper.appendChild(tagElement);
	});
	const PREVIEW_INDICATOR_DESCRIPTION = nls.localizeByDefault(
	'Preview setting: this setting controls a new feature that is still under refinement yet ready to use. Feedback is welcome.');
	const EXPERIMENTAL_INDICATOR_DESCRIPTION = nls.localizeByDefault(
	'Experimental setting: this setting controls a new feature that is actively being developed and may be unstable. It is subject to change or removal.');
	tags.forEach(tag => {
	const tagElement = document.createElement('span');
	const isExperimentalSetting = tag === 'experimental';
	const isPreviewSetting = tag === 'preview';
	tagElement.classList.add('preference-tag');
	tagElement.textContent = isExperimentalSetting ? nls.localizeByDefault('Experimental') :
	isPreviewSetting ? nls.localizeByDefault('Preview') : tag;
	tagElement.title = isExperimentalSetting ? EXPERIMENTAL_INDICATOR_DESCRIPTION :
	isPreviewSetting ? PREVIEW_INDICATOR_DESCRIPTION : tag;
	tagsWrapper.appendChild(tagElement);
	});

[ndoschek]

For the px values I would prefer to reuse css variables as well wherever possible, e.g. for example we did this also in this recent PR: https://github.com/eclipse-theia/theia/pull/16749/changes#diff-0ecd014bbc1720277b7d8e99100329ae021f624d91392c0d256c33942de8ec32