[Glitch] Profile redesign: Adds a "Follows you" badge

Port 759e97fd36c4119f599d82af5604c4122b2379ad to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/badge/badge.stories.tsx

@@ -2,14 +2,20 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import CelebrationIcon from '@/material-icons/400-24px/celebration-fill.svg?react';
 
-import * as badges from './badge';
+import * as badges from '.';
 
 const meta = {
   component: badges.Badge,
   title: 'Components/Badge',
   args: {
+    domain: '',
     label: undefined,
   },
+  argTypes: {
+    domain: {
+      control: 'text',
+    },
+  },
 } satisfies Meta<typeof badges.Badge>;
 
 export default meta;

app/javascript/flavours/glitch/components/badge/index.tsx

@@ -11,28 +11,38 @@ import PersonIcon from '@/material-icons/400-24px/person.svg?react';
 import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
 import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
 
+import classes from './styles.module.scss';
+
 interface BadgeProps {
   label: ReactNode;
   icon?: ReactNode;
   className?: string;
   domain?: ReactNode;
   roleId?: string;
+  variant?:
+    | 'default'
+    | 'subtle'
+    | 'inverted'
+    | 'success'
+    | 'warning'
+    | 'danger';
 }
 
 export const Badge: FC<BadgeProps> = ({
   icon = <PersonIcon />,
+  variant = 'default',
   label,
   className,
   domain,
   roleId,
 }) => (
   <div
-    className={classNames('account-role', className)}
+    className={classNames(classes.badge, classes[variant], className)}
     data-account-role-id={roleId}
   >
     {icon}
     <span>{label}</span>
-    {domain && <span className='account-role__domain'>{domain}</span>}
+    {domain && <span className={classes.domain}>{domain}</span>}
   </div>
 );
 
