[Glitch] Update Profile Featured tab to latest designs

Port 05bed6f3d8fc57edfa699e3aac614d2989ef1f73 to glitch-soc

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

app/javascript/flavours/glitch/components/empty_state/empty_state.module.scss

@@ -3,16 +3,20 @@
   flex-direction: column;
   align-items: center;
   max-width: 600px;
-  padding: 20px;
+  padding: 24px;
   gap: 16px;
   text-align: center;
   color: var(--color-text-primary);
 }
 
 .content {
+  max-width: 300px;
+
   svg,
   img {
-    width: 240px;
+    width: 200px;
+    aspect-ratio: 1;
+    object-fit: contain;
     max-width: 100%;
     margin-bottom: 16px;
   }
@@ -20,11 +24,14 @@
   h3 {
     font-size: 17px;
     font-weight: 500;
+    text-wrap: balance;
+    line-height: 1.2;
   }
 
   p {
-    font-size: 15px;
     margin-top: 8px;
+    font-size: 15px;
     color: var(--color-text-secondary);
+    text-wrap: pretty;
   }
 }

app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx

@@ -49,8 +49,14 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
           image={image}
           title={
             <FormattedMessage
-              id='empty_column.account_featured_self.no_collections'
+              id='empty_column.account_featured_self.showcase_accounts'
-              defaultMessage='No collections yet'
+              defaultMessage='Showcase your favorite accounts'
+            />
+          }
+          message={
+            <FormattedMessage
+              id='empty_column.account_featured_self.showcase_accounts_desc'
+              defaultMessage='Collections are curated lists of accounts to help others discover more of the Fediverse.'
             />
           }
         >
@@ -72,7 +78,7 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
       message = (
         <FormattedMessage
           id='empty_column.account_featured_self.pre_collections_desc'
-          defaultMessage='Collections (coming in Mastodon 4.6) allows you to create your own curated lists of accounts to recommend to others.'
+          defaultMessage='Collections (coming in Mastodon 4.6) allow you to create your own curated lists of accounts to recommend to others.'
         />
       );
     }
@@ -93,47 +99,21 @@ export const EmptyMessage: React.FC<EmptyMessageProps> = ({
       />
     );
   } else {
-    // Standard other account empty state.
+    if (acct) {
-    title = (
+      title = (
-      <FormattedMessage
+        <FormattedMessage
-        id='empty_column.account_featured_other.title'
+          id='empty_column.account_featured.other'
-        defaultMessage='Nothing to see here'
+          defaultMessage='{acct} has not featured anything yet.'
-      />
+          values={{ acct }}
-    );
+        />
-    if (hasCollections) {
+      );
-      if (acct) {
-        message = (
-          <FormattedMessage
-            id='empty_column.account_featured_other.no_collections_desc'
-            defaultMessage='{acct} hasn’t created any collections yet.'
-            values={{ acct }}
-          />
-        );
-      } else {
-        message = (
-          <FormattedMessage
-            id='empty_column.account_featured_unknown.no_collections_desc'
-            defaultMessage='This account hasn’t created any collections yet.'
-          />
-        );
-      }
     } else {
-      if (acct) {
+      title = (
-        message = (
+        <FormattedMessage
-          <FormattedMessage
+          id='empty_column.account_featured_unknown.other'
-            id='empty_column.account_featured.other'
+          defaultMessage='This account has not featured anything yet.'
-            defaultMessage='{acct} hasn’t featured anything yet.'
+        />
-            values={{ acct }}
+      );
-          />
-        );
-      } else {
-        message = (
-          <FormattedMessage
-            id='empty_column.account_featured_unknown.other'
-            defaultMessage='This account hasn’t featured anything yet.'
-          />
-        );
-      }
     }
   }
 

app/javascript/flavours/glitch/features/account_featured/components/subheading.module.scss

@@ -0,0 +1,37 @@
+.subheading {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 52px;
+  padding: 12px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: var(--color-text-primary);
+  background: var(--color-bg-secondary);
+}
+
+.link {
+  display: flex;
+  padding-block: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: none;
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: var(--outline-focus-default);
+    outline-offset: 2px;
+  }
+
+  :global(.icon) {
+    width: 18px;
+    height: 18px;
+  }
+}

