NTP: Swap “Show Duck.ai” / “Hide Duck.ai” link for a Duck.ai toggle (#1870)

* Add Duck.ai toggle to visibility menu

* Refactor Customizer Menu and Visibility Icon Rendering

* Adjust Duck.ai toggle icon colour

* Remove Duck.ai show/hide strings from localization files

* Remove unused settingsLinks code from CustomizerProvider

* Update Toggle Duck.ai integration tests

* Add Duck.ai toggle translation for multiple locales

Author: noisysocks

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

@@ -484,3 +484,18 @@ export function LogoStacked(props) {
         </svg>
     );
 }
+
+/**
+ * From https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Glyphs/16px/Arrow-Indent-Centerd-16.svg
+ * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
+ */
+export function ArrowIndentCenteredIcon(props) {
+    return (
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                fill="currentColor"
+                d="M3.625 1c.345 0 .625.28.625.625V5c0 1.52 1.23 2.75 2.749 2.75h7.117l-2.683-2.683a.625.625 0 0 1 .86-.906l.024.022 2.69 2.69c.83.83.83 2.175 0 3.005l-2.69 2.689a.625.625 0 1 1-.884-.884L14.116 9H7a3.999 3.999 0 0 1-4-4V1.625C3 1.28 3.28 1 3.625 1Z"
+            />
+        </svg>
+    );
+}

special-pages/pages/new-tab/app/customizer/CustomizerProvider.js

@@ -55,10 +55,6 @@ export const CustomizerContext = createContext({
      * @param {UserImageContextMenu} _params
      */
     customizerContextMenu: (_params) => {},
-    /**
-     * @type {import('@preact/signals').Signal<Record<string, SettingsLinkData>>}
-     */
-    settingsLinks: signal({}),
 });
 
 /**
@@ -138,11 +134,8 @@ export function CustomizerProvider({ service, initialData, children }) {
     /** @type {(p: UserImageContextMenu) => void} */
     const customizerContextMenu = useCallback((params) => service.contextMenu(params), [service]);
 
-    /** @type {import('@preact/signals').Signal<Record<string, SettingsLinkData>>} */
-    const settingsLinks = useSignal({});
-
     return (
-        <CustomizerContext.Provider value={{ data, select, upload, setTheme, deleteImage, customizerContextMenu, settingsLinks }}>
+        <CustomizerContext.Provider value={{ data, select, upload, setTheme, deleteImage, customizerContextMenu }}>
             <CustomizerThemesContext.Provider value={{ main, browser }}>{children}</CustomizerThemesContext.Provider>
         </CustomizerContext.Provider>
     );

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

