feat(frontend): display discouraged feature information (#1824)

* feat(frontend): display discouraged feature information

This commit implements the frontend components to display information about discouraged features, building on the recent API additions.

- A prominent "Discouraged" notice is now displayed on the feature page for any feature marked as such. This notice explains why the feature is discouraged and offers alternatives if available.
- A new "discouraged" icon and chip style are used in the feature overview and on the feature page to clearly label these features.
- E2E tests and screenshot snapshots have been added to verify the new UI for discouraged features.
- The fake data generation script has been updated to include discouraged features for local development and testing.

* add unit tests

* move banner above breadcrumbs

* use img tag

Author: jcscottiii

e2e/tests/404.spec.ts-snapshots/not-found-error-page-similar-results-chromium-linux.png

@@ -24,6 +24,8 @@ test.beforeEach(async ({page}) => {
 const featureID = 'anchor-positioning';
 const featureName = 'Anchor Positioning';
 
+const discouragedFeatureId = 'discouraged';
+
 test('matches the screenshot', async ({page}) => {
   await page.goto(`http://localhost:5555/features/${featureID}`);
 
@@ -37,6 +39,19 @@ test('matches the screenshot', async ({page}) => {
   await expect(pageContainer).toHaveScreenshot();
 });
 
+test('matches the screenshot for a discouraged feature', async ({page}) => {
+  await page.goto(`http://localhost:5555/features/${discouragedFeatureId}`);
+
+  // Wait for the chart container to exist
+  await page.waitForSelector('#feature-wpt-implementation-progress-0-complete');
+
+  // Wait specifically for the "Baseline since" text
+  await page.waitForSelector('sl-card.wptScore .avail >> text=Baseline since');
+
+  const pageContainer = page.locator('.page-container');
+  await expect(pageContainer).toHaveScreenshot();
+});
+
 test('chart width resizes with window', async ({page}) => {
   await page.goto(`http://localhost:5555/features/${featureID}`);
   await page.waitForSelector('#feature-wpt-implementation-progress-0-complete');