feat: reader modal install prompt demo (mockup)

packages/extension/src/frame/render.ts

@@ -23,54 +23,54 @@ const ensureStyles = (): void => {
       position: absolute;
       inset: 0;
       overflow: hidden;
-      opacity: 0.44;
+      opacity: 0.5;
       background:
-        repeating-linear-gradient(
-          120deg,
-          rgba(255, 255, 255, 0.06) 0,
-          rgba(255, 255, 255, 0.06) 0.75rem,
-          transparent 0.75rem,
-          transparent 1.5rem
+        radial-gradient(
+          circle at 50% 42%,
+          rgba(192, 41, 240, 0.18) 0,
+          transparent 18rem
         ),
-        linear-gradient(
-          180deg,
-          rgba(255, 255, 255, 0.02),
-          rgba(255, 255, 255, 0.04)
+        radial-gradient(
+          circle at 38% 58%,
+          rgba(57, 217, 138, 0.1) 0,
+          transparent 16rem
+        ),
+        radial-gradient(
+          circle at 62% 58%,
+          rgba(82, 139, 255, 0.1) 0,
+          transparent 16rem
         );
-      background-size: 190% 190%, 100% 100%;
-      animation: embeddedBrowsingStripeShift 42s linear infinite;
-      will-change: background-position;
+      animation: embeddedBrowsingGlow 6s ease-in-out infinite alternate;
+      will-change: opacity, transform;
     }
     .embedded-browsing-ambient::before {
       content: '';
       position: absolute;
-      inset: 0;
-      background: repeating-linear-gradient(
-        120deg,
-        transparent 0,
-        transparent 1.75rem,
-        rgba(255, 255, 255, 0.04) 1.75rem,
-        rgba(255, 255, 255, 0.04) 2.5rem
-      );
-      background-size: 220% 220%;
-      animation: embeddedBrowsingStripeShiftReverse 58s linear infinite;
-      opacity: 0.24;
+      top: 50%;
+      left: 50%;
+      width: 12rem;
+      height: 12rem;
+      border: 1px solid rgba(255, 255, 255, 0.16);
+      border-radius: 9999px;
+      opacity: 0.22;
+      transform: translate(-50%, -50%) scale(0.9);
+      animation: embeddedBrowsingPulse 3.8s ease-in-out infinite;
     }
-    @keyframes embeddedBrowsingStripeShift {
-      0% { background-position: 0% 0%, 50% 50%; }
-      100% { background-position: 220% 120%, 50% 50%; }
+    @keyframes embeddedBrowsingGlow {
+      0% { opacity: 0.36; transform: scale(0.99); }
+      100% { opacity: 0.54; transform: scale(1.01); }
     }
-    @keyframes embeddedBrowsingStripeShiftReverse {
-      0% { background-position: 220% 140%; }
-      100% { background-position: 0% 0%; }
+    @keyframes embeddedBrowsingPulse {
+      0% { opacity: 0.08; transform: translate(-50%, -50%) scale(0.82); }
+      55% { opacity: 0.22; }
+      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
     }
     @media (prefers-reduced-motion: reduce) {
       .embedded-browsing-ambient,
       .embedded-browsing-ambient::before {
         animation: none;
       }
       .embedded-browsing-ambient {
-        background-position: 50% 50%, 50% 50%;
         opacity: 0.42;
       }
       .embedded-browsing-ambient::before {
@@ -82,7 +82,7 @@ const ensureStyles = (): void => {
       z-index: 10;
       display: flex;
       width: 100%;
-      max-width: 40rem;
+      max-width: 24rem;
       flex-shrink: 0;
       flex-direction: column;
       align-items: center;
@@ -99,6 +99,7 @@ const ensureStyles = (): void => {
     }
     .embedded-browsing-body {
       margin: 0;
+      max-width: 21rem;
       font-size: 0.9375rem;
       line-height: 1.25rem;
       color: #cfd6e6;
@@ -142,15 +143,16 @@ const ensureStyles = (): void => {
     .embedded-browsing-button:disabled { opacity: 0.6; cursor: not-allowed; }
     .embedded-browsing-button-secondary {
       background: transparent;
-      color: #cfd6e6;
-      font-weight: 500;
-      min-width: 0;
-      padding: 0 0.75rem;
+      color: #e3e8f3;
+      border: 1.5px solid rgba(255, 255, 255, 0.28);
+      font-weight: 600;
     }
     .embedded-browsing-button-secondary:hover {
-      opacity: 1;
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.42);
       color: #ffffff;
-      transform: none;
+      opacity: 1;
+      transform: translateY(-1px);
     }
   `;
   document.head.appendChild(style);
@@ -210,47 +212,47 @@ export const renderPermissionPrompt = ({
 
   const heading = document.createElement('h2');
   heading.className = 'embedded-browsing-heading';
-  heading.textContent = 'Enable embedded browsing';
+  heading.textContent = 'Read it right here.';
 
   const description = document.createElement('p');
   description.className = 'embedded-browsing-body';
   description.textContent =
-    'To load websites inside daily.dev, allow this extension to modify response headers on embedded pages.';
+    'Enable reader preview to open articles inside daily.dev with the discussion next to them.';
 
   const status = document.createElement('p');
   status.className = 'embedded-browsing-status';
-  status.textContent =
-    'This is optional and only applies to pages embedded by daily.dev.';
+  status.textContent = 'Only for links you open from daily.dev.';
 
   const actions = document.createElement('div');
   actions.className = 'embedded-browsing-actions';
 
   const button = document.createElement('button');
   button.type = 'button';
   button.className = 'embedded-browsing-button';
-  button.textContent = 'Enable for this browser';
+  button.textContent = 'Enable reader preview';
 
   const resetButton = () => {
     button.disabled = false;
   };
 
   button.addEventListener('click', async () => {
     button.disabled = true;
-    status.textContent = 'Requesting permissions...';
+    status.textContent = 'Just a sec…';
 
     const outcome = await onRequestPermission();
     if (outcome === 'granted') {
-      status.textContent = 'Permissions granted. Reloading extension...';
+      status.textContent = "You're in. Reloading…";
       return;
     }
 
     if (outcome === 'dismissed') {
-      status.textContent = 'Permission request was dismissed.';
+      status.textContent =
+        'Permission was dismissed — tap below when you’re ready.';
       resetButton();
       return;
     }
 
-    status.textContent = 'Failed to enable embedded browsing.';
+    status.textContent = "Something didn't quite work. Try again?";
     resetButton();
   });
 
@@ -261,7 +263,7 @@ export const renderPermissionPrompt = ({
     optOutButton.type = 'button';
     optOutButton.className =
       'embedded-browsing-button embedded-browsing-button-secondary';
-    optOutButton.textContent = "I'd rather not read inside daily.dev";
+    optOutButton.textContent = "Don't ask again, open new tab";
     optOutButton.addEventListener('click', () => {
       onOptOut();
     });

packages/shared/src/components/Feed.tsx

@@ -147,13 +147,6 @@ const SocialTwitterPostModal = dynamic(
     ),
 );
 
-const ReaderPostModal = dynamic(
-  () =>
-    import(
-      /* webpackChunkName: "readerPostModal" */ './modals/ReaderPostModal'
-    ),
-);
-
 const BriefCardFeed = dynamic(
   () =>
     import(
@@ -544,20 +537,11 @@ export default function Feed<T>({
     if (!selectedPost) {
       return undefined;
     }
-    const readerEligibleTypes = new Set([
-      PostType.Article,
-      PostType.Digest,
-      PostType.VideoYouTube,
-    ]);
-    if (
-      isReaderModalFeatureReady &&
-      isReaderModalOn &&
-      readerEligibleTypes.has(selectedPost.type)
-    ) {
-      return ReaderPostModal;
-    }
+    // DEMO ONLY: card clicks now always open the classic post modal so the
+    // user can see title / TL;DR first. The reader modal is reached via the
+    // new install-prompt pop-up's "Preview the experience" CTA instead.
     return PostModalMap[selectedPost.type];
-  }, [selectedPost, isReaderModalFeatureReady, isReaderModalOn]);
+  }, [selectedPost]);
 
   if (!loadedSettings || isFallback) {
     return <></>;

packages/shared/src/components/cards/common/PostCardHeader.tsx

@@ -9,6 +9,7 @@ import { isSourceUserSource } from '../../../graphql/sources';
 import { ReadArticleButton, getReadPostButtonIcon } from './ReadArticleButton';
 import { getGroupedHoverContainer } from './common';
 import { useBookmarkProvider, useFeedPreviewMode } from '../../../hooks';
+import { useReaderInstallPromptGate } from '../../../hooks/useReaderInstallPromptGate';
 import type { Post } from '../../../graphql/posts';
 import {
   getReadPostButtonText,
@@ -66,6 +67,15 @@ export const PostCardHeader = ({
   const { highlightBookmarkedPost } = useBookmarkProvider({
     bookmarked: (post.bookmarked && !showFeedback) ?? false,
   });
+  const { onReadClick: onReaderInstallGateClick } =
+    useReaderInstallPromptGate(post);
+
+  const handleReadArticleClick = (event: React.MouseEvent) => {
+    if (onReaderInstallGateClick(event)) {
+      return;
+    }
+    onReadArticleClick?.(event);
+  };
 
   const articleLink = useMemo(() => {
     if (post.sharedPost) {
@@ -118,7 +128,7 @@ export const PostCardHeader = ({
                   className="mr-2"
                   variant={ButtonVariant.Primary}
                   href={articleLink ?? ''}
-                  onClick={onReadArticleClick}
+                  onClick={handleReadArticleClick}
                   openNewTab={openNewTab}
                   icon={getReadPostButtonIcon(post)}
                 />