history: context menu for section titles (#1481)

* history: context menu for section titles

* comments

* docs

* rename

* docs

* fixed tests

* ux improvements for demo

Author: shakyShane

special-pages/pages/history/app/HistoryProvider.js

@@ -61,12 +61,14 @@ export function HistoryServiceProvider({ service, initial, children }) {
             if (!(event.target instanceof Element)) return;
             const btn = /** @type {HTMLButtonElement|null} */ (event.target.closest('button'));
             const anchor = /** @type {HTMLButtonElement|null} */ (event.target.closest('a[href][data-url]'));
+            if (btn?.dataset.titleMenu) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                // eslint-disable-next-line promise/prefer-await-to-then
+                service.menuTitle(btn.value).catch(console.error);
+                return;
+            }
             if (btn) {
-                if (btn?.dataset.titleMenu) {
-                    event.stopImmediatePropagation();
-                    event.preventDefault();
-                    return confirm(`todo: title menu for ${btn.dataset.titleMenu}`);
-                }
                 if (btn?.dataset.rowMenu) {
                     event.stopImmediatePropagation();
                     event.preventDefault();
@@ -112,9 +114,35 @@ export function HistoryServiceProvider({ service, initial, children }) {
         };
         document.addEventListener('auxclick', handleAuxClick);
 
+        function contextMenu(event) {
+            const target = /** @type {HTMLElement|null} */ (event.target);
+            if (!(target instanceof HTMLElement)) return;
+
+            const actions = {
+                '[data-section-title]': (elem) => elem.querySelector('button')?.value,
+            };
+
+            for (const [selector, valueFn] of Object.entries(actions)) {
+                const match = event.target.closest(selector);
+                if (match) {
+                    const value = valueFn(match);
+                    if (value) {
+                        event.preventDefault();
+                        event.stopImmediatePropagation();
+                        // eslint-disable-next-line promise/prefer-await-to-then
+                        service.menuTitle(value).catch(console.error);
+                    }
+                    break;
+                }
+            }
+        }
+
+        document.addEventListener('contextmenu', contextMenu);
+
         return () => {
             document.removeEventListener('auxclick', handleAuxClick);
             document.removeEventListener('click', handler);
+            document.removeEventListener('contextmenu', contextMenu);
         };
     });
     return <HistoryServiceContext.Provider value={{ service, initial }}>{children}</HistoryServiceContext.Provider>;

special-pages/pages/history/app/components/Header.module.css

@@ -54,4 +54,9 @@
     border: 1px solid var(--history-surface-border-color);
     padding-left: 9px;
     padding-right: 9px;
+    background: inherit;
+    color: inherit;
+    &:focus {
+        outline: none;
+    }
 }

special-pages/pages/history/app/components/Item.js

@@ -4,6 +4,7 @@ import { END_KIND, TITLE_KIND } from '../utils.js';
 import { Fragment, h } from 'preact';
 import styles from './Item.module.css';
 import { Dots } from '../icons/dots.js';
