Merge commit '8fa91b4b81951f884a773d0aa56fc4f1a48da03e' into glitch-soc/merge-upstream

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -156,7 +156,7 @@ export const AccountHeader: React.FC<{
           <div
             className={classNames(
               'account__header__tabs__name',
-              redesignClasses.nameWrapper,
+              redesignClasses.displayNameWrapper,
             )}
           >
             <AccountName accountId={accountId} />

app/javascript/mastodon/features/account_timeline/components/account_name.tsx

@@ -7,9 +7,12 @@ import classNames from 'classnames';
 
 import Overlay from 'react-overlays/esm/Overlay';
 
+import FollowerIcon from '@/images/icons/icon_follower.svg?react';
+import { Badge } from '@/mastodon/components/badge';
 import { DisplayName } from '@/mastodon/components/display_name';
 import { Icon } from '@/mastodon/components/icon';
 import { useAccount } from '@/mastodon/hooks/useAccount';
+import { useRelationship } from '@/mastodon/hooks/useRelationship';
 import { useAppSelector } from '@/mastodon/store';
 import AtIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import HelpIcon from '@/material-icons/400-24px/help.svg?react';
@@ -35,6 +38,7 @@ export const AccountName: FC<{ accountId: string }> = ({ accountId }) => {
   const localDomain = useAppSelector(
     (state) => state.meta.get('domain') as string,
   );
+  const relationship = useRelationship(accountId);
 
   if (!account) {
     return null;
@@ -43,10 +47,23 @@ export const AccountName: FC<{ accountId: string }> = ({ accountId }) => {
   const [username = '', domain = localDomain] = account.acct.split('@');
 
   return (
-    <div className={classes.name}>
-      <h1>
-        <DisplayName account={account} variant='simple' />
-      </h1>
+    <div className={classes.nameWrapper}>
+      <div className={classes.name}>
+        <h1>
+          <DisplayName account={account} variant='simple' />
+        </h1>
+        {relationship?.followed_by && (
+          <Badge
+            icon={<FollowerIcon className={classes.followerBadgeIcon} />}
+            label={
+              <FormattedMessage
+                id='account.follows_you'
+                defaultMessage='Follows you'
+              />
+            }
+          />
+        )}
+      </div>
       <p className={classes.username}>
         @{username}@{domain}
         <AccountNameHelp

app/javascript/mastodon/features/account_timeline/components/badges.tsx

@@ -3,9 +3,6 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import classNames from 'classnames';
-
-import IconPinned from '@/images/icons/icon_pinned.svg?react';
 import { fetchRelationships } from '@/mastodon/actions/accounts';
 import {
   AdminBadge,
@@ -15,13 +12,10 @@ import {
   GroupBadge,
   MutedBadge,
 } from '@/mastodon/components/badge';
-import { Icon } from '@/mastodon/components/icon';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import type { AccountRole } from '@/mastodon/models/account';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
-import classes from './redesign.module.scss';
-
 export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
   const account = useAccount(accountId);
   const localDomain = useAppSelector(
@@ -53,7 +47,6 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
         <AdminBadge
           key={role.id}
           label={role.name}
-          className={classes.badge}
           domain={`(${domain})`}
           roleId={role.id}
         />,
@@ -63,7 +56,6 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
         <Badge
           key={role.id}
           label={role.name}
-          className={classes.badge}
           domain={`(${domain})`}
           roleId={role.id}
         />,
@@ -72,25 +64,19 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
   });
 
   if (account.bot) {
-    badges.push(<AutomatedBadge key='bot-badge' className={classes.badge} />);
+    badges.push(<AutomatedBadge key='bot-badge' />);
   }
   if (account.group) {
-    badges.push(<GroupBadge key='group-badge' className={classes.badge} />);
+    badges.push(<GroupBadge key='group-badge' />);
   }
   if (relationship) {
     if (relationship.blocking) {
-      badges.push(
-        <BlockedBadge
-          key='blocking'
-          className={classNames(classes.badge, classes.badgeBlocked)}
-        />,
-      );
+      badges.push(<BlockedBadge key='blocking' />);
     }
     if (relationship.domain_blocking) {
       badges.push(
         <BlockedBadge
           key='domain-blocking'
-          className={classNames(classes.badge, classes.badgeBlocked)}
           domain={domain}
           label={
             <FormattedMessage
@@ -105,7 +91,6 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
       badges.push(
         <MutedBadge
           key='muted-badge'
-          className={classNames(classes.badge, classes.badgeMuted)}
           expiresAt={relationship.muting_expires_at}
         />,
       );
@@ -119,16 +104,6 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
   return <div className={'account__header__badges'}>{badges}</div>;
 };
 
-export const PinnedBadge: FC = () => (
-  <Badge
-    className={classes.badge}
-    icon={<Icon id='pinned' icon={IconPinned} />}
-    label={
-      <FormattedMessage id='account.timeline.pinned' defaultMessage='Pinned' />
-    }
-  />
-);
-
 function isAdminBadge(role: AccountRole) {
   const name = role.name.toLowerCase();
   return name === 'admin' || name === 'owner';

app/javascript/mastodon/features/account_timeline/components/redesign.module.scss

@@ -17,14 +17,20 @@
   padding-top: 0;
 }
 
-.nameWrapper {
+.displayNameWrapper {
   display: flex;
   align-items: start;
   gap: 16px;
 }
 
-.name {
+.nameWrapper {
   flex-grow: 1;
+}
+
+.name {
+  display: flex;
+  gap: 2px;
+  align-items: baseline;
 
   > h1 {
     font-size: 22px;
@@ -33,6 +39,10 @@
   }
 }
 
+.followerBadgeIcon {
+  color: var(--color-text-secondary);
+}
+
 .username {
   display: flex;
   font-size: 13px;
@@ -165,38 +175,6 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   font-size: 15px;
 }
 
-.badge {
-  background-color: var(--color-bg-secondary);
-  border: none;
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  padding: 4px;
-  font-size: 13px;
-
-  :global(.account__header__badges) > & {
-    line-height: 1;
-  }
-
-  > span {
-    font-weight: unset;
-    opacity: 1;
-  }
-}
-
-.badgeMuted {
-  background-color: var(--color-bg-inverted);
-  color: var(--color-text-inverted);
-}
-
-.badgeBlocked {
-  background-color: var(--color-bg-error-base);
-  color: var(--color-text-on-error-base);
-}
-
-svg.badgeIcon {
-  opacity: 1;
-}
-
 .note {
   margin-bottom: 16px;
 }

app/javascript/mastodon/features/account_timeline/v2/pinned_statuses.tsx

@@ -11,6 +11,7 @@ import {
   expandTimelineByKey,
   timelineKey,
 } from '@/mastodon/actions/timelines_typed';
+import { Badge } from '@/mastodon/components/badge';
 import { Button } from '@/mastodon/components/button';
 import { Icon } from '@/mastodon/components/icon';
 import { StatusHeader } from '@/mastodon/components/status/header';
@@ -18,8 +19,6 @@ import type { StatusHeaderRenderFn } from '@/mastodon/components/status/header';
 import { selectTimelineByKey } from '@/mastodon/selectors/timelines';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
-import { PinnedBadge } from '../components/badges';
-
 import { useAccountContext } from './context';
 import classes from './styles.module.scss';
 
@@ -79,7 +78,16 @@ export const renderPinnedStatusHeader: StatusHeaderRenderFn = ({
   }
   return (
     <StatusHeader {...args} className={classes.pinnedStatusHeader}>
-      <PinnedBadge />
+      <Badge
+        className={classes.pinnedBadge}
+        icon={<Icon id='pinned' icon={IconPinned} />}
+        label={
+          <FormattedMessage
+            id='account.timeline.pinned'
+            defaultMessage='Pinned'
+          />
+        }
+      />
     </StatusHeader>
   );
 };

app/javascript/mastodon/features/account_timeline/v2/styles.module.scss

@@ -118,8 +118,8 @@
   > :global(.status__display-name) {
     grid-row: span 2;
   }
+}
 
-  > :global(.account-role) {
-    justify-self: end;
-  }
+.pinnedBadge {
+  justify-self: end;
 }