universal post hider ideas v2.js

//combines checking for show originals, no recommended, mute, postblock, and (disable gifs but I doubt anyone uses that setting lol)
//one post_props call per post; unified css


//your extension (example code obviously)

switch (this.preferences.hide_mode) {
	case "fancy":
		XKit.interface.react.post_hider.add("yourExtension", checkPost, getLabel, true);
		break;
	case "boring":
		XKit.interface.react.post_hider.add("yourExtension", checkPost, "hidden post", false);
		break;
	case "completely hidden":
		XKit.interface.react.post_hider.add("yourExtension", checkPost, "", false);
}

checkPostFunction = function($post, post_props) {
	return post_props.liked; //or whatever
}

getLabel = function($post, post_props) {
	return "liked post by" + post_props.blogname; //or whatever
}


//other possible constructions
//
//    add(extensionId, func, useUnhideButton)
//    func returns true to complete hide, a label string to label hide, or false to not hide
//
//    add(extensionId, func, {complete_hide_boolean, button})
//    func returns a label string (or any truthy value) to hide, false to not hide
//     
//    etc.


//xkit_patches.js      

XKit.interface.react.post_hider = {
	running: false,
	callbacks: {},

	init: function () {
		this.running = true;
		XKit.tools.add_css(`
			.hidden_label ~ * {
				display: none;
			}
			/* etc */
		`);

		//add a post listener to call check()

		$(document).on('click', '.show_button', blahblah.unhide_post);
	},

	add: function (extensionId, checkPostFunction, label, useButton) {
		if (!this.running) { this.init() };

		if (label.typeOf() == "function") {
			//disambiguate this to labelFunction/labelText
		}; 

		//try/catch this
		XKit.post_listener.callbacks[extensionId].push({checkPostFunction:checkPostFunction, labelFunction = labelFunction, labelText:labelText, useButton: useButton});
	},

	check: function() {
		$('[data-id]:not(.hide-posts-done)').each(async function() {
			$post = $(this).addClass("hide-posts-done");
			post_props = /* etc */;
			blahblah.callbacks.each(async function() {
				if (!this.checkFunction($post, post_props)) { return };

				if (this.labelText.exists) {
					if (this.labelText === "") {
						$post.addClass("totallyHidden");
					} else {
						const button = this.useButton ? "<button class='show_button'>show post</button>" : "";
						const html = `<div class='hidden_label'>${this.labelText}${button}</div>`
						$post.prepend(html);
					}
				} else {
					labelText = this.labelFunction($post, post_props);
					const button = this.useButton ? "<button class='show_button'>show post</button>" : "";
					const html = `<div class='hidden_label'>${labelText}${button}</div>`
					$post.prepend(html);
				}
			});
		});
	},

	unhide_post: function(e) {
		const $button = $(e.target);
		//unhide the post
	},
}