Merge remote-tracking branch 'origin/dev' into dev

src/components/hooks/useLocale.ts

@@ -4,7 +4,7 @@ import { httpGet } from '@/lib/fetch';
 import { getDateLocale, getTextDirection } from '@/lib/lang';
 import { setItem } from '@/lib/storage';
 import { setLocale, useApp } from '@/store/app';
-import enUS from '../../../public/intl/country/en-US.json';
+import enUS from '../../../public/intl/messages/en-US.json';
 import { useForceUpdate } from './useForceUpdate';
 
 const messages = {

src/components/hooks/useMessages.ts

@@ -1,5 +1,6 @@
-import { FormattedMessage, type MessageDescriptor, useIntl } from 'react-intl';
-import { labels, messages } from '@/components/messages';
+import { useTranslations } from 'next-intl';
+import { createElement, type ReactNode } from 'react';
+import { labels, type MessageDescriptor, messages } from '@/components/messages';
 import type { ApiError } from '@/lib/types';
 
 type FormatMessage = (
@@ -8,17 +9,33 @@ type FormatMessage = (
   opts?: any,
 ) => string | null;
 
+interface FormattedMessageProps extends MessageDescriptor {
+  values?: Record<string, ReactNode>;
+}
+
 interface UseMessages {
   formatMessage: FormatMessage;
   messages: typeof messages;
   labels: typeof labels;
   getMessage: (id: string) => string;
   getErrorMessage: (error: ApiError) => string | undefined;
-  FormattedMessage: typeof FormattedMessage;
+  FormattedMessage: (props: FormattedMessageProps) => ReactNode;
 }
 
 export function useMessages(): UseMessages {
-  const intl = useIntl();
+  const t = useTranslations();
+
+  const formatMessage = (
+    descriptor: MessageDescriptor,
+    values?: Record<string, string | number | boolean | null | undefined>,
+  ) => {
+    if (!descriptor) return null;
+    try {
+      return t(descriptor.id, values);
+    } catch {
+      return descriptor.defaultMessage || descriptor.id;
+    }
+  };
 
   const getMessage = (id: string) => {
     const message = Object.values(messages).find(value => value.id === `message.${id}`);
@@ -36,13 +53,50 @@ export function useMessages(): UseMessages {
     return code ? getMessage(code) : error?.message || 'Unknown error';
   };
 
-  const formatMessage = (
-    descriptor: MessageDescriptor,
-    values?: Record<string, string | number | boolean | null | undefined>,
-    opts?: any,
-  ) => {
-    return descriptor ? intl.formatMessage(descriptor, values, opts) : null;
-  };
+  function FormattedMessage({ id, defaultMessage, values }: FormattedMessageProps) {
+    if (
+      !values ||
+      Object.values(values).every(v => typeof v === 'string' || typeof v === 'number')
+    ) {
+      try {
+        return t(id, values as any);
+      } catch {
+        return defaultMessage || id;
+      }
+    }
+
+    // For JSX values: get the raw ICU template and manually interpolate
+    let template: string;
+    try {
+      template = t.raw(id) as string;
+    } catch {
+      template = defaultMessage || id;
+    }
+
+    if (typeof template !== 'string') {
+      return defaultMessage || id;
+    }
+
+    // Split on {placeholder} tokens and interleave with values
+    const parts: ReactNode[] = [];
+    const regex = /\{(\w+)\}/g;
+    let lastIndex = 0;
+
+    for (let match = regex.exec(template); match !== null; match = regex.exec(template)) {
+      if (match.index > lastIndex) {
+        parts.push(template.slice(lastIndex, match.index));
+      }
+      const key = match[1];
+      parts.push(values[key] !== undefined ? values[key] : match[0]);
+      lastIndex = regex.lastIndex;
+    }
+
+    if (lastIndex < template.length) {
+      parts.push(template.slice(lastIndex));
+    }
+
+    return createElement('span', null, ...parts);
+  }
 
   return { formatMessage, messages, labels, getMessage, getErrorMessage, FormattedMessage };
 }

src/components/messages.ts

@@ -1,6 +1,9 @@
-import { defineMessages } from 'react-intl';
+export interface MessageDescriptor {
+  id: string;
+  defaultMessage: string;
+}
 
-export const labels = defineMessages({
+export const labels: Record<string, MessageDescriptor> = {
   ok: { id: 'label.ok', defaultMessage: 'OK' },
   unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
   required: { id: 'label.required', defaultMessage: 'Required' },
@@ -378,9 +381,9 @@ export const labels = defineMessages({
   support: { id: 'label.support', defaultMessage: 'Support' },
   documentation: { id: 'label.documentation', defaultMessage: 'Documentation' },
   switchAccount: { id: 'label.switch-account', defaultMessage: 'Switch account' },
-});
+};
 
-export const messages = defineMessages({
+export const messages: Record<string, MessageDescriptor> = {
   error: { id: 'message.error', defaultMessage: 'Something went wrong.' },
   saved: { id: 'message.saved', defaultMessage: 'Saved successfully.' },
   noUsers: { id: 'message.no-users', defaultMessage: 'There are no users.' },
@@ -530,4 +533,4 @@ export const messages = defineMessages({
     id: 'message.sever-error',
     defaultMessage: 'Server error',
   },
-});
+};