feat: daily

packages/shared/src/components/feeds/ExploreChipsBar.tsx

@@ -9,6 +9,10 @@ import { webappUrl } from '../../lib/constants';
 import useCustomDefaultFeed from '../../hooks/feed/useCustomDefaultFeed';
 import { ElementPlaceholder } from '../ElementPlaceholder';
 import { useLogContext } from '../../contexts/LogContext';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { featureDailyPage } from '../../lib/featureManagement';
+import { DailySwitcher } from '../../features/daily/DailySwitcher';
 import type { ExploreCategory } from './exploreCategories';
 import { findActiveChipId } from './exploreCategories';
 import { LogEvent } from '../../lib/log';
@@ -37,6 +41,13 @@ export function ExploreChipsBar({
   const router = useRouter();
   const { isCustomDefaultFeed } = useCustomDefaultFeed();
   const { logEvent } = useLogContext();
+  const { isLoggedIn } = useAuthContext();
+  const { value: isDailyEnabled } = useConditionalFeature({
+    feature: featureDailyPage,
+    shouldEvaluate: isLoggedIn,
+  });
+  // When Daily is on, the Daily/Feed switcher replaces the "For you" chip.
+  const showDailySwitcher = isLoggedIn && isDailyEnabled;
 
   const forYouCategory: ExploreCategory = useMemo(() => {
     const path = isCustomDefaultFeed ? `${webappUrl}my-feed` : webappUrl;
@@ -54,8 +65,8 @@ export function ExploreChipsBar({
   }, [isCustomDefaultFeed]);
 
   const allCategories = useMemo(
-    () => [forYouCategory, ...categories],
-    [forYouCategory, categories],
+    () => (showDailySwitcher ? categories : [forYouCategory, ...categories]),
+    [showDailySwitcher, forYouCategory, categories],
   );
 
   const activeId = useMemo(
@@ -86,6 +97,7 @@ export function ExploreChipsBar({
         <NewStripCta
           className={compact ? 'h-8 rounded-10 px-2.5' : 'h-10 rounded-12 px-3'}
         />
+        {showDailySwitcher && <DailySwitcher reverse compact={compact} />}
         {allCategories.map((category) => {
           const isActive = category.id === activeId;
           const onClick = () => {

packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx

@@ -12,6 +12,9 @@ import useCustomDefaultFeed from '../../hooks/feed/useCustomDefaultFeed';
 import { webappUrl } from '../../lib/constants';
 import { useLogContext } from '../../contexts/LogContext';
 import { LogEvent } from '../../lib/log';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { featureDailyPage } from '../../lib/featureManagement';
+import { DailySwitcher } from '../../features/daily/DailySwitcher';
 import { NewStripCta } from './NewStripCta';
 import { findActiveChipId } from './exploreCategories';
 
@@ -47,23 +50,32 @@ function UnifiedMobileFeedNav(): ReactElement {
   const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed();
   const sortedFeeds = useSortedFeeds({ edges: feeds?.edges });
   const { logEvent } = useLogContext();
+  const { value: isDailyEnabled } = useConditionalFeature({
+    feature: featureDailyPage,
+    shouldEvaluate: isLoggedIn,
+  });
+  // When Daily is on, the Daily/Feed switcher replaces the "For you" chip for
+  // logged-in users (logged-out users still get a "Home" chip).
+  const showDailySwitcher = isLoggedIn && isDailyEnabled;
 
   const items: ChipItem[] = useMemo(() => {
     const list: ChipItem[] = [];
 
     const myFeedHref = isCustomDefaultFeed ? `${webappUrl}my-feed` : webappUrl;
-    list.push({
-      id: 'foryou',
-      label: isLoggedIn ? 'For you' : 'Home',
-      href: myFeedHref,
-      // When a custom feed is the default, `/` shows that feed (not "For you"
-      // content) — so restrict matching to `/my-feed`. Without a custom default
-      // `/` is MyFeed, so include both.
-      matchPaths: isCustomDefaultFeed
-        ? [`${webappUrl}my-feed`]
-        : [myFeedHref, webappUrl, `${webappUrl}my-feed`],
-      group: 'forYou',
-    });
+    if (!showDailySwitcher) {
+      list.push({
+        id: 'foryou',
+        label: isLoggedIn ? 'For you' : 'Home',
+        href: myFeedHref,
+        // When a custom feed is the default, `/` shows that feed (not "For you"
+        // content) — so restrict matching to `/my-feed`. Without a custom
+        // default `/` is MyFeed, so include both.
+        matchPaths: isCustomDefaultFeed
+          ? [`${webappUrl}my-feed`]
+          : [myFeedHref, webappUrl, `${webappUrl}my-feed`],
+        group: 'forYou',
+      });
+    }
 
     sortedFeeds.forEach(({ node: feed }) => {
       const isDefault = isCustomDefaultFeed && feed.id === defaultFeedId;
@@ -192,6 +204,7 @@ function UnifiedMobileFeedNav(): ReactElement {
     sortedFeeds,
     defaultFeedId,
     shouldHideGameCenter,
+    showDailySwitcher,
   ]);
 
   const activeId = useMemo(
@@ -216,6 +229,7 @@ function UnifiedMobileFeedNav(): ReactElement {
       className="no-scrollbar flex w-full items-center gap-2 overflow-x-auto border-b border-border-subtlest-tertiary bg-background-default px-3 py-4"
     >
       <NewStripCta className="rounded-10 px-2.5 py-1.5" />
+      {showDailySwitcher && <DailySwitcher reverse compact />}
       {GROUP_ORDER.map((group) => {
         const groupItems = items.filter((item) => item.group === group);
         if (!groupItems.length) {

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

@@ -27,6 +27,7 @@ import { SharedFeedPage } from '../../utilities';
 import { isExtension } from '../../../lib/func';
 import { useConditionalFeature } from '../../../hooks';
 import {
+  featureDailyPage,
   featurePlusApiLanding,
   featureYearInReview,
 } from '../../../lib/featureManagement';
@@ -54,6 +55,10 @@ export const MainSection = ({
     feature: featureYearInReview,
     shouldEvaluate: isLoggedIn,
   });
+  const { value: showDailyPage } = useConditionalFeature({
+    feature: featureDailyPage,
+    shouldEvaluate: isLoggedIn,
+  });
   const { data: questDashboard } = useQuestDashboard();
   const claimableMilestoneCount = useMemo(
     () =>
@@ -142,6 +147,19 @@ export const MainSection = ({
           }
         : undefined;
 
+    const daily =
+      isLoggedIn && showDailyPage
+        ? {
+            icon: (active: boolean) => (
+              <ListIcon Icon={() => <MagicIcon secondary={active} />} />
+            ),
+            title: 'Daily',
+            path: `${webappUrl}daily`,
+            isForcedLink: true,
+            requiresLogin: true,
+          }
+        : undefined;
+
     const yearInReview = showYearInReview
       ? {
           icon: () => <ListIcon Icon={() => <YearInReviewIcon />} />,
@@ -156,6 +174,7 @@ export const MainSection = ({
     return (
       [
         myFeed,
+        daily,
         {
           title: 'Following',
           // this path can be opened on extension so it purposly
@@ -199,6 +218,7 @@ export const MainSection = ({
     isPlus,
     isV2,
     onNavTabClick,
+    showDailyPage,
     showYearInReview,
     user,
   ]);

packages/shared/src/features/daily/CoverClosing.tsx

@@ -0,0 +1,94 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../components/typography/Typography';
+import { LinkIcon, VIcon } from '../../components/icons';
+import { IconSize } from '../../components/Icon';
+import { useToastNotification } from '../../hooks/useToastNotification';
+import { useLogContext } from '../../contexts/LogContext';
+import { LogEvent, Origin } from '../../lib/log';
+import { DailyFeedback } from './DailyFeedback';
+
+const formatTomorrow = (): string => {
+  const t = new Date();
+  t.setDate(t.getDate() + 1);
+  t.setHours(9, 0, 0, 0);
+  return t.toLocaleString(undefined, {
+    weekday: 'long',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+};
+
+export const CoverClosing = (): ReactElement => {
+  const tomorrow = useMemo(formatTomorrow, []);
+  const { displayToast } = useToastNotification();
+  const { logEvent } = useLogContext();
+
+  const onCopy = async () => {
+    if (typeof window === 'undefined' || !navigator.clipboard) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      displayToast('Link copied to clipboard');
+    } catch {
+      displayToast("Couldn't copy link, try again");
+    }
+  };
+
+  return (
+    <section
+      aria-label="End of brief"
+      className="flex flex-col items-center gap-3 py-6 text-center"
+    >
+      <DailyFeedback
+        prompt="Was today's brief useful?"
+        size="md"
+        align="center"
+        className="mb-2"
+        onVote={(vote) =>
+          logEvent({
+            event_name: LogEvent.DailyFeedback,
+            extra: JSON.stringify({ origin: Origin.DailyPage, vote }),
+          })
+        }
+      />
+
+      <div className="flex flex-col items-center gap-0.5">
+        <div className="bg-accent-avocado-float flex size-12 items-center justify-center rounded-full text-accent-avocado-default">
+          <VIcon size={IconSize.Medium} secondary />
+        </div>
+        <Typography
+          tag={TypographyTag.H2}
+          type={TypographyType.Title2}
+          bold
+          className="!leading-tight tracking-[-0.02em]"
+        >
+          You&apos;re all caught up
+        </Typography>
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Quaternary}
+        >
+          Next brief drops {tomorrow}.
+        </Typography>
+      </div>
+
+      <button
+        type="button"
+        onClick={onCopy}
+        className="mt-1 inline-flex items-center gap-1.5 rounded-10 border border-border-subtlest-quaternary bg-background-default px-3 py-2 text-text-primary transition-colors hover:bg-surface-float"
+      >
+        <LinkIcon size={IconSize.XSmall} />
+        <Typography type={TypographyType.Footnote} bold>
+          Share this brief
+        </Typography>
+      </button>
+    </section>
+  );
+};