trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix i18n: use planner namespace in sidebar components

Browse source 
WaypointSidebar and DayBreakdown were calling useTranslation() without
the "planner" namespace, then using fully qualified keys like
"planner.multiDay.overnight". Fixed to use useTranslation("planner")
and drop the prefix from all t() calls.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-10 23:59:27 +02:00
parent 3f0fe859a5
commit a21bf16e73
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
2 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/planner/app/components/DayBreakdown.tsx
View file

@ -8,7 +8,7 @@ interface DayBreakdownProps {
}
export function DayBreakdown({ days, children }: DayBreakdownProps) {
const { t } = useTranslation();
const { t } = useTranslation("planner");
const [expandedDay, setExpandedDay] = useState(1);
return (
@ -22,7 +22,7 @@ export function DayBreakdown({ days, children }: DayBreakdownProps) {
className="flex w-full items-center gap-2 border-b border-gray-100 px-4 py-2 text-left hover:bg-gray-50"
>
<span className="text-xs font-semibold text-gray-500">
{t("planner.multiDay.dayLabel", { n: day.dayNumber })}
{t("multiDay.dayLabel", { n: day.dayNumber })}
</span>
<span className="min-w-0 flex-1 truncate text-xs text-gray-600">
{day.startName && day.endName

16
apps/planner/app/components/WaypointSidebar.tsx
View file

@ -33,7 +33,7 @@ interface WaypointSidebarProps {
}
export function WaypointSidebar({ yjs, routeStats, days }: WaypointSidebarProps) {
const { t } = useTranslation();
const { t } = useTranslation("planner");
const [waypoints, setWaypoints] = useState<WaypointData[]>([]);
useEffect(() => {
@ -97,7 +97,7 @@ export function WaypointSidebar({ yjs, routeStats, days }: WaypointSidebarProps)
</div>
{wp.overnight && (
<span className="shrink-0 rounded px-1 py-0.5 text-[10px] font-medium text-amber-700 bg-amber-50 border border-amber-200">
{t("planner.multiDay.overnight")}
{t("multiDay.overnight")}
</span>
)}
<div className="flex gap-1 opacity-0 group-hover:opacity-100">
@ -106,7 +106,7 @@ export function WaypointSidebar({ yjs, routeStats, days }: WaypointSidebarProps)
<button
onClick={() => toggleOvernight(i)}
className={`rounded p-1 ${wp.overnight ? "text-amber-600 hover:bg-amber-100" : "text-gray-400 hover:bg-gray-200 hover:text-gray-600"}`}
title={wp.overnight ? t("planner.multiDay.removeOvernight") : t("planner.multiDay.markOvernight")}
title={wp.overnight ? t("multiDay.removeOvernight") : t("multiDay.markOvernight")}
>
☾
</button>
@ -145,13 +145,13 @@ export function WaypointSidebar({ yjs, routeStats, days }: WaypointSidebarProps)
{/* Header with route summary */}
<div className="border-b border-gray-200 px-4 py-3">
<h2 className="text-sm font-medium text-gray-900">
{t("planner.sidebar.waypoints")} ({waypoints.length})
{t("sidebar.waypoints")} ({waypoints.length})
</h2>
{routeStats && routeStats.distance !== undefined && (
<p className="mt-0.5 text-xs text-gray-500">
{(routeStats.distance / 1000).toFixed(1)} km
{routeStats.elevationGain !== undefined && ` · ↑${routeStats.elevationGain} m`}
{hasMultipleDays && ` · ${t("planner.multiDay.dayCount", { count: days.length })}`}
{hasMultipleDays && ` · ${t("multiDay.dayCount", { count: days.length })}`}
</p>
)}
</div>
@ -185,14 +185,14 @@ export function WaypointSidebar({ yjs, routeStats, days }: WaypointSidebarProps)
<p className="font-medium text-gray-900">
{(routeStats.distance / 1000).toFixed(1)} km
</p>
<p className="text-gray-500">{t("planner.multiDay.distance")}</p>
<p className="text-gray-500">{t("multiDay.distance")}</p>
</div>
{routeStats.elevationGain !== undefined && (
<div>
<p className="font-medium text-gray-900">
↑ {routeStats.elevationGain} m
</p>
<p className="text-gray-500">{t("planner.multiDay.ascent")}</p>
<p className="text-gray-500">{t("multiDay.ascent")}</p>
</div>
)}
{routeStats.elevationLoss !== undefined && (
@ -200,7 +200,7 @@ export function WaypointSidebar({ yjs, routeStats, days }: WaypointSidebarProps)
<p className="font-medium text-gray-900">
↓ {routeStats.elevationLoss} m
</p>
<p className="text-gray-500">{t("planner.multiDay.descent")}</p>
<p className="text-gray-500">{t("multiDay.descent")}</p>
</div>
)}
</div>