duckduckgo · moon0326 · Oct 22, 2025 · Sep 9, 2025 · Oct 20, 2025 · Oct 20, 2025
@@ -18,7 +18,7 @@ export const Item = memo(
      * @param {string} props.url - The text to be displayed for the item.
      * @param {string} props.domain - The text to be displayed for the domain
      * @param {number} props.kind - The kind or type of the item that determines its visual style.
-     * @param {string} props.dateTimeOfDay - the time of day, like 11.00am.
+     * @param {string} [props.dateTimeOfDay] - the time of day, like 11.00am.
      * @param {string} props.dateRelativeDay - the time of day, like 11.00am.
      * @param {string|null} props.etldPlusOne
      * @param {number} props.index - original index
@@ -63,7 +63,7 @@ export const Item = memo(
                     <span class={styles.domain} data-testid="Item.domain" title={props.domain}>
                         {props.domain}
                     </span>
-                    <span class={styles.time}>{dateTimeOfDay}</span>
+                    {dateTimeOfDay && <span className={styles.time}>{dateTimeOfDay}</span>}
                     <button class={styles.dots} data-action={BTN_ACTION_ENTRIES_MENU} data-index={index} value={props.id} tabindex={-1}>
                         <Dots />
                     </button>

@@ -28,6 +28,7 @@ const iconMap = {
     saturday: 'icons/day.svg',
     sunday: 'icons/day.svg',
     older: 'icons/older.svg',
+    sites: 'icons/sites.svg',
 };
 
 /** @type {Record<RangeId, (t: (s: keyof json) => string) => string>} */
@@ -43,6 +44,7 @@ const titleMap = {
     saturday: (t) => t('range_saturday'),
     sunday: (t) => t('range_sunday'),
     older: (t) => t('range_older'),
+    sites: (t) => t('range_sites'),
 };
 
 /**
@@ -106,7 +108,7 @@ function Item({ current, range, onClick, onDelete, count }) {
         if (range === 'all' && current.value === null) {
             return cn(styles.item, styles.active);
         }
-        return cn(styles.item, current.value === range && styles.active);
+        return cn(styles.item, current.value === range && styles.active, styles[`item_${range}`]);
     });
 
     return (
@@ -182,6 +184,7 @@ function labels(range, t) {
         case 'thursday':
         case 'friday':
         case 'saturday':
+        case 'sites':
         case 'sunday':
             return { linkLabel: t('show_history_for', { range }), buttonLabel: t('delete_history_for', { range }) };
         case 'older':

@@ -39,6 +39,23 @@
             background: var(--color-white-at-6);
         }
     }
+
+    &.item_sites {
+        margin-top: 16px;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: -8px;
+            left: 16px;
+            right: 16px;
+            border-top: 1px solid var(--color-black-at-6);
+        }
+
+        [data-theme="dark"] &::before {
+            border-top: 1px solid var(--color-white-at-6);
+        }
+    }
 }
 
 .item:hover .delete[aria-disabled="true"] {

@@ -421,6 +421,7 @@ export function toRange(input) {
         'sunday',
         'recentlyOpened',
         'older',
+        'sites',
     ];
     return valid.includes(input) ? /** @type {import('../types/history.js').RangeId} */ (input) : null;
 }

@@ -40,6 +40,7 @@ export function mockTransport() {
             { id: 'saturday', count: 1 },
             { id: 'friday', count: 1 },
             { id: 'older', count: 1 },
+            { id: 'sites', count: 1 },
         ],
     };
 
@@ -268,8 +269,10 @@ function queryResponseFrom(memory, msg) {
         const response = asResponse(memory.slice(0, 10), msg.params.offset, msg.params.limit);
         const range = msg.params.query.range;
         response.value = response.value.map((item) => {
+            if (!('range' in msg.params.query)) return item; // unreachable
             return {
                 ...item,
+                dateTimeOfDay: msg.params.query.range === 'sites' ? undefined : item.dateTimeOfDay,
                 title: 'range:' + range + ' ' + item.title,
             };
         });

@@ -106,5 +106,9 @@
   "range_older":  {
     "title": "Older",
     "note": "Label on a button that shows older history entries."
+  },
+  "range_sites":  {
+    "title": "Sites",
+    "note": "Label on a button that shows which sites have been visited"
   }
 }
@@ -601,6 +601,15 @@ export class HistoryTestPage {
         const rgb = `rgb(${[r, g, b].join(', ')})`;
         await expect(this.page.locator('[data-layout-mode="normal"]')).toHaveCSS('background-color', rgb, { timeout: 50 });
     }
+
+    async lastItemDividerHasColor({ rgb }) {
+        const lastItem = this.sidebar().locator('.Sidebar_item').last();
+        const borderTopColor = await lastItem.evaluate((el) => {
+            const before = window.getComputedStyle(el, '::before');
+            return before.borderTopColor;
+        });
+        expect(borderTopColor).toBe(rgb);
+    }
 }
 
 /**

@@ -5,7 +5,6 @@
     "id",
     "dateRelativeDay",
     "dateShort",
-    "dateTimeOfDay",
     "domain",
     "time",
     "title",

@@ -29,7 +29,8 @@
         "friday",
         "saturday",
         "sunday",
-        "older"
+        "older",
+        "sites"
       ]
     }
   },

@@ -116,5 +116,9 @@
   "range_older": {
     "title": "Older",
     "note": "Label on a button that shows older history entries."
+  },
+  "range_sites": {
+    "title": "Sites",
+    "note": "Label on a button that shows which sites have been visited"
   }
 }
@@ -31,7 +31,8 @@ export type RangeId =
   | "friday"
   | "saturday"
   | "sunday"
-  | "older";
+  | "older"
+  | "sites";
 export type QueryKind = SearchTerm | DomainFilter | RangeFilter;
 /**
  * Indicates the query was triggered before the UI was rendered
@@ -266,7 +267,7 @@ export interface HistoryItem {
   /**
    * The time of day in 24-hour format (e.g., '11:01').
    */
-  dateTimeOfDay: string;
+  dateTimeOfDay?: string;
   /**
    * The eTLD+1 version of the domain, representing the domain and its top-level domain (e.g., 'example.com', 'localhost'). This differs from 'domain', which may include subdomains (e.g., 'www.youtube.com').
    */