differentiate between user + auto

Author: shakyShane

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

@@ -62,7 +62,7 @@ export function Sidebar({ ranges }) {
      */
     function onClick(range) {
         if (range === 'all') {
-            dispatch({ kind: 'reset' });
+            dispatch({ kind: 'search-by-term', value: '' });
         } else if (range) {
             dispatch({ kind: 'search-by-range', value: range });
         }

special-pages/pages/history/app/global/Providers/HistoryServiceProvider.js

@@ -7,7 +7,8 @@ import { signal, useSignal, useSignalEffect } from '@preact/signals';
 import { generateHeights, generateViewIds } from '../../utils.js';
 
 /**
- * @typedef {{kind: 'search-commit', params: URLSearchParams}
+ * @typedef {import('../../../types/history.ts').HistoryQuery['source']} Source
+ * @typedef {{kind: 'search-commit', params: URLSearchParams, source: Source}
  * | {kind: 'delete-range'; value: string }
  * | {kind: 'delete-all'; }
  * | {kind: 'delete-term'; term: string }
@@ -84,7 +85,7 @@ export function HistoryServiceProvider({ service, children, initial }) {
     function dispatch(action) {
         switch (action.kind) {
             case 'search-commit': {
-                const asQuery = paramsToQuery(action.params, 'user');
+                const asQuery = paramsToQuery(action.params, action.source);
                 service.trigger(asQuery);
                 break;
             }

special-pages/pages/history/app/global/Providers/QueryProvider.js

@@ -5,10 +5,12 @@ import { signal, useSignal } from '@preact/signals';
 /**
  * @typedef {import('../../../types/history.ts').Range} Range
  * @typedef {import('../../../types/history.ts').RangeId} RangeId
+ * @typedef {import('../../../types/history.ts').HistoryQuery['source']} Source
  * @typedef {{
  *   term: string | null,
  *   range: RangeId | null,
  *   domain: string | null,
+ *   source: Source,
  * }} QueryState - this is the value the entire application can read/observe
  */
 
@@ -25,6 +27,7 @@ const QueryContext = createContext(
             term: /** @type {string|null} */ (null),
             range: /** @type {RangeId|null} */ (null),
             domain: /** @type {string|null} */ (null),
+            source: /** @type {Source} */ ('initial'),
         })
     ),
 );
@@ -49,6 +52,7 @@ export function QueryProvider({ children, query = { term: '' } }) {
         term: 'term' in query ? query.term : null,
         range: 'range' in query ? query.range : null,
         domain: 'domain' in query ? query.domain : null,
+        source: /** @type {Source} */ ('initial'),
     };
     const queryState = useSignal(initial);
 
@@ -60,19 +64,24 @@ export function QueryProvider({ children, query = { term: '' } }) {
         queryState.value = (() => {
             switch (action.kind) {
                 case 'reset': {
-                    return { term: '', domain: null, range: null };
+                    return { term: '', domain: null, range: null, source: /** @type {const} */ ('auto') };
                 }
                 case 'search-by-domain': {
-                    return { term: null, domain: action.value, range: null };
+                    return { term: null, domain: action.value, range: null, source: /** @type {const} */ ('user') };
                 }
                 case 'search-by-range': {
-                    return { term: null, domain: null, range: /** @type {RangeId} */ (action.value) };
+                    return {
+                        term: null,
+                        domain: null,
+                        range: /** @type {RangeId} */ (action.value),
+                        source: /** @type {const} */ ('user'),
+                    };
                 }
                 case 'search-by-term': {
-                    return { term: action.value, domain: null, range: null };
+                    return { term: action.value, domain: null, range: null, source: /** @type {const} */ ('user') };
                 }
                 default:
-                    return { term: '', domain: null, range: null };
+                    return { term: '', domain: null, range: null, source: /** @type {const} */ ('auto') };
             }
         })();
     }

special-pages/pages/history/app/global/hooks/useSearchCommit.js

@@ -27,16 +27,17 @@ export function useSearchCommit() {
             clearTimeout(timer);
             if (next.term !== null) {
                 const term = next.term;
+                const source = next.source;
                 timer = setTimeout(() => {
                     const params = new URLSearchParams();
                     params.set('q', term);
-                    dispatch({ kind: 'search-commit', params });
+                    dispatch({ kind: 'search-commit', params, source });
                 }, settings.typingDebounce);
             }
             if (next.domain !== null) {
                 const params = new URLSearchParams();
                 params.set('domain', next.domain);
-                dispatch({ kind: 'search-commit', params });
+                dispatch({ kind: 'search-commit', params, source: next.source });
             }
             return null;
         });

