-
+
- One step left
+ {t("home.onboarding.title")}
- Complete onboarding in Settings to start your practice.
+ {t("home.onboarding.description")}
router.push("/settings")}
className="py-2.5 px-5 rounded-lg bg-amber text-white font-medium text-sm transition-all hover:bg-amber/90 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-amber focus:ring-offset-2"
>
- Go to Settings
+ {t("home.onboarding.cta")}
@@ -119,37 +122,37 @@ export default function HomePage() {
const metrics = state
? [
- { label: "Attention", value: state.attentionLevel, color: "amber" as const },
- { label: "Emotion", value: state.emotionStability, color: "sage" as const },
- { label: "Stress", value: state.stressLevel, color: "warning" as const },
- { label: "Consistency", value: state.consistencyScore, color: "info" as const },
+ { label: t("home.metrics.attention"), value: state.attentionLevel, color: "amber" as const },
+ { label: t("home.metrics.emotion"), value: state.emotionStability, color: "sage" as const },
+ { label: t("home.metrics.stress"), value: state.stressLevel, color: "warning" as const },
+ { label: t("home.metrics.consistency"), value: state.consistencyScore, color: "info" as const },
]
: [];
return (
-
+
{/* State overview */}
{state && (
- Streak
+ {t("home.stats.streak")}
{state.streakDays}
-
days
+
{t("home.stats.streak_unit")}
- Sessions
+ {t("home.stats.sessions")}
{state.totalSessionsCompleted}
-
total
+
{t("home.stats.sessions_unit")}
)}
@@ -158,7 +161,7 @@ export default function HomePage() {
{state && (
- Core metrics
+ {t("home.metrics.title")}
{metrics.map((m) => (
- Today’s practice
+ {t("home.task.heading")}
{task ? (
- {formatTaskType(task.type)}
+ {formatTaskType(task.type, t)}
- {formatDifficulty(task.difficulty)} · {task.duration}m
+ {formatDifficulty(task.difficulty, t)} · {task.duration}m
- {formatTaskType(task.type)} practice
+ {formatTaskType(task.type, t)} practice
{task.description}
@@ -201,16 +204,16 @@ export default function HomePage() {
)}
router.push(`/practice?taskId=${task.id}`)}
+ onClick={() => router.push(`/practice?id=${task.id}`)}
className="w-full py-3 px-6 rounded-lg bg-ink dark:bg-[#F3EFE8] text-cream dark:text-[#1E1A14] font-medium text-base transition-all hover:opacity-90 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-amber focus:ring-offset-2"
>
- Begin practice
+ {t("home.task.begin")}
) : (
- No task for today yet. Generate one to start your practice.
+ {t("home.task.no_task")}
{genError && (
{genError}
@@ -220,7 +223,7 @@ export default function HomePage() {
disabled={generating}
className="w-full py-3 px-6 rounded-lg bg-amber text-white font-medium text-base transition-all hover:bg-amber/90 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-amber focus:ring-offset-2 disabled:opacity-50"
>
- {generating ? "Generating..." : "Generate today's task"}
+ {generating ? t("home.task.generating") : t("home.task.generate")}
)}
@@ -230,36 +233,19 @@ export default function HomePage() {
}
function Greeting({ firstName }: { firstName: string | null }) {
+ const { t } = useI18n();
const hour = new Date().getHours();
- const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
- const name = firstName || "there";
+ const greetingKey =
+ hour < 12 ? "home.greeting.morning" : hour < 18 ? "home.greeting.afternoon" : "home.greeting.evening";
+ const greeting = t(greetingKey);
+ const name = firstName || t("home.greeting.fallback_name");
return (
{greeting}, {name}
-
Your practice is waiting.
+
{t("home.greeting.subtitle")}
);
}
-
-function formatTaskType(type: string): string {
- const labels: Record = {
- attention_training: "Attention",
- emotion_awareness: "Emotion",
- stress_regulation: "Stress",
- cognitive_clarity: "Clarity",
- integration: "Integration",
- };
- return labels[type] ?? type;
-}
-
-function formatDifficulty(difficulty: number): string {
- const labels: Record = {
- 1: "Beginner",
- 2: "Intermediate",
- 3: "Advanced",
- };
- return labels[difficulty] ?? String(difficulty);
-}
diff --git a/src/app/practice/page.tsx b/src/app/practice/page.tsx
index df79627..02eb04b 100644
--- a/src/app/practice/page.tsx
+++ b/src/app/practice/page.tsx
@@ -2,6 +2,8 @@
import { Suspense, useEffect, useState, useCallback } from "react";
import { useSearchParams, useRouter } from "next/navigation";
+import { useI18n } from "@/lib/i18n/context";
+import { formatTaskType } from "@/lib/i18n/utils";
interface TaskData {
id: string;
@@ -31,6 +33,7 @@ function LoadingFallback() {
function PracticeContent() {
const searchParams = useSearchParams();
const router = useRouter();
+ const { t } = useI18n();
const taskId = searchParams.get("id");
const [task, setTask] = useState(null);
@@ -105,24 +108,24 @@ function PracticeContent() {
onClick={() => router.push("/")}
className="text-sm text-muted hover:text-ink dark:hover:text-[#F3EFE8] transition-colors"
>
- ← Back
+ {t("shared.back")}
{/* Task display */}
- {formatTaskType(task.type)}
+ {formatTaskType(task.type, t)}
- Your practice
+ {t("practice.title")}
{task.description}
- Why this task: {task.reason}
+ {t("practice.why_prefix")}{task.reason}
@@ -134,7 +137,7 @@ function PracticeContent() {
onClick={handleStart}
className="w-32 h-32 rounded-full bg-amber text-white font-medium text-lg flex items-center justify-center transition-all hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-amber/30"
>
- Start
+ {t("practice.start")}
)}
@@ -168,7 +171,7 @@ function PracticeContent() {
onClick={handleFinish}
className="text-sm text-muted hover:text-ink dark:hover:text-[#F3EFE8] transition-colors underline underline-offset-4"
>
- Finish early
+ {t("practice.finish_early")}
)}
@@ -190,12 +193,12 @@ function PracticeContent() {
-
Practice complete
+
{t("practice.complete")}
- Reflect on your practice
+ {t("practice.reflect")}