Merge pull request #3498 from glitch-soc/glitch-soc/merge-upstream

Merge upstream changes up to b2aa476abbe82e2b49d84c9fb8ef654f95391fd3

.github/actions/setup-javascript/action.yml

@@ -16,7 +16,7 @@ runs:
     # The following is needed because we can not use `cache: true` for `setup-node`, as it does not support Corepack yet and mess up with the cache location if ran after Node is installed
     - name: Enable corepack
       shell: bash
-      run: corepack enable
+      run: npm i -g corepack
 
     - name: Get yarn cache directory path
       id: yarn-cache-dir-path

Dockerfile

@@ -342,7 +342,7 @@ COPY --from=node /usr/local/lib /usr/local/lib
 RUN \
   # Configure Corepack
   rm /usr/local/bin/yarn*; \
-  corepack enable; \
+  npm i -g corepack; \
   corepack prepare --activate;
 
 # hadolint ignore=DL3008

Gemfile

@@ -58,6 +58,7 @@ gem 'httplog', '~> 1.8.0', require: false
 gem 'i18n'
 gem 'idn-ruby', require: 'idn'
 gem 'inline_svg'
+gem 'ipaddr', '~> 1.2'
 gem 'irb', '~> 1.8'
 gem 'kaminari', '~> 1.2'
 gem 'link_header', '~> 0.0'

Gemfile.lock

@@ -343,6 +343,7 @@ GEM
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
     io-console (0.8.2)
+    ipaddr (1.2.9)
     irb (1.18.0)
       pp (>= 0.6.0)
       prism (>= 1.3.0)
@@ -992,6 +993,7 @@ DEPENDENCIES
   i18n-tasks (~> 1.0)
   idn-ruby
   inline_svg
+  ipaddr (~> 1.2)
   irb (~> 1.8)
   jd-paperclip-azure (~> 3.0)
   json

Vagrantfile

@@ -115,7 +115,7 @@ gem install bundler foreman
 bundle install
 
 # Install node modules
-sudo corepack enable
+sudo npm i -g corepack
 corepack prepare
 yarn install
 

app/controllers/redirect/collections_controller.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Redirect::CollectionsController < Redirect::BaseController
+  private
+
+  def set_resource
+    @resource = Collection.find(params[:id])
+    not_found if @resource.local? || @resource&.account&.suspended?
+  end
+end

app/helpers/context_helper.rb

@@ -49,9 +49,9 @@ module ContextHelper
     },
     quote_authorizations: {
       'gts' => 'https://gotosocial.org/ns#',
-      'quoteAuthorization' => { '@id' => 'https://w3id.org/fep/044f#quoteAuthorization', '@type' => '@id' },
+      'QuoteAuthorization' => 'https://w3id.org/fep/044f#QuoteAuthorization',
-      'interactingObject' => { '@id' => 'gts:interactingObject' },
+      'interactingObject' => { '@id' => 'gts:interactingObject', '@type' => '@id' },
-      'interactionTarget' => { '@id' => 'gts:interactionTarget' },
+      'interactionTarget' => { '@id' => 'gts:interactionTarget', '@type' => '@id' },
     },
   }.freeze
 

app/javascript/flavours/glitch/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 '@/flavours/glitch/actions/accounts';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import { getAccountHidden } from '@/flavours/glitch/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/flavours/glitch/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}
+          text={name_emojified}
-          textEmojified={name_emojified}
           textHasCustomEmoji={nameHasEmojis}
           className='translate'
           isOverflowing={isLabelOverflowing}
