async function updateUI() {
  const items = await chrome.readingList.query({});

  const table = document.getElementById(ITEMS_TABLE_ID);

  for (const item of items) {
    // Use existing row if possible, otherwise create a new one.
    const row =
      document.querySelector(`[data-url="${item.url}"]`) ||
      document.getElementById(TABLE_ITEM_TEMPLATE_ID).content.cloneNode(true)
        .children[0];

    updateRow(row, item);

    table.appendChild(row);
  }

  // Remove any rows that no longer exist
  table.querySelectorAll('tr').forEach((row, i) => {
    // Ignore header row
    if (i === 0) return;
    if (!items.find((i) => i.url === row.getAttribute('data-url'))) {
      row.remove();
    }
  });
}
Updates the UI with the current reading list items.