refactor(app): give the host badge one home

The server glyph, its identity-colour table and the muted label lived inside
the sidebar meta row, and the three stores that decide whether a host has a
badge at all were assembled at one call site. Both are about to have a second
caller in the workspace header.

Move the badge to hosts/host-badge and the resolution to useHostBadges. The
badge now owns its glyph size, and the meta row matches it, since it is the one
item on that line that also appears off it.

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

@@ -214,7 +214,7 @@ export async function chooseHostBadgeDisplay(
 function hostBadge(page: Page, input: HostBadgeTarget) {
   return page
     .getByTestId(`sidebar-workspace-row-${input.serverId}:${input.workspaceId}`)
-    .getByTestId(`sidebar-host-badge-${input.serverId}`);
+    .getByTestId(`host-badge-${input.serverId}`);
 }
 
 interface HostBadgeTarget {
@@ -262,7 +262,7 @@ export async function expectHostAppearancePreview(
 ): Promise<void> {
   const preview = page.getByTestId("host-appearance-preview");
   await expect(preview).toBeVisible();
-  const badge = preview.getByTestId(`sidebar-host-badge-${input.serverId}`);
+  const badge = preview.getByTestId(`host-badge-${input.serverId}`);
   await expect(badge).toHaveText(input.hostName);
   await expect(badge.getByText(input.hostName)).toHaveCSS(
     "color",