@allbluecn/web-app 0.9.5 → 0.10.0

package/src/components/story/inline-editors/inline-trigger.tsx

@@ -16,11 +16,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import type { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { m } from "@/paraglide/messages.js";
 
 interface InlineTriggerProps {
   title: string;
@@ -32,7 +32,6 @@ interface InlineTriggerProps {
 }
 
 export function InlineTrigger({ title, value, hasValue, icon, label, className }: InlineTriggerProps) {
-  const { t } = useTranslation("story");
   return (
     <Tooltip>
       <TooltipTrigger asChild>
@@ -53,7 +52,7 @@ export function InlineTrigger({ title, value, hasValue, icon, label, className }
       </TooltipTrigger>
       <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
         <span className="opacity-80">{title}</span>
-        <span className="font-medium">{hasValue ? value : t("inline.notSelected")}</span>
+        <span className="font-medium">{hasValue ? value : m.story_inline_notSelected()}</span>
       </TooltipContent>
     </Tooltip>
   );

package/src/components/story/inline-editors/labels-editor.tsx

@@ -17,7 +17,6 @@
 
 import { useState } from "react";
 import { Tag, Check, Loader2, Sparkles } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
@@ -25,6 +24,7 @@ import { useSession } from "@/lib/auth/auth-client";
 import { toast } from "sonner";
 import { createLabelFn, suggestStoryLabelsFn } from "@/server/serverFns/story";
 import { InlineTrigger } from "./inline-trigger";
+import { m } from "@/paraglide/messages.js";
 
 interface LabelsEditorProps {
   labelIds: string[];
@@ -47,7 +47,6 @@ type AiPanel =
   | { phase: "error" };
 
 export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", className, variant = "chip", aiContext }: LabelsEditorProps) {
-  const { t } = useTranslation("story");
   const [open, setOpen] = useState(false);
   const { data: session } = useSession();
   const hasAiKey = session?.user?.hasAiKey ?? false;
@@ -61,7 +60,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
   const labelNames =
     labelIds.length > 0
       ? labelIds.map((id) => labels.find((l) => l.id === id)?.name).filter(Boolean).join("、")
-      : t("inline.notSelected");
+      : m.story_inline_notSelected();
 
   const currentNames = labelIds
     .map((id) => labels.find((l) => l.id === id)?.name)
@@ -83,7 +82,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
     if (!aiContext) return;
     const name = aiContext.name().trim();
     if (!name) {
-      toast.error(t("inline.aiNeedName"));
+      toast.error(m.story_inline_aiNeedName());
       return;
     }
     setAi({ phase: "loading" });
@@ -97,7 +96,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
       });
       if (result.existingLabels.length === 0 && result.newNames.length === 0) {
         setAi({ phase: "error" });
-        toast.error(t("inline.aiEmpty"));
+        toast.error(m.story_inline_aiEmpty());
         return;
       }
       setAi({ phase: "done", ...result });
@@ -105,7 +104,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
       setSelectedNew(result.newNames);
     } catch (e) {
       setAi({ phase: "error" });
-      toast.error(e instanceof Error ? e.message : t("inline.aiFailed"));
+      toast.error(e instanceof Error ? e.message : m.story_inline_aiFailed());
     }
   };
 
@@ -118,7 +117,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
     }
     const merged = Array.from(new Set([...labelIds, ...selectedExisting, ...newIds]));
     onChange(merged);
-    toast.success(t("inline.aiApplied", { count: merged.length - labelIds.length }));
+    toast.success(m.story_inline_aiApplied({ count: merged.length - labelIds.length }));
     setAi({ phase: "idle" });
     setSelectedExisting([]);
     setSelectedNew([]);
