Implement status hotkeys + spoiler expanding

4 files changed, 65 insertions, 59 deletions

diff --git a/app/javascript/themes/glitch/features/notifications/components/follow.js b/app/javascript/themes/glitch/features/notifications/components/follow.js
index 8a0f01736..96cfe83e6 100644
--- a/app/javascript/themes/glitch/features/notifications/components/follow.js
+++ b/app/javascript/themes/glitch/features/notifications/components/follow.js
@@ -14,6 +14,7 @@ import NotificationOverlayContainer from '../containers/overlay_container';
 export default class NotificationFollow extends ImmutablePureComponent {
 
   static propTypes = {
+    hidden: PropTypes.bool,
     id: PropTypes.string.isRequired,
     account: ImmutablePropTypes.map.isRequired,
     notification: ImmutablePropTypes.map.isRequired,
@@ -57,7 +58,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
   }
 
   render () {
-    const { account, notification } = this.props;
+    const { account, notification, hidden } = this.props;
 
     //  Links to the display name.
     const displayName = account.get('display_name_html') || account.get('username');
@@ -87,7 +88,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
             />
           </div>
 
-          <AccountContainer id={account.get('id')} withNote={false} />
+          <AccountContainer hidden={hidden} id={account.get('id')} withNote={false} />
           <NotificationOverlayContainer notification={notification} />
         </div>
       </HotKeys>
diff --git a/app/javascript/themes/glitch/features/notifications/components/notification.js b/app/javascript/themes/glitch/features/notifications/components/notification.js
index a309d3a42..47f5770bf 100644
--- a/app/javascript/themes/glitch/features/notifications/components/notification.js
+++ b/app/javascript/themes/glitch/features/notifications/components/notification.js
@@ -16,70 +16,75 @@ export default class Notification extends ImmutablePureComponent {
     onMoveUp: PropTypes.func.isRequired,
     onMoveDown: PropTypes.func.isRequired,
     onMention: PropTypes.func.isRequired,
-    settings: ImmutablePropTypes.map.isRequired,
   };
 
-  renderFollow () {
-    const { notification } = this.props;
-    return (
-      <NotificationFollow
-        id={notification.get('id')}
-        account={notification.get('account')}
-        notification={notification}
-      />
-    );
-  }
-
-  renderMention () {
-    const { notification } = this.props;
-    return (
-      <StatusContainer
-        id={notification.get('status')}
-        notification={notification}
-        withDismiss
-      />
-    );
-  }
-
-  renderFavourite () {
-    const { notification } = this.props;
-    return (
-      <StatusContainer
-        id={notification.get('status')}
-        account={notification.get('account')}
-        prepend='favourite'
-        muted
-        notification={notification}
-        withDismiss
-      />
-    );
-  }
-
-  renderReblog () {
-    const { notification } = this.props;
-    return (
-      <StatusContainer
-        id={notification.get('status')}
-        account={notification.get('account')}
-        prepend='reblog'
-        muted
-        notification={notification}
-        withDismiss
-      />
-    );
-  }
-
   render () {
-    const { notification } = this.props;
+    const {
+      hidden,
+      notification,
+      onMoveDown,
+      onMoveUp,
+      onMention,
+    } = this.props;
+
     switch(notification.get('type')) {
     case 'follow':
-      return this.renderFollow();
+      return (
+        <NotificationFollow
+          hidden={hidden}
+          id={notification.get('id')}
+          account={notification.get('account')}
+          notification={notification}
+          onMoveDown={onMoveDown}
+          onMoveUp={onMoveUp}
+          onMention={onMention}
+        />
+      );
     case 'mention':
-      return this.renderMention();
+      return (
+        <StatusContainer
+          containerId={notification.get('id')}
+          hidden={hidden}
+          id={notification.get('status')}
+          notification={notification}
+          onMoveDown={onMoveDown}
+          onMoveUp={onMoveUp}
+          onMention={onMention}
+          withDismiss
+        />
+      );
     case 'favourite':
-      return this.renderFavourite();
+      return (
+        <StatusContainer
+          containerId={notification.get('id')}
+          hidden={hidden}
+          id={notification.get('status')}
+          account={notification.get('account')}
+          prepend='favourite'
+          muted
+          notification={notification}
+          onMoveDown={onMoveDown}
+          onMoveUp={onMoveUp}
+          onMention={onMention}
+          withDismiss
+        />
+      );
     case 'reblog':
-      return this.renderReblog();
+      return (
+        <StatusContainer
+          containerId={notification.get('id')}
+          hidden={hidden}
+          id={notification.get('status')}
+          account={notification.get('account')}
+          prepend='reblog'
+          muted
+          notification={notification}
+          onMoveDown={onMoveDown}
+          onMoveUp={onMoveUp}
+          onMention={onMention}
+          withDismiss
+        />
+      );
     default:
       return null;
     }
diff --git a/app/javascript/themes/glitch/features/notifications/containers/notification_container.js b/app/javascript/themes/glitch/features/notifications/containers/notification_container.js
index b61aaa21c..033c61e3d 100644
--- a/app/javascript/themes/glitch/features/notifications/containers/notification_container.js
+++ b/app/javascript/themes/glitch/features/notifications/containers/notification_container.js
@@ -11,7 +11,6 @@ const makeMapStateToProps = () => {
 
   const mapStateToProps = (state, props) => ({
     notification: getNotification(state, props.notification, props.accountId),
-    settings: state.get('local_settings'),
     notifCleaning: state.getIn(['notifications', 'cleaningMode']),
   });
 
diff --git a/app/javascript/themes/glitch/features/ui/index.js b/app/javascript/themes/glitch/features/ui/index.js
index b59a2e637..3eea63189 100644
--- a/app/javascript/themes/glitch/features/ui/index.js
+++ b/app/javascript/themes/glitch/features/ui/index.js
@@ -84,6 +84,7 @@ const keyMap = {
   goToProfile: 'g u',
   goToBlocked: 'g b',
   goToMuted: 'g m',
+  toggleSpoiler: 'x',
 };
 
 @connect(mapStateToProps)