[hack days] ntp: +search

special-pages/pages/new-tab/app/components/App.module.css

@@ -29,7 +29,7 @@ body[data-animate-background="true"] {
 :global(.layout-centered) {
     margin-inline: auto;
     width: 100%;
-    max-width: calc(504 * var(--px-in-rem));
+    max-width: calc(var(--default-ntp-tube-width) * var(--px-in-rem));
 }
 
 :global(.vertical-space) {

special-pages/pages/new-tab/app/entry-points/search.js

@@ -0,0 +1,11 @@
+import { h } from 'preact';
+import { Centered } from '../components/Layout.js';
+import { Search } from '../search/components/Search.js';
+
+export function factory() {
+    return (
+        <Centered data-entry-point="search">
+            <Search />
+        </Centered>
+    );
+}

special-pages/pages/new-tab/app/favorites/components/Favorites.js

@@ -20,7 +20,7 @@ import { useDocumentVisibility } from '../../../../../shared/components/Document
  * @typedef {import('../../../types/new-tab.js').FavoritesOpenAction['target']} OpenTarget
  */
 export const FavoritesMemo = memo(Favorites);
-export const ROW_CAPACITY = 6;
+export const ROW_CAPACITY = 8;
 /**
  * Note: These values MUST match exactly what's defined in the CSS.
  */
@@ -65,7 +65,7 @@ export function Favorites({ favorites, expansion, toggle, openContextMenu, openF
 
     return (
         <FavoritesThemeContext.Provider value={{ theme: main.value, animateItems }}>
-            <div class={styles.root} data-testid="FavoritesConfigured" data-background-kind={kind}>
+            <div class={styles.root} data-testid="FavoritesConfigured" data-background-kind={kind} style={{ viewTransitionName: 'favs' }}>
                 <VirtualizedGridRows
                     WIDGET_ID={WIDGET_ID}
                     favorites={favorites}

special-pages/pages/new-tab/app/favorites/components/Favorites.module.css

@@ -39,7 +39,7 @@
 
 .gridRow {
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(var(--default-favorites-count), 1fr);
     align-items: start;
     position: absolute;
 }

special-pages/pages/new-tab/app/favorites/components/Tile.module.css

@@ -42,7 +42,7 @@
 .draggable {
     backdrop-filter: blur(48px);
     background: var(--ntp-surface-background-color);
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12), 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
+    box-shadow: var(--ntp-surface-shadow);
     transition: transform .2s;
 
     &:hover {

special-pages/pages/new-tab/app/mock-transport.js

@@ -9,6 +9,7 @@ import { customizerData, customizerMockTransport } from './customizer/mocks.js';
 import { freemiumPIRDataExamples } from './freemium-pir-banner/mocks/freemiumPIRBanner.data.js';
 import { activityMockTransport } from './activity/mocks/activity.mock-transport.js';
 import { protectionsMockTransport } from './protections/mocks/protections.mock-transport.js';
+import { searchMockTransport } from './search/mocks/search.mock-transport.js';
 
 /**
  * @typedef {import('../types/new-tab').Favorite} Favorite
@@ -106,6 +107,7 @@ export function mockTransport() {
         customizer: customizerMockTransport(),
         activity: activityMockTransport(),
         protections: protectionsMockTransport(),
+        search: searchMockTransport(),
     };
 
     return new TestTransportConfig({
@@ -444,6 +446,7 @@ export function mockTransport() {
                         { id: 'rmf' },
                         { id: 'freemiumPIRBanner' },
                         { id: 'nextSteps' },
+                        { id: 'search' },
                         { id: 'favorites' },
                     ];
 

special-pages/pages/new-tab/app/new-tab.md

@@ -10,6 +10,7 @@ children:
   - ./next-steps/next-steps.md
   - ./customizer/customizer.md
   - ./protections/protections.md
+  - ./search/search.md
 ---
 
 ## Requests

special-pages/pages/new-tab/app/protections/components/Protections.js

@@ -35,7 +35,7 @@ export function Protections({ expansion = 'expanded', children, blockedCountSign
     }, [WIDGET_ID, TOGGLE_ID]);
 
     return (
-        <div class={styles.root}>
+        <div class={styles.root} style={{ viewTransitionName: 'protections' }}>
             <ProtectionsHeading
                 blockedCountSignal={blockedCountSignal}
                 onToggle={toggle}

special-pages/pages/new-tab/app/protections/components/Protections.module.css

@@ -2,6 +2,7 @@
     background: var(--ntp-surface-background-color);
     backdrop-filter: blur(48px);
     border: 1px solid var(--ntp-surface-border-color);
+    box-shadow: var(--ntp-surface-shadow);
     padding: var(--sp-6);
     border-radius: var(--border-radius-lg);
     display: grid;