Merge branch 'like_stats'

api.js

···
     return await this.getRequest('app.bsky.notification.listNotifications', params);
   }
 
-  /** @param {string} [cursor], @returns {Promise<{ cursor: string | undefined, posts: json[] }>} */
+  /**
+   * @param {string} [cursor]
+   * @returns {Promise<{ cursor: string | undefined, posts: json[] }>}
+   */
 
   async loadMentions(cursor) {
     let response = await this.loadNotifications(cursor);
···
     return { cursor: response.cursor, posts };
   }
 
-  /** @param {number} days, @returns {Promise<json[]>} */
+  /**
+   * @param {number} days
+   * @param {{ onPageLoad?: FetchAllOnPageLoad }} [options]
+   * @returns {Promise<json[]>}
+   */
 
   async loadTimeline(days, options = {}) {
     let now = new Date();
     let timeLimit = now.getTime() - days * 86400 * 1000;
 
     return await this.fetchAll('app.bsky.feed.getTimeline', { limit: 100 }, {
+      field: 'feed',
+      breakWhen: (x) => {
+        let timestamp = x.reason ? x.reason.indexedAt : x.post.record.createdAt;
+        return Date.parse(timestamp) < timeLimit;
+      },
+      onPageLoad: options.onPageLoad
+    });
+  }
+
+  /**
+   * @param {string} did
+   * @param {number} days
+   * @param {{ onPageLoad?: FetchAllOnPageLoad }} [options]
+   * @returns {Promise<json[]>}
+   */
+
+  async loadUserTimeline(did, days, options = {}) {
+    let now = new Date();
+    let timeLimit = now.getTime() - days * 86400 * 1000;
+
+    let params = { actor: did, filter: 'posts_no_replies', limit: 100 };
+
+    return await this.fetchAll('app.bsky.feed.getAuthorFeed', params, {
       field: 'feed',
       breakWhen: (x) => {
         let timestamp = x.reason ? x.reason.indexedAt : x.post.record.createdAt;

index.html

···
     </table>
   </div>
 
+  <div id="like_stats_page">
+    <h2>Like statistics</h2>
+
+    <form>
+      <p>
+        Time range: <input type="range" min="1" max="60" value="7"> <label>7 days</label>
+      </p>
+
+      <p>
+        <input type="submit" value="Start scan"> <progress></progress>
+      </p>
+    </form>
+
+    <table class="scan-result given-likes">
+      <thead>
+        <tr><th colspan="3">❤️ Likes from you:</th></tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+
+    <table class="scan-result received-likes">
+      <thead>
+        <tr><th colspan="3">💛 Likes on your posts:</th></tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </div>
+
   <script src="lib/purify.min.js"></script>
   <script src="minisky.js"></script>
   <script src="api.js"></script>
   <script src="utils.js"></script>
   <script src="rich_text_lite.js"></script>
   <script src="models.js"></script>
+  <script src="menu.js"></script>
   <script src="thread_page.js"></script>
   <script src="posting_stats_page.js"></script>
+  <script src="like_stats_page.js"></script>
   <script src="embed_component.js"></script>
   <script src="post_component.js"></script>
   <script src="skythread.js"></script>

like_stats_page.js

···
+class LikeStatsPage {
+
+  /** @type {number | undefined} */
+  scanStartTime;
+
+  constructor() {
+    this.pageElement = $id('like_stats_page');
+
+    this.rangeInput = $(this.pageElement.querySelector('input[type="range"]'), HTMLInputElement);
+    this.submitButton = $(this.pageElement.querySelector('input[type="submit"]'), HTMLInputElement);
+    this.progressBar = $(this.pageElement.querySelector('input[type=submit] + progress'), HTMLProgressElement);
+
+    this.receivedTable = $(this.pageElement.querySelector('.received-likes'), HTMLTableElement);
+    this.givenTable = $(this.pageElement.querySelector('.given-likes'), HTMLTableElement);
+
+    this.appView = new BlueskyAPI('public.api.bsky.app', false);
+
+    this.setupEvents();
+
+    this.progressPosts = 0;
+    this.progressLikeRecords = 0;
+    this.progressPostLikes = 0;
+  }
+
+  setupEvents() {
+    $(this.pageElement.querySelector('form')).addEventListener('submit', (e) => {
+      e.preventDefault();
+
+      if (!this.scanStartTime) {
+        this.findLikes();      
+      } else {
+        this.stopScan();
+      }
+    });
+
+    this.rangeInput.addEventListener('input', (e) => {
+      let days = parseInt(this.rangeInput.value, 10);
+      let label = $(this.pageElement.querySelector('input[type=range] + label'));
+      label.innerText = (days == 1) ? '1 day' : `${days} days`;
+    });
+  }
+
+  /** @returns {number} */
+
+  selectedDaysRange() {
+    return parseInt(this.rangeInput.value, 10);
+  }
+
+  show() {
+    this.pageElement.style.display = 'block';
+  }
+
+  /** @returns {Promise<void>} */
+
+  async findLikes() {
+    this.submitButton.value = 'Cancel';
+
+    let requestedDays = this.selectedDaysRange();
+
+    this.resetProgress();
+    this.progressBar.style.display = 'inline';
+
+    let startTime = new Date().getTime();
+    this.scanStartTime = startTime;
+
+    this.receivedTable.style.display = 'none';
+    this.givenTable.style.display = 'none';
+
+    let fetchGivenLikes = this.fetchGivenLikes(requestedDays);
+
+    let receivedLikes = await this.fetchReceivedLikes(requestedDays);
+    let receivedStats = this.sumUpReceivedLikes(receivedLikes);
+    let topReceived = this.getTopEntries(receivedStats);
+
+    await this.renderResults(topReceived, this.receivedTable);
+
+    let givenLikes = await fetchGivenLikes;
+    let givenStats = this.sumUpGivenLikes(givenLikes);
+    let topGiven = this.getTopEntries(givenStats);
+
+    let profileInfo = await appView.getRequest('app.bsky.actor.getProfiles', { actors: topGiven.map(x => x.did) });
+
+    for (let profile of profileInfo.profiles) {
+      let user = /** @type {LikeStat} */ (topGiven.find(x => x.did == profile.did));
+      user.handle = profile.handle;
+      user.avatar = profile.avatar;
+    }
+
+    await this.renderResults(topGiven, this.givenTable);
+
+    this.receivedTable.style.display = 'table';
+    this.givenTable.style.display = 'table';
+
+    this.submitButton.value = 'Start scan';
+    this.progressBar.style.display = 'none';
+    this.scanStartTime = undefined;
+  }
+
+  /** @param {number} requestedDays, @returns {Promise<json[]>} */
+
+  async fetchGivenLikes(requestedDays) {
+    let startTime = /** @type {number} */ (this.scanStartTime);
+
+    return await accountAPI.fetchAll('com.atproto.repo.listRecords', {
+      repo: accountAPI.user.did,
+      collection: 'app.bsky.feed.like',
+      limit: 100
+    }, {
+      field: 'records',
+      breakWhen: (x) => Date.parse(x['value']['createdAt']) < startTime - 86400 * requestedDays * 1000,
+      onPageLoad: (data) => {
+        if (data.length == 0) { return }
+
+        let last = data[data.length - 1];
+        let lastDate = Date.parse(last.value.createdAt);
+
+        let daysBack = (startTime - lastDate) / 86400 / 1000;
+        this.updateProgress({ likeRecords: Math.min(1.0, daysBack / requestedDays) });
+      }
+    });
+  }
+
+  /** @param {number} requestedDays, @returns {Promise<json[]>} */
+
+  async fetchReceivedLikes(requestedDays) {
+    let startTime = /** @type {number} */ (this.scanStartTime);
+
+    let myPosts = await this.appView.loadUserTimeline(accountAPI.user.did, requestedDays, {
+      onPageLoad: (data) => {
+        if (data.length == 0) { return }
+
+        let last = data[data.length - 1];
+        let lastTimestamp = last.reason ? last.reason.indexedAt : last.post.record.createdAt;
+        let lastDate = Date.parse(lastTimestamp);
+
+        let daysBack = (startTime - lastDate) / 86400 / 1000;
+        this.updateProgress({ posts: Math.min(1.0, daysBack / requestedDays) });
+      }
+    });
+
+    let likedPosts = myPosts.filter(x => !x['reason'] && x['post']['likeCount'] > 0);
+
+    let results = [];
+
+    for (let i = 0; i < likedPosts.length; i += 10) {
+      let batch = likedPosts.slice(i, i + 10);
+      this.updateProgress({ postLikes: i / likedPosts.length });
+
+      let fetchBatch = batch.map(x => {
+        return this.appView.fetchAll('app.bsky.feed.getLikes', { uri: x['post']['uri'], limit: 100 }, {
+          field: 'likes'
+        });
+      });
+
+      let batchResults = await Promise.all(fetchBatch);
+      results = results.concat(batchResults);
+    }
+
+    this.updateProgress({ postLikes: 1.0 });
+
+    return results.flat();
+  }
+
+  /**
+   * @typedef {{ handle?: string, did?: string, avatar?: string, count: number }} LikeStat
+   * @typedef {Record<string, LikeStat>} LikeStatHash
+   */
+
+  /** @param {json[]} likes, @returns {LikeStatHash} */
+
+  sumUpReceivedLikes(likes) {
+    /** @type {LikeStatHash} */
+    let stats = {};
+
+    for (let like of likes) {
+      let handle = like.actor.handle;
+
+      if (!stats[handle]) {
+        stats[handle] = { handle: handle, count: 0, avatar: like.actor.avatar };
+      }
+
+      stats[handle].count += 1;
+    }
+
+    return stats;
+  }
+
+  /** @param {json[]} likes, @returns {LikeStatHash} */
+
+  sumUpGivenLikes(likes) {
+    /** @type {LikeStatHash} */
+    let stats = {};
+
+    for (let like of likes) {
+      let did = atURI(like.value.subject.uri).repo;
+
+      if (!stats[did]) {
+        stats[did] = { did: did, count: 0 };
+      }
+
+      stats[did].count += 1;
+    }
+
+    return stats;
+  }
+
+  /** @param {LikeStatHash} counts, @returns {LikeStat[]} */
+
+  getTopEntries(counts) {
+    return Object.entries(counts).sort(this.sortResults).map(x => x[1]).slice(0, 20);
+  }
+
+  /** @param {LikeStat[]} topUsers, @param {HTMLTableElement} table, @returns {Promise<void>} */
+
+  async renderResults(topUsers, table) {
+    let tableBody = $(table.querySelector('tbody'));
+    tableBody.innerHTML = '';
+
+    for (let [i, user] of topUsers.entries()) {
+      let tr = $tag('tr');
+      tr.append(
+        $tag('td.no', { text: i + 1 }),
+        $tag('td.handle', {
+          html: `<img class="avatar" src="${user.avatar}"> ` + 
+                `<a href="https://bsky.app/profile/${user.handle}" target="_blank">${user.handle}</a>`
+        }),
+        $tag('td.count', { text: user.count })
+      );
+
+      tableBody.append(tr);
+    };
+  }
+
+  resetProgress() {
+    this.progressBar.value = 0;
+    this.progressPosts = 0;
+    this.progressLikeRecords = 0;
+    this.progressPostLikes = 0;
+  }
+
+  /** @param {{ posts?: number, likeRecords?: number, postLikes?: number }} data */
+
+  updateProgress(data) {
+    if (data.posts) {
+      this.progressPosts = data.posts;
+    }
+
+    if (data.likeRecords) {
+      this.progressLikeRecords = data.likeRecords;
+    }
+
+    if (data.postLikes) {
+      this.progressPostLikes = data.postLikes;
+    }
+
+    let totalProgress = (
+      0.1 * this.progressPosts +
+      0.65 * this.progressLikeRecords +
+      0.25 * this.progressPostLikes
+    );
+
+    this.progressBar.value = totalProgress;
+  }
+
+  /** @param {[string, LikeStat]} a, @param {[string, LikeStat]} b, @returns {-1|1|0} */
+
+  sortResults(a, b) {
+    if (a[1].count < b[1].count) {
+      return 1;
+    } else if (a[1].count > b[1].count) {
+      return -1;
+    } else {
+      return 0;
+    }
+  }
+
+  stopScan() {
+    this.submitButton.value = 'Start scan';
+    this.progressBar.style.display = 'none';
+    this.scanStartTime = undefined;
+  }
+}

menu.js

···
+class Menu {
+  constructor() {
+    this.menuElement = $id('account_menu');
+    this.icon = $id('account');
+
+    this.setupEvents();
+  }
+
+  setupEvents() {
+    let html = $(document.body.parentNode);
+
+    html.addEventListener('click', (e) => {
+      this.menuElement.style.visibility = 'hidden';
+    });
+
+    this.icon.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.toggleAccountMenu();
+    });
+
+    this.menuElement.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+
+    $(this.menuElement.querySelector('a[data-action=biohazard]')).addEventListener('click', (e) => {
+      e.preventDefault();
+
+      let hazards = document.querySelectorAll('p.hidden-replies, .content > .post.blocked, .blocked > .load-post');
+
+      if (window.biohazardEnabled === false) {
+        window.biohazardEnabled = true;
+        localStorage.setItem('biohazard', 'true');
+        this.toggleMenuButtonCheck('biohazard', true);
+        Array.from(hazards).forEach(p => { $(p).style.display = 'block' });
+      } else {
+        window.biohazardEnabled = false;
+        localStorage.setItem('biohazard', 'false');
+        this.toggleMenuButtonCheck('biohazard', false);
+        Array.from(hazards).forEach(p => { $(p).style.display = 'none' });
+      }
+    });
+
+    $(this.menuElement.querySelector('a[data-action=incognito]')).addEventListener('click', (e) => {
+      e.preventDefault();
+
+      if (window.isIncognito) {
+        localStorage.removeItem('incognito');
+      } else {
+        localStorage.setItem('incognito', '1');
+      }
+
+      location.reload();
+    });
+
+    $(this.menuElement.querySelector('a[data-action=login]')).addEventListener('click', (e) => {
+      e.preventDefault();
+
+      toggleDialog(loginDialog);
+      this.menuElement.style.visibility = 'hidden';
+    });
+
+    $(this.menuElement.querySelector('a[data-action=logout]')).addEventListener('click', (e) => {
+      e.preventDefault();
+      logOut();
+    });
+  }
+
+  toggleAccountMenu() {
+    this.menuElement.style.visibility = (this.menuElement.style.visibility == 'visible') ? 'hidden' : 'visible';
+  }
+
+  /** @param {string} buttonName */
+
+  showMenuButton(buttonName) {
+    let button = $(this.menuElement.querySelector(`a[data-action=${buttonName}]`));
+    let item = $(button.parentNode);
+    item.style.display = 'list-item';
+  }
+
+  /** @param {string} buttonName */
+
+  hideMenuButton(buttonName) {
+    let button = $(this.menuElement.querySelector(`a[data-action=${buttonName}]`));
+    let item = $(button.parentNode);
+    item.style.display = 'none';
+  }
+
+  /** @param {string} buttonName, @param {boolean} state */
+
+  toggleMenuButtonCheck(buttonName, state) {
+    let button = $(this.menuElement.querySelector(`a[data-action=${buttonName}]`));
+    let check = $(button.querySelector('.check'));
+    check.style.display = (state) ? 'inline' : 'none';
+  }
+
+  /** @param {boolean | 'incognito'} loggedIn, @param {string | undefined | null} [avatar] */
+
+  showLoggedInStatus(loggedIn, avatar) {
+    if (loggedIn === true && avatar) {
+      let button = $(this.icon.querySelector('i'));
+
+      let img = $tag('img.avatar', { src: avatar });
+      img.style.display = 'none';
+      img.addEventListener('load', () => {
+        button.remove();
+        img.style.display = 'inline';
+      });
+      img.addEventListener('error', () => {
+        this.showLoggedInStatus(true, null);
+      })
+
+      this.icon.append(img);
+    } else if (loggedIn === false) {
+      this.icon.innerHTML = `<i class="fa-regular fa-user-circle fa-xl"></i>`;
+    } else if (loggedIn === 'incognito') {
+      this.icon.innerHTML = `<i class="fa-solid fa-user-secret fa-lg"></i>`;
+    } else {
+      this.icon.innerHTML = `<i class="fa-solid fa-user-circle fa-xl"></i>`;
+    }
+  }
+
+  /** @returns {Promise<void>} */
+
+  async loadCurrentUserAvatar() {
+    try {
+      let url = await api.loadCurrentUserAvatar();
+      this.showLoggedInStatus(true, url);      
+    } catch (error) {
+      console.log(error);
+      this.showLoggedInStatus(true, null);
+    }
+  }
+}

minisky.js

···
   }
 
   /**
+   * @typedef {(obj: json[]) => { cancel: true } | void} FetchAllOnPageLoad
+   *
    * @typedef {MiniskyOptions & {
    *   field: string,
    *   breakWhen?: (obj: json) => boolean,
-   *   onPageLoad?: (obj: json[]) => { cancel: true },
+   *   onPageLoad?: FetchAllOnPageLoad | undefined
    * }} FetchAllOptions
    *
    * @param {string} method

skythread.js

···
 function init() {
-  let html = $(document.body.parentNode);
-
   window.dateLocale = localStorage.getItem('locale') || undefined;
   window.isIncognito = !!localStorage.getItem('incognito');
   window.biohazardEnabled = JSON.parse(localStorage.getItem('biohazard') ?? 'null');
 
   window.loginDialog = $(document.querySelector('#login'));
-  window.accountMenu = $(document.querySelector('#account_menu'));
 
   window.avatarPreloader = buildAvatarPreloader();
 
+  window.accountMenu = new Menu();
   window.threadPage = new ThreadPage();
   window.postingStatsPage = new PostingStatsPage();
-
-  html.addEventListener('click', (e) => {
-    $id('account_menu').style.visibility = 'hidden';
-  });
+  window.likeStatsPage = new LikeStatsPage();
 
   $(document.querySelector('#search form')).addEventListener('submit', (e) => {
     e.preventDefault();
···
 
     window.biohazardEnabled = false;
     localStorage.setItem('biohazard', 'false');
-    toggleMenuButton('biohazard', false);
+    accountMenu.toggleMenuButtonCheck('biohazard', false);
 
     for (let p of document.querySelectorAll('p.hidden-replies, .content > .post.blocked, .blocked > .load-post')) {
       $(p).style.display = 'none';
···
     hideDialog(target.closest('.dialog'));
   });
 
-  $(document.querySelector('#account')).addEventListener('click', (e) => {
-    toggleAccountMenu();
-    e.stopPropagation();
-  });
-
-  accountMenu.addEventListener('click', (e) => {
-    e.stopPropagation();
-  });
-
-  $(accountMenu.querySelector('a[data-action=biohazard]')).addEventListener('click', (e) => {
-    e.preventDefault();
-
-    let hazards = document.querySelectorAll('p.hidden-replies, .content > .post.blocked, .blocked > .load-post');
-
-    if (window.biohazardEnabled === false) {
-      window.biohazardEnabled = true;
-      localStorage.setItem('biohazard', 'true');
-      toggleMenuButton('biohazard', true);
-      Array.from(hazards).forEach(p => { $(p).style.display = 'block' });
-    } else {
-      window.biohazardEnabled = false;
-      localStorage.setItem('biohazard', 'false');
-      toggleMenuButton('biohazard', false);
-      Array.from(hazards).forEach(p => { $(p).style.display = 'none' });
-    }
-  });
-
-  $(accountMenu.querySelector('a[data-action=incognito]')).addEventListener('click', (e) => {
-    e.preventDefault();
-
-    if (isIncognito) {
-      localStorage.removeItem('incognito');
-    } else {
-      localStorage.setItem('incognito', '1');
-    }
-
-    location.reload();
-  });
-
-  $(accountMenu.querySelector('a[data-action=login]')).addEventListener('click', (e) => {
-    e.preventDefault();
-    toggleDialog(loginDialog);
-    $id('account_menu').style.visibility = 'hidden';
-  });
-
-  $(accountMenu.querySelector('a[data-action=logout]')).addEventListener('click', (e) => {
-    e.preventDefault();
-    logOut();
-  });
-
   window.appView = new BlueskyAPI('api.bsky.app', false);
   window.blueAPI = new BlueskyAPI('blue.mackuba.eu', false);
   window.accountAPI = new BlueskyAPI(undefined, true);
 
   if (accountAPI.isLoggedIn) {
     accountAPI.host = accountAPI.user.pdsEndpoint;
-    hideMenuButton('login');
+    accountMenu.hideMenuButton('login');
 
     if (!isIncognito) {
       window.api = accountAPI;
-      showLoggedInStatus(true, api.user.avatar);
+      accountMenu.showLoggedInStatus(true, api.user.avatar);
     } else {
       window.api = appView;
-      showLoggedInStatus('incognito');
-      toggleMenuButton('incognito', true);
+      accountMenu.showLoggedInStatus('incognito');
+      accountMenu.toggleMenuButtonCheck('incognito', true);
     }
   } else {
     window.api = appView;
-    hideMenuButton('logout');
-    hideMenuButton('incognito');
+    accountMenu.hideMenuButton('logout');
+    accountMenu.hideMenuButton('incognito');
   }
 
-  toggleMenuButton('biohazard', window.biohazardEnabled !== false);
+  accountMenu.toggleMenuButtonCheck('biohazard', window.biohazardEnabled !== false);
 
   parseQueryParams();
 }
···
   $id('login').classList.toggle('expanded');
 }
 
-function toggleAccountMenu() {
-  let menu = $id('account_menu');
-  menu.style.visibility = (menu.style.visibility == 'visible') ? 'hidden' : 'visible';
-}
-
-/** @param {string} buttonName */
-
-function showMenuButton(buttonName) {
-  let button = $(accountMenu.querySelector(`a[data-action=${buttonName}]`));
-  let item = $(button.parentNode);
-  item.style.display = 'list-item';
-}
-
-/** @param {string} buttonName */
-
-function hideMenuButton(buttonName) {
-  let button = $(accountMenu.querySelector(`a[data-action=${buttonName}]`));
-  let item = $(button.parentNode);
-  item.style.display = 'none';
-}
-
-/** @param {string} buttonName, @param {boolean} state */
-
-function toggleMenuButton(buttonName, state) {
-  let button = $(accountMenu.querySelector(`a[data-action=${buttonName}]`));
-  let check = $(button.querySelector('.check'));
-  check.style.display = (state) ? 'inline' : 'none';
-}
-
-/** @param {boolean | 'incognito'} loggedIn, @param {string | undefined | null} [avatar] */
-
-function showLoggedInStatus(loggedIn, avatar) {
-  let account = $id('account');
-
-  if (loggedIn === true && avatar) {
-    let button = $(account.querySelector('i'));
-
-    let img = $tag('img.avatar', { src: avatar });
-    img.style.display = 'none';
-    img.addEventListener('load', () => {
-      button.remove();
-      img.style.display = 'inline';
-    });
-    img.addEventListener('error', () => {
-      showLoggedInStatus(true, null);
-    })
-
-    account.append(img);
-  } else if (loggedIn === false) {
-    $id('account').innerHTML = `<i class="fa-regular fa-user-circle fa-xl"></i>`;
-  } else if (loggedIn === 'incognito') {
-    $id('account').innerHTML = `<i class="fa-solid fa-user-secret fa-lg"></i>`;
-  } else {
-    account.innerHTML = `<i class="fa-solid fa-user-circle fa-xl"></i>`;
-  }
-}
-
 function submitLogin() {
   let handle = $id('login_handle', HTMLInputElement);
   let password = $id('login_password', HTMLInputElement);
···
     submit.style.display = 'inline';
     cloudy.style.display = 'none';
 
-    loadCurrentUserAvatar();
-    showMenuButton('logout');
-    showMenuButton('incognito');
-    hideMenuButton('login');
+    accountMenu.loadCurrentUserAvatar();
+
+    accountMenu.showMenuButton('logout');
+    accountMenu.showMenuButton('incognito');
+    accountMenu.hideMenuButton('login');
 
     let params = new URLSearchParams(location.search);
     let page = params.get('page');
···
   return pds;
 }
 
-function loadCurrentUserAvatar() {
-  api.loadCurrentUserAvatar().then((url) => {
-    showLoggedInStatus(true, url);
-  }).catch((error) => {
-    console.log(error);
-    showLoggedInStatus(true, null);
-  });
-}
-
 function logOut() {
   accountAPI.resetTokens();
   localStorage.removeItem('incognito');
···
     showNotificationsPage();
   } else if (page == 'posting_stats') {
     window.postingStatsPage.show();
+  } else if (page == 'like_stats') {
+    window.likeStatsPage.show();
   }
 }
 

