Merge branch 'funnel/signup-hero-blocks' of github.com:dailydotdev/apps into funnel/signup-hero-blocks

Author: AmarTrebinjac

AGENTS.md

@@ -16,6 +16,10 @@ We're a startup. We move fast, iterate quickly, and embrace change. When impleme
 - Use early returns instead of if-else blocks for cleaner, flatter code
 - Handle the errors or checks first and return early then proceed with happy path at the end of code block
 
+**Comments:**
+- Do not add comments that restate what the code already says. If a variable name, condition, or function call makes the intent clear, no comment is needed.
+- Only comment to explain *why* something non-obvious is done (a constraint, a gotcha, a deliberate trade-off) — never to narrate *what* the code does line by line.
+
 **Invariant handling:**
 - Do not silently ignore impossible states (for example, no-op rollback fallbacks in mutation/cache flows)
 - Fail fast with a clear thrown error message when an internal invariant is violated

package.json

@@ -23,5 +23,8 @@
   },
   "volta": {
     "node": "24.14.0"
+  },
+  "devDependencies": {
+    "eslint-plugin-unused-imports": "3.2.0"
   }
 }

packages/eslint-config/package.json

@@ -18,7 +18,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-tailwindcss": "^3.18.3",
-    "eslint-plugin-unused-imports": "^3.2.0",
+    "eslint-plugin-unused-imports": "3.2.0",
     "typescript": "5.6.3"
   },
   "peerDependencies": {

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extension",
-  "version": "3.45.0",
+  "version": "3.45.4",
   "scripts": {
     "dev": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome rspack build -c rspack.config.js --watch",
     "build": "cross-env NODE_ENV=production cross-env TARGET_BROWSER=chrome rspack build -c rspack.config.js",

packages/extension/public/_locales/es/messages.json

@@ -1,6 +1,6 @@
 {
   "extensionName": {
-    "message": "daily.dev | La forma inteligente de seguir la actualidad tech, en cada nueva pestaña"
+    "message": "daily.dev | Sigue la actualidad tech en cada nueva pestaña"
   },
   "extensionDescription": {
     "message": "Noticias tech personalizadas para tu stack, en cada nueva pestaña. Únete a más de 400.000 developers. Gratis y open source."

packages/extension/public/_locales/fr/messages.json

@@ -1,6 +1,6 @@
 {
   "extensionName": {
-    "message": "daily.dev | L’actualité des développeurs comme elle devrait l’être, dans chaque nouvel onglet"
+    "message": "daily.dev | L’actu des devs, comme il faut, dans chaque nouvel onglet"
   },
   "extensionDescription": {
     "message": "L’actualité des développeurs, personnalisée selon votre stack, dans chaque nouvel onglet. Rejoignez plus de 400 000 développeurs. Gratuit et open source."

packages/extension/src/background/index.ts

@@ -11,6 +11,8 @@ import { install, uninstall } from '@dailydotdev/shared/src/lib/constants';
 import { BOOT_LOCAL_KEY } from '@dailydotdev/shared/src/contexts/common';
 import { ExtensionMessageType } from '@dailydotdev/shared/src/lib/extension';
 import { storageWrapper as storage } from '@dailydotdev/shared/src/lib/storageWrapper';
+import { frameEmbeddingPermissionBridgeTiming } from '@dailydotdev/shared/src/features/extensionEmbed/pagePermissionBridge';
+import type { PermissionGrantResponse } from '@dailydotdev/shared/src/features/extensionEmbed/pagePermissionBridge';
 import {
   getContentScriptPermissionAndRegister,
   registerEmbedTargetReadyContentScript,
@@ -20,6 +22,7 @@ import {
   disableFrameEmbeddingForTab,
   enableFrameEmbeddingForTab,
 } from '../lib/frameEmbedding';
+import { requestFrameEmbeddingPermissions } from '../lib/frameEmbeddingPermissions';
 
 type ChromeRuntimeMessageSender = Runtime.MessageSender;
 type ChromeSendResponse = (response?: unknown) => void;
@@ -67,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',
@@ -185,6 +195,78 @@ async function handleMessages(
     return disableFrameEmbeddingForTab(tabId);
   }
 
+  if (message.type === ExtensionMessageType.PingFrameEmbeddingReady) {
+    // Lightweight liveness check used by the content script to detect when
+    // the service worker is back online after the post-grant runtime.reload.
+    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
+    // callable from extension pages, so the content script forwards here and
+    // the user gesture from the originating click is preserved via the
+    // Runtime.MessageSender.userGesture flag.
+    try {
+      const granted = await requestFrameEmbeddingPermissions();
+      if (granted) {
+        // Chromium needs a fresh extension context to pick up the just-granted
+        // optional host permission for declarativeNetRequest — without it the
+        // DNR session-rule call from frame.html hangs. Schedule the reload
+        // on the next tick so the response can be delivered first; the
+        // content script then polls until the new worker is up before
+        // resolving the grant Promise on the page.
+        globalThis.setTimeout(() => {
+          browser.runtime.reload();
+        }, frameEmbeddingPermissionBridgeTiming.reloadDelayMs);
+      }
+      const response: PermissionGrantResponse = {
+        granted,
+        willReload: granted,
+      };
+      return response;
+    } catch (error) {
+      const response: PermissionGrantResponse = {
+        granted: false,
+        error:
+          error instanceof Error
+            ? error.message
+            : 'Failed to request frame embedding permissions',
+      };
+      return response;
+    }
+  }
+
   await getContentScriptPermissionAndRegister();
 
   if (message.type === ExtensionMessageType.ContentLoaded) {

packages/extension/src/companion/CompanionPopupButton.tsx

@@ -11,7 +11,7 @@ import { useContentScriptStatus } from '@dailydotdev/shared/src/hooks';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import { CompanionPermission } from './CompanionPermission';
 
-export const CompanionPopupButton = (): ReactElement => {
+export const CompanionPopupButton = (): ReactElement | null => {
   const { logEvent } = useLogContext();
   const { contentScriptGranted, isFetched } = useContentScriptStatus();
   const [showCompanionPermission, setShowCompanionPermission] = useState(false);
@@ -56,6 +56,9 @@ export const CompanionPopupButton = (): ReactElement => {
       content={<CompanionPermission />}
       placement="bottom-start"
       showArrow={false}
+      // Portal to body so the popover escapes the v2 sidebar's
+      // `overflow-hidden` panel.
+      appendTo={() => document.body}
       container={{
         paddingClassName: 'px-6 py-4',
         bgClassName: 'bg-background-default',

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}`

packages/extension/src/newtab/ExtensionSignInStrip.tsx

@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  Typography,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
+
+// Sticky strip pinned to the top of the new tab for logged-out users so
+// the auth CTAs stay reachable while scrolling. Shares the feed's
+// primary background so it reads as part of the same surface.
+export const ExtensionSignInStrip = (): ReactElement | null => {
+  const { isAuthReady, isLoggedIn, showLogin } = useAuthContext();
+
+  if (!isAuthReady || isLoggedIn) {
+    return null;
+  }
+
+  const onLogIn = () =>
+    showLogin({
+      trigger: AuthTriggers.MainButton,
+      options: { isLogin: true },
+    });
+  const onSignUp = () =>
+    showLogin({
+      trigger: AuthTriggers.MainButton,
+      options: { isLogin: false },
+    });
+
+  return (
+    <section
+      aria-label="Sign in to daily.dev"
+      className="sticky top-0 z-3 mx-4 mb-3 laptop:mx-0"
+    >
+      <div className="flex items-center justify-between gap-4 rounded-12 border border-border-subtlest-quaternary bg-background-default px-6 py-4">
+        <Typography
+          type={TypographyType.Body}
+          bold
+          className="min-w-0 flex-1 text-text-primary"
+        >
+          Sign in to personalize your feed and save what matters.
+        </Typography>
+        <div className="flex shrink-0 items-center gap-2">
+          <Button
+            type="button"
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.Small}
+            onClick={onLogIn}
+          >
+            Log in
+          </Button>
+          <Button
+            type="button"
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Small}
+            onClick={onSignUp}
+          >
+            Sign up
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};