compress boost/fave notifications more

app/javascript/flavours/glitch/components/status.js

@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import StatusPrepend from './status_prepend';
 import StatusHeader from './status_header';
+import StatusIcons from './status_icons';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -392,6 +393,7 @@ export default class Status extends ImmutablePureComponent {
           ref={handleRef}
           tabIndex='0'
         >
+          <header className='status__info'>
             {prepend && account ? (
               <StatusPrepend
                 type={prepend}
@@ -400,15 +402,22 @@ export default class Status extends ImmutablePureComponent {
                 notificationId={this.props.notificationId}
               />
             ) : null}
+            {!muted ? (
               <StatusHeader
                 status={status}
                 friend={account}
+                collapsed={isExpanded === false}
+                parseClick={parseClick}
+              />
+            ) : null}
+            <StatusIcons
+              status={status}
               mediaIcon={mediaIcon}
               collapsible={settings.getIn(['collapsed', 'enabled'])}
               collapsed={isExpanded === false}
-            parseClick={parseClick}
               setExpansion={setExpansion}
             />
+          </header>
           <StatusContent
             status={status}
             media={media}
@@ -418,7 +427,7 @@ export default class Status extends ImmutablePureComponent {
             parseClick={parseClick}
             disabled={!router}
           />
-          {isExpanded !== false ? (
+          {isExpanded !== false && !muted ? (
             <StatusActionBar
               {...other}
               status={status}

app/javascript/flavours/glitch/components/status_header.js

@@ -2,48 +2,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl } from 'react-intl';
 
 //  Mastodon imports.
 import Avatar from './avatar';
 import AvatarOverlay from './avatar_overlay';
 import DisplayName from './display_name';
-import IconButton from './icon_button';
-import VisibilityIcon from './status_visibility_icon';
 
-//  Messages for use with internationalization stuff.
-const messages = defineMessages({
-  collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
-  uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
-  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
-  private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
-  direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
-});
-
-@injectIntl
 export default class StatusHeader extends React.PureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
     friend: ImmutablePropTypes.map,
-    mediaIcon: PropTypes.string,
-    collapsible: PropTypes.bool,
-    collapsed: PropTypes.bool,
     parseClick: PropTypes.func.isRequired,
-    setExpansion: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
   };
 
-  //  Handles clicks on collapsed button
-  handleCollapsedClick = (e) => {
-    const { collapsed, setExpansion } = this.props;
-    if (e.button === 0) {
-      setExpansion(collapsed ? null : false);
-      e.preventDefault();
-    }
-  }
-
   //  Handles clicks on account name/image
   handleAccountClick = (e) => {
     const { status, parseClick } = this.props;
@@ -55,16 +27,12 @@ export default class StatusHeader extends React.PureComponent {
     const {
       status,
       friend,
-      mediaIcon,
-      collapsible,
-      collapsed,
-      intl,
     } = this.props;
 
     const account = status.get('account');
 
     return (
-      <header className='status__info'>
+      <div className='status__info__account' >
         <a
           href={account.get('url')}
           target='_blank'
@@ -87,33 +55,7 @@ export default class StatusHeader extends React.PureComponent {
         >
           <DisplayName account={account} />
         </a>
-        <div className='status__info__icons'>
-          {mediaIcon ? (
-            <i
-              className={`fa fa-fw fa-${mediaIcon}`}
-              aria-hidden='true'
-            />
-          ) : null}
-          {(
-            <VisibilityIcon visibility={status.get('visibility')} />
-          )}
-          {collapsible ? (
-            <IconButton
-              className='status__collapse-button'
-              animate flip
-              active={collapsed}
-              title={
-                collapsed ?
-                  intl.formatMessage(messages.uncollapse) :
-                  intl.formatMessage(messages.collapse)
-              }
-              icon='angle-double-up'
-              onClick={this.handleCollapsedClick}
-            />
-          ) : null}
       </div>
-
-      </header>
     );
   }
 

app/javascript/flavours/glitch/components/status_icons.js

@@ -0,0 +1,81 @@
+//  Package imports.
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, injectIntl } from 'react-intl';
+
+//  Mastodon imports.
+import IconButton from './icon_button';
+import VisibilityIcon from './status_visibility_icon';
+
+//  Messages for use with internationalization stuff.
+const messages = defineMessages({
+  collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
+  uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
+  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
+  direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
+});
+
+@injectIntl
+export default class StatusIcons extends React.PureComponent {
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    mediaIcon: PropTypes.string,
+    collapsible: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    setExpansion: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  //  Handles clicks on collapsed button
+  handleCollapsedClick = (e) => {
+    const { collapsed, setExpansion } = this.props;
+    if (e.button === 0) {
+      setExpansion(collapsed ? null : false);
+      e.preventDefault();
+    }
+  }
+
+  //  Rendering.
+  render () {
+    const {
+      status,
+      mediaIcon,
+      collapsible,
+      collapsed,
+      intl,
+    } = this.props;
+
+    return (
+      <div className='status__info__icons'>
+        {mediaIcon ? (
+          <i
+            className={`fa fa-fw fa-${mediaIcon}`}
+            aria-hidden='true'
+          />
+        ) : null}
+        {(
+          <VisibilityIcon visibility={status.get('visibility')} />
+        )}
+        {collapsible ? (
+          <IconButton
+            className='status__collapse-button'
+            animate flip
+            active={collapsed}
+            title={
+              collapsed ?
+                intl.formatMessage(messages.uncollapse) :
+                intl.formatMessage(messages.collapse)
+            }
+            icon='angle-double-up'
+            onClick={this.handleCollapsedClick}
+          />
+        ) : null}
+      </div>
+    );
+  }
+
+}

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

@@ -254,7 +254,7 @@
   }
 
   .notification__message {
-    margin: -10px 0px 10px 32px;
+    margin: -10px 0px 10px 0;
   }
 }
 
@@ -287,7 +287,7 @@
   overflow: hidden;
 }
 
-.status__info .status__display-name {
+.status__info__account .status__display-name {
   display: block;
   max-width: 100%;
   padding-right: 25px;
@@ -304,12 +304,17 @@
   flex: none;
   position: relative;
   color: lighten($ui-base-color, 26%);
+  margin-left: auto;
 
   .status__visibility-icon {
     padding-left: 6px;
   }
 }
 
+.status__info__account {
+  display: flex;
+}
+
 .status-check-box {
   border-bottom: 1px solid $ui-secondary-color;
   display: flex;
@@ -527,6 +532,12 @@
       text-decoration: none;
     }
   }
+
+  .status__content {
+    margin-top: -15px;
+    margin-bottom: 0;
+    padding-top: 0;
+  }
 }
 
 .status__relative-time,