Make hidden media clickable in account media gallery

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

@@ -12,14 +12,22 @@ export default class Permalink extends React.PureComponent {
     href: PropTypes.string.isRequired,
     to: PropTypes.string.isRequired,
     children: PropTypes.node,
+    onInterceptClick: PropTypes.func,
   };
 
   handleClick = (e) => {
-    if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+      if (this.props.onInterceptClick && this.props.onInterceptClick()) {
+        e.preventDefault();
+        return;
+      }
+
+      if (this.context.router) {
         e.preventDefault();
         this.context.router.history.push(this.props.to);
       }
     }
+  }
 
   render () {
     const {
@@ -27,6 +35,7 @@ export default class Permalink extends React.PureComponent {
       className,
       href,
       to,
+      onInterceptClick,
       ...other
     } = this.props;
 

app/javascript/flavours/glitch/features/account_gallery/components/media_item.js

@@ -14,6 +14,15 @@ export default class MediaItem extends ImmutablePureComponent {
     visible: displayMedia !== 'hide_all' && !this.props.media.getIn(['status', 'sensitive']) || displayMedia === 'show_all',
   };
 
+  handleClick = () => {
+    if (!this.state.visible) {
+      this.setState({ visible: true });
+      return true;
+    }
+
+    return false;
+  }
+
   render () {
     const { media } = this.props;
     const { visible } = this.state;
@@ -50,6 +59,7 @@ export default class MediaItem extends ImmutablePureComponent {
           href={status.get('url')}
           style={style}
           title={title}
+          onInterceptClick={this.handleClick}
         >
           {icon}
           {label}

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

@@ -423,6 +423,7 @@
     &:active,
     &:focus {
       outline: 0;
+      color: $ui-secondary-color;
 
       &::before {
         content: "";