diff --git a/special-pages/pages/history/app/HistoryProvider.js b/special-pages/pages/history/app/HistoryProvider.js
index cb08b77b55..ddaaa9d101 100644
--- a/special-pages/pages/history/app/HistoryProvider.js
+++ b/special-pages/pages/history/app/HistoryProvider.js
@@ -1,7 +1,7 @@
import { h, createContext } from 'preact';
import { useContext } from 'preact/hooks';
import { useSignalEffect } from '@preact/signals';
-import { paramsToQuery } from './history.service.js';
+import { paramsToQuery, toRange } from './history.service.js';
import { OVERSCAN_AMOUNT } from './constants.js';
import { usePlatformName } from './types.js';
import { eventToTarget } from '../../../shared/handlers.js';
@@ -75,12 +75,17 @@ export function HistoryServiceProvider({ service, initial, children }) {
if (btn?.dataset.deleteRange) {
event.stopImmediatePropagation();
event.preventDefault();
- return confirm(`todo: delete range for ${btn.dataset.deleteRange}`);
+ const range = toRange(btn.value);
+ if (range) {
+ // eslint-disable-next-line promise/prefer-await-to-then
+ service.deleteRange(range).catch(console.error);
+ }
}
if (btn?.dataset.deleteAll) {
event.stopImmediatePropagation();
event.preventDefault();
- return confirm(`todo: delete all`);
+ // eslint-disable-next-line promise/prefer-await-to-then
+ service.deleteRange('all').catch(console.error);
}
} else if (anchor) {
const url = anchor.dataset.url;
diff --git a/special-pages/pages/history/app/components/App.jsx b/special-pages/pages/history/app/components/App.jsx
index a429f4f061..04b082a12b 100644
--- a/special-pages/pages/history/app/components/App.jsx
+++ b/special-pages/pages/history/app/components/App.jsx
@@ -20,13 +20,14 @@ export function App() {
const containerRef = useRef(/** @type {HTMLElement|null} */ (null));
const { initial, service } = useHistory();
+ // NOTE: These states will get extracted out later, once I know all the use-cases
+ const ranges = useSignal(initial.ranges.ranges);
+ const term = useSignal('term' in initial.query.info.query ? initial.query.info.query.term : '');
const results = useSignal({
items: initial.query.results,
heights: generateHeights(initial.query.results),
});
- const term = useSignal('term' in initial.query.info.query ? initial.query.info.query.term : '');
-
useSignalEffect(() => {
const unsub = service.onResults((data) => {
batch(() => {
@@ -39,8 +40,14 @@ export function App() {
};
});
});
+
+ // Subscribe to changes in the 'ranges' data and reflect the updates into the UI
+ const unsubRanges = service.onRanges((data) => {
+ ranges.value = data.ranges;
+ });
return () => {
unsub();
+ unsubRanges();
};
});
@@ -56,7 +63,7 @@ export function App() {
diff --git a/special-pages/pages/history/app/components/Header.js b/special-pages/pages/history/app/components/Header.js
index bdfebd972a..0cac81bf13 100644
--- a/special-pages/pages/history/app/components/Header.js
+++ b/special-pages/pages/history/app/components/Header.js
@@ -3,17 +3,19 @@ import { h } from 'preact';
import { useComputed } from '@preact/signals';
import { SearchForm, useSearchContext } from './SearchForm.js';
import { Trash } from '../icons/Trash.js';
+import { useTypedTranslation } from '../types.js';
/**
*/
export function Header() {
+ const { t } = useTypedTranslation();
const search = useSearchContext();
const term = useComputed(() => search.value.term);
return (
diff --git a/special-pages/pages/history/app/components/Results.js b/special-pages/pages/history/app/components/Results.js
index c4bdbc517c..aabd2c8f74 100644
--- a/special-pages/pages/history/app/components/Results.js
+++ b/special-pages/pages/history/app/components/Results.js
@@ -1,14 +1,19 @@
import { h } from 'preact';
+import cn from 'classnames';
import { OVERSCAN_AMOUNT } from '../constants.js';
import { Item } from './Item.js';
import styles from './VirtualizedList.module.css';
import { VisibleItems } from './VirtualizedList.js';
+import { useTypedTranslation } from '../types.js';
/**
* @param {object} props
* @param {import("@preact/signals").Signal} props.results
*/
export function Results({ results }) {
+ if (results.value.items.length === 0) {
+ return ;
+ }
const totalHeight = results.value.heights.reduce((acc, item) => acc + item, 0);
return (
@@ -36,3 +41,16 @@ export function Results({ results }) {
);
}
+
+/**
+ * Empty state component displayed when no results are available
+ */
+function Empty() {
+ const { t } = useTypedTranslation();
+ return (
+
+
+
{t('empty_title')}
+
+ );
+}
diff --git a/special-pages/pages/history/app/components/Sidebar.js b/special-pages/pages/history/app/components/Sidebar.js
index c58cde57dc..81158637a1 100644
--- a/special-pages/pages/history/app/components/Sidebar.js
+++ b/special-pages/pages/history/app/components/Sidebar.js
@@ -9,9 +9,10 @@ import { useTypedTranslationWith } from '../../../new-tab/app/types.js';
/**
* @import json from "../strings.json"
+ * @typedef {import('../../types/history.js').Range} Range
*/
-/** @type {Record} */
+/** @type {Record} */
const iconMap = {
all: 'icons/all.svg',
today: 'icons/today.svg',
@@ -23,11 +24,10 @@ const iconMap = {
friday: 'icons/day.svg',
saturday: 'icons/day.svg',
sunday: 'icons/day.svg',
- recentlyOpened: 'icons/closed.svg',
older: 'icons/older.svg',
};
-/** @type {Record string) => string>} */
+/** @type {Record string) => string>} */
const titleMap = {
all: (t) => t('range_all'),
today: (t) => t('range_today'),
@@ -39,7 +39,6 @@ const titleMap = {
friday: (t) => t('range_friday'),
saturday: (t) => t('range_saturday'),
sunday: (t) => t('range_sunday'),
- recentlyOpened: (t) => t('range_recentlyOpened'),
older: (t) => t('range_older'),
};
@@ -47,25 +46,20 @@ const titleMap = {
* Renders a sidebar navigation component with links based on the provided ranges.
*
* @param {Object} props - The properties object.
- * @param {import('../../types/history.js').Range[]} props.ranges - An array of range values used to generate navigation links.
+ * @param {import("@preact/signals").Signal} props.ranges - An array of range values used to generate navigation links.
*/
export function Sidebar({ ranges }) {
const { t } = useTypedTranslation();
const search = useSearchContext();
const current = useComputed(() => search.value.range);
- const others = ranges.filter((x) => x === 'recentlyOpened');
- const main = ranges.filter((x) => x !== 'recentlyOpened');
return (
{t('page_title')}
- {others.map((range) => {
- return ;
- })}
);
}
@@ -74,16 +68,16 @@ export function Sidebar({ ranges }) {
* Renders an item component with additional properties and functionality.
*
* @param {Object} props
- * @param {import('../../types/history.js').Range} props.range The range value used for filtering and identification.
+ * @param {Range} props.range The range value used for filtering and identification.
* @param {string} props.title The title or label of the item.
- * @param {import("@preact/signals").Signal} props.current The current state object used to determine active item styling.
+ * @param {import("@preact/signals").Signal} props.current The current state object used to determine active item styling.
*/
function Item({ range, title, current }) {
const { t } = useTypedTranslationWith(/** @type {json} */ ({}));
- const label = (() => {
+ const [linkLabel, deleteLabel] = (() => {
switch (range) {
case 'all':
- return t('show_history_all');
+ return [t('show_history_all'), t('delete_history_all')];
case 'today':
case 'yesterday':
case 'monday':
@@ -93,22 +87,28 @@ function Item({ range, title, current }) {
case 'friday':
case 'saturday':
case 'sunday':
- return t('show_history_for', { range });
+ return [t('show_history_for', { range }), t('delete_history_for', { range })];
case 'older':
- return t('show_history_older');
- case 'recentlyOpened':
- return t('show_history_closed');
+ return [t('show_history_older'), t('delete_history_older')];
}
})();
return (
-
-
-
-
- {title}
-
+