@allbluecn/web-app 0.9.5 → 0.10.2

package/src/components/story/views/timeline-view.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import {
   DragDropProvider,
@@ -35,6 +34,7 @@ import type { OrderKey } from "../display/types";
 import { VIRTUALIZE_THRESHOLD } from "@/lib/perf";
 import { cn } from "@/lib/utils";
 import { InfiniteScrollSentinel } from "../infinite-scroll-sentinel";
+import { m } from "@/paraglide/messages.js";
 
 const TIMELINE_ROW_HEIGHT = 40;
 
@@ -72,7 +72,6 @@ interface TimelineViewProps {
 }
 
 export function TimelineView({ stories, onOpenStory, orderBy, onLoadMore, hasMore }: TimelineViewProps) {
-  const { t } = useTranslation("story");
   const [mode, setMode] = useState<"month" | "week">("month");
   const [localStories, setLocalStories] = useState(stories);
   const [dragSource, setDragSource] = useState<StoryListItem | null>(null);
@@ -145,18 +144,18 @@ export function TimelineView({ stories, onOpenStory, orderBy, onLoadMore, hasMor
       await updateStory({
         data: { storyId: story.id, startDate: newStartStr, targetDate: newTargetStr ?? null },
       });
-      toast.success(t("timeline.dateUpdated"));
+      toast.success(m.story_timeline_dateUpdated());
     } catch (e) {
       setLocalStories(prev);
-      toast.error((e as Error)?.message || t("timeline.dateUpdateFailed"));
+      toast.error((e as Error)?.message || m.story_timeline_dateUpdateFailed());
     }
   };
 
   return (
     <div className="flex h-full flex-col gap-3">
       <div className="flex items-center gap-2">
-        <Button variant={mode === "month" ? "default" : "outline"} size="sm" onClick={() => setMode("month")}>{t("calendar.month")}</Button>
-        <Button variant={mode === "week" ? "default" : "outline"} size="sm" onClick={() => setMode("week")}>{t("calendar.week")}</Button>
+        <Button variant={mode === "month" ? "default" : "outline"} size="sm" onClick={() => setMode("month")}>{m.story_calendar_month()}</Button>
+        <Button variant={mode === "week" ? "default" : "outline"} size="sm" onClick={() => setMode("week")}>{m.story_calendar_week()}</Button>
         <span className="ml-auto text-xs text-muted-foreground">{formatDate(range.start)} ~ {formatDate(range.end)}</span>
       </div>
 
@@ -239,13 +238,13 @@ export function TimelineView({ stories, onOpenStory, orderBy, onLoadMore, hasMor
                 })
               )}
               {scheduled.length === 0 && (
-                <div className="py-8 text-center text-sm text-muted-foreground">{t("timeline.noScheduled")}</div>
+                <div className="py-8 text-center text-sm text-muted-foreground">{m.story_timeline_noScheduled()}</div>
               )}
             </div>
 
             {/* 未排期行 */}
             <div className="border-t py-3">
-              <div className="mb-2 text-xs font-medium text-muted-foreground">{t("calendar.unscheduled", { count: unscheduled.length })}</div>
+              <div className="mb-2 text-xs font-medium text-muted-foreground">{m.story_calendar_unscheduled({ count: unscheduled.length })}</div>
               <div className="flex flex-wrap gap-2">
                 {unscheduled.map((s) => (
                   <button

package/src/components/story/views/view-list-section.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Check, ChevronRight, ChevronDown, Plus, Pencil, Trash2, type LucideIcon } from "lucide-react";
 import {
   AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription,
@@ -24,6 +23,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { cn } from "@/lib/utils";
 import { renderViewIcon, groupViewsByProject, type SavedView, type ViewProjectInfo } from "./view-types";
+import { m } from "@/paraglide/messages.js";
 
 interface ViewListSectionProps {
   views: SavedView[];
@@ -36,7 +36,6 @@ interface ViewListSectionProps {
 }
 
 export function ViewListSection({ views, activeViewId, projects, onApplyView, onEditView, onDeleteView, onAddView }: ViewListSectionProps) {
-  const { t } = useTranslation("story");
   const [collapsed, setCollapsed] = useState(false);
   const { common, byProject } = groupViewsByProject(views, projects);
 
@@ -45,12 +44,12 @@ export function ViewListSection({ views, activeViewId, projects, onApplyView, on
       <div className="mb-1 flex w-full items-center gap-1 text-xs font-medium text-muted-foreground">
         <button type="button" onClick={() => setCollapsed(!collapsed)} className="flex items-center gap-1 hover:text-foreground">
           {collapsed ? <ChevronRight className="size-3" /> : <ChevronDown className="size-3" />}
-          {t("view.title")}
+          {m.story_view_title()}
         </button>
         <button
           type="button"
-          aria-label={t("view.create")}
-          title={t("view.create")}
+          aria-label={m.story_view_create()}
+          title={m.story_view_create()}
           onClick={onAddView}
           className="ml-auto grid size-5 place-items-center rounded hover:bg-muted hover:text-foreground"
         >
@@ -61,11 +60,11 @@ export function ViewListSection({ views, activeViewId, projects, onApplyView, on
       {!collapsed && (
         <div className="flex flex-col gap-0.5">
           {views.length === 0 && (
-            <span className="px-1.5 py-1 text-xs text-muted-foreground">{t("view.noViews")}</span>
+            <span className="px-1.5 py-1 text-xs text-muted-foreground">{m.story_view_noViews()}</span>
           )}
           {common.length > 0 && (
             <div>
-              <div className="px-1.5 pt-1 text-[10px] font-medium text-muted-foreground/70">{t("view.common")}</div>
+              <div className="px-1.5 pt-1 text-[10px] font-medium text-muted-foreground/70">{m.story_view_common()}</div>
               {common.map((view) => (
                 <ViewRow
                   key={view.id}
@@ -108,7 +107,6 @@ interface ViewRowProps {
 }
 
 function ViewRow({ view, active, onApply, onEdit, onDelete }: ViewRowProps) {
-  const { t } = useTranslation("story");
   const [confirmOpen, setConfirmOpen] = useState(false);
   const Icon: LucideIcon = renderViewIcon(view.icon);
   return (
@@ -135,8 +133,8 @@ function ViewRow({ view, active, onApply, onEdit, onDelete }: ViewRowProps) {
         <div className="flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100">
           <button
             type="button"
-            aria-label={t("view.edit")}
-            title={t("view.edit")}
+            aria-label={m.story_view_edit()}
+            title={m.story_view_edit()}
             onClick={onEdit}
             className="grid size-5 place-items-center rounded text-muted-foreground hover:bg-background hover:text-foreground"
           >
@@ -146,8 +144,8 @@ function ViewRow({ view, active, onApply, onEdit, onDelete }: ViewRowProps) {
             <AlertDialogTrigger asChild>
               <button
                 type="button"
-                aria-label={t("view.delete")}
-                title={t("view.delete")}
+                aria-label={m.story_view_delete()}
+                title={m.story_view_delete()}
                 className="grid size-5 place-items-center rounded text-muted-foreground hover:bg-background hover:text-destructive"
               >
                 <Trash2 className="size-3" />
@@ -155,15 +153,15 @@ function ViewRow({ view, active, onApply, onEdit, onDelete }: ViewRowProps) {
             </AlertDialogTrigger>
             <AlertDialogContent>
               <AlertDialogHeader>
-                <AlertDialogTitle>{t("view.deleteTitle")}</AlertDialogTitle>
+                <AlertDialogTitle>{m.story_view_deleteTitle()}</AlertDialogTitle>
                 <AlertDialogDescription>
-                  {t("view.deleteConfirmMsg", { name: view.name })}
+                  {m.story_view_deleteConfirmMsg({ name: view.name })}
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>
-                <AlertDialogCancel>{t("view.cancel")}</AlertDialogCancel>
+                <AlertDialogCancel>{m.story_view_cancel()}</AlertDialogCancel>
                 <AlertDialogAction onClick={() => { onDelete(); setConfirmOpen(false); }}>
-                  {t("view.deleteConfirm")}
+                  {m.story_view_deleteConfirm()}
                 </AlertDialogAction>
               </AlertDialogFooter>
             </AlertDialogContent>

package/src/components/story/views/view-selector-button.tsx

@@ -16,13 +16,13 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Check, ChevronsUpDown, Plus, type LucideIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import { renderViewIcon, groupViewsByProject, type SavedView, type ViewProjectInfo } from "./view-types";
+import { m } from "@/paraglide/messages.js";
 
 interface ViewSelectorButtonProps {
   views: SavedView[];
@@ -33,7 +33,6 @@ interface ViewSelectorButtonProps {
 }
 
 export function ViewSelectorButton({ views, activeViewId, projects, onApplyView, onAddView }: ViewSelectorButtonProps) {
-  const { t } = useTranslation("story");
   const [open, setOpen] = useState(false);
   const active = views.find((v) => v.id === activeViewId);
   const Icon: LucideIcon = active ? renderViewIcon(active.icon) : renderViewIcon("list");
@@ -49,20 +48,20 @@ export function ViewSelectorButton({ views, activeViewId, projects, onApplyView,
       <PopoverTrigger asChild>
          <Button variant="outline" size="sm" className="h-8 gap-1.5 border-0 px-2.5 text-sm font-medium shrink-0 hover:bg-muted">
           <Icon className="size-4 text-muted-foreground" />
-          {active?.name ?? t("view.default")}
+          {active?.name ?? m.story_view_default()}
           <ChevronsUpDown className="size-3 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-56 p-1" align="start">
         <div className="flex flex-col gap-1">
           {views.length === 0 && (
-            <span className="px-2 py-1.5 text-sm text-muted-foreground">{t("view.noViews")}</span>
+            <span className="px-2 py-1.5 text-sm text-muted-foreground">{m.story_view_noViews()}</span>
           )}
           {common.length > 0 && (
-            <ViewGroup label={t("view.common")} views={common} activeViewId={activeViewId} onApply={handleApply} />
+            <ViewGroup label={m.story_view_common()} views={common} activeViewId={activeViewId} onApply={handleApply} />
           )}
           {byProject.map(({ project, views: pViews }) => (
-            <ViewGroup key={project.id} label={t("view.projectViews", { name: project.name })} views={pViews} activeViewId={activeViewId} onApply={handleApply} />
+            <ViewGroup key={project.id} label={m.story_view_projectViews({ name: project.name })} views={pViews} activeViewId={activeViewId} onApply={handleApply} />
           ))}
         </div>
         <Separator orientation="horizontal" data-horizontal className="-my-1.5" />
@@ -72,7 +71,7 @@ export function ViewSelectorButton({ views, activeViewId, projects, onApplyView,
           className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
         >
           <Plus className="size-4" />
-          {t("view.create")}
+          {m.story_view_create()}
         </button>
       </PopoverContent>
     </Popover>

package/src/components/story/views/view-switcher.tsx

@@ -17,8 +17,8 @@
 
 import { TableProperties, SquareKanban, CalendarDays, Grid3x3, ChartGantt } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
+import { m } from "@/paraglide/messages.js";
 import {
   Tooltip,
   TooltipContent,
@@ -27,12 +27,12 @@ import {
 
 export type StoryView = "list" | "board" | "calendar" | "table" | "timeline";
 
-const VIEWS: { value: StoryView; label: string; icon: LucideIcon }[] = [
-  { value: "list", label: "view.layout.list", icon: TableProperties },
-  { value: "board", label: "view.layout.board", icon: SquareKanban },
-  { value: "calendar", label: "view.layout.calendar", icon: CalendarDays },
-  { value: "table", label: "view.layout.table", icon: Grid3x3 },
-  { value: "timeline", label: "view.layout.timeline", icon: ChartGantt },
+const VIEWS: { value: StoryView; label: () => string; icon: LucideIcon }[] = [
+  { value: "list", label: m.story_view_layout_list, icon: TableProperties },
+  { value: "board", label: m.story_view_layout_board, icon: SquareKanban },
+  { value: "calendar", label: m.story_view_layout_calendar, icon: CalendarDays },
+  { value: "table", label: m.story_view_layout_table, icon: Grid3x3 },
+  { value: "timeline", label: m.story_view_layout_timeline, icon: ChartGantt },
 ];
 
 interface ViewSwitcherProps {
@@ -41,7 +41,6 @@ interface ViewSwitcherProps {
 }
 
 export function ViewSwitcher({ view, onViewChange }: ViewSwitcherProps) {
-  const { t } = useTranslation("story");
   return (
     <div className="flex items-center rounded-md border bg-muted/50 p-0.5">
       {VIEWS.map((v) => {
@@ -58,12 +57,12 @@ export function ViewSwitcher({ view, onViewChange }: ViewSwitcherProps) {
                   "flex h-7 w-8 items-center justify-center rounded transition-colors",
                   active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground",
                 )}
-                aria-label={t(v.label)}
+                aria-label={v.label()}
               >
                 <Icon className="size-4" />
               </button>
             </TooltipTrigger>
-            <TooltipContent side="bottom">{t(v.label)}</TooltipContent>
+            <TooltipContent side="bottom">{v.label()}</TooltipContent>
           </Tooltip>
         );
       })}

package/src/components/story/views/view-types.ts

@@ -19,13 +19,13 @@ import {
   List, Flag, CircleUser, Tag, Calendar, LayoutGrid, KanbanSquare,
   CalendarRange, GitBranch, Inbox, Star, Bookmark, type LucideIcon,
 } from "lucide-react";
-import { getClientI18n } from "@/i18n/client";
+import { m } from '@/paraglide/messages.js';
 import { DEFAULT_DISPLAY_OPTIONS, type DisplayOptions } from "../display/types";
 import type { FilterCondition } from "../filters/filter-types";
 
 export const DEFAULT_VIEW_ID = "__default__";
 export function getDefaultViewName(): string {
-  return getClientI18n().t('story:view.default');
+  return m.story_view_default();
 }
 
 export interface SavedView {
@@ -42,22 +42,22 @@ export interface SavedView {
 export interface ViewIconOption {
   name: string;
   icon: LucideIcon;
-  label: string;
+  label: () => string;
 }
 
 export const VIEW_ICONS: ViewIconOption[] = [
-  { name: "list", icon: List, label: "view.icon.list" },
-  { name: "flag", icon: Flag, label: "view.icon.flag" },
-  { name: "user", icon: CircleUser, label: "view.icon.user" },
-  { name: "tag", icon: Tag, label: "view.icon.tag" },
-  { name: "calendar", icon: Calendar, label: "view.icon.calendar" },
-  { name: "grid", icon: LayoutGrid, label: "view.icon.grid" },
-  { name: "kanban", icon: KanbanSquare, label: "view.icon.kanban" },
-  { name: "range", icon: CalendarRange, label: "view.icon.range" },
-  { name: "branch", icon: GitBranch, label: "view.icon.branch" },
-  { name: "inbox", icon: Inbox, label: "view.icon.inbox" },
-  { name: "star", icon: Star, label: "view.icon.star" },
-  { name: "bookmark", icon: Bookmark, label: "view.icon.bookmark" },
+  { name: "list", icon: List, label: m.story_view_icon_list },
+  { name: "flag", icon: Flag, label: m.story_view_icon_flag },
+  { name: "user", icon: CircleUser, label: m.story_view_icon_user },
+  { name: "tag", icon: Tag, label: m.story_view_icon_tag },
+  { name: "calendar", icon: Calendar, label: m.story_view_icon_calendar },
+  { name: "grid", icon: LayoutGrid, label: m.story_view_icon_grid },
+  { name: "kanban", icon: KanbanSquare, label: m.story_view_icon_kanban },
+  { name: "range", icon: CalendarRange, label: m.story_view_icon_range },
+  { name: "branch", icon: GitBranch, label: m.story_view_icon_branch },
+  { name: "inbox", icon: Inbox, label: m.story_view_icon_inbox },
+  { name: "star", icon: Star, label: m.story_view_icon_star },
+  { name: "bookmark", icon: Bookmark, label: m.story_view_icon_bookmark },
 ];
 
 export function renderViewIcon(name: string): LucideIcon {

package/src/components/tiptap/extension/code-block-ellipsis-input-extension.ts

@@ -15,7 +15,6 @@
 // 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 { Extension, textblockTypeInputRule } from "@tiptap/core"
 
 export const CodeBlockEllipsisInput = Extension.create({

package/src/components/tiptap/hooks/use-composed-ref.ts

@@ -15,7 +15,6 @@
 // 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 { useCallback, useRef } from "react"
 
 // basically Exclude<React.ClassAttributes<T>["ref"], string>

package/src/components/tiptap/hooks/use-cursor-visibility.ts

@@ -15,7 +15,6 @@
 // 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 type { Editor } from "@tiptap/react"
 import { useWindowSize } from "./use-window-size.ts"
 import { useBodyRect } from "./use-element-rect.ts"

package/src/components/tiptap/hooks/use-floating-element.ts

@@ -15,7 +15,6 @@
 // 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 type {
   AutoUpdateOptions,
   UseDismissProps,

package/src/components/tiptap/hooks/use-is-breakpoint.ts

@@ -15,7 +15,6 @@
 // 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 { useEffect, useState } from "react"
 
 type BreakpointMode = "min" | "max"

package/src/components/tiptap/hooks/use-isomorphic-layout-effect.ts

@@ -15,7 +15,6 @@
 // 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 { useEffect, useLayoutEffect } from "react"
 
 /**

package/src/components/tiptap/hooks/use-menu-navigation.ts

@@ -15,7 +15,6 @@
 // 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 type { Editor } from "@tiptap/react"
 import { useEffect, useState } from "react"
 

package/src/components/tiptap/hooks/use-on-click-outside.ts

@@ -15,7 +15,6 @@
 // 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 type { RefObject } from "react"
 import { useEffect, useRef } from "react"
 import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.ts"

package/src/components/tiptap/hooks/use-tiptap-editor.ts

@@ -15,7 +15,6 @@
 // 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 type { Editor } from "@tiptap/react"
 import { useCurrentEditor, useEditorState } from "@tiptap/react"
 import { useEffect, useState } from "react"

package/src/components/tiptap/hooks/use-ui-editor-state.ts

@@ -15,7 +15,6 @@
 // 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 type { Editor } from "@tiptap/react"
 import { useEditorState } from "@tiptap/react"
 import {

package/src/components/tiptap/mindmap/lib/__tests__/default-mindmap-data.test.ts

@@ -17,10 +17,11 @@
 
 import { describe, it, expect, beforeAll } from 'vitest'
 import { createDefaultMindmapData, parseMindmapContent } from '../default-mindmap-data'
-import { getClientI18n } from '@/i18n/client'
+import { m } from "@/paraglide/messages.js";
+import { setLocale } from "@/paraglide/runtime.js";
 
 beforeAll(() => {
-  getClientI18n().changeLanguage('zh')
+  setLocale('zh')
 })
 
 describe('createDefaultMindmapData', () => {

package/src/components/tiptap/mindmap/lib/default-mindmap-data.ts

@@ -16,10 +16,10 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import MindElixir, { type MindElixirData } from 'mind-elixir'
-import { getClientI18n } from '@/i18n/client'
+import { m } from "@/paraglide/messages.js";
 
 export function createDefaultMindmapData(topic?: string): MindElixirData {
-  const defaultTopic = topic || getClientI18n().t('defaultTopic', { ns: 'mindmap' })
+  const defaultTopic = topic || m.mindmap_defaultTopic()
   return { ...MindElixir.new(defaultTopic), direction: 2 }
 }