feat: add Game Center entry points to desktop and mobile sidebars

packages/shared/src/components/icons/Joystick/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const JoystickIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/icons/index.ts

@@ -80,6 +80,7 @@ export * from './Italic';
 export * from './JetBrains';
 export * from './Job';
 export * from './JobStatus';
+export * from './Joystick';
 export * from './Kaggle';
 export * from './Key';
 export * from './Label';

packages/shared/src/components/profile/ProfileSettingsMenu.tsx

@@ -34,6 +34,7 @@ import {
   TourIcon,
   FeatherIcon,
   GiftIcon,
+  JoystickIcon,
 } from '../icons';
 import { NavDrawer } from '../drawers/NavDrawer';
 import {
@@ -188,6 +189,11 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
                 onClose?.();
               },
             },
+            gameCenter: {
+              title: 'Game Center',
+              icon: JoystickIcon,
+              href: `${webappUrl}game-center`,
+            },
             trackAchievement: {
               title: 'Track achievement',
               icon: PinIcon,
@@ -438,7 +444,7 @@ export const InnerProfileSettingsMenu = ({
           <ProfileSection
             key={key}
             withSeparator={!lastItem}
-            title={menuItem.title}
+            title={menuItem.title ?? undefined}
             items={Object.entries(menuItem.items)
               .filter(([itemKey, item]) => {
                 if (item.href === walletUrl && !hasAccessToCores) {
@@ -459,6 +465,13 @@ export const InnerProfileSettingsMenu = ({
                   return false;
                 }
 
+                if (
+                  itemKey === 'gameCenter' &&
+                  isQuestsFeatureEnabled !== true
+                ) {
+                  return false;
+                }
+
                 return true;
               })
               .map(([, item]: [string, ProfileSectionItemProps]) => {
@@ -491,15 +504,15 @@ export function ProfileSettingsMenuMobile({
       shouldKeepOpen={shouldKeepOpen}
       drawerProps={{
         isOpen,
-        onClose,
+        onClose: onClose ?? (() => {}),
       }}
     >
       <InnerProfileSettingsMenu className="p-4" onClose={onClose} />
     </NavDrawer>
   );
 }
 
-export function ProfileSettingsMenuDesktop(): ReactElement {
+export function ProfileSettingsMenuDesktop(): ReactElement | null {
   const { user } = useAuthContext();
   const featureTheme = useFeatureTheme();
 

packages/shared/src/components/sidebar/sections/MainSection.tsx

@@ -8,6 +8,7 @@ import {
   EyeIcon,
   HomeIcon,
   HotIcon,
+  JoystickIcon,
   SquadIcon,
   TerminalIcon,
   YearInReviewIcon,
@@ -24,6 +25,7 @@ import { useConditionalFeature } from '../../../hooks';
 import {
   featurePlusCtaCopy,
   featureYearInReview,
+  questsFeature,
 } from '../../../lib/featureManagement';
 
 export const MainSection = ({
@@ -42,6 +44,10 @@ export const MainSection = ({
     feature: featureYearInReview,
     shouldEvaluate: isLoggedIn,
   });
+  const { value: showGameCenter } = useConditionalFeature({
+    feature: questsFeature,
+    shouldEvaluate: isLoggedIn,
+  });
 
   const menuItems: SidebarMenuItem[] = useMemo(() => {
     // this path can be opened on extension so it purposly
@@ -59,7 +65,7 @@ export const MainSection = ({
           action: () =>
             onNavTabClick?.(isCustomDefaultFeed ? SharedFeedPage.MyFeed : '/'),
           icon: () => (
-            <ProfilePicture size={ProfileImageSize.XSmall} user={user} />
+            <ProfilePicture size={ProfileImageSize.XSmall} user={user!} />
           ),
         }
       : {
@@ -87,6 +93,18 @@ export const MainSection = ({
         }
       : undefined;
 
+    const gameCenter = showGameCenter
+      ? {
+          icon: (active: boolean) => (
+            <ListIcon Icon={() => <JoystickIcon secondary={active} />} />
+          ),
+          title: 'Game Center',
+          path: `${webappUrl}game-center`,
+          isForcedLink: true,
+          requiresLogin: true,
+        }
+      : undefined;
+
     const yearInReview = showYearInReview
       ? {
           icon: () => <ListIcon Icon={() => <YearInReviewIcon />} />,
@@ -137,15 +155,17 @@ export const MainSection = ({
         isForcedLink: true,
         requiresLogin: true,
       },
+      gameCenter,
       yearInReview,
       plusButton,
-    ].filter(Boolean);
+    ].filter((item): item is SidebarMenuItem => !!item);
   }, [
     ctaCopy,
     isCustomDefaultFeed,
     isLoggedIn,
     isPlus,
     onNavTabClick,
+    showGameCenter,
     showYearInReview,
     user,
   ]);