From 21b6ad1cbd3cb746f1cf1135e6cfd4519a63bf61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 26 Apr 2023 23:28:57 +0200
Subject: [PATCH] Add dismiss button instead of menu in fediverse explanation
 box
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../components/ui/accordion/accordion.tsx     | 20 ++++++++++++++++++-
 .../features/public-timeline/index.tsx        |  8 +++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/ui/accordion/accordion.tsx b/app/soapbox/components/ui/accordion/accordion.tsx
index f83a011be..842032242 100644
--- a/app/soapbox/components/ui/accordion/accordion.tsx
+++ b/app/soapbox/components/ui/accordion/accordion.tsx
@@ -21,13 +21,16 @@ interface IAccordion {
   menu?: Menu
   expanded?: boolean
   onToggle?: (value: boolean) => void
+  action?: () => void
+  actionIcon?: string
+  actionLabel?: string
 }
 
 /**
  * Accordion
  * An accordion is a vertically stacked group of collapsible sections.
  */
-const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded = false, onToggle = () => {} }) => {
+const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded = false, onToggle = () => {}, action, actionIcon, actionLabel }) => {
   const intl = useIntl();
 
   const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -35,6 +38,13 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
     e.preventDefault();
   };
 
+  const handleAction = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (!action) return;
+
+    action();
+    e.preventDefault();
+  };
+
   return (
     <div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
       <button
@@ -53,6 +63,14 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
               src={require('@tabler/icons/dots-vertical.svg')}
             />
           )}
+          {action && actionIcon && (
+            <button onClick={handleAction} title={actionLabel}>
+              <Icon
+                src={actionIcon}
+                className='h-5 w-5 text-gray-700 dark:text-gray-600'
+              />
+            </button>
+          )}
           <Icon
             src={expanded ? require('@tabler/icons/chevron-up.svg') : require('@tabler/icons/chevron-down.svg')}
             className='h-5 w-5 text-gray-700 dark:text-gray-600'
diff --git a/app/soapbox/features/public-timeline/index.tsx b/app/soapbox/features/public-timeline/index.tsx
index b62c5495c..8f96e432d 100644
--- a/app/soapbox/features/public-timeline/index.tsx
+++ b/app/soapbox/features/public-timeline/index.tsx
@@ -30,10 +30,6 @@ const CommunityTimeline = () => {
   const explanationBoxExpanded = settings.get('explanationBox');
   const showExplanationBox = settings.get('showExplanationBox');
 
-  const explanationBoxMenu = () => {
-    return [{ text: intl.formatMessage(messages.dismiss), action: dismissExplanationBox }];
-  };
-
   const dismissExplanationBox = () => {
     dispatch(changeSetting(['showExplanationBox'], false));
   };
@@ -66,7 +62,9 @@ const CommunityTimeline = () => {
       {showExplanationBox && <div className='mb-4'>
         <Accordion
           headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
-          menu={explanationBoxMenu()}
+          action={dismissExplanationBox}
+          actionIcon={require('@tabler/icons/x.svg')}
+          actionLabel={intl.formatMessage(messages.dismiss)}
           expanded={explanationBoxExpanded}
           onToggle={toggleExplanationBox}
         >