feat(webapp): your brief homepage mockup

packages/shared/src/components/MainFeedLayout.tsx

@@ -17,6 +17,7 @@ import { buildPersonalizedCategories } from './feeds/exploreCategories';
 import { useFeedTagsList } from '../hooks/useFeedTagsList';
 import ReadingReminderHero from './marketing/banners/ReadingReminderHero';
 import { WebappShortcutsRow } from '../features/shortcuts/components/WebappShortcutsRow';
+import { BriefSwitcher } from '../features/briefingHome/BriefSwitcher';
 import { LiveStandupsStrip } from './liveRooms/LiveStandupsStrip';
 import { AskSearchBanner } from './marketing/banners/AskSearchBanner';
 import AuthContext from '../contexts/AuthContext';
@@ -719,6 +720,9 @@ export default function MainFeedLayout({
       {isSearchOn && isFinder && !isSearchPageLaptop && (
         <AskSearchBanner className="mx-4 mb-4" />
       )}
+      {isHomePage && !!user && (
+        <BriefSwitcher className="mb-4 mt-2 self-center" />
+      )}
       {shouldShowReadingReminderOnHomepage && (
         <ReadingReminderHero
           className="px-4 pb-2"

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

@@ -10,6 +10,7 @@ import {
   HotIcon,
   JoystickIcon,
   SquadIcon,
+  MagicIcon,
   MegaphoneIcon,
   YearInReviewIcon,
 } from '../../icons';
@@ -144,9 +145,22 @@ export const MainSection = ({
         }
       : undefined;
 
+    const brief = isLoggedIn
+      ? {
+          icon: (active: boolean) => (
+            <ListIcon Icon={() => <MagicIcon secondary={active} />} />
+          ),
+          title: 'Your brief',
+          path: `${webappUrl}your-brief`,
+          isForcedLink: true,
+          requiresLogin: true,
+        }
+      : undefined;
+
     return (
       [
         myFeed,
+        brief,
         {
           title: 'Following',
           // this path can be opened on extension so it purposly

packages/shared/src/features/briefingHome/BriefCover.tsx

@@ -0,0 +1,186 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { BriefSwitcher } from './BriefSwitcher';
+import { CoverHeader } from './CoverHeader';
+import { CoverLead } from './CoverLead';
+import { CoverGrid } from './CoverGrid';
+import { CoverTopics } from './CoverTopics';
+import { CoverClosing } from './CoverClosing';
+import { ReadingPanel } from './ReadingPanel';
+import type { EntityKind } from './ReadingPanel';
+import { useBriefItems } from './hooks/useBriefItems';
+import { useReadTracker } from './hooks/useReadTracker';
+import type { BriefEntity, StoryItem, TopicDigest } from './types';
+
+interface BriefCoverProps {
+  className?: string;
+}
+
+const wordsIn = (text: string): number =>
+  text.split(/\s+/).filter(Boolean).length;
+
+const estimateReadMinutes = (
+  lead: StoryItem,
+  reads: StoryItem[],
+  topics: TopicDigest[],
+): number => {
+  const stories = [lead, ...reads];
+  const storyWords = stories.reduce(
+    (sum, s) =>
+      sum +
+      wordsIn(s.summary) +
+      s.highlightedComments
+        .slice(0, 2)
+        .reduce((acc, c) => acc + wordsIn(c.content), 0),
+    0,
+  );
+  const topicWords = topics.reduce(
+    (sum, t) =>
+      sum + wordsIn(t.tldr) + wordsIn(t.content.replace(/<[^>]+>/g, ' ')) * 0.3,
+    0,
+  );
+  return Math.max(3, Math.round((storyWords + topicWords) / 220));
+};
+
+export const BriefCover = ({
+  className,
+}: BriefCoverProps): ReactElement | null => {
+  const brief = useBriefItems();
+  const { readSet, markRead, reset: resetReads } = useReadTracker();
+  const [activePanel, setActivePanel] = useState<{
+    entity: StoryItem | TopicDigest;
+    list: Array<StoryItem | TopicDigest>;
+  } | null>(null);
+
+  const totals = useMemo(() => {
+    const total = 1 + brief.reads.length + brief.topics.length;
+    const readMinutes = estimateReadMinutes(
+      brief.lead,
+      brief.reads,
+      brief.topics,
+    );
+    const savedMinutes = [brief.lead, ...brief.reads].reduce(
+      (sum, s) => sum + s.posts.length * 3 + Math.round(s.totalComments * 0.2),
+      0,
+    );
+    const readCount = [
+      brief.lead.id,
+      ...brief.reads.map((s) => s.id),
+      ...brief.topics.map((t) => t.id),
+    ].filter((id) => readSet.has(id)).length;
+    return {
+      total,
+      readMinutes,
+      savedMinutes,
+      readCount,
+      isComplete: readCount === total,
+    };
+  }, [brief, readSet]);
+
+  const storyList = useMemo<Array<StoryItem | TopicDigest>>(
+    () => [brief.lead, ...brief.reads, ...brief.topics],
+    [brief],
+  );
+
+  const entityKindById = useMemo<Map<string, EntityKind>>(() => {
+    const map = new Map<string, EntityKind>();
+    map.set(brief.lead.id, 'lead');
+    brief.reads.forEach((s) => map.set(s.id, 'read'));
+    brief.topics.forEach((t) => map.set(t.id, 'topic'));
+    return map;
+  }, [brief]);
+
+  const openPanel = useCallback(
+    (entity: StoryItem | TopicDigest) => {
+      markRead(entity.id);
+      setActivePanel({ entity, list: storyList });
+    },
+    [markRead, storyList],
+  );
+
+  const uniqueSourceCount = useMemo(() => {
+    const ids = new Set<string>();
+    [brief.lead, ...brief.reads].forEach((s) =>
+      s.sources.forEach((src) => ids.add(src.sourceId)),
+    );
+    return ids.size;
+  }, [brief]);
+
+  const scannedCount = useMemo(() => {
+    const stories = [brief.lead, ...brief.reads];
+    const postsAcrossStories = stories.reduce(
+      (acc, s) => acc + Math.max(s.posts.length, 1),
+      0,
+    );
+    return postsAcrossStories * 47 + brief.topics.length * 220 + 1130;
+  }, [brief]);
+
+  const edition = useMemo(() => {
+    const epochDay = Math.floor(Date.now() / (1000 * 60 * 60 * 24));
+    return epochDay - 19800 + 142;
+  }, []);
+
+  const navigatePanel = useCallback(
+    (delta: 1 | -1) => {
+      setActivePanel((current) => {
+        if (!current) {
+          return current;
+        }
+        const idx = current.list.findIndex((e) => e.id === current.entity.id);
+        const nextIdx =
+          (idx + delta + current.list.length) % current.list.length;
+        const next = current.list[nextIdx];
+        markRead(next.id);
+        return { entity: next, list: current.list };
+      });
+    },
+    [markRead],
+  );
+
+  return (
+    <section
+      id="brief-bounds"
+      aria-label="Your daily brief"
+      className={classNames(
+        'mx-auto mb-6 flex w-full max-w-[64rem] flex-col px-3 pt-8 tablet:px-4',
+        className,
+      )}
+    >
+      <BriefSwitcher className="mb-10" />
+      <div className="flex flex-col gap-12">
+        <CoverHeader
+          totals={totals}
+          sourceCount={uniqueSourceCount}
+          scannedCount={scannedCount}
+          onReset={resetReads}
+        />
+        <CoverLead story={brief.lead} onOpen={() => openPanel(brief.lead)} />
+        <CoverGrid
+          stories={brief.reads}
+          readSet={readSet}
+          onMarkRead={markRead}
+          onOpen={(s) => openPanel(s as StoryItem)}
+        />
+        <CoverTopics
+          topics={brief.topics}
+          readSet={readSet}
+          onMarkRead={markRead}
+          onOpen={(t) => openPanel(t as TopicDigest)}
+        />
+        <CoverClosing totals={totals} edition={edition} />
+      </div>
+      {activePanel ? (
+        <ReadingPanel
+          entity={activePanel.entity}
+          entityKind={entityKindById.get(activePanel.entity.id) ?? 'read'}
+          onNext={() => navigatePanel(1)}
+          onPrev={() => navigatePanel(-1)}
+          onClose={() => setActivePanel(null)}
+        />
+      ) : null}
+    </section>
+  );
+};
+
+export type { BriefEntity };

packages/shared/src/features/briefingHome/BriefSwitcher.tsx

@@ -0,0 +1,89 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import Link from '../../components/utilities/Link';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../components/typography/Typography';
+import { MagicIcon, HomeIcon } from '../../components/icons';
+import { IconSize } from '../../components/Icon';
+
+interface BriefSwitcherProps {
+  className?: string;
+}
+
+const TAB_BRIEF = '/your-brief';
+const TAB_FEED = '/';
+
+export const BriefSwitcher = ({
+  className,
+}: BriefSwitcherProps): ReactElement => {
+  const router = useRouter();
+  const path = router?.pathname ?? '';
+  const isBrief = path === TAB_BRIEF;
+
+  return (
+    <nav
+      aria-label="Brief / feed switch"
+      className={classNames(
+        'mx-auto inline-flex w-fit items-center gap-1 rounded-12 border border-border-subtlest-tertiary bg-background-default p-1',
+        className,
+      )}
+    >
+      <Link href={TAB_BRIEF} passHref>
+        <a
+          aria-current={isBrief ? 'page' : undefined}
+          className={classNames(
+            'inline-flex items-center gap-2 rounded-10 px-3 py-1.5 transition-colors',
+            isBrief
+              ? 'bg-surface-float text-text-primary'
+              : 'text-text-tertiary hover:bg-surface-float hover:text-text-primary',
+          )}
+        >
+          <MagicIcon
+            size={IconSize.XSmall}
+            className={
+              isBrief ? 'text-accent-cabbage-default' : 'text-text-tertiary'
+            }
+            secondary={isBrief}
+          />
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Footnote}
+            bold
+            color={isBrief ? TypographyColor.Primary : TypographyColor.Tertiary}
+          >
+            Your brief
+          </Typography>
+        </a>
+      </Link>
+      <Link href={TAB_FEED} passHref>
+        <a
+          aria-current={!isBrief ? 'page' : undefined}
+          className={classNames(
+            'inline-flex items-center gap-2 rounded-10 px-3 py-1.5 transition-colors',
+            !isBrief
+              ? 'bg-surface-float text-text-primary'
+              : 'text-text-tertiary hover:bg-surface-float hover:text-text-primary',
+          )}
+        >
+          <HomeIcon size={IconSize.XSmall} secondary={!isBrief} />
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Footnote}
+            bold
+            color={
+              !isBrief ? TypographyColor.Primary : TypographyColor.Tertiary
+            }
+          >
+            Your feed
+          </Typography>
+        </a>
+      </Link>
+    </nav>
+  );
+};