@@ -149,8 +146,7 @@ const FieldCard: FC<{
       }
       value={
         <FieldHTML
-          text={value_plain}
+          text={value_emojified}
-          textEmojified={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/flavours/glitch/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 '@/flavours/glitch/actions/modal';
 import FollowRequestNoteContainer from '@/flavours/glitch/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', {
+        className={classNames(!!account.moved && classes.moved)}
-          inactive: !!account.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={classes.barWrapper}>
-          <div
+          <div className={classes.avatarWrapper}>
-            className={classNames(
-              'account__header__tabs',
-              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
+          <div className={classes.displayNameWrapper}>
-            className={classNames(
-              'account__header__tabs__name',
-              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={classes.bioButtonsWrapper}>
-              <div className='account__header__bio'>
+              {me && account.id !== me && <AccountNote accountId={accountId} />}
-                {me && account.id !== me && (
-                  <AccountNote accountId={accountId} />
-                )}
 
-                <AccountBio
+              <AccountBio
-                  showDropdown
+                showDropdown
-                  accountId={accountId}
+                accountId={accountId}
-                  className={classNames(
+                className={classes.bio}
-                    'account__header__content',
+              />
-                    classes.bio,
-                  )}
-                />
 
-                <AccountHeaderFields accountId={accountId} />
+              <AccountHeaderFields accountId={accountId} />
-              </div>
 
               {!me && account.email_subscriptions && (
                 <AccountSubscriptionForm accountId={accountId} />

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/components/hover_card_account.tsx

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

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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 '@/flavours/glitch/components/column';
 import { ColumnHeader } from '@/flavours/glitch/components/column_header';
 import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator';

app/javascript/flavours/glitch/features/account_featured/index.tsx

@@ -24,6 +24,7 @@ import Column from '@/flavours/glitch/features/ui/components/column';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import { useAccountId } from '@/flavours/glitch/hooks/useAccountId';
 import { useAccountVisibility } from '@/flavours/glitch/hooks/useAccountVisibility';
+import { me } from '@/flavours/glitch/initial_state';
 import { useAppDispatch, useAppSelector } from '@/flavours/glitch/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}>
+              {accountId === me && (
-                <FormattedMessage
+                <SubheadingLink to='/collections/new' icon={AddIcon}>
-                  id='account.featured.new_collection'
+                  <FormattedMessage
-                  defaultMessage='New collection'
+                    id='account.featured.new_collection'
-                />
+                    defaultMessage='New collection'
-              </SubheadingLink>
+                  />
+                </SubheadingLink>
+              )}
             </Subheading>
             {hasCollections ? (
               <ItemList>

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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 &&
-        (collectionOwnerId === me &&
+        (relationship.following || relationship.requested);
-          (relationship.following || relationship.requested));
 
       if (withoutButton) return null;
 

app/javascript/flavours/glitch/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/flavours/glitch/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 '@/flavours/glitch/components/callout';
 import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId';
 import { initialState } from '@/flavours/glitch/initial_state';

app/javascript/flavours/glitch/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 '@/flavours/glitch/components/tab_list';
 import { Column } from 'flavours/glitch/components/column';
 import { ColumnHeader } from 'flavours/glitch/components/column_header';

app/javascript/flavours/glitch/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/flavours/glitch/features/compose/index.tsx

@@ -2,11 +2,12 @@ import { useEffect, useCallback, useState } 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/flavours/glitch/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, useSelector } from 'react-redux';
 

app/javascript/flavours/glitch/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/flavours/glitch/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 'flavours/glitch/api/domain_blocks';

app/javascript/flavours/glitch/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 'flavours/glitch/components/column';
 import type { ColumnRef } from 'flavours/glitch/components/column';

app/javascript/flavours/glitch/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 {

app/javascript/flavours/glitch/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/flavours/glitch/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 '@/flavours/glitch/identity_context';

app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx

@@ -8,11 +8,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 '@/flavours/glitch/components/account_bio';
 import { Avatar } from '@/flavours/glitch/components/avatar';
 import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { IconButton } from '@/flavours/glitch/components/icon_button';
 import { injectIntl } from '@/flavours/glitch/components/intl';
-import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
 import { Permalink } from '@/flavours/glitch/components/permalink';
 
 const messages = defineMessages({
@@ -40,11 +40,7 @@ class AccountAuthorize extends ImmutablePureComponent {
             <DisplayName account={account} />
           </Permalink>
 
-          <EmojiHTML
+          <AccountBio accountId={account.id} />
-            className='account__header__content translate'
-            htmlString={account.get('note_emojified')}
-            extraEmojis={account.get('emojis')}
-          />
         </div>
 
         <div className='account--panel'>

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/features/followers/components/list.tsx

@@ -30,6 +30,7 @@ interface AccountListProps {
   list?: AccountList | null;
   loadMore: () => void;
   prependAccountId?: string | null;
+  withoutFollowsYouBadge?: boolean;
   scrollKey: string;
 }
 
@@ -42,6 +43,7 @@ export const AccountList: FC<AccountListProps> = ({
   list,
   loadMore,
   prependAccountId,
+  withoutFollowsYouBadge,
   scrollKey,
 }) => {
   const account = useAccount(accountId);
@@ -59,6 +61,7 @@ export const AccountList: FC<AccountListProps> = ({
           key={followerId}
           accountId={followerId}
           withBio={false}
+          badge={withoutFollowsYouBadge ? false : null}
         />
       )) ?? [];
 
@@ -68,11 +71,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 columnRef = useRef<ColumnRef>(null);
   const handleHeaderClick = useCallback(() => {

app/javascript/flavours/glitch/features/followers/index.tsx

@@ -12,6 +12,7 @@ import {
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import { useAccountId } from '@/flavours/glitch/hooks/useAccountId';
 import { useRelationship } from '@/flavours/glitch/hooks/useRelationship';
+import { me } from '@/flavours/glitch/initial_state';
 import { selectUserListWithoutMe } from '@/flavours/glitch/selectors/user_lists';
 import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
 
@@ -88,6 +89,7 @@ const Followers: FC = () => {
       list={followerList}
       loadMore={loadMore}
       prependAccountId={followerId}
+      withoutFollowsYouBadge={accountId === me}
       scrollKey='followers'
     />
   );

app/javascript/flavours/glitch/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 'flavours/glitch/components/column';
 

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/features/interaction_modal/index.tsx

@@ -483,11 +483,19 @@ const InteractionModal: React.FC<{
           />
         </h3>
         <p>
-          <FormattedMessage
+          {intent === 'follow' ? (
-            id='interaction_modal.action'
+            <FormattedMessage
-            defaultMessage="To interact with {name}'s post, you need to sign into your account on whatever Mastodon server you use."
+              id='interaction_modal.action_follow'
-            values={{ name }}
+              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/flavours/glitch/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/flavours/glitch/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 'flavours/glitch/actions/timelines';
 import { Column } from 'flavours/glitch/components/column';

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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 'flavours/glitch/actions/accounts';

app/javascript/flavours/glitch/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 'flavours/glitch/actions/lists';

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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 'flavours/glitch/api/instance';
 import type { ApiPrivacyPolicyJSON } from 'flavours/glitch/api_types/instance';

app/javascript/flavours/glitch/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/flavours/glitch/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 'flavours/glitch/actions/interactions_typed';
 import { ColumnHeader } from 'flavours/glitch/components/column_header';

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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/flavours/glitch/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 'flavours/glitch/api/instance';
 import type { ApiTermsOfServiceJSON } from 'flavours/glitch/api_types/instance';
 import { Column } from 'flavours/glitch/components/column';

app/javascript/flavours/glitch/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 'flavours/glitch/components/button';

app/javascript/flavours/glitch/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 'flavours/glitch/components/modal_root';
 import { AltTextModal } from 'flavours/glitch/features/alt_text_modal';

app/javascript/flavours/glitch/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/flavours/glitch/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/flavours/glitch/styles/mastodon/accounts.scss

@@ -238,75 +238,6 @@
   border-color: var(--color-border-on-bg-warning-softer);
 }
 
-.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/flavours/glitch/styles/mastodon/admin.scss

@@ -1050,35 +1050,121 @@ a.name-tag,
     max-width: 100%;
   }
 
-  .account__header__fields,
+  &__fields,
-  .account__header__content {
+  &__content {
     background: var(--color-bg-primary);
     border: 1px solid var(--color-border-primary);
     border-radius: 4px;
     height: 100%;
   }
 
-  .account__header__fields {
+  &__fields {
-    margin: 0;
     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 {
+    .verified {
-      border-radius: 0 4px 0 0;
+      border: 1px solid var(--color-border-success-soft);
-    }
+      background: var(--color-bg-success-softest);
 
-    .verified a {
+      a {
-      color: var(--color-text-success);
+        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/flavours/glitch/styles/mastodon/components.scss

@@ -8654,372 +8654,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: 8px 16px; // glitch-soc: padding purposefuly reduced
-        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;
 }

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}
+          text={name_emojified}
-          textEmojified={name_emojified}
           textHasCustomEmoji={nameHasEmojis}
           className='translate'
           isOverflowing={isLabelOverflowing}
@@ -149,8 +146,7 @@ const FieldCard: FC<{
       }
       value={
         <FieldHTML
-          text={value_plain}
+          text={value_emojified}
-          textEmojified={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', {
+        className={classNames(!!account.moved && classes.moved)}
-          inactive: !!account.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={classes.barWrapper}>
-          <div
+          <div className={classes.avatarWrapper}>
-            className={classNames(
-              'account__header__tabs',
-              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
+          <div className={classes.displayNameWrapper}>
-            className={classNames(
-              'account__header__tabs__name',
-              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={classes.bioButtonsWrapper}>
-              <div className='account__header__bio'>
+              {me && account.id !== me && <AccountNote accountId={accountId} />}
-                {me && account.id !== me && (
-                  <AccountNote accountId={accountId} />
-                )}
 
-                <AccountBio
+              <AccountBio
-                  showDropdown
+                showDropdown
-                  accountId={accountId}
+                accountId={accountId}
-                  className={classNames(
+                className={classes.bio}
-                    'account__header__content',
+              />
-                    classes.bio,
-                  )}
-                />
 
-                <AccountHeaderFields accountId={accountId} />
+              <AccountHeaderFields accountId={accountId} />
-              </div>
 
               {!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 ? (
+                    <span>
-                      <FormattedMessage
+                      {isMutual ? (
-                        id='account.mutual'
+                        <FormattedMessage
-                        defaultMessage='You follow each other'
+                          id='account.mutual'
-                      />
+                          defaultMessage='You follow each other'
-                    ) : (
+                        />
-                      <FormattedMessage
+                      ) : (
-                        id='account.follows_you'
+                        <FormattedMessage
-                        defaultMessage='Follows you'
+                          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}>
+              {accountId === me && (
-                <FormattedMessage
+                <SubheadingLink to='/collections/new' icon={AddIcon}>
-                  id='account.featured.new_collection'
+                  <FormattedMessage
-                  defaultMessage='New collection'
+                    id='account.featured.new_collection'
-                />
+                    defaultMessage='New collection'
-              </SubheadingLink>
+                  />
+                </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 &&
-        (collectionOwnerId === me &&
+        (relationship.following || relationship.requested);
-          (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
+          <AccountBio accountId={account.id} />
-            className='account__header__content translate'
-            htmlString={account.get('note_emojified')}
-            extraEmojis={account.get('emojis')}
-          />
         </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'
     />
   );