history: adding multi-select (#1487)

* history: multi select

* only reset if delete actually happened

* only grey out the delete button when empty

* fix some layout things

* remove title_menu support

* more unused

* read-only signals

* cleanup hooks

* results

* more cleanup

* 1 less provider

* latency fix

* support deleting a domain

* perform search on submit

* clearer logs

Author: shakyShane

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

@@ -2,11 +2,13 @@ export class Settings {
     /**
      * @param {object} params
      * @param {{name: 'macos' | 'windows'}} [params.platform]
-     * @param {number} [params.typingDebounce=500] how long to debounce typing in the search field
+     * @param {number} [params.typingDebounce=100] how long to debounce typing in the search field - default: 100ms
+     * @param {number} [params.urlDebounce=500] how long to debounce reflecting to the URL? - default: 500ms
      */
-    constructor({ platform = { name: 'macos' }, typingDebounce = 100 }) {
+    constructor({ platform = { name: 'macos' }, typingDebounce = 100, urlDebounce = 500 }) {
         this.platform = platform;
         this.typingDebounce = typingDebounce;
+        this.urlDebounce = urlDebounce;
     }
 
     withPlatformName(name) {
@@ -35,4 +37,19 @@ export class Settings {
         }
         return this;
     }
+
+    /**
+     * @param {null|undefined|number|string} value
+     */
+    withUrlDebounce(value) {
+        if (!value) return this;
+        const input = String(value).trim();
+        if (input.match(/^\d+$/)) {
+            return new Settings({
+                ...this,
+                urlDebounce: parseInt(input, 10),
+            });
+        }
+        return this;
+    }
 }

special-pages/pages/history/app/components/App.jsx

@@ -1,32 +1,72 @@
 import { h } from 'preact';
+import cn from 'classnames';
 import styles from './App.module.css';
 import { useEnv } from '../../../../shared/components/EnvironmentProvider.js';
 import { Header } from './Header.js';
-import { Results } from './Results.js';
-import { useRef } from 'preact/hooks';
+import { ResultsContainer } from './Results.js';
+import { useEffect, useRef } from 'preact/hooks';
 import { Sidebar } from './Sidebar.js';
-import { useGlobalState } from '../global-state/GlobalStateProvider.js';
-import { useSelected } from '../global-state/SelectionProvider.js';
-import { useGlobalHandlers } from '../global-state/HistoryServiceProvider.js';
+import { useRowInteractions } from '../global/Providers/SelectionProvider.js';
+import { useQueryContext } from '../global/Providers/QueryProvider.js';
+import { useContextMenuForEntries } from '../global/hooks/useContextMenuForEntries.js';
+import { useAuxClickHandler } from '../global/hooks/useAuxClickHandler.js';
+import { useButtonClickHandler } from '../global/hooks/useButtonClickHandler.js';
+import { useLinkClickHandler } from '../global/hooks/useLinkClickHandler.js';
+import { useResetSelectionsOnQueryChange } from '../global/hooks/useResetSelectionsOnQueryChange.js';
+import { useSearchCommitForRange } from '../global/hooks/useSearchCommitForRange.js';
+import { useURLReflection } from '../global/hooks/useURLReflection.js';
+import { useSearchCommit } from '../global/hooks/useSearchCommit.js';
+import { useRangesData } from '../global/Providers/HistoryServiceProvider.js';
 
 export function App() {
+    const mainRef = useRef(/** @type {HTMLElement|null} */ (null));
     const { isDarkMode } = useEnv();
-    const containerRef = useRef(/** @type {HTMLElement|null} */ (null));
-    const { ranges, term, results } = useGlobalState();
-    const selected = useSelected();
+    const ranges = useRangesData();
+    const query = useQueryContext();
 
-    useGlobalHandlers();
+    /**
+     * Handlers that are global in nature
+     */
+    useResetSelectionsOnQueryChange();
+    useLinkClickHandler();
+    useButtonClickHandler();
+    useContextMenuForEntries();
+    useAuxClickHandler();
+    useURLReflection();
+    useSearchCommit();
+    useSearchCommitForRange();
+
+    /**
+     * onClick can be passed directly to the main container,
+     * onKeyDown will be observed at the document level.
+     * todo: can this be resolved if the `main` element is given focus/tab-index?
+     */
+    const { onClick, onKeyDown } = useRowInteractions(mainRef);
+
+    useEffect(() => {
+        // whenever the query changes, scroll the main container back to the top
+        const unsubscribe = query.subscribe(() => {
+            mainRef.current?.scrollTo(0, 0);
+        });
+
+        document.addEventListener('keydown', onKeyDown);
+
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+            unsubscribe();
+        };
+    }, [onKeyDown, query]);
 
     return (
         <div class={styles.layout} data-theme={isDarkMode ? 'dark' : 'light'}>
-            <header class={styles.header}>
-                <Header />
-            </header>
             <aside class={styles.aside}>
                 <Sidebar ranges={ranges} />
             </aside>
-            <main class={styles.main} ref={containerRef} data-main-scroller data-term={term}>
-                <Results results={results} selected={selected} />
+            <header class={styles.header}>
+                <Header />
+            </header>
+            <main class={cn(styles.main, styles.customScroller)} ref={mainRef} onClick={onClick}>
+                <ResultsContainer />
             </main>
         </div>
     );

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

@@ -6,6 +6,7 @@ body {
     font-size: var(--body-font-size);
     font-weight: var(--body-font-weight);
     line-height: var(--body-line-height);
+    background-color: var(--history-background-color);
 }
 
 .layout {
@@ -39,3 +40,20 @@ body {
     padding-right: 76px;
     padding-top: 24px;
 }
+
+.customScroller {
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+        width: 12px;
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgb(108, 108, 108);
+        border: 4px solid var(--history-background-color);
+        border-radius: 6px;
+    }
+}

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

@@ -10,8 +10,12 @@ export function Empty() {
     const { t } = useTypedTranslation();
     return (
         <div class={cn(styles.emptyState, styles.emptyStateOffset)}>
-            <img src="icons/clock.svg" width={128} height={96} alt="" class={styles.emptyStateImage} />
+            <div class={styles.icons}>
+                <img src="icons/backdrop.svg" width={128} height={96} alt="" />
+                <img src="icons/clock.svg" width={60} height={60} alt="" class={styles.forground} />
+            </div>
             <h2 class={styles.emptyTitle}>{t('empty_title')}</h2>
+            <p class={styles.emptyText}>{t('empty_text')}</p>
         </div>
     );
 }

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

@@ -4,26 +4,90 @@ import { useComputed } from '@preact/signals';
 import { SearchForm } from './SearchForm.js';
 import { Trash } from '../icons/Trash.js';
 import { useTypedTranslation } from '../types.js';
-import { useQueryContext } from '../global-state/QueryProvider.js';
-import { BTN_ACTION_DELETE_ALL } from '../constants.js';
+import { useQueryContext } from '../global/Providers/QueryProvider.js';
+import { useSelected } from '../global/Providers/SelectionProvider.js';
+import { useHistoryServiceDispatch, useResultsData } from '../global/Providers/HistoryServiceProvider.js';
 
 /**
  */
 export function Header() {
-    const { t } = useTypedTranslation();
     const search = useQueryContext();
     const term = useComputed(() => search.value.term);
+    const range = useComputed(() => search.value.range);
+    const domain = useComputed(() => search.value.domain);
     return (
         <div class={styles.root}>
-            <div class={styles.controls}>
-                <button class={styles.largeButton} data-action={BTN_ACTION_DELETE_ALL}>
-                    <span>{t('delete_all')}</span>
-                    <Trash />
-                </button>
-            </div>
+            <Controls term={term} range={range} domain={domain} />
             <div class={styles.search}>
-                <SearchForm term={term} />
+                <SearchForm term={term} domain={domain} />
             </div>
         </div>
     );
 }
+
+/**
+ * Renders the Controls component that displays a button for deletion functionality.
+ *
+ * @param {Object} props - Properties passed to the component.
+ * @param {import("@preact/signals").Signal<string|null>} props.term
+ * @param {import("@preact/signals").Signal<string|null>} props.range
+ * @param {import("@preact/signals").Signal<string|null>} props.domain
+ */
+function Controls({ term, range, domain }) {
+    const { t } = useTypedTranslation();
+    const results = useResultsData();
+    const selected = useSelected();
+    const dispatch = useHistoryServiceDispatch();
+
+    /**
+     * Aria labels + title text is derived from the current result set.
+     */
+    const ariaDisabled = useComputed(() => results.value.items.length === 0);
+    const title = useComputed(() => (results.value.items.length === 0 ? t('delete_none') : ''));
+
+    /**
+     * The button text should be 'delete all', unless there are row selections, then it's just 'delete'
+     */
+    const buttonTxt = useComputed(() => {
+        const hasSelections = selected.value.size > 0;
+        if (hasSelections) return t('delete_some');
+        return t('delete_all');
+    });
+
+    /**
+     * Which action should the delete button take?
+     *
+     * - if there are selections, they should be deleted by indexes
+     * - if there's a range selected, that should be deleted
+     * - if there's a search term, that should be deleted
+     * - or fallback to deleting all
+     */
+    function onClick() {
+        if (ariaDisabled.value === true) return;
+        if (selected.value.size > 0) {
+            return dispatch({ kind: 'delete-entries-by-index', value: [...selected.value] });
+        }
+        if (range.value !== null) {
+            return dispatch({ kind: 'delete-range', value: range.value });
+        }
+        if (term.value !== null && term.value !== '') {
+            return dispatch({ kind: 'delete-term', term: term.value });
+        }
+        if (domain.value !== null) {
+            return dispatch({ kind: 'delete-domain', domain: domain.value });
+        }
+        if (term.value !== null && term.value !== '') {
+            return dispatch({ kind: 'delete-term', term: term.value });
+        }
+        dispatch({ kind: 'delete-all' });
+    }
+
+    return (
+        <div class={styles.controls}>
+            <button class={styles.largeButton} onClick={onClick} aria-disabled={ariaDisabled} title={title}>
+                <Trash />
+                <span>{buttonTxt}</span>
+            </button>
+        </div>
+    );
+}

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

@@ -42,21 +42,65 @@
             background-color: var(--color-white-at-12)
         }
     }
