From cfa9b1877a28f3afb9aa8f5a1a64d20afcbd9419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?KMY=EF=BC=88=E9=9B=AA=E3=81=82=E3=81=99=E3=81=8B=EF=BC=89?=
 <tt@kmycode.net>
Date: Wed, 8 Nov 2023 10:57:00 +0900
Subject: [PATCH] =?UTF-8?q?Change:=20#186=20=E6=A6=82=E8=A6=81=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=81=AEkmyblue=20capabilities=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E6=94=B9=E5=96=84=20(#252)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mastodon/features/about/index.jsx         | 30 +++++++++++++++++--
 app/javascript/styles/mastodon/about.scss     | 14 +++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx
index 1ebf9d2a57..c2e5b2578b 100644
--- a/app/javascript/mastodon/features/about/index.jsx
+++ b/app/javascript/mastodon/features/about/index.jsx
@@ -11,6 +11,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
+import { ReactComponent as DisabledIcon } from '@material-symbols/svg-600/outlined/close-fill.svg';
+import { ReactComponent as EnabledIcon } from '@material-symbols/svg-600/outlined/done-fill.svg';
 import { ReactComponent as ExpandMoreIcon } from '@material-symbols/svg-600/outlined/expand_more.svg';
 
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks  } from 'mastodon/actions/server';
@@ -101,6 +103,28 @@ class Section extends PureComponent {
 
 }
 
+class CapabilityIcon extends PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    state: PropTypes.bool,
+  };
+
+  render () {
+    const { intl, state } = this.props;
+
+    if (state) {
+      return (
+        <span className='capability-icon enabled'><Icon id='check' icon={EnabledIcon} title={intl.formatMessage(messages.enabled)} />{intl.formatMessage(messages.enabled)}</span>
+      );
+    } else {
+      return (
+        <span className='capability-icon disabled'><Icon id='times' icon={DisabledIcon} title={intl.formatMessage(messages.disabled)} />{intl.formatMessage(messages.disabled)}</span>
+      );
+    }
+  }
+}
+
 class About extends PureComponent {
 
   static propTypes = {
@@ -201,13 +225,13 @@ class About extends PureComponent {
             {!isLoading && (
               <ol className='rules-list'>
                 <li>
-                  <span className='rules-list__text'>{intl.formatMessage(messages.emojiReaction)}: {intl.formatMessage(isEmojiReaction ? messages.enabled : messages.disabled)}</span>
+                  <span className='rules-list__text'>{intl.formatMessage(messages.emojiReaction)}: <CapabilityIcon state={isEmojiReaction} intl={intl} /></span>
                 </li>
                 <li>
-                  <span className='rules-list__text'>{intl.formatMessage(messages.publicUnlistedVisibility)}: {intl.formatMessage(isPublicUnlistedVisibility ? messages.enabled : messages.disabled)}</span>
+                  <span className='rules-list__text'>{intl.formatMessage(messages.publicUnlistedVisibility)}: <CapabilityIcon state={isPublicUnlistedVisibility} intl={intl} /></span>
                 </li>
                 <li>
-                  <span className='rules-list__text'>{intl.formatMessage(messages.localTimeline)}: {intl.formatMessage(isLocalTimeline ? messages.enabled : messages.disabled)}</span>
+                  <span className='rules-list__text'>{intl.formatMessage(messages.localTimeline)}: <CapabilityIcon state={isLocalTimeline} intl={intl} /></span>
                 </li>
               </ol>
             )}
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 0f02563b48..6d36dfb661 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -53,4 +53,18 @@ $fluid-breakpoint: $maximum-width + 20px;
       border-bottom: 0;
     }
   }
+
+  .capability-icon {
+    svg {
+      transform: translateY(4px);
+    }
+
+    &.enabled {
+      color: green;
+    }
+
+    &.disabled {
+      color: red;
+    }
+  }
 }