feat: weekly tech-news quiz (arcade leaderboard game)

packages/shared/src/components/MainFeedLayout.tsx

@@ -24,6 +24,7 @@ import { useFeeds } from '../hooks/feed/useFeeds';
 import { WebappShortcutsRow } from '../features/shortcuts/components/WebappShortcutsRow';
 import { LiveStandupsStrip } from './liveRooms/LiveStandupsStrip';
 import { AskSearchBanner } from './marketing/banners/AskSearchBanner';
+import { WeeklyQuizBanner } from '../features/weeklyQuiz/components/WeeklyQuizBanner';
 import { FeedEngagementBanner } from './brand/FeedEngagementBanner';
 import FeedContext from '../contexts/FeedContext';
 import feedStyles from './Feed.module.css';
@@ -803,6 +804,7 @@ export default function MainFeedLayout({
         >
           <FeedEngagementBanner className="mb-3" />
         </div>
+        {isHomePage && <WeeklyQuizBanner className="mx-4 mb-4 laptop:mx-0" />}
         {isHomePage && (
           <LiveStandupsStrip className="mx-0 mb-3 tablet:mx-2 laptop:mx-0" />
         )}

packages/shared/src/components/icons/Swords/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 SwordsIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/icons/VolumeLow/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 VolumeLowIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

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

@@ -178,7 +178,9 @@ export * from './Upvote';
 export * from './User';
 export * from './UserShare';
 export * from './V';
+export * from './Swords';
 export * from './Volume';
+export * from './VolumeLow';
 export * from './VolumeOff';
 export * from './Warning';
 export * from './Whatsapp';

packages/shared/src/components/modals/common.tsx

@@ -526,6 +526,13 @@ const PostImpressionsModal = dynamic(
     ),
 );
 
+const WeeklyQuizModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "weeklyQuizModal" */ '../../features/weeklyQuiz/components/WeeklyQuizModal'
+    ),
+);
+
 export const modals = {
   [LazyModal.SquadMember]: SquadMemberModal,
   [LazyModal.UpvotedPopup]: UpvotedPopupModal,
@@ -611,6 +618,7 @@ export const modals = {
   [LazyModal.ReaderExtensionInstall]: ReaderExtensionInstallModal,
   [LazyModal.ReaderPreview]: ReaderPreviewLazyModal,
   [LazyModal.PostImpressions]: PostImpressionsModal,
+  [LazyModal.WeeklyQuiz]: WeeklyQuizModal,
 };
 
 type GetComponentProps<T> = T extends

packages/shared/src/components/modals/common/types.ts

@@ -109,6 +109,7 @@ export enum LazyModal {
   ReaderExtensionInstall = 'readerExtensionInstall',
   ReaderPreview = 'readerPreview',
   PostImpressions = 'postImpressions',
+  WeeklyQuiz = 'weeklyQuiz',
 }
 
 export type ModalTabItem = {

packages/shared/src/components/widgets/SocialShareList.tsx

@@ -27,6 +27,11 @@ interface SocialShareListProps {
   onNativeShare(): void;
   onClickSocial(provider: ShareProvider): void;
   shortenUrl?: boolean;
+  // When set and the device can share files (mobile), the social buttons open
+  // the native share sheet with this image attached instead of the platform's
+  // web intent — the only client-side way to share a real image (web intents
+  // carry text + link only). Email/Copy keep their dedicated behavior.
+  nativeShareFile?: File | null;
 }
 
 export function SocialShareList({
@@ -39,13 +44,28 @@ export function SocialShareList({
   onNativeShare,
   onClickSocial,
   shortenUrl = true,
+  nativeShareFile,
 }: SocialShareListProps): ReactElement {
   const { getShortUrl } = useGetShortUrl();
 
   const openShareLink = async (provider: ShareProvider) => {
     onClickSocial(provider);
 
     const isEmailShare = provider === ShareProvider.Email;
+    // On mobile, route the platform buttons through the native share sheet so
+    // the image rides along (web intents can't attach files). Called with no
+    // prior await to stay inside the tap gesture. Email keeps its mailto.
+    if (
+      !isEmailShare &&
+      nativeShareFile &&
+      globalThis.navigator?.canShare?.({ files: [nativeShareFile] })
+    ) {
+      navigator
+        .share({ text: `${description} ${link}`, files: [nativeShareFile] })
+        .catch(() => undefined);
+      return;
+    }
+
     const shortLink = shortenUrl ? await getShortUrl(link) : link;
     const shareLink = getShareLink({
       provider,