From af3d777efab9befc06f9f372815e457a1535533b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sat, 7 Mar 2026 10:56:53 +0100
Subject: [PATCH] nicolium: prefer FormattedMessage for i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/components/ui/multiselect.tsx         |   7 +-
 .../compose/components/language-dropdown.tsx  |   9 +-
 .../compose/editor/nodes/image-component.tsx  |   7 +-
 .../list-editor-modal/components/search.tsx   |   6 +-
 .../src/modals/report-modal/index.tsx         |  34 ++---
 .../src/pages/groups/manage-group.tsx         |  61 +++++---
 .../nicolium/src/pages/settings/aliases.tsx   |   5 +-
 .../src/pages/settings/auth-token-list.tsx    |  21 +--
 .../nicolium/src/pages/settings/settings.tsx  | 143 +++++++++++-------
 9 files changed, 178 insertions(+), 115 deletions(-)

diff --git a/packages/nicolium/src/components/ui/multiselect.tsx b/packages/nicolium/src/components/ui/multiselect.tsx
index 29f37652d..1ad963c91 100644
--- a/packages/nicolium/src/components/ui/multiselect.tsx
+++ b/packages/nicolium/src/components/ui/multiselect.tsx
@@ -25,13 +25,12 @@ THE SOFTWARE.
 
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import Icon from './icon';
 
 const messages = defineMessages({
   placeholder: { id: 'select.placeholder', defaultMessage: 'Select' },
-  noOptions: { id: 'select.no_options', defaultMessage: 'No options available' },
   removeItem: { id: 'select.remove_item', defaultMessage: 'Remove item' },
 });
 
