move complex title to Marketplace component

pages/apps/index.tsx

-import { IconButton, Menu, MenuButton, MenuItem, MenuList, Flex } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-import config from 'configs/app';
-import useIsMobile from 'lib/hooks/useIsMobile';
-import type { IconName } from 'ui/shared/IconSvg';
-import IconSvg from 'ui/shared/IconSvg';
-import LinkExternal from 'ui/shared/LinkExternal';
-import PageTitle from 'ui/shared/Page/PageTitle';
-
-const feature = config.features.marketplace;
-
 const Marketplace = dynamic(() => import('ui/pages/Marketplace'), { ssr: false });
 
-const Page: NextPage = () => {
-  const isMobile = useIsMobile();
-  const links = [];
-
-  if (feature.isEnabled) {
-    if (feature.submitFormUrl) {
-      links.push({
-        label: 'Submit app',
-        href: feature.submitFormUrl,
-        icon: 'plus' as IconName,
-      });
-    }
-    if (feature.suggestIdeasFormUrl) {
-      links.push({
-        label: 'Suggest ideas',
-        href: feature.suggestIdeasFormUrl,
-        icon: 'edit' as IconName,
-      });
-    }
-  }
-
-  return (
-    <PageNextJs pathname="/apps">
-      <>
-        <PageTitle
-          title="DAppscout"
-          contentAfter={ (isMobile && links.length > 1) ? (
-            <Menu>
-              <MenuButton
-                as={ IconButton }
-                size="sm"
-                variant="outline"
-                colorScheme="gray"
-                px="9px"
-                ml="auto"
-                icon={ <IconSvg name="dots" boxSize="18px"/> }
-              />
-              <MenuList minW="max-content">
-                { links.map(({ label, href, icon }) => (
-                  <MenuItem key={ label } as="a" href={ href } target="_blank" py={ 2 } px={ 4 }>
-                    <IconSvg name={ icon } boxSize={ 4 } mr={ 2.5 }/>
-                    { label }
-                    <IconSvg name="arrows/north-east" boxSize={ 4 } color="gray.400" ml={ 2 }/>
-                  </MenuItem>
-                )) }
-              </MenuList>
-            </Menu>
-          ) : (
-            <Flex ml="auto">
-              { links.map(({ label, href }) => (
-                <LinkExternal key={ label } href={ href } variant="subtle" fontSize="sm" lineHeight={ 5 } ml={ 2 }>
-                  { label }
-                </LinkExternal>
-              )) }
-            </Flex>
-          ) }
-        />
-        <Marketplace/>
-      </>
-    </PageNextJs>
-  );
-};
+const Page: NextPage = () => (
+  <PageNextJs pathname="/apps">
+    <Marketplace/>
+  </PageNextJs>
+);
 
 export default Page;
 

ui/pages/Marketplace.tsx

-import { Box } from '@chakra-ui/react';
+import { Box, Menu, MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
 import React from 'react';
 
 import { MarketplaceCategory } from 'types/client/marketplace';
@@ -7,18 +7,40 @@ import type { TabItem } from 'ui/shared/Tabs/types';
 import config from 'configs/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useFeatureValue from 'lib/growthbook/useFeatureValue';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
 import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu';
 import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
 import MarketplaceList from 'ui/marketplace/MarketplaceList';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import IconSvg from 'ui/shared/IconSvg';
+import type { IconName } from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/LinkExternal';
+import PageTitle from 'ui/shared/Page/PageTitle';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import TabsWithScroll from 'ui/shared/Tabs/TabsWithScroll';
 
 import useMarketplace from '../marketplace/useMarketplace';
 const feature = config.features.marketplace;
 
+const links: Array<{ label: string; href: string; icon: IconName }> = [];
+if (feature.isEnabled) {
+  if (feature.submitFormUrl) {
+    links.push({
+      label: 'Submit app',
+      href: feature.submitFormUrl,
+      icon: 'plus' as IconName,
+    });
+  }
+  if (feature.suggestIdeasFormUrl) {
+    links.push({
+      label: 'Suggest ideas',
+      href: feature.suggestIdeasFormUrl,
+      icon: 'edit' as IconName,
+    });
+  }
+}
+
 const Marketplace = () => {
   const {
     isPlaceholderData,
@@ -41,7 +63,7 @@ const Marketplace = () => {
     appsTotal,
     isCategoriesPlaceholderData,
   } = useMarketplace();
-
+  const isMobile = useIsMobile();
   const { value: isExperiment } = useFeatureValue('marketplace_exp', false);
 
   const categoryTabs = React.useMemo(() => {
@@ -88,6 +110,39 @@ const Marketplace = () => {
 
   return (
     <>
+      <PageTitle
+        title="DAppscout"
+        contentAfter={ (isMobile && links.length > 1) ? (
+          <Menu>
+            <MenuButton
+              as={ IconButton }
+              size="sm"
+              variant="outline"
+              colorScheme="gray"
+              px="9px"
+              ml="auto"
+              icon={ <IconSvg name="dots" boxSize="18px"/> }
+            />
+            <MenuList minW="max-content">
+              { links.map(({ label, href, icon }) => (
+                <MenuItem key={ label } as="a" href={ href } target="_blank" py={ 2 } px={ 4 }>
+                  <IconSvg name={ icon } boxSize={ 4 } mr={ 2.5 }/>
+                  { label }
+                  <IconSvg name="arrows/north-east" boxSize={ 4 } color="gray.400" ml={ 2 }/>
+                </MenuItem>
+              )) }
+            </MenuList>
+          </Menu>
+        ) : (
+          <Flex ml="auto">
+            { links.map(({ label, href }) => (
+              <LinkExternal key={ label } href={ href } variant="subtle" fontSize="sm" lineHeight={ 5 } ml={ 2 }>
+                { label }
+              </LinkExternal>
+            )) }
+          </Flex>
+        ) }
+      />
       { isExperiment && (
         <Box marginTop={{ base: 0, lg: 8 }}>
           { (isCategoriesPlaceholderData) ? (