[Glitch] Profile redesign: Badges

Port 22ec368574 to glitch-soc

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

app/javascript/flavours/glitch/components/badge.jsx

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
-import PersonIcon from '@/material-icons/400-24px/person.svg?react';
-import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
-
-
-export const Badge = ({ icon = <PersonIcon />, label, domain, roleId }) => (
-  <div className='account-role' data-account-role-id={roleId}>
-    {icon}
-    {label}
-    {domain && <span className='account-role__domain'>{domain}</span>}
-  </div>
-);
-
-Badge.propTypes = {
-  icon: PropTypes.node,
-  label: PropTypes.node,
-  domain: PropTypes.node,
-  roleId: PropTypes.string
-};
-
-export const GroupBadge = () => (
-  <Badge icon={<GroupsIcon />} label={<FormattedMessage id='account.badges.group' defaultMessage='Group' />} />
-);
-
-export const AutomatedBadge = () => (
-  <Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
-);

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

@@ -0,0 +1,46 @@
+import type { FC, ReactNode } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
+import PersonIcon from '@/material-icons/400-24px/person.svg?react';
+import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
+
+export const Badge: FC<{
+  label: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  domain?: ReactNode;
+  roleId?: string;
+}> = ({ icon = <PersonIcon />, label, className, domain, roleId }) => (
+  <div
+    className={classNames('account-role', className)}
+    data-account-role-id={roleId}
+  >
+    {icon}
+    {label}
+    {domain && <span className='account-role__domain'>{domain}</span>}
+  </div>
+);
+
+export const GroupBadge: FC<{ className?: string }> = ({ className }) => (
+  <Badge
+    icon={<GroupsIcon />}
+    label={
+      <FormattedMessage id='account.badges.group' defaultMessage='Group' />
+    }
+    className={className}
+  />
+);
+
+export const AutomatedBadge: FC<{ className?: string }> = ({ className }) => (
+  <Badge
+    icon={<SmartToyIcon />}
+    label={
+      <FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
+    }
+    className={className}
+  />
+);

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

@@ -1,12 +1,19 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
 import {
   AutomatedBadge,
   Badge,
   GroupBadge,
 } 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 { useAppSelector } from '@/flavours/glitch/store';
+import IconAdmin from '@/images/icons/icon_admin.svg?react';
+
+import { isRedesignEnabled } from '../common';
+
+import classes from './redesign.module.scss';
 
 export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
   const account = useAccount(accountId);
@@ -19,22 +26,32 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
     return null;
   }
 
+  const className = isRedesignEnabled() ? classes.badge : '';
+
   if (account.bot) {
-    badges.push(<AutomatedBadge key='bot-badge' />);
+    badges.push(<AutomatedBadge key='bot-badge' className={className} />);
   } else if (account.group) {
-    badges.push(<GroupBadge key='group-badge' />);
+    badges.push(<GroupBadge key='group-badge' className={className} />);
   }
 
   const domain = account.acct.includes('@')
     ? account.acct.split('@')[1]
     : localDomain;
   account.roles.forEach((role) => {
+    let icon: ReactNode = undefined;
+    if (isAdminBadge(role)) {
+      icon = (
+        <Icon icon={IconAdmin} id='badge-admin' className={classes.badgeIcon} />
+      );
+    }
     badges.push(
       <Badge
-        key={`role-badge-${role.get('id')}`}
-        label={<span>{role.get('name')}</span>}
-        domain={domain}
-        roleId={role.get('id')}
+        key={role.id}
+        label={role.name}
+        className={className}
+        domain={isRedesignEnabled() ? `(${domain})` : domain}
+        roleId={role.id}
+        icon={icon}
       />,
     );
   });
@@ -43,5 +60,10 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
     return null;
   }
 
-  return <div className='account__header__badges'>{badges}</div>;
+  return <div className={'account__header__badges'}>{badges}</div>;
 };
+
+function isAdminBadge(role: AccountRole) {
+  const name = role.name.toLowerCase();
+  return isRedesignEnabled() && (name === 'admin' || name === 'owner');
+}

app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss

@@ -39,6 +39,27 @@ h1.name > small {
   }
 }
 
+.badge {
+  background-color: var(--color-bg-secondary);
+  border: none;
+  color: var(--color-text-secondary);
+  font-weight: 600;
+
+  > span {
+    font-weight: unset;
+    opacity: 1;
+  }
+}
+
+svg.badgeIcon {
+  opacity: 1;
+  fill: revert-layer;
+
+  path {
+    fill: revert-layer;
+  }
+}
+
 .fieldList {
   margin-top: 16px;
 }