Merge branch 'main' into feat/fields-v2-redesign

tsahimatsliah · web-flow · commit 3451f2daf13c · 2026-06-01T23:25:07.000+03:00
diff --git a/packages/extension/src/background/index.ts b/packages/extension/src/background/index.ts
@@ -70,6 +70,13 @@ const getTargetTabId = async (
 
 const client = new GraphQLClient(graphqlUrl, { fetch: globalThis.fetch });
 
+// Once-off signal set when the activation primer opens chrome://newtab. The
+// new tab page consumes it on load to route a logged-out user into onboarding
+// a single time. Kept in memory (no `storage` permission in prod) — the
+// service worker stays alive across the brief open-tab → tab-load handoff; if
+// it doesn't, the new tab simply falls back to its normal behavior.
+let activateOnboardingPending = false;
+
 const excludedCompanionOrigins = [
   'http://127.0.0.1:5002',
   'http://localhost',
@@ -194,6 +201,36 @@ async function handleMessages(
     return { ready: true };
   }
 
+  if (message.type === ExtensionMessageType.RequestOpenNewTab) {
+    // Open a real new tab so Chrome shows the new-tab override-confirmation
+    // bubble. The literal `chrome://newtab` URL is required —
+    // `chrome.runtime.getURL('index.html')` loads the override page directly
+    // via `chrome-extension://` and does NOT register as an NTP visit. We also
+    // arm the once-off onboarding signal so the new tab can route a logged-out
+    // user straight into onboarding a single time.
+    try {
+      activateOnboardingPending = true;
+      await browser.tabs.create({ url: 'chrome://newtab', active: true });
+      return { triggered: true };
+    } catch (error) {
+      activateOnboardingPending = false;
+      return {
+        triggered: false,
+        error:
+          error instanceof Error ? error.message : 'Failed to open new tab',
+      };
+    }
+  }
+
+  if (message.type === ExtensionMessageType.ConsumeActivateOnboarding) {
+    // The new tab page asks once on load whether it should route into
+    // onboarding. Reset immediately so this only ever fires for the tab the
+    // primer just opened.
+    const pending = activateOnboardingPending;
+    activateOnboardingPending = false;
+    return { pending };
+  }
+
   if (message.type === ExtensionMessageType.RequestFrameEmbeddingPermissions) {
     // Relay path so the daily.dev page can drive chrome.permissions.request
     // without losing the user gesture. chrome.permissions.request is only
diff --git a/packages/extension/src/newtab/App.tsx b/packages/extension/src/newtab/App.tsx
@@ -19,13 +19,17 @@ import { defaultQueryClientConfig } from '@dailydotdev/shared/src/lib/query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useWebVitals } from '@dailydotdev/shared/src/hooks/useWebVitals';
 import { useGrowthBookContext } from '@dailydotdev/shared/src/components/GrowthBookProvider';
-import { isTesting } from '@dailydotdev/shared/src/lib/constants';
+import {
+  isTesting,
+  onboardingUrl,
+} from '@dailydotdev/shared/src/lib/constants';
 import { withFeaturesBoundary } from '@dailydotdev/shared/src/components/withFeaturesBoundary';
 import { LazyModalElement } from '@dailydotdev/shared/src/components/modals/LazyModalElement';
 import { useHostStatus } from '@dailydotdev/shared/src/hooks/useHostPermissionStatus';
 import ExtensionPermissionsPrompt from '@dailydotdev/shared/src/components/ExtensionPermissionsPrompt';
 import { useExtensionContext } from '@dailydotdev/shared/src/contexts/ExtensionContext';
 import { useConsoleLogo } from '@dailydotdev/shared/src/hooks/useConsoleLogo';
+import { ExtensionMessageType } from '@dailydotdev/shared/src/lib/extension';
 import { DndContextProvider } from '@dailydotdev/shared/src/contexts/DndContext';
 import { structuredCloneJsonPolyfill } from '@dailydotdev/shared/src/lib/structuredClone';
 import { useOnboardingActions } from '@dailydotdev/shared/src/hooks/auth';
@@ -136,6 +140,29 @@ function InternalApp(): ReactElement {
     }
   }, [contentScriptGranted]);
 
+  useEffect(() => {
+    if (!isPageReady) {
+      return undefined;
+    }
+    let isActive = true;
+    // Ask the background once whether the activation primer opened this tab.
+    // If so, a logged-out user is routed into onboarding a single time; every
+    // later new tab falls back to the normal behavior below.
+    browser.runtime
+      .sendMessage({ type: ExtensionMessageType.ConsumeActivateOnboarding })
+      .then((response) => {
+        const pending = (response as { pending?: boolean } | undefined)
+          ?.pending;
+        if (isActive && pending && !user) {
+          window.location.href = onboardingUrl;
+        }
+      })
+      .catch(() => undefined);
+    return () => {
+      isActive = false;
+    };
+  }, [isPageReady, user]);
+
   useEffect(() => {
     document.title = unreadCount
       ? `(${unreadCount}) ${DEFAULT_TAB_TITLE}`
diff --git a/packages/extension/src/ping/index.ts b/packages/extension/src/ping/index.ts
@@ -22,6 +22,11 @@ import type {
   PagePermissionBridgeResult,
   PermissionGrantResponse,
 } from '@dailydotdev/shared/src/features/extensionEmbed/pagePermissionBridge';
+import {
+  newTabActivationBridgeRequestEvent,
+  newTabActivationBridgeResultEvent,
+} from '@dailydotdev/shared/src/features/extensionEmbed/newTabActivationBridge';
+import type { NewTabActivationBridgeResult } from '@dailydotdev/shared/src/features/extensionEmbed/newTabActivationBridge';
 
 const INSTALL_MARKER = 'dailyExtensionInstalled';
 const ID_MARKER = 'dailyExtensionId';
@@ -65,6 +70,38 @@ const waitForExtensionReady = async (): Promise<void> => {
   }
 };
 
+window.addEventListener(newTabActivationBridgeRequestEvent, () => {
+  const dispatchResult = (result: NewTabActivationBridgeResult): void => {
+    window.dispatchEvent(
+      new CustomEvent<NewTabActivationBridgeResult>(
+        newTabActivationBridgeResultEvent,
+        { detail: result },
+      ),
+    );
+  };
+
+  browser.runtime
+    .sendMessage({
+      type: ExtensionMessageType.RequestOpenNewTab,
+    })
+    .then((response) => {
+      const typed = response as NewTabActivationBridgeResult | undefined;
+      dispatchResult({
+        triggered: !!typed?.triggered,
+        error: typed?.error,
+      });
+    })
+    .catch((error: unknown) => {
+      dispatchResult({
+        triggered: false,
+        error:
+          error instanceof Error
+            ? error.message
+            : 'Failed to request new tab open',
+      });
+    });
+});
+
 window.addEventListener(pagePermissionBridgeRequestEvent, () => {
   const dispatchResult = (result: PagePermissionBridgeResult): void => {
     window.dispatchEvent(
diff --git a/packages/shared/src/features/extensionEmbed/newTabActivationBridge.ts b/packages/shared/src/features/extensionEmbed/newTabActivationBridge.ts
@@ -0,0 +1,70 @@
+// Page <-> content-script bridge for the post-install activation primer.
+//
+// The webapp asks the extension to open `chrome://newtab` so Chrome shows
+// the new-tab override-confirmation bubble while the user is still in our
+// primer context. The webapp dispatches a CustomEvent on `window`; the ping
+// content script forwards it to the background, which calls
+// `chrome.tabs.create({ url: 'chrome://newtab' })`. The literal
+// `chrome://newtab` URL is required — passing the override page via
+// `chrome.runtime.getURL` would not register as an NTP visit and would not
+// trigger the bubble.
+
+export const newTabActivationBridgeRequestEvent =
+  'daily-extension-request-open-new-tab';
+export const newTabActivationBridgeResultEvent =
+  'daily-extension-open-new-tab-result';
+
+export type NewTabActivationBridgeResult = {
+  triggered: boolean;
+  error?: string;
+};
+
+const PAGE_HELPER_TIMEOUT_MS = 10_000;
+
+// Drives `chrome.tabs.create({ url: 'chrome://newtab' })` through the
+// installed extension's content script. Resolves once the background has
+// confirmed the tab was opened (or on timeout if the extension is absent).
+export const requestOpenNewTabFromPage = (
+  timeoutMs: number = PAGE_HELPER_TIMEOUT_MS,
+): Promise<NewTabActivationBridgeResult> => {
+  if (typeof window === 'undefined') {
+    return Promise.resolve({
+      triggered: false,
+      error: 'window-unavailable',
+    });
+  }
+
+  return new Promise<NewTabActivationBridgeResult>((resolve) => {
+    let settled = false;
+    let timeoutId: ReturnType<typeof globalThis.setTimeout> | undefined;
+
+    const onResult = (event: Event): void => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      window.removeEventListener(newTabActivationBridgeResultEvent, onResult);
+      if (timeoutId !== undefined) {
+        globalThis.clearTimeout(timeoutId);
+      }
+      const { detail } = event as CustomEvent<NewTabActivationBridgeResult>;
+      resolve({
+        triggered: !!detail?.triggered,
+        error: detail?.error,
+      });
+    };
+
+    timeoutId = globalThis.setTimeout(() => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      window.removeEventListener(newTabActivationBridgeResultEvent, onResult);
+      resolve({ triggered: false, error: 'timeout' });
+    }, timeoutMs);
+
+    window.addEventListener(newTabActivationBridgeResultEvent, onResult);
+
+    window.dispatchEvent(new CustomEvent(newTabActivationBridgeRequestEvent));
+  });
+};
diff --git a/packages/shared/src/features/onboarding/components/NewTabActivationPrimer.tsx b/packages/shared/src/features/onboarding/components/NewTabActivationPrimer.tsx
@@ -0,0 +1,105 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { useLogContext } from '../../../contexts/LogContext';
+import { LogEvent } from '../../../lib/log';
+import { cloudinaryOnboardingActivationDemo } from '../../../lib/image';
+import { requestOpenNewTabFromPage } from '../../extensionEmbed/newTabActivationBridge';
+
+type NewTabActivationPrimerProps = {
+  onComplete: () => void;
+};
+
+// Aspect ratio matches source dimensions so the element hugs the frame.
+const DEMO_URL = cloudinaryOnboardingActivationDemo; // 1748×1080
+
+function ActivationDemoVideo(): ReactElement {
+  return (
+    <video
+      src={DEMO_URL}
+      className="aspect-[1748/1080] w-full max-w-[43rem] rounded-16 border border-border-subtlest-tertiary bg-background-subtle shadow-2"
+      muted
+      autoPlay
+      loop
+      playsInline
+      disablePictureInPicture
+      controls={false}
+      aria-label="Rehearsal of Chrome's confirmation bubble and the Keep it click"
+    />
+  );
+}
+
+export function NewTabActivationPrimer({
+  onComplete,
+}: NewTabActivationPrimerProps): ReactElement {
+  const { logEvent } = useLogContext();
+  const [isOpening, setIsOpening] = useState(false);
+
+  useEffect(() => {
+    logEvent({ event_name: LogEvent.ExtensionPrimerShown });
+  }, [logEvent]);
+
+  const handleOpenNewTab = useCallback(async (): Promise<void> => {
+    logEvent({ event_name: LogEvent.ExtensionPrimerCtaClick });
+    setIsOpening(true);
+    // Ask the extension to open chrome://newtab so Chrome's confirmation
+    // bubble appears. Advance this tab afterwards regardless of the result,
+    // so the user is never stranded on the primer.
+    await requestOpenNewTabFromPage();
+    onComplete();
+  }, [logEvent, onComplete]);
+
+  return (
+    <div className="flex w-full flex-1 flex-col items-center justify-center px-6 py-10">
+      <div className="flex w-full max-w-[48rem] flex-col items-center gap-5 text-center">
+        <div className="flex flex-col items-center gap-2">
+          <Typography
+            tag={TypographyTag.H1}
+            type={TypographyType.LargeTitle}
+            color={TypographyColor.Primary}
+            bold
+            className="text-balance"
+          >
+            Welcome! Let&apos;s activate your new tab.
+          </Typography>
+
+          <Typography
+            tag={TypographyTag.P}
+            type={TypographyType.Title3}
+            color={TypographyColor.Secondary}
+            className="text-balance"
+          >
+            Tap “Keep it” on the Chrome popup.
+          </Typography>
+        </div>
+
+        <ActivationDemoVideo />
+
+        <div className="flex flex-col items-center gap-4">
+          <Button
+            type="button"
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.XLarge}
+            disabled={isOpening}
+            onClick={handleOpenNewTab}
+          >
+            {isOpening ? 'Opening…' : 'Open new tab'}
+          </Button>
+          <p className="text-text-tertiary typo-callout">
+            Takes 2 seconds. Reversible anytime.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/shared/src/lib/extension.ts b/packages/shared/src/lib/extension.ts
@@ -8,6 +8,8 @@ export enum ExtensionMessageType {
   DisableFrameEmbeddingForTab = 'DISABLE_FRAME_EMBEDDING_FOR_TAB',
   RequestFrameEmbeddingPermissions = 'REQUEST_FRAME_EMBEDDING_PERMISSIONS',
   PingFrameEmbeddingReady = 'PING_FRAME_EMBEDDING_READY',
+  RequestOpenNewTab = 'REQUEST_OPEN_NEW_TAB',
+  ConsumeActivateOnboarding = 'CONSUME_ACTIVATE_ONBOARDING',
 }
 
 export const getCompanionWrapper = (): HTMLElement | null =>
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
@@ -218,3 +218,8 @@ export const featurePostHighlightCards = new Feature(
   'post_highlight_cards',
   false,
 );
+
+export const featureOnboardingPermissionPrimer = new Feature(
+  'onboarding_permission_primer',
+  false,
+);
diff --git a/packages/shared/src/lib/image.ts b/packages/shared/src/lib/image.ts
@@ -268,6 +268,9 @@ export const cloudinaryOnboardingExtension = {
   },
 };
 
+export const cloudinaryOnboardingActivationDemo =
+  'https://media.daily.dev/video/upload/v1780303637/daily.dev_-_Keep_it_acphx8.mp4';
+
 export const bookmarkFolderSoonImage =
   'https://media.daily.dev/image/upload/s--_jM3zDSE--/f_auto/v1733239852/daily_dev_bookmarks_folders_fsughm';
 
diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts
@@ -486,6 +486,10 @@ export enum LogEvent {
   ReaderEmbedError = 'reader embed error',
   // Onboarding personas
   SelectOnboardingPersona = 'select onboarding persona',
+  // Extension activation primer
+  ExtensionPrimerShown = 'impression extension primer',
+  ExtensionPrimerCtaClick = 'click extension primer cta',
+  ExtensionPrimerSkipped = 'skip extension primer',
 }
 
 export enum TargetType {
diff --git a/packages/webapp/components/layouts/FeedByIds/FeedByIdsLayout.tsx b/packages/webapp/components/layouts/FeedByIds/FeedByIdsLayout.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
 
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import {
@@ -54,7 +55,12 @@ export default function FeedByIdsLayout({
         <MobileFeedActions />
       </div>
       <FeedPageHeader className="mb-5" />
-      {!showEmptyScreen && !!ids?.length && <Feed {...feedProps} />}
+      {!showEmptyScreen && !!ids?.length && (
+        <Feed
+          {...feedProps}
+          className={classNames('laptop:px-10', feedProps.className)}
+        />
+      )}
       {showEmptyScreen && <SearchEmptyScreen />}
     </>
   );
diff --git a/packages/webapp/next.config.ts b/packages/webapp/next.config.ts
@@ -303,6 +303,11 @@ const nextConfig: NextConfig = {
           destination: '/jobs',
           permanent: true,
         },
+        {
+          source: '/em/t/c',
+          destination: `${process.env.NEXT_PUBLIC_API_URL}/em/t/c`,
+          permanent: false,
+        },
       ];
     },
     headers: async () => {
diff --git a/packages/webapp/pages/_app.tsx b/packages/webapp/pages/_app.tsx
diff --git a/packages/webapp/pages/activate.tsx b/packages/webapp/pages/activate.tsx

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,8 @@ export enum ExtensionMessageType {`
`8`	`8`	`DisableFrameEmbeddingForTab = 'DISABLE_FRAME_EMBEDDING_FOR_TAB',`
`9`	`9`	`RequestFrameEmbeddingPermissions = 'REQUEST_FRAME_EMBEDDING_PERMISSIONS',`
`10`	`10`	`PingFrameEmbeddingReady = 'PING_FRAME_EMBEDDING_READY',`
	`11`	`+ RequestOpenNewTab = 'REQUEST_OPEN_NEW_TAB',`
	`12`	`+ ConsumeActivateOnboarding = 'CONSUME_ACTIVATE_ONBOARDING',`
`11`	`13`	`}`
`12`	`14`
`13`	`15`	`export const getCompanionWrapper = (): HTMLElement \| null =>`