@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/forms/app-combobox.tsx

@@ -18,7 +18,6 @@
 import { useState } from "react"
 import { Check } from "lucide-react"
 import type { AnyReactFormApi } from "@tanstack/react-form"
-import { useTranslation } from "react-i18next"
 import { Input } from "@/components/ui/input"
 import {
   Popover,
@@ -27,6 +26,7 @@ import {
 } from "@/components/ui/popover"
 import { AppField, type AppFieldProps } from "./app-field"
 import type { SelectOption } from "./app-select"
+import { m } from "@/paraglide/messages.js";
 
 export interface AppComboboxProps {
   name: string
@@ -47,8 +47,7 @@ export function AppCombobox({
   placeholder,
   validators,
 }: AppComboboxProps) {
-  const { t } = useTranslation("common")
-  const displayPlaceholder = placeholder ?? t("form.search")
+  const displayPlaceholder = placeholder ?? m.common_form_search()
   const [open, setOpen] = useState(false)
   const [filter, setFilter] = useState("")
 

package/src/components/forms/app-date-picker.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import type { AnyReactFormApi } from "@tanstack/react-form"
-import { useTranslation } from "react-i18next"
 import { Input } from "@/components/ui/input"
 import {
   Popover,
@@ -25,6 +24,7 @@ import {
 } from "@/components/ui/popover"
 import { Calendar } from "@/components/ui/calendar"
 import { AppField, type AppFieldProps } from "./app-field"
+import { m } from "@/paraglide/messages.js";
 
 export interface AppDatePickerProps {
   name: string
@@ -43,8 +43,7 @@ export function AppDatePicker({
   placeholder,
   validators,
 }: AppDatePickerProps) {
-  const { t } = useTranslation("common")
-  const displayPlaceholder = placeholder ?? t("form.selectDate")
+  const displayPlaceholder = placeholder ?? m.common_form_selectDate()
   return (
     <AppField
       name={name}

package/src/components/forms/app-form-dialog.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react"
-import { useTranslation } from "react-i18next"
 import type { ReactNode } from "react"
 import { useForm } from "@tanstack/react-form"
 import {
@@ -29,6 +28,7 @@ import {
 } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { AppSubmit } from "./app-submit"
+import { m } from "@/paraglide/messages.js";
 
 export interface AppFormDialogProps<TValue> {
   open: boolean
@@ -57,9 +57,8 @@ export function AppFormDialog<TValue>({
   cancelLabel,
   children,
 }: AppFormDialogProps<TValue>) {
-  const { t } = useTranslation("common")
-  const displaySubmitLabel = submitLabel ?? t("form.submit")
-  const displayCancelLabel = cancelLabel ?? t("form.cancel")
+  const displaySubmitLabel = submitLabel ?? m.common_form_submit()
+  const displayCancelLabel = cancelLabel ?? m.common_form_cancel()
   const [isSaving, setIsSaving] = useState(false)
 
   const form = useForm({

package/src/components/forms/app-select.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import type { AnyReactFormApi } from "@tanstack/react-form"
-import { useTranslation } from "react-i18next"
 import {
   Select,
   SelectContent,
@@ -25,6 +24,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { AppField, type AppFieldProps } from "./app-field"
+import { m } from "@/paraglide/messages.js";
 
 export interface SelectOption {
   label: string
@@ -51,8 +51,7 @@ export function AppSelect({
   placeholder,
   validators,
 }: AppSelectProps) {
-  const { t } = useTranslation("common")
-  const displayPlaceholder = placeholder ?? t("form.select")
+  const displayPlaceholder = placeholder ?? m.common_form_select()
   return (
     <AppField
       name={name}

package/src/components/forms/hooks/use-form-submit.ts

@@ -18,7 +18,7 @@
 import { useState, useCallback } from "react"
 import { useQueryClient } from "@tanstack/react-query"
 import { toast } from "@/components/ui/sonner"
-import { getClientI18n } from "@/i18n/client"
+import { m } from '@/paraglide/messages.js'
 import type { FormSubmitConfig } from "../types"
 
 export function useFormSubmit<TData, TResult>(
@@ -41,7 +41,7 @@ export function useFormSubmit<TData, TResult>(
         }
         return true
       } catch (err) {
-        const msg = err instanceof Error ? err.message : getClientI18n().t('common:form.operationFailed')
+        const msg = err instanceof Error ? err.message : m.common_form_operationFailed()
         toast.error(config?.toastError ?? msg)
         return false
       } finally {

package/src/components/forms/schemas/common.ts

@@ -16,13 +16,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { z } from "zod"
-import { getClientI18n } from "@/i18n/client"
+import { m } from '@/paraglide/messages.js'
 
-const t = (key: string) => getClientI18n().t(key)
-
-export const emailSchema = z.string().email(t("form.invalidEmail"))
-export const passwordSchema = z.string().min(6, t("form.passwordMin"))
+export const emailSchema = z.string().email(m.common_form_invalidEmail())
+export const passwordSchema = z.string().min(6, m.common_form_passwordMin())
 export const requiredTextSchema = z
   .string()
-  .min(1, t("form.required"))
+  .min(1, m.common_form_required())
   .transform((v) => v.trim())

package/src/components/hotkeys/shortcuts-panel.tsx

@@ -27,10 +27,9 @@ import { Button } from "@/components/ui/button"
 import { KeyboardMusic, X } from "lucide-react"
 import { ShortcutBadge } from "./shortcut-badge"
 import { HOTKEY_REGISTRY, CATEGORY_ORDER } from "@/lib/hotkeys/registry"
-import { useTranslation } from "react-i18next"
+import { m } from "@/paraglide/messages.js";
 
 export function ShortcutsPanel() {
-  const { t } = useTranslation("common")
   const [open, setOpen] = useState(false)
 
   useHotkey("Mod+/", () => setOpen((prev) => !prev), {
@@ -54,7 +53,7 @@ export function ShortcutsPanel() {
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <KeyboardMusic className="size-4" />
-            {t("hotkey.title")}
+            {m.common_hotkey_title()}
           </DialogTitle>
           <Button
             variant="ghost"

package/src/components/iteration/auto-schedule-dialog.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -30,6 +29,7 @@ import {
 import { getAutoScheduleFn, updateAutoScheduleFn } from "@/server/serverFns/iteration";
 import { toast } from "@/components/ui/sonner";
 import { useQuery } from "@tanstack/react-query";
+import { m } from "@/paraglide/messages.js";
 
 interface AutoScheduleDialogProps {
   open: boolean;
@@ -39,7 +39,6 @@ interface AutoScheduleDialogProps {
 }
 
 export function AutoScheduleDialog({ open, onOpenChange, projectId, onSaved }: AutoScheduleDialogProps) {
-  const { t } = useTranslation("iterations");
   const [enabled, setEnabled] = useState(false);
   const [title, setTitle] = useState("迭代");
   const [durationDays, setDurationDays] = useState(14);
@@ -90,7 +89,7 @@ export function AutoScheduleDialog({ open, onOpenChange, projectId, onSaved }: A
           autoRollover,
         },
       });
-      toast.success(t("autoSchedule.saved"));
+      toast.success(m.iterations_autoSchedule_saved());
       onSaved?.();
       onOpenChange(false);
     } catch (e) {
@@ -104,45 +103,45 @@ export function AutoScheduleDialog({ open, onOpenChange, projectId, onSaved }: A
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>{t("autoSchedule.title")}</DialogTitle>
+          <DialogTitle>{m.iterations_autoSchedule_title()}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4 py-4">
           <div className="flex items-center justify-between">
-            <label className="text-sm font-medium">{t("autoSchedule.enabled")}</label>
+            <label className="text-sm font-medium">{m.iterations_autoSchedule_enabled()}</label>
             <Switch checked={enabled} onCheckedChange={setEnabled} />
           </div>
           {enabled && (
             <>
               <div className="space-y-2">
-                <label className="text-sm font-medium">{t("autoSchedule.baseTitle")}</label>
+                <label className="text-sm font-medium">{m.iterations_autoSchedule_baseTitle()}</label>
                 <Input value={title} onChange={(e) => setTitle(e.target.value)} />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium">{t("autoSchedule.durationDays")}</label>
+                <label className="text-sm font-medium">{m.iterations_autoSchedule_durationDays()}</label>
                 <Input type="number" min={1} max={90} value={durationDays} onChange={(e) => setDurationDays(Number(e.target.value))} />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium">{t("autoSchedule.cooldownDays")}</label>
+                <label className="text-sm font-medium">{m.iterations_autoSchedule_cooldownDays()}</label>
                 <Input type="number" min={0} max={30} value={cooldownDays} onChange={(e) => setCooldownDays(Number(e.target.value))} />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium">{t("autoSchedule.startsOn")}</label>
+                <label className="text-sm font-medium">{m.iterations_autoSchedule_startsOn()}</label>
                 <Input type="date" value={startsOn} onChange={(e) => setStartsOn(e.target.value)} />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium">{t("autoSchedule.futureCount")}</label>
+                <label className="text-sm font-medium">{m.iterations_autoSchedule_futureCount()}</label>
                 <Input type="number" min={1} max={10} value={futureCount} onChange={(e) => setFutureCount(Number(e.target.value))} />
               </div>
               <div className="flex items-center justify-between">
-                <label className="text-sm font-medium">{t("autoSchedule.autoRollover")}</label>
+                <label className="text-sm font-medium">{m.iterations_autoSchedule_autoRollover()}</label>
                 <Switch checked={autoRollover} onCheckedChange={setAutoRollover} />
               </div>
             </>
           )}
         </div>
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>{t("actions.cancel")}</Button>
-          <Button onClick={() => void handleSave()} disabled={loading || !enabled}>{loading ? "保存中..." : t("actions.save")}</Button>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{m.iterations_actions_cancel()}</Button>
+          <Button onClick={() => void handleSave()} disabled={loading || !enabled}>{loading ? "保存中..." : m.iterations_actions_save()}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/components/iteration/burndown-chart.tsx

@@ -14,14 +14,12 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { useTranslation } from "react-i18next";
 import type { BurndownResult } from "@/server/serverFns/iteration/burndown-core";
+import { m } from "@/paraglide/messages.js";
 
 export function BurndownChart({ data }: { data: BurndownResult & { timezone: string } }) {
-  const { t } = useTranslation("iterations");
   if (data.points.length === 0) {
-    return <div className="flex h-48 items-center justify-center text-xs text-muted-foreground">{t("burndown.noData")}</div>;
+    return <div className="flex h-48 items-center justify-center text-xs text-muted-foreground">{m.iterations_burndown_noData()}</div>;
   }
   const W = 640, H = 200, PAD = 28;
   const maxVal = Math.max(1, ...data.points.map((p) => Math.max(p.scope, p.pending, p.ideal)));
@@ -34,9 +32,9 @@ export function BurndownChart({ data }: { data: BurndownResult & { timezone: str
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between text-xs">
-        <span className="font-medium">{t("burndown.title")}</span>
+        <span className="font-medium">{m.iterations_burndown_title()}</span>
         <span className={leading ? "text-green-600 dark:text-green-400" : data.status === "trailing" ? "text-red-600 dark:text-red-400" : "text-muted-foreground"}>
-          {t(leading ? "burndown.leading" : data.status === "trailing" ? "burndown.trailing" : "burndown.pending")}
+          {leading ? m.iterations_burndown_leading() : data.status === "trailing" ? m.iterations_burndown_trailing() : m.iterations_burndown_pending()}
         </span>
       </div>
       <svg viewBox={`0 0 ${W} ${H}`} className="w-full" role="img">
@@ -55,8 +53,8 @@ export function BurndownChart({ data }: { data: BurndownResult & { timezone: str
         <text x={W - PAD} y={H - 8} textAnchor="end" className="fill-muted-foreground text-[10px]">{data.points.at(-1)!.date}</text>
       </svg>
       <div className="flex gap-4 text-xs text-muted-foreground">
-        <span className="flex items-center gap-1"><span className="inline-block h-0.5 w-4 bg-primary" />{t("burndown.pending")}</span>
-        <span className="flex items-center gap-1"><span className="inline-block h-0.5 w-4 bg-muted-foreground" style={{ backgroundImage: "linear-gradient(90deg, currentColor 50%, transparent 50%)", backgroundSize: "4px 2px" }} />{t("burndown.ideal")}</span>
+        <span className="flex items-center gap-1"><span className="inline-block h-0.5 w-4 bg-primary" />{m.iterations_burndown_pending()}</span>
+        <span className="flex items-center gap-1"><span className="inline-block h-0.5 w-4 bg-muted-foreground" style={{ backgroundImage: "linear-gradient(90deg, currentColor 50%, transparent 50%)", backgroundSize: "4px 2px" }} />{m.iterations_burndown_ideal()}</span>
       </div>
     </div>
   );

package/src/components/iteration/constants.ts

@@ -18,11 +18,12 @@
 import { Circle, CircleDot, CircleCheckBig } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import type { IterationStatus } from "@/lib/iteration/status";
+import { m } from "@/paraglide/messages.js";
 
 export const ITERATION_STATUS_META: Record<IterationStatus, {
-  labelKey: string; icon: LucideIcon; className: string;
+  label: () => string; icon: LucideIcon; className: string;
 }> = {
-  upcoming: { labelKey: "status.upcoming", icon: Circle, className: "bg-blue-500/15 text-blue-600 dark:text-blue-400" },
-  active: { labelKey: "status.active", icon: CircleDot, className: "bg-amber-500/15 text-amber-600 dark:text-amber-400" },
-  completed: { labelKey: "status.completed", icon: CircleCheckBig, className: "bg-green-500/15 text-green-600 dark:text-green-400" },
+  upcoming: { label: m.iterations_status_upcoming, icon: Circle, className: "bg-blue-500/15 text-blue-600 dark:text-blue-400" },
+  active: { label: m.iterations_status_active, icon: CircleDot, className: "bg-amber-500/15 text-amber-600 dark:text-amber-400" },
+  completed: { label: m.iterations_status_completed, icon: CircleCheckBig, className: "bg-green-500/15 text-green-600 dark:text-green-400" },
 };

package/src/components/iteration/create-iteration-dialog.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -30,6 +29,7 @@ import {
 import { createIterationsFn, updateIterationsFn } from "@/server/serverFns/iteration";
 import { toast } from "@/components/ui/sonner";
 import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+import { m } from "@/paraglide/messages.js";
 
 interface CreateIterationDialogProps {
   open: boolean;
@@ -40,7 +40,6 @@ interface CreateIterationDialogProps {
 }
 
 export function CreateIterationDialog({ open, onOpenChange, projectId, editing, onSaved }: CreateIterationDialogProps) {
-  const { t } = useTranslation("iterations");
   const [name, setName] = useState(editing?.name ?? "");
   const [startDate, setStartDate] = useState(editing?.startDate ?? "");
   const [endDate, setEndDate] = useState(editing?.endDate ?? "");
@@ -51,11 +50,11 @@ export function CreateIterationDialog({ open, onOpenChange, projectId, editing,
   async function handleSubmit() {
     setError(null);
     if (!name.trim()) {
-      toast.error(t("errors.nameRequired"));
+      toast.error(m.iterations_errors_nameRequired());
       return;
     }
     if (startDate && endDate && startDate > endDate) {
-      toast.error(t("errors.invalidRange"));
+      toast.error(m.iterations_errors_invalidRange());
       return;
     }
     setLoading(true);
@@ -70,7 +69,7 @@ export function CreateIterationDialog({ open, onOpenChange, projectId, editing,
             ...(endDate ? { endDate } : {}),
           },
         });
-        toast.success(t("actions.edit"));
+        toast.success(m.iterations_actions_edit());
       } else {
         await createIterationsFn({
           data: {
@@ -81,7 +80,7 @@ export function CreateIterationDialog({ open, onOpenChange, projectId, editing,
             endDate,
           },
         });
-        toast.success(t("actions.create"));
+        toast.success(m.iterations_actions_create());
       }
       onSaved?.();
       onOpenChange(false);
@@ -97,13 +96,13 @@ export function CreateIterationDialog({ open, onOpenChange, projectId, editing,
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>{editing ? t("actions.edit") : t("actions.create")}</DialogTitle>
+          <DialogTitle>{editing ? m.iterations_actions_edit() : m.iterations_actions_create()}</DialogTitle>
         </DialogHeader>
         <div className="space-y-4 py-4">
           <div className="space-y-2">
-            <label className="text-sm font-medium leading-none">{t("fields.name")}</label>
+            <label className="text-sm font-medium leading-none">{m.iterations_fields_name()}</label>
             <Input
-              placeholder={t("fields.namePlaceholder")}
+              placeholder={m.iterations_fields_namePlaceholder()}
               value={name}
               onChange={(e) => setName(e.target.value)}
               onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); void handleSubmit(); } }}
@@ -111,18 +110,18 @@ export function CreateIterationDialog({ open, onOpenChange, projectId, editing,
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
-              <label className="text-sm font-medium leading-none">{t("fields.startDate")}</label>
+              <label className="text-sm font-medium leading-none">{m.iterations_fields_startDate()}</label>
               <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
             </div>
             <div className="space-y-2">
-              <label className="text-sm font-medium leading-none">{t("fields.endDate")}</label>
+              <label className="text-sm font-medium leading-none">{m.iterations_fields_endDate()}</label>
               <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
             </div>
           </div>
           <div className="space-y-2">
-            <label className="text-sm font-medium leading-none">{t("fields.description")}</label>
+            <label className="text-sm font-medium leading-none">{m.iterations_fields_description()}</label>
             <Textarea
-              placeholder={t("fields.description")}
+              placeholder={m.iterations_fields_description()}
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               className="min-h-[80px]"
@@ -131,8 +130,8 @@ export function CreateIterationDialog({ open, onOpenChange, projectId, editing,
           {error && <p className="text-xs text-destructive">{error}</p>}
         </div>
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>{t("actions.cancel")}</Button>
-          <Button onClick={() => void handleSubmit()} disabled={loading}>{loading ? t("actions.saving") : t("actions.save")}</Button>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{m.iterations_actions_cancel()}</Button>
+          <Button onClick={() => void handleSubmit()} disabled={loading}>{loading ? m.iterations_actions_saving() : m.iterations_actions_save()}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/components/iteration/iteration-card.tsx

@@ -16,13 +16,12 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Link } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
 import { IterationStatusBadge } from "./iteration-status-badge";
 import { IterationProgressBar } from "./iteration-progress-bar";
 import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+import { m } from "@/paraglide/messages.js";
 
 export function IterationCard({ item, projectId }: { item: IterationSummary; projectId: string }) {
-  const { t } = useTranslation("iterations");
   const today = new Date().toISOString().slice(0, 10);
   const remainingDays = Math.round((Date.parse(item.endDate) - Date.parse(today)) / 86400000);
   const isOverdue = remainingDays < 0 && item.status === "active";
@@ -42,10 +41,10 @@ export function IterationCard({ item, projectId }: { item: IterationSummary; pro
           <p className="mt-1 text-xs text-muted-foreground">
             {item.startDate} ~ {item.endDate}
             {item.status === "active" && !isOverdue && (
-              <span className="ml-2 text-muted-foreground/80">{t("progress.remainingDays", { days: remainingDays })}</span>
+              <span className="ml-2 text-muted-foreground/80">{m.iterations_progress_remainingDays({ days: remainingDays })}</span>
             )}
             {isOverdue && (
-              <span className="ml-2 text-red-500">{t("progress.overdueDays", { days: Math.abs(remainingDays) })}</span>
+              <span className="ml-2 text-red-500">{m.iterations_progress_overdueDays({ days: Math.abs(remainingDays) })}</span>
             )}
           </p>
         </div>

package/src/components/iteration/iteration-editor.tsx

@@ -17,7 +17,6 @@
 
 import { useState } from "react";
 import { ChevronDown, X } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from "@/components/ui/command";
@@ -34,6 +33,7 @@ import {
 import { setStoryIterationFn } from "@/server/serverFns/iteration";
 import { toast } from "@/components/ui/sonner";
 import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+import { m } from "@/paraglide/messages.js";
 
 interface IterationEditorProps {
   storyId: string;
@@ -43,7 +43,6 @@ interface IterationEditorProps {
 }
 
 export function IterationEditor({ storyId, current, options, onChanged }: IterationEditorProps) {
-  const { t } = useTranslation("iterations");
   const [open, setOpen] = useState(false);
   const [pendingId, setPendingId] = useState<string | null>(null);
   const joinable = options.filter((i) => i.status !== "completed");
@@ -52,7 +51,7 @@ export function IterationEditor({ storyId, current, options, onChanged }: Iterat
     setPendingId(null);
     await setStoryIterationFn({ data: { storyId, iterationId: id } });
     const next = id ? joinable.find((i) => i.id === id) ?? null : null;
-    toast.success(id && next ? t("editor.setSuccess", { name: next.name }) : t("editor.clearSuccess"));
+    toast.success(id && next ? m.iterations_editor_setSuccess({ name: next.name }) : m.iterations_editor_clearSuccess());
     onChanged(next ? { id: next.id, name: next.name } : null);
   }
 
@@ -70,7 +69,7 @@ export function IterationEditor({ storyId, current, options, onChanged }: Iterat
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button variant="ghost" size="sm" className="h-6 justify-start gap-1 px-1 text-xs font-normal">
-            {current ? current.name : <span className="text-muted-foreground">{t("editor.placeholder")}</span>}
+            {current ? current.name : <span className="text-muted-foreground">{m.iterations_editor_placeholder()}</span>}
             {current ? (
               <X
                 className="ml-1 size-3 hover:text-destructive"
@@ -83,7 +82,7 @@ export function IterationEditor({ storyId, current, options, onChanged }: Iterat
         <PopoverContent className="w-56 p-0" align="start">
           <Command>
             <CommandList>
-              <CommandEmpty>{t("editor.none")}</CommandEmpty>
+              <CommandEmpty>{m.iterations_editor_none()}</CommandEmpty>
               <CommandGroup>
                 {joinable.map((i) => (
                   <CommandItem key={i.id} value={i.id} onSelect={() => handlePick(i.id)}>
@@ -100,13 +99,13 @@ export function IterationEditor({ storyId, current, options, onChanged }: Iterat
       <AlertDialog open={pendingId !== null} onOpenChange={(v) => { if (!v) setPendingId(null); }}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t("editor.confirmSwitch", { name: current?.name ?? "" })}</AlertDialogTitle>
+            <AlertDialogTitle>{m.iterations_editor_confirmSwitch({ name: current?.name ?? "" })}</AlertDialogTitle>
             <AlertDialogDescription />
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel onClick={() => setPendingId(null)}>{t("actions.cancel")}</AlertDialogCancel>
+            <AlertDialogCancel onClick={() => setPendingId(null)}>{m.iterations_actions_cancel()}</AlertDialogCancel>
             <AlertDialogAction onClick={() => { if (pendingId) void executePick(pendingId); }}>
-              {t("actions.confirm")}
+              {m.actions_confirm()}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

package/src/components/iteration/iteration-progress-bar.tsx

@@ -14,15 +14,13 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { useTranslation } from "react-i18next";
 import { STATE_COLOR } from "@/components/story/constants";
 import type { StoryState } from "@/components/story/constants";
+import { m } from "@/paraglide/messages.js";
 
 const ORDER: StoryState[] = ["backlog", "todo", "in_progress", "done", "cancelled"];
 
 export function IterationProgressBar({ stateCounts }: { stateCounts: Record<string, number> }) {
-  const { t } = useTranslation("iterations");
   const total = ORDER.reduce((a, s) => a + (stateCounts[s] ?? 0), 0);
   const denom = total - (stateCounts.cancelled ?? 0);
   const percent = denom > 0 ? Math.round(((stateCounts.done ?? 0) / denom) * 100) : 0;
@@ -36,8 +34,8 @@ export function IterationProgressBar({ stateCounts }: { stateCounts: Record<stri
         })}
       </div>
       <div className="flex items-center justify-between text-xs text-muted-foreground">
-        <span>{t("progress.total")}: {total}</span>
-        <span>{t("progress.percent")}: {percent}%</span>
+        <span>{m.iterations_progress_total()}: {total}</span>
+        <span>{m.iterations_progress_percent()}: {percent}%</span>
       </div>
     </div>
   );

package/src/components/iteration/iteration-status-badge.tsx

@@ -15,19 +15,17 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useTranslation } from "react-i18next";
 import { ITERATION_STATUS_META } from "./constants";
 import type { IterationStatus } from "@/lib/iteration/status";
 import { cn } from "@/lib/utils";
 
 export function IterationStatusBadge({ status }: { status: IterationStatus }) {
-  const { t } = useTranslation("iterations");
   const meta = ITERATION_STATUS_META[status];
   const Icon = meta.icon;
   return (
     <span className={cn("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", meta.className)}>
       <Icon className="size-3" />
-      {t(meta.labelKey)}
+      {meta.label()}
     </span>
   );
 }