ntp: protections widget (#1685)

* ntp: protections widget

* translations

* remove button handling

* cleanup

* more examples

* stylelint

Author: shakyShane

special-pages/pages/new-tab/app/activity/ActivityProvider.js

@@ -1,18 +1,17 @@
 import { createContext, h } from 'preact';
 import { useEffect, useReducer, useRef } from 'preact/hooks';
 import { useMessaging } from '../types.js';
-import { reducer, useConfigSubscription, useInitialDataAndConfig } from '../service.hooks.js';
+import { reducer, useInitialData } from '../service.hooks.js';
 import { useBatchedActivityApi } from '../settings.provider.js';
 import { BatchedActivityService } from './batched-activity.service.js';
 
 /**
  * @typedef {import('../../types/new-tab.js').ActivityData} ActivityData
- * @typedef {import('../../types/new-tab.js').ActivityConfig} ActivityConfig
  * @typedef {import('../../types/new-tab').TrackingStatus} TrackingStatus
  * @typedef {import('../../types/new-tab').HistoryEntry} HistoryEntry
  * @typedef {import('../../types/new-tab').DomainActivity} DomainActivity
- * @typedef {import('../service.hooks.js').State<import("./batched-activity.service.js").Incoming, ActivityConfig>} State
- * @typedef {import('../service.hooks.js').Events<ActivityData, ActivityConfig>} Events
+ * @typedef {import('../service.hooks.js').State<import("./batched-activity.service.js").Incoming, null>} State
+ * @typedef {import('../service.hooks.js').Events<ActivityData, null>} Events
  */
 
 /**
@@ -21,10 +20,6 @@ import { BatchedActivityService } from './batched-activity.service.js';
 export const ActivityContext = createContext({
     /** @type {State} */
     state: { status: 'idle', data: null, config: null },
-    /** @type {() => void} */
-    toggle: () => {
-        throw new Error('must implement');
-    },
 });
 
 export const ActivityServiceContext = createContext(/** @type {BatchedActivityService|null} */ ({}));
@@ -49,13 +44,10 @@ export function ActivityProvider(props) {
     const service = useService(batched);
 
     // get initial data
-    useInitialDataAndConfig({ dispatch, service });
-
-    // subscribe to toggle + expose a fn for sync toggling
-    const { toggle } = useConfigSubscription({ dispatch, service });
+    useInitialData({ dispatch, service });
 
     return (
-        <ActivityContext.Provider value={{ state, toggle }}>
+        <ActivityContext.Provider value={{ state }}>
             <ActivityServiceContext.Provider value={service.current}>{props.children}</ActivityServiceContext.Provider>
         </ActivityContext.Provider>
     );

special-pages/pages/new-tab/app/activity/NormalizeDataProvider.js

@@ -11,12 +11,11 @@ import { ACTION_BURN } from '../burning/BurnProvider.js';
 
 /**
  * @typedef {import('../../types/new-tab.js').ActivityData} ActivityData
- * @typedef {import('../../types/new-tab.js').ActivityConfig} ActivityConfig
  * @typedef {import('../../types/new-tab').TrackingStatus} TrackingStatus
  * @typedef {import('../../types/new-tab').HistoryEntry} HistoryEntry
  * @typedef {import('../../types/new-tab').DomainActivity} DomainActivity
- * @typedef {import('../service.hooks.js').State<import("./batched-activity.service.js").Incoming, ActivityConfig>} State
- * @typedef {import('../service.hooks.js').Events<ActivityData, ActivityConfig>} Events
+ * @typedef {import('../service.hooks.js').State<import("./batched-activity.service.js").Incoming, null>} State
+ * @typedef {import('../service.hooks.js').Events<ActivityData, null>} Events
  */
 
 /**
@@ -143,7 +142,6 @@ export function SignalStateProvider({ children }) {
         if (!service) return;
         const anchor = /** @type {HTMLAnchorElement|null} */ (target.closest('a[href][data-url]'));
         const button = /** @type {HTMLButtonElement|null} */ (target.closest('button[value][data-action]'));
-        const toggle = /** @type {HTMLButtonElement|null} */ (target.closest('button[data-toggle]'));
         if (anchor) {
             const url = anchor.dataset.url;
             if (!url) return;
@@ -173,15 +171,10 @@ export function SignalStateProvider({ children }) {
             } else {
                 console.warn('unhandled action:', action);
             }
-        } else if (toggle) {
-            if (state.config?.expansion === 'collapsed' && batched) {
-                const next = activity.value.urls.slice(0, Math.min(service.INITIAL, activity.value.urls.length));
-                setVisibleRange(next);
-            }
         }
     }
 
-    const didClick = useCallback(didClick_, [service, batched, state.config.expansion]);
+    const didClick = useCallback(didClick_, [service, batched]);
     const firstUrls = state.data.activity.map((x) => x.url);
     const keys = useSignal(normalizeKeys([], firstUrls));
 

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

@@ -58,11 +58,6 @@ Notes:
     - on `macOS`, `history.title` should be a path-like string to match current implementations
     - `etldPlusOne` will be used for fallback favicons/colors, so the logic should match the NTP
 
-### `activity_getConfig`
-- {@link "NewTab Messages".ActivityGetConfigRequest}
-- Used to fetch the initial config data (eg: expanded vs collapsed)
-- returns {@link "NewTab Messages".ActivityConfig}
-
 ### `activity_getUrls`
 - {@link "NewTab Messages".ActivityGetUrlsRequest}
 - Used to fetch the initial config data (eg: expanded vs collapsed)