special-pages/pages/history/app/global/hooks/useSearchCommitForRange.js

@@ -1,6 +1,6 @@
 import { useHistoryServiceDispatch } from '../Providers/HistoryServiceProvider.js';
-import { useComputed, useSignalEffect } from '@preact/signals';
 import { useQueryContext } from '../Providers/QueryProvider.js';
+import { useEffect } from 'preact/hooks';
 
 /**
  * Synchronizes the `derivedRange` signal with the browser's URL and issues a
@@ -10,14 +10,12 @@ import { useQueryContext } from '../Providers/QueryProvider.js';
 export function useSearchCommitForRange() {
     const dispatch = useHistoryServiceDispatch();
     const query = useQueryContext();
-    const derivedRange = useComputed(() => {
-        return query.value.range;
-    });
 
-    useSignalEffect(() => {
+    useEffect(() => {
         let timer;
         let counter = 0;
-        const sub = derivedRange.subscribe((nextRange) => {
+        const sub = query.subscribe((nextQuery) => {
+            const { range } = nextQuery;
             if (counter === 0) {
                 counter += 1;
                 return;
@@ -27,16 +25,16 @@ export function useSearchCommitForRange() {
             url.searchParams.delete('q');
             url.searchParams.delete('range');
 
-            if (nextRange !== null) {
-                url.searchParams.set('range', nextRange);
+            if (range !== null) {
+                url.searchParams.set('range', range);
                 window.history.replaceState(null, '', url.toString());
-                dispatch({ kind: 'search-commit', params: new URLSearchParams(url.searchParams) });
+                dispatch({ kind: 'search-commit', params: new URLSearchParams(url.searchParams), source: 'user' });
             }
         });
 
         return () => {
             sub();
             clearTimeout(timer);
         };
-    });
+    }, [query, dispatch]);
 }

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

@@ -165,7 +165,7 @@ test.describe('history selections', () => {
         await hp.deletesAllForTerm('example.com', { action: 'delete' });
 
         // should have reset the UI now
-        await hp.didMakeNthQuery({ nth: 2, query: { term: '' } });
+        await hp.didMakeNthQuery({ nth: 2, query: { term: '' }, source: 'auto' });
     });
     test('removes all selections with ESC key', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);

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

@@ -104,7 +104,7 @@ test.describe('history', () => {
         await hp.selectsAll();
         await hp.didMakeNthQuery({ nth: 1, query: { term: '' } });
     });
-    test('deleting range from sidebar items + resetting the query state', async ({ page }, workerInfo) => {
+    test('deleting range from sidebar i tems + resetting the query state', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
         await hp.openPage({});
         await hp.didMakeInitialQueries({ term: '' });
@@ -116,7 +116,7 @@ test.describe('history', () => {
         await hp.sideBarItemWasRemoved('Show history for today');
 
         // makes a new query for default data
-        await hp.didMakeNthQuery({ nth: 2, query: { term: '' } });
+        await hp.didMakeNthQuery({ nth: 2, query: { term: '' }, source: 'auto' });
     });
     test('deleting sidebar items, but dismissing modal', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(2000);
@@ -190,7 +190,7 @@ test.describe('history', () => {
         await hp.didDeleteDomain('youtube.com');
 
         // should have reset the UI now
-        await hp.didMakeNthQuery({ nth: 2, query: { term: '' } });
+        await hp.didMakeNthQuery({ nth: 2, query: { term: '' }, source: 'auto' });
     });
     test('does not concatenate results if the query is not an addition', async ({ page }, workerInfo) => {
         const hp = HistoryTestPage.create(page, workerInfo).withEntries(1);

special-pages/pages/history/messages/query.request.json

@@ -31,6 +31,11 @@
           "const": "user",
           "title": "User Source",
           "description": "Indicates the query was following a user interaction"
+        },
+        {
+          "const": "auto",
+          "title": "Auto Source",
+          "description": "Indicates the query was triggered automatically, for example in response to another action (like delete)"
         }
       ]
     }

special-pages/pages/history/types/history.ts

@@ -41,6 +41,10 @@ export type InitialSource = "initial";
  * Indicates the query was following a user interaction
  */
 export type UserSource = "user";
+/**
+ * Indicates the query was triggered automatically, for example in response to another action (like delete)
+ */
+export type AutoSource = "auto";
 export type Favicon = null | {
   src: string;
   maxAvailableSize?: number;
@@ -211,7 +215,7 @@ export interface HistoryQuery {
    * Maximum number of records to return
    */
   limit: number;
-  source: InitialSource | UserSource;
+  source: InitialSource | UserSource | AutoSource;
 }
 export interface SearchTerm {
   term: string;