@allbluecn/web-app 0.9.5 → 0.10.0

package/src/components/story/detail/story-detail-toolbar/associated-attachments-panel.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import { useTheme } from "next-themes";
 import { Link as RouterLink } from "@tanstack/react-router";
 import { useServerFn } from "@tanstack/react-start";
@@ -52,6 +51,7 @@ import { formatFileSize, getFaviconUrl, getFileTypeIcon, extractLinkTitle, getMi
 import { generalGroupLabel } from "../../relations/general-groups";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import type { AssociatedItem, RelationsData, StoryLinkItem, StoryAttachmentItem } from "../../types";
+import { m } from "@/paraglide/messages.js";
 
 export type AssociatedDialogKind = "link" | "attachment" | "knowledge";
 
@@ -106,7 +106,6 @@ function AttachmentFileView({
   /** fill: 填充父容器（全屏弹窗内），否则使用网格 CSS 变量高度 */
   fill?: boolean;
 }) {
-  const { t } = useTranslation("story");
   const { file, error } = useAttachmentFile(attachment);
 
   if (error) {
@@ -134,10 +133,10 @@ function AttachmentFileView({
       file={file}
       fileName={attachment.fileName}
       showTitleToggle
-      titleToggleLabel={t("attachmentDialog.toggleTitle")}
-      titleToggleHideLabel={t("attachmentDialog.hideTitle")}
-      fullscreenLabel={t("associatedAttachments.fullscreen")}
-      exitFullscreenLabel={t("associatedAttachments.exitFullscreen")}
+      titleToggleLabel={m.story_attachmentDialog_toggleTitle()}
+      titleToggleHideLabel={m.story_attachmentDialog_hideTitle()}
+      fullscreenLabel={m.story_associatedAttachments_fullscreen()}
+      exitFullscreenLabel={m.story_associatedAttachments_exitFullscreen()}
       onFullscreen={onFullscreen}
       onExitFullscreen={onExitFullscreen}
       height={fill ? "100%" : "var(--attachment-preview-h, 24rem)"}
@@ -272,12 +271,11 @@ function DocHtmlPreview({ kbId, docId, title }: { kbId: string; docId: string; t
 }
 
 function ExternalDocPreview({ group, title }: { group: string; title: string }) {
-  const { t } = useTranslation("story");
   return (
     <div className="flex h-48 w-full flex-col items-center justify-center gap-2 rounded-md border bg-muted/30 text-sm text-muted-foreground">
       <BookOpenText className="size-6" />
       <span className="max-w-full truncate px-4 font-medium text-foreground">{title}</span>
-      <span>{generalGroupLabel(t, group)}</span>
+      <span>{generalGroupLabel(group)}</span>
     </div>
   );
 }
@@ -303,7 +301,6 @@ export function AssociatedAttachmentsPanel({
   onOpenDialog,
   onAppendActivities,
 }: AssociatedAttachmentsPanelProps) {
-  const { t } = useTranslation("story");
   const removeLink = useServerFn(removeLinkFn);
   const removeAttachment = useServerFn(removeAttachmentFn);
   const unlinkDoc = useServerFn(unlinkDocFn);
@@ -377,11 +374,11 @@ export function AssociatedAttachmentsPanel({
       : attachmentItems;
 
     return [
-      { kind: "link" as const, label: t("associatedAttachments.groupLink"), count: linkItems.length, items: linkItems },
-      { kind: "attachment" as const, label: t("associatedAttachments.groupAttachment"), count: filteredAttachmentItems.length, items: filteredAttachmentItems },
-      { kind: "doc" as const, label: t("associatedAttachments.groupKb"), count: docItems.length, items: docItems },
+      { kind: "link" as const, label: m.story_associatedAttachments_groupLink(), count: linkItems.length, items: linkItems },
+      { kind: "attachment" as const, label: m.story_associatedAttachments_groupAttachment(), count: filteredAttachmentItems.length, items: filteredAttachmentItems },
+      { kind: "doc" as const, label: m.story_associatedAttachments_groupKb(), count: docItems.length, items: docItems },
     ].filter((g) => g.count > 0);
-  }, [items, t, activeTypeFilters]);
+  }, [items, activeTypeFilters]);
 
   const handleRemoveLink = async (id: string) => {
     try {
@@ -389,7 +386,7 @@ export function AssociatedAttachmentsPanel({
       if (res?.activity) onAppendActivities?.([res.activity]);
       onRefresh((prev) => ({ ...prev, links: prev.links.filter((l) => l.id !== id) }));
     } catch (err) {
-      toast.error((err as Error)?.message || t("linkDialog.removeFailed"));
+      toast.error((err as Error)?.message || m.story_linkDialog_removeFailed());
     }
   };
 
@@ -402,7 +399,7 @@ export function AssociatedAttachmentsPanel({
         attachments: prev.attachments.filter((a) => a.id !== id),
       }));
     } catch (err) {
-      toast.error((err as Error)?.message || t("attachmentDialog.removeFailed"));
+      toast.error((err as Error)?.message || m.story_attachmentDialog_removeFailed());
     }
   };
 
@@ -415,7 +412,7 @@ export function AssociatedAttachmentsPanel({
         knowledge: { ...prev.knowledge, docs: prev.knowledge.docs.filter((d) => d.id !== docId) },
       }));
     } catch (err) {
-      toast.error((err as Error)?.message || t("knowledgeDialog.linkFailed"));
+      toast.error((err as Error)?.message || m.story_knowledgeDialog_linkFailed());
     }
   };
 
@@ -435,7 +432,7 @@ export function AssociatedAttachmentsPanel({
         return (
           <>
             <Button variant="ghost" size="icon" className="size-7" asChild>
-              <a href={item.data.url} target="_blank" rel="noopener noreferrer" title={t("associatedAttachments.open")} onClick={(e) => e.stopPropagation()}>
+              <a href={item.data.url} target="_blank" rel="noopener noreferrer" title={m.story_associatedAttachments_open()} onClick={(e) => e.stopPropagation()}>
                 <ExternalLink className="size-3.5" />
               </a>
             </Button>
@@ -443,8 +440,8 @@ export function AssociatedAttachmentsPanel({
               variant="ghost"
               size="icon"
               className="size-7"
-              title={t("associatedAttachments.edit")}
-              aria-label={t("associatedAttachments.edit")}
+              title={m.story_associatedAttachments_edit()}
+              aria-label={m.story_associatedAttachments_edit()}
               onClick={() => onOpenDialog("link", item.data)}
             >
               <Edit2 className="size-3.5" />
@@ -453,7 +450,7 @@ export function AssociatedAttachmentsPanel({
               variant="ghost"
               size="icon"
               className="size-7"
-              aria-label={t("associatedAttachments.remove")}
+              aria-label={m.story_associatedAttachments_remove()}
               onClick={() => handleRemoveLink(item.data.id)}
             >
               <Trash2 className="size-3.5" />
@@ -468,8 +465,8 @@ export function AssociatedAttachmentsPanel({
                 <a
                   href={item.data.storageUrl}
                   download={item.data.fileName}
-                  title={t("associatedAttachments.download")}
-                  aria-label={t("associatedAttachments.download")}
+                  title={m.story_associatedAttachments_download()}
+                  aria-label={m.story_associatedAttachments_download()}
                   onClick={(e) => e.stopPropagation()}
                 >
                   <Download className="size-3.5" />
@@ -480,8 +477,8 @@ export function AssociatedAttachmentsPanel({
               variant="ghost"
               size="icon"
               className="size-7"
-              title={t("associatedAttachments.edit")}
-              aria-label={t("associatedAttachments.edit")}
+              title={m.story_associatedAttachments_edit()}
+              aria-label={m.story_associatedAttachments_edit()}
               onClick={() => onOpenDialog("attachment", undefined, item.data)}
             >
               <Edit2 className="size-3.5" />
@@ -490,7 +487,7 @@ export function AssociatedAttachmentsPanel({
               variant="ghost"
               size="icon"
               className="size-7"
-              aria-label={t("associatedAttachments.remove")}
+              aria-label={m.story_associatedAttachments_remove()}
               onClick={() => handleRemoveAttachment(item.data.id)}
             >
               <Trash2 className="size-3.5" />
@@ -505,19 +502,19 @@ export function AssociatedAttachmentsPanel({
             <Button variant="ghost" size="icon" className="size-7" asChild>
               {isExternal && externalGroup ? (
                 externalGroup === "legal" ? (
-                  <RouterLink to="/knowledge/laws/$id" params={{ id: item.data.id }} title={t("associatedAttachments.goToDoc")} onClick={(e) => e.stopPropagation()}>
+                  <RouterLink to="/knowledge/laws/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()}>
                     <ExternalLink className="size-3.5" />
                   </RouterLink>
                 ) : externalGroup === "compliance" ? (
-                  <RouterLink to="/knowledge/compliance/$id" params={{ id: item.data.id }} title={t("associatedAttachments.goToDoc")} onClick={(e) => e.stopPropagation()}>
+                  <RouterLink to="/knowledge/compliance/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()}>
                     <ExternalLink className="size-3.5" />
                   </RouterLink>
                 ) : externalGroup === "dictionary" ? (
-                  <RouterLink to="/knowledge/dictionaries/$id" params={{ id: item.data.id }} title={t("associatedAttachments.goToDoc")} onClick={(e) => e.stopPropagation()}>
+                  <RouterLink to="/knowledge/dictionaries/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()}>
                     <ExternalLink className="size-3.5" />
                   </RouterLink>
                 ) : externalGroup === "bookmark" ? (
-                  <RouterLink to="/knowledge/bookmarks/$id" params={{ id: item.data.id }} title={t("associatedAttachments.goToDoc")} onClick={(e) => e.stopPropagation()}>
+                  <RouterLink to="/knowledge/bookmarks/$id" params={{ id: item.data.id }} title={m.story_associatedAttachments_goToDoc()} onClick={(e) => e.stopPropagation()}>
                     <ExternalLink className="size-3.5" />
                   </RouterLink>
                 ) : (
@@ -527,7 +524,7 @@ export function AssociatedAttachmentsPanel({
                 <RouterLink
                   to="/knowledge/$kbId/doc/$docId"
                   params={{ kbId: item.data.kbId, docId: item.data.id }}
-                  title={t("associatedAttachments.goToDoc")}
+                  title={m.story_associatedAttachments_goToDoc()}
                   onClick={(e) => e.stopPropagation()}
                 >
                   <ExternalLink className="size-3.5" />
@@ -538,8 +535,8 @@ export function AssociatedAttachmentsPanel({
               variant="ghost"
               size="icon"
               className="size-7"
-              title={t("associatedAttachments.removeLink")}
-              aria-label={t("associatedAttachments.removeLink")}
+              title={m.story_associatedAttachments_removeLink()}
+              aria-label={m.story_associatedAttachments_removeLink()}
               onClick={() => handleUnlinkDoc(item.data.id)}
             >
               <Unlink className="size-3.5" />
@@ -605,7 +602,7 @@ export function AssociatedAttachmentsPanel({
         <BookOpenText className="size-4 shrink-0 text-muted-foreground" />
         <span className="min-w-0 flex-1 truncate text-sm text-foreground">{item.data.title}</span>
         <LucideIconByName name={item.data.kbIcon} size={14} className="shrink-0 text-muted-foreground" />
-        <span className="shrink-0 text-xs text-muted-foreground">{item.data.kbId.startsWith("ext:") ? generalGroupLabel(t, item.data.kbName) : item.data.kbName}</span>
+        <span className="shrink-0 text-xs text-muted-foreground">{item.data.kbId.startsWith("ext:") ? generalGroupLabel(item.data.kbName) : item.data.kbName}</span>
         <div className="flex items-center gap-0.5 shrink-0">{renderActionsInline(item)}</div>
       </div>
     );
@@ -666,7 +663,7 @@ export function AssociatedAttachmentsPanel({
         </div>
         <div className="flex items-center gap-1.5">
           <LucideIconByName name={item.data.kbIcon} size={12} className="shrink-0 text-muted-foreground" />
-          <span className="truncate text-xs text-muted-foreground">{item.data.kbId.startsWith("ext:") ? generalGroupLabel(t, item.data.kbName) : item.data.kbName}</span>
+          <span className="truncate text-xs text-muted-foreground">{item.data.kbId.startsWith("ext:") ? generalGroupLabel(item.data.kbName) : item.data.kbName}</span>
         </div>
         <div className="absolute right-2 top-2 hidden gap-0.5 rounded-md border bg-background p-0.5 group-hover:flex">
           {renderActionsInline(item, true)}
@@ -694,7 +691,7 @@ export function AssociatedAttachmentsPanel({
           }}
         >
           <div className="flex items-center gap-1.5">
-            <span>{t("associatedAttachments.title")}</span>
+            <span>{m.story_associatedAttachments_title()}</span>
             <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
               {items.length}
             </span>
@@ -705,8 +702,8 @@ export function AssociatedAttachmentsPanel({
               variant="ghost"
               size="sm"
               className={`size-7 p-0 ${mode === "list" ? "bg-muted" : ""}`}
-              aria-label={t("associatedAttachments.list")}
-              title={t("associatedAttachments.list")}
+              aria-label={m.story_associatedAttachments_list()}
+              title={m.story_associatedAttachments_list()}
               onClick={() => switchMode("list")}
             >
               <LayoutList className="size-3.5" />
@@ -715,8 +712,8 @@ export function AssociatedAttachmentsPanel({
               variant="ghost"
               size="sm"
               className={`size-7 p-0 ${mode === "preview" ? "bg-muted" : ""}`}
-              aria-label={t("associatedAttachments.preview")}
-              title={t("associatedAttachments.preview")}
+              aria-label={m.story_associatedAttachments_preview()}
+              title={m.story_associatedAttachments_preview()}
               onClick={() => switchMode("preview")}
             >
               <LayoutGrid className="size-3.5" />
@@ -747,8 +744,8 @@ export function AssociatedAttachmentsPanel({
                               variant="ghost"
                               size="sm"
                               className={`size-6 p-0 ${activeTypeFilters.size > 0 ? "bg-muted text-foreground" : ""}`}
-                              aria-label={t("associatedAttachments.filter")}
-                              title={t("associatedAttachments.filter")}
+                              aria-label={m.story_associatedAttachments_filter()}
+                              title={m.story_associatedAttachments_filter()}
                             >
                               <ChartNoAxesGantt className="size-3.5" />
                               {activeTypeFilters.size > 0 && (
@@ -758,7 +755,7 @@ export function AssociatedAttachmentsPanel({
                           </PopoverTrigger>
                           <PopoverContent align="end" className="w-52 p-2">
                             <div className="text-xs font-medium text-muted-foreground my-1 px-1">
-                              {t("associatedAttachments.filterByType")}
+                              {m.story_associatedAttachments_filterByType()}
                             </div>
                             <div className="flex flex-wrap gap-1">
                               <button
@@ -777,7 +774,7 @@ export function AssociatedAttachmentsPanel({
                                     : "border-border text-muted-foreground hover:bg-muted hover:text-foreground",
                                 )}
                               >
-                                {t("associatedAttachments.filterAll")}
+                                {m.story_associatedAttachments_filterAll()}
                               </button>
                               {attachmentTypeGroups.map((g) => (
                                 <button
@@ -807,8 +804,8 @@ export function AssociatedAttachmentsPanel({
                         variant="ghost"
                         size="sm"
                         className="size-6 p-0"
-                        aria-label={t("associatedAttachments.add")}
-                        title={t("associatedAttachments.add")}
+                        aria-label={m.story_associatedAttachments_add()}
+                        title={m.story_associatedAttachments_add()}
                         onClick={() => onOpenDialog(group.kind === "doc" ? "knowledge" : group.kind)}
                       >
                         <Plus className="size-3.5" />

package/src/components/story/detail/story-detail-toolbar/categories.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import {
   FileText,
   PenTool,
@@ -30,23 +30,22 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 
 interface StoryDetailCategoryConfig {
   key: string;
-  label: string;
+  label: () => string;
   icon: React.ComponentType<{ className?: string }>;
-  tooltip: string;
-  placeholder: string;
+  tooltip: () => string;
+  placeholder: () => string;
 }
 
 const CATEGORIES: StoryDetailCategoryConfig[] = [
-  { key: "prd", label: "categories.prd.label", icon: FileText, tooltip: "categories.prd.tooltip", placeholder: "categories.prd.placeholder" },
-  { key: "ui", label: "categories.ui.label", icon: PenTool, tooltip: "categories.ui.tooltip", placeholder: "categories.ui.placeholder" },
-  { key: "bug", label: "categories.bug.label", icon: Bug, tooltip: "categories.bug.tooltip", placeholder: "categories.bug.placeholder" },
-  { key: "test-case", label: "categories.testCase.label", icon: FlaskConical, tooltip: "categories.testCase.tooltip", placeholder: "categories.testCase.placeholder" },
-  { key: "acceptance", label: "categories.acceptance.label", icon: CircleCheckBig, tooltip: "categories.acceptance.tooltip", placeholder: "categories.acceptance.placeholder" },
-  { key: "retro", label: "categories.retro.label", icon: Speech, tooltip: "categories.retro.tooltip", placeholder: "categories.retro.placeholder" },
+  { key: "prd", label: m.story_categories_prd_label, icon: FileText, tooltip: m.story_categories_prd_tooltip, placeholder: m.story_categories_prd_placeholder },
+  { key: "ui", label: m.story_categories_ui_label, icon: PenTool, tooltip: m.story_categories_ui_tooltip, placeholder: m.story_categories_ui_placeholder },
+  { key: "bug", label: m.story_categories_bug_label, icon: Bug, tooltip: m.story_categories_bug_tooltip, placeholder: m.story_categories_bug_placeholder },
+  { key: "test-case", label: m.story_categories_testCase_label, icon: FlaskConical, tooltip: m.story_categories_testCase_tooltip, placeholder: m.story_categories_testCase_placeholder },
+  { key: "acceptance", label: m.story_categories_acceptance_label, icon: CircleCheckBig, tooltip: m.story_categories_acceptance_tooltip, placeholder: m.story_categories_acceptance_placeholder },
+  { key: "retro", label: m.story_categories_retro_label, icon: Speech, tooltip: m.story_categories_retro_tooltip, placeholder: m.story_categories_retro_placeholder },
 ];
 
 export function StoryDetailCategories() {
-  const { t } = useTranslation("story");
   return (
     <>
       {CATEGORIES.map((cat) => (
@@ -60,15 +59,15 @@ export function StoryDetailCategories() {
                 variant="ghost"
                 size="sm"
                 className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
-                title={t(cat.tooltip)}
+                title={cat.tooltip()}
               >
                 <cat.icon className="size-3.5 text-muted-foreground" />
-                {t(cat.label)}
+                {cat.label()}
               </Button>
             </PopoverTrigger>
             <PopoverContent align="start" className="w-[320px] p-4">
               <div className="text-sm text-muted-foreground">
-                {t(cat.placeholder)}
+                {cat.placeholder()}
               </div>
             </PopoverContent>
           </Popover>

package/src/components/story/detail/story-detail-toolbar/children.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import {
   Plus,
   ChevronDown,
@@ -50,6 +49,7 @@ import { StoryRefRow } from "../../relations/story-ref-row";
 import type { DisplayOptions } from "../../display/types";
 import type { RelationsData, StoryListItem, UserBrief } from "../../types";
 import type { StoryPatch } from "../../display/group-fields";
+import { m } from "@/paraglide/messages.js";
 
 export interface StoryDetailChildrenButtonProps {
   onAction: (action: "create" | "select") => void;
@@ -69,7 +69,6 @@ export interface StoryDetailChildrenPanelProps {
 }
 
 export function StoryDetailChildrenButton({ onAction }: StoryDetailChildrenButtonProps) {
-  const { t } = useTranslation("story");
   return (
     <Tooltip>
       <TooltipTrigger asChild>
@@ -81,27 +80,26 @@ export function StoryDetailChildrenButton({ onAction }: StoryDetailChildrenButto
               className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
             >
               <GitBranch className="size-3.5 text-muted-foreground" />
-              {t("children.addChild")}
+              {m.story_children_addChild()}
               <ChevronDown className="size-3 text-muted-foreground" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="w-36">
             <DropdownMenuItem onSelect={() => onAction("create")}>
-              <Plus className="mr-2 size-4" />{t("children.createChild")}
+              <Plus className="mr-2 size-4" />{m.story_children_createChild()}
             </DropdownMenuItem>
             <DropdownMenuItem onSelect={() => onAction("select")}>
-              <SquareDashedMousePointer className="mr-2 size-4" />{t("children.selectChild")}
+              <SquareDashedMousePointer className="mr-2 size-4" />{m.story_children_selectChild()}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </TooltipTrigger>
-      <TooltipContent side="top">{t("children.childStories")}</TooltipContent>
+      <TooltipContent side="top">{m.story_children_childStories()}</TooltipContent>
     </Tooltip>
   );
 }
 
 function ChildrenActionDropdown({ onAction }: { onAction: (action: "create" | "select") => void }) {
-  const { t } = useTranslation("story");
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -111,10 +109,10 @@ function ChildrenActionDropdown({ onAction }: { onAction: (action: "create" | "s
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-36">
         <DropdownMenuItem onSelect={() => onAction("create")}>
-          <Plus className="mr-2 size-4" />{t("children.createChild")}
+          <Plus className="mr-2 size-4" />{m.story_children_createChild()}
         </DropdownMenuItem>
         <DropdownMenuItem onSelect={() => onAction("select")}>
-          <SquareDashedMousePointer className="mr-2 size-4" />{t("children.selectChild")}
+          <SquareDashedMousePointer className="mr-2 size-4" />{m.story_children_selectChild()}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
@@ -133,7 +131,6 @@ export function StoryDetailChildrenPanel({
   onAction,
   onNavigateInPanel,
 }: StoryDetailChildrenPanelProps) {
-  const { t } = useTranslation("story");
   const childrenList = data.children as StoryListItem[];
   const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set());
   const [busy, setBusy] = React.useState(false);
@@ -185,7 +182,7 @@ export function StoryDetailChildrenPanel({
   const handleRemoveChild = async (childId: string) => {
     try {
       await removeChildFn({ data: { childId } });
-      toast.success(t("children.removedChild"));
+      toast.success(m.story_children_removedChild());
       onRefresh((prev) => ({
         ...prev,
         hierarchy: {
@@ -195,7 +192,7 @@ export function StoryDetailChildrenPanel({
         },
       }));
     } catch (e) {
-      toast.error((e as Error)?.message || t("children.removeChildFailed"));
+      toast.error((e as Error)?.message || m.story_children_removeChildFailed());
     }
   };
 
@@ -240,13 +237,13 @@ export function StoryDetailChildrenPanel({
       const res = await bulkArchiveStoriesFn({ data: { storyIds: ids } });
       toast.success(
         res.skipped > 0
-          ? t("children.bulkArchivedSkipped", { archived: res.archived, skipped: res.skipped })
-          : t("children.bulkArchived", { count: res.archived }),
+          ? m.story_children_bulkArchivedSkipped({ archived: res.archived, skipped: res.skipped })
+          : m.story_children_bulkArchived({ count: res.archived }),
       );
       setSelectedIds(new Set());
       refreshChildren();
     } catch (e) {
-      toast.error((e as Error)?.message || t("children.archiveFailed"));
+      toast.error((e as Error)?.message || m.story_children_archiveFailed());
     } finally {
       setBusy(false);
     }
@@ -258,11 +255,11 @@ export function StoryDetailChildrenPanel({
     setBusy(true);
     try {
       const res = await bulkDeleteStoriesFn({ data: { storyIds: ids } });
-      toast.success(t("children.bulkDeleted", { count: res.deleted }));
+      toast.success(m.story_children_bulkDeleted({ count: res.deleted }));
       setSelectedIds(new Set());
       refreshChildren();
     } catch (e) {
-      toast.error((e as Error)?.message || t("children.deleteFailed"));
+      toast.error((e as Error)?.message || m.story_children_deleteFailed());
     } finally {
       setBusy(false);
     }
@@ -274,10 +271,10 @@ export function StoryDetailChildrenPanel({
     try {
       await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
       setSelectedIds(new Set());
-      toast.success(t("children.bulkUpdated"));
+      toast.success(m.story_children_bulkUpdated());
       refreshChildren();
     } catch (e) {
-      toast.error((e as Error)?.message || t("children.bulkUpdateFailed"));
+      toast.error((e as Error)?.message || m.story_children_bulkUpdateFailed());
     } finally {
       setBusy(false);
     }
@@ -337,7 +334,7 @@ export function StoryDetailChildrenPanel({
             }}
           >
             <div className="flex items-center gap-1.5">
-              <span>{t("children.childStories")}</span>
+              <span>{m.story_children_childStories()}</span>
               <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
                 {childrenList.length}
               </span>
@@ -425,7 +422,7 @@ export function StoryDetailChildrenPanel({
                               onToggle={toggleStory}
                               onOpenStory={handleOpenStory}
                               onRemove={handleRemoveChild}
-                              removeMenuLabel={t("children.removeChild")}
+                              removeMenuLabel={m.story_children_removeChild()}
                               onStoryRefresh={(storyId, patch) => {
                                 if (patch.deleted) {
                                   onRefresh((prev) => ({
@@ -473,7 +470,7 @@ export function StoryDetailChildrenPanel({
                       onToggle={toggleStory}
                       onOpenStory={handleOpenStory}
                       onRemove={handleRemoveChild}
-                      removeMenuLabel={t("children.removeChild")}
+                      removeMenuLabel={m.story_children_removeChild()}
                       onStoryRefresh={(storyId, patch) => {
                         if (patch.deleted) {
                           onRefresh((prev) => ({

package/src/components/story/detail/story-detail-toolbar/dependencies.tsx

@@ -16,26 +16,24 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Waypoints } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
+import { m } from "@/paraglide/messages.js";
 
 export function StoryDetailDependencies({
   onOpenAdd,
 }: {
   onOpenAdd: () => void;
 }) {
-  const { t } = useTranslation("story");
-
   return (
     <Button
       variant="ghost"
       size="sm"
       className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
       onClick={onOpenAdd}
-      title={t("relations.dependencyTitle")}
+      title={m.story_relations_dependencyTitle()}
     >
       <Waypoints className="size-3.5 text-muted-foreground" />
-      {t("relations.addDependency")}
+      {m.story_relations_addDependency()}
     </Button>
   );
 }