@@ -142,17 +141,17 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
         </PopoverTrigger>
       ) : (
         <InlineTrigger
-          title={t("inline.labels")}
+          title={m.story_inline_labels()}
           value={labelNames}
           hasValue={labelIds.length > 0}
           icon={<Tag className="size-3.5 text-muted-foreground" />}
-          label={labelIds.length > 0 ? t("inline.labelCount", { count: labelIds.length }) : undefined}
+          label={labelIds.length > 0 ? m.story_inline_labelCount({ count: labelIds.length }) : undefined}
           className={className}
         />
       )}
       <PopoverContent className="w-52 p-1" align="start" onCloseAutoFocus={(e) => e.preventDefault()}>
         {labels.length === 0 ? (
-          <div className="px-2 py-1.5 text-xs text-muted-foreground">{t("inline.noLabels")}</div>
+          <div className="px-2 py-1.5 text-xs text-muted-foreground">{m.story_inline_noLabels()}</div>
         ) : (
           labels.map((l) => {
             const active = labelIds.includes(l.id);
@@ -191,19 +190,19 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
                 className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted"
               >
                 <Sparkles className="size-3.5" />
-                {t("inline.aiGenerate")}
+                {m.story_inline_aiGenerate()}
               </button>
             )}
             {ai.phase === "loading" && (
               <div className="flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground">
                 <Loader2 className="size-3.5 animate-spin" />
-                {t("inline.aiLoading")}
+                {m.story_inline_aiLoading()}
               </div>
             )}
             {(ai.phase === "done" || ai.phase === "error") && (
               <div className="max-h-44 overflow-y-auto p-1">
                 {ai.phase === "error" ? (
-                  <div className="px-1 py-1.5 text-xs text-destructive">{t("inline.aiFailed")}</div>
+                  <div className="px-1 py-1.5 text-xs text-destructive">{m.story_inline_aiFailed()}</div>
                 ) : (
                   <>
                     {ai.existingLabels.map((l) => (
@@ -233,7 +232,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
                       >
                         <Checkbox checked={selectedNew.includes(n)} />
                         <span className="rounded-sm border border-dashed border-primary/60 px-1 text-[10px] leading-none text-primary">
-                          {t("inline.aiNew")}
+                          {m.story_inline_aiNew()}
                         </span>
                         {n}
                       </div>
@@ -244,14 +243,14 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
                         onClick={applyAiSuggestions}
                         className="rounded bg-primary px-2 py-1 text-xs text-primary-foreground"
                       >
-                        {t("inline.aiApply")}
+                        {m.story_inline_aiApply()}
                       </button>
                       <button
                         type="button"
                         onClick={generateAiSuggestions}
                         className="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
                       >
-                        {t("inline.aiRegenerate")}
+                        {m.story_inline_aiRegenerate()}
                       </button>
                     </div>
                   </>
@@ -262,7 +261,7 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
                     onClick={generateAiSuggestions}
                     className="mt-1 w-full rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
                   >
-                    {t("inline.aiRegenerate")}
+                    {m.story_inline_aiRegenerate()}
                   </button>
                 )}
               </div>

package/src/components/story/inline-editors/parent-story-editor.tsx

@@ -17,12 +17,12 @@
 
 import { useState } from "react";
 import { GitBranch, GitPullRequestCreateArrow, ExternalLink, X, GitPullRequestArrow } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { StorySelectDialog } from "./story-select-dialog";
 import type { StoryState } from "../constants";
 import type { ActivityItem } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 interface ParentStoryEditorProps {
   parentId: string | null;
@@ -47,11 +47,10 @@ export function ParentStoryEditor({
   className,
   variant = "button",
 }: ParentStoryEditorProps) {
-  const { t } = useTranslation("story");
   const [open, setOpen] = useState(false);
   const showChip = variant === "chip";
 
-  const displayValue = parent ? `${parent.identifier ?? ""} ${parent.title}`.trim() : t("inline.addParent");
+  const displayValue = parent ? `${parent.identifier ?? ""} ${parent.title}`.trim() : m.story_inline_addParent();
 
   return (
     <>
@@ -115,7 +114,7 @@ export function ParentStoryEditor({
         projects={projects}
         initialProjectId={currentProjectId}
         defaultSelectedParentId={parentId ?? undefined}
-        title={t("inline.selectParent")}
+        title={m.story_inline_selectParent()}
         onSelected={(parentId) => onChange(parentId as string)}
         onActivities={onActivities}
       />

package/src/components/story/inline-editors/priority-editor.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 { Check } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { PRIORITY_LABEL } from "../constants";
@@ -24,6 +23,7 @@ import type { StoryPriority } from "../constants";
 import { PriorityIcon } from "../priority-icon";
 import { cn } from "@/lib/utils";
 import { InlineTrigger } from "./inline-trigger";
+import { m } from "@/paraglide/messages.js";
 
 interface PriorityEditorProps {
   value: StoryPriority;
@@ -42,13 +42,11 @@ interface PriorityEditorProps {
 const PRIORITIES: StoryPriority[] = ["urgent", "high", "medium", "low", "none"];
 
 export function PriorityEditor({ value, onChange, mode = "single", selected, onMultiChange, className, variant = "chip" }: PriorityEditorProps) {
-  const { t } = useTranslation("story");
   const [open, setOpen] = useState(false);
   const isMulti = mode === "multi";
   const showChip = variant === "chip";
 
-
-  const triggerText = isMulti && selected && selected.length > 0 ? "" : t(PRIORITY_LABEL[value] ?? value);
+  const triggerText = isMulti && selected && selected.length > 0 ? "" : (PRIORITY_LABEL[value]?.() ?? value);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -58,7 +56,7 @@ export function PriorityEditor({ value, onChange, mode = "single", selected, onM
             {selected.map((s) => (
               <span key={s} className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
                 <PriorityIcon priority={s as StoryPriority} />
-                <span className="text-xs">{t(PRIORITY_LABEL[s as StoryPriority] ?? s)}</span>
+                <span className="text-xs">{PRIORITY_LABEL[s as StoryPriority]?.() ?? s}</span>
               </span>
             ))}
           </div>
@@ -74,8 +72,8 @@ export function PriorityEditor({ value, onChange, mode = "single", selected, onM
         </PopoverTrigger>
       ) : (
         <InlineTrigger
-          title={t("column.priority")}
-          value={t(PRIORITY_LABEL[value] ?? value)}
+          title={m.story_column_priority()}
+          value={PRIORITY_LABEL[value]?.() ?? value}
           hasValue={value !== "none"}
           icon={<PriorityIcon priority={value} />}
           label={triggerText}
@@ -109,7 +107,7 @@ export function PriorityEditor({ value, onChange, mode = "single", selected, onM
                 </div>
               )}
               <PriorityIcon priority={p} />
-              {t(PRIORITY_LABEL[p])}
+              {PRIORITY_LABEL[p]?.() ?? p}
               {!isMulti && active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
             </button>
           );

package/src/components/story/inline-editors/state-editor.tsx

@@ -16,13 +16,13 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Check } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { STORY_STATES, STATE_LABEL, STATE_COLOR, STATE_ICON } from "../constants";
 import type { StoryState } from "../constants";
 import { cn } from "@/lib/utils";
 import { InlineTrigger } from "./inline-trigger";
+import { m } from "@/paraglide/messages.js";
 
 interface StateEditorProps {
   value: StoryState;
@@ -39,12 +39,11 @@ interface StateEditorProps {
 }
 
 export function StateEditor({ value, onChange, mode = "single", selected, onMultiChange, className, variant = "chip" }: StateEditorProps) {
-  const { t } = useTranslation("story");
   const [open, setOpen] = useState(false);
   const Icon = STATE_ICON[value];
   const isMulti = mode === "multi";
 
-  const triggerText = isMulti && selected && selected.length > 0 ? "" : t(STATE_LABEL[value] ?? value);
+  const triggerText = isMulti && selected && selected.length > 0 ? "" : (STATE_LABEL[value]?.() ?? value);
   const showChip = variant === "chip";
 
   return (
@@ -59,7 +58,7 @@ export function StateEditor({ value, onChange, mode = "single", selected, onMult
               return (
                 <span key={s} className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
                   {SI && <SI className={cn("size-3", tc)} />}
-                  <span className={cn("text-xs", tc)}>{t(st?.label ?? s)}</span>
+                  <span className={cn("text-xs", tc)}>{st?.label() ?? s}</span>
                 </span>
               );
             })}
@@ -76,8 +75,8 @@ export function StateEditor({ value, onChange, mode = "single", selected, onMult
         </PopoverTrigger>
       ) : (
         <InlineTrigger
-          title={t("column.state")}
-          value={t(STATE_LABEL[value] ?? value)}
+          title={m.story_column_state()}
+          value={STATE_LABEL[value]?.() ?? value}
           hasValue={!!value}
           icon={Icon && <Icon className={cn("size-3.5", STATE_COLOR[value].split(" ").find((c) => c.startsWith("text")))} />}
           label={triggerText}
@@ -111,7 +110,7 @@ export function StateEditor({ value, onChange, mode = "single", selected, onMult
                 </div>
               )}
               {OptionIcon && <OptionIcon className={cn("size-3.5", s.color.split(" ").find((c) => c.startsWith("text")))} />}
-              {t(s.label)}
+              {s.label()}
               {!isMulti && active && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
             </button>
           );

package/src/components/story/inline-editors/story-select-dialog.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { useDebouncedCallback, SEARCH_DEBOUNCE_MS } from "@/lib/pacer";
 import { cn } from "@/lib/utils";
 import { Search, Sprout, ChevronsUpDown, Check, Trees, ListFilter, Flag } from "lucide-react";
@@ -55,6 +54,7 @@ import {
 } from "../constants";
 import { PriorityIcon } from "../priority-icon";
 import { DependencyTypeSelect } from "./dependency-type-select";
+import { m } from "@/paraglide/messages.js";
 
 interface ParentStoryItem {
   id: string;
@@ -114,8 +114,7 @@ export function StorySelectDialog({
   dependencyType,
   onDependencyTypeChange,
 }: StorySelectDialogProps) {
-  const { t } = useTranslation("story");
-  const resolvedTitle = title ?? t("select.defaultTitle");
+  const resolvedTitle = title ?? m.story_select_defaultTitle();
   const isMulti = mode === "child" || mode === "dependency" || mode === "iteration";
   const [projectFilter, setProjectFilter] = useState<string>(ALL_PROJECTS);
   const [items, setItems] = useState<ParentStoryItem[]>([]);
@@ -234,7 +233,7 @@ export function StorySelectDialog({
       })
       .catch(() => {
         if (reqId !== requestIdRef.current) return;
-        toast.error(t("select.loadListFailed"));
+        toast.error(m.story_select_loadListFailed());
       })
       .finally(() => {
         if (reqId !== requestIdRef.current) return;
@@ -263,7 +262,7 @@ export function StorySelectDialog({
       setNextCursor(res.nextCursor);
     } catch {
       if (reqId !== requestIdRef.current) return;
-      toast.error(t("select.loadMoreFailed"));
+      toast.error(m.story_select_loadMoreFailed());
     } finally {
       if (reqId !== requestIdRef.current) return;
       setLoading(false);
@@ -327,7 +326,7 @@ export function StorySelectDialog({
             activities.push(...res.activities);
           }
         }
-        toast.success(t("select.selected", { count: selectedIds.length }));
+        toast.success(m.story_select_selected({ count: selectedIds.length }));
         onOpenChange(false);
         onSelected(selectedIds);
         if (activities.length > 0) onActivities?.(activities);
@@ -336,13 +335,13 @@ export function StorySelectDialog({
         const res = await transferStoryAsChildFn({
           data: { storyId, parentStoryId: parentId },
         });
-        toast.success(t("select.setSuccess"));
+        toast.success(m.story_select_setSuccess());
         onOpenChange(false);
         onSelected(parentId);
         if (res.activities && res.activities.length > 0) onActivities?.(res.activities);
       }
     } catch (e) {
-      toast.error(e instanceof Error ? e.message : t("select.setFailed"));
+      toast.error(e instanceof Error ? e.message : m.story_select_setFailed());
     } finally {
       setSubmitting(false);
     }
@@ -377,7 +376,7 @@ export function StorySelectDialog({
                     )}
                   >
                     <ListFilter className="size-3.5" />
-                    {t("select.state")}
+                    {m.story_select_state()}
                     <Badge variant="secondary" className="rounded-sm px-1 min-w-4 h-4 text-[10px]">
                       {selectedStates.size}
                     </Badge>
@@ -406,7 +405,7 @@ export function StorySelectDialog({
                         )}
                       >
                         <Icon className={cn("size-3.5 shrink-0", STATE_ICON_COLOR[s.value])} />
-                        <span className="flex-1">{t(s.label)}</span>
+                        <span className="flex-1">{s.label()}</span>
                         {checked && <Check className="size-3.5 shrink-0 text-primary" />}
                       </button>
                     );
@@ -426,7 +425,7 @@ export function StorySelectDialog({
                     )}
                   >
                     <Flag className="size-3.5" />
-                    {t("select.priority")}
+                    {m.story_select_priority()}
                     <Badge variant="secondary" className="rounded-sm px-1 min-w-4 h-4 text-[10px]">
                       {selectedPriorities.size}
                     </Badge>
@@ -454,7 +453,7 @@ export function StorySelectDialog({
                         )}
                       >
                         <PriorityIcon priority={p.value} />
-                        <span className="flex-1">{t(p.label)}</span>
+                        <span className="flex-1">{p.label()}</span>
                         {checked && <Check className="size-3.5 shrink-0 text-primary" />}
                       </button>
                     );
@@ -465,7 +464,7 @@ export function StorySelectDialog({
               <div className="relative flex-1">
                 <Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
                 <Input
-                  placeholder={t("batchPreview.searchPlaceholder")}
+                  placeholder={m.story_batchPreview_searchPlaceholder()}
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
                   className="h-9 pl-8"
@@ -487,7 +486,7 @@ export function StorySelectDialog({
                       ) : (
                         <span className="flex items-center gap-1.5">
                           <Trees className="size-3.5 shrink-0 text-primary" />
-                          {t("select.allProjects")}
+                          {m.story_select_allProjects()}
                         </span>
                       )}
                       <ChevronsUpDown className="size-3 text-muted-foreground" />
@@ -506,7 +505,7 @@ export function StorySelectDialog({
                         }`}
                       >
                         <Trees className="size-3.5 shrink-0 text-primary" />
-                        <span className="min-w-0 flex-1 truncate">{t("select.allProjects")}</span>
+                        <span className="min-w-0 flex-1 truncate">{m.story_select_allProjects()}</span>
                         {projectFilter === ALL_PROJECTS && <Check className="size-3.5 shrink-0 text-primary" />}
                       </button>
                     )}
@@ -546,13 +545,13 @@ export function StorySelectDialog({
               <div className="flex flex-col items-center gap-2 py-12 text-center text-sm text-muted-foreground">
                 <Sprout className="size-8 opacity-40" />
                 {debouncedSearch
-                  ? t("batchPreview.noMatch")
-                  : t("select.noAvailable")}
+                  ? m.story_batchPreview_noMatch()
+                  : m.story_select_noAvailable()}
               </div>
             ) : filteredItems.length === 0 ? (
               <div className="flex flex-col items-center gap-2 py-12 text-center text-sm text-muted-foreground">
                 <Sprout className="size-8 opacity-40" />
-                {t("select.noMatchCurrent")}
+                {m.story_select_noMatchCurrent()}
               </div>
             ) : (
               <ul className="space-y-0.5">
@@ -616,7 +615,7 @@ export function StorySelectDialog({
                               STATE_COLOR[state] ?? STATE_COLOR.backlog
                             }`}
                           >
-                            {t(STATE_LABEL[state] ?? state)}
+                            {STATE_LABEL[state]?.() ?? state}
                           </span>
                           <PriorityIcon priority={priority} />
                           <span className="shrink-0 font-mono text-xs text-muted-foreground">
@@ -627,7 +626,7 @@ export function StorySelectDialog({
                            </span>
                            {mode === "iteration" && story.iteration && (
                              <span className="shrink-0 text-[10px] text-muted-foreground">
-                               {t("iterations:editor.currentIteration")}: {story.iteration.name}
+                               {m.iterations_editor_currentIteration()}: {story.iteration.name}
                              </span>
                            )}
                           {owner && (
@@ -646,7 +645,7 @@ export function StorySelectDialog({
             )}
             {loading && (
               <div className="py-4 text-center text-xs text-muted-foreground">
-                {t("select.loading")}
+                {m.story_select_loading()}
               </div>
             )}
           </div>
@@ -673,12 +672,12 @@ export function StorySelectDialog({
                   checked={allChecked}
                   onClick={(e) => e.stopPropagation()}
                   onCheckedChange={handleSelectAll}
-                  aria-label={t("ai.selectAll")}
+                  aria-label={m.story_ai_selectAll()}
                 />
-                <span>{t("ai.selectAll")}</span>
+                <span>{m.story_ai_selectAll()}</span>
               </div>
               <span className="text-xs text-muted-foreground">
-                {selectedCount > 0 ? t("select.selectedCount", { count: selectedCount }) : t("select.pleaseSelect")}
+                {selectedCount > 0 ? m.story_select_selectedCount({ count: selectedCount }) : m.story_select_pleaseSelect()}
               </span>
               {mode === "dependency" && (
                 <DependencyTypeSelect
@@ -696,7 +695,7 @@ export function StorySelectDialog({
               onClick={() => onOpenChange(false)}
               disabled={submitting}
             >
-              {t("select.cancel")}
+              {m.story_select_cancel()}
             </Button>
             <Button
               onClick={handleSubmit}
@@ -706,7 +705,7 @@ export function StorySelectDialog({
                 (mode === "dependency" && !dependencyType)
               }
             >
-              {submitting ? t("select.loading") : isMulti ? t("select.confirmWithCount", { count: selectedCount }) : t("select.confirm")}
+              {submitting ? m.story_select_loading() : isMulti ? m.story_select_confirmWithCount({ count: selectedCount }) : m.story_select_confirm()}
             </Button>
           </div>
         </DialogFooter>

package/src/components/story/inline-editors/title-editor.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { cn } from "@/lib/utils";
-import { useTranslation } from "react-i18next";
+import { m } from "@/paraglide/messages.js";
 
 interface TitleEditorProps {
   value: string;
@@ -26,8 +26,7 @@ interface TitleEditorProps {
 }
 
 export function TitleEditor({ value, onChange, className, placeholder }: TitleEditorProps) {
-  const { t } = useTranslation("story");
-  const ph = placeholder ?? t("inline.titlePlaceholder");
+  const ph = placeholder ?? m.story_inline_titlePlaceholder();
   return (
     <input
       type="text"

package/src/components/story/peek-panel.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
@@ -39,6 +38,7 @@ import type { StoryState } from "./constants";
 import { StoryDetailBody } from "./detail/story-detail-body";
 import { StoryPanelHeader } from "./story-panel-header";
 import type { PeekMode, PeekRelationKind, PeekBreadcrumbItem } from "./story-panel-header";
+import { m } from "@/paraglide/messages.js";
 
 export type { PeekMode };
 
@@ -106,7 +106,6 @@ export function StoryPeekPanel({
   projects,
   onTransferred,
 }: StoryPeekPanelProps) {
-  const { t } = useTranslation("story");
   const [data, setData] = useState<PeekData | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
@@ -182,7 +181,7 @@ export function StoryPeekPanel({
         }
       } catch (e) {
         if (!cancelled) {
-          setError(e instanceof Error ? e.message : t("peek.loadFailed"));
+          setError(e instanceof Error ? e.message : m.story_peek_loadFailed());
           setRefreshing(false);
         }
       }
@@ -225,8 +224,8 @@ export function StoryPeekPanel({
     }
 
     const entry = history[history.length - 1];
-    const parentLabel = entry.relationKind === "child" ? t("peek.parentStory") : t("peek.currentStory");
-    const childLabel = entry.relationKind === "child" ? t("peek.childStory") : t("peek.dependentStory");
+    const parentLabel = entry.relationKind === "child" ? m.story_peek_parentStory() : m.story_peek_currentStory();
+    const childLabel = entry.relationKind === "child" ? m.story_peek_childStory() : m.story_peek_dependentStory();
 
     items.push({
       identifier: history.length >= 2 ? history[history.length - 2].identifier ?? rootId : rootId,
@@ -242,7 +241,7 @@ export function StoryPeekPanel({
     });
 
     return items;
-  }, [history, rootIdentifier, rootProjectId, data?.story.identifier, data?.story.projectId, t, onBackInPanel]);
+  }, [history, rootIdentifier, rootProjectId, data?.story.identifier, data?.story.projectId, , onBackInPanel]);
 
   const header = (
     <StoryPanelHeader
@@ -271,7 +270,7 @@ export function StoryPeekPanel({
       style={{ scrollbarGutter: "stable" } as React.CSSProperties}
     >
 
-      {error && <div className="w-full p-6 text-sm text-destructive">{t("peek.loadFailed")}: {error}</div>}
+      {error && <div className="w-full p-6 text-sm text-destructive">{m.story_peek_loadFailed()}: {error}</div>}
       {!error && !data && (
         <div className="space-y-4 px-4 py-4">
           <Skeleton className="w-24 h-3" />

package/src/components/story/relations/__tests__/knowledge-select-dialog.test.tsx

@@ -40,6 +40,8 @@ vi.mock("sonner", () => ({
   toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn() },
 }));
 
+;
+
 import { KnowledgeSelectDialog } from "../knowledge-select-dialog";
 import type { DocBrief } from "../../types";
 

package/src/components/story/relations/__tests__/link-manage-dialog.test.tsx

@@ -38,6 +38,8 @@ vi.mock("sonner", () => ({
   toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn() },
 }));
 
+;
+
 import { LinkManageDialog } from "../link-manage-dialog";
 import type { StoryLinkItem } from "../../types";