NTP: Scaffold Omnibar widget and message types (#1778)

* Add message schemas

* Scaffold omnibox widget and add data layer

* Add mock transport

* Add rough UI from Hack Days prototype

* Rename omnibox -> omnibar

* Remove UI for now

* Add basic docs

* Fix unused arguments

* Fix lint errors

* Add title to suggestion object types

Author: noisysocks

special-pages/pages/new-tab/app/components/Icons.js

@@ -163,3 +163,28 @@ export function BackChevron() {
         </svg>
     );
 }
+
+/**
+ * From https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Glyphs/16px/Find-Search-16.svg. Inline SVG so that can be styled with CSS.
+ * @param {object} params
+ * @param {string} [params.className]
+ */
+export function SearchIcon({ className }) {
+    return (
+        <svg className={className} fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#Find-Search-16_svg__a)">
+                <path
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    d="M7 0a7 7 0 1 0 4.488 12.372l3.445 3.445a.625.625 0 1 0 .884-.884l-3.445-3.445A7 7 0 0 0 7 0M1.25 7a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0"
+                    clip-rule="evenodd"
+                />
+            </g>
+            <defs>
+                <clipPath id="Find-Search-16_svg__a">
+                    <path fill="#fff" d="M0 0h16v16H0z" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+}

special-pages/pages/new-tab/app/customizer/components/CustomizerMenu.js

@@ -90,7 +90,7 @@ export class VisibilityRowData {
      * @param {object} params
      * @param {string} params.id - a unique id
      * @param {string} params.title - the title as it should appear in the menu
-     * @param {'shield' | 'star'} params.icon - known icon name, maps to an SVG
+     * @param {'shield' | 'star' | 'search'} params.icon - known icon name, maps to an SVG
      * @param {(id: string) => void} params.toggle - toggle function for this item
      * @param {number} params.index - position in the menu
      * @param {WidgetVisibility} params.visibility - known icon name, maps to an SVG

special-pages/pages/new-tab/app/customizer/components/VisibilityMenu.js

@@ -2,7 +2,7 @@ import { h } from 'preact';
 import cn from 'classnames';
 import { useContext } from 'preact/hooks';
 
-import { DuckFoot, Shield } from '../../components/Icons.js';
+import { DuckFoot, SearchIcon, Shield } from '../../components/Icons.js';
 import styles from './VisibilityMenu.module.css';
 import { Switch } from '../../../../../shared/components/Switch/Switch.js';
 import { usePlatformName } from '../../settings.provider.js';
@@ -29,6 +29,7 @@ export function EmbeddedVisibilityMenu({ rows }) {
                             <span className={styles.svg}>
                                 {row.icon === 'shield' && <DuckFoot />}
                                 {row.icon === 'star' && <Shield />}
+                                {row.icon === 'search' && <SearchIcon />}
                             </span>
                             <span>{row.title ?? row.id}</span>
                             <Switch

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

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

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

@@ -82,8 +82,13 @@ export function FavoritesProvider({ children }) {
     // subscribe to data updates
     useDataSubscription({ dispatch, service });
 
-    // subscribe to toggle + expose a fn for sync toggling
-    const { toggle } = useConfigSubscription({ dispatch, service });
+    // subscribe to config updates
+    useConfigSubscription({ dispatch, service });
+
+    // expose a fn for sync toggling
+    const toggle = useCallback(() => {
+        service.current?.toggleExpansion();
+    }, [service]);
 
     /** @type {ReorderFn<Favorite>} */
     const favoritesDidReOrder = useCallback(

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 { omnibarMockTransport } from './omnibar/mocks/omnibar.mock-transport.js';
 
 /**
  * @typedef {import('../types/new-tab').Favorite} Favorite
@@ -117,6 +118,7 @@ export function mockTransport() {
         customizer: customizerMockTransport(),
         activity: activityMockTransport(),
         protections: protectionsMockTransport(),
+        omnibar: omnibarMockTransport(),
     };
 
     return new TestTransportConfig({
@@ -490,6 +492,7 @@ export function mockTransport() {
                     return Promise.resolve(fromStorage);
                 }
                 case 'initialSetup': {
+                    /** @type {import('../types/new-tab.ts').Widgets} */
                     const widgetsFromStorage = read('widgets') || [
                         { id: 'updateNotification' },
                         { id: 'rmf' },
@@ -498,6 +501,7 @@ export function mockTransport() {
                         { id: 'favorites' },
                     ];
 
+                    /** @type {import('../types/new-tab.ts').WidgetConfigs} */
                     const widgetConfigFromStorage = read('widget_config') || [{ id: 'favorites', visibility: 'visible' }];
 
                     /** @type {UpdateNotificationData} */
@@ -524,6 +528,13 @@ export function mockTransport() {
                     widgetsFromStorage.push({ id: 'protections' });
                     widgetConfigFromStorage.push({ id: 'protections', visibility: 'visible' });
 
+                    if (url.searchParams.has('omnibar')) {
+                        const favoritesWidgetIndex = widgetsFromStorage.findIndex((widget) => widget.id === 'favorites') ?? 0;
+                        widgetsFromStorage.splice(favoritesWidgetIndex, 0, { id: 'omnibar' });
+                        const favoritesWidgetConfigIndex = widgetConfigFromStorage.findIndex((widget) => widget.id === 'favorites') ?? 0;
+                        widgetConfigFromStorage.splice(favoritesWidgetConfigIndex, 0, { id: 'omnibar', visibility: 'visible' });
+                    }
+
                     initial.customizer = customizerData();
 
                     /** @type {import('../types/new-tab').NewTabPageSettings} */

special-pages/pages/new-tab/app/next-steps/NextStepsProvider.js

@@ -59,8 +59,13 @@ export function NextStepsProvider(props) {
     // subscribe to data updates
     useDataSubscription({ dispatch, service });
 
-    // subscribe to toggle + expose a fn for sync toggling
-    const { toggle } = useConfigSubscription({ dispatch, service });
+    // subscribe to config updates
+    useConfigSubscription({ dispatch, service });
+
+    // expose a fn for sync toggling
+    const toggle = useCallback(() => {
+        service.current?.toggleExpansion();
+    }, [service]);
 
     /** @type {(id: string) => void} */
     const action = useCallback(

special-pages/pages/new-tab/app/omnibar/components/Omnibar.js

@@ -0,0 +1,23 @@
+import { h } from 'preact';
+import styles from './Omnibar.module.css';
+
+/**
+ * @typedef {import('../strings.json')} Strings
+ * @typedef {import('../../../types/new-tab.js').OmnibarConfig} OmnibarConfig
+ * @typedef {import('../../../types/new-tab.js').SuggestionsData} SuggestionsData
+ * @typedef {import('../../../types/new-tab.js').Suggestion} Suggestion
+ * @typedef {import('../../../types/new-tab.js').OpenTarget} OpenTarget
+ */
+
+/**
+ * @param {object} props
+ * @param {OmnibarConfig['mode']} props.mode
+ * @param {(mode: OmnibarConfig['mode']) => void} props.setMode
+ * @param {(term: string) => Promise<SuggestionsData>} props.getSuggestions
+ * @param {(params: {suggestion: Suggestion, target: OpenTarget}) => void} props.openSuggestion
+ * @param {(params: {term: string, target: OpenTarget}) => void} props.submitSearch
+ * @param {(params: {chat: string, target: OpenTarget}) => void} props.submitChat
+ */
+export function Omnibar(props) {
+    return <div class={styles.root}>Omnibar goes here. Mode = {props.mode}</div>;
+}

special-pages/pages/new-tab/app/omnibar/components/Omnibar.module.css

@@ -0,0 +1,7 @@
+.root {
+    align-items: center;
+    border: 1px solid red;
+    display: flex;
+    height: 96px;
+    justify-content: center;
+}

special-pages/pages/new-tab/app/omnibar/components/OmnibarConsumer.js

@@ -0,0 +1,47 @@
+import { useContext } from 'preact/hooks';
+import { OmnibarContext } from './OmnibarProvider.js';
+import { h } from 'preact';
+import { Omnibar } from './Omnibar.js';
+
+/**
+ * @typedef {import('../../../types/new-tab.js').OmnibarConfig} OmnibarConfig
+ */
+
+/**
+ * Use this when you want to render the UI from a context where
+ * the service is available.
+ *
+ * for example:
+ *
+ * ```jsx
+ * <OmnibarProvider>
+ *   <OmnibarConsumer />
+ * </OmnibarProvider>
+ * ```
+ */
+export function OmnibarConsumer() {
+    const { state } = useContext(OmnibarContext);
+    if (state.status === 'ready') {
+        return <OmnibarReadyState config={state.config} />;
+    }
+    return null;
+}
+
+/**
+ * @param {object} props
+ * @param {OmnibarConfig} props.config
+ */
+function OmnibarReadyState({ config }) {
+    const { setMode, getSuggestions, openSuggestion, submitSearch, submitChat } = useContext(OmnibarContext);
+
+    return (
+        <Omnibar
+            mode={config.mode}
+            setMode={setMode}
+            getSuggestions={getSuggestions}
+            openSuggestion={openSuggestion}
+            submitSearch={submitSearch}
+            submitChat={submitChat}
+        />
+    );
+}