ntp: customizer drawer (#1291)

* ntp: customizer drawer, feature flag

* CSS fix

* comments

* remove hook

---------

Co-authored-by: Shane Osbourne <[email protected]>

Author: shakyShane

package-lock.json

@@ -6,6 +6,9 @@
     "widgets": {
       "$ref": "./types/widget-list.json"
     },
+    "settings": {
+      "$ref": "./types/settings.json"
+    },
     "widgetConfigs": {
       "$ref": "types/widget-configs.json"
     },

special-pages/messages/new-tab/initialSetup.response.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "NewTabPageSettings",
+  "type": "object",
+  "properties": {
+    "customizerDrawer": {
+      "type": "object",
+      "required": ["state"],
+      "properties": {
+        "state": {
+          "type": "string",
+          "enum": ["enabled", "disabled"]
+        }
+      }
+    }
+  }
+}

special-pages/messages/new-tab/types/settings.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "preact": "^10.24.3",
+    "@preact/signals": "^1.3.1",
     "classnames": "^2.5.1",
     "@formkit/auto-animate": "^0.8.2",
     "@rive-app/canvas-single": "^2.23.10",

special-pages/package.json

@@ -1,8 +1,12 @@
 import { h } from 'preact';
+import cn from 'classnames';
 import styles from './App.module.css';
-import { usePlatformName } from '../settings.provider.js';
+import { useCustomizerDrawerSettings, usePlatformName } from '../settings.provider.js';
 import { WidgetList } from '../widget-list/WidgetList.js';
 import { useGlobalDropzone } from '../dropzone.js';
+import { Customizer, CustomizerButton, CustomizerMenuPositionedFixed, useContextMenu } from '../customizer/components/Customizer.js';
+import { useDrawer, useDrawerControls } from './Drawer.js';
+import { CustomizerDrawer } from '../customizer/components/CustomizerDrawer.js';
 
 /**
  * Renders the App component.
@@ -12,11 +16,43 @@ import { useGlobalDropzone } from '../dropzone.js';
  */
 export function App({ children }) {
     const platformName = usePlatformName();
+    const settings = useCustomizerDrawerSettings();
+
+    const customizerKind = settings.state === 'enabled' ? 'drawer' : 'menu';
+
     useGlobalDropzone();
+    useContextMenu();
+
+    const { buttonRef, wrapperRef, visibility, displayChildren, hidden, buttonId, drawerId } = useDrawer();
+    const { toggle, close } = useDrawerControls();
+
     return (
-        <div className={styles.layout} data-platform={platformName}>
-            <WidgetList />
-            {children}
+        <div class={cn(styles.layout)} ref={wrapperRef} data-drawer-visibility={visibility}>
+            <main class={cn(styles.main)}>
+                <div class={styles.tube} data-platform={platformName}>
+                    <WidgetList />
+                    <CustomizerMenuPositionedFixed>
+                        {customizerKind === 'menu' && <Customizer />}
+                        {customizerKind === 'drawer' && (
+                            <CustomizerButton
+                                buttonId={buttonId}
+                                menuId={drawerId}
+                                toggleMenu={toggle}
+                                buttonRef={buttonRef}
+                                isOpen={false}
+                            />
+                        )}
+                    </CustomizerMenuPositionedFixed>
+                    {children}
+                </div>
+            </main>
+            {customizerKind === 'drawer' && (
+                <aside id={drawerId} class={styles.aside} aria-hidden={hidden}>
+                    <div class={styles.asideContent}>
+                        <CustomizerDrawer onClose={close} wrapperRef={wrapperRef} displayChildren={displayChildren} />
+                    </div>
+                </aside>
+            )}
         </div>
     );
 }

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

@@ -10,14 +10,14 @@ body {
     line-height: var(--body-line-height);
 }
 
