diff --git a/special-pages/pages/new-tab/app/customizer/CustomizerProvider.js b/special-pages/pages/new-tab/app/customizer/CustomizerProvider.js index e007818fbb..601c153136 100644 --- a/special-pages/pages/new-tab/app/customizer/CustomizerProvider.js +++ b/special-pages/pages/new-tab/app/customizer/CustomizerProvider.js @@ -1,15 +1,9 @@ import { createContext, h } from 'preact'; -import { useCallback } from 'preact/hooks'; -import { effect, signal, useSignal } from '@preact/signals'; +import { signal, useSignal } from '@preact/signals'; import { useThemes } from './themes.js'; /** * @typedef {import('../../types/new-tab.js').CustomizerData} CustomizerData - * @typedef {import('../../types/new-tab.js').BackgroundData} BackgroundData - * @typedef {import('../../types/new-tab.js').ThemeData} ThemeData - * @typedef {import('../../types/new-tab.js').UserImageData} UserImageData - * @typedef {import('../service.hooks.js').State} State - * @typedef {import('../service.hooks.js').Events} Events */ /** @@ -30,17 +24,6 @@ export const CustomizerContext = createContext({ userColor: null, theme: 'system', }), - /** @type {(bg: BackgroundData) => void} */ - select: (bg) => {}, - upload: () => {}, - /** - * @type {(theme: ThemeData) => void} - */ - setTheme: (theme) => {}, - /** - * @type {(id: string) => void} - */ - deleteImage: (id) => {}, }); /** @@ -57,56 +40,10 @@ export function CustomizerProvider({ service, initialData, children }) { const data = useSignal(initialData); const { main, browser } = useThemes(data); - effect(() => { - const unsub = service.onBackground((evt) => { - data.value = { ...data.value, background: evt.data.background }; - }); - const unsub1 = service.onTheme((evt) => { - data.value = { ...data.value, theme: evt.data.theme }; - }); - const unsub2 = service.onImages((evt) => { - data.value = { ...data.value, userImages: evt.data.userImages }; - }); - const unsub3 = service.onColor((evt) => { - data.value = { ...data.value, userColor: evt.data.userColor }; - }); - - return () => { - unsub(); - unsub1(); - unsub2(); - unsub3(); - }; - }); - - /** @type {(bg: BackgroundData) => void} */ - const select = useCallback( - (bg) => { - service.setBackground(bg); - }, - [service], - ); - - const upload = useCallback(() => { - service.upload(); - }, [service]); - - const setTheme = useCallback( - (theme) => { - service.setTheme(theme); - }, - [service], - ); - - const deleteImage = useCallback( - (id) => { - service.deleteImage(id); - }, - [service], - ); + // todo: add data subscriptions here return ( - + {children} ); diff --git a/special-pages/pages/new-tab/app/customizer/customizer.md b/special-pages/pages/new-tab/app/customizer/customizer.md index 6d6c7fce43..88f71c7ba4 100644 --- a/special-pages/pages/new-tab/app/customizer/customizer.md +++ b/special-pages/pages/new-tab/app/customizer/customizer.md @@ -22,138 +22,13 @@ title: Customizer ], "widgetConfigs": [ { "id": "favorites", "visibility": "visible" }, - { "id": "privacyStats", "visibility": "visible" } + { "id": "privacyStats", "visibility": "visible" }, ], "settings": { "customizerDrawer": { "state": "enabled" } - }, - "customizer": { - "userImages": [], - "userColor": null, - "theme": "dark", - "background": { "kind": "default" } } } ``` -## Initial Data - -- Add the key `customizer` to `initialSetup` -- The data takes the following form: {@link "NewTab Messages".CustomizerData} -- Example from `initialSetup` - -```json -{ - "...": "...", - "customizer": { - "userImages": [], - "userColor": null, - "theme": "dark", - "background": { "kind": "default" } - } -} -``` - -## Subscriptions - -- {@link "NewTab Messages".CustomizerOnBackgroundUpdateSubscription `customizer_onBackgroundUpdate`}. - - Sends {@link "NewTab Messages".BackgroundData} whenever needed. - - For example: - - ```json - { - "background": { "kind": "color", "value": "color01" } - } - ``` - - ```json - { - "background": { "kind": "gradient", "value": "gradient01" } - } - ``` - - ```json - { - "background": { "kind": "hex", "value": "#cacaca" } - } - ``` - - ```json - { - "background": { "kind": "default" } - } - ``` - - ```json - { - "background": { - "kind": "userImage", - "value": { "id": "abc", "src": "...", "thumb": "...", "colorScheme": "light" } - } - } - ``` - -- {@link "NewTab Messages".CustomizerOnImagesUpdateSubscription `customizer_onImagesUpdate`}. - - Sends {@link "NewTab Messages".UserImageData} whenever needed. - - For example, this would be pushed into the page following a successful upload - - Note: In that situation, you'd send this followed by `customizer_onBackgroundUpdate` above - - For example: - - ```json - { - "userImages": [{"id": "abc", "src": "...", "thumb": "...", "colorScheme": "light" }] - } - ``` - -- {@link "NewTab Messages".CustomizerOnColorUpdateSubscription `customizer_onColorUpdate`}. - - Sends {@link "NewTab Messages".UserColorData} whenever needed. - - For example: - - ```json - { - "userColor": { "kind": "hex", "value": "#cacaca" } - } - ``` - or: - - ```json - { - "userColor": null - } - ``` - -- {@link "NewTab Messages".CustomizerOnThemeUpdateSubscription `customizer_onThemeUpdate`}. - - Sends {@link "NewTab Messages".ThemeData} whenever needed. - - For example: - - ```json - { - "theme": "system" - } - ``` - -## Notifications - -- {@link "NewTab Messages".CustomizerSetBackgroundNotification `customizer_setBackground`}. - - Sends {@link "NewTab Messages".CustomizerSetBackgroundNotify} whenever needed. - - For example: - - ```json - { - "background": { "kind": "color", "value": "color01" } - } - ``` - -- {@link "NewTab Messages".CustomizerSetThemeNotification `customizer_setTheme`}. - - Sends {@link "NewTab Messages".CustomizerSetBackgroundNotify} whenever needed. - - For example: - - ```json - { - "theme": "light" - } - ``` - -- {@link "NewTab Messages".CustomizerUploadNotification `customizer_upload`}. - - Sent to trigger a file upload - - -- {@link "NewTab Messages".CustomizerDeleteImageNotification `customizer_deleteImage`}. - - Sends {@link "NewTab Messages".CustomizerDeleteImageNotify} whenever needed. - - For example: - - ```json - { - "id": "abc" - } - ``` diff --git a/special-pages/pages/new-tab/app/customizer/customizer.service.js b/special-pages/pages/new-tab/app/customizer/customizer.service.js index 05a5324dc1..2a1d769709 100644 --- a/special-pages/pages/new-tab/app/customizer/customizer.service.js +++ b/special-pages/pages/new-tab/app/customizer/customizer.service.js @@ -61,78 +61,4 @@ export class CustomizerService { this.imagesService.destroy(); this.colorService.destroy(); } - - /** - * @param {(evt: {data: BackgroundData, source: 'manual' | 'subscription'}) => void} cb - * @internal - */ - onBackground(cb) { - return this.bgService.onData(cb); - } - /** - * @param {(evt: {data: ThemeData, source: 'manual' | 'subscription'}) => void} cb - * @internal - */ - onTheme(cb) { - return this.themeService.onData(cb); - } - /** - * @param {(evt: {data: UserImageData, source: 'manual' | 'subscription'}) => void} cb - * @internal - */ - onImages(cb) { - return this.imagesService.onData(cb); - } - /** - * @param {(evt: {data: UserColorData, source: 'manual' | 'subscription'}) => void} cb - * @internal - */ - onColor(cb) { - return this.colorService.onData(cb); - } - - /** - * @param {BackgroundData} bg - */ - setBackground(bg) { - this.bgService.update((data) => { - return bg; - }); - if (bg.background.kind === 'hex') { - this.colorService.update((_old) => { - if (bg.background.kind !== 'hex') throw new Error('unreachable code path'); - return { userColor: structuredClone(bg.background) }; - }); - } - } - - /** - * @param {string} id - */ - deleteImage(id) { - this.imagesService.update((data) => { - return { - ...data, - userImages: data.userImages.filter((img) => img.id !== id), - }; - }); - this.ntp.messaging.notify('customizer_deleteImage', { id }); - } - - /** - * - */ - upload() { - this.ntp.messaging.notify('customizer_upload'); - } - - /** - * @param {ThemeData} theme - */ - setTheme(theme) { - this.themeService.update((_data) => { - return theme; - }); - this.ntp.messaging.notify('customizer_setTheme', theme); - } }