Show remote favicons on statuses, #258

app/soapbox/components/status.js

@@ -468,6 +468,11 @@ class Status extends ImmutablePureComponent {
                 <RelativeTimestamp timestamp={status.get('created_at')} />
               </NavLink>
 
+              {status.hasIn(['account', 'pleroma', 'favicon']) &&
+                <div className='status__favicon'>
+                  <img src={status.getIn(['account', 'pleroma', 'favicon'])} alt='' />
+                </div>}
+
               <div className='status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
                 <div className='status__avatar'>
                   <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />

app/soapbox/features/status/components/detailed_status.js

@@ -208,6 +208,11 @@ export default class DetailedStatus extends ImmutablePureComponent {
           <div className='detailed-status__meta'>
             <StatusInteractionBar status={status} />
             <div>
+              {status.hasIn(['account', 'pleroma', 'favicon']) &&
+                <div className='status__favicon'>
+                  <img src={status.getIn(['account', 'pleroma', 'favicon'])} alt='' />
+                </div>}
+
               {statusTypeIcon}<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
                 <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
               </a>

app/styles/components/detailed-status.scss

@@ -125,3 +125,8 @@
   float: left;
   margin-right: 10px;
 }
+
+.detailed-status .status__favicon {
+  float: left;
+  margin-right: 5px;
+}

app/styles/components/status.scss

@@ -635,3 +635,15 @@ a.status-card.compact:hover {
   background-size: cover;
   background-position: center center;
 }
+
+.status__favicon {
+  width: 16px;
+  height: 16px;
+  float: right;
+  margin-right: 4px;
+
+  img {
+    width: 100%;
+    max-height: 100%;
+  }
+}