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

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

@@ -2,6 +2,7 @@ import React from 'react';
 import type { ReactElement } from 'react';
 
 import { ProfileSection } from '../ProfileSection';
+import type { ProfileSectionItemProps } from '../ProfileSectionItem';
 import {
   AnalyticsIcon,
   CoinIcon,
@@ -17,35 +18,37 @@ export const MainSection = (): ReactElement => {
   const hasAccessToCores = useHasAccessToCores();
   const { user } = useAuthContext();
 
-  return (
-    <ProfileSection
-      items={[
-        {
-          title: 'Your profile',
-          href: `${webappUrl}${user.username}`,
-          icon: UserIcon,
-        },
-        hasAccessToCores && {
-          title: 'Core wallet',
-          href: walletUrl,
-          icon: CoinIcon,
-        },
-        {
-          title: 'Achievements',
-          href: `${webappUrl}${user.username}/achievements`,
-          icon: MedalBadgeIcon,
-        },
-        {
-          title: 'DevCard',
-          href: `${settingsUrl}/customization/devcard`,
-          icon: DevCardIcon,
-        },
-        {
-          title: 'Analytics',
-          href: `${webappUrl}analytics`,
-          icon: AnalyticsIcon,
-        },
-      ].filter(Boolean)}
-    />
-  );
+  const items: ProfileSectionItemProps[] = [
+    {
+      title: 'Your profile',
+      href: `${webappUrl}${user?.username}`,
+      icon: UserIcon,
+    },
+    ...(hasAccessToCores
+      ? [
+          {
+            title: 'Core wallet',
+            href: walletUrl,
+            icon: CoinIcon,
+          } satisfies ProfileSectionItemProps,
+        ]
+      : []),
+    {
+      title: 'Achievements',
+      href: `${webappUrl}${user?.username}/achievements`,
+      icon: MedalBadgeIcon,
+    },
+    {
+      title: 'DevCard',
+      href: `${settingsUrl}/customization/devcard`,
+      icon: DevCardIcon,
+    },
+    {
+      title: 'Analytics',
+      href: `${webappUrl}analytics`,
+      icon: AnalyticsIcon,
+    },
+  ];
+
+  return <ProfileSection items={items} />;
 };

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 />} />,
@@ -98,54 +116,58 @@ export const MainSection = ({
         }
       : undefined;
 
-    return [
-      myFeed,
-      {
-        title: 'Following',
-        // this path can be opened on extension so it purposly
-        // is not using webappUrl so it gets selected
-        path: '/following',
-        action: () => onNavTabClick?.(OtherFeedPage.Following),
-        requiresLogin: true,
-        icon: (active: boolean) => (
-          <ListIcon Icon={() => <SquadIcon secondary={active} />} />
-        ),
-      },
-      {
-        icon: (active: boolean) => (
-          <ListIcon Icon={() => <HotIcon secondary={active} />} />
-        ),
-        title: 'Explore',
-        path: '/posts',
-        action: () => onNavTabClick?.(OtherFeedPage.Explore),
-      },
-      {
-        icon: (active: boolean) => (
-          <ListIcon Icon={() => <EyeIcon secondary={active} />} />
-        ),
-        title: 'History',
-        path: `${webappUrl}history`,
-        isForcedLink: true,
-        requiresLogin: true,
-      },
-      {
-        icon: (active: boolean) => (
-          <ListIcon Icon={() => <TerminalIcon secondary={active} />} />
-        ),
-        title: 'Agentic Hub',
-        path: `${webappUrl}agents`,
-        isForcedLink: true,
-        requiresLogin: true,
-      },
-      yearInReview,
-      plusButton,
-    ].filter(Boolean);
+    return (
+      [
+        myFeed,
+        {
+          title: 'Following',
+          // this path can be opened on extension so it purposly
+          // is not using webappUrl so it gets selected
+          path: '/following',
+          action: () => onNavTabClick?.(OtherFeedPage.Following),
+          requiresLogin: true,
+          icon: (active: boolean) => (
+            <ListIcon Icon={() => <SquadIcon secondary={active} />} />
+          ),
+        },
+        {
+          icon: (active: boolean) => (
+            <ListIcon Icon={() => <HotIcon secondary={active} />} />
+          ),
+          title: 'Explore',
+          path: '/posts',
+          action: () => onNavTabClick?.(OtherFeedPage.Explore),
+        },
+        {
+          icon: (active: boolean) => (
+            <ListIcon Icon={() => <EyeIcon secondary={active} />} />
+          ),
+          title: 'History',
+          path: `${webappUrl}history`,
+          isForcedLink: true,
+          requiresLogin: true,
+        },
+        {
+          icon: (active: boolean) => (
+            <ListIcon Icon={() => <TerminalIcon secondary={active} />} />
+          ),
+          title: 'Agentic Hub',
+          path: `${webappUrl}agents`,
+          isForcedLink: true,
+          requiresLogin: true,
+        },
+        gameCenter,
+        yearInReview,
+        plusButton,
+      ] as (SidebarMenuItem | undefined)[]
+    ).filter((item): item is SidebarMenuItem => !!item);
   }, [
     ctaCopy,
     isCustomDefaultFeed,
     isLoggedIn,
     isPlus,
     onNavTabClick,
+    showGameCenter,
     showYearInReview,
     user,
   ]);