Make UI language, timestamps and live feedback consistent

src/routes/hosts/+page.svelte

@@ -3,6 +3,7 @@
     import { page } from '$app/stores';
     import { pollVisible } from '$ui/poll.js';
     import { hostListStatus, stableHostOrder } from '$ui/host-overview.js';
+    import { countLabel, plural } from '$ui/plural.js';
     import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
     import Button from '$ui/components/primitives/Button.svelte';
     import AddHostDrawer from '$ui/components/AddHostDrawer.svelte';
@@ -52,7 +53,7 @@
     </SectionHeader>
     {#if error}<p role="alert" class="ui-error">{error} Showing the last loaded hosts. <Button variant="ghost" size="sm" onclick={() => load()}>Retry</Button></p>{/if}
     {#if hosts.length}
-        <div class="summary"><span>{hosts.length} host{hosts.length === 1 ? '' : 's'} · {ready === hosts.length ? 'All ready' : `${ready} ready`}</span>{#if attention}<button onclick={() => { status = 'attention'; search = ''; }}>{attention} need attention</button>{/if}</div>
+        <div class="summary"><span>{countLabel(hosts.length, 'host')} · {ready === hosts.length ? 'All ready' : `${ready} ready`}</span>{#if attention}<button onclick={() => { status = 'attention'; search = ''; }}>{attention} {plural(attention, 'needs', 'need')} attention</button>{/if}</div>
         {#if filtersVisible}<div class="filters">
             <input type="search" aria-label="Search hosts" placeholder="Search hosts…" bind:value={search} />
             <select aria-label="Filter hosts by status" bind:value={status}><option value="">All statuses</option><option value="attention">Needs attention</option><option value="offline">Offline</option><option value="preparing">Preparing</option><option value="draining">Draining</option><option value="disabled">Disabled</option><option value="deleting">Deleting</option><option value="ready">Ready</option></select>