feat(feed): sponsored strip docked on the main feed [mock-up]

packages/shared/src/components/MainFeedLayout.tsx

@@ -17,7 +17,7 @@ import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import type { FeedProps } from './Feed';
 import Feed from './Feed';
-import { FeedPageLayoutMobile } from './utilities/common';
+import { FeedPageLayoutMobile, feedGutter } from './utilities/common';
 import { ExploreChipsBar } from './feeds/ExploreChipsBar';
 import { buildPersonalizedCategories } from './feeds/exploreCategories';
 import { useFeeds } from '../hooks/feed/useFeeds';
@@ -671,7 +671,14 @@ export default function MainFeedLayout({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sortingEnabled, selectedAlgo, loadedSettings, loadedAlgo]);
 
-  const disableTopPadding = isFinder || shouldUseListFeedLayout;
+  // Explore keeps the page's top padding in both layouts. It renders a
+  // breadcrumb and tab header above the feed, and zeroing the padding
+  // leaves that header jammed under the site header — while
+  // `shouldUseListFeedLayout` flips between first paint and mount
+  // (see `enableSsrSafeLayout`), so keying the spacing to it made the
+  // gap change size on navigation and settle differently on reload.
+  const disableTopPadding =
+    isFinder || (shouldUseListFeedLayout && !isAnyExplore);
   const onTabChange = useCallback(
     (clickedTab: ExploreTabs) => {
       if (clickedTab === ExploreTabs.BestOf && isExtension) {
@@ -694,7 +701,13 @@ export default function MainFeedLayout({
         <FeedExploreHeader
           tab={tab}
           setTab={onTabChange}
-          className={{ tabWrapper: 'my-4' }}
+          // The breadcrumbs used to start flush against the header
+          // with 0px above them, and then sat 16px off the tab strip —
+          // spacing that read as one loose block rather than a
+          // heading and its tabs. Give the group room above and pull
+          // the tabs up under the breadcrumbs they belong to; the
+          // 16px down to the cards is unchanged.
+          className={{ container: feedGutter, tabWrapper: 'mb-4 mt-2' }}
         />
       );
     }
@@ -705,8 +718,10 @@ export default function MainFeedLayout({
         setTab={onTabChange}
         showBreadcrumbs={false}
         className={{
-          container:
+          container: classNames(
             'sticky top-[4.5rem] z-header w-full border-b border-border-subtlest-tertiary bg-background-default',
+            feedGutter,
+          ),
           tabBarHeader: 'no-scrollbar overflow-x-auto',
           tabBarContainer: 'min-w-0 flex-1',
         }}
@@ -835,9 +850,7 @@ export default function MainFeedLayout({
                   </div>
                 ) : undefined
               }
-              className={classNames(
-                shouldUseListFeedLayout && !isFinder && 'laptop:px-6',
-              )}
+              className={classNames(!isFinder && feedGutter)}
             />
           )
         )}

packages/shared/src/components/sponsors/CodeRabbitLockup.tsx

@@ -0,0 +1,65 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { LockupProps } from './SponsoredStrip';
+
+/**
+ * CodeRabbit's lockup, inline so it can be drawn two ways.
+ *
+ * In colour the mark is orange with a white detail inside it and the
+ * wordmark takes `currentColor` — the shipped asset's wordmark is
+ * near-black (#171717) and disappears on the dark feed.
+ *
+ * As a silhouette the same two shapes become a single path under
+ * `evenodd`, so the detail is a hole rather than paint. That matters:
+ * the wall silhouettes through a CSS mask, which reads paint as
+ * opaque, so drawing the detail as a filled shape turned the rabbit
+ * into a flat blob.
+ *
+ * Drawing the rabbit alone and dropping the disc is the other option,
+ * and it is more legible at the 16-20px the wall gives a logo — but it
+ * is not their mark. Keep the disc; this is a paid slot.
+ *
+ * Paths are CodeRabbit's own artwork (viewBox 0 0 2152 314); only the
+ * fills and the knockout are ours.
+ */
+export const CodeRabbitLockup = ({ monochrome }: LockupProps): ReactElement => (
+  <svg
+    className="size-full"
+    fill="currentColor"
+    role="img"
+    aria-label="CodeRabbit"
+    viewBox="0 0 2152 314"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    {monochrome ? (
+      <path
+        clipRule="evenodd"
+        d="M156.513 313.5C242.945 313.5 313.013 243.433 313.013 157C313.013 70.5674 242.945 0.5 156.513 0.5C70.0801 0.5 0.0126953 70.5674 0.0126953 157C0.0126953 243.433 70.0801 313.5 156.513 313.5Z M262.786 131.077C262.786 131.077 240.981 103.203 213.571 101.609C195.883 100.565 191.598 102.928 190.83 104.688C189.732 95.5622 181.932 53.2825 128.046 44.3223C134.925 93.7713 163.334 80.8866 180.065 114.969C180.065 114.969 151.832 76.5941 105.416 90.7232C105.416 90.7232 122.334 126.24 172.374 133.497C172.374 133.497 176.384 147.241 177.593 149.661C177.593 149.661 100.527 109.471 77.1269 186.606C59.7121 182.661 53.8708 201.566 73.8868 214.48C73.8868 214.48 77.2926 200.955 85.5858 196.942C85.5858 196.942 67.7888 216.79 88.7167 240.561H163.831C165.646 237.554 173.679 221.736 153.812 209.763C167.836 209.562 179.251 236.015 191.532 240.743H209.395C209.999 239.274 211.263 234.876 208.295 230.919C203.721 225.672 193.706 226.382 193.795 216.679C197.254 171.54 264.938 185.402 262.786 131.077Z"
+        fillRule="evenodd"
+      />
+    ) : (
+      <>
+        <path
+          d="M156.513 313.5C242.945 313.5 313.013 243.433 313.013 157C313.013 70.5674 242.945 0.5 156.513 0.5C70.0801 0.5 0.0126953 70.5674 0.0126953 157C0.0126953 243.433 70.0801 313.5 156.513 313.5Z"
+          fill="#FF570A"
+        />
+        <path
+          d="M262.786 131.077C262.786 131.077 240.981 103.203 213.571 101.609C195.883 100.565 191.598 102.928 190.83 104.688C189.732 95.5622 181.932 53.2825 128.046 44.3223C134.925 93.7713 163.334 80.8866 180.065 114.969C180.065 114.969 151.832 76.5941 105.416 90.7232C105.416 90.7232 122.334 126.24 172.374 133.497C172.374 133.497 176.384 147.241 177.593 149.661C177.593 149.661 100.527 109.471 77.1269 186.606C59.7121 182.661 53.8708 201.566 73.8868 214.48C73.8868 214.48 77.2926 200.955 85.5858 196.942C85.5858 196.942 67.7888 216.79 88.7167 240.561H163.831C165.646 237.554 173.679 221.736 153.812 209.763C167.836 209.562 179.251 236.015 191.532 240.743H209.395C209.999 239.274 211.263 234.876 208.295 230.919C203.721 225.672 193.706 226.382 193.795 216.679C197.254 171.54 264.938 185.402 262.786 131.077Z"
+          fill="#FEFEFE"
+        />
+      </>
+    )}
+    <path d="M470.612 107.687C479.309 91.6833 491.434 79.1662 506.984 70.2257C522.537 61.2852 540.195 56.8149 559.876 56.8149C584.032 56.8149 604.676 63.3414 621.898 76.3053C639.121 89.2692 650.537 106.972 656.337 129.413H601.868C597.827 120.74 592.027 114.214 584.645 109.654C577.178 105.094 568.747 102.859 559.256 102.859C543.971 102.859 531.672 108.223 522.181 119.041C512.695 129.859 507.95 144.344 507.95 162.403C507.95 180.464 512.695 194.947 522.181 205.765C531.672 216.583 543.971 221.948 559.256 221.948C568.747 221.948 577.178 219.713 584.645 215.153C592.113 210.593 597.827 204.066 601.868 195.394H656.337C650.537 217.835 639.029 235.448 621.898 248.323C604.676 261.197 584.032 267.634 559.876 267.634C540.195 267.634 522.537 263.164 506.984 254.224C491.434 245.283 479.309 232.856 470.612 216.941C461.914 201.027 457.609 182.878 457.609 162.403C457.609 141.93 461.914 123.691 470.612 107.687Z" />
+    <path d="M711.861 258.247C699.212 251.363 689.286 241.528 681.99 228.743C674.786 215.958 671.095 201.027 671.095 183.951C671.095 166.874 674.786 152.122 682.082 139.248C689.457 126.373 699.476 116.539 712.216 109.654C724.951 102.77 739.273 99.3726 755.085 99.3726C770.904 99.3726 785.22 102.77 797.96 109.654C810.701 116.539 820.713 126.373 828.095 139.248C835.477 152.122 839.076 167.053 839.076 183.951C839.076 200.849 835.385 215.779 827.917 228.653C820.449 241.528 810.345 251.363 797.519 258.247C784.693 265.131 770.376 268.529 754.472 268.529C738.568 268.529 724.423 265.131 711.775 258.247H711.861ZM778.807 214.349C785.483 207.285 788.825 197.183 788.825 183.951C788.825 170.719 785.575 160.705 779.162 153.553C772.657 146.489 764.754 142.913 755.263 142.913C745.772 142.913 737.605 146.4 731.192 153.373C724.779 160.347 721.615 170.539 721.615 183.861C721.615 197.183 724.779 207.196 731.014 214.259C737.25 221.322 745.159 224.899 754.65 224.899C764.135 224.899 772.222 221.322 778.807 214.259V214.349Z" />
+    <path d="M859.284 139.072C865.519 126.287 874.134 116.452 884.937 109.568C895.746 102.684 907.781 99.2865 921.135 99.2865C931.767 99.2865 941.429 101.521 950.215 106.081C959.001 110.641 965.941 116.721 970.944 124.32V47.9673H1020.5V266.118H970.944V242.515C966.291 250.383 959.7 256.641 951.092 261.379C942.484 266.118 932.465 268.442 921.135 268.442C907.781 268.442 895.746 264.955 884.937 257.982C874.134 251.008 865.611 241.084 859.284 228.21C853.049 215.335 849.885 200.494 849.885 183.507C849.885 166.52 853.049 151.768 859.284 138.982V139.072ZM960.669 154.092C953.814 146.851 945.47 143.184 935.629 143.184C925.789 143.184 917.444 146.761 910.59 153.913C903.741 161.066 900.314 170.99 900.314 183.507C900.314 196.023 903.741 206.037 910.59 213.458C917.444 220.789 925.789 224.544 935.629 224.544C945.47 224.544 953.814 220.878 960.669 213.637C967.523 206.395 970.944 196.471 970.944 183.864C970.944 171.258 967.523 161.334 960.669 154.092Z" />
+    <path d="M1202.18 196.02H1090.08C1090.87 206.212 1094.12 214.081 1099.74 219.445C1105.45 224.809 1112.48 227.581 1120.74 227.581C1133.13 227.581 1141.73 222.306 1146.57 211.667H1199.28C1196.56 222.485 1191.73 232.23 1184.61 240.813C1177.58 249.485 1168.71 256.28 1158.08 261.197C1147.45 266.115 1135.58 268.529 1122.41 268.529C1106.6 268.529 1092.45 265.131 1080.15 258.247C1067.76 251.363 1058.1 241.528 1051.16 228.743C1044.22 215.958 1040.7 201.027 1040.7 183.951C1040.7 166.874 1044.13 151.943 1050.98 139.158C1057.84 126.373 1067.41 116.539 1079.8 109.654C1092.19 102.77 1106.33 99.3726 1122.41 99.3726C1138.48 99.3726 1151.93 102.68 1164.14 109.386C1176.26 116.092 1185.84 125.569 1192.69 137.996C1199.54 150.334 1202.97 164.818 1202.97 181.358C1202.97 186.097 1202.71 191.014 1202.09 196.11L1202.18 196.02ZM1152.37 168.036C1152.37 159.364 1149.47 152.48 1143.67 147.383C1137.87 142.287 1130.67 139.694 1121.97 139.694C1113.27 139.694 1106.68 142.109 1100.97 147.026C1095.26 151.943 1091.75 158.917 1090.43 167.947H1152.46L1152.37 168.036Z" />
+    <path d="M1329.92 266.199L1287.67 188.059H1275.8V266.199H1226.25V59.2246H1309.37C1325.44 59.2246 1339.06 62.0855 1350.4 67.8073C1361.73 73.5297 1370.16 81.3077 1375.78 91.2321C1381.41 101.156 1384.22 112.242 1384.22 124.401C1384.22 138.17 1380.44 150.419 1372.8 161.237C1365.15 172.055 1353.91 179.744 1339.06 184.214L1385.97 266.199H1330.01H1329.92ZM1275.72 152.386H1306.47C1315.51 152.386 1322.37 150.151 1326.85 145.591C1331.42 141.031 1333.7 134.683 1333.7 126.458C1333.7 118.232 1331.42 112.421 1326.85 107.862C1322.28 103.302 1315.51 101.066 1306.47 101.066H1275.72V152.386Z" />
+    <path d="M1408.9 139.062C1415.15 126.277 1423.75 116.442 1434.56 109.558C1445.37 102.674 1457.49 100.26 1470.76 100.26H1570.12V266.108H1520.57V242.862C1515.74 250.551 1509.06 256.721 1500.45 261.459C1491.84 266.197 1481.83 268.522 1470.49 268.522C1457.32 268.522 1445.37 265.035 1434.56 258.062C1423.75 251.088 1415.23 241.164 1408.9 228.29C1402.67 215.415 1399.51 200.573 1399.51 183.586C1399.51 166.599 1402.67 151.847 1408.9 139.062ZM1510.29 154.082C1503.44 146.841 1495.09 143.175 1485.26 143.175C1475.42 143.175 1467.06 146.751 1460.22 153.903C1453.36 161.056 1449.93 170.98 1449.93 183.497C1449.93 196.014 1453.36 206.027 1460.22 213.448C1467.06 220.779 1475.42 224.534 1485.26 224.534C1495.09 224.534 1503.44 220.869 1510.29 213.627C1517.14 206.385 1520.57 196.461 1520.57 183.855C1520.57 171.248 1517.14 161.324 1510.29 154.082Z" />
+    <path d="M1669.83 106.349C1678.53 101.611 1688.46 99.2865 1699.7 99.2865C1713.06 99.2865 1725.09 102.684 1735.9 109.568C1746.71 116.452 1755.23 126.287 1761.56 139.072C1767.79 151.857 1770.96 166.698 1770.96 183.596C1770.96 200.494 1767.79 215.425 1761.56 228.299C1755.32 241.173 1746.71 251.098 1735.9 258.072C1725.09 265.045 1713.06 268.532 1699.7 268.532C1688.28 268.532 1678.36 266.208 1669.83 261.648C1661.31 256.999 1654.63 250.919 1649.8 243.23V266.208H1600.25V47.9673H1649.8V124.946C1654.46 117.257 1661.14 111.088 1669.83 106.349ZM1710.25 154.002C1703.4 146.851 1694.96 143.274 1684.86 143.274C1674.76 143.274 1666.67 146.94 1659.82 154.182C1652.97 161.423 1649.54 171.348 1649.54 183.954C1649.54 196.56 1652.97 206.484 1659.82 213.726C1666.67 220.968 1675.02 224.633 1684.86 224.633C1694.7 224.633 1703.13 220.968 1710.07 213.547C1717.01 206.216 1720.53 196.203 1720.53 183.596C1720.53 170.99 1717.1 161.155 1710.25 154.002Z" />
+    <path d="M1860.75 106.349C1869.45 101.611 1879.38 99.2865 1890.62 99.2865C1903.98 99.2865 1916.01 102.684 1926.82 109.568C1937.62 116.452 1946.15 126.287 1952.47 139.072C1958.71 151.857 1961.87 166.698 1961.87 183.596C1961.87 200.494 1958.71 215.425 1952.47 228.299C1946.23 241.173 1937.62 251.098 1926.82 258.072C1916.01 265.045 1903.98 268.532 1890.62 268.532C1879.2 268.532 1869.27 266.208 1860.75 261.648C1852.23 256.999 1845.55 250.919 1840.72 243.23V266.208H1791.17V47.9673H1840.72V124.946C1845.37 117.257 1852.05 111.088 1860.75 106.349ZM1901.16 154.002C1894.31 146.851 1885.88 143.274 1875.77 143.274C1865.67 143.274 1857.59 146.94 1850.73 154.182C1843.89 161.423 1840.46 171.348 1840.46 183.954C1840.46 196.56 1843.89 206.484 1850.73 213.726C1857.59 220.968 1865.93 224.633 1875.77 224.633C1885.61 224.633 1894.05 220.968 1900.99 213.547C1907.93 206.216 1911.44 196.203 1911.44 183.596C1911.44 170.99 1908.02 161.155 1901.16 154.002Z" />
+    <path d="M1985.77 76.7514C1980.23 71.5655 1977.51 65.1286 1977.51 57.4396C1977.51 49.7507 1980.23 43.045 1985.77 37.8597C1991.3 32.6737 1998.33 30.0811 2007.02 30.0811C2015.72 30.0811 2022.49 32.6737 2028.02 37.8597C2033.56 43.045 2036.28 49.5714 2036.28 57.4396C2036.28 65.3073 2033.56 71.5655 2028.02 76.7514C2022.49 81.9368 2015.54 84.5294 2007.02 84.5294C1998.5 84.5294 1991.21 81.9368 1985.77 76.7514ZM2031.71 101.695V266.202H1982.16V101.606H2031.71V101.695Z" />
+    <path d="M2151.9 223.375V266.111H2126.68C2108.76 266.111 2094.71 261.641 2084.69 252.7C2074.67 243.76 2069.67 229.186 2069.67 208.891V143.446H2049.99V101.604H2069.67V61.5503H2119.22V101.604H2151.64V143.446H2119.22V209.517C2119.22 214.434 2120.36 218.011 2122.74 220.156C2125.02 222.302 2128.89 223.375 2134.33 223.375H2151.99H2151.9Z" />
+  </svg>
+);
+
+export default CodeRabbitLockup;

packages/shared/src/components/sponsors/NvidiaLockup.tsx

@@ -0,0 +1,40 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { LockupProps } from './SponsoredStrip';
+
+/**
+ * NVIDIA's lockup, inline so it can be two-tone.
+ *
+ * The brand sets the symbol in green and the wordmark in black or
+ * white to suit the background — as a flat file that is two assets,
+ * and whichever one ships is invisible on the other theme. Rendered
+ * inline the wordmark takes `currentColor`, so it is black on the
+ * light feed and white on the dark one from a single source, while
+ * the symbol keeps #76B900 on both.
+ *
+ * Paths are NVIDIA's own artwork (the 656x120 Wikimedia lockup,
+ * viewBox 0 0 164 30); only the fills are ours. Path roles were
+ * identified by bounding box: symbol x 0-45.3, wordmark x 52.7-157.7,
+ * (R) x 158.8-162.4.
+ */
+export const NvidiaLockup = ({ monochrome }: LockupProps): ReactElement => (
+  <svg
+    className="size-full"
+    fill="currentColor"
+    preserveAspectRatio="xMidYMid meet"
+    role="img"
+    aria-label="NVIDIA"
+    style={{ fillRule: 'evenodd', clipRule: 'evenodd' }}
+    viewBox="0 0 164 30"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.889,8.985L16.889,6.28C17.151,6.26 17.417,6.247 17.687,6.238C25.087,6.006 29.942,12.597 29.942,12.597C29.942,12.597 24.698,19.879 19.076,19.879C18.333,19.882 17.594,19.764 16.889,19.529L16.889,11.325C19.769,11.673 20.349,12.945 22.081,15.833L25.933,12.585C25.933,12.585 23.121,8.897 18.381,8.897C17.866,8.897 17.373,8.933 16.889,8.985ZM16.889,0.047L16.889,4.09C17.154,4.069 17.42,4.052 17.687,4.042C27.977,3.696 34.682,12.482 34.682,12.482C34.682,12.482 26.982,21.846 18.959,21.846C18.224,21.846 17.535,21.778 16.889,21.663L16.889,24.161C17.442,24.231 18.015,24.273 18.613,24.273C26.078,24.273 31.477,20.461 36.705,15.948C37.572,16.642 41.121,18.331 41.85,19.071C36.879,23.231 25.295,26.586 18.727,26.586C18.113,26.584 17.5,26.552 16.889,26.49L16.889,30L45.264,30L45.264,0.047L16.889,0.047ZM16.889,19.529L16.889,21.662C9.984,20.432 8.067,13.254 8.067,13.254C8.067,13.254 11.383,9.58 16.889,8.985L16.889,11.325L16.878,11.324C13.988,10.977 11.731,13.677 11.731,13.677C11.731,13.677 12.996,18.221 16.889,19.529ZM4.625,12.943C4.625,12.943 8.717,6.903 16.889,6.28L16.889,4.088C7.838,4.815 0,12.48 0,12.48C0,12.48 4.439,25.313 16.889,26.488L16.889,24.16C7.753,23.011 4.625,12.943 4.625,12.943Z"
+      {...(monochrome ? {} : { fill: '#76B900' })}
+    />
+    <path d="M96.374,5.707L96.376,25.367L101.928,25.367L101.928,5.707L96.374,5.707ZM52.697,5.681L52.697,25.367L58.3,25.367L58.3,10.086L62.67,10.1C64.107,10.1 65.1,10.445 65.793,11.184C66.672,12.12 67.03,13.628 67.03,16.389L67.03,25.367L72.457,25.367L72.457,14.49C72.457,6.727 67.509,5.68 62.668,5.68L52.698,5.68L52.697,5.681ZM105.314,5.708L105.314,25.367L114.32,25.367C119.118,25.367 120.684,24.569 122.377,22.78C123.575,21.524 124.348,18.766 124.348,15.753C124.348,12.99 123.693,10.525 122.551,8.99C120.494,6.245 117.531,5.708 113.106,5.708L105.314,5.708ZM110.822,9.988L113.209,9.988C116.672,9.988 118.912,11.544 118.912,15.579C118.912,19.616 116.672,21.171 113.209,21.171L110.822,21.171L110.822,9.988ZM88.369,5.708L83.735,21.288L79.295,5.709L73.302,5.708L79.642,25.367L87.645,25.367L94.036,5.708L88.369,5.708ZM126.932,25.367L132.485,25.367L132.485,5.709L126.93,5.708L126.932,25.367ZM142.496,5.715L134.743,25.36L140.218,25.36L141.445,21.888L150.62,21.888L151.781,25.36L157.725,25.36L149.913,5.714L142.496,5.715ZM146.1,9.3L149.464,18.504L142.631,18.504L146.101,9.3L146.1,9.3Z" />
+    <path d="M160.352,24.069L160.352,23.62L160.64,23.62C160.797,23.62 161.011,23.632 161.011,23.824C161.011,24.032 160.901,24.069 160.715,24.069L160.352,24.069M160.352,24.384L160.544,24.384L160.991,25.168L161.481,25.168L160.987,24.352C161.242,24.333 161.452,24.212 161.452,23.868C161.452,23.441 161.157,23.303 160.659,23.303L159.938,23.303L159.938,25.168L160.352,25.168L160.352,24.384M162.45,24.238C162.45,23.143 161.599,22.508 160.65,22.508C159.695,22.508 158.845,23.143 158.845,24.238C158.845,25.333 159.695,25.971 160.65,25.971C161.598,25.971 162.45,25.333 162.45,24.238M161.93,24.238C161.93,25.036 161.343,25.572 160.65,25.572L160.65,25.566C159.937,25.572 159.361,25.036 159.361,24.238C159.361,23.441 159.938,22.907 160.65,22.907C161.344,22.907 161.93,23.441 161.93,24.238" />
+  </svg>
+);
+
+export default NvidiaLockup;