style.css

···
 
 #posting_stats_page .scan-result td, #posting_stats_page .scan-result th {
   border: 1px solid #333;
-  padding: 5px 8px;
 }
 
 #posting_stats_page .scan-result td {
   text-align: right;
+  padding: 5px 8px;
 }
 
 #posting_stats_page .scan-result th {
···
 
 #posting_stats_page .scan-result td.percent {
   min-width: 70px;
+}
+
+#like_stats_page {
+  display: none;
+}
+
+#like_stats_page input[type="range"] {
+  width: 250px;
+  vertical-align: middle;
+}
+
+#like_stats_page input[type="submit"] {
+  font-size: 12pt;
+  margin: 5px 0px;
+  padding: 5px 10px;
+}
+
+#like_stats_page progress {
+  width: 300px;
+  margin-left: 10px;
+  vertical-align: middle;
+  display: none;
+}
+
+#like_stats_page .scan-result {
+  border: 1px solid #333;
+  border-collapse: collapse;
+  display: none;
+  float: left;
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
+
+#like_stats_page .given-likes {
+  margin-right: 100px;
+}
+
+#like_stats_page .scan-result td, #like_stats_page .scan-result th {
+  border: 1px solid #333;
+  padding: 5px 10px;
+}
+
+#like_stats_page .scan-result th {
+  text-align: center;
+  background-color: hsl(207, 100%, 86%);
+  padding: 12px 10px;
+}
+
+#like_stats_page .scan-result td.no {
+  font-weight: bold;
+  text-align: right;
+}
+
+#like_stats_page .scan-result td.handle {
+  width: 280px;
+}
+
+#like_stats_page .scan-result td.count {
+  padding: 5px 15px;
+}
+
+#like_stats_page .scan-result .avatar {
+  width: 24px;
+  border-radius: 14px;
+  vertical-align: middle;
+  margin-right: 2px;
+  padding: 2px;  
 }
 
 @media (prefers-color-scheme: dark) {
···
 
   #posting_stats_page .scan-result tr.total td {
     background-color: hsla(207, 90%, 25%, 0.4);
+  }
+
+  #like_stats_page .scan-result, #like_stats_page .scan-result td, #like_stats_page .scan-result th {
+    border-color: #888;
+  }
+
+  #like_stats_page .scan-result th {
+    background-color: hsl(207, 90%, 25%);
   }
 }

types.d.ts

···
 declare var isIncognito: boolean;
 declare var biohazardEnabled: boolean;
 declare var loginDialog: HTMLElement;
-declare var accountMenu: HTMLElement;
+declare var accountMenu: Menu;
 declare var avatarPreloader: IntersectionObserver;
 declare var threadPage: ThreadPage;
 declare var postingStatsPage: PostingStatsPage;
+declare var likeStatsPage: LikeStatsPage;
 
 type json = Record<string, any>;