+
+    &[aria-disabled="true"] {
+        opacity: .3;
+    }
 }
 
 .search {
     margin-left: auto;
 }
+.label {
+    color: inherit;
+    display: block;
+    position: relative;
+}
+.searchIcon {
+    position: absolute;
+    display: block;
+    width: 16px;
+    height: 16px;
+    top: 50%;
+    left: 9px;
+    transform: translateY(-50%);
+    color: black;
+    [data-theme="dark"] & {
+        color: white;
+    }
+}
 .searchInput {
     width: 238px;
     height: 28px;
     border-radius: 6px;
-    border: 1px solid var(--history-surface-border-color);
-    padding-left: 9px;
+    border: 0.5px solid var(--history-surface-border-color);
+    /* these precise numbers help it match figma when overriding default UI */
+    padding-left: 31px;
     padding-right: 9px;
     background: inherit;
     color: inherit;
+
+    [data-theme="dark"] & {
+        background: var(--color-white-at-6);
+        border-color: var(--color-white-at-9);
+    }
+
     &:focus {
         outline: none;
+        box-shadow: 0px 0px 0px 2.5px rgba(87, 151, 237, 0.64), 0px 0px 0px 1px rgba(87, 151, 237, 0.64) inset, 0px 0.5px 0px -0.5px rgba(0, 0, 0, 0.10), 0px 1px 0px -0.5px rgba(0, 0, 0, 0.10);
+    }
+
+    &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+        height: 13px;
+        width: 13px;
+        background-image: url("../../public/icons/clear.svg");
+        background-repeat: no-repeat;
+        background-position: center center;
+        cursor: pointer;
+    }
+
+    [data-theme="dark"] &::-webkit-search-cancel-button {
+        background-image: url("../../public/icons/clear-dark.svg");
     }
 }