fix(i18n): wire useTranslation into SetupsView — close verification gap

Replace hardcoded English strings in SetupsView.tsx with t() calls
using existing setups namespace keys. Closes the 1 gap found during
phase 34 verification.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-18 14:41:23 +02:00
parent fefef38e9b
commit dbab84ef2a

View File

@@ -1,8 +1,10 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useCreateSetup, useSetups } from "../hooks/useSetups";
import { SetupCard } from "./SetupCard";
export function SetupsView() {
const { t } = useTranslation(["setups", "common"]);
const [newSetupName, setNewSetupName] = useState("");
const { data: setups, isLoading } = useSetups();
const createSetup = useCreateSetup();
@@ -22,7 +24,7 @@ export function SetupsView() {
type="text"
value={newSetupName}
onChange={(e) => setNewSetupName(e.target.value)}
placeholder="New setup name..."
placeholder={t("setups:namePlaceholder")}
className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
/>
<button
@@ -30,7 +32,7 @@ export function SetupsView() {
disabled={!newSetupName.trim() || createSetup.isPending}
className="px-4 py-2 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
>
{createSetup.isPending ? "Creating..." : "Create"}
{createSetup.isPending ? t("setups:creating") : t("common:actions.create")}
</button>
</form>
@@ -51,7 +53,7 @@ export function SetupsView() {
<div className="py-16">
<div className="max-w-lg mx-auto text-center">
<h2 className="text-xl font-semibold text-gray-900 mb-8">
Build your perfect loadout
{t("setups:emptyState.title")}
</h2>
<div className="space-y-6 text-left mb-10">
<div className="flex items-start gap-4">
@@ -59,9 +61,9 @@ export function SetupsView() {
1
</div>
<div>
<p className="font-medium text-gray-900">Create a setup</p>
<p className="font-medium text-gray-900">{t("setups:emptyState.step1Title")}</p>
<p className="text-sm text-gray-500">
Name your loadout for a specific trip or activity
{t("setups:emptyState.step1Description")}
</p>
</div>
</div>
@@ -70,9 +72,9 @@ export function SetupsView() {
2
</div>
<div>
<p className="font-medium text-gray-900">Add items</p>
<p className="font-medium text-gray-900">{t("setups:emptyState.step2Title")}</p>
<p className="text-sm text-gray-500">
Pick gear from your collection to include in the setup
{t("setups:emptyState.step2Description")}
</p>
</div>
</div>
@@ -81,9 +83,9 @@ export function SetupsView() {
3
</div>
<div>
<p className="font-medium text-gray-900">Track weight</p>
<p className="font-medium text-gray-900">{t("setups:emptyState.step3Title")}</p>
<p className="text-sm text-gray-500">
See weight breakdown and optimize your pack
{t("setups:emptyState.step3Description")}
</p>
</div>
</div>