Merge remote-tracking branch 'origin/main'

packages/app/e2e/support/helpers/hosts.ts

@@ -130,6 +130,13 @@ export async function openSidebarDisplayPreferences(page: Page): Promise<void> {
   });
 }
 
+// Host filters live a page below the display-preferences root, so the filter rows only exist
+// after walking into that branch.
+export async function openSidebarHostFilter(page: Page): Promise<void> {
+  await openSidebarDisplayPreferences(page);
+  await page.getByTestId("sidebar-display-host-filter").click();
+}
+
 // A host's filter row carries a status dot on the left next to its label.
 export async function expectHostFilterRow(page: Page, serverId: string): Promise<void> {
   await expect(page.getByTestId(`sidebar-host-filter-${serverId}`)).toBeVisible();
@@ -144,32 +151,6 @@ export async function selectAllHostsFilter(page: Page): Promise<void> {
   await page.getByTestId("sidebar-host-filter-all").click();
 }
 
-// Playwright reports resolved colors, so the expected value is derived from the same identity
-// table the app reads. A hex literal in the test would be a second copy of the palette.
-function toRgb(hex: string): string {
-  const { r, g, b } = parseHex(hex);
-  return `rgb(${r}, ${g}, ${b})`;
-}
-
-function toRgba(hex: string, alpha: number): string {
-  const { r, g, b } = parseHex(hex);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
-interface RgbChannels {
-  r: number;
-  g: number;
-  b: number;
-}
-
-function parseHex(hex: string): RgbChannels {
-  return {
-    r: Number.parseInt(hex.slice(1, 3), 16),
-    g: Number.parseInt(hex.slice(3, 5), 16),
-    b: Number.parseInt(hex.slice(5, 7), 16),
-  };
-}
-
 export async function openHostAppearanceSettings(page: Page, serverId: string): Promise<void> {
   await openSettings(page);
   await selectSettingsHost(page, serverId);
@@ -242,17 +223,16 @@ export async function expectNoHostBadge(page: Page, target: HostBadgeTarget): Pr
   await expect(hostBadge(page, target)).toHaveCount(0, { timeout: 15_000 });
 }
 
+// The host sits on the meta line as plain secondary text, so its identity colour lives on the
+// server icon alone. The label stays muted like every other item on that line — asserting a
+// tinted label or a pill fill would re-assert the design the meta row replaced.
 export async function expectHostBadgeTinted(
   page: Page,
   target: HostBadgeTarget & { color: IdentityColorName },
 ): Promise<void> {
   const badge = hostBadge(page, target);
   await expect(badge).toBeVisible({ timeout: 15_000 });
-  await expect(badge.getByText(target.hostName)).toHaveCSS(
-    "color",
-    toRgb(identityColor(target.color)),
-  );
-  await expect(badge).toHaveCSS("background-color", toRgba(identityColor(target.color), 0.1));
+  await expect(badge).toHaveText(target.hostName);
   await expect(badge.locator("svg")).toHaveAttribute("stroke", identityColor(target.color));
 }
 
@@ -264,11 +244,6 @@ export async function expectHostAppearancePreview(
   await expect(preview).toBeVisible();
   const badge = preview.getByTestId(`host-badge-${input.serverId}`);
   await expect(badge).toHaveText(input.hostName);
-  await expect(badge.getByText(input.hostName)).toHaveCSS(
-    "color",
-    toRgb(identityColor(input.color)),
-  );
-  await expect(badge).toHaveCSS("background-color", toRgba(identityColor(input.color), 0.1));
   await expect(badge.locator("svg")).toHaveAttribute("stroke", identityColor(input.color));
 }