Add data- attributes to statuses for userstyle selectors (#117)

* Add data- attributes to statuses for userstyle selectors

* use const and template string, replace reblog->boosted and favourite->favourited

* more template strings because sorin-sama said so

1 files changed, 20 insertions, 0 deletions

diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 5571b3c85..4849170b0 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -664,6 +664,25 @@ backgrounds for collapsed statuses are enabled.
       ) background = attachments.getIn([0, 'preview_url']);
     }
 
+/*
+
+Here we prepare extra data-* attributes for CSS selectors.
+Users can use those for theming, hiding avatars etc via UserStyle
+
+*/
+
+    const selectorAttribs = {
+      'data-status-by': `@${status.getIn(['account', 'acct'])}`,
+    };
+
+    if (prepend && account) {
+      const notifKind = {
+        favourite: 'favourited',
+        reblog: 'boosted',
+      }[prepend];
+
+      selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`;
+    }
 
 /*
 
@@ -694,6 +713,7 @@ collapsed.
           ),
         }}
         ref={handleRef}
+        {...selectorAttribs}
       >
         {prepend && account ? (
           <StatusPrepend