Profile redesign: Pinned posts (#37761)

Co-authored-by: diondiondion <mail@diondiondion.com>

app/javascript/mastodon/components/status.jsx

@@ -109,6 +109,7 @@ class Status extends ImmutablePureComponent {
     muted: PropTypes.bool,
     hidden: PropTypes.bool,
     unread: PropTypes.bool,
+    featured: PropTypes.bool,
     showThread: PropTypes.bool,
     showActions: PropTypes.bool,
     isQuotedPost: PropTypes.bool,
@@ -557,7 +558,7 @@ class Status extends ImmutablePureComponent {
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
 
     const header = this.props.headerRenderFn
-      ? this.props.headerRenderFn({ status, account, avatarSize, messages, onHeaderClick: this.handleHeaderClick, statusProps: this.props })
+      ? this.props.headerRenderFn({ status, account, avatarSize, messages, onHeaderClick: this.handleHeaderClick, featured })
       : (
         <StatusHeader
           status={status}

app/javascript/mastodon/components/status/header.tsx

@@ -2,6 +2,7 @@ import type { FC, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 
 import { defineMessage, useIntl } from 'react-intl';
 
+import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
 import { isStatusVisibility } from '@/mastodon/api_types/statuses';
@@ -15,8 +16,6 @@ import { LinkedDisplayName } from '../display_name';
 import { RelativeTimestamp } from '../relative_timestamp';
 import { VisibilityIcon } from '../visibility_icon';
 
-import type { StatusProps } from './types';
-
 export interface StatusHeaderProps {
   status: Status;
   account?: Account;
@@ -25,17 +24,17 @@ export interface StatusHeaderProps {
   wrapperProps?: HTMLAttributes<HTMLDivElement>;
   displayNameProps?: DisplayNameProps;
   onHeaderClick?: MouseEventHandler<HTMLDivElement>;
+  className?: string;
+  featured?: boolean;
 }
 
-export type StatusHeaderRenderFn = (
-  args: StatusHeaderProps,
-  statusProps?: StatusProps,
-) => ReactNode;
+export type StatusHeaderRenderFn = (args: StatusHeaderProps) => ReactNode;
 
 export const StatusHeader: FC<StatusHeaderProps> = ({
   status,
   account,
   children,
+  className,
   avatarSize = 48,
   wrapperProps,
   onHeaderClick,
@@ -49,7 +48,7 @@ export const StatusHeader: FC<StatusHeaderProps> = ({
       onClick={onHeaderClick}
       onAuxClick={onHeaderClick}
       {...wrapperProps}
-      className='status__info'
+      className={classNames('status__info', className)}
       /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
     >
       <Link

app/javascript/mastodon/components/status/types.ts

@@ -14,6 +14,7 @@ export interface StatusProps {
   muted?: boolean;
   hidden?: boolean;
   unread?: boolean;
+  featured?: boolean;
   showThread?: boolean;
   showActions?: boolean;
   isQuotedPost?: boolean;

app/javascript/mastodon/components/status_list.jsx

@@ -5,9 +5,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { debounce } from 'lodash';
 
-import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'mastodon/actions/timelines';
+import { TIMELINE_GAP, TIMELINE_PINNED_VIEW_ALL, TIMELINE_SUGGESTIONS } from 'mastodon/actions/timelines';
 import { RegenerationIndicator } from 'mastodon/components/regeneration_indicator';
 import { InlineFollowSuggestions } from 'mastodon/features/home_timeline/components/inline_follow_suggestions';
+import { PinnedShowAllButton } from '@/mastodon/features/account_timeline/v2/pinned_statuses';
 
 import { StatusQuoteManager } from '../components/status_quoted';
 
@@ -35,6 +36,7 @@ export default class StatusList extends ImmutablePureComponent {
     timelineId: PropTypes.string,
     lastId: PropTypes.string,
     bindToDocument: PropTypes.bool,
+    statusProps: PropTypes.object,
   };
 
   static defaultProps = {
@@ -51,7 +53,7 @@ export default class StatusList extends ImmutablePureComponent {
   };
 
   render () {
-    const { statusIds, featuredStatusIds, onLoadMore, timelineId, ...other }  = this.props;
+    const { statusIds, featuredStatusIds, onLoadMore, timelineId, statusProps, ...other }  = this.props;
     const { isLoading, isPartial } = other;
 
     if (isPartial) {
@@ -83,6 +85,7 @@ export default class StatusList extends ImmutablePureComponent {
               scrollKey={this.props.scrollKey}
               showThread
               withCounters={this.props.withCounters}
+              {...statusProps}
             />
           );
         }
@@ -90,16 +93,21 @@ export default class StatusList extends ImmutablePureComponent {
     ) : null;
 
     if (scrollableContent && featuredStatusIds) {
-      scrollableContent = featuredStatusIds.map(statusId => (
-        <StatusQuoteManager
-          key={`f-${statusId}`}
-          id={statusId}
-          featured
-          contextType={timelineId}
-          showThread
-          withCounters={this.props.withCounters}
-        />
-      )).concat(scrollableContent);
+      scrollableContent = featuredStatusIds.map(statusId => {
+        if (statusId === TIMELINE_PINNED_VIEW_ALL) {
+          return <PinnedShowAllButton key={TIMELINE_PINNED_VIEW_ALL} />
+        }
+        return (
+          <StatusQuoteManager
+            key={`f-${statusId}`}
+            id={statusId}
+            featured
+            contextType={timelineId}
+            showThread
+            withCounters={this.props.withCounters}
+            {...statusProps} />
+        );
+      }).concat(scrollableContent);
     }
 
     return (