@@ -13,7 +13,7 @@ export function CustomizerDrawer({ displayChildren }) {
 }
 
 function CustomizerConsumer() {
-    const { data, select, upload, setTheme, deleteImage, customizerContextMenu, settingsLinks } = useContext(CustomizerContext);
+    const { data, select, upload, setTheme, deleteImage, customizerContextMenu } = useContext(CustomizerContext);
     return (
         <CustomizerDrawerInner
             data={data}
@@ -22,7 +22,6 @@ function CustomizerConsumer() {
             setTheme={setTheme}
             deleteImage={deleteImage}
             customizerContextMenu={customizerContextMenu}
-            settingsLinks={settingsLinks}
         />
     );
 }

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

@@ -30,9 +30,8 @@ import { Open } from '../../components/icons/Open.js';
  * @param {(theme: import('../../../types/new-tab').ThemeData) => void} props.setTheme
  * @param {(id: string) => void} props.deleteImage
  * @param {(p: UserImageContextMenu) => void} props.customizerContextMenu
- * @param {import('@preact/signals').Signal<Record<string, SettingsLinkData>>} props.settingsLinks
  */
-export function CustomizerDrawerInner({ data, select, onUpload, setTheme, deleteImage, customizerContextMenu, settingsLinks }) {
+export function CustomizerDrawerInner({ data, select, onUpload, setTheme, deleteImage, customizerContextMenu }) {
     const { close } = useDrawerControls();
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
     const messaging = useMessaging();
@@ -69,9 +68,6 @@ export function CustomizerDrawerInner({ data, select, onUpload, setTheme, delete
                                 <VisibilityMenuSection />
                             </CustomizerSection>
                             <BorderedSection>
-                                {Object.entries(settingsLinks.value).map(([key, link]) => (
-                                    <SettingsLink key={key} title={link.title} icon={link.icon} onClick={() => link.onClick()} />
-                                ))}
                                 <SettingsLink
                                     title={t('customizer_settings_link')}
                                     icon={<Open />}

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

@@ -5,7 +5,17 @@ import { CustomizeIcon } from '../../components/Icons.js';
 import { useMessaging, useTypedTranslation } from '../../types.js';
 
 /**
- * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem } from '../../../types/new-tab.js'
+ * @import { WidgetVisibility, VisibilityMenuItem } from '../../../types/new-tab.js'
+ */
+
+/**
+ * @typedef {object} VisibilityRowData
+ * @property {string} id - a unique id
+ * @property {string} title - the title as it should appear in the menu
+ * @property {import('preact').ComponentChild} icon - icon to display in the menu
+ * @property {(id: string) => void} toggle - toggle function for this item
+ * @property {number} index - position in the menu
+ * @property {WidgetVisibility} visibility - known icon name, maps to an SVG
  */
 
 export const OPEN_EVENT = 'ntp-customizer-open';
@@ -85,26 +95,6 @@ export function CustomizerMenuPositionedFixed({ children }) {
     return <div class={styles.lowerRightFixed}>{children}</div>;
 }
 
-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' | '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
-     */
-    constructor({ id, title, icon, toggle, visibility, index }) {
-        this.id = id;
-        this.title = title;
-        this.icon = icon;
-        this.toggle = toggle;
-        this.index = index;
-        this.visibility = visibility;
-    }
-}
-
 /**
  * Call this to opt-in to the visibility menu
  * @param {VisibilityRowData} row

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

@@ -1,16 +1,14 @@
-import { h } from 'preact';
 import cn from 'classnames';
+import { h } from 'preact';
 import { useContext } from 'preact/hooks';
 
-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';
 import { CustomizerThemesContext } from '../CustomizerProvider.js';
+import styles from './VisibilityMenu.module.css';
 
 /**
- * @import { Widgets, WidgetConfigItem } from '../../../types/new-tab.js'
- * @import { VisibilityRowData } from './CustomizerMenu.js'
+ * @import { VisibilityRowData } from './CustomizerMenu.js';
  */
 
 /**
@@ -26,11 +24,7 @@ export function EmbeddedVisibilityMenu({ rows }) {
                 return (
                     <li key={row.id}>
                         <div class={cn(styles.menuItemLabel, styles.menuItemLabelEmbedded)}>
-                            <span className={styles.svg}>
-                                {row.icon === 'shield' && <DuckFoot />}
-                                {row.icon === 'star' && <Shield />}
-                                {row.icon === 'search' && <SearchIcon />}
-                            </span>
+                            <span className={styles.svg}>{row.icon}</span>
                             <span>{row.title ?? row.id}</span>
                             <Switch
                                 theme={browser.value}

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

@@ -10,6 +10,7 @@ import { PragmaticDND } from './PragmaticDND.js';
 import { FavoritesMemo } from './Favorites.js';
 import { viewTransition } from '../../utils.js';
 import { CustomizerContext } from '../../customizer/CustomizerProvider.js';
+import { Shield } from '../../components/Icons.js';
 
 /**
  * @typedef {import('../../../types/new-tab.ts').Favorite} Favorite
@@ -66,7 +67,7 @@ export function FavoritesCustomized() {
 
     // register with the visibility menu
     const title = t('favorites_menu_title');
-    useCustomizer({ title, id, icon: 'star', toggle, visibility: visibility.value, index });
+    useCustomizer({ title, id, icon: <Shield />, toggle, visibility: visibility.value, index });
 
     if (visibility.value === 'hidden') {
         return null;

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

@@ -1,10 +1,11 @@
-import { useContext, useEffect } from 'preact/hooks';
-import { OmnibarContext } from './OmnibarProvider.js';
-import { h } from 'preact';
-import { Omnibar } from './Omnibar.js';
-import { CustomizerContext } from '../../customizer/CustomizerProvider.js';
-import { AiChatIcon } from '../../components/Icons.js';
+import { Fragment, h } from 'preact';
+import { useContext } from 'preact/hooks';
+import { useCustomizer } from '../../customizer/components/CustomizerMenu.js';
 import { useTypedTranslationWith } from '../../types.js';
+import { useVisibility } from '../../widget-list/widget-config.provider.js';
+import { Omnibar } from './Omnibar.js';
+import { OmnibarContext } from './OmnibarProvider.js';
+import { ArrowIndentCenteredIcon } from '../../components/Icons.js';
 
 /**
  * @typedef {import('../strings.json')} Strings
@@ -36,29 +37,30 @@ export function OmnibarConsumer() {
  * @param {OmnibarConfig} props.config
  */
 function OmnibarReadyState({ config: { enableAi = true, showAiSetting = true, mode } }) {
-    const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
-
-    const { settingsLinks } = useContext(CustomizerContext);
-    const { setMode, setEnableAi } = useContext(OmnibarContext);
-
-    useEffect(() => {
-        if (!showAiSetting) {
-            return;
-        }
-
-        settingsLinks.value = {
-            ...settingsLinks.value,
-            duckAi: {
-                title: enableAi ? t('omnibar_hideDuckAi') : t('omnibar_showDuckAi'),
-                icon: <AiChatIcon />,
-                onClick: () => setEnableAi(!enableAi),
-            },
-        };
-        return () => {
-            const { duckAi: _, ...rest } = settingsLinks.value;
-            settingsLinks.value = rest;
-        };
-    }, [enableAi, showAiSetting]);
+    const { setEnableAi, setMode } = useContext(OmnibarContext);
+    return (
+        <>
+            {showAiSetting && <AiSetting enableAi={enableAi} setEnableAi={setEnableAi} />}
+            <Omnibar mode={mode} setMode={setMode} enableAi={enableAi} />
+        </>
+    );
+}
 
-    return <Omnibar mode={mode} setMode={setMode} enableAi={enableAi} />;
+/**
+ * @param {object} props
+ * @param {boolean} props.enableAi
+ * @param {(enable: boolean) => void} props.setEnableAi
+ */
+function AiSetting({ enableAi, setEnableAi }) {
+    const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
+    const { id, index } = useVisibility();
+    useCustomizer({
+        title: t('omnibar_toggleDuckAi'),
+        id: `_${id}-toggleAi`,
+        icon: <ArrowIndentCenteredIcon style={{ color: 'var(--ntp-icons-tertiary)' }} />,
+        toggle: () => setEnableAi(!enableAi),
+        visibility: enableAi ? 'visible' : 'hidden',
+        index: index + 0.1,
+    });
+    return null;
 }

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

@@ -5,6 +5,7 @@ import { OmnibarProvider } from './OmnibarProvider.js';
 import { h } from 'preact';
 
 import { OmnibarConsumer } from './OmnibarConsumer.js';
+import { SearchIcon } from '../../components/Icons.js';
 
 /**
  * @import enStrings from "../strings.json"
@@ -27,7 +28,7 @@ export function OmnibarCustomized() {
 
     const { visibility, id, toggle, index } = useVisibility();
 
-    useCustomizer({ title: sectionTitle, id, icon: 'search', toggle, visibility: visibility.value, index });
+    useCustomizer({ title: sectionTitle, id, icon: <SearchIcon />, toggle, visibility: visibility.value, index });
 
     if (visibility.value === 'hidden') {
         return null;

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.page.js

@@ -61,12 +61,8 @@ export class OmnibarPage {
         return this.page.getByRole('switch', { name: 'Toggle Search' });
     }
 
-    showDuckAiButton() {
-        return this.page.getByRole('link', { name: 'Show Duck.ai' });
-    }
-
-    hideDuckAiButton() {
-        return this.page.getByRole('link', { name: 'Hide Duck.ai' });
+    toggleDuckAiButton() {
+        return this.page.getByRole('switch', { name: 'Toggle Duck.ai' });
     }
 
     /**