@allbluecn/web-app 0.9.5 → 0.10.2

package/src/components/layout/sidebar-03/nav-workspace.tsx

@@ -17,8 +17,7 @@
 
 import { Link, useLocation } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Layers, Plus } from "lucide-react";
+import { Layers, Plus, PinOff } from "lucide-react";
 import {
   SidebarGroup,
   SidebarMenu,
@@ -26,14 +25,17 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { isParentActive } from "@/lib/sidebar-utils";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import { CreateWorkspaceDialog } from "@/components/workspace/create-workspace-dialog";
 import { useLiveQuery } from "@tanstack/react-db";
 import { workspacesCollection } from "@/lib/collections/reference/workspaces-collection";
+import { toggleWorkspacePinFn } from "@/server/serverFns/workspace";
+import { m } from "@/paraglide/messages.js";
 
-function WorkspaceLinks({ pathname, t }: { pathname: string; t: any }) {
+function WorkspaceLinks({ pathname }: { pathname: string }) {
   const { data: workspaces } = useLiveQuery((q) =>
     q.from({ w: workspacesCollection })
   );
@@ -49,25 +51,25 @@ function WorkspaceLinks({ pathname, t }: { pathname: string; t: any }) {
       <SidebarMenuItem>
         <SidebarMenuButton
           asChild
-          tooltip={t('sidebar.workspace.home')}
+          tooltip={m.common_sidebar_workspace_home()}
           isActive={pathname === "/workspaces"}
           className="flex w-full items-center rounded-lg px-2 font-medium data-active:text-sidebar-foreground"
         >
           <Link to="/workspaces" className="flex w-full items-center">
             <Layers className="size-4" />
-            <span className="ml-2 text-sm font-medium">{t('sidebar.workspace.home')}</span>
+            <span className="ml-2 text-sm font-medium">{m.common_sidebar_workspace_home()}</span>
           </Link>
         </SidebarMenuButton>
       </SidebarMenuItem>
       {workspacesList.map((ws) => {
         const active = pathname.startsWith(`/workspaces/${ws.id}`);
         return (
-          <SidebarMenuItem key={ws.id}>
+          <SidebarMenuItem key={ws.id} className="group/ws relative">
             <SidebarMenuButton
               asChild
               tooltip={ws.name}
               isActive={active}
-              className="flex w-full items-center rounded-lg px-2 font-medium data-active:text-sidebar-foreground"
+              className="flex w-full items-center rounded-lg px-2 font-medium pr-8 data-active:text-sidebar-foreground"
             >
               <Link
                 to="/workspaces/$workspaceId"
@@ -82,6 +84,23 @@ function WorkspaceLinks({ pathname, t }: { pathname: string; t: any }) {
                 <span className="ml-2 truncate text-sm">{ws.name}</span>
               </Link>
             </SidebarMenuButton>
+            <button
+              type="button"
+              aria-label={m.sidebar_workspace_unpin()}
+              className="absolute right-1 top-1/2 -translate-y-1/2 flex size-5 items-center justify-center rounded text-sidebar-foreground/70 opacity-0 transition-opacity group-hover/ws:opacity-100 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              onClick={async () => {
+                await toggleWorkspacePinFn({ data: { workspaceId: ws.id, pinned: false } });
+                (workspacesCollection as any).utils?.refetch?.();
+                window.dispatchEvent(new CustomEvent("workspace-pinned", { detail: { workspaceId: ws.id, pinned: false } }));
+              }}
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <PinOff className="size-3.5" />
+                </TooltipTrigger>
+                <TooltipContent>{m.sidebar_workspace_unpin()}</TooltipContent>
+              </Tooltip>
+            </button>
           </SidebarMenuItem>
         );
       })}
@@ -92,7 +111,6 @@ function WorkspaceLinks({ pathname, t }: { pathname: string; t: any }) {
 export function NavWorkspace() {
   const { state } = useSidebar();
   const { pathname } = useLocation();
-  const { t } = useTranslation('common');
   const isCollapsed = state === "collapsed";
   const [mounted, setMounted] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
@@ -108,10 +126,12 @@ export function NavWorkspace() {
     window.addEventListener("workspace-created", refresh);
     window.addEventListener("workspace-deleted", refresh);
     window.addEventListener("workspace-updated", refresh);
+    window.addEventListener("workspace-pinned", refresh);
     return () => {
       window.removeEventListener("workspace-created", refresh);
       window.removeEventListener("workspace-deleted", refresh);
       window.removeEventListener("workspace-updated", refresh);
+      window.removeEventListener("workspace-pinned", refresh);
     };
   }, []);
 
@@ -122,7 +142,7 @@ export function NavWorkspace() {
           <SidebarMenuItem>
             <SidebarMenuButton
               asChild
-              tooltip={t('sidebar.workspace.home')}
+              tooltip={m.common_sidebar_workspace_home()}
               isActive={isParentActive(pathname, "/workspaces")}
             >
               <Link to="/workspaces" className="flex items-center">
@@ -140,7 +160,7 @@ export function NavWorkspace() {
     <SidebarGroup className="p-0">
       <div className="mb-1 flex h-8 items-center justify-between px-2">
         <span className="text-xs font-medium text-sidebar-foreground/70">
-          {t('sidebar.workspace.title')}
+          {m.common_sidebar_workspace_title()}
         </span>
         <button
           type="button"
@@ -148,12 +168,12 @@ export function NavWorkspace() {
           className={cn(
             "flex size-5 items-center justify-center rounded text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
           )}
-          aria-label={t('sidebar.workspace.create')}
+          aria-label={m.common_sidebar_workspace_create()}
         >
           <Plus className="size-3.5" />
         </button>
       </div>
-      {mounted && <WorkspaceLinks pathname={pathname} t={t} />}
+      {mounted && <WorkspaceLinks pathname={pathname} />}
       <CreateWorkspaceDialog open={createOpen} onOpenChange={setCreateOpen} />
     </SidebarGroup>
   );

package/src/components/layout/sidebar-03/team-switcher.tsx

@@ -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 {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/layout/sidebar-03/user-menu.tsx

@@ -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 {
   BadgeCheck,
   PartyPopper,
@@ -45,14 +44,13 @@ import {
 } from "@/components/ui/sidebar";
 import { signOut, useSession } from "@/lib/auth/auth-client";
 import { useRouter, useMatches } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
 import { getQueryClient } from "@/lib/query-client-seam";
 import { UserAvatar } from "@/components/shared-kit";
 import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
 import { SparklesText } from "@/components/magicui/sparkles-text";
+import { m } from "@/paraglide/messages.js";
 
 export function UserMenu() {
-  const { t } = useTranslation('common');
   const { isMobile } = useSidebar();
   const { data: clientSession } = useSession();
   // seam 单例替代 React Context 读取：SSR 下 npm 包内 react-query 可能与宿主
@@ -66,7 +64,7 @@ export function UserMenu() {
   const session = clientSession || contextSession;
 
   const user = session?.user;
-  const userName = user?.name || user?.email || t('sidebar.userMenu.title');
+  const userName = user?.name || user?.email || m.common_sidebar_userMenu_title();
   const userEmail = user?.email || "";
   const userRole = (user as { role?: string })?.role;
   const isAdmin = userRole === "ADMIN" || userRole === "SUPER_ADMIN";
@@ -80,7 +78,7 @@ export function UserMenu() {
   const handleSignOut = async () => {
     if (isLocalGuest) {
       await logoutRemoteFn({ data: {} });
-      toast.success(t('sidebar.userMenu.logoutToGuest'));
+      toast.success(m.common_sidebar_userMenu_logoutToGuest());
       queryClient.resetQueries({ queryKey: ['session'] });
       queryClient.resetQueries({ queryKey: ['effective-plan'] });
       window.location.reload();
@@ -99,6 +97,30 @@ export function UserMenu() {
     window.location.href = '/login?desktop_redirect=true';
   };
 
+  if (!user) {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem className="rounded-lg bg-sidebar-accent/50">
+          <SidebarMenuButton
+            size="lg"
+            onClick={() =>
+              router.navigate({
+                to: '/login',
+                search: { redirect: router.state.location.pathname + router.state.location.searchStr },
+              })
+            }
+          >
+            <UserAvatar name="?" size="md" />
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">{m.common_sidebar_userMenu_login()}</span>
+            </div>
+            <LogIn className="ml-auto size-4" />
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    )
+  }
+
   return (
     <SidebarMenu>
       <SidebarMenuItem className="rounded-lg bg-sidebar-accent/50">
@@ -149,31 +171,29 @@ export function UserMenu() {
               <DropdownMenuItem>
                 <PartyPopper strokeWidth={2.5} />
                   <SparklesText sparklesCount={5} className=" flex gap-2 text-sm font-medium">
-                  {t('sidebar.userMenu.upgradePro')}
+                  {m.common_sidebar_userMenu_upgradePro()}
                 </SparklesText>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               {isLocalGuest && (
                 <DropdownMenuItem onClick={handleLocalLogin}>
                   <LogIn />
-                  {t('sidebar.userMenu.loginSaaS')}
+                  {m.common_sidebar_userMenu_loginSaaS()}
                 </DropdownMenuItem>
               )}
               <DropdownMenuItem onClick={async () => { await router.navigate({ to: "/settings" }) }}>
                 <Settings />
-                {t('sidebar.userMenu.settings')}
+                {m.common_sidebar_userMenu_settings()}
               </DropdownMenuItem>
               <DropdownMenuItem onClick={async () => { await router.navigate({ to: "/settings/team" }) }}>
                 <Users />
-                {t('sidebar.userMenu.teamManagement')}
+                {m.common_sidebar_userMenu_teamManagement()}
               </DropdownMenuItem>
 
-
-
               {isAdmin && (
                 <DropdownMenuItem onClick={handleEnterAdmin}>
                   <LogIn />
-                  {t('sidebar.userMenu.admin')}
+                  {m.common_sidebar_userMenu_admin()}
                 </DropdownMenuItem>
               )}
 
@@ -181,7 +201,7 @@ export function UserMenu() {
             <DropdownMenuSeparator />
             <DropdownMenuItem onClick={handleSignOut}>
               <LogOut />
-              {t('sidebar.userMenu.logout')}
+              {m.common_sidebar_userMenu_logout()}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

package/src/components/magicui/components/animate/avatar-group.tsx

@@ -18,7 +18,6 @@
 import * as React from 'react';
 import { m } from 'motion/react';
 
-
 import {
   AvatarGroup as AvatarGroupPrimitive,
   AvatarGroupTooltip as AvatarGroupTooltipPrimitive,

package/src/components/magicui/primitives/animate/avatar-group.tsx

@@ -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 * as React from 'react';
 import { HTMLMotionProps, m, type Transition } from 'motion/react';
 

package/src/components/magicui/primitives/animate/slot.tsx

@@ -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 * as React from 'react';
 import { m, isMotionComponent, type HTMLMotionProps } from 'motion/react';
 import { cn } from '@/lib/utils';

package/src/components/magicui/primitives/animate/tooltip.tsx

@@ -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 * as React from 'react';
 import { useHotkey } from '@tanstack/react-hotkeys';
 import {

package/src/components/magicui/sparkles-text.tsx

@@ -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 { CSSProperties, ReactElement, useEffect, useState } from "react"
 import { m } from "motion/react"
 

package/src/components/mindmap/mindmap-doc-editor.tsx

@@ -15,22 +15,23 @@
 // 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 { lazy, useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { useTranslation } from "react-i18next"
-import { getClientI18n } from "@/i18n/client"
+import { lazy, useCallback, useEffect, useMemo, useRef, useState, type LazyExoticComponent, type ComponentType } from "react"
 import { useDebouncedCallback, EDITOR_AUTO_SAVE_MS } from "@/lib/pacer"
 import { updateDocumentFn } from "@/server/serverFns/knowledge"
 import { useEditorWidth, useMindmapWidthStyles } from "@/components/knowledge/editor/editor-width-context"
 import { DocHeader } from "@/components/knowledge/editor/doc-header"
 import { parseMindmapContent, createDefaultMindmapData } from "@/components/tiptap/mindmap/lib/default-mindmap-data"
 import type { MindElixirData } from "mind-elixir"
+import { m } from "@/paraglide/messages.js";
 
-const MindMap = lazy(() =>
+const MindMapLazy = lazy(() =>
   import("@/components/tiptap/mindmap/mind-map").then((m) => ({ default: m.MindMap })),
-)
-const MindMapControls = lazy(() =>
+) as LazyExoticComponent<ComponentType<{ data?: MindElixirData; onChange?: (data: MindElixirData, operation: unknown) => void; fit?: boolean; children?: React.ReactNode }>>
+const MindMapControlsLazy = lazy(() =>
   import("@/components/tiptap/mindmap/mind-map").then((m) => ({ default: m.MindMapControls })),
-)
+) as LazyExoticComponent<ComponentType<{ position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; showFullscreen?: boolean }>>
+const MindMap = MindMapLazy
+const MindMapControls = MindMapControlsLazy
 
 interface CreatorInfo {
   username?: string | null
@@ -39,7 +40,7 @@ interface CreatorInfo {
   bgColor?: string | null
 }
 
-interface MindmapDocEditorProps {
+export interface MindmapDocEditorProps {
   document: {
     id: string
     kbId: string
@@ -53,7 +54,6 @@ interface MindmapDocEditorProps {
 }
 
 export function MindmapDocEditor({ document, kbName }: MindmapDocEditorProps) {
-  const { t } = useTranslation("mindmap")
   const { onDocTitleChanged } = useEditorWidth()
   const { headerMaxWidth, contentMaxWidth } = useMindmapWidthStyles()
   const [dirty, setDirty] = useState(false)
@@ -79,7 +79,7 @@ export function MindmapDocEditor({ document, kbName }: MindmapDocEditorProps) {
       setDirty(false)
       setLastSavedAt(new Date())
     } catch (e) {
-      console.error(getClientI18n().t("errors.autoSaveFailed", { ns: "mindmap" }), e)
+      console.error(m.mindmap_errors_autoSaveFailed(), e)
     } finally {
       setSaving(false)
     }
@@ -97,7 +97,7 @@ export function MindmapDocEditor({ document, kbName }: MindmapDocEditorProps) {
     { wait: EDITOR_AUTO_SAVE_MS },
   )
 
-  const handleChange = useCallback((newData: MindElixirData) => {
+  const handleChange = useCallback((newData: MindElixirData, _operation: unknown) => {
     latestContent.current = newData
     setMindmapData(newData)
     setDirty(true)
@@ -110,7 +110,7 @@ export function MindmapDocEditor({ document, kbName }: MindmapDocEditorProps) {
       await updateDocumentFn({ data: { id: docId.current, title: newTitle } })
       onDocTitleChanged()
     } catch (e) {
-      console.error(getClientI18n().t("errors.titleUpdateFailed", { ns: "mindmap" }), e)
+      console.error(m.mindmap_errors_titleUpdateFailed(), e)
     }
   }, [onDocTitleChanged])
 
@@ -119,7 +119,7 @@ export function MindmapDocEditor({ document, kbName }: MindmapDocEditorProps) {
     try {
       await updateDocumentFn({ data: { id: docId.current, tags: newTags } })
     } catch (e) {
-      console.error(getClientI18n().t("errors.tagsUpdateFailed", { ns: "mindmap" }), e)
+      console.error(m.mindmap_errors_tagsUpdateFailed(), e)
     }
   }, [])
 
@@ -154,13 +154,13 @@ export function MindmapDocEditor({ document, kbName }: MindmapDocEditorProps) {
     <div className="mindmap-doc-editor flex flex-col h-full relative min-w-0">
       {saving && (
         <div className="absolute top-3 right-4 z-10 text-xs text-muted-foreground bg-background/80 px-2 py-0.5 rounded">
-          {t("saving")}
+          {m.mindmap_saving()}
         </div>
       )}
       <div className="px-20 pt-6 pb-2 mx-auto w-full" style={{ maxWidth: headerMaxWidth }}>
         <DocHeader
           title={displayTitle}
-          titlePlaceholder={t("titlePlaceholder")}
+          titlePlaceholder={m.mindmap_titlePlaceholder()}
           onTitleChange={handleTitleChange}
           creator={document.creator ?? undefined}
           kbName={kbName}

package/src/components/notifications/settings-notifications.tsx

@@ -2,7 +2,6 @@
 // Adapted from @hextaui/settings-notifications (https://www.hextaui.com)
 import { useEffect, useState } from 'react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { Bell } from 'lucide-react'
 import { Field, FieldContent, FieldDescription, FieldLabel } from '@/components/ui/field'
@@ -25,28 +24,28 @@ import type {
   NotificationPreferences,
 } from '@allbluecn/kernel'
 import { NOTIFICATION_FREQUENCIES } from '@allbluecn/kernel'
+import { m } from "@/paraglide/messages.js";
 
 const FREQUENCY_OPTIONS = NOTIFICATION_FREQUENCIES as readonly NotificationFrequency[]
 
-const FREQUENCY_LABEL_KEYS: Record<NotificationFrequency, string> = {
-  realtime: 'preferences.frequency.realtime',
-  'digest-daily': 'preferences.frequency.daily',
-  'digest-weekly': 'preferences.frequency.weekly',
-  off: 'preferences.frequency.off',
+const FREQUENCY_LABELS: Record<NotificationFrequency, () => string> = {
+  realtime: m.notifications_preferences_frequency_realtime,
+  'digest-daily': m.notifications_preferences_frequency_daily,
+  'digest-weekly': m.notifications_preferences_frequency_weekly,
+  off: m.notifications_preferences_frequency_off,
 }
 
-const CATEGORY_META: { key: NotificationCategory; labelKey: string; descKey: string }[] = [
-  { key: 'team', labelKey: 'preferences.categories.team', descKey: 'preferences.categories.teamDesc' },
-  { key: 'collaboration', labelKey: 'preferences.categories.collaboration', descKey: 'preferences.categories.collaborationDesc' },
-  { key: 'system', labelKey: 'preferences.categories.system', descKey: 'preferences.categories.systemDesc' },
-  { key: 'billing', labelKey: 'preferences.categories.billing', descKey: 'preferences.categories.billingDesc' },
-  { key: 'security', labelKey: 'preferences.categories.security', descKey: 'preferences.categories.securityDesc' },
+const CATEGORY_META: { key: NotificationCategory; label: () => string; desc: () => string }[] = [
+  { key: 'team', label: m.notifications_preferences_categories_team, desc: m.notifications_preferences_categories_teamDesc },
+  { key: 'collaboration', label: m.notifications_preferences_categories_collaboration, desc: m.notifications_preferences_categories_collaborationDesc },
+  { key: 'system', label: m.notifications_preferences_categories_system, desc: m.notifications_preferences_categories_systemDesc },
+  { key: 'billing', label: m.notifications_preferences_categories_billing, desc: m.notifications_preferences_categories_billingDesc },
+  { key: 'security', label: m.notifications_preferences_categories_security, desc: m.notifications_preferences_categories_securityDesc },
 ]
 
 const PREFERENCES_SAVE_DEBOUNCE_MS = 500
 
 export function SettingsNotifications() {
-  const { t } = useTranslation('notifications')
   const queryClient = useQueryClient()
 
   const { data: prefsData, isLoading } = useQuery({
@@ -65,7 +64,7 @@ export function SettingsNotifications() {
       await updateNotificationPreferencesFn({ data: next })
       queryClient.setQueryData(['notifications', 'preferences'], next)
     } catch {
-      toast.error(t('preferences.saveFailed'))
+      toast.error(m.notifications_preferences_saveFailed())
       queryClient.invalidateQueries({ queryKey: ['notifications', 'preferences'] })
     }
   }, { wait: PREFERENCES_SAVE_DEBOUNCE_MS })
@@ -101,8 +100,8 @@ export function SettingsNotifications() {
                 <div className="flex flex-col gap-4 rounded-lg border p-4" key={meta.key}>
                   <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                     <div className="flex min-w-0 flex-1 flex-col gap-2">
-                      <h4 className="font-medium text-sm">{t(meta.labelKey)}</h4>
-                      <p className="text-muted-foreground text-xs">{t(meta.descKey)}</p>
+                      <h4 className="font-medium text-sm">{meta.label()}</h4>
+                      <p className="text-muted-foreground text-xs">{meta.desc()}</p>
                     </div>
                     <Select
                       onValueChange={(value) => setCategoryFrequency(meta.key, value as NotificationFrequency)}
@@ -114,7 +113,7 @@ export function SettingsNotifications() {
                       <SelectContent>
                         {FREQUENCY_OPTIONS.map((option) => (
                           <SelectItem key={option} value={option}>
-                            {t(FREQUENCY_LABEL_KEYS[option])}
+                            {FREQUENCY_LABELS[option]()}
                           </SelectItem>
                         ))}
                       </SelectContent>
@@ -128,7 +127,7 @@ export function SettingsNotifications() {
                       <div className="flex items-center gap-2">
                         <Bell className="size-4 text-muted-foreground" />
                         <FieldLabel htmlFor={`${meta.key}-enable`}>
-                          {t('preferences.enable')}
+                          {m.notifications_preferences_enable()}
                         </FieldLabel>
                       </div>
                       <Switch
@@ -146,12 +145,12 @@ export function SettingsNotifications() {
           <Separator />
 
           <div className="flex flex-col gap-4">
-            <h3 className="font-semibold text-base">{t('preferences.dnd.title')}</h3>
+            <h3 className="font-semibold text-base">{m.notifications_preferences_dnd_title()}</h3>
             <Field>
               <div className="flex items-center justify-between">
                 <div className="flex flex-col gap-1">
-                  <FieldLabel htmlFor="dnd-enabled">{t('preferences.dnd.enabled')}</FieldLabel>
-                  <FieldDescription>{t('preferences.dnd.desc')}</FieldDescription>
+                  <FieldLabel htmlFor="dnd-enabled">{m.notifications_preferences_dnd_enabled()}</FieldLabel>
+                  <FieldDescription>{m.notifications_preferences_dnd_desc()}</FieldDescription>
                 </div>
                 <Switch
                   checked={prefs.dndEnabled}
@@ -164,7 +163,7 @@ export function SettingsNotifications() {
             {prefs.dndEnabled && (
               <div className="flex flex-col gap-4 rounded-lg border bg-muted/30 p-4">
                 <Field>
-                  <FieldLabel htmlFor="dnd-start">{t('preferences.dnd.start')}</FieldLabel>
+                  <FieldLabel htmlFor="dnd-start">{m.notifications_preferences_dnd_start()}</FieldLabel>
                   <FieldContent>
                     <InputGroup>
                       <InputGroupInput
@@ -178,7 +177,7 @@ export function SettingsNotifications() {
                 </Field>
 
                 <Field>
-                  <FieldLabel htmlFor="dnd-end">{t('preferences.dnd.end')}</FieldLabel>
+                  <FieldLabel htmlFor="dnd-end">{m.notifications_preferences_dnd_end()}</FieldLabel>
                   <FieldContent>
                     <InputGroup>
                       <InputGroupInput