feat(14-05): convert tender-radar results-side components to useTranslations

Converts page.tsx, ResultsList, FilterPanel, SavedSearchBar, TenderDetail
and CoverageBanner from hardcoded German strings to
useTranslations('tenderRadar'). FilterPanel's Bundesland/CPV division
option labels are now looked up by stable code (NUTS-1 prefix / CPV
division code) while the underlying filter *value* sent to the backend
stays the canonical German string the API already matches against.
Portal display slugs (DÖE, DTVP, tender24, ...) in TenderDetail's
portalLabel() are left untranslated as proper-noun identifiers, not UI
copy. Updates the four affected component tests with a next-intl
useTranslations mock mirroring the marketplace test convention. Also
fixes an unrelated `t` parameter shadowing the translations function
inside ResultsList's triage batch-fetch (Rule 1).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-23 14:15:33 +02:00
parent d73171b052
commit 2ea02a2671
10 changed files with 338 additions and 230 deletions
@@ -1,6 +1,7 @@
'use client';
import { Suspense } from 'react';
import { useTranslations } from 'next-intl';
import { useRouter, useSearchParams } from 'next/navigation';
import { CoverageBanner } from './components/CoverageBanner';
import { FilterPanel } from './components/FilterPanel';
@@ -34,11 +35,11 @@ import { TenderDetail } from './components/TenderDetail';
* uses, so saving/loading a profile is congruent with the filter state the
* user currently sees.
*
* Intentional hardcoded German strings: full i18n (next-intl message
* keys) is CONFIG-03, planned for Phase 14 (Research Open Question 3,
* RESOLVED).
* Plan 14-05 (CONFIG-03/UI-06, D-10): all strings render via the
* tenderRadar i18n namespace — no more hardcoded German literals.
*/
function TenderRadarContent() {
const t = useTranslations('tenderRadar');
const router = useRouter();
const searchParams = useSearchParams();
const tenderId = searchParams.get('tender');
@@ -53,7 +54,7 @@ function TenderRadarContent() {
<div className="mx-auto max-w-5xl space-y-6 p-6">
<div>
<h1 className="text-2xl font-bold tracking-tight">
Ausschreibungs-Radar
{t('page.title')}
</h1>
</div>
@@ -67,15 +68,18 @@ function TenderRadarContent() {
);
}
function TenderRadarFallback() {
const t = useTranslations('tenderRadar');
return (
<div className="mx-auto max-w-5xl space-y-6 p-6">
<p className="text-sm text-muted-foreground">{t('page.loading')}</p>
</div>
);
}
export default function TenderRadarPage() {
return (
<Suspense
fallback={
<div className="mx-auto max-w-5xl space-y-6 p-6">
<p className="text-sm text-muted-foreground">Lädt…</p>
</div>
}
>
<Suspense fallback={<TenderRadarFallback />}>
<TenderRadarContent />
</Suspense>
);