Add Suggested Groups panel to Search page

app/soapbox/features/ui/index.tsx

@@ -38,6 +38,7 @@ import HomePage from 'soapbox/pages/home-page';
 import ManageGroupsPage from 'soapbox/pages/manage-groups-page';
 import ProfilePage from 'soapbox/pages/profile-page';
 import RemoteInstancePage from 'soapbox/pages/remote-instance-page';
+import SearchPage from 'soapbox/pages/search-page';
 import StatusPage from 'soapbox/pages/status-page';
 import { usePendingPolicy } from 'soapbox/queries/policies';
 import { getAccessToken, getVapidKey } from 'soapbox/utils/auth';
@@ -275,7 +276,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
 
       <WrappedRoute path='/notifications' page={DefaultPage} component={Notifications} content={children} />
 
-      <WrappedRoute path='/search' page={DefaultPage} component={Search} content={children} />
+      <WrappedRoute path='/search' page={SearchPage} component={Search} content={children} />
       {features.suggestions && <WrappedRoute path='/suggestions' publicRoute page={DefaultPage} component={FollowRecommendations} content={children} />}
       {features.profileDirectory && <WrappedRoute path='/directory' publicRoute page={DefaultPage} component={Directory} content={children} />}
       {features.events && <WrappedRoute path='/events' page={EventsPage} component={Events} content={children} />}

app/soapbox/pages/search-page.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
+import {
+  WhoToFollowPanel,
+  TrendsPanel,
+  SignUpPanel,
+  CtaBanner,
+  SuggestedGroupsPanel,
+} from 'soapbox/features/ui/util/async-components';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
+
+import { Layout } from '../components/ui';
+
+interface ISearchPage {
+  children: React.ReactNode
+}
+
+const SearchPage: React.FC<ISearchPage> = ({ children }) => {
+  const me = useAppSelector(state => state.me);
+  const features = useFeatures();
+
+  return (
+    <>
+      <Layout.Main>
+        {children}
+
+        {!me && (
+          <BundleContainer fetchComponent={CtaBanner}>
+            {Component => <Component key='cta-banner' />}
+          </BundleContainer>
+        )}
+      </Layout.Main>
+
+      <Layout.Aside>
+        {!me && (
+          <BundleContainer fetchComponent={SignUpPanel}>
+            {Component => <Component key='sign-up-panel' />}
+          </BundleContainer>
+        )}
+
+        {features.trends && (
+          <BundleContainer fetchComponent={TrendsPanel}>
+            {Component => <Component limit={5} key='trends-panel' />}
+          </BundleContainer>
+        )}
+
+        {me && features.suggestions && (
+          <BundleContainer fetchComponent={WhoToFollowPanel}>
+            {Component => <Component limit={3} key='wtf-panel' />}
+          </BundleContainer>
+        )}
+
+        {features.groups && (
+          <BundleContainer fetchComponent={SuggestedGroupsPanel}>
+            {Component => <Component key='suggested-groups-panel' />}
+          </BundleContainer>
+        )}
+
+        <LinkFooter key='link-footer' />
+      </Layout.Aside>
+    </>
+  );
+};
+
+export default SearchPage;