@@ -142,24 +137,8 @@ by sending the notification `activity_burnAnimationComplete`
 }
 ```
 
-### `activity_onConfigUpdate` 
-- {@link "NewTab Messages".ActivityOnDataUpdateSubscription }
-- The widget config
-- returns {@link "NewTab Messages".ActivityConfig}
-
 ## Notifications:
 
-### `activity_setConfig` 
-- {@link "NewTab Messages".ActivitySetConfigNotification}
-- Sent when the user toggles the expansion of the activity feed
-- sends {@link "NewTab Messages".ActivityConfig}
-- example payload:
-  ```json
-  {
-    "expansion": "collapsed"
-  }
-  ```
-
 ### `activity_addFavorite`
 - {@link "NewTab Messages".ActivityAddFavoriteNotification}
 - Sent when the user clicks the favorite icon

special-pages/pages/new-tab/app/activity/batched-activity.service.js

@@ -1,6 +1,5 @@
 /**
  * @typedef {import("../../types/new-tab.js").ActivityData} ActivityData
- * @typedef {import("../../types/new-tab.js").ActivityConfig} ActivityConfig
  * @typedef {import("../../types/new-tab.js").UrlInfo} UrlInfo
  * @typedef {import("../../types/new-tab.js").PatchData} PatchData
  * @typedef {import('../../types/new-tab.js').DomainActivity} DomainActivity
@@ -89,13 +88,6 @@ export class BatchedActivityService {
             return next;
         });
 
-        /** @type {Service<ActivityConfig>} */
-        this.configService = new Service({
-            initial: () => ntp.messaging.request('activity_getConfig'),
-            subscribe: (cb) => ntp.messaging.subscribe('activity_onConfigUpdate', cb),
-            persist: (data) => ntp.messaging.notify('activity_setConfig', data),
-        });
-
         /** @type {EventTarget|null} */
         this.burns = new EventTarget();
         this.burnUnsub = this.ntp.messaging.subscribe('activity_onBurnComplete', () => {
@@ -108,21 +100,17 @@ export class BatchedActivityService {
     }
 
     /**
-     * @returns {Promise<{data: ActivityData; config: ActivityConfig }>}
+     * @returns {Promise<ActivityData>}
      * @internal
      */
     async getInitial() {
-        const configPromise = this.configService.fetchInitial();
-        const dataPromise = this.dataService.fetchInitial();
-        const [config, data] = await Promise.all([configPromise, dataPromise]);
-        return { config, data };
+        return await this.dataService.fetchInitial();
     }
 
     /**
      * @internal
      */
     destroy() {
-        this.configService.destroy();
         this.dataService.destroy();
         this.burnUnsub();
         this.burns = null;
@@ -158,28 +146,6 @@ export class BatchedActivityService {
             this.dataService.triggerFetch();
         }
     }
-
-    /**
-     * @param {(evt: {data: ActivityConfig, source: InvocationSource}) => void} cb
-     * @internal
-     */
-    onConfig(cb) {
-        return this.configService.onData(cb);
-    }
-    /**
-     * Update the in-memory data immediate and persist.
-     * Any state changes will be broadcast to consumers synchronously
-     * @internal
-     */
-    toggleExpansion() {
-        this.configService.update((old) => {
-            if (old.expansion === 'expanded') {
-                return { ...old, expansion: /** @type {const} */ ('collapsed') };
-            } else {
-                return { ...old, expansion: /** @type {const} */ ('expanded') };
-            }
-        });
-    }
     /**
      * @param {string} url
      */

special-pages/pages/new-tab/app/activity/components/Activity.examples.js

@@ -1,6 +1,5 @@
 import { h } from 'preact';
 import { Activity, ActivityBody } from './Activity.js';
-import { noop } from '../../utils.js';
 import { signal } from '@preact/signals';
 import { generateSampleData } from '../mocks/activity.mock-transport.js';
 import { normalizeData, NormalizedDataContext } from '../NormalizeDataProvider.js';
@@ -10,12 +9,12 @@ import { normalizeData, NormalizedDataContext } from '../NormalizeDataProvider.j
 export const activityExamples = {
     'activity.empty': {
         factory: () => {
-            return <Activity expansion={'expanded'} itemCount={0} trackerCount={0} toggle={noop('toggle')} batched={false} />;
+            return <Activity itemCount={0} batched={false} />;
         },
     },
     'activity.few': {
         factory: () => (
-            <Activity expansion={'expanded'} itemCount={10} trackerCount={20} toggle={noop('toggle')} batched={false}>
+            <Activity itemCount={10} batched={false}>
                 <Mock size={3}>
                     <ActivityBody canBurn={false} visibility={'visible'} />
                 </Mock>
@@ -24,7 +23,7 @@ export const activityExamples = {
     },
     'activity.noTrackers': {
         factory: () => (
-            <Activity expansion={'expanded'} itemCount={20} trackerCount={0} toggle={noop('toggle')} batched={false}>
+            <Activity itemCount={20} batched={false}>
                 <Mock size={1}>
                     <ActivityBody canBurn={false} visibility={'visible'} />
                 </Mock>
@@ -33,7 +32,7 @@ export const activityExamples = {
     },
     'activity.noActivity.someTrackers': {
         factory: () => (
-            <Activity expansion={'collapsed'} itemCount={0} trackerCount={56} toggle={noop('toggle')} batched={false}>
+            <Activity itemCount={0} batched={false}>
                 <Mock size={0}>
                     <ActivityBody canBurn={false} visibility={'visible'} />
                 </Mock>