app/javascript/flavours/glitch/features/account_featured/components/subheading.tsx

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import type { IconProp } from '@/flavours/glitch/components/icon';
+import { Icon } from '@/flavours/glitch/components/icon';
+import { polymorphicForwardRef } from '@/types/polymorphic';
+
+import classes from './subheading.module.scss';
+
+export const Subheading = polymorphicForwardRef<'h2'>(
+  ({ as: Component = 'h2', children, className, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={classNames(classes.subheading, className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+
+interface SubheadingLinkProps extends ComponentPropsWithoutRef<typeof Link> {
+  icon: IconProp;
+}
+
+export const SubheadingLink: React.FC<SubheadingLinkProps> = ({
+  icon,
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <Link className={classNames(classes.link, className)} {...props}>
+      <Icon id='subheading-icon' icon={icon} />
+      {children}
+    </Link>
+  );
+};

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

@@ -6,9 +6,10 @@ import { useHistory } from 'react-router';
 
 import { List as ImmutableList } from 'immutable';
 
+import { AccountListItem } from '@/flavours/glitch/components/account_list_item';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import { fetchEndorsedAccounts } from 'flavours/glitch/actions/accounts';
-import { Account } from 'flavours/glitch/components/account';
 import { ColumnBackButton } from 'flavours/glitch/components/column_back_button';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import { RemoteHint } from 'flavours/glitch/components/remote_hint';
@@ -28,10 +29,11 @@ import {
 } from 'flavours/glitch/reducers/slices/collections';
 import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
 
-import { CollectionListItem } from '../collections/detail/collection_list_item';
+import { CollectionListItem } from '../collections/components/collection_list_item';
 import { areCollectionsEnabled } from '../collections/utils';
 
 import { EmptyMessage } from './components/empty_message';
+import { Subheading, SubheadingLink } from './components/subheading';
 
 const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
   multiColumn,
@@ -114,14 +116,44 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
         {accountId && (
           <AccountHeader accountId={accountId} hideTabs={forceEmptyState} />
         )}
+        {!featuredAccountIds.isEmpty() && (
+          <>
+            <Subheading as='h2'>
+              <FormattedMessage
+                id='account.featured.accounts'
+                defaultMessage='Profiles'
+              />
+            </Subheading>
+            <ItemList>
+              {featuredAccountIds.map((featuredAccountId, index) => (
+                <Article
+                  focusable
+                  key={featuredAccountId}
+                  aria-posinset={index + 1}
+                  aria-setsize={featuredAccountIds.size}
+                >
+                  <AccountListItem accountId={featuredAccountId} />
+                </Article>
+              ))}
+            </ItemList>
+          </>
+        )}
         {listedCollections.length > 0 && status === 'idle' && (
           <>
-            <h4 className='column-subheading'>
+            <Subheading as='header'>
-              <FormattedMessage
+              <h2>
-                id='account.featured.collections'
+                <FormattedMessage
-                defaultMessage='Collections'
+                  id='account.featured.collections'
-              />
+                  defaultMessage='Collections'
-            </h4>
+                />
+              </h2>
+              <SubheadingLink to='/collections/new' icon={AddIcon}>
+                <FormattedMessage
+                  id='account.featured.new_collection'
+                  defaultMessage='New collection'
+                />
+              </SubheadingLink>
+            </Subheading>
             <ItemList>
               {listedCollections.map((item, index) => (
                 <CollectionListItem
@@ -136,28 +168,6 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
             </ItemList>
           </>
         )}
-        {!featuredAccountIds.isEmpty() && (
-          <>
-            <h4 className='column-subheading'>
-              <FormattedMessage
-                id='account.featured.accounts'
-                defaultMessage='Profiles'
-              />
-            </h4>
-            <ItemList>
-              {featuredAccountIds.map((featuredAccountId, index) => (
-                <Article
-                  focusable
-                  key={featuredAccountId}
-                  aria-posinset={index + 1}
-                  aria-setsize={featuredAccountIds.size}
-                >
-                  <Account id={featuredAccountId} />
-                </Article>
-              ))}
-            </ItemList>
-          </>
-        )}
         <RemoteHint accountId={accountId} />
       </Scrollable>
     </Column>

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

@@ -8,8 +8,6 @@ import { NavLink } from 'react-router-dom';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import { useAccountId } from '@/flavours/glitch/hooks/useAccountId';
 
-import { areCollectionsEnabled } from '../../collections/utils';
-
 import classes from './styles.module.scss';
 
 const isActive: Required<NavLinkProps>['isActive'] = (match, location) =>
@@ -41,14 +39,7 @@ export const AccountTabs: FC = () => {
       )}
       {show_featured && (
         <NavLink exact to={`/@${acct}/featured`}>
-          {areCollectionsEnabled() ? (
+          <FormattedMessage id='account.featured' defaultMessage='Featured' />
-            <FormattedMessage
-              id='account.featured.collections'
-              defaultMessage='Collections'
-            />
-          ) : (
-            <FormattedMessage id='account.featured' defaultMessage='Featured' />
-          )}
         </NavLink>
       )}
     </div>

app/javascript/flavours/glitch/features/collections/components/collection_list_item.module.scss

@@ -1,8 +1,7 @@
 .wrapper {
   display: flex;
   align-items: start;
-  margin-inline: 24px;
+  padding: 12px 16px;
-  padding-block: 12px;
   gap: 16px;
 
   &:not(.wrapperWithoutBorder) {

app/javascript/flavours/glitch/features/collections/components/collection_list_item.tsx

@@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
+import { CollectionMenu } from '@/flavours/glitch/features/collections/components/collection_menu';
 import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
 import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections';
 import { AvatarById } from 'flavours/glitch/components/avatar';
@@ -15,7 +16,6 @@ import { useAccount } from 'flavours/glitch/hooks/useAccount';
 import { domain } from 'flavours/glitch/initial_state';
 
 import classes from './collection_list_item.module.scss';
-import { CollectionMenu } from './collection_menu';
 
 export const AvatarGrid: React.FC<{
   accountIds: (string | undefined)[];

app/javascript/flavours/glitch/features/collections/components/share_modal.tsx

@@ -20,7 +20,8 @@ import {
 } from 'flavours/glitch/components/modal_shell';
 import { useAppDispatch } from 'flavours/glitch/store';
 
-import { AuthorNote } from '.';
+import { AuthorNote } from '../detail';
+
 import classes from './share_modal.module.scss';
 
 const messages = defineMessages({

app/javascript/flavours/glitch/features/collections/detail/index.tsx

@@ -23,8 +23,9 @@ import { domain, me } from 'flavours/glitch/initial_state';
 import { fetchCollection } from 'flavours/glitch/reducers/slices/collections';
 import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
 
+import { CollectionMenu } from '../components/collection_menu';
+
 import { CollectionAccountsList } from './accounts_list';
-import { CollectionMenu } from './collection_menu';
 import { useConfirmRevoke } from './revoke_collection_inclusion_modal';
 import classes from './styles.module.scss';
 
@@ -66,7 +67,7 @@ export const AuthorNote: React.FC<{ id: string }> = ({ id }) => {
   );
 };
 
-export const RevokeControls: React.FC<{
+const RevokeControls: React.FC<{
   collection: ApiCollectionJSON;
 }> = ({ collection }) => {
   const authorAccount = useAccount(collection.account_id);

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

@@ -21,7 +21,7 @@ import {
 } from 'flavours/glitch/reducers/slices/collections';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
 
-import { CollectionListItem } from './detail/collection_list_item';
+import { CollectionListItem } from './components/collection_list_item';
 import { messages as editorMessages } from './editor';
 
 const messages = defineMessages({

app/javascript/flavours/glitch/features/ui/components/column_subheading.jsx

@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ColumnSubheading = ({ text }) => {
-  return (
-    <div className='column-subheading'>
-      {text}
-    </div>
-  );
-};
-
-ColumnSubheading.propTypes = {
-  text: PropTypes.string.isRequired,
-};
-
-export default ColumnSubheading;

app/javascript/flavours/glitch/features/ui/components/modal_root.jsx

@@ -85,7 +85,7 @@ export const MODAL_COMPONENTS = {
   'DOMAIN_BLOCK': DomainBlockModal,
   'REPORT': ReportModal,
   'REPORT_COLLECTION': ReportCollectionModal,
-  'SHARE_COLLECTION': () => import('@/flavours/glitch/features/collections/detail/share_modal').then(module => ({ default: module.CollectionShareModal })),
+  'SHARE_COLLECTION': () => import('@/flavours/glitch/features/collections/components/share_modal').then(module => ({ default: module.CollectionShareModal })),
   'REVOKE_COLLECTION_INCLUSION': () => import('@/flavours/glitch/features/collections/detail/revoke_collection_inclusion_modal').then(module => ({ default: module.RevokeCollectionInclusionModal })),
   'SETTINGS': SettingsModal,
   'DEPRECATED_SETTINGS': () => Promise.resolve({ default: DeprecatedSettingsModal }),

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

@@ -4170,15 +4170,6 @@ a.account__display-name {
   margin: -6px 10px;
 }
 
-.column-subheading {
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  padding: 12px 24px;
-  font-size: 13px;
-  font-weight: 500;
-  text-transform: uppercase;
-}
-
 .getting-started__wrapper {
   flex: 0 0 auto;
 }