+import { useTypedTranslation } from '../types.js';
 
 export const Item = memo(
     /**
@@ -19,12 +20,18 @@ export const Item = memo(
      * @param {string} props.dateTimeOfDay - the time of day, like 11.00am.
      */
     function Item({ id, url, domain, title, kind, dateRelativeDay, dateTimeOfDay }) {
+        const { t } = useTypedTranslation();
         return (
             <Fragment>
                 {kind === TITLE_KIND && (
-                    <div class={styles.title} tabindex={0}>
+                    <div class={styles.title} tabindex={0} data-section-title>
                         {dateRelativeDay}
-                        <button class={cn(styles.dots, styles.titleDots)} data-title-menu={id}>
+                        <button
+                            class={cn(styles.dots, styles.titleDots)}
+                            data-title-menu
+                            value={dateRelativeDay}
+                            aria-label={t('menu_sectionTitle', { relativeTime: dateRelativeDay })}
+                        >
                             <Dots />
                         </button>
                     </div>

special-pages/pages/history/app/components/SearchForm.js

@@ -1,6 +1,6 @@
 import styles from './Header.module.css';
 import { createContext, h } from 'preact';
-import { useSettings, useTypedTranslation } from '../types.js';
+import { usePlatformName, useSettings, useTypedTranslation } from '../types.js';
 import { signal, useComputed, useSignal, useSignalEffect } from '@preact/signals';
 import { useContext } from 'preact/hooks';
 import { toRange } from '../history.service.js';
@@ -54,6 +54,7 @@ export function SearchProvider({ children, query = { term: '' } }) {
     const derivedTerm = useComputed(() => searchState.value.term);
     const derivedRange = useComputed(() => searchState.value.range);
     const settings = useSettings();
+    const platformName = usePlatformName();
     // todo: domain search
     // const derivedDomain = useComputed(() => searchState.value.domain);
     useSignalEffect(() => {
@@ -113,7 +114,24 @@ export function SearchProvider({ children, query = { term: '' } }) {
             }
         });
 
+        const keydown = (e) => {
+            const isMacOS = platformName === 'macos';
+            const isFindShortcutMacOS = isMacOS && e.metaKey && e.key === 'f';
+            const isFindShortcutWindows = !isMacOS && e.ctrlKey && e.key === 'f';
+
+            if (isFindShortcutMacOS || isFindShortcutWindows) {
+                e.preventDefault();
+                const searchInput = /** @type {HTMLInputElement|null} */ (document.querySelector(`input[type="search"]`));
+                if (searchInput) {
+                    searchInput.focus();
+                }
+            }
+        };
+
+        document.addEventListener('keydown', keydown);
+
         return () => {
+            document.removeEventListener('keydown', keydown);
             controller.abort();
         };
     });

special-pages/pages/history/app/history.md

@@ -118,6 +118,36 @@ Response, note: always return the same query I sent:
 }
 ```
 
+### `title_menu`
+{@link "History Messages".TitleMenuRequest}
+
+Sent when a right-click is issued on a section title (or when the three-dots button is clicked)  
+
+**Types:**
+- Parameters: {@link "History Messages".TitleMenuParams}
+- Response: {@link "History Messages".TitleMenuResponse}
+
+**params**
+```json
+{
+  "dateRelativeDay": "Today - Wednesday 15 January 2025"
+}
+```
+
+**response, if deleted**
+```json
+{
+  "action": "delete" 
+}
+```
+
+**response, otherwise**
+```json
+{
+  "action": "none" 
+}
+```
+
 ## Notifications
 
 ### `open`

special-pages/pages/history/app/history.service.js

@@ -102,6 +102,37 @@ export class HistoryService {
         return this.ranges.onData(({ data, source }) => cb(data));
     }
 
+    /**
+     * @param {string} dateRelativeDay
+     */
+    async menuTitle(dateRelativeDay) {
+        const response = await this.history.messaging.request('title_menu', { dateRelativeDay });
+        if (response.action === 'none') return;
+        this.query.update((old) => {
+            // find the first item
+            // todo: this can be optimized by passing the index in the call
+            const start = old.results.findIndex((x) => x.dateRelativeDay === dateRelativeDay);
+            if (start > -1) {
+                // now find the last item matching, starting with the first
+                let end = start;
+                for (let i = start; i < old.results.length; i++) {
+                    if (old.results[i]?.dateRelativeDay === dateRelativeDay) continue;
+                    end = i;
+                    break;
+                }
+                const next = old.results.slice();
+                const removed = next.splice(start, end - start);
+                console.log('did remove items:', removed);
+                return {
+                    ...old,
+                    results: next,
+                };
+            }
+            return old;
+        });
+        // todo: should we refresh the ranges here?
+    }
+
     /**
      * @param {Range} range
      */

special-pages/pages/history/app/mocks/mock-transport.js

@@ -58,9 +58,26 @@ export function mockTransport() {
             const msg = /** @type {any} */ (_msg);
 
             switch (msg.method) {
+                case 'title_menu': {
+                    console.log('📤 [deleteRange]: ', JSON.stringify(msg.params));
+                    // prettier-ignore
+                    const lines = [
+                        `title_menu: ${JSON.stringify(msg.params)}`,
+                        `To simulate deleting this item, press confirm`
+                    ].join('\n');
+                    if (confirm(lines)) {
+                        return Promise.resolve({ action: 'delete' });
+                    }
+                    return Promise.resolve({ action: 'none' });
+                }
                 case 'deleteRange': {
                     console.log('📤 [deleteRange]: ', JSON.stringify(msg.params));
-                    if (confirm(`Delete range ${msg.params.range}?`)) {
+                    // prettier-ignore
+                    const lines = [
+                        `deleteRange: ${JSON.stringify(msg.params)}`,
+                        `To simulate deleting this item, press confirm`
+                    ].join('\n',);
+                    if (confirm(lines)) {
                         return Promise.resolve({ action: 'delete' });
                     }
                     return Promise.resolve({ action: 'none' });

special-pages/pages/history/app/strings.json

@@ -1,4 +1,8 @@
 {
+  "menu_sectionTitle": {
+    "title": "Show menu for {relativeTime}",
+    "note": "Button text in a section heading to show a menu. The placeholder {relativeTime} will dynamically be replaced with values such as 'Today', 'Tomorrow', 'Yesterday', 'In 2 days', etc. For example, if {relativeTime} = 'Tomorrow', the title will become 'Show menu for Tomorrow'."
+  },
   "empty_title": {
     "title": "Nothing to see here!",
     "note": "Text shown where there are no remaining history items"

special-pages/pages/history/integration-tests/history.page.js

@@ -266,4 +266,43 @@ export class HistoryTestPage {
         expect(calls[0].payload.params).toStrictEqual({ range: 'all' });
         await expect(page.getByRole('heading', { level: 2, name: 'Nothing to see here!' })).toBeVisible();
     }
+
+    /**
+     * @param {import('../types/history.ts').DeleteRangeResponse} resp
+     */
+    async deletesFromSectionTitle(resp) {
+        const { page } = this;
+
+        // Handle dialog interaction based on response action
+        if (resp.action === 'delete') {
+            page.on('dialog', (dialog) => {
+                return dialog.accept();
+            });
+        } else {
+            page.on('dialog', (dialog) => dialog.dismiss());
+        }
+
+        // Hover over the "Today" section and open the menu
+        const title = page.getByRole('list').getByText('Today');
+        await title.hover();
+        await title.getByLabel('Show menu for Today').click();
+
+        // Verify the call to "title_menu" with expected parameters
+        const calls = await this.mocks.waitForCallCount({ method: 'title_menu', count: 1 });
+        expect(calls[0].payload.params).toStrictEqual({ dateRelativeDay: 'Today' });
+
+        // verify the section is gone
+        await expect(title.getByLabel('Show menu for Today')).not.toBeVisible();
+
+        // todo: re-enable this if it's required
+        // await this.sideBarItemWasRemoved('Today');
+    }
+
+    async rightClicksSectionTitle() {
+        const { page } = this;
+        const title = page.getByRole('list').getByText('Today');
+        await title.click({ button: 'right' });
+        const calls = await this.mocks.waitForCallCount({ method: 'title_menu', count: 1 });
+        expect(calls[0].payload.params).toStrictEqual({ dateRelativeDay: 'Today' });
+    }
 }

special-pages/pages/history/integration-tests/history.spec.js

@@ -108,4 +108,14 @@ test.describe('history', () => {
         await hp.openPage({});
         await hp.deletesAllHistoryFromHeader({ action: 'delete' });
     });
+    test('3 dots menu on Section title', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
+        await hp.openPage({});
+        await hp.deletesFromSectionTitle({ action: 'delete' });
+    });
+    test('right-click on Section title', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
+        await hp.openPage({});
+        await hp.rightClicksSectionTitle();
+    });
 });