Widget: add actions

app/soapbox/components/ui/widget/widget.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Stack, Text } from 'soapbox/components/ui';
+import { Stack, HStack, Text, IconButton } from 'soapbox/components/ui';
 
 interface IWidgetTitle {
-  title: string | React.ReactNode
+  title: string | React.ReactNode,
 }
 
 const WidgetTitle = ({ title }: IWidgetTitle): JSX.Element => (
@@ -16,12 +16,31 @@ const WidgetBody: React.FC = ({ children }): JSX.Element => (
 
 interface IWidget {
   title: string | React.ReactNode,
+  onActionClick?: () => void,
+  actionIcon?: string,
+  actionTitle?: string,
 }
 
-const Widget: React.FC<IWidget> = ({ title, children }): JSX.Element => {
+const Widget: React.FC<IWidget> = ({
+  title,
+  children,
+  onActionClick,
+  actionIcon = require('@tabler/icons/icons/arrow-right.svg'),
+  actionTitle,
+}): JSX.Element => {
   return (
     <Stack space={2}>
+      <HStack alignItems='center'>
         <WidgetTitle title={title} />
+        {onActionClick && (
+          <IconButton
+            className='w-6 h-6 ml-2'
+            src={actionIcon}
+            onClick={onActionClick}
+            title={actionTitle}
+          />
+        )}
+      </HStack>
       <WidgetBody>{children}</WidgetBody>
     </Stack>
   );

app/soapbox/features/crypto_donate/components/crypto_donate_panel.tsx

@@ -1,17 +1,24 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import { Text, Widget } from 'soapbox/components/ui';
 import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 import SiteWallet from './site_wallet';
 
+const messages = defineMessages({
+  actionTitle: { id: 'crypto_donate_panel.actions.view', defaultMessage: 'Click to see {count} {count, plural, one {wallet} other {wallets}}' },
+});
+
 interface ICryptoDonatePanel {
   limit: number,
 }
 
 const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Element | null => {
+  const intl = useIntl();
+  const history = useHistory();
+
   const addresses = useSoapboxConfig().get('cryptoAddresses');
   const siteTitle = useAppSelector((state) => state.instance.title);
 
@@ -19,11 +26,16 @@ const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Ele
     return null;
   }
 
-  const more = addresses.size - limit;
+  const handleAction = () => {
-  const hasMore = more > 0;
+    history.push('/donate/crypto');
+  };
 
   return (
-    <Widget title={<FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' />}>
+    <Widget
+      title={<FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' />}
+      onActionClick={handleAction}
+      actionTitle={intl.formatMessage(messages.actionTitle, { count: addresses.size })}
+    >
       <Text>
         <FormattedMessage
           id='crypto_donate_panel.intro.message'
@@ -33,18 +45,6 @@ const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Ele
       </Text>
 
       <SiteWallet limit={limit} />
-
-      {hasMore && (
-        <Link className='wtf-panel__expand-btn' to='/donate/crypto'>
-          <Text>
-            <FormattedMessage
-              id='crypto_donate_panel.actions.more'
-              defaultMessage='Click to see {count} more {count, plural, one {wallet} other {wallets}}'
-              values={{ count: more }}
-            />
-          </Text>
-        </Link>
-      )}
     </Widget>
   );
 };

app/soapbox/features/ui/components/who-to-follow-panel.tsx

@@ -36,8 +36,16 @@ const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
     return null;
   }
 
+  // FIXME: This page actually doesn't look good right now
+  // const handleAction = () => {
+  //   history.push('/suggestions');
+  // };
+
   return (
-    <Widget title={<FormattedMessage id='who_to_follow.title' defaultMessage='People To Follow' />}>
+    <Widget
+      title={<FormattedMessage id='who_to_follow.title' defaultMessage='People To Follow' />}
+      // onAction={handleAction}
+    >
       {suggestionsToRender.map((suggestion: ImmutableMap<string, any>) => (
         <AccountContainer
           key={suggestion.get('account')}