@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/story/detail/comment-input.tsx

@@ -17,12 +17,12 @@
 
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { createCommentFn } from "@/server/serverFns/story";
 import { toast } from "sonner";
 import type { CommentWithReplies } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 interface CommentInputProps {
   storyId: string;
@@ -37,7 +37,6 @@ export function CommentInput({
   onCommentCreated,
   onCancel,
 }: CommentInputProps) {
-  const { t } = useTranslation("story");
   const form = useForm({
     defaultValues: { content: "" },
   });
@@ -54,8 +53,8 @@ export function CommentInput({
       form.setFieldValue("content", "");
       onCancel?.();
     } catch (err) {
-      toast.error(t("comment.failed"), {
-        description: err instanceof Error ? err.message : t("comment.retry"),
+      toast.error(m.story_comment_failed(), {
+        description: err instanceof Error ? err.message : m.story_comment_retry(),
       });
     } finally {
       setSubmitting(false);
@@ -78,7 +77,7 @@ export function CommentInput({
             onChange={(e) => field.handleChange(e.target.value)}
             onBlur={field.handleBlur}
             onKeyDown={handleKeyDown}
-            placeholder={t("comment.placeholder")}
+            placeholder={m.story_comment_placeholder()}
             rows={3}
             className="flex-1 resize-none"
           />
@@ -86,12 +85,12 @@ export function CommentInput({
       </div>
       <div className="flex items-center justify-between">
         <p className="text-xs text-muted-foreground">
-          {t("comment.markdownHint")}
+          {m.story_comment_markdownHint()}
         </p>
         <div className="flex gap-2">
           {onCancel && (
             <Button variant="ghost" size="sm" onClick={onCancel}>
-              {t("comment.cancel")}
+              {m.story_comment_cancel()}
             </Button>
           )}
           <Button
@@ -99,7 +98,7 @@ export function CommentInput({
             onClick={handleSubmit}
             disabled={submitting}
           >
-            {t(submitting ? "comment.sending" : "comment.send")}
+            {submitting ? m.story_comment_sending() : m.story_comment_send()}
           </Button>
         </div>
       </div>

package/src/components/story/detail/comment-item.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { UserAvatar } from "@/components/shared-kit";
-import { useTranslation } from "react-i18next";
 import { formatRelative } from "./comment-thread";
 import { CommentInput } from "./comment-input";
 import { createCommentFn } from "@/server/serverFns/story";
@@ -32,6 +31,7 @@ import {
 import { deleteCommentFn, updateCommentFn } from "@/server/serverFns/story";
 import { toast } from "sonner";
 import type { CommentWithReplies, ReactionGroup } from "../types";
+import { m } from "@/paraglide/messages.js";
 
 interface CommentItemProps {
   storyId: string;
@@ -41,7 +41,6 @@ interface CommentItemProps {
 }
 
 export function CommentItem({ storyId, comment, onReply, onDelete }: CommentItemProps) {
-  const { t } = useTranslation("story");
   const [isEditing, setIsEditing] = useState(false);
   const [editContent, setEditContent] = useState(comment.content);
   const [showReplies, setShowReplies] = useState(true);
@@ -54,20 +53,20 @@ export function CommentItem({ storyId, comment, onReply, onDelete }: CommentItem
       });
       setIsEditing(false);
     } catch (err) {
-      toast.error(t("comment.editFailed"), {
-        description: err instanceof Error ? err.message : t("comment.retry"),
+      toast.error(m.story_comment_editFailed(), {
+        description: err instanceof Error ? err.message : m.story_comment_retry(),
       });
     }
   };
 
   const handleDelete = async () => {
-    if (!confirm(t("comment.confirmDelete"))) return;
+    if (!confirm(m.story_comment_confirmDelete())) return;
     try {
       await deleteCommentFn({ data: { commentId: comment.id } });
       onDelete(comment.id);
     } catch (err) {
-      toast.error(t("comment.deleteFailed"), {
-        description: err instanceof Error ? err.message : t("comment.retry"),
+      toast.error(m.story_comment_deleteFailed(), {
+        description: err instanceof Error ? err.message : m.story_comment_retry(),
       });
     }
   };
@@ -78,8 +77,8 @@ export function CommentItem({ storyId, comment, onReply, onDelete }: CommentItem
         data: { commentId: comment.id, emoji },
       });
     } catch (err) {
-      toast.error(t("comment.operationFailed"), {
-        description: err instanceof Error ? err.message : t("comment.retry"),
+      toast.error(m.story_comment_operationFailed(), {
+        description: err instanceof Error ? err.message : m.story_comment_retry(),
       });
     }
   };
@@ -99,7 +98,7 @@ export function CommentItem({ storyId, comment, onReply, onDelete }: CommentItem
           <div className="flex items-center gap-2">
             <span className="text-sm font-medium">{comment.user.username}</span>
             <span className="text-xs text-muted-foreground">
-              {formatRelative(comment.createdAt, t)}
+              {formatRelative(comment.createdAt)}
             </span>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -109,10 +108,10 @@ export function CommentItem({ storyId, comment, onReply, onDelete }: CommentItem
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 <DropdownMenuItem onClick={() => setIsEditing(true)}>
-                  {t("comment.edit")}
+                  {m.story_comment_edit()}
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={handleDelete}>
-                  {t("comment.delete")}
+                  {m.story_comment_delete()}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -128,10 +127,10 @@ export function CommentItem({ storyId, comment, onReply, onDelete }: CommentItem
               />
               <div className="flex gap-2">
                 <Button size="sm" onClick={handleSaveEdit}>
-                  {t("comment.save")}
+                  {m.story_comment_save()}
                 </Button>
                 <Button size="sm" variant="ghost" onClick={() => setIsEditing(false)}>
-                  {t("comment.cancel")}
+                  {m.story_comment_cancel()}
                 </Button>
               </div>
             </div>
@@ -144,14 +143,14 @@ export function CommentItem({ storyId, comment, onReply, onDelete }: CommentItem
               onClick={() => setReplyTo(comment.id)}
               className="text-xs text-muted-foreground hover:text-foreground"
             >
-              {t("comment.reply")}
+              {m.story_comment_reply()}
             </button>
             {comment.replies.length > 0 && (
               <button
                 onClick={() => setShowReplies(!showReplies)}
                 className="text-xs text-muted-foreground hover:text-foreground"
               >
-                {showReplies ? t("comment.collapseReplies") : t("comment.viewReplies", { count: comment.replies.length })}
+                {showReplies ? m.story_comment_collapseReplies() : m.story_comment_viewReplies({ count: comment.replies.length })}
               </button>
             )}
           </div>

package/src/components/story/detail/comment-thread.tsx

@@ -17,9 +17,8 @@
 
 import { CommentItem } from "./comment-item";
 import { CommentInput } from "./comment-input";
-import { useTranslation } from "react-i18next";
-import type { TFunction } from "i18next";
 import type { CommentWithReplies } from "../types";
+import { m } from '@/paraglide/messages.js'
 
 interface CommentThreadProps {
   storyId: string;
@@ -28,15 +27,15 @@ interface CommentThreadProps {
   onRemoveComment?: (commentId: string) => void;
 }
 
-export function formatRelative(iso: string, t: TFunction): string {
+export function formatRelative(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime();
   const min = Math.floor(diff / 60000);
-  if (min < 1) return t("time.justNow");
-  if (min < 60) return t("time.minutesAgo", { count: min });
+  if (min < 1) return m.story_time_justNow();
+  if (min < 60) return m.story_time_minutesAgo({ count: min });
   const hr = Math.floor(min / 60);
-  if (hr < 24) return t("time.hoursAgo", { count: hr });
+  if (hr < 24) return m.story_time_hoursAgo({ count: hr });
   const day = Math.floor(hr / 24);
-  if (day < 30) return t("time.daysAgo", { count: day });
+  if (day < 30) return m.story_time_daysAgo({ count: day });
   return new Date(iso).toLocaleDateString();
 }
 

package/src/components/story/detail/reaction-bar.tsx

@@ -16,11 +16,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Plus } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { EmojiPicker } from "./emoji-picker";
 import type { ReactionGroup } from "@/components/story/types";
+import { m } from "@/paraglide/messages.js";
 
 interface ReactionBarProps {
   reactions: ReactionGroup[];
@@ -35,7 +35,6 @@ export function ReactionBar({
   onAdd,
   compact,
 }: ReactionBarProps) {
-  const { t } = useTranslation("story");
   return (
     <div className="flex flex-wrap items-center gap-1">
       {reactions.map((r) => (
@@ -64,7 +63,7 @@ export function ReactionBar({
           )}
         >
           <Plus className="size-3" />
-          {!compact && reactions.length === 0 && <span>{t("reaction.add")}</span>}
+          {!compact && reactions.length === 0 && <span>{m.story_reaction_add()}</span>}
         </Button>
       </EmojiPicker>
     </div>

package/src/components/story/detail/story-detail-body.tsx

@@ -15,8 +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 React, { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { lazy, Suspense, useCallback, useEffect, useRef, useState, type LazyExoticComponent, type ComponentType } from "react";
 import {
   ChevronsDownUp,
   ChevronsUpDown,
@@ -49,8 +48,10 @@ import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-pick
 import type { Editor } from "@tiptap/react";
 import { StoryProperties } from "./story-properties";
 import { StoryDetailToolbar } from "./story-detail-toolbar";
+import { m } from "@/paraglide/messages.js";
 
-const NotionDocEditor = lazy(() => import("@/components/tiptap/notion-like").then(m => ({ default: m.NotionDocEditor })));
+import type { NotionDocEditorProps } from "@/components/tiptap/notion-like";
+const NotionDocEditor = lazy(() => import("@/components/tiptap/notion-like").then(m => ({ default: m.NotionDocEditor }))) as LazyExoticComponent<ComponentType<NotionDocEditorProps>>;
 
 /**
  * 需求描述编辑的「兜底」防抖时间。
@@ -115,7 +116,6 @@ export function StoryDetailBody({
   /** 内嵌面板导航面包屑（在面板内跳转时替代单层 identifier 显示） */
   breadcrumbItems?: Array<{ identifier?: string; projectId?: string; label: string; onClick?: () => void }>;
 }) {
-  const { t } = useTranslation("story");
   const [name, setName] = useState(story.name);
   useEffect(() => {
     setName(story.name);
@@ -164,8 +164,8 @@ export function StoryDetailBody({
         });
         setReactions(groups);
       } catch (err) {
-        toast.error(t("detail.operationFailed"), {
-          description: err instanceof Error ? err.message : t("comment.retry"),
+        toast.error(m.story_detail_operationFailed(), {
+          description: err instanceof Error ? err.message : m.story_comment_retry(),
         });
       } finally {
         pendingReactionsRef.current.delete(emoji);
@@ -222,8 +222,8 @@ export function StoryDetailBody({
       onStoryUpdate?.(updated);
       if (res.activities.length > 0) onAppendActivities?.(res.activities);
     } catch (err) {
-      toast.error(t("detail.saveFailed"), {
-        description: err instanceof Error ? err.message : t("comment.retry"),
+      toast.error(m.story_detail_saveFailed(), {
+        description: err instanceof Error ? err.message : m.story_comment_retry(),
       });
     } finally {
       setSaving(false);
@@ -238,8 +238,8 @@ export function StoryDetailBody({
       onStoryUpdate?.(updated);
       if (res.activities.length > 0) onAppendActivities?.(res.activities);
     } catch (err) {
-      toast.error(t("detail.saveFailed"), {
-        description: err instanceof Error ? err.message : t("comment.retry"),
+      toast.error(m.story_detail_saveFailed(), {
+        description: err instanceof Error ? err.message : m.story_comment_retry(),
       });
     } finally {
       setSaving(false);
@@ -254,8 +254,8 @@ export function StoryDetailBody({
       onStoryUpdate?.(updated);
       if (res.activities.length > 0) onAppendActivities?.(res.activities);
     } catch (err) {
-      toast.error(t("detail.saveFailed"), {
-        description: err instanceof Error ? err.message : t("comment.retry"),
+      toast.error(m.story_detail_saveFailed(), {
+        description: err instanceof Error ? err.message : m.story_comment_retry(),
       });
     } finally {
       setSaving(false);
@@ -290,7 +290,7 @@ export function StoryDetailBody({
         onStoryUpdate?.(updated);
         if (res.activities.length > 0) onAppendActivities?.(res.activities);
       })
-      .catch((err) => toast.error(t("detail.saveFailed"), { description: err instanceof Error ? err.message : t("comment.retry") }))
+      .catch((err) => toast.error(m.story_detail_saveFailed(), { description: err instanceof Error ? err.message : m.story_comment_retry() }))
       .finally(() => setSaving(false));
   }, [story.id, story, onAppendActivities, onStoryUpdate]);
 
@@ -351,8 +351,8 @@ export function StoryDetailBody({
       <StateEditor value={story.state} onChange={(v) => updateField("state", v)} variant="button" />
       <PriorityEditor value={story.priority} onChange={(v) => updateField("priority", v)} variant="button" />
       <AssigneeEditor assignee={story.assignee} users={users} onChange={(v) => updateField("assigneeId", v)} variant="button" />
-      <DateEditor value={story.startDate} onChange={(v) => updateField("startDate", v)} label={t("detail.startDate")} icon={CalendarPlus2} />
-      <DateEditor value={story.targetDate} onChange={(v) => updateField("targetDate", v)} label={t("detail.dueDate")} icon={CalendarCheck} overdue={dueOverdue} />
+      <DateEditor value={story.startDate} onChange={(v) => updateField("startDate", v)} label={m.story_detail_startDate()} icon={CalendarPlus2} />
+      <DateEditor value={story.targetDate} onChange={(v) => updateField("targetDate", v)} label={m.story_detail_dueDate()} icon={CalendarCheck} overdue={dueOverdue} />
     </div>
   );
 
@@ -392,7 +392,7 @@ export function StoryDetailBody({
                     </TooltipTrigger>
                     <TooltipContent>
                       <div className="flex flex-col">
-                        <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{t("detail.belongsTo")}</span>
+                        <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{m.story_detail_belongsTo()}</span>
                         <span>{project.name}</span>
                       </div>
                     </TooltipContent>
@@ -405,15 +405,15 @@ export function StoryDetailBody({
                         type="button"
                         onClick={() => {
                           navigator.clipboard.writeText(identifier)
-                            .then(() => toast.success(t("detail.copied", { identifier })))
-                            .catch(() => toast.error(t("detail.copyFailed")));
+                            .then(() => toast.success(m.story_detail_copied({ identifier })))
+                            .catch(() => toast.error(m.story_detail_copyFailed()));
                         }}
                         className="text-sm font-mono text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
                       >
                         {identifier}
                       </button>
                     </TooltipTrigger>
-                    <TooltipContent>{t("detail.clickToCopy")}</TooltipContent>
+                    <TooltipContent>{m.story_detail_clickToCopy()}</TooltipContent>
                   </Tooltip>
                 )}
               </>
@@ -453,7 +453,7 @@ export function StoryDetailBody({
         </div>
                 {!isEditorFocused && isDescEmpty && (
           <div className="pointer-events-none absolute top-3 left-6 text-sm text-muted-foreground select-none">
-            {t("create.addDescription")}
+            {m.story_create_addDescription()}
           </div>
         )}
         {!expanded && needsTruncation && (
@@ -473,12 +473,12 @@ export function StoryDetailBody({
                 {expanded ? (
                   <>
                     <ChevronsDownUp className="mr-1 size-3" />
-                    {t("detail.showLess")}
+                    {m.story_detail_showLess()}
                   </>
                 ) : (
                   <>
                     <ChevronsUpDown className="mr-1 size-3" />
-                    {t("detail.showMore")}
+                    {m.story_detail_showMore()}
                   </>
                 )}
               </Button>
@@ -550,7 +550,7 @@ export function StoryDetailBody({
                   className="h-7 gap-1 pl-0 pr-2 text-xs text-muted-foreground"
                 >
                   <SmilePlus className="size-3.5" />
-                  {t("detail.addReaction")}
+                  {m.story_detail_addReaction()}
                 </Button>
               </EmojiPicker>
             </span>
@@ -622,24 +622,22 @@ export function StoryDetailBody({
       <div className="px-6 py-3  space-y-3.5">
         <div className="flex items-center gap-2 text-xs">
           <CircleUser className="size-4 shrink-0 text-muted-foreground" />
-          <span className="text-muted-foreground shrink-0">{t("detail.createdBy")}</span>
+          <span className="text-muted-foreground shrink-0">{m.story_detail_createdBy()}</span>
           <UserAvatar name={story.createdBy.username} avatarConfig={story.createdBy.avatarConfig} bgShape="circle" bgColor={story.createdBy.bgColor} size="xs" />
           <span>{story.createdBy.username}</span>
         </div>
         <div className="flex items-center gap-2 text-xs">
           <ClockPlus className="size-4 shrink-0 text-muted-foreground" />
-          <span className="text-muted-foreground shrink-0">{t("detail.createdAt")}</span>
+          <span className="text-muted-foreground shrink-0">{m.story_detail_createdAt()}</span>
           <span>{formatTimestamp(story.createdAt)}</span>
         </div>
         <div className="flex items-center gap-2 text-xs">
           <ClockArrowUp className="size-4 shrink-0 text-muted-foreground" />
-          <span className="text-muted-foreground shrink-0">{t("detail.updatedAt")}</span>
+          <span className="text-muted-foreground shrink-0">{m.story_detail_updatedAt()}</span>
           <span>{formatTimestamp(story.updatedAt)}</span>
         </div>
       </div>
 
-
-
       <ActivityTabs storyId={story.id} comments={comments} activities={activities} users={users} onAppendComment={onAppendComment} onRemoveComment={onRemoveComment} />
     </>
   );