-.layout {
+.tube {
     padding-top: var(--sp-16);
     padding-bottom: var(--sp-16);
     margin-left: auto;
     margin-right: auto;
 }
 
-body:has([data-reset-layout="true"]) .layout {
+body:has([data-reset-layout="true"]) .tube {
     padding-top: 0;
 }
 
@@ -31,3 +31,40 @@ body:has([data-reset-layout="true"]) .layout {
 :global(.layout-centered:empty) {
     display: contents;
 }
+
+.layout {
+    display: grid;
+    grid-template-columns: auto 0;
+    transition: all ease .3s;
+    position: relative;
+
+    &[data-drawer-visibility='visible'] {
+        grid-template-columns: auto var(--ntp-drawer-width);
+    }
+}
+
+.main {
+    overflow: hidden;
+    height: 100vh;
+}
+.active {}
+
+.aside {
+    overflow: hidden;
+    height: 100vh;
+    background: var(--ntp-surfaces-panel-background-color);
+    z-index: 1;
+
+    /** todo: is this re-usable in any way, or unique? */
+    box-shadow: 0px 0px 1px 0px #FFF inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12);
+    @media screen and (prefers-color-scheme: dark) {
+        box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.60) inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.16), 0px 8px 12px 0px rgba(0, 0, 0, 0.24);
+    }
+}
+
+.asideContent {
+    box-sizing: border-box;
+    height: 100vh;
+    width: var(--ntp-drawer-width);
+    padding: var(--sp-2);
+}

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

@@ -0,0 +1,135 @@
+import { useRef, useId, useLayoutEffect } from 'preact/hooks';
+import { computed, effect, useSignal } from '@preact/signals';
+
+const CLOSE_DRAWER_EVENT = 'close-drawer';
+const TOGGLE_DRAWER_EVENT = 'toggle-drawer';
+const OPEN_DRAWER_EVENT = 'open-drawer';
+const REQUEST_VISIBILITY_EVENT = 'request-visibility';
+
+/**
+ * @typedef {'hidden' | 'visible'} DrawerVisibility
+ */
+
+/**
+ * Hook that manages the state and behavior of a drawer component.
+ *
+ * There are three main considerations here:
+ *  - 1: we make the API available with events (via `useDrawerControls`)
+ *  - 2: we use signals to trigger animations for performance (to prevent VDOM diffing)
+ *  - 3: we provide a way for child components to render AFTER animations have ended, again for performance.
+ *
+ * @return {{
+ *     wrapperRef: import("preact").RefObject<HTMLDivElement>,
+ *     buttonRef: import("preact").RefObject<HTMLButtonElement>,
+ *     visibility: import("@preact/signals").Signal<DrawerVisibility>,
+ *     buttonId: string,
+ *     drawerId: string,
+ *     hidden: import("@preact/signals").Signal<boolean>,
+ *     displayChildren: import("@preact/signals").Signal<boolean>,
+ * }}
+ */
+export function useDrawer() {
+    const wrapperRef = useRef(/** @type {HTMLDivElement|null} */ (null));
+    const buttonRef = useRef(/** @type {HTMLButtonElement|null} */ (null));
+
+    // id's for accessibility
+    const buttonId = useId();
+    const drawerId = useId();
+
+    // the immediate value
+    const visibility = useSignal(/** @type {DrawerVisibility} */ ('hidden'));
+
+    // The value that determines if it's safe to render children
+    // This takes animations into account, which is why is can't be a regular-derived state
+    const displayChildren = useSignal(false);
+
+    // Derive a 'hidden' signal that can be used as an aria-hidden={hidden}
+    // it needs to be done this way to `.value` being accessed in the top level of the application
+    const hidden = computed(() => displayChildren.value === false);
+
+    // react to the global API events
+    useLayoutEffect(() => {
+        const controller = new AbortController();
+        const wrapper = wrapperRef.current;
+        if (!wrapper) return;
+
+        /**
+         * @param {DrawerVisibility} value
+         */
+        const update = (value) => {
+            visibility.value = value;
+        };
+
+        // Event handlers
+        const close = () => update('hidden');
+        const open = () => update('visible');
+        const toggle = () => {
+            const next = visibility.value === 'hidden' ? 'visible' : 'hidden';
+            update(next);
+        };
+
+        // the 3 methods that can be triggered from anywhere in the app
+        window.addEventListener(CLOSE_DRAWER_EVENT, close, { signal: controller.signal });
+        window.addEventListener(TOGGLE_DRAWER_EVENT, toggle, { signal: controller.signal });
+        window.addEventListener(OPEN_DRAWER_EVENT, open, { signal: controller.signal });
+
+        // allow anywhere in the application to read the current state
+        wrapper.addEventListener(
+            REQUEST_VISIBILITY_EVENT,
+            (/** @type {CustomEvent} */ e) => {
+                e.detail.value = visibility.value;
+            },
+            { signal: controller.signal },
+        );
+
+        // update `displayChildren` when animations complete.
+        wrapper?.addEventListener(
+            'transitionend',
+            (e) => {
+                // ignore child animations
+                if (e.target !== e.currentTarget) return;
+                displayChildren.value = visibility.value === 'visible';
+            },
+            { signal: controller.signal },
+        );
+
+        return () => {
+            controller.abort();
+        };
+    }, []);
+
+    // move focus back to the button when the drawer is closed
+    // this needs to be done otherwise it's a violation of aria rules
+    effect(() => {
+        if (displayChildren.value === false) {
+            buttonRef.current?.focus?.();
+        }
+    });
+
+    return {
+        wrapperRef,
+        buttonRef,
+        visibility,
+        displayChildren,
+        buttonId,
+        drawerId,
+        hidden,
+    };
+}
+
+/**
+ *
+ */
+export function useDrawerControls() {
+    return {
+        toggle: () => {
+            window.dispatchEvent(new CustomEvent(TOGGLE_DRAWER_EVENT));
+        },
+        close: () => {
+            window.dispatchEvent(new CustomEvent(CLOSE_DRAWER_EVENT));
+        },
+        open: () => {
+            window.dispatchEvent(new CustomEvent(OPEN_DRAWER_EVENT));
+        },
+    };
+}

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

@@ -1,10 +1,10 @@
 import { h } from 'preact';
 import { useEffect, useRef, useState, useCallback, useId } from 'preact/hooks';
 import styles from './Customizer.module.css';
-import { VisibilityMenu } from './VisibilityMenu.js';
 import { CustomizeIcon } from '../../components/Icons.js';
 import cn from 'classnames';
 import { useMessaging, useTypedTranslation } from '../../types.js';
+import { VisibilityMenu, VisibilityMenuPopover } from './VisibilityMenu.js';
 
 /**
  * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem } from '../../../../../types/new-tab.js'
@@ -17,8 +17,6 @@ export function Customizer() {
     const { setIsOpen, buttonRef, dropdownRef, isOpen } = useDropdown();
     const [rowData, setRowData] = useState(/** @type {VisibilityRowData[]} */ ([]));
 
-    useContextMenu();
-
     /**
      * Dispatch an event every time the customizer is opened - this
      * allows widgets to register themselves and provide titles/icons etc.
@@ -47,7 +45,9 @@ export function Customizer() {
         <div class={styles.root} ref={dropdownRef}>
             <CustomizerButton buttonId={BUTTON_ID} menuId={MENU_ID} toggleMenu={toggleMenu} buttonRef={buttonRef} isOpen={isOpen} />
             <div id={MENU_ID} class={cn(styles.dropdownMenu, { [styles.show]: isOpen })} aria-labelledby={BUTTON_ID}>
-                <VisibilityMenu rows={rowData} />
+                <VisibilityMenuPopover>
+                    <VisibilityMenu rows={rowData} variant={'popover'} />
+                </VisibilityMenuPopover>
             </div>
         </div>
     );