From cbd9dd52ee23bec3891c1b6457711dee228bd992 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 21 Jul 2022 19:46:14 -0500
Subject: [PATCH 1/2] DevelopersMenu: refactor DashWidget into a React.FC

---
 .../features/developers/developers-menu.tsx   | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/features/developers/developers-menu.tsx b/app/soapbox/features/developers/developers-menu.tsx
index b4dfdd9c4..435dc11ee 100644
--- a/app/soapbox/features/developers/developers-menu.tsx
+++ b/app/soapbox/features/developers/developers-menu.tsx
@@ -15,7 +15,23 @@ const messages = defineMessages({
   leave: { id: 'developers.leave', defaultMessage: 'You have left developers' },
 });
 
-const Developers = () => {
+interface IDashWidget {
+  to?: string,
+  onClick?: React.MouseEventHandler<HTMLButtonElement>,
+  children: React.ReactNode,
+}
+
+const DashWidget: React.FC<IDashWidget> = ({ to, onClick, children }) => {
+  const className = 'bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform';
+
+  if (to) {
+    return <Link className={className} to={to}>{children}</Link>;
+  } else {
+    return <button className={className} onClick={onClick}>{children}</button>;
+  }
+};
+
+const Developers: React.FC = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const intl = useIntl();
@@ -31,53 +47,53 @@ const Developers = () => {
   return (
     <Column label={intl.formatMessage(messages.heading)}>
       <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
-        <Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+        <DashWidget to='/developers/apps/create'>
           <SvgIcon src={require('@tabler/icons/apps.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
           </Text>
-        </Link>
+        </DashWidget>
 
-        <Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+        <DashWidget to='/developers/settings_store'>
           <SvgIcon src={require('@tabler/icons/code-plus.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
           </Text>
-        </Link>
+        </DashWidget>
 
-        <Link to='/developers/timeline' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+        <DashWidget to='/developers/timeline'>
           <SvgIcon src={require('@tabler/icons/home.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
           </Text>
-        </Link>
+        </DashWidget>
 
-        <Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+        <DashWidget to='/error'>
           <SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
           </Text>
-        </Link>
+        </DashWidget>
 
-        <Link to='/error/network' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+        <DashWidget to='/error/network'>
           <SvgIcon src={require('@tabler/icons/refresh.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
           </Text>
-        </Link>
+        </DashWidget>
 
-        <button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+        <DashWidget onClick={leaveDevelopers}>
           <SvgIcon src={require('@tabler/icons/logout.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
           </Text>
-        </button>
+        </DashWidget>
       </div>
     </Column>
   );

From 1ffd61af67e266e3053ae1a19ce99bcd06851503 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 21 Jul 2022 19:53:43 -0500
Subject: [PATCH 2/2] DevelopersMenu: display source code version

---
 .../features/developers/developers-menu.tsx   | 109 ++++++++++--------
 1 file changed, 59 insertions(+), 50 deletions(-)

diff --git a/app/soapbox/features/developers/developers-menu.tsx b/app/soapbox/features/developers/developers-menu.tsx
index 435dc11ee..cd8ee08bb 100644
--- a/app/soapbox/features/developers/developers-menu.tsx
+++ b/app/soapbox/features/developers/developers-menu.tsx
@@ -7,6 +7,7 @@ import { changeSettingImmediate } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
 import { Text } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
+import sourceCode from 'soapbox/utils/code';
 
 import Column from '../ui/components/column';
 
@@ -45,57 +46,65 @@ const Developers: React.FC = () => {
   };
 
   return (
-    <Column label={intl.formatMessage(messages.heading)}>
-      <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
-        <DashWidget to='/developers/apps/create'>
-          <SvgIcon src={require('@tabler/icons/apps.svg')} className='dark:text-gray-100' />
-
-          <Text>
-            <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
-          </Text>
-        </DashWidget>
-
-        <DashWidget to='/developers/settings_store'>
-          <SvgIcon src={require('@tabler/icons/code-plus.svg')} className='dark:text-gray-100' />
-
-          <Text>
-            <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
-          </Text>
-        </DashWidget>
-
-        <DashWidget to='/developers/timeline'>
-          <SvgIcon src={require('@tabler/icons/home.svg')} className='dark:text-gray-100' />
-
-          <Text>
-            <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
-          </Text>
-        </DashWidget>
-
-        <DashWidget to='/error'>
-          <SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='dark:text-gray-100' />
-
-          <Text>
-            <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
-          </Text>
-        </DashWidget>
-
-        <DashWidget to='/error/network'>
-          <SvgIcon src={require('@tabler/icons/refresh.svg')} className='dark:text-gray-100' />
-
-          <Text>
-            <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
-          </Text>
-        </DashWidget>
-
-        <DashWidget onClick={leaveDevelopers}>
-          <SvgIcon src={require('@tabler/icons/logout.svg')} className='dark:text-gray-100' />
-
-          <Text>
-            <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
-          </Text>
-        </DashWidget>
+    <>
+      <Column label={intl.formatMessage(messages.heading)}>
+        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
+          <DashWidget to='/developers/apps/create'>
+            <SvgIcon src={require('@tabler/icons/apps.svg')} className='dark:text-gray-100' />
+
+            <Text>
+              <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
+            </Text>
+          </DashWidget>
+
+          <DashWidget to='/developers/settings_store'>
+            <SvgIcon src={require('@tabler/icons/code-plus.svg')} className='dark:text-gray-100' />
+
+            <Text>
+              <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
+            </Text>
+          </DashWidget>
+
+          <DashWidget to='/developers/timeline'>
+            <SvgIcon src={require('@tabler/icons/home.svg')} className='dark:text-gray-100' />
+
+            <Text>
+              <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
+            </Text>
+          </DashWidget>
+
+          <DashWidget to='/error'>
+            <SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='dark:text-gray-100' />
+
+            <Text>
+              <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
+            </Text>
+          </DashWidget>
+
+          <DashWidget to='/error/network'>
+            <SvgIcon src={require('@tabler/icons/refresh.svg')} className='dark:text-gray-100' />
+
+            <Text>
+              <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
+            </Text>
+          </DashWidget>
+
+          <DashWidget onClick={leaveDevelopers}>
+            <SvgIcon src={require('@tabler/icons/logout.svg')} className='dark:text-gray-100' />
+
+            <Text>
+              <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
+            </Text>
+          </DashWidget>
+        </div>
+      </Column>
+
+      <div className='p-4'>
+        <Text align='center' theme='subtle' size='sm'>
+          {sourceCode.displayName} {sourceCode.version}
+        </Text>
       </div>
-    </Column>
+    </>
   );
 };