promotion fe

app/javascript/gabsocial/components/status.js

@@ -92,6 +92,7 @@ class Status extends ImmutablePureComponent {
     cacheMediaWidth: PropTypes.func,
     cachedMediaWidth: PropTypes.number,
     group: ImmutablePropTypes.map,
+    promoted: PropTypes.bool
   };
 
   // Avoid checking props that are functions (and whose equality will always
@@ -261,7 +262,7 @@ class Status extends ImmutablePureComponent {
     let media = null;
     let statusAvatar, prepend, rebloggedByText, reblogContent;
 
-    const { intl, hidden, featured, otherAccounts, unread, showThread, group } = this.props;
+    const { intl, hidden, featured, otherAccounts, unread, showThread, group, promoted } = this.props;
 
     let { status, account, ...other } = this.props;
 
@@ -293,7 +294,14 @@ class Status extends ImmutablePureComponent {
       );
     }
 
-    if (featured) {
+    if (promoted) {
+      prepend = (
+        <div className='status__prepend'>
+          <div className='status__prepend-icon-wrapper'><Icon id='star' className='status__prepend-icon' fixedWidth /></div>
+          <FormattedMessage id='status.promoted' defaultMessage='Promoted gab' />
+        </div>
+      );
+    } else if (featured) {
       prepend = (
         <div className='status__prepend'>
           <div className='status__prepend-icon-wrapper'><Icon id='thumb-tack' className='status__prepend-icon' fixedWidth /></div>

app/javascript/gabsocial/components/status_list.js

@@ -29,12 +29,24 @@ export default class StatusList extends ImmutablePureComponent {
     withGroupAdmin: PropTypes.bool,
     onScrollToTop: PropTypes.func,
     onScroll: PropTypes.func,
+    promotion: PropTypes.object,
+    promotedStatus: ImmutablePropTypes.map,
+    fetchStatus: PropTypes.func,
   };
 
   componentDidMount() {
     this.handleDequeueTimeline();
+    this.fetchPromotedStatus();
   };
 
+  fetchPromotedStatus() {
+    const { promotion, promotedStatus, fetchStatus } = this.props;
+
+    if (promotion && !promotedStatus) {
+      fetchStatus(promotion.status_id);
+    }
+  }
+
   getFeaturedStatusCount = () => {
     return this.props.featuredStatusIds ? this.props.featuredStatusIds.size : 0;
   }
@@ -86,7 +98,7 @@ export default class StatusList extends ImmutablePureComponent {
   }
 
   render () {
-    const { statusIds, featuredStatusIds, onLoadMore, timelineId, totalQueuedItemsCount, isLoading, isPartial, withGroupAdmin, group, ...other }  = this.props;
+    const { statusIds, featuredStatusIds, onLoadMore, timelineId, totalQueuedItemsCount, isLoading, isPartial, withGroupAdmin, group, promotion, promotedStatus, ...other }  = this.props;
 
     if (isPartial) {
       return (
@@ -110,16 +122,26 @@ export default class StatusList extends ImmutablePureComponent {
           onClick={onLoadMore}
         />
       ) : (
-        <StatusContainer
-          key={statusId}
-          id={statusId}
-          onMoveUp={this.handleMoveUp}
-          onMoveDown={this.handleMoveDown}
-          contextType={timelineId}
-          group={group}
-          withGroupAdmin={withGroupAdmin}
-          showThread
-        />
+        <React.Fragment key={statusId}>
+          <StatusContainer
+            id={statusId}
+            onMoveUp={this.handleMoveUp}
+            onMoveDown={this.handleMoveDown}
+            contextType={timelineId}
+            group={group}
+            withGroupAdmin={withGroupAdmin}
+            showThread
+          />
+
+          {promotedStatus && index === promotion.position && (
+            <StatusContainer
+              id={promotion.status_id}
+              contextType={timelineId}
+              promoted
+              showThread
+            />
+          )}
+        </React.Fragment>
       ))
     ) : null;