@@ -89,6 +99,7 @@ export const MutedBadge: FC<
   return (
     <Badge
       icon={<VolumeOffIcon />}
+      variant='inverted'
       label={
         label ??
         (formattedDate ? (
@@ -111,6 +122,7 @@ export const MutedBadge: FC<
 export const BlockedBadge: FC<Partial<BadgeProps>> = ({ label, ...props }) => (
   <Badge
     icon={<BlockIcon />}
+    variant='danger'
     label={
       label ?? (
         <FormattedMessage

app/javascript/flavours/glitch/components/badge/styles.module.scss

@@ -0,0 +1,55 @@
+.badge {
+  color: var(--color-text-primary);
+  font-size: 13px;
+  display: inline-flex;
+  padding: 4px;
+  padding-inline-end: 8px;
+  gap: 4px;
+  border-radius: 6px;
+  align-items: center;
+
+  > svg {
+    width: auto;
+    height: 15px;
+    fill: currentColor;
+    opacity: 0.85;
+  }
+}
+
+.domain {
+  opacity: 0.75;
+  letter-spacing: 0;
+}
+
+.default {
+  background-color: var(--color-bg-secondary);
+}
+
+.subtle {
+  background-color: var(--color-bg-brand-softest);
+}
+
+.feature {
+  background-color: var(--color-bg-brand-base);
+  color: var(--color-text-on-brand-base);
+}
+
+.inverted {
+  background-color: var(--color-bg-inverted);
+  color: var(--color-text-inverted);
+}
+
+.success {
+  background-color: var(--color-bg-success-softest);
+  color: var(--color-text-success);
+}
+
+.warning {
+  background-color: var(--color-bg-warning-softest);
+  color: var(--color-text-warning);
+}
+
+.danger {
+  background-color: var(--color-bg-error-base);
+  color: var(--color-text-on-error-base);
+}

app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx

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

app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx

@@ -7,10 +7,13 @@ import classNames from 'classnames';
 
 import Overlay from 'react-overlays/esm/Overlay';
 
+import { Badge } from '@/flavours/glitch/components/badge';
 import { DisplayName } from '@/flavours/glitch/components/display_name';
 import { Icon } from '@/flavours/glitch/components/icon';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
+import { useRelationship } from '@/flavours/glitch/hooks/useRelationship';
 import { useAppSelector } from '@/flavours/glitch/store';
+import FollowerIcon from '@/images/icons/icon_follower.svg?react';
 import AtIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import HelpIcon from '@/material-icons/400-24px/help.svg?react';
 import DomainIcon from '@/material-icons/400-24px/language.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}>
+    <div className={classes.nameWrapper}>
-      <h1>
+      <div className={classes.name}>
-        <DisplayName account={account} variant='simple' />
+        <h1>
-      </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/flavours/glitch/features/account_timeline/components/badges.tsx

@@ -3,8 +3,6 @@ import type { FC } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import classNames from 'classnames';
-
 import { fetchRelationships } from '@/flavours/glitch/actions/accounts';
 import {
   AdminBadge,
@@ -14,13 +12,9 @@ import {
   GroupBadge,
   MutedBadge,
 } from '@/flavours/glitch/components/badge';
-import { Icon } from '@/flavours/glitch/components/icon';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import type { AccountRole } from '@/flavours/glitch/models/account';
 import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
-import IconPinned from '@/images/icons/icon_pinned.svg?react';
-
-import classes from './redesign.module.scss';
 
 export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
   const account = useAccount(accountId);
@@ -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(
+      badges.push(<BlockedBadge key='blocking' />);
-        <BlockedBadge
-          key='blocking'
-          className={classNames(classes.badge, classes.badgeBlocked)}
-        />,
-      );
     }
     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/flavours/glitch/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/flavours/glitch/features/account_timeline/v2/pinned_statuses.tsx

@@ -10,6 +10,7 @@ import {
   expandTimelineByKey,
   timelineKey,
 } from '@/flavours/glitch/actions/timelines_typed';
+import { Badge } from '@/flavours/glitch/components/badge';
 import { Button } from '@/flavours/glitch/components/button';
 import { Icon } from '@/flavours/glitch/components/icon';
 import { StatusHeader } from '@/flavours/glitch/components/status/header';
@@ -18,8 +19,6 @@ import { selectTimelineByKey } from '@/flavours/glitch/selectors/timelines';
 import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
 import IconPinned from '@/images/icons/icon_pinned.svg?react';
 
-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/flavours/glitch/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;
 }

app/javascript/flavours/glitch/styles/mastodon/accounts.scss

@@ -226,34 +226,6 @@
   }
 }
 
-.account-role {
-  display: inline-flex;
-  padding: 4px;
-  padding-inline-end: 8px;
-  border: 1px solid var(--color-border-brand);
-  color: var(--color-text-brand);
-  font-weight: 500;
-  font-size: 12px;
-  letter-spacing: 0.5px;
-  line-height: 16px;
-  gap: 4px;
-  border-radius: 6px;
-  align-items: center;
-
-  svg {
-    width: auto;
-    height: 15px;
-    opacity: 0.85;
-    fill: currentColor;
-  }
-
-  &__domain {
-    font-weight: 400;
-    opacity: 0.75;
-    letter-spacing: 0;
-  }
-}
-
 .simple_form .not_recommended {
   color: var(--color-text-error);
   background-color: var(--color-bg-error-softest);

app/javascript/flavours/glitch/styles/mastodon/admin.scss

@@ -1124,10 +1124,6 @@ a.name-tag,
       &:hover {
         color: var(--color-text-brand);
       }
-
-      .account-role {
-        vertical-align: middle;
-      }
     }
 
     .icon {

app/javascript/flavours/glitch/styles/mastodon/components.scss

@@ -8739,16 +8739,6 @@ noscript {
     }
   }
 
-  &__badges {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-
-    .account-role {
-      line-height: unset;
-    }
-  }
-
   &__tabs {
     display: flex;
     align-items: flex-start;