Simplify i18n: remove old react-intl artifacts, rename formatMessage to t, replace FormattedMessage with t.rich().

- Rewrite messages.ts to plain string key maps (remove MessageDescriptor)
- Rewrite useMessages hook to expose t from useTranslations() directly
- Rename formatMessage → t across 193 consumer files
- Replace custom FormattedMessage component with next-intl t.rich()
- Update 52 language files to use rich text tags (<b>, <a>)
- Remove all direct imports from @/components/messages in favor of useMessages()

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(main)/pixels/PixelAddButton.tsx

@@ -4,15 +4,10 @@ import { DialogButton } from '@/components/input/DialogButton';
 import { PixelEditForm } from './PixelEditForm';
 
 export function PixelAddButton({ teamId }: { teamId?: string }) {
-  const { formatMessage, labels } = useMessages();
+  const { t, labels } = useMessages();
 
   return (
-    <DialogButton
-      icon={<Plus />}
-      label={formatMessage(labels.addPixel)}
-      variant="primary"
-      width="600px"
-    >
+    <DialogButton icon={<Plus />} label={t(labels.addPixel)} variant="primary" width="600px">
       {({ close }) => <PixelEditForm teamId={teamId} onClose={close} />}
     </DialogButton>
   );

src/app/(main)/pixels/PixelDeleteButton.tsx

@@ -2,7 +2,6 @@ import { ConfirmationForm } from '@/components/common/ConfirmationForm';
 import { useDeleteQuery, useMessages, useModified } from '@/components/hooks';
 import { Trash } from '@/components/icons';
 import { DialogButton } from '@/components/input/DialogButton';
-import { messages } from '@/components/messages';
 
 export function PixelDeleteButton({
   pixelId,
@@ -13,7 +12,7 @@ export function PixelDeleteButton({
   name: string;
   onSave?: () => void;
 }) {
-  const { formatMessage, labels, getErrorMessage, FormattedMessage } = useMessages();
+  const { t, labels, messages, getErrorMessage } = useMessages();
   const { mutateAsync, isPending, error } = useDeleteQuery(`/pixels/${pixelId}`);
   const { touch } = useModified();
 
@@ -28,27 +27,18 @@ export function PixelDeleteButton({
   };
 
   return (
-    <DialogButton
-      icon={<Trash />}
-      variant="quiet"
-      title={formatMessage(labels.confirm)}
-      width="400px"
-    >
+    <DialogButton icon={<Trash />} variant="quiet" title={t(labels.confirm)} width="400px">
       {({ close }) => (
         <ConfirmationForm
-          message={
-            <FormattedMessage
-              {...messages.confirmRemove}
-              values={{
-                target: <b>{name}</b>,
-              }}
-            />
-          }
+          message={t.rich(messages.confirmRemove, {
+            target: name,
+            b: chunks => <b>{chunks}</b>,
+          })}
           isLoading={isPending}
           error={getErrorMessage(error)}
           onConfirm={handleConfirm.bind(null, close)}
           onClose={close}
-          buttonLabel={formatMessage(labels.delete)}
+          buttonLabel={t(labels.delete)}
           buttonVariant="danger"
         />
       )}

src/app/(main)/pixels/PixelEditButton.tsx

@@ -4,15 +4,10 @@ import { DialogButton } from '@/components/input/DialogButton';
 import { PixelEditForm } from './PixelEditForm';
 
 export function PixelEditButton({ pixelId }: { pixelId: string }) {
-  const { formatMessage, labels } = useMessages();
+  const { t, labels } = useMessages();
 
   return (
-    <DialogButton
-      icon={<Edit />}
-      title={formatMessage(labels.addPixel)}
-      variant="quiet"
-      width="600px"
-    >
+    <DialogButton icon={<Edit />} title={t(labels.addPixel)} variant="quiet" width="600px">
       {({ close }) => {
         return <PixelEditForm pixelId={pixelId} onClose={close} />;
       }}

src/app/(main)/pixels/PixelEditForm.tsx

@@ -30,7 +30,7 @@ export function PixelEditForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
+  const { t, labels, messages, getErrorMessage } = useMessages();
   const { mutateAsync, error, isPending, touch, toast } = useUpdateQuery(
     pixelId ? `/pixels/${pixelId}` : '/pixels',
     {
@@ -46,7 +46,7 @@ export function PixelEditForm({
   const handleSubmit = async (data: any) => {
     await mutateAsync(data, {
       onSuccess: async () => {
-        toast(formatMessage(messages.saved));
+        toast(t(messages.saved));
         touch('pixels');
         touch(`pixel:${pixelId}`);
         onSave?.();
@@ -78,18 +78,14 @@ export function PixelEditForm({
       {({ setValue }) => {
         return (
           <>
-            <FormField
-              label={formatMessage(labels.name)}
-              name="name"
-              rules={{ required: formatMessage(labels.required) }}
-            >
+            <FormField label={t(labels.name)} name="name" rules={{ required: t(labels.required) }}>
               <TextField autoComplete="off" />
             </FormField>
 
             <FormField
               name="slug"
               rules={{
-                required: formatMessage(labels.required),
+                required: t(labels.required),
               }}
               style={{ display: 'none' }}
             >
@@ -97,7 +93,7 @@ export function PixelEditForm({
             </FormField>
 
             <Column>
-              <Label>{formatMessage(labels.link)}</Label>
+              <Label>{t(labels.link)}</Label>
               <Row alignItems="center" gap>
                 <TextField
                   value={`${hostUrl}/${slug}`}
@@ -117,10 +113,10 @@ export function PixelEditForm({
             <Row justifyContent="flex-end" paddingTop="3" gap="3">
               {onClose && (
                 <Button isDisabled={isPending} onPress={onClose}>
-                  {formatMessage(labels.cancel)}
+                  {t(labels.cancel)}
                 </Button>
               )}
-              <FormSubmitButton isDisabled={false}>{formatMessage(labels.save)}</FormSubmitButton>
+              <FormSubmitButton isDisabled={false}>{t(labels.save)}</FormSubmitButton>
             </Row>
           </>
         );

src/app/(main)/pixels/PixelsPage.tsx

@@ -10,7 +10,7 @@ import { PixelsDataTable } from './PixelsDataTable';
 
 export function PixelsPage() {
   const { user } = useLoginQuery();
-  const { formatMessage, labels } = useMessages();
+  const { t, labels } = useMessages();
   const { teamId } = useNavigation();
   const { data } = useTeamMembersQuery(teamId);
 
@@ -23,7 +23,7 @@ export function PixelsPage() {
   return (
     <PageBody>
       <Column gap="6" margin="2">
-        <PageHeader title={formatMessage(labels.pixels)}>
+        <PageHeader title={t(labels.pixels)}>
           {showActions && <PixelAddButton teamId={teamId} />}
         </PageHeader>
         <Panel>

src/app/(main)/pixels/PixelsTable.tsx

@@ -11,13 +11,13 @@ export interface PixelsTableProps extends DataTableProps {
 }
 
 export function PixelsTable({ showActions, ...props }: PixelsTableProps) {
-  const { formatMessage, labels } = useMessages();
+  const { t, labels } = useMessages();
   const { renderUrl } = useNavigation();
   const { getSlugUrl } = useSlug('pixel');
 
   return (
     <DataTable {...props}>
-      <DataColumn id="name" label={formatMessage(labels.name)}>
+      <DataColumn id="name" label={t(labels.name)}>
         {({ id, name }: any) => {
           return <Link href={renderUrl(`/pixels/${id}`)}>{name}</Link>;
         }}
@@ -32,7 +32,7 @@ export function PixelsTable({ showActions, ...props }: PixelsTableProps) {
           );
         }}
       </DataColumn>
-      <DataColumn id="created" label={formatMessage(labels.created)}>
+      <DataColumn id="created" label={t(labels.created)}>
         {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
       </DataColumn>
       {showActions && (

src/app/(main)/pixels/[pixelId]/PixelHeader.tsx

@@ -5,14 +5,14 @@ import { useMessages, usePixel, useSlug } from '@/components/hooks';
 import { ExternalLink, Grid2x2 } from '@/components/icons';
 
 export function PixelHeader() {
-  const { formatMessage, labels } = useMessages();
+  const { t, labels } = useMessages();
   const { getSlugUrl } = useSlug('pixel');
   const pixel = usePixel();
 
   return (
     <PageHeader title={pixel.name} icon={<Grid2x2 />}>
       <LinkButton href={getSlugUrl(pixel.slug)} target="_blank" prefetch={false} asAnchor>
-        <IconLabel icon={<ExternalLink />} label={formatMessage(labels.view)} />
+        <IconLabel icon={<ExternalLink />} label={t(labels.view)} />
       </LinkButton>
     </PageHeader>
   );

src/app/(main)/pixels/[pixelId]/PixelMetricsBar.tsx

@@ -13,7 +13,7 @@ export function PixelMetricsBar({
   compareMode?: boolean;
 }) {
   const { isAllTime } = useDateRange();
-  const { formatMessage, labels } = useMessages();
+  const { t, labels } = useMessages();
   const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(pixelId);
 
   const { pageviews, visitors, visits, comparison } = data || {};
@@ -22,19 +22,19 @@ export function PixelMetricsBar({
     ? [
         {
           value: visitors,
-          label: formatMessage(labels.visitors),
+          label: t(labels.visitors),
           change: visitors - comparison.visitors,
           formatValue: formatLongNumber,
         },
         {
           value: visits,
-          label: formatMessage(labels.visits),
+          label: t(labels.visits),
           change: visits - comparison.visits,
           formatValue: formatLongNumber,
         },
         {
           value: pageviews,
-          label: formatMessage(labels.views),
+          label: t(labels.views),
           change: pageviews - comparison.pageviews,
           formatValue: formatLongNumber,
         },

src/app/(main)/pixels/[pixelId]/PixelPanels.tsx

@@ -6,13 +6,13 @@ import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { WorldMap } from '@/components/metrics/WorldMap';
 
 export function PixelPanels({ pixelId }: { pixelId: string }) {
-  const { formatMessage, labels } = useMessages();
+  const { t, labels } = useMessages();
   const tableProps = {
     websiteId: pixelId,
     limit: 10,
     allowDownload: false,
     showMore: true,
-    metric: formatMessage(labels.visitors),
+    metric: t(labels.visitors),
   };
   const rowProps = { minHeight: 570 };
 
@@ -20,36 +20,36 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
     <Grid gap="3">
       <GridRow layout="two" {...rowProps}>
         <Panel>
-          <Heading size="2xl">{formatMessage(labels.sources)}</Heading>
+          <Heading size="2xl">{t(labels.sources)}</Heading>
           <Tabs>
             <TabList>
-              <Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
-              <Tab id="channel">{formatMessage(labels.channels)}</Tab>
+              <Tab id="referrer">{t(labels.referrers)}</Tab>
+              <Tab id="channel">{t(labels.channels)}</Tab>
             </TabList>
             <TabPanel id="referrer">
-              <MetricsTable type="referrer" title={formatMessage(labels.domain)} {...tableProps} />
+              <MetricsTable type="referrer" title={t(labels.domain)} {...tableProps} />
             </TabPanel>
             <TabPanel id="channel">
-              <MetricsTable type="channel" title={formatMessage(labels.type)} {...tableProps} />
+              <MetricsTable type="channel" title={t(labels.type)} {...tableProps} />
             </TabPanel>
           </Tabs>
         </Panel>
         <Panel>
-          <Heading size="2xl">{formatMessage(labels.environment)}</Heading>
+          <Heading size="2xl">{t(labels.environment)}</Heading>
           <Tabs>
             <TabList>
-              <Tab id="browser">{formatMessage(labels.browsers)}</Tab>
-              <Tab id="os">{formatMessage(labels.os)}</Tab>
-              <Tab id="device">{formatMessage(labels.devices)}</Tab>
+              <Tab id="browser">{t(labels.browsers)}</Tab>
+              <Tab id="os">{t(labels.os)}</Tab>
+              <Tab id="device">{t(labels.devices)}</Tab>
             </TabList>
             <TabPanel id="browser">
-              <MetricsTable type="browser" title={formatMessage(labels.browser)} {...tableProps} />
+              <MetricsTable type="browser" title={t(labels.browser)} {...tableProps} />
             </TabPanel>
             <TabPanel id="os">
-              <MetricsTable type="os" title={formatMessage(labels.os)} {...tableProps} />
+              <MetricsTable type="os" title={t(labels.os)} {...tableProps} />
             </TabPanel>
             <TabPanel id="device">
-              <MetricsTable type="device" title={formatMessage(labels.device)} {...tableProps} />
+              <MetricsTable type="device" title={t(labels.device)} {...tableProps} />
             </TabPanel>
           </Tabs>
         </Panel>
@@ -59,21 +59,21 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
           <WorldMap websiteId={pixelId} />
         </Panel>
         <Panel>
-          <Heading size="2xl">{formatMessage(labels.location)}</Heading>
+          <Heading size="2xl">{t(labels.location)}</Heading>
           <Tabs>
             <TabList>
-              <Tab id="country">{formatMessage(labels.countries)}</Tab>
-              <Tab id="region">{formatMessage(labels.regions)}</Tab>
-              <Tab id="city">{formatMessage(labels.cities)}</Tab>
+              <Tab id="country">{t(labels.countries)}</Tab>
+              <Tab id="region">{t(labels.regions)}</Tab>
+              <Tab id="city">{t(labels.cities)}</Tab>
             </TabList>
             <TabPanel id="country">
-              <MetricsTable type="country" title={formatMessage(labels.country)} {...tableProps} />
+              <MetricsTable type="country" title={t(labels.country)} {...tableProps} />
             </TabPanel>
             <TabPanel id="region">
-              <MetricsTable type="region" title={formatMessage(labels.region)} {...tableProps} />
+              <MetricsTable type="region" title={t(labels.region)} {...tableProps} />
             </TabPanel>
             <TabPanel id="city">
-              <MetricsTable type="city" title={formatMessage(labels.city)} {...tableProps} />
+              <MetricsTable type="city" title={t(labels.city)} {...tableProps} />
             </TabPanel>
           </Tabs>
         </Panel>