From d23ecd1dff20f7bcf6302cf8d702ec11a0f723bd Mon Sep 17 00:00:00 2001
From: KMY <tt@kmycode.net>
Date: Sat, 19 Aug 2023 09:53:42 +0900
Subject: [PATCH] Add elements count to antennas page

---
 .../mastodon/features/antennas/index.jsx          | 14 +++++++++++---
 .../features/ui/components/column_link.jsx        |  5 ++++-
 app/javascript/styles/mastodon/components.scss    | 15 +++++++++++++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/features/antennas/index.jsx b/app/javascript/mastodon/features/antennas/index.jsx
index 220b3f47fa..bcc8f7e3e1 100644
--- a/app/javascript/mastodon/features/antennas/index.jsx
+++ b/app/javascript/mastodon/features/antennas/index.jsx
@@ -12,6 +12,7 @@ import { createSelector } from 'reselect';
 import { fetchAntennas } from 'mastodon/actions/antennas';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
+import { Icon }  from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import ScrollableList from 'mastodon/components/scrollable_list';
 import ColumnLink from 'mastodon/features/ui/components/column_link';
@@ -75,9 +76,16 @@ class Antennas extends ImmutablePureComponent {
           prepend={<ColumnSubheading text={intl.formatMessage(messages.subheading)} />}
           bindToDocument={!multiColumn}
         >
-          {antennas.map(antenna =>
-            <ColumnLink key={antenna.get('id')} to={`/antennasw/${antenna.get('id')}`} icon='wifi' text={antenna.get('title')} />,
-          )}
+          {antennas.map(antenna => (
+            <ColumnLink key={antenna.get('id')} to={`/antennasw/${antenna.get('id')}`} icon='wifi' text={antenna.get('title')}>
+              <p className='antenna-list-detail'>
+                <span className='group'><Icon id='users' />{antenna.get('accounts_count')}</span>
+                <span className='group'><Icon id='sitemap' />{antenna.get('domains_count')}</span>
+                <span className='group'><Icon id='hashtag' />{antenna.get('tags_count')}</span>
+                <span className='group'><Icon id='paragraph' />{antenna.get('keywords_count')}</span>
+              </p>
+            </ColumnLink>
+          ))}
         </ScrollableList>
 
         <Helmet>
diff --git a/app/javascript/mastodon/features/ui/components/column_link.jsx b/app/javascript/mastodon/features/ui/components/column_link.jsx
index 09a2e44bf2..1dcef89356 100644
--- a/app/javascript/mastodon/features/ui/components/column_link.jsx
+++ b/app/javascript/mastodon/features/ui/components/column_link.jsx
@@ -5,10 +5,11 @@ import { NavLink } from 'react-router-dom';
 
 import { Icon }  from 'mastodon/components/icon';
 
-const ColumnLink = ({ icon, text, to, href, method, badge, transparent, ...other }) => {
+const ColumnLink = ({ icon, text, to, href, method, badge, transparent, children, ...other }) => {
   const className = classNames('column-link', { 'column-link--transparent': transparent });
   const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
   const iconElement = typeof icon === 'string' ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon;
+  const childElement = typeof children !== 'undefined' ? <p>{children}</p> : null;
 
   if (href) {
     return (
@@ -24,6 +25,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge, transparent, ...other
         {iconElement}
         <span>{text}</span>
         {badgeElement}
+        {childElement}
       </NavLink>
     );
   }
@@ -37,6 +39,7 @@ ColumnLink.propTypes = {
   method: PropTypes.string,
   badge: PropTypes.node,
   transparent: PropTypes.bool,
+  children: PropTypes.any,
 };
 
 export default ColumnLink;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index f1b3a6ae9c..d62911b7d8 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -7364,6 +7364,21 @@ noscript {
   }
 }
 
+.antenna-list-detail {
+  font-size: 12px;
+  margin-left: 24px;
+
+  .group {
+    margin-right: 16px;
+
+    i.fa {
+      color: $light-text-color;
+      margin-right: 4px;
+      font-size: 10px;
+    }
+  }
+}
+
 .antenna-setting {
   margin: 8px 16px;