Custom Column injection

[BadHumanX]

i need help i need to insert a new column. i have been trying using chat gpt ( more than 6 hours ) but it is not
i just want new column when you have open a playlist . the column needs to be filled with Hello world (as a test)

my vision is

1. Creating 3 columns
   The first column will be for checking if the song is loved on Spotify, if yes, then 💚 icon
   ii. 2nd column will be to check if the song is loved on Last.fm if yes then ❤️
   iii. The 3rd column is if it is loved on both platforms, then 💞
   if it is not loved anywhere then 🤍

but i want only the 💞 to be toggleable. is it possible to add animation? when the user clicks the love button, to has an animation like that of Tumblr when you click the love, it kind of fly and spirals up and fades

when the user open a playlist, there will be a button called "Lastfy" clicking it will provide 2 options of 1 is labeled "setting" when clicking will present a window which will prompt the user to put the lastf User name. this user name and their credential are saved local and separate on it own file for privacy reason
2 option willb be sorting which will be

1. sort by Playcount (using 1st column below (highest to Lowest)
2. Sort by Spotify Like (using 2nd column below )(highest to Lowest)
3. sort by LastFm loved (using 3rd Coloum below) (highest to Lowest)
4. sort by Lastfy (using 4th column below)(highest to Lowest)

Once the user has chosen the sorting he want the same playlist will be re arranged using that sorting he chooses.

the test "helo world " column
`
(function HelloColumnExtension() {
console.log("✅ HelloColumn.js is running!");

if (!Spicetify?.Platform || !Spicetify?.CosmosAsync) {
console.warn("Spicetify not ready yet. Retrying...");
setTimeout(HelloColumnExtension, 3000);
return;
}

console.log("✅ Spicetify is ready!");

const observer = new MutationObserver(() => {
console.log("🔁 Mutation detected — checking for table...");

const headerRow = document.querySelector("thead tr");
const trackRows = document.querySelectorAll(".main-trackList-trackListRow");

if (!headerRow || !trackRows.length) {
  console.log("⏳ Table not found yet.");
  return;
}

if (document.querySelector(".hello-world-header")) {
  console.log("👀 Hello column already exists.");
  return;
}

// Find Date Added column
const headers = [...headerRow.children];
const dateHeader = headers.find(th => th.innerText.includes("Date added"));
if (!dateHeader) {
  console.log("❌ Couldn't find 'Date added' header.");
  return;
}

const helloHeader = document.createElement("th");
helloHeader.innerText = "Hello World";
helloHeader.classList.add("hello-world-header");
dateHeader.after(helloHeader);

trackRows.forEach(row => {
  const cells = [...row.querySelectorAll("td")];
  const dateCell = cells.find(cell => cell.innerText.includes("ago") || /\d{4}/.test(cell.innerText));
  const helloCell = document.createElement("td");
  helloCell.innerText = "Hello World";
  helloCell.classList.add("hello-world-cell");

  if (dateCell) {
    dateCell.after(helloCell);
  } else {
    row.appendChild(helloCell);
  }
});

console.log("✅ Hello column injected!");

});

observer.observe(document.body, { childList: true, subtree: true });

console.log("👀 MutationObserver set.");
})();

`

[hoeci]

Sorry, I'm afraid I can't help you with this.