@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/story/views/story-list/batch-preview-dialog.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 { useDebouncedCallback, SEARCH_DEBOUNCE_MS } from "@/lib/pacer";
 import { Search, Copy, X, AlertTriangle, Archive, Trash2, ListFilter, Flag, ChevronsUpDown, Check } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
@@ -49,6 +48,7 @@ import {
 } from "../../constants";
 import { PriorityIcon } from "../../priority-icon";
 import type { StoryListItem } from "../../types";
+import { m } from "@/paraglide/messages.js";
 
 type BatchPreviewMode = "archive" | "delete";
 
@@ -68,7 +68,6 @@ interface StoryRowProps {
 }
 
 function StoryRow({ story, checked, onToggle }: StoryRowProps) {
-  const { t } = useTranslation("story");
   const state = story.state as StoryState;
   const toggle = () => onToggle(story.id, !checked);
 
@@ -77,7 +76,7 @@ function StoryRow({ story, checked, onToggle }: StoryRowProps) {
       className="flex cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 transition-colors hover:bg-muted"
       onClick={toggle}
       role="button"
-      aria-label={t("batchPreview.select", { name: story.name })}
+      aria-label={m.story_batchPreview_select({ name: story.name })}
     >
       <Checkbox
         checked={checked}
@@ -91,7 +90,7 @@ function StoryRow({ story, checked, onToggle }: StoryRowProps) {
           STATE_COLOR[state] ?? STATE_COLOR.backlog,
         )}
       >
-        {t(STATE_LABEL[state] ?? state)}
+        {STATE_LABEL[state]?.() ?? state}
       </span>
       <PriorityIcon
         priority={story.priority}
@@ -115,7 +114,6 @@ export function BatchPreviewDialog({
   busy,
   onConfirm,
 }: BatchPreviewDialogProps) {
-  const { t } = useTranslation("story");
   const [search, setSearch] = useState("");
   const [debouncedSearch, setDebouncedSearch] = useState("");
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
@@ -225,27 +223,27 @@ export function BatchPreviewDialog({
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [statePopoverOpen, priorityPopoverOpen]);
 
-  const confirmText = t("batchPreview.confirmDelete", { count: selectedIds.size });
+  const confirmText = m.story_batchPreview_confirmDelete({ count: selectedIds.size });
 
   const [confirmInput, setConfirmInput] = useState("");
 
   const handleCopyConfirmText = () => {
     navigator.clipboard.writeText(confirmText);
-    toast.success(t("batchPreview.copied"));
+    toast.success(m.story_batchPreview_copied());
   };
 
   const handleConfirm = () => {
     if (selectedIds.size === 0) return;
     if (!isArchive && confirmInput.trim() !== confirmText) {
-      toast.error(t("batchPreview.invalidConfirm"));
+      toast.error(m.story_batchPreview_invalidConfirm());
       return;
     }
     onConfirm([...selectedIds]);
   };
 
-  const dialogTitle = t(isArchive ? "batchPreview.archiveTitle" : "batchPreview.deleteTitle");
-  const dialogDesc = t(isArchive ? "batchPreview.archiveDesc" : "batchPreview.deleteDesc");
-  const confirmBtnText = t(isArchive ? "batchPreview.confirmArchive" : "batchPreview.confirmDeleteBtn");
+  const dialogTitle = isArchive ? m.story_batchPreview_archiveTitle() : m.story_batchPreview_deleteTitle();
+  const dialogDesc = isArchive ? m.story_batchPreview_archiveDesc() : m.story_batchPreview_deleteDesc();
+  const confirmBtnText = isArchive ? m.story_batchPreview_confirmArchive() : m.story_batchPreview_confirmDeleteBtn();
 
   return (
     <Dialog open={open} onOpenChange={(v) => !busy && onOpenChange(v)}>
@@ -276,7 +274,7 @@ export function BatchPreviewDialog({
                   )}
                 >
                   <ListFilter className="size-3.5" />
-                  {t("column.state")}
+                  {m.story_column_state()}
                   <Badge variant="secondary" className="rounded-sm px-1 min-w-4 h-4 text-[10px]">
                     {selectedStates.size}
                   </Badge>
@@ -306,7 +304,7 @@ export function BatchPreviewDialog({
                       )}
                     >
                       <Icon className={cn("size-3.5 shrink-0", STATE_ICON_COLOR[state])} />
-                      <span className="flex-1">{t(STATE_LABEL[state])}</span>
+                      <span className="flex-1">{STATE_LABEL[state]?.() ?? state}</span>
                       {checked && <Check className="size-3.5 shrink-0 text-primary" />}
                     </button>
                   );
@@ -326,7 +324,7 @@ export function BatchPreviewDialog({
                   )}
                 >
                   <Flag className="size-3.5" />
-                  {t("column.priority")}
+                  {m.story_column_priority()}
                   <Badge variant="secondary" className="rounded-sm px-1 min-w-4 h-4 text-[10px]">
                     {selectedPriorities.size}
                   </Badge>
@@ -354,7 +352,7 @@ export function BatchPreviewDialog({
                       )}
                     >
                       <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>
                   );
@@ -365,7 +363,7 @@ export function BatchPreviewDialog({
             <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"
@@ -378,10 +376,10 @@ export function BatchPreviewDialog({
               <div className="flex flex-col items-center gap-2 py-12 text-center text-sm text-muted-foreground">
                 <X className="size-8 opacity-40" />
                 {debouncedSearch
-                  ? t("batchPreview.noMatch")
+                  ? m.story_batchPreview_noMatch()
                   : isArchive
-                    ? t("batchPreview.noneArchivable")
-                    : t("batchPreview.noStories")}
+                    ? m.story_batchPreview_noneArchivable()
+                    : m.story_batchPreview_noStories()}
               </div>
             ) : (
               <ul className="space-y-0.5">
@@ -413,20 +411,20 @@ export function BatchPreviewDialog({
                 checked={allChecked}
                 onClick={(e) => e.stopPropagation()}
                 onCheckedChange={handleSelectAll}
-                aria-label={t("batchPreview.selectAll")}
+                aria-label={m.story_batchPreview_selectAll()}
               />
-              <span>{t("batchPreview.selectAll")}</span>
+              <span>{m.story_batchPreview_selectAll()}</span>
             </div>
             {(isArchive || selectedIds.size === 0) && (
               <span className="text-xs text-muted-foreground">
-                {t("batchPreview.selectedCount", { count: selectedIds.size })}
+                {m.story_batchPreview_selectedCount({ count: selectedIds.size })}
               </span>
             )}
             {!isArchive && selectedIds.size > 0 && (
               <div className="flex flex-1 items-center gap-2 min-w-0 ml-4">
                 <AlertTriangle className="size-4 shrink-0 text-amber-500" />
                 <span className="shrink-0 text-xs text-amber-600 dark:text-amber-400">
-                  {t("batchPreview.confirmHint")}
+                  {m.story_batchPreview_confirmHint()}
                 </span>
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -438,7 +436,7 @@ export function BatchPreviewDialog({
                     </span>
                   </TooltipTrigger>
                   <TooltipContent side="top" className="text-xs">
-                    {t("batchPreview.copyHint")}
+                    {m.story_batchPreview_copyHint()}
                   </TooltipContent>
                 </Tooltip>
                 <Button
@@ -446,12 +444,12 @@ export function BatchPreviewDialog({
                   size="icon"
                   className="size-6 shrink-0"
                   onClick={handleCopyConfirmText}
-                  aria-label={t("batchPreview.copyAria")}
+                  aria-label={m.story_batchPreview_copyAria()}
                 >
                   <Copy className="size-3" />
                 </Button>
                 <Input
-                  placeholder={t("batchPreview.confirmPlaceholder")}
+                  placeholder={m.story_batchPreview_confirmPlaceholder()}
                   value={confirmInput}
                   onChange={(e) => setConfirmInput(e.target.value)}
                   className="h-8 flex-1 text-xs md:text-xs min-w-0 "
@@ -465,7 +463,7 @@ export function BatchPreviewDialog({
               onClick={() => onOpenChange(false)}
               disabled={busy}
             >
-              {t("batchPreview.cancel")}
+              {m.story_batchPreview_cancel()}
             </Button>
             <Button
               onClick={handleConfirm}
@@ -475,7 +473,7 @@ export function BatchPreviewDialog({
                 (!isArchive && confirmInput.trim() !== confirmText)
               }
             >
-              {busy ? t("batchPreview.processing") : confirmBtnText}
+              {busy ? m.story_batchPreview_processing() : confirmBtnText}
             </Button>
           </div>
         </DialogFooter>

package/src/components/story/views/story-list/batch-toolbar.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 { ArrowUp, ArrowDown, Archive, Trash2, BrushCleaning, CalendarCheck, CalendarPlus2, GitCompareArrows, Waypoints } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
@@ -34,6 +33,7 @@ import type { StoryPatch } from "../../display/group-fields";
 import type { StoryListItem } from "../../types";
 import { BatchPreviewDialog } from "./batch-preview-dialog";
 import { TransferStoryPopover } from "../../transfer-story-popover";
+import { m } from "@/paraglide/messages.js";
 
 export interface BatchToolbarProps {
   selectedCount: number;
@@ -83,7 +83,6 @@ export function BatchToolbar({
   onClearSelection,
   onTransfer,
 }: BatchToolbarProps) {
-  const { t } = useTranslation("story");
   const [archiveOpen, setArchiveOpen] = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(false);
 
@@ -102,9 +101,9 @@ export function BatchToolbar({
         <Checkbox
           checked={checked}
           onCheckedChange={onToggleAll}
-          aria-label={t("ai.selectAll")}
+          aria-label={m.story_ai_selectAll()}
         />
-        <span className="text-xs shrink-0 text-muted-foreground">{t("batchToolbar.selected", { count: selectedCount })}</span>
+        <span className="text-xs shrink-0 text-muted-foreground">{m.story_batchToolbar_selected({ count: selectedCount })}</span>
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
@@ -117,14 +116,14 @@ export function BatchToolbar({
             </Button>
           </TooltipTrigger>
           <TooltipContent side="top" className="text-xs">
-            {t("batchToolbar.clear")}
+            {m.story_batchToolbar_clear()}
           </TooltipContent>
         </Tooltip>
         <div className="mx-1 h-4 w-px bg-border" />
         {canMove && (
           <>
-            <ToolbarIconButton label={t("batchToolbar.moveUp")} icon={ArrowUp} disabled={busy || !canMoveUp} onClick={onMoveUp} />
-            <ToolbarIconButton label={t("batchToolbar.moveDown")} icon={ArrowDown} disabled={busy || !canMoveDown} onClick={onMoveDown} />
+            <ToolbarIconButton label={m.story_batchToolbar_moveUp()} icon={ArrowUp} disabled={busy || !canMoveUp} onClick={onMoveUp} />
+            <ToolbarIconButton label={m.story_batchToolbar_moveDown()} icon={ArrowDown} disabled={busy || !canMoveDown} onClick={onMoveDown} />
             <div className="mx-1 h-4 w-px bg-border" />
           </>
         )}
@@ -138,7 +137,7 @@ export function BatchToolbar({
               size="icon"
               className="size-7 text-muted-foreground hover:text-foreground"
               disabled={busy}
-              aria-label={t("batchToolbar.transfer")}
+              aria-label={m.story_batchToolbar_transfer()}
             >
               <GitCompareArrows className="size-4" />
             </Button>
@@ -146,21 +145,21 @@ export function BatchToolbar({
         />
         {onRemoveRelations && (
           <ToolbarIconButton
-            label={t("dependency.remove")}
+            label={m.story_dependency_remove()}
             icon={Waypoints}
             disabled={busy}
             onClick={() => onRemoveRelations(stories.map((s) => s.id))}
           />
         )}
-        <ToolbarIconButton label={t("batchToolbar.archive")} icon={Archive} disabled={busy || !canArchive} onClick={() => setArchiveOpen(true)} />
-        <ToolbarIconButton label={t("batchToolbar.delete")} icon={Trash2} disabled={busy} onClick={() => setDeleteOpen(true)} />
+        <ToolbarIconButton label={m.story_batchToolbar_archive()} icon={Archive} disabled={busy || !canArchive} onClick={() => setArchiveOpen(true)} />
+        <ToolbarIconButton label={m.story_batchToolbar_delete()} icon={Trash2} disabled={busy} onClick={() => setDeleteOpen(true)} />
         <div className="mx-1 h-4 w-px bg-border" />
         <div className="flex min-w-0 items-center gap-0.5">
           <StateEditor value="backlog" onChange={(v) => onBulkUpdate({ state: v })} variant="button" />
           <PriorityEditor value="none" onChange={(v) => onBulkUpdate({ priority: v })} variant="button" />
           <AssigneeEditor assignee={null} users={users} onChange={(v) => onBulkUpdate({ assigneeId: v })} variant="button" />
-          <DateEditor value={null} onChange={(v) => onBulkUpdate({ startDate: v })} label={t("batchToolbar.startDate")} icon={CalendarPlus2} />
-          <DateEditor value={null} onChange={(v) => onBulkUpdate({ targetDate: v })} label={t("batchToolbar.dueDate")} icon={CalendarCheck} />
+          <DateEditor value={null} onChange={(v) => onBulkUpdate({ startDate: v })} label={m.story_batchToolbar_startDate()} icon={CalendarPlus2} />
+          <DateEditor value={null} onChange={(v) => onBulkUpdate({ targetDate: v })} label={m.story_batchToolbar_dueDate()} icon={CalendarCheck} />
           <LabelsEditor labelIds={[]} labels={labels} onChange={(v) => onBulkUpdate({ labelIds: v })} variant="button" />
         </div>
       </div>

package/src/components/story/views/story-list/group.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { memo, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { ChevronDown, ChevronRight, Plus, Loader2, ChevronsDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -26,12 +25,13 @@ import type { DisplayProperty, GroupNode, GroupKey } from "../../display/types";
 import { cn } from "@/lib/utils";
 import { InlineStoryCreator } from "./inline-story-creator";
 import type { GroupCheckState } from "./group-select";
+import { m } from "@/paraglide/messages.js";
 
 const INLINE_CREATE_HEIGHT = 56;
 
-const GROUP_DIMENSION_LABEL: Record<Extract<GroupKey, "assignee" | "createdBy">, string> = {
-  assignee: "group.assignee",
-  createdBy: "group.createdBy",
+const GROUP_DIMENSION_LABEL: Record<Extract<GroupKey, "assignee" | "createdBy">, () => string> = {
+  assignee: m.story_group_assignee,
+  createdBy: m.story_group_createdBy,
 };
 
 interface VirtualGroupHeaderProps {
@@ -50,13 +50,12 @@ interface VirtualGroupHeaderProps {
 }
 
 export const VirtualGroupHeader = memo(function VirtualGroupHeader({ node, depth, collapsed, collapseKey, onToggle, onCreate, sticky, selectState, onToggleSelect, showSelect, groupDimension, showRoleLabel }: VirtualGroupHeaderProps) {
-  const { t } = useTranslation("story");
   const textColor =
     node.color?.split(" ").find((c) => c.startsWith("text")) ?? "text-muted-foreground";
   const Icon = node.icon;
   const iconSize = (groupDimension === "assignee" && node.key === "unassigned") ? "size-6" : "size-4";
   const roleLabel = showRoleLabel && (groupDimension === "assignee" || groupDimension === "createdBy")
-    ? t(GROUP_DIMENSION_LABEL[groupDimension as "assignee" | "createdBy"])
+    ? GROUP_DIMENSION_LABEL[groupDimension as "assignee" | "createdBy"]()
     : undefined;
 
   return (
@@ -65,7 +64,7 @@ export const VirtualGroupHeader = memo(function VirtualGroupHeader({ node, depth
         <Checkbox
           checked={selectState}
           onCheckedChange={onToggleSelect}
-          aria-label={t("group.selectAll", { label: node.label })}
+          aria-label={m.story_group_selectAll({ label: node.label })}
           className="ml-2 shrink-0"
         />
       )}
@@ -91,7 +90,7 @@ export const VirtualGroupHeader = memo(function VirtualGroupHeader({ node, depth
           type="button"
           onClick={(e) => { e.stopPropagation(); onCreate(); }}
           className="flex h-full w-9 mr-1 items-center justify-center text-muted-foreground hover:text-foreground"
-          aria-label={t("group.addTo", { label: node.label })}
+          aria-label={m.story_group_addTo({ label: node.label })}
         >
           <Plus className="size-4" />
         </button>
@@ -126,7 +125,6 @@ interface GroupTailRowProps {
 }
 
 export const GroupTailRow = memo(function GroupTailRow({ rowKey, hasMore, loading, groupBy, subGroupBy, groupKey, subGroupKey, setTailHeight, remeasure, projectContext, onLoadMore, onCreateInline, users, labels }: GroupTailRowProps) {
-  const { t } = useTranslation("story");
   const [name, setName] = useState("");
   const [showEditor, setShowEditor] = useState(false);
   const [priority, setPriority] = useState<StoryPriority>(() => {
@@ -220,7 +218,7 @@ export const GroupTailRow = memo(function GroupTailRow({ rowKey, hasMore, loadin
             onClick={onLoadMore}
           >
             {loading ? <Loader2 className="size-3.5 animate-spin" /> : <ChevronsDown className="size-3.5" />}
-            {loading ? t("group.loading") : t("group.loadMore")}
+            {loading ? m.story_group_loading() : m.story_group_loadMore()}
           </Button>
         ) : null}
         <Button
@@ -230,7 +228,7 @@ export const GroupTailRow = memo(function GroupTailRow({ rowKey, hasMore, loadin
           onClick={() => setShowEditor(true)}
         >
           <Plus className="size-3.5" />
-          {t("group.add")}
+          {m.story_group_add()}
         </Button>
         <div className="flex flex-1 items-center justify-end" />
       </div>

package/src/components/story/views/story-list/index.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
-import { useTranslation } from "react-i18next";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import {
   createStoryFn,
@@ -39,6 +38,7 @@ import { computeGroupCheckState, toggleGroupSelection } from "./group-select";
 import { GROUP_FIELD, toGroupFieldPatch, type GroupField, type StoryPatch } from "../../display/group-fields";
 import type { GroupKey } from "../../display/types";
 import { WavePhysicsLoader } from "@/components/shared-kit/loading/wave-physics-loader";
+import { m } from "@/paraglide/messages.js";
 
 const HEADER_ROW_HEIGHT = 36;
 const STORY_ROW_HEIGHT = 44;
@@ -63,7 +63,6 @@ interface StoryListProps {
 }
 
 export function StoryList({ groups, isLoading = false, displayFilters, users, labels, projects, onRefresh, onPatchStory, onOpenStory, onCreate, onLoadMoreGroup, projectContext, projectId }: StoryListProps) {
-  const { t } = useTranslation("story");
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
   const { groupBy, subGroupBy, properties } = displayFilters;
   const showRoleLabel =
@@ -121,7 +120,7 @@ export function StoryList({ groups, isLoading = false, displayFilters, users, la
       await createStoryFn({ data });
       onRefresh();
     } catch (e) {
-      toast.error((e as Error)?.message || t("list.createFailed"));
+      toast.error((e as Error)?.message || m.story_list_createFailed());
     }
   }, [groupBy, subGroupBy, onRefresh, projectId]);
 
@@ -222,10 +221,10 @@ export function StoryList({ groups, isLoading = false, displayFilters, users, la
       if (targets.length === 0) return;
       try {
         await reorderStoriesFn({ data: { items: targets } });
-        toast.success(dir === "up" ? t("list.movedUp") : t("list.movedDown"));
+        toast.success(dir === "up" ? m.story_list_movedUp() : m.story_list_movedDown());
         onRefresh();
       } catch (e) {
-        toast.error((e as Error)?.message || t("list.moveFailed"));
+        toast.error((e as Error)?.message || m.story_list_moveFailed());
       }
     },
     [orderByGroup, selectedIds, onRefresh],
@@ -238,13 +237,13 @@ export function StoryList({ groups, isLoading = false, displayFilters, users, la
       const res = await bulkArchiveStoriesFn({ data: { storyIds: ids } });
       toast.success(
         res.skipped > 0
-          ? t("list.bulkArchivedSkipped", { archived: res.archived, skipped: res.skipped })
-          : t("list.bulkArchived", { count: res.archived }),
+          ? m.story_list_bulkArchivedSkipped({ archived: res.archived, skipped: res.skipped })
+          : m.story_list_bulkArchived({ count: res.archived }),
       );
       setSelectedIds(new Set());
       onRefresh();
     } catch (e) {
-      toast.error((e as Error)?.message || t("list.archiveFailed"));
+      toast.error((e as Error)?.message || m.story_list_archiveFailed());
     }
   }, [selectedIds, onRefresh]);
 
@@ -253,11 +252,11 @@ export function StoryList({ groups, isLoading = false, displayFilters, users, la
     if (ids.length === 0) return;
     try {
       const res = await bulkDeleteStoriesFn({ data: { storyIds: ids } });
-      toast.success(t("list.bulkDeleted", { count: res.deleted }));
+      toast.success(m.story_list_bulkDeleted({ count: res.deleted }));
       setSelectedIds(new Set());
       onRefresh();
     } catch (e) {
-      toast.error((e as Error)?.message || t("list.deleteFailed"));
+      toast.error((e as Error)?.message || m.story_list_deleteFailed());
     }
   }, [selectedIds, onRefresh]);
 
@@ -267,10 +266,10 @@ export function StoryList({ groups, isLoading = false, displayFilters, users, la
       try {
 await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
       setSelectedIds(new Set());
-      toast.success(t("list.bulkUpdated"));
+      toast.success(m.story_list_bulkUpdated());
         onRefresh();
       } catch (e) {
-        toast.error((e as Error)?.message || t("list.bulkUpdateFailed"));
+        toast.error((e as Error)?.message || m.story_list_bulkUpdateFailed());
       }
     },
     [selectedIds, onRefresh],
@@ -447,12 +446,12 @@ await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
         {isLoading && groups.length === 0 && (
           <div className="flex flex-col items-center gap-3 py-12" aria-busy="true">
             <WavePhysicsLoader />
-            <p className="text-sm text-muted-foreground">{t("group.loadingData")}</p>
+            <p className="text-sm text-muted-foreground">{m.story_group_loadingData()}</p>
           </div>
         )}
         {!isLoading && groups.length === 0 && (
           <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
-            {t("table.empty")}
+            {m.story_table_empty()}
           </div>
         )}
       </div>

package/src/components/story/views/story-list/inline-story-creator.tsx

@@ -16,12 +16,12 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { memo, useEffect, useRef, useMemo } from "react";
-import { useTranslation } from "react-i18next";
 import { Loader2, CalendarCheck, CalendarPlus2, Check, X, Trees } from "lucide-react";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import type { UserBrief } from "../../types";
 import type { StoryState, StoryPriority } from "../../constants";
 import { PriorityEditor, StateEditor, AssigneeEditor, DateEditor, LabelsEditor } from "../../inline-editors";
+import { m } from "@/paraglide/messages.js";
 
 export interface InlineStoryCreatorProps {
   name: string;
@@ -45,7 +45,6 @@ export interface InlineStoryCreatorProps {
 }
 
 export const InlineStoryCreator = memo(function InlineStoryCreator({ name, setName, priority, setPriority, state, setState, assigneeId, setAssigneeId, startDate, setStartDate, targetDate, setTargetDate, users, labels, loading, onSubmit, onCancel, projectContext }: InlineStoryCreatorProps) {
-  const { t } = useTranslation("story");
   const inputRef = useRef<HTMLInputElement>(null);
   const selectedUser = useMemo(() => {
     if (!assigneeId || !users) return null;
@@ -83,21 +82,21 @@ export const InlineStoryCreator = memo(function InlineStoryCreator({ name, setNa
           if (e.key === "Enter") { e.preventDefault(); handleSubmit(); }
           if (e.key === "Escape") { e.preventDefault(); onCancel(); }
         }}
-        placeholder={t("inlineCreator.placeholder")}
+        placeholder={m.story_inlineCreator_placeholder()}
         className="flex-1 min-w-0 h-7 rounded bg-background px-2 text-xs text-foreground outline-none  border-border focus:ring-1 focus:ring-ring"
       />
       <PriorityEditor value={priority} onChange={setPriority} variant="button" />
       <StateEditor value={state} onChange={setState} variant="button" />
       <AssigneeEditor assignee={selectedUser} users={users || []} onChange={setAssigneeId} variant="button" />
-      <DateEditor value={startDate} onChange={setStartDate} label={t("inlineCreator.startDate")} icon={CalendarPlus2} />
-      <DateEditor value={targetDate} onChange={setTargetDate} label={t("inlineCreator.dueDate")} icon={CalendarCheck} />
+      <DateEditor value={startDate} onChange={setStartDate} label={m.story_inlineCreator_startDate()} icon={CalendarPlus2} />
+      <DateEditor value={targetDate} onChange={setTargetDate} label={m.story_inlineCreator_dueDate()} icon={CalendarCheck} />
       <LabelsEditor labelIds={[]} labels={labels || []} onChange={() => {}} variant="button" />
       <button
         type="button"
         className="flex items-center justify-center size-7 rounded hover:bg-accent text-muted-foreground hover:text-foreground shrink-0 disabled:opacity-50"
         disabled={loading}
         onClick={handleSubmit}
-        aria-label={t("inlineCreator.create")}
+        aria-label={m.story_inlineCreator_create()}
       >
         {loading ? <Loader2 className="size-3.5 animate-spin" /> : <Check className="size-3.5" />}
       </button>
@@ -105,7 +104,7 @@ export const InlineStoryCreator = memo(function InlineStoryCreator({ name, setNa
         type="button"
         className="flex items-center justify-center size-7 rounded hover:bg-accent text-muted-foreground hover:text-foreground shrink-0"
         onClick={onCancel}
-        aria-label={t("inlineCreator.cancel")}
+        aria-label={m.story_inlineCreator_cancel()}
       >
         <X className="size-3.5" />
       </button>

package/src/components/story/views/story-list/row.tsx

@@ -17,7 +17,6 @@
 
 import { memo, useCallback, useMemo } from "react";
 import { useServerFn } from "@tanstack/react-start";
-import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { CalendarCheck, CalendarPlus2 } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -28,6 +27,7 @@ import type { DisplayProperty } from "../../display/types";
 import { PriorityEditor, StateEditor, AssigneeEditor, DateEditor, LabelsEditor } from "../../inline-editors";
 import { cn } from "@/lib/utils";
 import type { StoryPatch } from "../../display/group-fields";
+import { m } from "@/paraglide/messages.js";
 
 interface StoryListRowProps {
   story: StoryListItem;
@@ -46,7 +46,6 @@ interface StoryListRowProps {
 }
 
 export const StoryListRow = memo(function StoryListRow({ story, group, indent, isChild, users, labels, properties, onOpenStory, onPatchStory, selected, onToggle }: StoryListRowProps) {
-  const { t } = useTranslation("story");
   const updateStory = useServerFn(updateStoryFn);
 
   const updateField = useCallback(
@@ -55,10 +54,10 @@ export const StoryListRow = memo(function StoryListRow({ story, group, indent, i
         await updateStory({ data: { storyId: story.id, ...patch } });
         onPatchStory(story.id, patch);
       } catch (e) {
-        toast.error((e as Error)?.message || t("row.updateFailed"));
+        toast.error((e as Error)?.message || m.story_row_updateFailed());
       }
     },
-    [story.id, updateStory, onPatchStory, t],
+    [story.id, updateStory, onPatchStory, ],
   );
 
   const setPriority = useCallback((v: StoryPriority) => updateField({ priority: v }), [updateField]);
@@ -88,7 +87,7 @@ export const StoryListRow = memo(function StoryListRow({ story, group, indent, i
       <Checkbox
         checked={selected}
         onCheckedChange={() => onToggle(story.id)}
-        aria-label={t("children.selectStory", { name: story.name })}
+        aria-label={m.story_children_selectStory({ name: story.name })}
         className={cn("shrink-0 transition-opacity", selected ? "opacity-100" : "opacity-0 group-hover:opacity-100")}
       />
       <button
@@ -119,10 +118,10 @@ export const StoryListRow = memo(function StoryListRow({ story, group, indent, i
         <AssigneeEditor assignee={story.assignee} users={users} onChange={setAssignee} variant="button" />
       )}
       {properties.includes("startDate") && (
-        <DateEditor value={story.startDate} onChange={setStartDate} label={t("row.startDate")} icon={CalendarPlus2} />
+        <DateEditor value={story.startDate} onChange={setStartDate} label={m.story_row_startDate()} icon={CalendarPlus2} />
       )}
       {properties.includes("dueDate") && (
-        <DateEditor value={story.targetDate} onChange={setTargetDate} label={t("row.dueDate")} icon={CalendarCheck} overdue={overdue} />
+        <DateEditor value={story.targetDate} onChange={setTargetDate} label={m.story_row_dueDate()} icon={CalendarCheck} overdue={overdue} />
       )}
       {properties.includes("labels") && (
         <LabelsEditor labelIds={currentLabelIds} labels={labels} onChange={setLabels} variant="button" aiContext={{ name: () => story.name }} />