@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/story/display/group-resolver.tsx

@@ -23,12 +23,10 @@ import { STORY_STATES, STATE_LABEL, STATE_COLOR, STATE_ICON, STORY_PRIORITIES, P
 import { PRIORITY_COLOR } from "../priority-icon";
 import type { StoryListItem } from "../types";
 import type { GroupContext, GroupKey, GroupNode } from "./types";
-import type { TFunction } from "i18next";
+import { m } from "@/paraglide/messages.js";
 
 type KeyResolver = (item: StoryListItem) => string[];
 
-const identityT = ((key: string) => key) as TFunction;
-
 const RESOLVERS: Record<Exclude<GroupKey, "none">, KeyResolver> = {
   state: (item) => [item.state],
   priority: (item) => [item.priority],
@@ -38,9 +36,9 @@ const RESOLVERS: Record<Exclude<GroupKey, "none">, KeyResolver> = {
   project: (item) => [item.projectId ?? "no-project"],
 };
 
-export function groupBy(items: StoryListItem[], key: GroupKey, ctx: GroupContext, includeEmpty = false, t: TFunction = identityT): GroupNode[] {
+export function groupBy(items: StoryListItem[], key: GroupKey, ctx: GroupContext, includeEmpty = false): GroupNode[] {
   if (key === "none") {
-    return [{ key: "all", label: t("group.all"), items: [...items] }];
+    return [{ key: "all", label: m.story_group_all(), items: [...items] }];
   }
   const resolver = RESOLVERS[key];
   const buckets = new Map<string, StoryListItem[]>();
@@ -55,7 +53,7 @@ export function groupBy(items: StoryListItem[], key: GroupKey, ctx: GroupContext
   const sortedKeys = sortGroupKeys(order, key, includeEmpty);
   return sortedKeys.map(k => ({
     key: k,
-    label: resolveGroupLabel(k, key, ctx, t),
+    label: resolveGroupLabel(k, key, ctx),
     icon: resolveGroupIcon(k, key, ctx),
     color: resolveGroupColor(k, key),
     items: buckets.get(k) ?? [],
@@ -74,20 +72,20 @@ function sortGroupKeys(keys: string[], groupKey: GroupKey, includeEmpty: boolean
   return keys;
 }
 
-export function resolveGroupLabel(k: string, groupKey: GroupKey, ctx: GroupContext, t: TFunction = identityT): string {
-  if (groupKey === "state") return t(STATE_LABEL[k as keyof typeof STATE_LABEL] ?? k);
-  if (groupKey === "priority") return t(PRIORITY_LABEL[k as keyof typeof PRIORITY_LABEL] ?? k);
+export function resolveGroupLabel(k: string, groupKey: GroupKey, ctx: GroupContext): string {
+  if (groupKey === "state") return STATE_LABEL[k as keyof typeof STATE_LABEL]?.() ?? k;
+  if (groupKey === "priority") return PRIORITY_LABEL[k as keyof typeof PRIORITY_LABEL]?.() ?? k;
   if (groupKey === "assignee") {
-    if (k === "unassigned") return t("group.unassigned");
-    return ctx.users.find(u => u.id === k)?.username ?? t("group.unknown_user");
+    if (k === "unassigned") return m.story_group_unassigned();
+    return ctx.users.find(u => u.id === k)?.username ?? m.story_group_unknown_user();
   }
   if (groupKey === "labels") {
-    if (k === "no-labels") return t("group.no_labels");
+    if (k === "no-labels") return m.story_group_no_labels();
     return ctx.labels.find(l => l.id === k)?.name ?? k;
   }
-  if (groupKey === "createdBy") return ctx.users.find(u => u.id === k)?.username ?? t("group.unknown_user");
+  if (groupKey === "createdBy") return ctx.users.find(u => u.id === k)?.username ?? m.story_group_unknown_user();
   if (groupKey === "project") {
-    if (k === "no-project") return t("group.no_project");
+    if (k === "no-project") return m.story_group_no_project();
     return ctx.projects.find(p => p.id === k)?.name ?? k;
   }
   return k;

package/src/components/story/display/use-grouped-stories.ts

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
 import type { DisplayOptions, GroupContext, GroupNode } from "./types";
 import type { StoryListItem } from "../types";
 import { applyOrder } from "./order-resolver";
@@ -28,16 +27,15 @@ interface UseGroupedArgs extends GroupContext {
 }
 
 export function useGroupedStories({ stories, filters, users, labels, projects }: UseGroupedArgs): GroupNode[] {
-  const { t } = useTranslation("story");
   return useMemo(() => {
     const ctx: GroupContext = { users, labels, projects };
     const ordered = applyOrder(stories, filters.orderBy, filters.orderDir);
-    const groups = groupBy(ordered, filters.groupBy, ctx, filters.showEmptyGroups, t);
+    const groups = groupBy(ordered, filters.groupBy, ctx, filters.showEmptyGroups);
     if (filters.subGroupBy !== "none") {
       groups.forEach(g => {
-        g.subGroups = groupBy(g.items, filters.subGroupBy, ctx, false, t);
+        g.subGroups = groupBy(g.items, filters.subGroupBy, ctx, false);
       });
     }
     return groups;
-  }, [stories, filters.orderBy, filters.orderDir, filters.groupBy, filters.subGroupBy, filters.showEmptyGroups, users, labels, projects, t]);
+  }, [stories, filters.orderBy, filters.orderDir, filters.groupBy, filters.subGroupBy, filters.showEmptyGroups, users, labels, projects]);
 }

package/src/components/story/display/use-paged-story-groups.ts

@@ -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 type { StoryListItem, UserBrief } from "../types";
 import type { StoryFilters } from "../story-toolbar";
 import type { FilterCondition } from "../filters";
@@ -26,6 +25,7 @@ import { resolveGroupLabel, resolveGroupIcon, resolveGroupColor } from "./group-
 import type { DisplayOptions, GroupContext, GroupKey, GroupNode } from "./types";
 import type { StoryPatch } from "./group-fields";
 import { PRIORITY_RANK, STORY_PRIORITIES, STORY_STATES } from "../constants";
+import { m } from "@/paraglide/messages.js";
 
 /** 服务端按组分页的组节点：在 GroupNode 上标记 total/hasMore/loading */
 export interface PagedGroupNode extends GroupNode {
@@ -369,7 +369,6 @@ export function usePagedStoryGroups(args: PagedStoriesArgs): {
   patchStory: (storyId: string, patch: StoryPatch) => void;
 } {
   const { filters, conditions, display, users, labels, projects, enabled = true } = args;
-  const { t } = useTranslation("story");
   const groupBy = display.groupBy;
   const subGroupBy = display.subGroupBy;
   const pageSize = display.pageSize;
@@ -464,11 +463,11 @@ export function usePagedStoryGroups(args: PagedStoriesArgs): {
               })
             : Promise.resolve(null),
         ]);
-        const groupInfos = groupInfosResult.groups;
+        const groupInfos = groupInfosResult.groups as PagedGroupNode[];
 
-        const scaffolds: PagedGroupNode[] = groupInfos.map((g) => ({
+        const scaffolds: PagedGroupNode[] = groupInfos.map((g: PagedGroupNode) => ({
           key: g.key,
-          label: groupBy === "none" ? t("group.all") : resolveGroupLabel(g.key, groupBy, ctx, t),
+          label: groupBy === "none" ? m.story_group_all() : resolveGroupLabel(g.key, groupBy, ctx),
           icon: groupBy === "none" ? undefined : resolveGroupIcon(g.key, groupBy, ctx),
           color: resolveGroupColor(g.key, groupBy),
           items: [],
@@ -495,10 +494,10 @@ export function usePagedStoryGroups(args: PagedStoriesArgs): {
                     parentGroupKey: g.key,
                   },
                 })
-              ).groups;
-              const subScaffolds: PagedGroupNode[] = subGroupsInfo.map((sg) => ({
+              ).groups as PagedGroupNode[];
+              const subScaffolds: PagedGroupNode[] = subGroupsInfo.map((sg: PagedGroupNode) => ({
                 key: sg.key,
-                label: resolveGroupLabel(sg.key, subGroupBy, ctx, t),
+                label: resolveGroupLabel(sg.key, subGroupBy, ctx),
                 icon: resolveGroupIcon(sg.key, subGroupBy, ctx),
                 color: resolveGroupColor(sg.key, subGroupBy),
                 items: [],
@@ -521,7 +520,7 @@ export function usePagedStoryGroups(args: PagedStoriesArgs): {
                   }).catch(() => ({ items: [] as StoryListItem[], total: sg.total ?? 0, hasMore: false })),
                 ),
               );
-              subLoaded.forEach((res, i) => {
+              subLoaded.forEach((res, i: number) => {
                 subScaffolds[i].items = res.items;
                 subScaffolds[i].total = res.total;
                 subScaffolds[i].hasMore = res.hasMore;
@@ -539,7 +538,7 @@ export function usePagedStoryGroups(args: PagedStoriesArgs): {
               }).catch(() => ({ items: [] as StoryListItem[], total: g.total ?? 0, hasMore: false })),
             ),
           );
-          loaded.forEach((res, i) => {
+          loaded.forEach((res, i: number) => {
             scaffolds[i].items = res.items;
             scaffolds[i].total = res.total;
             scaffolds[i].hasMore = res.hasMore;
@@ -608,7 +607,7 @@ export function usePagedStoryGroups(args: PagedStoriesArgs): {
         take: pageSize,
       },
     })
-      .then((res) => {
+      .then((res: { items: StoryListItem[]; total: number | undefined; hasMore: boolean }) => {
         loadingKeysRef.current.delete(loadKey);
         setState((prev) => {
           if (prev.sig !== currentSig) return prev;
@@ -619,7 +618,7 @@ export function usePagedStoryGroups(args: PagedStoriesArgs): {
               s.key === subContainerKey
                 ? {
                     ...s,
-                    items: [...s.items, ...res.items.filter((si) => !new Set(s.items.map((x) => x.id)).has(si.id))],
+                    items: [...s.items, ...res.items.filter((si: StoryListItem) => !new Set(s.items.map((x) => x.id)).has(si.id))],
                     total: res.total,
                     hasMore: res.hasMore,
                     loading: false,
@@ -637,7 +636,7 @@ export function usePagedStoryGroups(args: PagedStoriesArgs): {
             };
           }
           const known = new Set(g.items.map((s) => s.id));
-          const fresh = res.items.filter((s) => !known.has(s.id));
+          const fresh = res.items.filter((s: StoryListItem) => !known.has(s.id));
           return {
             ...prev,
             groups: prev.groups.map((x) =>

package/src/components/story/filters/add-filter-dropdown.tsx

@@ -16,11 +16,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { FILTER_FIELD_CONFIGS, getFilterIcon, type FilterKey, type FilterCondition } from "./filter-types";
+import { m } from "@/paraglide/messages.js";
 
 interface AddFilterDropdownProps {
   conditions: FilterCondition[];
@@ -28,7 +28,6 @@ interface AddFilterDropdownProps {
 }
 
 export function AddFilterDropdown({ conditions, onAdd }: AddFilterDropdownProps) {
-  const { t } = useTranslation("story");
   const [open, setOpen] = useState(false);
   const usedKeys = new Set(conditions.map((c) => c.property));
   const available = FILTER_FIELD_CONFIGS.filter((c) => !usedKeys.has(c.key));
@@ -43,12 +42,12 @@ export function AddFilterDropdown({ conditions, onAdd }: AddFilterDropdownProps)
           className="h-7 gap-1 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
         >
           <Plus className="size-3.5" />
-          {t("filter.addCondition")}
+          {m.story_filter_addCondition()}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-48 p-1" align="start">
         {available.length === 0 ? (
-          <div className="px-2 py-4 text-center text-xs text-muted-foreground">{t("filter.allAdded")}</div>
+          <div className="px-2 py-4 text-center text-xs text-muted-foreground">{m.story_filter_allAdded()}</div>
         ) : (
           available.map((config) => {
             const Icon = config.icon;
@@ -60,7 +59,7 @@ export function AddFilterDropdown({ conditions, onAdd }: AddFilterDropdownProps)
                 className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted transition-colors"
               >
                 <Icon className="size-4 text-muted-foreground shrink-0" />
-                <span>{t(config.label)}</span>
+                <span>{config.label()}</span>
               </button>
             );
           })

package/src/components/story/filters/applied-filters.tsx

@@ -23,8 +23,8 @@ import { PriorityIcon } from "../priority-icon";
 import { STORY_STATES, STATE_ICON, PRIORITY_LABEL, type StoryState, type StoryPriority } from "../constants";
 import { getFilterLabel, getFilterIcon, type FilterCondition, type FilterKey } from "./filter-types";
 import { cn } from "@/lib/utils";
-import { useTranslation } from "react-i18next";
 import type { UserBrief } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 interface AppliedFiltersProps {
   conditions: FilterCondition[];
@@ -38,7 +38,6 @@ interface AppliedFiltersProps {
 const valueChipClass = "inline-flex items-center gap-1 px-1 py-0.5 leading-none";
 
 export function AppliedFilters({ conditions, onRemove, onClearAll, onArchiveAll, users, labels }: AppliedFiltersProps) {
-  const { t } = useTranslation("story");
   if (conditions.length === 0) return null;
 
   const showArchiveAll = !!onArchiveAll && hasArchiveableState(conditions);
@@ -58,7 +57,7 @@ export function AppliedFilters({ conditions, onRemove, onClearAll, onArchiveAll,
           >
             <span className="flex h-full items-center gap-1 rounded-l-full pl-2 pr-1.5 text-foreground">
               <Icon className="size-3.5 shrink-0 text-muted-foreground" />
-              <span className="whitespace-nowrap font-medium">{t(getFilterLabel(c.property))}</span>
+              <span className="whitespace-nowrap font-medium">{getFilterLabel(c.property)()}</span>
             </span>
 
             {!isEmptyOp && valueItems.length > 0 && (
@@ -99,7 +98,7 @@ export function AppliedFilters({ conditions, onRemove, onClearAll, onArchiveAll,
         className="h-7 rounded px-2 text-xs text-muted-foreground hover:text-foreground"
       >
         <BrushCleaning className="mr-1 size-3.5" />
-        {t("filters.clearAll")}
+        {m.story_filters_clearAll()}
       </Button>
       {showArchiveAll && (
         <Button
@@ -109,7 +108,7 @@ export function AppliedFilters({ conditions, onRemove, onClearAll, onArchiveAll,
           className="h-7 rounded px-2 text-xs text-muted-foreground hover:text-foreground"
         >
           <Archive className="mr-1 size-3.5" />
-          {t("filters.archiveAll")}
+          {m.story_filters_archiveAll()}
         </Button>
       )}
     </div>
@@ -127,7 +126,6 @@ function ValueChip({
   users?: UserBrief[];
   labels?: { id: string; name: string; color: string }[];
 }) {
-  const { t } = useTranslation("story");
   switch (property) {
     case "state": {
       const st = STORY_STATES.find((s) => s.value === valueItem);
@@ -137,7 +135,7 @@ function ValueChip({
       return (
         <span className={valueChipClass}>
           <SI className={cn("size-3", tc)} />
-          <span className={cn("whitespace-nowrap", tc)}>{t(st.label)}</span>
+          <span className={cn("whitespace-nowrap", tc)}>{st.label()}</span>
         </span>
       );
     }
@@ -146,7 +144,7 @@ function ValueChip({
       return (
         <span className={valueChipClass}>
           <PriorityIcon priority={p} />
-          <span className="whitespace-nowrap">{t(PRIORITY_LABEL[p] ?? valueItem)}</span>
+          <span className="whitespace-nowrap">{PRIORITY_LABEL[p]?.() ?? valueItem}</span>
         </span>
       );
     }
@@ -155,7 +153,7 @@ function ValueChip({
         return (
           <span className={valueChipClass}>
             <CircleUser className="size-3 text-muted-foreground" />
-            <span className="whitespace-nowrap text-muted-foreground">{t("filter.unassignedAssignee")}</span>
+            <span className="whitespace-nowrap text-muted-foreground">{m.story_filter_unassignedAssignee()}</span>
           </span>
         );
       }

package/src/components/story/filters/filter-condition.tsx

@@ -16,12 +16,12 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { X } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import { FILTER_FIELD_CONFIGS, OPERATOR_LABELS, type FilterCondition, type FilterKey, type FilterOperator } from "./filter-types";
 import { FilterValueInput } from "./filter-value-input";
 import type { UserBrief } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 function getFilterConfig(key: FilterKey) {
   return FILTER_FIELD_CONFIGS.find((c) => c.key === key) ?? FILTER_FIELD_CONFIGS[0];
@@ -38,7 +38,6 @@ interface FilterConditionRowProps {
 }
 
 export function FilterConditionRow({ condition, onChangeProperty, onChangeOperator, onChangeValue, onRemove, users, labels }: FilterConditionRowProps) {
-  const { t } = useTranslation("story");
   const config = getFilterConfig(condition.property);
   if (!config) return null;
 
@@ -51,7 +50,6 @@ export function FilterConditionRow({ condition, onChangeProperty, onChangeOperat
         current={condition.property}
         options={availableProperties}
         onChange={onChangeProperty}
-        t={t}
       />
 
       <div className="h-4 w-px bg-border" />
@@ -60,7 +58,6 @@ export function FilterConditionRow({ condition, onChangeProperty, onChangeOperat
         current={condition.operator}
         operators={config.operators}
         onChange={onChangeOperator}
-        t={t}
       />
 
       {condition.operator !== "is_empty" && condition.operator !== "is_not_empty" && (
@@ -90,14 +87,14 @@ export function FilterConditionRow({ condition, onChangeProperty, onChangeOperat
   );
 }
 
-function PropertySelect({ current, options, onChange, t }: { current: FilterKey; options: typeof FILTER_FIELD_CONFIGS; onChange: (key: FilterKey) => void; t: (key: string) => string }) {
+function PropertySelect({ current, options, onChange }: { current: FilterKey; options: typeof FILTER_FIELD_CONFIGS; onChange: (key: FilterKey) => void }) {
   const CurrentIcon = options.find((o) => o.key === current)?.icon;
   return (
     <Popover>
       <PopoverTrigger asChild>
         <button className="flex h-full items-center gap-1 rounded-l-sm px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap">
           {CurrentIcon && <CurrentIcon className="size-3.5 shrink-0" />}
-          <span className="pr-1">{t(options.find((o) => o.key === current)?.label ?? current)}</span>
+          <span className="pr-1">{options.find((o) => o.key === current)?.label() ?? current}</span>
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-40 p-1" align="start">
@@ -112,7 +109,7 @@ function PropertySelect({ current, options, onChange, t }: { current: FilterKey;
               className={cn("flex w-full items-center gap-2 rounded px-2 text-sm transition-colors", active ? "bg-accent font-medium py-0.5" : "hover:bg-muted py-1.5")}
             >
               <OptIcon className="size-4 text-muted-foreground" />
-              <span>{t(opt.label)}</span>
+              <span>{opt.label()}</span>
             </button>
           );
         })}
@@ -121,7 +118,7 @@ function PropertySelect({ current, options, onChange, t }: { current: FilterKey;
   );
 }
 
-function OperatorSelect({ current, operators, onChange, t }: { current: FilterOperator; operators: FilterOperator[]; onChange: (op: FilterOperator) => void; t: (key: string) => string }) {
+function OperatorSelect({ current, operators, onChange }: { current: FilterOperator; operators: FilterOperator[]; onChange: (op: FilterOperator) => void }) {
   const isSingle = (op: FilterOperator) => op === "is" || op === "is_not";
   const isMulti = (op: FilterOperator) => op === "is_any_of" || op === "is_not_any_of";
 
@@ -129,7 +126,7 @@ function OperatorSelect({ current, operators, onChange, t }: { current: FilterOp
     <Popover>
       <PopoverTrigger asChild>
         <button className="flex h-full items-center px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap">
-          {t(OPERATOR_LABELS[current])}
+          {OPERATOR_LABELS[current]()}
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-40 p-1" align="start">
@@ -142,12 +139,12 @@ function OperatorSelect({ current, operators, onChange, t }: { current: FilterOp
               onClick={() => onChange(op)}
               className={cn("flex w-full items-center justify-between rounded px-2 text-sm transition-colors", active ? "bg-accent font-medium py-0.5" : "hover:bg-muted py-1.5")}
             >
-              <span>{t(OPERATOR_LABELS[op])}</span>
+              <span>{OPERATOR_LABELS[op]()}</span>
               {isSingle(op) && (
-                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{t("filter.single")}</span>
+                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{m.story_filter_single()}</span>
               )}
               {isMulti(op) && (
-                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{t("filter.multi")}</span>
+                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{m.story_filter_multi()}</span>
               )}
             </button>
           );

package/src/components/story/filters/filter-row.tsx

@@ -16,13 +16,13 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useCallback } from "react";
-import { useTranslation } from "react-i18next";
 import { CopyPlus, BrushCleaning, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { AddFilterDropdown } from "./add-filter-dropdown";
 import { FilterConditionRow } from "./filter-condition";
 import { createDefaultCondition, type FilterCondition, type FilterKey, type FilterOperator } from "./filter-types";
 import type { UserBrief } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 interface StoryFilterRowProps {
   conditions: FilterCondition[];
@@ -35,7 +35,6 @@ interface StoryFilterRowProps {
 }
 
 export function StoryFilterRow({ conditions, onChange, onClearAll, onCancel, onSaveAsView, users, labels }: StoryFilterRowProps) {
-  const { t } = useTranslation("story");
   const handleAdd = useCallback((property: FilterKey) => {
     onChange([...conditions, createDefaultCondition(property)]);
   }, [conditions, onChange]);
@@ -74,7 +73,7 @@ export function StoryFilterRow({ conditions, onChange, onClearAll, onCancel, onS
             />
           ))
         ) : (
-          <span className="px-1 text-xs text-muted-foreground">{t("filter.label")}</span>
+          <span className="px-1 text-xs text-muted-foreground">{m.story_filter_label()}</span>
         )}
         <AddFilterDropdown conditions={conditions} onAdd={handleAdd} />
       </div>
@@ -87,7 +86,7 @@ export function StoryFilterRow({ conditions, onChange, onClearAll, onCancel, onS
             className="h-7 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
           >
             <BrushCleaning className="size-3.5" />
-            {t("filter.clear")}
+            {m.story_filter_clear()}
           </Button>
         ) : onCancel ? (
           <Button
@@ -97,7 +96,7 @@ export function StoryFilterRow({ conditions, onChange, onClearAll, onCancel, onS
             className="h-7 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
           >
             <X className="size-3.5" />
-            {t("filter.cancel")}
+            {m.story_filter_cancel()}
           </Button>
         ) : null}
         {onSaveAsView && (
@@ -108,7 +107,7 @@ export function StoryFilterRow({ conditions, onChange, onClearAll, onCancel, onS
             className="h-7 gap-1 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
           >
             <CopyPlus className="size-3.5" />
-            {t("filter.saveAsView")}
+            {m.story_filter_saveAsView()}
           </Button>
         )}
       </div>

package/src/components/story/filters/filter-toggle.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -16,7 +17,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { ListFilter, ListFilterPlus } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
@@ -29,7 +29,6 @@ interface StoryFilterToggleProps {
 }
 
 export function StoryFilterToggle({ visible, conditions, onToggle }: StoryFilterToggleProps) {
-  const { t } = useTranslation("story");
   const activeCount = conditions.length;
   const hasActive = activeCount > 0;
   const isOpen = visible || hasActive;
@@ -55,7 +54,7 @@ export function StoryFilterToggle({ visible, conditions, onToggle }: StoryFilter
           )}
         </Button>
       </TooltipTrigger>
-      <TooltipContent>{t(isOpen ? "filter.cancel" : "filter.toggleOpen")}</TooltipContent>
+      <TooltipContent>{isOpen ? m.story_filter_cancel() : m.story_filter_toggleOpen()}</TooltipContent>
     </Tooltip>
   );
 }

package/src/components/story/filters/filter-types.ts

@@ -15,6 +15,7 @@
 // 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 { m } from '@/paraglide/messages.js';
 import { ListFilter, Flag, CircleUser, Tag, Calendar, Type, type LucideIcon } from "lucide-react";
 
 export type FilterKey = "state" | "priority" | "assigneeId" | "labelId" | "createdDate" | "targetDate" | "title";
@@ -35,7 +36,7 @@ export type FilterFieldType = "select" | "multi_select" | "user" | "date" | "tex
 
 export interface FilterFieldConfig {
   key: FilterKey;
-  label: string;
+  label: () => string;
   icon: LucideIcon;
   fieldType: FilterFieldType;
   operators: FilterOperator[];
@@ -49,37 +50,37 @@ const DATE_OPERATORS: FilterOperator[] = ["is", "is_not", "before", "after", "on
 const TEXT_OPERATORS: FilterOperator[] = ["contains", "not_contains", "is_empty", "is_not_empty"];
 
 export const FILTER_FIELD_CONFIGS: FilterFieldConfig[] = [
-  { key: "title", label: "filter.field.title", icon: Type, fieldType: "text", operators: TEXT_OPERATORS, defaultOperator: "contains" },
-  { key: "state", label: "filter.field.state", icon: ListFilter, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "backlog" },
-  { key: "priority", label: "filter.field.priority", icon: Flag, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "none" },
-  { key: "assigneeId", label: "filter.field.assignee", icon: CircleUser, fieldType: "user", operators: USER_OPERATORS, defaultOperator: "is", defaultValue: "__none__" },
-  { key: "labelId", label: "filter.field.label", icon: Tag, fieldType: "multi_select", operators: SELECT_OPERATORS, defaultOperator: "is_any_of" },
-  { key: "createdDate", label: "filter.field.createdDate", icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
-  { key: "targetDate", label: "filter.field.targetDate", icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
+  { key: "title", label: m.story_filter_field_title, icon: Type, fieldType: "text", operators: TEXT_OPERATORS, defaultOperator: "contains" },
+  { key: "state", label: m.story_filter_field_state, icon: ListFilter, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "backlog" },
+  { key: "priority", label: m.story_filter_field_priority, icon: Flag, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "none" },
+  { key: "assigneeId", label: m.story_filter_field_assignee, icon: CircleUser, fieldType: "user", operators: USER_OPERATORS, defaultOperator: "is", defaultValue: "__none__" },
+  { key: "labelId", label: m.story_filter_field_label, icon: Tag, fieldType: "multi_select", operators: SELECT_OPERATORS, defaultOperator: "is_any_of" },
+  { key: "createdDate", label: m.story_filter_field_createdDate, icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
+  { key: "targetDate", label: m.story_filter_field_targetDate, icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
 ];
 
-export const OPERATOR_LABELS: Record<FilterOperator, string> = {
-  is: "filter.operator.is",
-  is_not: "filter.operator.is_not",
-  is_any_of: "filter.operator.is_any_of",
-  is_not_any_of: "filter.operator.is_not_any_of",
-  is_empty: "filter.operator.is_empty",
-  is_not_empty: "filter.operator.is_not_empty",
+export const OPERATOR_LABELS: Record<FilterOperator, () => string> = {
+  is: m.story_filter_operator_is,
+  is_not: m.story_filter_operator_is_not,
+  is_any_of: m.story_filter_operator_is_any_of,
+  is_not_any_of: m.story_filter_operator_is_not_any_of,
+  is_empty: m.story_filter_operator_is_empty,
+  is_not_empty: m.story_filter_operator_is_not_empty,
   
-  before: "filter.operator.before",
-  after: "filter.operator.after",
-  on_or_before: "filter.operator.on_or_before",
-  on_or_after: "filter.operator.on_or_after",
-  between: "filter.operator.between",
-  contains: "filter.operator.contains",
-  not_contains: "filter.operator.not_contains",
+  before: m.story_filter_operator_before,
+  after: m.story_filter_operator_after,
+  on_or_before: m.story_filter_operator_on_or_before,
+  on_or_after: m.story_filter_operator_on_or_after,
+  between: m.story_filter_operator_between,
+  contains: m.story_filter_operator_contains,
+  not_contains: m.story_filter_operator_not_contains,
 };
 
 export function getFilterConfig(key: FilterKey): FilterFieldConfig {
   return FILTER_FIELD_CONFIGS.find((f) => f.key === key) ?? FILTER_FIELD_CONFIGS[0];
 }
 
-export function getFilterLabel(key: FilterKey): string {
+export function getFilterLabel(key: FilterKey): () => string {
   return getFilterConfig(key).label;
 }
 

package/src/components/story/filters/filter-value-input.tsx

@@ -17,7 +17,6 @@
 
 import { useState, useRef, useEffect } from "react";
 import { CalendarIcon } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { format } from "date-fns";
 import type { DateRange } from "react-day-picker";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -29,6 +28,7 @@ import { LabelsEditor } from "../inline-editors/labels-editor";
 import { TitleEditor } from "../inline-editors/title-editor";
 import type { FilterKey, FilterOperator } from "./filter-types";
 import type { UserBrief } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 interface FilterValueInputProps {
   property: FilterKey;
@@ -114,7 +114,6 @@ function parseDate(value: string): Date | undefined {
 }
 
 function DateSelect({ operator, value, onChange }: { operator: FilterOperator; value: string; onChange: (v: string) => void }) {
-  const { t } = useTranslation("story");
   const [open, setOpen] = useState(false);
   const [range, setRange] = useState<DateRange | undefined>();
 
@@ -138,7 +137,7 @@ function DateSelect({ operator, value, onChange }: { operator: FilterOperator; v
         <PopoverTrigger asChild>
           <button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap">
             <CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
-            {from && to ? `${format(from, "MM/dd")}~${format(to, "MM/dd")}` : t("filter.selectRange")}
+            {from && to ? `${format(from, "MM/dd")}~${format(to, "MM/dd")}` : m.story_filter_selectRange()}
           </button>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
@@ -167,7 +166,7 @@ function DateSelect({ operator, value, onChange }: { operator: FilterOperator; v
       <PopoverTrigger asChild>
         <button className="flex h-6 items-center gap-1 rounded-sm bg-muted px-2 text-xs text-foreground hover:bg-muted/80 transition-colors whitespace-nowrap">
           <CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
-          {date ? format(date, "yyyy-MM-dd") : t("filter.selectDate")}
+          {date ? format(date, "yyyy-MM-dd") : m.story_filter_selectDate()}
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0" align="start" onOpenAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}>

package/src/components/story/infinite-scroll-sentinel.tsx

@@ -1,4 +1,3 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
 //
@@ -15,8 +14,8 @@
 // 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 { m } from '@/paraglide/messages.js'
 import { useEffect, useRef, useState } from "react";
-import { getClientI18n } from "@/i18n/client";
 
 interface InfiniteScrollSentinelProps {
   onLoadMore: () => void | Promise<void>;
@@ -68,7 +67,7 @@ export function InfiniteScrollSentinel({ onLoadMore, hasMore, rootRef }: Infinit
         </div>
       )}
       {!loading && !hasMore && (
-        <span className="text-xs text-muted-foreground">{getClientI18n().t('story:loadedAll')}</span>
+        <span className="text-xs text-muted-foreground">{m.story_loadedAll()}</span>
       )}
     </div>
   );