@@ -261,7 +260,9 @@ const Multiselect: React.FC<IMultiselect> = ({
         >
           <ul className='optionContainer'>
             {visibleOptions.length === 0 && (
-              <span className='notFound'>{intl.formatMessage(messages.noOptions)}</span>
+              <span className='notFound'>
+                <FormattedMessage id='select.no_options' defaultMessage='No options available' />
+              </span>
             )}
             {visibleOptions.map((option, i) => (
               <li
diff --git a/packages/nicolium/src/features/compose/components/language-dropdown.tsx b/packages/nicolium/src/features/compose/components/language-dropdown.tsx
index 995e0a6b7..843b74fbe 100644
--- a/packages/nicolium/src/features/compose/components/language-dropdown.tsx
+++ b/packages/nicolium/src/features/compose/components/language-dropdown.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import fuzzysort from 'fuzzysort';
 import React, { useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import DropdownMenu from '@/components/dropdown-menu';
 import Icon from '@/components/ui/icon';
@@ -184,7 +184,12 @@ const getLanguageDropdown =
     return (
       <>
         <label className='⁂-language-dropdown__search'>
-          <span>{intl.formatMessage(messages.search)}</span>
+          <span>
+            <FormattedMessage
+              id='compose.language_dropdown.search'
+              defaultMessage='Search language…'
+            />
+          </span>
 
           <Input
             ref={input}
diff --git a/packages/nicolium/src/features/compose/editor/nodes/image-component.tsx b/packages/nicolium/src/features/compose/editor/nodes/image-component.tsx
index 7ab4d8ed1..c99906be4 100644
--- a/packages/nicolium/src/features/compose/editor/nodes/image-component.tsx
+++ b/packages/nicolium/src/features/compose/editor/nodes/image-component.tsx
@@ -326,7 +326,12 @@ const ImageComponent = ({
             )}
           >
             <label>
-              <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
+              <span className='sr-only'>
+                <FormattedMessage
+                  id='upload_form.description'
+                  defaultMessage='Describe for the visually impaired'
+                />
+              </span>
 
               <textarea
                 className='m-0 w-full rounded-md border border-solid border-white/25 bg-transparent p-2.5 text-sm text-white placeholder:text-white/60'
diff --git a/packages/nicolium/src/modals/list-editor-modal/components/search.tsx b/packages/nicolium/src/modals/list-editor-modal/components/search.tsx
index f598f7060..4c201985c 100644
--- a/packages/nicolium/src/modals/list-editor-modal/components/search.tsx
+++ b/packages/nicolium/src/modals/list-editor-modal/components/search.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import Icon from '@/components/icon';
 import Button from '@/components/ui/button';
@@ -60,7 +60,9 @@ const Search: React.FC<ISearch> = ({ value, onSubmit }) => {
           </div>
         </label>
 
-        <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
+        <Button onClick={handleSubmit}>
+          <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
+        </Button>
       </HStack>
     </Form>
   );
diff --git a/packages/nicolium/src/modals/report-modal/index.tsx b/packages/nicolium/src/modals/report-modal/index.tsx
index 304dd577b..4774b6173 100644
--- a/packages/nicolium/src/modals/report-modal/index.tsx
+++ b/packages/nicolium/src/modals/report-modal/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import { submitReport, ReportableEntities } from '@/actions/reports';
 import AttachmentThumbs from '@/components/media/attachment-thumbs';
@@ -22,18 +22,6 @@ import ReasonStep from './steps/reason-step';
 
 import type { BaseModalProps } from '@/features/ui/components/modal-root';
 
-const messages = defineMessages({
-  blankslate: {
-    id: 'report.reason.blankslate',
-    defaultMessage: 'You have removed all statuses from being selected.',
-  },
-  done: { id: 'report.done', defaultMessage: 'Done' },
-  next: { id: 'report.next', defaultMessage: 'Next' },
-  submit: { id: 'report.submit', defaultMessage: 'Submit' },
-  cancel: { id: 'common.cancel', defaultMessage: 'Cancel' },
-  previous: { id: 'report.previous', defaultMessage: 'Previous' },
-});
-
 enum Steps {
   ONE = 'ONE',
   TWO = 'TWO',
@@ -83,7 +71,6 @@ const ReportModal: React.FC<BaseModalProps & ReportModalProps> = ({
   statusIds,
 }) => {
   const dispatch = useAppDispatch();
-  const intl = useIntl();
 
   const { data: account } = useAccount(accountId || undefined);
 
@@ -126,7 +113,12 @@ const ReportModal: React.FC<BaseModalProps & ReportModalProps> = ({
       case 0:
         return (
           <div className='flex w-full items-center justify-center rounded-lg bg-gray-100 p-4 dark:bg-gray-800'>
-            <Text theme='muted'>{intl.formatMessage(messages.blankslate)}</Text>
+            <Text theme='muted'>
+              <FormattedMessage
+                id='report.reason.blankslate'
+                defaultMessage='You have removed all statuses from being selected.'
+              />
+            </Text>
           </div>
         );
       default:
@@ -137,9 +129,9 @@ const ReportModal: React.FC<BaseModalProps & ReportModalProps> = ({
   const cancelText = useMemo(() => {
     switch (currentStep) {
       case Steps.ONE:
-        return intl.formatMessage(messages.cancel);
+        return <FormattedMessage id='common.cancel' defaultMessage='Cancel' />;
       default:
-        return intl.formatMessage(messages.previous);
+        return <FormattedMessage id='report.previous' defaultMessage='Previous' />;
     }
   }, [currentStep]);
 
@@ -159,13 +151,13 @@ const ReportModal: React.FC<BaseModalProps & ReportModalProps> = ({
   const confirmationText = useMemo(() => {
     switch (currentStep) {
       case Steps.ONE:
-        return intl.formatMessage(messages.next);
+        return <FormattedMessage id='report.next' defaultMessage='Next' />;
       case Steps.TWO:
-        return intl.formatMessage(messages.submit);
+        return <FormattedMessage id='report.submit' defaultMessage='Submit' />;
       case Steps.THREE:
-        return intl.formatMessage(messages.done);
+        return <FormattedMessage id='report.done' defaultMessage='Done' />;
       default:
-        return intl.formatMessage(messages.next);
+        return <FormattedMessage id='report.next' defaultMessage='Next' />;
     }
   }, [currentStep]);
 
diff --git a/packages/nicolium/src/pages/groups/manage-group.tsx b/packages/nicolium/src/pages/groups/manage-group.tsx
index c1ea5ffe5..69f2d9a80 100644
--- a/packages/nicolium/src/pages/groups/manage-group.tsx
+++ b/packages/nicolium/src/pages/groups/manage-group.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from '@tanstack/react-router';
 import { GroupRoles } from 'pl-api';
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import List, { ListItem } from '@/components/list';
 import { CardBody, CardHeader, CardTitle } from '@/components/ui/card';
@@ -17,19 +17,7 @@ import toast from '@/toast';
 
 const messages = defineMessages({
   heading: { id: 'column.manage_group', defaultMessage: 'Manage group' },
-  editGroup: { id: 'manage_group.edit_group', defaultMessage: 'Edit group' },
-  pendingRequests: { id: 'manage_group.pending_requests', defaultMessage: 'Pending requests' },
-  blockedMembers: { id: 'manage_group.blocked_members', defaultMessage: 'Banned members' },
-  deleteGroup: { id: 'manage_group.delete_group', defaultMessage: 'Delete group' },
-  deleteConfirm: { id: 'confirmations.delete_group.confirm', defaultMessage: 'Delete' },
   deleteHeading: { id: 'confirmations.delete_group.heading', defaultMessage: 'Delete group' },
-  deleteMessage: {
-    id: 'confirmations.delete_group.message',
-    defaultMessage:
-      'Are you sure you want to delete this group? This is a permanent action that cannot be undone.',
-  },
-  members: { id: 'group.tabs.members', defaultMessage: 'Members' },
-  other: { id: 'settings.other', defaultMessage: 'Other options' },
   deleteSuccess: { id: 'group.delete.success', defaultMessage: 'Group successfully deleted' },
 });
 
@@ -64,8 +52,13 @@ const ManageGroup: React.FC = () => {
   const onDeleteGroup = () => {
     openModal('CONFIRM', {
       heading: intl.formatMessage(messages.deleteHeading),
-      message: intl.formatMessage(messages.deleteMessage),
-      confirm: intl.formatMessage(messages.deleteConfirm),
+      message: (
+        <FormattedMessage
+          id='confirmations.delete_group.message'
+          defaultMessage='Are you sure you want to delete this group? This is a permanent action that cannot be undone.'
+        />
+      ),
+      confirm: <FormattedMessage id='confirmations.delete_group.confirm' defaultMessage='Delete' />,
       onConfirm: () => {
         deleteGroup(undefined, {
           onSuccess() {
@@ -87,12 +80,18 @@ const ManageGroup: React.FC = () => {
         {isOwner && (
           <>
             <CardHeader>
-              <CardTitle title={intl.formatMessage(messages.editGroup)} />
+              <CardTitle
+                title={
+                  <FormattedMessage id='manage_group.edit_group' defaultMessage='Edit group' />
+                }
+              />
             </CardHeader>
 
             <List>
               <ListItem
-                label={intl.formatMessage(messages.editGroup)}
+                label={
+                  <FormattedMessage id='manage_group.edit_group' defaultMessage='Edit group' />
+                }
                 to='/groups/$groupId/manage/edit'
                 params={{ groupId: group.id }}
               >
@@ -105,18 +104,27 @@ const ManageGroup: React.FC = () => {
         )}
 
         <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.members)} />
+          <CardTitle
+            title={<FormattedMessage id='group.tabs.members' defaultMessage='Members' />}
+          />
         </CardHeader>
 
         <List>
           <ListItem
-            label={intl.formatMessage(messages.pendingRequests)}
+            label={
+              <FormattedMessage
+                id='manage_group.pending_requests'
+                defaultMessage='Pending requests'
+              />
+            }
             to='/groups/$groupId/manage/requests'
             params={{ groupId: group.id }}
           />
 
           <ListItem
-            label={intl.formatMessage(messages.blockedMembers)}
+            label={
+              <FormattedMessage id='manage_group.blocked_members' defaultMessage='Banned members' />
+            }
             to='/groups/$groupId/manage/blocks'
             params={{ groupId: group.id }}
           />
@@ -125,12 +133,21 @@ const ManageGroup: React.FC = () => {
         {isOwner && (
           <>
             <CardHeader>
-              <CardTitle title={intl.formatMessage(messages.other)} />
+              <CardTitle
+                title={<FormattedMessage id='settings.other' defaultMessage='Other options' />}
+              />
             </CardHeader>
 
             <List>
               <ListItem
-                label={<Text theme='danger'>{intl.formatMessage(messages.deleteGroup)}</Text>}
+                label={
+                  <Text theme='danger'>
+                    <FormattedMessage
+                      id='manage_group.delete_group'
+                      defaultMessage='Delete group'
+                    />
+                  </Text>
+                }
                 onClick={onDeleteGroup}
               />
             </List>
diff --git a/packages/nicolium/src/pages/settings/aliases.tsx b/packages/nicolium/src/pages/settings/aliases.tsx
index 1ce5a1a90..e667fc689 100644
--- a/packages/nicolium/src/pages/settings/aliases.tsx
+++ b/packages/nicolium/src/pages/settings/aliases.tsx
@@ -26,7 +26,6 @@ const messages = defineMessages({
   delete: { id: 'column.aliases.delete', defaultMessage: 'Delete' },
   add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
   search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
-  searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
   clear: { id: 'search.clear', defaultMessage: 'Clear input' },
 });
 
@@ -133,7 +132,9 @@ const Search: React.FC<IAliasesSearch> = ({ onSubmit }) => {
           />
         </button>
       </label>
-      <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
+      <Button onClick={handleSubmit}>
+        <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
+      </Button>
     </div>
   );
 };
diff --git a/packages/nicolium/src/pages/settings/auth-token-list.tsx b/packages/nicolium/src/pages/settings/auth-token-list.tsx
index e7ba3d4d0..8504f9100 100644
--- a/packages/nicolium/src/pages/settings/auth-token-list.tsx
+++ b/packages/nicolium/src/pages/settings/auth-token-list.tsx
@@ -19,16 +19,10 @@ import type { OauthToken } from 'pl-api';
 
 const messages = defineMessages({
   header: { id: 'column.tokens', defaultMessage: 'Active sessions' },
-  revoke: { id: 'security.tokens.revoke', defaultMessage: 'Revoke' },
   revokeSessionHeading: {
     id: 'confirmations.revoke_session.heading',
     defaultMessage: 'Revoke current session',
   },
-  revokeSessionMessage: {
-    id: 'confirmations.revoke_session.message',
-    defaultMessage: 'You are about to revoke your current session. You will be signed out.',
-  },
-  revokeSessionConfirm: { id: 'confirmations.revoke_session.confirm', defaultMessage: 'Revoke' },
 });
 
 interface IAuthToken {
@@ -47,8 +41,15 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
     if (isCurrent)
       openModal('CONFIRM', {
         heading: intl.formatMessage(messages.revokeSessionHeading),
-        message: intl.formatMessage(messages.revokeSessionMessage),
-        confirm: intl.formatMessage(messages.revokeSessionConfirm),
+        message: (
+          <FormattedMessage
+            id='confirmations.revoke_session.message'
+            defaultMessage='You are about to revoke your current session. You will be signed out.'
+          />
+        ),
+        confirm: (
+          <FormattedMessage id='confirmations.revoke_session.confirm' defaultMessage='Revoke' />
+        ),
         onConfirm: () => {
           revokeMutation.mutate();
         },
@@ -144,7 +145,9 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
         )}
       </div>
       <div className={clsx('⁂-token__actions')}>
-        <button onClick={handleRevoke}>{intl.formatMessage(messages.revoke)}</button>
+        <button onClick={handleRevoke}>
+          <FormattedMessage id='security.tokens.revoke' defaultMessage='Revoke' />
+        </button>
       </div>
     </div>
   );
diff --git a/packages/nicolium/src/pages/settings/settings.tsx b/packages/nicolium/src/pages/settings/settings.tsx
index 56180e6ef..3249a6437 100644
--- a/packages/nicolium/src/pages/settings/settings.tsx
+++ b/packages/nicolium/src/pages/settings/settings.tsx
@@ -12,35 +12,7 @@ import { useOwnAccount } from '@/hooks/use-own-account';
 import { useMfaConfig } from '@/queries/security/use-mfa';
 
 const messages = defineMessages({
-  accountAliases: { id: 'column.aliases', defaultMessage: 'Account aliases' },
-  accountMigration: { id: 'column.migration', defaultMessage: 'Move account' },
-  backups: { id: 'column.backups', defaultMessage: 'Backups' },
-  blocks: { id: 'column.blocks', defaultMessage: 'Blocks' },
-  changeEmail: { id: 'column.change_email', defaultMessage: 'Change email' },
-  changePassword: { id: 'column.change_password', defaultMessage: 'Change password' },
-  configureMfa: { id: 'settings.configure_mfa', defaultMessage: 'Configure MFA' },
-  deleteAccount: { id: 'column.delete_account', defaultMessage: 'Delete account' },
-  developers: { id: 'column.developers', defaultMessage: 'Developers' },
-  domainBlocks: { id: 'column.domain_blocks', defaultMessage: 'Domain blocks' },
-  editProfile: { id: 'settings.edit_profile', defaultMessage: 'Edit profile' },
-  exportData: { id: 'column.export_data', defaultMessage: 'Export data' },
-  filters: { id: 'column.filters', defaultMessage: 'Muted words' },
-  importData: { id: 'column.import_data', defaultMessage: 'Import data' },
-  interactionPolicies: {
-    id: 'column.interaction_policies',
-    defaultMessage: 'Interaction policies',
-  },
-  mfaDisabled: { id: 'mfa.disabled', defaultMessage: 'Disabled' },
-  mfaEnabled: { id: 'mfa.enabled', defaultMessage: 'Enabled' },
-  mutes: { id: 'column.mutes', defaultMessage: 'Mutes' },
-  mutesAndBlocks: { id: 'settings.mutes_blocks', defaultMessage: 'Mutes and blocks' },
-  other: { id: 'settings.other', defaultMessage: 'Other options' },
-  preferences: { id: 'column.preferences', defaultMessage: 'Preferences' },
-  profile: { id: 'settings.profile', defaultMessage: 'Profile' },
-  security: { id: 'settings.security', defaultMessage: 'Security' },
-  sessions: { id: 'column.tokens', defaultMessage: 'Active sessions' },
   settings: { id: 'settings.settings', defaultMessage: 'Settings' },
-  privacy: { id: 'column.privacy', defaultMessage: 'Privacy' },
 });
 
 /** User settings page. */
@@ -61,34 +33,60 @@ const SettingsPage = () => {
     <Column label={intl.formatMessage(messages.settings)} transparent withHeader={false}>
       <Card className='space-y-4' variant='rounded'>
         <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.profile)} />
+          <CardTitle title={<FormattedMessage id='settings.profile' defaultMessage='Profile' />} />
         </CardHeader>
 
         <CardBody>
           <List>
-            <ListItem label={intl.formatMessage(messages.editProfile)} to='/settings/profile'>
+            <ListItem
+              label={<FormattedMessage id='settings.edit_profile' defaultMessage='Edit profile' />}
+              to='/settings/profile'
+            >
               <span className='max-w-full truncate'>{displayName}</span>
             </ListItem>
           </List>
         </CardBody>
 
         <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.mutesAndBlocks)} />
+          <CardTitle
+            title={
+              <FormattedMessage id='settings.mutes_blocks' defaultMessage='Mutes and blocks' />
+            }
+          />
         </CardHeader>
 
         <CardBody>
           <List>
-            <ListItem label={intl.formatMessage(messages.mutes)} to='/mutes' />
-            <ListItem label={intl.formatMessage(messages.blocks)} to='/blocks' />
+            <ListItem
+              label={<FormattedMessage id='column.mutes' defaultMessage='Mutes' />}
+              to='/mutes'
+            />
+            <ListItem
+              label={<FormattedMessage id='column.blocks' defaultMessage='Blocks' />}
+              to='/blocks'
+            />
             {(features.filters || features.filtersV2) && (
-              <ListItem label={intl.formatMessage(messages.filters)} to='/filters' />
+              <ListItem
+                label={<FormattedMessage id='column.filters' defaultMessage='Muted words' />}
+                to='/filters'
+              />
             )}
             {features.federating && (
-              <ListItem label={intl.formatMessage(messages.domainBlocks)} to='/domain_blocks' />
+              <ListItem
+                label={
+                  <FormattedMessage id='column.domain_blocks' defaultMessage='Domain blocks' />
+                }
+                to='/domain_blocks'
+              />
             )}
             {(features.interactionRequests || features.quoteApprovalPolicies) && (
               <ListItem
-                label={intl.formatMessage(messages.interactionPolicies)}
+                label={
+                  <FormattedMessage
+                    id='column.interaction_policies'
+                    defaultMessage='Interaction policies'
+                  />
+                }
                 to='/settings/interaction_policies'
               />
             )}
@@ -96,33 +94,50 @@ const SettingsPage = () => {
         </CardBody>
 
         <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.security)} />
+          <CardTitle
+            title={<FormattedMessage id='settings.security' defaultMessage='Security' />}
+          />
         </CardHeader>
 
         <CardBody>
           <List>
             {features.changeEmail && (
-              <ListItem label={intl.formatMessage(messages.changeEmail)} to='/settings/email' />
+              <ListItem
+                label={<FormattedMessage id='column.change_email' defaultMessage='Change email' />}
+                to='/settings/email'
+              />
             )}
             {features.changePassword && (
               <ListItem
-                label={intl.formatMessage(messages.changePassword)}
+                label={
+                  <FormattedMessage id='column.change_password' defaultMessage='Change password' />
+                }
                 to='/settings/password'
               />
             )}
             {features.manageMfa && (
               <>
-                <ListItem label={intl.formatMessage(messages.configureMfa)} to='/settings/mfa'>
+                <ListItem
+                  label={
+                    <FormattedMessage id='settings.configure_mfa' defaultMessage='Configure MFA' />
+                  }
+                  to='/settings/mfa'
+                >
                   <span>
-                    {isMfaEnabled
-                      ? intl.formatMessage(messages.mfaEnabled)
-                      : intl.formatMessage(messages.mfaDisabled)}
+                    {isMfaEnabled ? (
+                      <FormattedMessage id='mfa.enabled' defaultMessage='Enabled' />
+                    ) : (
+                      <FormattedMessage id='mfa.disabled' defaultMessage='Disabled' />
+                    )}
                   </span>
                 </ListItem>
               </>
             )}
             {features.sessions && (
-              <ListItem label={intl.formatMessage(messages.sessions)} to='/settings/tokens' />
+              <ListItem
+                label={<FormattedMessage id='column.tokens' defaultMessage='Active sessions' />}
+                to='/settings/tokens'
+              />
             )}
             <ListItem
               label={<FormattedMessage id='settings.privacy' defaultMessage='Privacy' />}
@@ -144,7 +159,9 @@ const SettingsPage = () => {
         ) : null}
 
         <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.preferences)} />
+          <CardTitle
+            title={<FormattedMessage id='column.preferences' defaultMessage='Preferences' />}
+          />
         </CardHeader>
 
         <CardBody>
@@ -152,33 +169,49 @@ const SettingsPage = () => {
         </CardBody>
 
         <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.other)} />
+          <CardTitle
+            title={<FormattedMessage id='settings.other' defaultMessage='Other options' />}
+          />
         </CardHeader>
 
         <CardBody>
           <List>
             {(features.importBlocks || features.importFollows || features.importMutes) && (
-              <ListItem label={intl.formatMessage(messages.importData)} to='/settings/import' />
+              <ListItem
+                label={<FormattedMessage id='column.import_data' defaultMessage='Import data' />}
+                to='/settings/import'
+              />
             )}
 
-            <ListItem label={intl.formatMessage(messages.exportData)} to='/settings/export' />
+            <ListItem
+              label={<FormattedMessage id='column.export_data' defaultMessage='Export data' />}
+              to='/settings/export'
+            />
 
             {features.accountBackups && (
-              <ListItem label={intl.formatMessage(messages.backups)} to='/settings/backups' />
+              <ListItem
+                label={<FormattedMessage id='column.backups' defaultMessage='Backups' />}
+                to='/settings/backups'
+              />
             )}
 
-            <ListItem label={intl.formatMessage(messages.developers)} to='/developers' />
+            <ListItem
+              label={<FormattedMessage id='column.developers' defaultMessage='Developers' />}
+              to='/developers'
+            />
 
             {features.federating &&
               (features.accountMoving ? (
                 <ListItem
-                  label={intl.formatMessage(messages.accountMigration)}
+                  label={<FormattedMessage id='column.migration' defaultMessage='Move account' />}
                   to='/settings/migration'
                 />
               ) : (
                 features.manageAccountAliases && (
                   <ListItem
-                    label={intl.formatMessage(messages.accountAliases)}
+                    label={
+                      <FormattedMessage id='column.aliases' defaultMessage='Account aliases' />
+                    }
                     to='/settings/aliases'
                   />
                 )
@@ -186,7 +219,11 @@ const SettingsPage = () => {
 
             {(features.deleteAccount || features.deleteAccountWithoutPassword) && (
               <ListItem
-                label={<Text theme='danger'>{intl.formatMessage(messages.deleteAccount)}</Text>}
+                label={
+                  <Text theme='danger'>
+                    <FormattedMessage id='column.delete_account' defaultMessage='Delete account' />
+                  </Text>
+                }
                 to='/settings/account'
               />
             )}