Script that adds "sort by" options to Zulip's "add streams" widget

sort-streams.js

window.sortBy = function(key, ascending) {
  const streams = Array.from(document.querySelectorAll(".stream-row")).map(
    r => ({
      row: r,
      name: r.querySelector(".stream-name").innerText,
      description: r.querySelector(".description").innerText,
      messagesPerWeek: parseInt(
        r.querySelector(".stream-message-count-text").innerText
      ),
      subscribers: parseInt(
        r.querySelector(".subscriber-count-text").innerText
      ),
      subscribed: !!r.querySelector(".sub_unsub_button.checked")
    })
  );
  streams
    .sort((x, y) => {
      if (ascending) {
        return x[key] < y[key] ? -1 : 1;
      } else {
        return y[key] < x[key] ? -1 : 1;
      }
    })
    .forEach(r => {
      const p = r.row.parentNode;
      p.removeChild(r.row);
      p.appendChild(r.row);
    });
}

const htmlToInject = `<style>.search-container .ind-tab {width: auto !important;}</style>
<div class="tab-switcher"><div class="ind-tab first" onClick="sortBy('name', true)">Name</div><div class="ind-tab" onClick="sortBy('subscribers')"><i class="fa fa-user-o" aria-hidden="true"></i></div><div class="ind-tab last" onClick="sortBy('messagesPerWeek')"><i class="fa fa-bar-chart-o" aria-hidden="true"></i></div></div>`

document.querySelector(".search-container .tab-switcher").insertAdjacentHTML('afterEnd', htmlToInject);