Merge commit 'b2aa476abbe82e2b49d84c9fb8ef654f95391fd3' into glitch-soc/merge-upstream

app/javascript/mastodon/components/account_header/buttons.tsx

@@ -3,8 +3,6 @@ import type { FC } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import classNames from 'classnames';
-
 import { followAccount } from '@/mastodon/actions/accounts';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { getAccountHidden } from '@/mastodon/selectors/accounts';
@@ -18,6 +16,7 @@ import { FollowButton } from '../follow_button';
 import { IconButton } from '../icon_button';
 
 import { AccountMenu } from './menu';
+import classes from './styles.module.scss';
 
 const messages = defineMessages({
   enableNotifications: {
@@ -49,7 +48,7 @@ export const AccountButtons: FC<AccountButtonsProps> = ({
   const me = useAppSelector((state) => state.meta.get('me') as string);
 
   return (
-    <div className={classNames('account__header__buttons', className)}>
+    <div className={className}>
       {!hidden && (
         <AccountButtonsOther accountId={accountId} noShare={noShare} />
       )}
@@ -94,7 +93,7 @@ const AccountButtonsOther: FC<
       {!isMovedAndUnfollowedAccount && (
         <FollowButton
           accountId={accountId}
-          className='account__header__follow-button'
+          className={classes.followButton}
           labelLength='long'
         />
       )}

app/javascript/mastodon/components/account_header/fields.tsx

@@ -108,11 +108,9 @@ const FieldCard: FC<{
 }> = ({ htmlHandlers, field }) => {
   const intl = useIntl();
   const {
-    name,
     name_emojified,
     nameHasEmojis,
     value_emojified,
-    value_plain,
     valueHasEmojis,
     verified_at,
   } = field;
@@ -138,8 +136,7 @@ const FieldCard: FC<{
       )}
       label={
         <FieldHTML
-          text={name}
-          textEmojified={name_emojified}
+          text={name_emojified}
           textHasCustomEmoji={nameHasEmojis}
           className='translate'
           isOverflowing={isLabelOverflowing}
@@ -149,8 +146,7 @@ const FieldCard: FC<{
       }
       value={
         <FieldHTML
-          text={value_plain}
-          textEmojified={value_emojified}
+          text={value_emojified}
           textHasCustomEmoji={valueHasEmojis}
           isOverflowing={isValueOverflowing}
           onOverflowClick={handleOverflowClick}
@@ -175,7 +171,6 @@ const FieldCard: FC<{
 
 type FieldHTMLProps = {
   text: string;
-  textEmojified: string;
   textHasCustomEmoji: boolean;
   isOverflowing?: boolean;
   onOverflowClick?: () => void;
@@ -183,9 +178,7 @@ type FieldHTMLProps = {
 
 const FieldHTML: FC<FieldHTMLProps> = ({
   className,
-  extraEmojis,
   text,
-  textEmojified,
   textHasCustomEmoji,
   isOverflowing,
   onOverflowClick,
@@ -198,7 +191,7 @@ const FieldHTML: FC<FieldHTMLProps> = ({
   const html = (
     <EmojiHTML
       as='span'
-      htmlString={textEmojified}
+      htmlString={text}
       className={className}
       onElement={handleElement}
       data-contents

app/javascript/mastodon/components/account_header/index.tsx

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
+
+import { Helmet } from '@unhead/react/helmet';
 
 import { openModal } from '@/mastodon/actions/modal';
 import FollowRequestNoteContainer from '@/mastodon/features/account/containers/follow_request_note_container';
@@ -96,22 +97,20 @@ export const AccountHeader: React.FC<{
   const isMe = me && account.id === me;
 
   return (
-    <div className='account-timeline__header'>
+    <div>
       {!hidden && account.memorial && <MemorialNote />}
       {!hidden && account.moved && (
         <MovedNote accountId={account.id} targetAccountId={account.moved} />
       )}
 
       <AnimateEmojiProvider
-        className={classNames('account__header', {
-          inactive: !!account.moved,
-        })}
+        className={classNames(!!account.moved && classes.moved)}
       >
         {!suspendedOrHidden && !account.moved && relationship?.requested_by && (
           <FollowRequestNoteContainer account={account} />
         )}
 
-        <div className={classNames('account__header__image', classes.header)}>
+        <div className={classes.header}>
           {!suspendedOrHidden && (
             <img
               src={autoPlayGif ? account.header : account.header_static}
@@ -121,21 +120,16 @@ export const AccountHeader: React.FC<{
           )}
         </div>
 
-        <div className={classNames('account__header__bar', classes.barWrapper)}>
-          <div
-            className={classNames(
-              'account__header__tabs',
-              classes.avatarWrapper,
-            )}
-          >
+        <div className={classes.barWrapper}>
+          <div className={classes.avatarWrapper}>
             <a
-              className='avatar'
               href={account.avatar}
               rel='noopener'
               target='_blank'
               onClick={handleOpenAvatar}
             >
               <Avatar
+                className={classes.avatar}
                 account={suspendedOrHidden ? undefined : account}
                 alt={account.avatar_description}
                 size={80}
@@ -143,12 +137,7 @@ export const AccountHeader: React.FC<{
             </a>
           </div>
 
-          <div
-            className={classNames(
-              'account__header__tabs__name',
-              classes.displayNameWrapper,
-            )}
-          >
+          <div className={classes.displayNameWrapper}>
             <AccountName accountId={accountId} />
             <AccountButtons
               accountId={accountId}
@@ -168,23 +157,16 @@ export const AccountHeader: React.FC<{
           )}
 
           {!suspendedOrHidden && (
-            <div className='account__header__extra'>
-              <div className='account__header__bio'>
-                {me && account.id !== me && (
-                  <AccountNote accountId={accountId} />
-                )}
+            <div className={classes.bioButtonsWrapper}>
+              {me && account.id !== me && <AccountNote accountId={accountId} />}
 
-                <AccountBio
-                  showDropdown
-                  accountId={accountId}
-                  className={classNames(
-                    'account__header__content',
-                    classes.bio,
-                  )}
-                />
+              <AccountBio
+                showDropdown
+                accountId={accountId}
+                className={classes.bio}
+              />
 
-                <AccountHeaderFields accountId={accountId} />
-              </div>
+              <AccountHeaderFields accountId={accountId} />
 
               {!me && account.email_subscriptions && (
                 <AccountSubscriptionForm accountId={accountId} />

app/javascript/mastodon/components/account_header/styles.module.scss

@@ -1,26 +1,79 @@
+.moved {
+  opacity: 0.5;
+}
+
+// Account header
 .header {
   height: 120px;
+  overflow: hidden;
   background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border-primary);
+
+  img {
+    object-fit: cover;
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
 
   @container (width >= 500px) {
     height: 160px;
   }
+
+  :global(.inactive) & {
+    filter: grayscale(100%);
+  }
 }
 
+// Wraps everything except the header image.
 .barWrapper {
-  border-bottom: none;
   padding-inline: 16px;
 }
 
+// Avatar
 .avatarWrapper {
   margin-top: -64px;
   padding-top: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  overflow: hidden;
+  margin-inline-start: -2px; // aligns the pfp with content below
+}
+
+.avatar {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--avatar-border-radius);
+
+  .moved & {
+    filter: grayscale(100%);
+  }
 }
 
 .displayNameWrapper {
   display: flex;
   align-items: start;
   gap: 16px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+
+  h1 {
+    font-size: 17px;
+    line-height: 22px;
+    color: var(--color-text-primary);
+    font-weight: 600;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  :global(.emojione) {
+    width: 22px;
+    height: 22px;
+  }
 }
 
 .nameWrapper {
@@ -112,21 +165,6 @@
   }
 }
 
-$button-breakpoint: 420px;
-$button-fallback-breakpoint: $button-breakpoint + 55px;
-
-.buttonsDesktop {
-  @container (width < #{$button-breakpoint}) {
-    display: none;
-  }
-
-  @supports (not (container-type: inline-size)) {
-    @media (max-width: #{$button-fallback-breakpoint}) {
-      display: none;
-    }
-  }
-}
-
 .handleCopy {
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
@@ -147,6 +185,45 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   }
 }
 
+$button-breakpoint: 420px;
+$button-fallback-breakpoint: $button-breakpoint + 55px;
+
+.buttonsDesktop,
+.buttonsMobile {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  :global(.button) {
+    flex-shrink: 1;
+    white-space: nowrap;
+    min-width: 80px;
+  }
+
+  :global(.icon-button) {
+    border: 1px solid var(--color-border-primary);
+    border-radius: 4px;
+    box-sizing: content-box;
+    padding: 5px;
+
+    &:global(.copied) {
+      border-color: var(--color-text-success);
+    }
+  }
+}
+
+.buttonsDesktop {
+  @container (width < #{$button-breakpoint}) {
+    display: none;
+  }
+
+  @supports (not (container-type: inline-size)) {
+    @media (max-width: #{$button-fallback-breakpoint}) {
+      display: none;
+    }
+  }
+}
+
 .buttonsMobile {
   position: sticky;
   bottom: var(--mobile-bottom-nav-height);
@@ -188,6 +265,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
 
 .bio {
   font-size: 15px;
+  color: var(--color-text-primary);
 }
 
 .familiarFollowers {
@@ -420,3 +498,13 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
     background: var(--color-bg-primary);
   }
 }
+
+// Buttons
+
+.followButton {
+  flex-grow: 1;
+}
+
+.bioButtonsWrapper {
+  margin-top: 16px;
+}

app/javascript/mastodon/components/error_boundary.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import StackTrace from 'stacktrace-js';
 

app/javascript/mastodon/components/hover_card_account.tsx

@@ -154,17 +154,19 @@ export const HoverCardAccount = forwardRef<
                 {(isMutual || isFollower) && (
                   <>
                     &middot;
-                    {isMutual ? (
-                      <FormattedMessage
-                        id='account.mutual'
-                        defaultMessage='You follow each other'
-                      />
-                    ) : (
-                      <FormattedMessage
-                        id='account.follows_you'
-                        defaultMessage='Follows you'
-                      />
-                    )}
+                    <span>
+                      {isMutual ? (
+                        <FormattedMessage
+                          id='account.mutual'
+                          defaultMessage='You follow each other'
+                        />
+                      ) : (
+                        <FormattedMessage
+                          id='account.follows_you'
+                          defaultMessage='Follows you'
+                        />
+                      )}
+                    </span>
                   </>
                 )}
               </div>

app/javascript/mastodon/containers/mastodon.jsx

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { Route } from 'react-router-dom';
 
 import { Provider as ReduxProvider } from 'react-redux';

app/javascript/mastodon/features/about/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';

app/javascript/mastodon/features/account_edit/components/column.tsx

@@ -2,9 +2,10 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import { Column } from '@/mastodon/components/column';
 import { ColumnHeader } from '@/mastodon/components/column_header';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';

app/javascript/mastodon/features/account_featured/index.tsx

@@ -24,6 +24,7 @@ import Column from '@/mastodon/features/ui/components/column';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useAccountId } from '@/mastodon/hooks/useAccountId';
 import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';
+import { me } from '@/mastodon/initial_state';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 
@@ -173,12 +174,14 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
                   defaultMessage='Collections'
                 />
               </h2>
-              <SubheadingLink to='/collections/new' icon={AddIcon}>
-                <FormattedMessage
-                  id='account.featured.new_collection'
-                  defaultMessage='New collection'
-                />
-              </SubheadingLink>
+              {accountId === me && (
+                <SubheadingLink to='/collections/new' icon={AddIcon}>
+                  <FormattedMessage
+                    id='account.featured.new_collection'
+                    defaultMessage='New collection'
+                  />
+                </SubheadingLink>
+              )}
             </Subheading>
             {hasCollections ? (
               <ItemList>

app/javascript/mastodon/features/bookmarked_statuses/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
 import {

app/javascript/mastodon/features/collections/components/collection_menu.tsx

@@ -131,7 +131,7 @@ export const CollectionMenu: React.FC<{
       {
         text: intl.formatMessage(messages.copyLink),
         action: () => {
-          void navigator.clipboard.writeText(getCollectionPath(id));
+          void navigator.clipboard.writeText(collection.url);
           dispatch(showAlert({ message: messages.copyLinkConfirmation }));
         },
       },
@@ -196,13 +196,14 @@ export const CollectionMenu: React.FC<{
     id,
     openShareModal,
     isOwnCollection,
+    collection.url,
     dispatch,
     openDeleteConfirmation,
     context,
     currentAccountInCollection,
     openReportModal,
-    openBlockModal,
     openRevokeConfirmation,
+    openBlockModal,
   ]);
 
   return (

app/javascript/mastodon/features/collections/components/share_modal.tsx

@@ -42,7 +42,7 @@ export const CollectionShareModal: React.FC<{
   const isNew = !!location.state?.newCollection;
   const isOwnCollection = collection.account_id === me;
 
-  const collectionLink = `${window.location.origin}/collections/${collection.id}`;
+  const collectionLink = collection.url;
 
   const handleShareOnDevice = useCallback(() => {
     void navigator.share({

app/javascript/mastodon/features/collections/detail/accounts_list.tsx

@@ -138,12 +138,16 @@ export const CollectionAccountsList: React.FC<{
 
   const renderAccountItemButton = useCallback(
     ({ relationship, accountId }: RenderButtonOptions) => {
+      if (!me || !relationship) {
+        // Show follow button when logged out (it will trigger the remote interaction modal)
+        return <AccountListItemFollowButton accountId={accountId} />;
+      }
+
       // When viewing your own collection, only show the Follow button
       // for accounts you're not following anymore.
       const withoutButton =
-        !relationship ||
-        (collectionOwnerId === me &&
-          (relationship.following || relationship.requested));
+        collectionOwnerId === me &&
+        (relationship.following || relationship.requested);
 
       if (withoutButton) return null;
 

app/javascript/mastodon/features/collections/detail/index.tsx

@@ -2,10 +2,11 @@ import { useCallback, useEffect } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { useHistory, useLocation, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import HelpIcon from '@/material-icons/400-24px/help.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import ShareIcon from '@/material-icons/400-24px/share.svg?react';

app/javascript/mastodon/features/collections/editor/index.tsx

@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import {
   Switch,
   Route,
@@ -12,6 +11,8 @@ import {
   useLocation,
 } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import { Callout } from '@/mastodon/components/callout';
 import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
 import { initialState } from '@/mastodon/initial_state';

app/javascript/mastodon/features/collections/index.tsx

@@ -1,8 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import { TabLink, TabList } from '@/mastodon/components/tab_list';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';

app/javascript/mastodon/features/community_timeline/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { connect } from 'react-redux';
 

app/javascript/mastodon/features/compose/index.tsx

@@ -2,11 +2,12 @@ import { useEffect, useCallback } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import elephantUIPlane from '@/images/elephant_ui_plane.svg';
 import EditIcon from '@/material-icons/400-24px/edit_square.svg?react';
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';

app/javascript/mastodon/features/direct_timeline/index.jsx

@@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { useDispatch } from 'react-redux';
 

app/javascript/mastodon/features/directory/index.tsx

@@ -3,10 +3,10 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
-
 import { List as ImmutableList } from 'immutable';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import {
   addColumn,

app/javascript/mastodon/features/domain_blocks/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback, useState } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
 import { apiGetDomainBlocks } from 'mastodon/api/domain_blocks';

app/javascript/mastodon/features/explore/index.tsx

@@ -2,9 +2,10 @@ import { useCallback, useRef } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { NavLink, Switch, Route } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
 import { Column } from 'mastodon/components/column';
 import type { ColumnRef } from 'mastodon/components/column';

app/javascript/mastodon/features/favourited_statuses/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';

app/javascript/mastodon/features/favourites/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/firehose/index.jsx

@@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
 
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { NavLink } from 'react-router-dom';
 
 import { useIdentity } from '@/mastodon/identity_context';

app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx

@@ -10,11 +10,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 
+import { AccountBio } from '@/mastodon/components/account_bio';
 import { Avatar } from '@/mastodon/components/avatar';
 import { DisplayName } from '@/mastodon/components/display_name';
 import { IconButton } from '@/mastodon/components/icon_button';
 import { injectIntl } from '@/mastodon/components/intl';
-import { EmojiHTML } from '@/mastodon/components/emoji/html';
 
 const messages = defineMessages({
   authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@@ -41,11 +41,7 @@ class AccountAuthorize extends ImmutablePureComponent {
             <DisplayName account={account} />
           </Link>
 
-          <EmojiHTML
-            className='account__header__content translate'
-            htmlString={account.get('note_emojified')}
-            extraEmojis={account.get('emojis')}
-          />
+          <AccountBio accountId={account.id} />
         </div>
 
         <div className='account--panel'>

app/javascript/mastodon/features/follow_requests/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/followed_tags/index.tsx

@@ -2,10 +2,10 @@ import { useEffect, useCallback, useRef } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
-
 import { isFulfilled } from '@reduxjs/toolkit';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import TagIcon from '@/material-icons/400-24px/tag.svg?react';
 import {
   fetchFollowedHashtags,

app/javascript/mastodon/features/followers/components/list.tsx

@@ -28,6 +28,7 @@ interface AccountListProps {
   list?: AccountList | null;
   loadMore: () => void;
   prependAccountId?: string | null;
+  withoutFollowsYouBadge?: boolean;
   scrollKey: string;
 }
 
@@ -40,6 +41,7 @@ export const AccountList: FC<AccountListProps> = ({
   list,
   loadMore,
   prependAccountId,
+  withoutFollowsYouBadge,
   scrollKey,
 }) => {
   const account = useAccount(accountId);
@@ -57,6 +59,7 @@ export const AccountList: FC<AccountListProps> = ({
           key={followerId}
           accountId={followerId}
           withBio={false}
+          badge={withoutFollowsYouBadge ? false : null}
         />
       )) ?? [];
 
@@ -66,11 +69,12 @@ export const AccountList: FC<AccountListProps> = ({
           key={prependAccountId}
           accountId={prependAccountId}
           withBio={false}
+          badge={withoutFollowsYouBadge ? false : null}
         />,
       );
     }
     return children;
-  }, [prependAccountId, list, forceEmptyState]);
+  }, [prependAccountId, list, forceEmptyState, withoutFollowsYouBadge]);
 
   const { multiColumn } = useLayout();
 

app/javascript/mastodon/features/followers/index.tsx

@@ -9,6 +9,7 @@ import { expandFollowers, fetchFollowers } from '@/mastodon/actions/accounts';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useAccountId } from '@/mastodon/hooks/useAccountId';
 import { useRelationship } from '@/mastodon/hooks/useRelationship';
+import { me } from '@/mastodon/initial_state';
 import { selectUserListWithoutMe } from '@/mastodon/selectors/user_lists';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
@@ -85,6 +86,7 @@ const Followers: FC = () => {
       list={followerList}
       loadMore={loadMore}
       prependAccountId={followerId}
+      withoutFollowsYouBadge={accountId === me}
       scrollKey='followers'
     />
   );

app/javascript/mastodon/features/getting_started/index.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { Column } from 'mastodon/components/column';
 

app/javascript/mastodon/features/hashtag_timeline/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { connect } from 'react-redux';
 

app/javascript/mastodon/features/home_timeline/index.jsx

@@ -4,7 +4,7 @@ import { PureComponent } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { connect } from 'react-redux';
 

app/javascript/mastodon/features/interaction_modal/index.tsx

@@ -483,11 +483,19 @@ const InteractionModal: React.FC<{
           />
         </h3>
         <p>
-          <FormattedMessage
-            id='interaction_modal.action'
-            defaultMessage="To interact with {name}'s post, you need to sign into your account on whatever Mastodon server you use."
-            values={{ name }}
-          />
+          {intent === 'follow' ? (
+            <FormattedMessage
+              id='interaction_modal.action_follow'
+              defaultMessage='To follow {name}, you need to sign into your account on whatever Mastodon server you use.'
+              values={{ name }}
+            />
+          ) : (
+            <FormattedMessage
+              id='interaction_modal.action'
+              defaultMessage="To interact with {name}'s post, you need to sign into your account on whatever Mastodon server you use."
+              values={{ name }}
+            />
+          )}
         </p>
       </div>
 

app/javascript/mastodon/features/keyboard_shortcuts/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePureComponent from 'react-immutable-pure-component';
 

app/javascript/mastodon/features/link_timeline/index.tsx

@@ -1,8 +1,9 @@
 import { useRef, useEffect, useCallback } from 'react';
 
-import { Helmet } from 'react-helmet';
 import { useParams } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
 import { expandLinkTimeline } from 'mastodon/actions/timelines';
 import { Column } from 'mastodon/components/column';

app/javascript/mastodon/features/list_timeline/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { Link, withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';

app/javascript/mastodon/features/lists/index.tsx

@@ -2,9 +2,10 @@ import { useEffect, useMemo, useCallback } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';

app/javascript/mastodon/features/lists/members.tsx

@@ -2,9 +2,10 @@ import { useCallback, useState, useEffect } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { useParams, Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
 import { fetchRelationships } from 'mastodon/actions/accounts';

app/javascript/mastodon/features/lists/new.tsx

@@ -2,11 +2,12 @@ import { useCallback, useState, useEffect } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { useParams, useHistory, Link } from 'react-router-dom';
 
 import { isFulfilled } from '@reduxjs/toolkit';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { fetchList } from 'mastodon/actions/lists';

app/javascript/mastodon/features/mutes/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/notifications/request.jsx

@@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { useSelector, useDispatch } from 'react-redux';
 

app/javascript/mastodon/features/notifications/requests.jsx

@@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect, useState } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { useSelector, useDispatch } from 'react-redux';
 

app/javascript/mastodon/features/notifications_v2/index.tsx

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
-
+import { Helmet } from '@unhead/react/helmet';
 import { isEqual } from 'lodash';
 import { useDebouncedCallback } from 'use-debounce';
 

app/javascript/mastodon/features/onboarding/follows.tsx

@@ -2,9 +2,9 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
 import { useDebouncedCallback } from 'use-debounce';
 
 import PersonIcon from '@/material-icons/400-24px/person.svg?react';

app/javascript/mastodon/features/onboarding/profile.tsx

@@ -3,9 +3,10 @@ import { useState, useMemo, useCallback, createRef } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
 import { useHistory } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import AddPhotoAlternateIcon from '@/material-icons/400-24px/add_photo_alternate.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import PersonIcon from '@/material-icons/400-24px/person.svg?react';

app/javascript/mastodon/features/pinned_statuses/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/privacy_policy/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { apiGetPrivacyPolicy } from 'mastodon/api/instance';
 import type { ApiPrivacyPolicyJSON } from 'mastodon/api_types/instance';

app/javascript/mastodon/features/public_timeline/index.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import { connect } from 'react-redux';
 

app/javascript/mastodon/features/quotes/index.tsx

@@ -2,10 +2,10 @@ import { useCallback, useEffect } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
-
 import { List as ImmutableList } from 'immutable';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import RefreshIcon from '@/material-icons/400-24px/refresh.svg?react';
 import { fetchQuotes } from 'mastodon/actions/interactions_typed';
 import { ColumnHeader } from 'mastodon/components/column_header';

app/javascript/mastodon/features/reblogs/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/features/search/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';

app/javascript/mastodon/features/status/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { defineMessages } from 'react-intl';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { withRouter } from 'react-router-dom';
 import { difference } from 'lodash';
 

app/javascript/mastodon/features/terms_of_service/index.tsx

@@ -7,9 +7,10 @@ import {
   defineMessages,
 } from 'react-intl';
 
-import { Helmet } from 'react-helmet';
 import { Link, useParams } from 'react-router-dom';
 
+import { Helmet } from '@unhead/react/helmet';
+
 import { apiGetTermsOfService } from 'mastodon/api/instance';
 import type { ApiTermsOfServiceJSON } from 'mastodon/api_types/instance';
 import { Column } from 'mastodon/components/column';

app/javascript/mastodon/features/ui/components/bundle_column_error.jsx

@@ -4,7 +4,7 @@ import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 import { Link } from 'react-router-dom';
 
 import { Button } from 'mastodon/components/button';

app/javascript/mastodon/features/ui/components/modal_root.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from '@unhead/react/helmet';
 
 import Base from 'mastodon/components/modal_root';
 import { AltTextModal } from 'mastodon/features/alt_text_modal';

app/javascript/mastodon/features/ui/util/intersection_observer_wrapper.js

@@ -25,7 +25,7 @@ class IntersectionObserverWrapper {
     this.observerBacklog.forEach(([ id, node, callback ]) => {
       this.observe(id, node, callback);
     });
-    this.observerBacklog = null;
+    this.observerBacklog = [];
   }
 
   observe (id, node, callback) {

app/javascript/mastodon/locales/el.json

@@ -136,10 +136,10 @@
   "account.share": "Κοινοποίηση του προφίλ @{name}",
   "account.show_reblogs": "Εμφάνιση ενισχύσεων από @{name}",
   "account.statuses_counter": "{count, plural, one {{counter} ανάρτηση} other {{counter} αναρτήσεις}}",
-  "account.timeline.pinned": "Καρφιτσωμένα",
+  "account.timeline.pinned": "Καρφιτσωμένη",
   "account.timeline.pinned.view_all": "Προβολή όλων των καρφιτσωμένων αναρτήσεων",
   "account.unblock": "Άρση αποκλεισμού @{name}",
-  "account.unblock_domain": "Άρση αποκλεισμού του τομέα {domain}",
+  "account.unblock_domain": "Άρση αποκλεισμού τομέα {domain}",
   "account.unblock_domain_short": "Άρση αποκλ.",
   "account.unblock_short": "Άρση αποκλεισμού",
   "account.unendorse": "Να μην αναδεικνύεται στο προφίλ",
@@ -162,7 +162,7 @@
   "account_edit.custom_fields.edit_label": "Επεξεργασία πεδίου",
   "account_edit.custom_fields.placeholder": "Προσθέστε τις αντωνυμίες σας, εξωτερικούς συνδέσμους ή οτιδήποτε άλλο θέλετε να μοιραστείτε.",
   "account_edit.custom_fields.reorder_button": "Αναδιάταξη πεδίων",
-  "account_edit.custom_fields.tip_content": "Μπορείς εύκολα να προσθέσεις αξιοπιστία στον Mastodon λογαριασμό σου επαληθεύοντας συνδέσμους σε οποιεσδήποτε ιστοσελίδες κατέχεις.",
+  "account_edit.custom_fields.tip_content": "Μπορείς εύκολα να προσθέσεις αξιοπιστία στον Mastodon λογαριασμό σου επαληθεύοντας συνδέσμους προς οποιεσδήποτε ιστοσελίδες κατέχεις.",
   "account_edit.custom_fields.tip_title": "Συμβουλή: Προσθήκη επαληθευμένων συνδέσμων",
   "account_edit.custom_fields.title": "Προσαρμοσμένα πεδία",
   "account_edit.custom_fields.verified_hint": "Πώς προσθέτω έναν επαληθευμένο σύνδεσμο;",
@@ -241,7 +241,7 @@
   "account_edit.upload_modal.title_add.header": "Προσθήκη εικόνας εξωφύλλου",
   "account_edit.upload_modal.title_replace.avatar": "Αντικατάσταση εικόνας προφίλ",
   "account_edit.upload_modal.title_replace.header": "Αντικατάσταση εικόνας εξωφύλλου",
-  "account_edit.verified_modal.details": "Πρόσθεσε αξιοπιστία στο Mastodon προφίλ σας επαληθεύοντας συνδέσμους σε προσωπικές ιστοσελίδες. Ορίστε πως δουλεύει:",
+  "account_edit.verified_modal.details": "Πρόσθεσε αξιοπιστία στο Mastodon προφίλ σου επαληθεύοντας συνδέσμους προς προσωπικές ιστοσελίδες. Ορίστε πως δουλεύει:",
   "account_edit.verified_modal.invisible_link.details": "Πρόσθεσε τον σύνδεσμο στην κεφαλίδα σου. Το σημαντικό μέρος είναι το rel=\"me\" που αποτρέπει την μίμηση σε ιστοσελίδες με περιεχόμενο παραγόμενο από χρήστες. Μπορείς ακόμα να χρησιμοποιήσεις μια ετικέτα link στην κεφαλίδα της σελίδας αντί για {tag}, αλλά η HTML πρέπει να είναι προσβάσιμη χωρίς την εκτέλεση JavaScript.",
   "account_edit.verified_modal.invisible_link.summary": "Πώς κάνω αυτόν τον σύνδεσμο αόρατο;",
   "account_edit.verified_modal.step1.header": "Αντίγραψε τον παρακάτω κώδικα HTML και επικόλλησε τον στην κεφαλίδα της ιστοσελίδας σου",
@@ -250,7 +250,7 @@
   "account_edit.verified_modal.title": "Πώς να προσθέσεις έναν επαληθευμένο σύνδεσμο",
   "account_edit_tags.add_tag": "Προσθήκη #{tagName}",
   "account_edit_tags.column_title": "Επεξεργασία Ετικετών",
-  "account_edit_tags.help_text": "Οι αναδεδειγμένες ετικέτες βοηθούν τους χρήστες να ανακαλύψουν και να αλληλεπιδράσουν με το προφίλ σας. Εμφανίζονται ως φίλτρα στην προβολή Δραστηριότητας της σελίδας προφίλ σας.",
+  "account_edit_tags.help_text": "Οι αναδεδειγμένες ετικέτες βοηθούν τους χρήστες να ανακαλύψουν και να αλληλεπιδράσουν με το προφίλ σας. Εμφανίζονται ως φίλτρα στην καρτέλα Δραστηριότητα της σελίδας προφίλ σας.",
   "account_edit_tags.max_tags_reached": "Έχετε φτάσει τον μέγιστο αριθμό των προτεινόμενων ετικετών.",
   "account_edit_tags.search_placeholder": "Εισάγετε μια ετικέτα…",
   "account_edit_tags.suggestions": "Προτάσεις:",
@@ -866,7 +866,7 @@
   "lists.done": "Έγινε",
   "lists.edit": "Επεξεργασία λίστας",
   "lists.exclusive": "Απόκρυψη μελών από την Αρχική",
-  "lists.exclusive_hint": "Αν κάποιος είναι σε αυτή τη λίστα, απόκρυψέ τον από την Αρχική σου για να αποφύγεις να βλέπεις τις αναρτήσεις του δύο φορές.",
+  "lists.exclusive_hint": "Αν κάποιος είναι σε αυτή τη λίστα, απόκρυψέ τον από την Αρχική ροή σου για να αποφύγεις να βλέπεις τις αναρτήσεις του δύο φορές.",
   "lists.find_users_to_add": "Εύρεση χρηστών για προσθήκη",
   "lists.list_members_count": "{count, plural, one {# μέλος} other {# μέλη}}",
   "lists.list_name": "Όνομα λίστας",

app/javascript/mastodon/locales/en.json

@@ -796,6 +796,7 @@
   "info_button.label": "Help",
   "info_button.what_is_alt_text": "<h1>What is alt text?</h1> <p>Alt text provides image descriptions for people with vision impairments, low-bandwidth connections, or those seeking extra context.</p> <p>You can improve accessibility and understanding for everyone by writing clear, concise, and objective alt text.</p> <ul> <li>Capture important elements</li> <li>Summarize text in images</li> <li>Use regular sentence structure</li> <li>Avoid redundant information</li> <li>Focus on trends and key findings in complex visuals (like diagrams or maps)</li> </ul>",
   "interaction_modal.action": "To interact with {name}'s post, you need to sign into your account on whatever Mastodon server you use.",
+  "interaction_modal.action_follow": "To follow {name}, you need to sign into your account on whatever Mastodon server you use.",
   "interaction_modal.go": "Go",
   "interaction_modal.no_account_yet": "Don't have an account yet?",
   "interaction_modal.on_another_server": "On a different server",

app/javascript/mastodon/locales/fr-CA.json

@@ -1043,9 +1043,9 @@
   "notifications.policy.filter_not_followers_title": "Personnes qui ne vous suivent pas",
   "notifications.policy.filter_not_following_hint": "Jusqu'à ce que vous les validiez manuellement",
   "notifications.policy.filter_not_following_title": "Personnes que vous ne suivez pas",
-  "notifications.policy.filter_private_mentions_hint": "Filtrées sauf si c'est en réponse à l'une de vos mentions ou si vous suivez l'expéditeur·ice",
+  "notifications.policy.filter_private_mentions_hint": "Filtrées sauf si c'est en réponse à l'une de vos mentions ou si vous suivez la personne",
   "notifications.policy.filter_private_mentions_title": "Mentions privées non sollicitées",
-  "notifications.policy.title": "Gestion des notifications des …",
+  "notifications.policy.title": "Gestion des notifications des…",
   "notifications_permission_banner.enable": "Activer les notifications de bureau",
   "notifications_permission_banner.how_to_control": "Pour recevoir des notifications lorsque Mastodon n’est pas ouvert, activez les notifications de bureau. Vous pouvez contrôler précisément quels types d’interactions génèrent des notifications de bureau via le bouton {icon} ci-dessus une fois qu’elles sont activées.",
   "notifications_permission_banner.title": "Ne rien rater",

app/javascript/mastodon/locales/fr.json

@@ -1027,7 +1027,7 @@
   "notifications.group": "{count} notifications",
   "notifications.mark_as_read": "Marquer toutes les notifications comme lues",
   "notifications.permission_denied": "Impossible d’activer les notifications de bureau car l’autorisation a été refusée.",
-  "notifications.permission_denied_alert": "Les notifications de bureau ne peuvent pas être activées, car l’autorisation du navigateur a été refusée avant",
+  "notifications.permission_denied_alert": "Les notifications de bureau ne peuvent pas être activées, car l’autorisation du navigateur a été refusée auparavant",
   "notifications.permission_required": "Les notifications de bureau ne sont pas disponibles car l’autorisation requise n’a pas été accordée.",
   "notifications.policy.accept": "Accepter",
   "notifications.policy.accept_hint": "Afficher dans les notifications",
@@ -1043,9 +1043,9 @@
   "notifications.policy.filter_not_followers_title": "Personnes qui ne vous suivent pas",
   "notifications.policy.filter_not_following_hint": "Jusqu'à ce que vous les validiez manuellement",
   "notifications.policy.filter_not_following_title": "Personnes que vous ne suivez pas",
-  "notifications.policy.filter_private_mentions_hint": "Filtrées sauf si c'est en réponse à l'une de vos mentions ou si vous suivez l'expéditeur·ice",
+  "notifications.policy.filter_private_mentions_hint": "Filtrées sauf si c'est en réponse à l'une de vos mentions ou si vous suivez la personne",
   "notifications.policy.filter_private_mentions_title": "Mentions privées non sollicitées",
-  "notifications.policy.title": "Gestion des notifications des …",
+  "notifications.policy.title": "Gestion des notifications des…",
   "notifications_permission_banner.enable": "Activer les notifications de bureau",
   "notifications_permission_banner.how_to_control": "Pour recevoir des notifications lorsque Mastodon n’est pas ouvert, activez les notifications du bureau. Vous pouvez contrôler précisément quels types d’interactions génèrent des notifications de bureau via le bouton {icon} ci-dessus une fois qu’elles sont activées.",
   "notifications_permission_banner.title": "Toujours au courant",

app/javascript/mastodon/locales/ga.json

@@ -328,11 +328,15 @@
   "annual_report.summary.share_on_mastodon": "Comhroinn ar Mastodon",
   "attachments_list.unprocessed": "(neamhphróiseáilte)",
   "audio.hide": "Cuir fuaim i bhfolach",
+  "block_modal.no_collections": "Ní féidir le ceachtar agaibh a chéile a chur le bailiúcháin. Bainfear sibh go huathoibríoch ó bhailiúcháin atá agaibh cheana féin, más infheidhme.",
   "block_modal.remote_users_caveat": "Iarrfaimid ar an bhfreastalaí {domain} meas a bheith agat ar do chinneadh. Mar sin féin, ní ráthaítear comhlíonadh toisc go bhféadfadh roinnt freastalaithe bloic a láimhseáil ar bhealach difriúil. Seans go mbeidh postálacha poiblí fós le feiceáil ag úsáideoirí nach bhfuil logáilte isteach.",
   "block_modal.show_less": "Taispeáin níos lú",
   "block_modal.show_more": "Taispeáin níos mó",
+  "block_modal.they_cant_mention": "Ní féidir libh a chéile a lua, a leanúint ná a chéile a lua.",
+  "block_modal.they_cant_see_posts": "Ní féidir leo d’ábhar a fheiceáil agus ní fheicfidh tú a gcuid ábhair.",
   "block_modal.they_will_know": "Is féidir leo a fheiceáil go bhfuil bac orthu.",
   "block_modal.title": "Úsáideoir a bhlocáil?",
+  "block_modal.you_wont_see_mentions": "Ní fheicfidh tú poist ó dhaoine eile a luann iad.",
   "boost_modal.combo": "Is féidir leat {combo} a bhrú chun é seo a scipeáil an chéad uair eile",
   "boost_modal.reblog": "An post a threisiú?",
   "boost_modal.undo_reblog": "An deireadh a chur le postáil?",

app/javascript/mastodon/locales/hu.json

@@ -224,6 +224,7 @@
   "account_edit.profile_tab.show_media.title": "„Média” lap megjelenítése",
   "account_edit.profile_tab.show_media_replies.description": "Ha engedélyezve van, akkor a Média lap megjeleníti a bejegyzéseidet és a mások bejegyzéseihez írt válaszaidat.",
   "account_edit.profile_tab.show_media_replies.title": "Válaszok megjelenítése a „Média” lapon",
+  "account_edit.profile_tab.show_relations.description": "A profilodban megjeleníti azokat a fiókokat, melyeket követsz, valamint a többi felhasználó követőit. Mások továbbra is látni fogják, hogy követed-e őket.",
   "account_edit.profile_tab.show_relations.title": "„Követők” és „Követettek” megjelenítése",
   "account_edit.profile_tab.subtitle": "A profil megjelenítésének testreszabása.",
   "account_edit.profile_tab.title": "Profil megjelenítési beállításai",
@@ -327,6 +328,7 @@
   "annual_report.summary.share_on_mastodon": "Megosztás a Mastodonon",
   "attachments_list.unprocessed": "(feldolgozatlan)",
   "audio.hide": "Hang elrejtése",
+  "block_modal.no_collections": "Egyikőtök sem adhatja hozzá a másikat gyűjteményekhez. Automatikusan el is lesztek távolítva az egymás gyűjteményéből.",
   "block_modal.remote_users_caveat": "Arra kérjük a {domain} kiszolgálót, hogy tartsa tiszteletben a döntésedet. Ugyanakkor az együttműködés nem garantált, mivel néhány kiszolgáló másképp kezelheti a letiltásokat. A nyilvános bejegyzések a be nem jelentkezett felhasználók számára továbbra is látszódhatnak.",
   "block_modal.show_less": "Kevesebb mutatása",
   "block_modal.show_more": "Több mutatása",

app/javascript/mastodon/locales/kab.json

@@ -36,6 +36,7 @@
   "account.familiar_followers_many": "Yeṭṭafaṛ-it {name1} d {name2}, akked {othersCount, plural, one {yiwen nniḍen i tessneḍ} other {# nniḍen i tessneḍ}}",
   "account.familiar_followers_one": "Yeṭṭafar-it {name1}",
   "account.familiar_followers_two": "Yeṭṭafar-it {name1} akked {name2}",
+  "account.featured": "Ufrinen",
   "account.featured.accounts": "Imeɣna",
   "account.featured.collections": "Tilkensa",
   "account.featured.new_collection": "Talkensit tamaynut",
@@ -68,6 +69,8 @@
   "account.join_modal.me_today": "Ass-a, d ass-ik⋅im amezwaru deg {server}!",
   "account.join_modal.other": "{name} yerna-d ɣer {server} ass n",
   "account.join_modal.other_today": "D ass amezwaru n {name} ɣef {server}!",
+  "account.join_modal.share.intro": "Bḍu izen anida deg-s ad temmeslayeḍ fell-ak⋅am",
+  "account.join_modal.years": "{number, plural, one {n useggas} other {n iseggasen}}",
   "account.joined_short": "Izeddi da seg ass n",
   "account.languages": "Beddel tutlayin yettwajerden",
   "account.last_active": "Armud aneggaru",
@@ -87,6 +90,7 @@
   "account.menu.remove_follower": "Kkes aneḍfar",
   "account.menu.report": "Cetki ɣef umiḍan-a",
   "account.menu.share": "Zuzer…",
+  "account.menu.unblock": "Kkes asewḥel i umiḍan",
   "account.moved_to": "{name} yenna-d dakken amiḍan-is amaynut yuɣal :",
   "account.mute": "Sgugem @{name}",
   "account.mute_notifications_short": "Susem ilɣa",
@@ -141,6 +145,7 @@
   "account_edit.display_name.edit_label": "Ẓreg isem ara d-yettwaskanen",
   "account_edit.display_name.title": "Isem ara d-yettwaskanen",
   "account_edit.featured_hashtags.edit_label": "Rnu ihacṭagen",
+  "account_edit.featured_hashtags.title": "Ihacṭagen ufrinen",
   "account_edit.field_actions.delete": "Kkes urti",
   "account_edit.field_actions.edit": "Ẓreg urti",
   "account_edit.field_delete_modal.delete_button": "Kkes",
@@ -167,6 +172,7 @@
   "account_edit.name_modal.add_title": "Rnu isem ara d-yettwaskanen",
   "account_edit.name_modal.edit_title": "Ẓreg isem ara d-yettwaskanen",
   "account_edit.profile_tab.button_label": "Sagen",
+  "account_edit.profile_tab.show_featured.title": "Sken-d accer n \"Ufrinen\"",
   "account_edit.save": "Sekles",
   "account_edit.upload_modal.back": "Uɣal",
   "account_edit.upload_modal.done": "Dayen",
@@ -179,12 +185,16 @@
   "account_edit.upload_modal.title_add.header": "Rnu tawlaft n tduli",
   "account_edit.upload_modal.title_replace.avatar": "Semselsi tawlaft n umaɣnu",
   "account_edit.upload_modal.title_replace.header": "Semselsi tawlaft n tduli",
+  "account_edit.verified_modal.invisible_link.summary": "Amek ara rreɣ aseɣwen-nni ur yettban ara?",
+  "account_edit.verified_modal.title": "Amek ara ternuḍ aseɣwen yettuselknen",
   "account_edit_tags.add_tag": "Rnu #{tagName}",
   "account_edit_tags.column_title": "Asiẓreg n yihacṭagen",
   "account_edit_tags.search_placeholder": "Sekcem-d ahacṭag…",
   "account_edit_tags.suggestions": "Isumren:",
   "account_edit_tags.tag_status_count": "{count, plural, one {# n yizen} other {# n yiznan}}",
+  "account_list.total": "{total, plural, one {# n umiḍan} other {# n imiḍanen}}",
   "account_note.placeholder": "Ulac iwenniten",
+  "admin.dashboard.retention.cohort": "Ajerred deg ayyur",
   "admin.dashboard.retention.cohort_size": "Iseqdacen imaynuten",
   "alert.rate_limited.message": "Ma ulac aɣilif ɛreḍ tikelt-nniḍen akka {retry_time, time, medium}.",
   "alert.rate_limited.title": "Aktum s talast",
@@ -223,6 +233,7 @@
   "block_modal.title": "Sewḥel aseqdac ?",
   "boost_modal.combo": "Tzemreḍ ad tsiteḍ ɣef {combo} akken ad tzegleḍ aya tikelt i d-iteddun",
   "boost_modal.reblog": "Zuzer tasuffeɣt?",
+  "boost_modal.undo_reblog": "Semmet azuzer n yizen-a?",
   "bundle_column_error.copy_stacktrace": "Nɣel tuccḍa n uneqqis",
   "bundle_column_error.error.title": "Uh, ala !",
   "bundle_column_error.network.body": "Teḍra-d tuccḍa deg usali n usebter-a. Aya yezmer ad yili d ugur akudan deg tuqqna-inek·inem ɣer internet neɣ deg uqeddac-a.",
@@ -234,6 +245,7 @@
   "bundle_modal_error.close": "Mdel",
   "bundle_modal_error.retry": "Ɛreḍ tikelt-nniḍen",
   "callout.dismiss": "Zgel-it",
+  "character_counter.required": "{currentLength}/{maxLength} n yisekkilen",
   "closed_registrations_modal.description": "Asnulfu n umiḍan deg {domain} mačči d ayen izemren ad yili, maca ttxil-k·m, err deg lbal-ik·im belli ur teḥwaǧeḍ ara amiḍan s wudem ibanen ɣef {domain} akken ad tesqedceḍ Mastodon.",
   "closed_registrations_modal.find_another_server": "Aff-d aqeddac nniḍen",
   "closed_registrations_modal.title": "Ajerred deg Masṭudun",
@@ -243,6 +255,8 @@
   "collection.share_modal.title": "Bḍu talkensit",
   "collection.share_modal.title_new": "Zuzer talkensit-ik·im tamaynut!",
   "collections.account_count": "{count, plural, one {# n umiḍan} other {# n imiḍanen}}",
+  "collections.accounts.empty_description": "Rnu alamma d {count} n imiḍanen",
+  "collections.accounts.empty_editor_title": "Ulac ula yiwen ɛad deg telkensit-a",
   "collections.accounts.empty_title": "Talkensit-a d tilemt",
   "collections.block_collection_owner": "Sewḥel amiḍan",
   "collections.by_account": "sɣur {account_handle}",
@@ -262,12 +276,14 @@
   "collections.detail.revoke_inclusion": "Kkes-iyi",
   "collections.detail.sensitive_content": "Agbur amḥulfu",
   "collections.detail.share": "Zuzer talkensit-a",
+  "collections.detail.you_are_in_this_collection": "Aql-ik⋅em ɣer sdat deg telsenkit-a",
   "collections.edit_details": "Ẓreg talqayt",
   "collections.hidden_accounts_link": "{count, plural, one {# n umiḍan uffir} other {# n imiḍanen yettwaffaren}}",
   "collections.hints.accounts_counter": "{count}/{max} n imiḍanen",
   "collections.last_updated_at": "Taẓrigt taneggarut: {date}",
   "collections.list.created_by_author": "D-yesnulfa {name}",
   "collections.list.created_by_you": "D-tesnulfaḍ",
+  "collections.list.featuring_you": "Yid-k⋅m",
   "collections.manage_accounts": "Sefrek imiḍanen",
   "collections.name_length_hint": "talast n 40 n yisekkilen",
   "collections.new_collection": "Talkensit tamaynut",
@@ -276,6 +292,7 @@
   "collections.revoke_collection_inclusion": "Kkes-iyi seg telkensit-a",
   "collections.search_accounts_label": "Nadi ɣef umiḍan ara ternuḍ",
   "collections.share_short": "Bḍu",
+  "collections.suggestions.can_not_add": "Ur tezmireḍ ara ad t-ternuḍt",
   "collections.view_collection": "Wali talkensit",
   "collections.visibility_public": "Azayaz",
   "collections.visibility_title": "Abani",
@@ -290,6 +307,7 @@
   "column.edit_list": "Ẓreg tabdart",
   "column.favourites": "Imenyafen",
   "column.firehose": "Isuddam usriden",
+  "column.firehose_singular": "Asuddem usrid",
   "column.follow_requests": "Isuturen n teḍfeṛt",
   "column.home": "Agejdan",
   "column.list_members": "Sefrek iεeggalen n tebdart",
@@ -299,6 +317,7 @@
   "column.other_collections": "Tilkensa sɣur {name}",
   "column.pins": "Tisuffaɣ yettwasenṭḍen",
   "column.public": "Tasuddemt tamatut",
+  "column.your_collections": "Tilkensa-k·m",
   "column_back_button.label": "Tuɣalin",
   "column_header.hide_settings": "Ffer iɣewwaṛen",
   "column_header.moveLeft_settings": "Err ajgu ɣer tama tazelmaḍt",
@@ -355,6 +374,7 @@
   "confirmations.follow_to_list.confirm": "Ḍfeṛ-it sakin rnu-t ɣer tebdart",
   "confirmations.follow_to_list.title": "Ḍfer aseqdac?",
   "confirmations.hide_featured_tab.confirm": "Ffer accer",
+  "confirmations.hide_featured_tab.title": "Ffer accer n \"Ufrinen\"?",
   "confirmations.logout.confirm": "Ffeɣ",
   "confirmations.logout.message": "D tidet tebɣiḍ ad teffɣeḍ?",
   "confirmations.logout.title": "Tebɣiḍ ad teffɣeḍ ssya?",
@@ -432,11 +452,13 @@
   "emoji_button.symbols": "Izamulen",
   "emoji_button.travel": "Imeḍqan d Yinigen",
   "empty_column.account_featured_self.no_collections_button": "Snulfu-d talkensit",
+  "empty_column.account_featured_self.no_collections_hide_tab": "Ɣumm accer-a",
   "empty_column.account_suspended": "Amiḍan yettwaḥbas",
   "empty_column.account_timeline": "Ulac tisuffaɣ da !",
   "empty_column.account_unavailable": "Ur nufi ara amaɣnu-ayi",
   "empty_column.blocks": "Ur tesḥebseḍ ula yiwen n umseqdac ar tura.",
   "empty_column.bookmarked_statuses": "Ulac kra n tsuffeɣt i terniḍ ɣer yismenyifen-ik·im ar tura. Ticki terniḍ yiwet, ad d-tettwasken da.",
+  "empty_column.collections.featured_in": "Ur-k yerni ḥedd ɛad ɣer kra n telkensit.",
   "empty_column.community": "Tasuddemt tazayezt tadigant n yisallen d tilemt. Aru ihi kra akken ad tt-teččareḍ!",
   "empty_column.domain_blocks": "Ulac kra n taɣult yettwaffren ar tura.",
   "empty_column.explore_statuses": "Ulac ayen yellan d anezzuɣ akka tura. Uɣal-d ticki!",
@@ -458,6 +480,7 @@
   "explore.trending_tags": "Ihacṭagen",
   "featured_carousel.current": "<sr>Izen wis</sr> {current, number} / {max, number}",
   "featured_carousel.header": "{count, plural, one {n tsuffeɣt tunṭiḍt} other {n tsuffaɣ tunṭiḍin}}",
+  "featured_carousel.slide": "Iznen {current, number} ɣef {max, number}",
   "featured_tags.more_items": "+{count}",
   "featured_tags.suggestions.add": "Rnu",
   "featured_tags.suggestions.dismiss": "Uhu, tanemmirt",

app/javascript/mastodon/locales/nn.json

@@ -43,6 +43,7 @@
   "account.featured": "Utvald",
   "account.featured.accounts": "Profilar",
   "account.featured.collections": "Samlingar",
+  "account.featured.new_collection": "Ny samling",
   "account.field_overflow": "Vis heile innhaldet",
   "account.filters.all": "All aktivitet",
   "account.filters.boosts_toggle": "Vis framhevingar",
@@ -68,6 +69,16 @@
   "account.go_to_profile": "Gå til profil",
   "account.hide_reblogs": "Gøym framhevingar frå @{name}",
   "account.in_memoriam": "Til minne om.",
+  "account.join_modal.day": "Dag",
+  "account.join_modal.me": "Du vart medlem av {server} den",
+  "account.join_modal.me_anniversary": "God allheimsbursdag! Du vart medlem av {server} den",
+  "account.join_modal.me_today": "Det er fyrste dagen din på {server}!",
+  "account.join_modal.other": "{name} vart medlem av {server} den",
+  "account.join_modal.other_today": "{name} har sin fyrste dag på {server}!",
+  "account.join_modal.share.celebrate": "Skriv eit jubileumsinnlegg",
+  "account.join_modal.share.intro": "Skriv eit introduksjonsinnlegg",
+  "account.join_modal.share.welcome": "Skriv eit velkomstinnlegg",
+  "account.join_modal.years": "{number, plural, one {år} other {år}}",
   "account.joined_short": "Vart med",
   "account.languages": "Endre språktingingar",
   "account.last_active": "Sist aktiv",

app/javascript/mastodon/locales/sq.json

@@ -324,11 +324,15 @@
   "annual_report.summary.share_on_mastodon": "Ndajeni në Mastodon me të tjerë",
   "attachments_list.unprocessed": "(e papërpunuar)",
   "audio.hide": "Fshihe audion",
+  "block_modal.no_collections": "Asnjë prej jush s’mund shtojë tjetrin te koleksione. Do të hiqeni automatikisht nga koleksionne ekzistuese të njëri-tjetrit, nëse ka vend.",
   "block_modal.remote_users_caveat": "Do t’i kërkojmë shërbyesit {domain} të respektojë vendimin tuaj. Por, pajtimi s’është i garantuar, ngaqë disa shërbyes mund t’i trajtojnë ndryshe bllokimet. Psotimet publike mundet të jenë ende të dukshme për përdorues pa bërë hyrje në llogari.",
   "block_modal.show_less": "Shfaq më pak",
   "block_modal.show_more": "Shfaq më tepër",
+  "block_modal.they_cant_mention": "S’mund të përmendni, ndiqni, ose citoni njëri-tjetrin.",
+  "block_modal.they_cant_see_posts": "S’mund të shohin lëndën tuaj dhe ju s’do të shihni të tyren.",
   "block_modal.they_will_know": "Mund të shohin se janë bllokuar.",
   "block_modal.title": "Të bllokohet përdoruesi?",
+  "block_modal.you_wont_see_mentions": "S’do të shihni postime nga të tjerë që i përmendin ata.",
   "boost_modal.combo": "Që kjo të anashkalohet herës tjetër, mund të shtypni {combo}",
   "boost_modal.reblog": "Përforcim postimi?",
   "boost_modal.undo_reblog": "Të hiqet përforcim për postimin?",

app/javascript/mastodon/main.tsx

@@ -1,3 +1,4 @@
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { Globals } from '@react-spring/web';
@@ -33,7 +34,11 @@ function main() {
     await initializeEmoji();
 
     const root = createRoot(mountNode);
-    root.render(<Mastodon {...props} />);
+    root.render(
+      <StrictMode>
+        <Mastodon {...props} />
+      </StrictMode>,
+    );
     store.dispatch(setupBrowserNotifications());
 
     if (isProduction() && me && 'serviceWorker' in navigator) {

app/javascript/styles/mastodon/accounts.scss

@@ -231,75 +231,6 @@
   border-color: var(--color-border-error-soft);
 }
 
-.account__header__fields {
-  max-width: 100vw;
-  padding: 0;
-  margin: 15px -15px -15px;
-  border: 0 none;
-  border-top: 1px solid var(--color-border-primary);
-  border-bottom: 1px solid var(--color-border-primary);
-  font-size: 14px;
-  line-height: 20px;
-
-  dl {
-    display: flex;
-    border-bottom: 1px solid var(--color-border-primary);
-  }
-
-  dt,
-  dd {
-    box-sizing: border-box;
-    padding: 14px;
-    text-align: center;
-    max-height: 48px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  dt {
-    font-weight: 500;
-    width: 120px;
-    flex: 0 0 auto;
-    color: var(--color-text-primary);
-    background: var(--color-bg-secondary);
-  }
-
-  dd {
-    flex: 1 1 auto;
-    color: var(--color-text-secondary);
-  }
-
-  a {
-    color: var(--color-text-brand);
-    text-decoration: none;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-
-  .verified {
-    border: 1px solid var(--color-border-success-soft);
-    background: var(--color-bg-success-softest);
-
-    a {
-      color: var(--color-text-success);
-      font-weight: 500;
-    }
-
-    &__mark {
-      color: var(--color-text-success);
-    }
-  }
-
-  dl:last-child {
-    border-bottom: 0;
-  }
-}
-
 .directory__tag .trends__item__current {
   width: auto;
 }

app/javascript/styles/mastodon/admin.scss

@@ -1051,35 +1051,121 @@ a.name-tag,
     max-width: 100%;
   }
 
-  .account__header__fields,
-  .account__header__content {
+  &__fields,
+  &__content {
     background: var(--color-bg-primary);
     border: 1px solid var(--color-border-primary);
     border-radius: 4px;
     height: 100%;
   }
 
-  .account__header__fields {
-    margin: 0;
+  &__fields {
     border: 1px solid var(--color-border-primary);
+    font-size: 14px;
+    line-height: 20px;
+    display: grid;
+    grid-template-columns: 120px auto;
+    grid-auto-flow: row;
+
+    dl {
+      display: flex;
+    }
+
+    dt,
+    dd {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      padding: 14px;
+      text-align: center;
+      border-bottom: 1px solid var(--color-border-primary);
+
+      &:last-of-type:not(.verified) {
+        border-bottom: none;
+      }
+    }
+
+    dt {
+      font-weight: 500;
+      width: 120px;
+      flex: 0 0 auto;
+      color: var(--color-text-primary);
+      background: var(--color-bg-secondary);
+    }
+
+    dd {
+      flex: 1 1 auto;
+      color: var(--color-text-secondary);
+
+      &:first-of-type.verified {
+        border-top-right-radius: 4px;
+      }
+
+      &:last-of-type.verified {
+        border-bottom-right-radius: 4px;
+      }
+    }
 
     a {
       color: var(--color-text-brand);
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
     }
 
-    dl:first-child .verified {
-      border-radius: 0 4px 0 0;
-    }
+    .verified {
+      border: 1px solid var(--color-border-success-soft);
+      background: var(--color-bg-success-softest);
 
-    .verified a {
-      color: var(--color-text-success);
+      a {
+        color: var(--color-text-success);
+        font-weight: 500;
+      }
+
+      &__mark {
+        color: var(--color-text-success);
+
+        > svg {
+          vertical-align: middle;
+        }
+      }
     }
   }
 
-  .account__header__content {
+  &__content {
     box-sizing: border-box;
     padding: 20px;
     color: var(--color-text-primary);
+    font-size: 14px;
+    font-weight: 400;
+    overflow: hidden;
+    word-break: normal;
+    overflow-wrap: break-word;
+
+    p {
+      margin-bottom: 20px;
+      unicode-bidi: plaintext;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      color: var(--color-text-brand);
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
   }
 }
 

app/javascript/styles/mastodon/components.scss

@@ -8320,372 +8320,6 @@ noscript {
   }
 }
 
-.account__header__content {
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  font-weight: 400;
-  overflow: hidden;
-  word-break: normal;
-  overflow-wrap: break-word;
-
-  p {
-    margin-bottom: 20px;
-    unicode-bidi: plaintext;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  a {
-    color: inherit;
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-.account__header {
-  container: account-header / inline-size;
-
-  &.inactive {
-    opacity: 0.5;
-
-    .account__header__image,
-    .account__avatar {
-      filter: grayscale(100%);
-    }
-  }
-
-  &__info {
-    position: absolute;
-    top: 20px;
-    inset-inline-end: 20px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2px;
-  }
-
-  &__image {
-    overflow: hidden;
-    height: 145px;
-    position: relative;
-    background: var(--color-bg-tertiary);
-    border-bottom: 1px solid var(--color-border-primary);
-
-    img {
-      object-fit: cover;
-      display: block;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-    }
-  }
-
-  &__bar {
-    position: relative;
-    padding: 0 20px;
-    border-bottom: 1px solid var(--color-border-primary);
-
-    .avatar {
-      display: block;
-      flex: 0 0 auto;
-
-      .account__avatar {
-        background: var(--color-bg-primary);
-        border: 1px solid var(--color-border-primary);
-        border-radius: var(--avatar-border-radius);
-      }
-    }
-  }
-
-  &__tabs {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    margin-top: -55px;
-    padding-top: 10px;
-    gap: 8px;
-    overflow: hidden;
-    margin-inline-start: -2px; // aligns the pfp with content below
-
-    &__name {
-      margin-top: 16px;
-      margin-bottom: 16px;
-
-      .emojione {
-        width: 22px;
-        height: 22px;
-      }
-
-      h1 {
-        font-size: 17px;
-        line-height: 22px;
-        color: var(--color-text-primary);
-        font-weight: 600;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        small {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          font-size: 14px;
-          line-height: 20px;
-          color: var(--color-text-secondary);
-          font-weight: 400;
-          overflow: hidden;
-          text-overflow: ellipsis;
-
-          span {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            user-select: all;
-          }
-
-          .icon-lock {
-            height: 18px;
-            width: 18px;
-          }
-        }
-      }
-    }
-
-    .spacer {
-      flex: 1 1 auto;
-    }
-  }
-
-  &__follow-button {
-    flex-grow: 1;
-  }
-
-  &__buttons {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    $button-breakpoint: 420px;
-    $button-fallback-breakpoint: $button-breakpoint + 55px;
-
-    &--desktop {
-      margin-top: 55px;
-
-      @container (width < #{$button-breakpoint}) {
-        display: none;
-      }
-
-      @supports (not (container-type: inline-size)) {
-        @media (max-width: #{$button-fallback-breakpoint}) {
-          display: none;
-        }
-      }
-    }
-
-    &--mobile {
-      margin-block: 16px;
-
-      @container (width >= #{$button-breakpoint}) {
-        display: none;
-      }
-
-      @supports (not (container-type: inline-size)) {
-        @media (min-width: ($button-fallback-breakpoint + 1px)) {
-          display: none;
-        }
-      }
-    }
-
-    .button {
-      flex-shrink: 1;
-      white-space: nowrap;
-      min-width: 80px;
-    }
-
-    .icon-button {
-      border: 1px solid var(--color-border-primary);
-      border-radius: 4px;
-      box-sizing: content-box;
-      padding: 5px;
-
-      .icon {
-        width: 24px;
-        height: 24px;
-      }
-
-      &.copied {
-        border-color: var(--color-text-success);
-      }
-    }
-  }
-
-  &__bio {
-    .account__header__content {
-      color: var(--color-text-primary);
-    }
-
-    .account__header__fields {
-      margin: 0;
-      margin-top: 16px;
-      border-radius: 4px;
-      border: 1px solid var(--color-border-primary);
-
-      dl {
-        display: block;
-        padding: 11px 16px;
-        border-bottom-color: var(--color-border-primary);
-      }
-
-      dd,
-      dt {
-        font-size: 13px;
-        line-height: 18px;
-        padding: 0;
-        text-align: initial;
-      }
-
-      dt {
-        width: auto;
-        background: transparent;
-        text-transform: uppercase;
-        color: var(--color-text-tertiary);
-      }
-
-      dd {
-        color: var(--color-text-secondary);
-      }
-
-      a {
-        color: var(--color-text-brand);
-      }
-
-      .icon {
-        width: 18px;
-        height: 18px;
-      }
-
-      .verified {
-        border: 1px solid var(--color-text-success);
-        margin-top: -1px;
-        margin-inline: -1px;
-
-        &:first-child {
-          border-top-left-radius: 4px;
-          border-top-right-radius: 4px;
-        }
-
-        &:last-child {
-          border-bottom-left-radius: 4px;
-          border-bottom-right-radius: 4px;
-          margin-bottom: -1px;
-        }
-
-        dt,
-        dd {
-          color: var(--color-text-success);
-        }
-
-        dd {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-
-          span {
-            display: flex;
-          }
-        }
-
-        a {
-          color: var(--color-text-success);
-        }
-      }
-    }
-  }
-
-  &__extra {
-    margin-top: 16px;
-
-    &__links {
-      font-size: 14px;
-      color: var(--color-text-secondary);
-      margin: 0 -10px;
-      padding-top: 16px;
-      padding-bottom: 10px;
-
-      a {
-        display: inline-block;
-        color: var(--color-text-secondary);
-        text-decoration: none;
-        padding: 5px 10px;
-        font-weight: 500;
-
-        strong {
-          font-weight: 700;
-          color: var(--color-text-primary);
-        }
-      }
-    }
-  }
-
-  &__account-note {
-    color: var(--color-text-primary);
-    font-size: 14px;
-    font-weight: 400;
-    margin-bottom: 10px;
-
-    &__loading-indicator-wrapper {
-      position: relative;
-      height: 37px;
-
-      .loading-indicator {
-        left: 10px;
-      }
-
-      .circular-progress {
-        width: 14px;
-        height: 14px;
-      }
-    }
-
-    label {
-      display: block;
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--color-text-secondary);
-      text-transform: uppercase;
-      margin-bottom: 5px;
-    }
-
-    textarea {
-      display: block;
-      box-sizing: border-box;
-      width: calc(100% + 20px);
-      color: var(--color-text-primary);
-      background: transparent;
-      padding: 10px;
-      margin: 0 -10px;
-      font-family: inherit;
-      font-size: 14px;
-      resize: none;
-      border: 0;
-      outline: 0;
-      border-radius: 4px;
-
-      &::placeholder {
-        color: var(--color-text-tertiary);
-        opacity: 1;
-      }
-
-      &:focus {
-        background: var(--color-bg-brand-softest);
-      }
-    }
-  }
-}
-
 .account__contents {
   overflow: hidden;
 }