script to move out of stock ko-fi items to the end of the page

kofi-cleaner.js

// ==UserScript==
// @name        ko-fi cleaner
// @namespace   Violentmonkey Scripts
// @match       https://ko-fi.com/*/shop
// @grant       none
// @version     1.0
// @author      paulbgd
// @description 8/29/2023, 6:18:50 PM
// ==/UserScript==

// if you would like to completely hide sold out items instead of moving them to the bottom, set this as true
const HIDE_SOLD_OUT_ITEMS = false


const container = getContainer()
const observer = new MutationObserver(onMutation)

observer.observe(container, {childList: true, subtree: true})


// children we're waiting to add until we've gotten to the bottom of the list
const childrenToReadd = []

function onMutation() {
  try {
    observer.disconnect() // disconnect so we can modify without causing a loop

    const children = container.querySelectorAll('#shop-card')
    const childrenToMove = []

    for (const child of children) {
      const cost = child.querySelector('.kfds-c-price-tag-wrapper-over-image')

      if (cost.innerText.includes('Sold Out')) {
        childrenToMove.push(child)
      }
    }

    for (const child of childrenToMove) {
      container.removeChild(child)
    }

    // hide nodes used to make the width equal
    for (const child of container.querySelectorAll('div')) {
      if (child.childNodes.length === 0) {
        container.removeChild(child)
      }
    }

    if (HIDE_SOLD_OUT_ITEMS) {
      return
    }

    childrenToReadd.push(...childrenToMove)

    if (shopApp.endOfShop) {
      for (const child of childrenToReadd) {
        container.appendChild(child)
      }

      childrenToMove.length = 0
    }
  } finally {
    observer.observe(container, {childList: true, subtree: true})
  }
}

function getContainer() {
  const divs = [...document.querySelectorAll('#shop-app > div')]

  return divs[divs.length - 1]
}