add domain

Author: shakyShane

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

@@ -13,11 +13,12 @@ export const Item = memo(
      * @param {string} props.id - A unique identifier for the item.
      * @param {string} props.title - The text to be displayed for the item.
      * @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.dateRelativeDay - The relative day information to display (shown when kind is equal to TITLE_KIND).
      * @param {string} props.dateTimeOfDay - the time of day, like 11.00am.
      */
-    function Item({ id, url, title, kind, dateRelativeDay, dateTimeOfDay }) {
+    function Item({ id, url, domain, title, kind, dateRelativeDay, dateTimeOfDay }) {
         return (
             <Fragment>
                 {kind === TITLE_KIND && (
@@ -32,7 +33,7 @@ export const Item = memo(
                     <a href={url} data-url={url} class={styles.entryLink}>
                         {title}
                     </a>
-                    <span class={styles.url}>{url}</span>
+                    <span class={styles.domain}>{domain}</span>
                     <span class={styles.time}>{dateTimeOfDay}</span>
                     <button class={styles.dots} data-row-menu={id}>
                         <Dots />

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

@@ -54,7 +54,7 @@
     color: inherit;
 }
 
-.url {
+.domain {
     font-weight: 400;
     display: block;
     white-space: nowrap;

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

@@ -24,6 +24,7 @@ export function Results({ results }) {
                                 id={item.id}
                                 kind={results.value.heights[index]}
                                 url={item.url}
+                                domain={item.domain}
                                 title={item.title}
                                 dateRelativeDay={item.dateRelativeDay}
                                 dateTimeOfDay={item.dateTimeOfDay}

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

@@ -15,6 +15,7 @@ export const historyMocks = {
                 dateTimeOfDay: '11:10',
                 title: 'Electric Callboy - Hypa Hypa (OFFICIAL VIDEO) - YouTube',
                 url: 'https://www.youtube.com/watch?v=75Mw8r5gW8E',
+                domain: 'www.youtube.com',
             },
             {
                 id: 'history-id-02',
@@ -23,6 +24,7 @@ export const historyMocks = {
                 dateTimeOfDay: '11:01',
                 title: 'Sonos continues to clean house with departure of chief commercial officer - The Verge',
                 url: 'https://www.theverge.com/2025/1/15/24344430/sonos-cco-deirdre-findlay-leaving',
+                domain: 'www.theverge.com',
             },
             {
                 id: 'history-id-03',
@@ -31,6 +33,7 @@ export const historyMocks = {
                 dateTimeOfDay: '16:45',
                 title: 'PreactJS/preact: Fast 3kB React alternative with the same API. Components & Virtual DOM. - GitHub',
                 url: 'https://github.com/preactjs/preact',
+                domain: 'github.com',
             },
         ],
     },

special-pages/pages/history/messages/types/history-item.json

@@ -33,6 +33,10 @@
       "format": "hostname",
       "description": "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')."
     },
+    "domain": {
+      "type": "string",
+      "description": "The full domain to show beside the site title, eg: 'www.youtube.com'"
+    },
     "title": {
       "type": "string",
       "description": "Title of the page (e.g., 'YouTube')."

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

@@ -147,6 +147,10 @@ export interface HistoryItem {
    * 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').
    */
   etldPlusOne?: string;
+  /**
+   * The full domain to show beside the site title, eg: 'www.youtube.com'
+   */
+  domain: string;
   /**
    * Title of the page (e.g., 'YouTube').
    */