Merge branch 'reorganize-menus' into 'develop'

Reorganize sidebar navigation

Closes #1091

See merge request soapbox-pub/soapbox!1937

app/soapbox/components/sidebar-navigation-link.tsx

@@ -10,7 +10,7 @@ interface ISidebarNavigationLink {
   /** URL to an SVG icon. */
   icon: string,
   /** Link label. */
-  text: React.ReactElement,
+  text: React.ReactNode,
   /** Route to an internal page. */
   to?: string,
   /** Callback when the link is clicked. */

app/soapbox/components/sidebar-navigation.tsx

@@ -16,9 +16,6 @@ const messages = defineMessages({
   bookmarks: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
   lists: { id: 'column.lists', defaultMessage: 'Lists' },
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
-  dashboard: { id: 'tabs_bar.dashboard', defaultMessage: 'Dashboard' },
-  all: { id: 'tabs_bar.all', defaultMessage: 'All' },
-  fediverse: { id: 'tabs_bar.fediverse', defaultMessage: 'Fediverse' },
 });
 
 /** Desktop sidebar with links to different views in the app. */
@@ -71,35 +68,6 @@ const SidebarNavigation = () => {
           text: intl.formatMessage(messages.developers),
         });
       }
-
-      if (account.staff) {
-        menu.push({
-          to: '/soapbox/admin',
-          icon: require('@tabler/icons/dashboard.svg'),
-          text: intl.formatMessage(messages.dashboard),
-          count: dashboardCount,
-        });
-      }
-
-      if (features.publicTimeline) {
-        menu.push(null);
-      }
-    }
-
-    if (features.publicTimeline) {
-      menu.push({
-        to: '/timeline/local',
-        icon: features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg'),
-        text: features.federating ? instance.title : intl.formatMessage(messages.all),
-      });
-    }
-
-    if (features.publicTimeline && features.federating) {
-      menu.push({
-        to: '/timeline/fediverse',
-        icon: require('assets/icons/fediverse.svg'),
-        text: intl.formatMessage(messages.fediverse),
-      });
     }
 
     return menu;
@@ -170,6 +138,33 @@ const SidebarNavigation = () => {
               icon={require('@tabler/icons/settings.svg')}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
             />
+
+            {account.staff && (
+              <SidebarNavigationLink
+                to='/soapbox/admin'
+                icon={require('@tabler/icons/dashboard.svg')}
+                count={dashboardCount}
+                text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
+              />
+            )}
+          </>
+        )}
+
+        {features.publicTimeline && (
+          <>
+            <SidebarNavigationLink
+              to='/timeline/local'
+              icon={features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg')}
+              text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+            />
+
+            {features.federating && (
+              <SidebarNavigationLink
+                to='/timeline/fediverse'
+                icon={require('assets/icons/fediverse.svg')}
+                text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
+              />
+            )}
           </>
         )}
 
@@ -177,7 +172,6 @@ const SidebarNavigation = () => {
           <DropdownMenu items={menu}>
             <SidebarNavigationLink
               icon={require('@tabler/icons/dots-circle-horizontal.svg')}
-              count={dashboardCount}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />
           </DropdownMenu>

app/soapbox/features/settings/index.tsx

@@ -118,14 +118,15 @@ const Settings = () => {
 
             <CardBody>
               <List>
-                {features.security && (
-                  <ListItem label={intl.formatMessage(messages.deleteAccount)} onClick={navigateToDeleteAccount} />
-                )}
                 {features.federating && (features.accountMoving ? (
                   <ListItem label={intl.formatMessage(messages.accountMigration)} onClick={navigateToMoveAccount} />
                 ) : features.accountAliases && (
                   <ListItem label={intl.formatMessage(messages.accountAliases)} onClick={navigateToAliases} />
                 ))}
+
+                {features.security && (
+                  <ListItem label={intl.formatMessage(messages.deleteAccount)} onClick={navigateToDeleteAccount} />
+                )}
               </List>
             </CardBody>
           </>

app/soapbox/features/soapbox-config/index.tsx

@@ -202,7 +202,7 @@ const SoapboxConfig: React.FC = () => {
           >
             <FileInput
               onChange={handleFileChange(['logo'])}
-              accept='image/svg,image/png'
+              accept='image/svg+xml,image/png'
             />
           </FormGroup>