// ==UserScript==
// @name          VoidVerified
// @version       1.5.2
// @namespace     http://tampermonkey.net/
// @author        voidnyan
// @description   Social enhancements for AniList.
// @homepageURL   https://github.com/voidnyan/void-verified#voidverified
// @supportURL    https://github.com/voidnyan/void-verified/issues
// @grant         none
// @match         https://anilist.co/*
// @license MIT
// @downloadURL none
// ==/UserScript==

(function () {
	'use strict';

	const categories = {
		users: "users",
		paste: "paste",
		css: "css",
		misc: "misc",
		hidden: "hidden",
	};

	const defaultSettings = {
		copyColorFromProfile: {
			defaultValue: true,
			description: "Copy user color from their profile.",
			category: categories.users,
		},
		moveSubscribeButtons: {
			defaultValue: false,
			description:
				"Move activity subscribe button next to comments and likes.",
			category: categories.misc,
		},
		hideLikeCount: {
			defaultValue: false,
			description: "Hide activity and reply like counts.",
			category: categories.misc,
		},
		enabledForUsername: {
			defaultValue: true,
			description: "Display a verified sign next to usernames.",
			category: categories.users,
		},
		enabledForProfileName: {
			defaultValue: false,
			description: "Display a verified sign next to a profile name.",
			category: categories.users,
		},
		defaultSign: {
			defaultValue: "✔",
			description: "The default sign displayed next to a username.",
			category: categories.users,
		},
		highlightEnabled: {
			defaultValue: true,
			description: "Highlight user activity with a border.",
			category: categories.users,
		},
		highlightEnabledForReplies: {
			defaultValue: true,
			description: "Highlight replies with a border.",
			category: categories.users,
		},
		highlightSize: {
			defaultValue: "5px",
			description: "Width of the highlight border.",
			category: categories.users,
		},
		colorUserActivity: {
			defaultValue: false,
			description: "Color user activity links with user color.",
			category: categories.users,
		},
		colorUserReplies: {
			defaultValue: false,
			description: "Color user reply links with user color.",
			category: categories.users,
		},
		useDefaultHighlightColor: {
			defaultValue: false,
			description:
				"Use fallback highlight color when user color is not specified.",
			category: categories.users,
		},
		defaultHighlightColor: {
			defaultValue: "#FFFFFF",
			description: "Fallback highlight color.",
			category: categories.users,
		},
		globalCssEnabled: {
			defaultValue: false,
			description: "Enable custom global CSS.",
			category: categories.css,
		},
		globalCssAutoDisable: {
			defaultValue: true,
			description: "Disable global CSS when a profile has custom CSS.",
			category: categories.css,
		},
		profileCssEnabled: {
			defaultValue: false,
			description: "Load user's custom CSS when viewing their profile.",
			category: categories.css,
			authRequired: true,
		},
		activityCssEnabled: {
			defaultValue: false,
			description:
				"Load user's custom CSS when viewing their activity (direct link).",
			category: categories.css,
			authRequired: true,
		},
		onlyLoadCssFromVerifiedUser: {
			defaultValue: false,
			description: "Only load custom CSS from verified users.",
			category: categories.css,
		},
		quickAccessEnabled: {
			defaultValue: false,
			description: "Display quick access of users in home page.",
			category: categories.users,
		},
		quickAccessBadge: {
			defaultValue: false,
			description:
				"Display a badge on quick access when changes are detected on user's layout.",
			category: categories.users,
		},
		pasteEnabled: {
			defaultValue: false,
			description:
				"Automatically wrap pasted links and images with link and image tags.",
			category: categories.paste,
		},
		pasteWrapImagesWithLink: {
			defaultValue: false,
			description: "Wrap images with a link tag.",
			category: categories.paste,
		},
		// pasteRequireKeyPress: {
		// 	defaultValue: true,
		// 	description: "Require an additional key to be pressed while pasting.",
		// 	category: categories.paste,
		// },
		// pasteKeybind: {
		// 	defaultValue: "Shift",
		// 	description: "The key to be pressed while pasting.",
		// 	category: categories.paste,
		// },
		pasteImageWidth: {
			defaultValue: "420",
			description: "Width used when pasting images.",
			category: categories.paste,
		},
		pasteImagesToHostService: {
			defaultValue: false,
			description:
				"Upload image from the clipboard to image host (configure below).",
			category: categories.paste,
		},
	};

	class ColorFunctions {
		static hexToRgb(hex) {
			const r = parseInt(hex.slice(1, 3), 16);
			const g = parseInt(hex.slice(3, 5), 16);
			const b = parseInt(hex.slice(5, 7), 16);

			return `${r}, ${g}, ${b}`;
		}

		static rgbToHex(rgb) {
			const [r, g, b] = rgb.split(",");
			const hex = this.generateHex(r, g, b);
			return hex;
		}

		static generateHex(r, g, b) {
			return (
				"#" +
				[r, g, b]
					.map((x) => {
						const hex = Number(x).toString(16);
						return hex.length === 1 ? "0" + hex : hex;
					})
					.join("")
			);
		}

		static defaultColors = [
			"gray",
			"blue",
			"purple",
			"green",
			"orange",
			"red",
			"pink",
		];

		static defaultColorRgb = {
			gray: "103, 123, 148",
			blue: "61, 180, 242",
			purple: "192, 99, 255",
			green: "76, 202, 81",
			orange: "239, 136, 26",
			red: "225, 51, 51",
			pink: "252, 157, 214",
		};

		static handleAnilistColor(color) {
			if (this.defaultColors.includes(color)) {
				return this.defaultColorRgb[color];
			}

			return this.hexToRgb(color);
		}
	}

	class AnilistAPI {
		apiQueryTimeoutInMinutes = 15;
		apiQueryTimeout = this.apiQueryTimeoutInMinutes * 60 * 1000;

		settings;
		#url = "https://graphql.anilist.co";
		constructor(settings) {
			this.settings = settings;
		}

		async getActivityCss(activityId) {
			const query = `query ($activityId: Int) {
            Activity(id: $activityId) {
                ... on ListActivity {
                    user {
                        name
                        about
                        options {
                            profileColor
                        }
                }}
                ... on TextActivity {
                    user {
                        name
                        about
                        options {
                            profileColor
                        }
                    }
                }
                ... on MessageActivity {
                    recipient {
                        name
                        about
                        options {
                            profileColor
                        }
                    }
                }
            }
        }`;

			const variables = { activityId };
			const options = this.#getQueryOptions(query, variables);
			try {
				const response = await fetch(this.#url, options);
				const result = await response.json();
				return result;
			} catch (error) {
				return await error.json();
			}
		}

		async getUserAbout(username) {
			const query = `query ($username: String) {
            User(name: $username) {
                about
            }
        }`;

			const variables = { username };
			const options = this.#getQueryOptions(query, variables);
			try {
				const response = await fetch(this.#url, options);
				const result = await response.json();
				return result.data;
			} catch (error) {
				return await error.json();
			}
		}

		async saveUserAbout(about) {
			const query = `mutation ($about: String) {
            UpdateUser(about: $about) {
                about
            }
        }`;
			const variables = { about };
			const options = this.#getMutationOptions(query, variables);
			try {
				const response = await fetch(this.#url, options);
				const result = await response.json();
				return result.data;
			} catch (error) {
				return await error.json();
			}
		}

		queryUserData() {
			let stopQueries = false;

			for (const user of this.#getUsersToQuery()) {
				if (stopQueries) {
					break;
				}

				stopQueries = this.#queryUser(user);
			}
		}

		#queryUser(user) {
			const variables = { username: user.username };
			const query = `query ($username: String) {
            User(name: $username) {
                name
                avatar {
                    large
                }
                bannerImage
                options {
                    profileColor
                }
            }
        }
    `;

			const options = this.#getQueryOptions(query, variables);

			let stopQueries = false;
			fetch(this.#url, options)
				.then(this.#handleResponse)
				.then((data) => {
					const resultUser = data.User;
					this.settings.updateUserFromApi(user, resultUser);
				})
				.catch((err) => {
					console.error(err);
					stopQueries = true;
				});

			return stopQueries;
		}

		#getQueryOptions(query, variables) {
			return {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
					Accept: "application/json",
				},
				body: JSON.stringify({
					query,
					variables,
				}),
			};
		}

		#getMutationOptions(query, variables) {
			if (!this.settings.auth.token) {
				console.error("VoidVerified is not authenticated.");
				return;
			}
			let queryOptions = this.#getQueryOptions(query, variables);
			queryOptions.headers.Authorization = `Bearer ${this.settings.auth.token}`;
			return queryOptions;
		}

		#getUsersToQuery() {
			if (
				this.settings.options.copyColorFromProfile.getValue() ||
				this.settings.options.quickAccessEnabled.getValue()
			) {
				return this.#filterUsersByLastFetch();
			}

			const users = this.settings.verifiedUsers.filter(
				(user) => user.copyColorFromProfile || user.quickAccessEnabled
			);

			return this.#filterUsersByLastFetch(users);
		}

		#handleResponse(response) {
			return response.json().then((json) => {
				return response.ok ? json.data : Promise.reject(json);
			});
		}

		#filterUsersByLastFetch(users = null) {
			const currentDate = new Date();
			if (users) {
				return users.filter(
					(user) =>
						!user.lastFetch ||
						currentDate - new Date(user.lastFetch) >
							this.apiQueryTimeout
				);
			}
			return this.settings.verifiedUsers.filter(
				(user) =>
					!user.lastFetch ||
					currentDate - new Date(user.lastFetch) > this.apiQueryTimeout
			);
		}
	}

	class Option {
		value;
		defaultValue;
		description;
		category;
		authRequired;
		constructor(option) {
			this.defaultValue = option.defaultValue;
			this.description = option.description;
			this.category = option.category;
			this.authRequired = option.authRequired;
		}

		getValue() {
			if (this.value === "") {
				return this.defaultValue;
			}
			return this.value ?? this.defaultValue;
		}
	}

	class Settings {
		localStorageUsers = "void-verified-users";
		localStorageSettings = "void-verified-settings";
		localStorageAuth = "void-verified-auth";
		version = GM_info.script.version;
		auth = null;
		anilistUser;

		verifiedUsers = [];

		options = {};

		constructor() {
			this.verifiedUsers =
				JSON.parse(localStorage.getItem(this.localStorageUsers)) ?? [];

			const settingsInLocalStorage =
				JSON.parse(localStorage.getItem(this.localStorageSettings)) ?? {};

			for (const [key, value] of Object.entries(defaultSettings)) {
				this.options[key] = new Option(value);
			}

			for (const [key, value] of Object.entries(settingsInLocalStorage)) {
				if (!this.options[key]) {
					continue;
				}
				this.options[key].value = value.value;
			}

			this.auth =
				JSON.parse(localStorage.getItem(this.localStorageAuth)) ?? null;

			const auth = JSON.parse(localStorage.getItem("auth"));
			this.anilistUser = auth?.name;
		}

		verifyUser(username) {
			if (
				this.verifiedUsers.find(
					(user) => user.username.toLowerCase() === username.toLowerCase()
				)
			) {
				return;
			}

			this.verifiedUsers.push({ username });
			localStorage.setItem(
				this.localStorageUsers,
				JSON.stringify(this.verifiedUsers)
			);

			const anilistAPI = new AnilistAPI(this);
			anilistAPI.queryUserData();
		}

		getUser(username) {
			return this.verifiedUsers.find((user) => user.username === username);
		}

		isVerified(username) {
			return this.verifiedUsers.some((user) => user.username === username);
		}

		updateUserOption(username, key, value) {
			this.verifiedUsers = this.verifiedUsers.map((u) =>
				u.username === username
					? {
							...u,
							[key]: value,
					  }
					: u
			);
			localStorage.setItem(
				this.localStorageUsers,
				JSON.stringify(this.verifiedUsers)
			);
		}

		updateUserFromApi(user, apiUser) {
			const newUser = this.#mapApiUser(user, apiUser);
			this.verifiedUsers = this.verifiedUsers.map((u) =>
				u.username.toLowerCase() === user.username.toLowerCase()
					? newUser
					: u
			);

			localStorage.setItem(
				this.localStorageUsers,
				JSON.stringify(this.verifiedUsers)
			);
		}

		#mapApiUser(user, apiUser) {
			let userObject = { ...user };

			userObject.color = ColorFunctions.handleAnilistColor(
				apiUser.options.profileColor
			);

			userObject.username = apiUser.name;
			userObject.avatar = apiUser.avatar.large;
			userObject.banner = apiUser.bannerImage;
			userObject.lastFetch = new Date();

			if (this.options.quickAccessBadge.getValue() || user.quickAccessBadge) {
				if (
					(user.avatar && user.avatar !== userObject.avatar) ||
					(user.color && user.color !== userObject.color) ||
					(user.banner && user.banner !== userObject.banner)
				) {
					userObject.quickAccessBadgeDisplay = true;
				}
			}

			return userObject;
		}

		saveAuthToken(tokenObject) {
			this.auth = tokenObject;
			localStorage.setItem(
				this.localStorageAuth,
				JSON.stringify(tokenObject)
			);
		}

		removeAuthToken() {
			this.auth = null;
			localStorage.removeItem(this.localStorageAuth);
		}

		removeUser(username) {
			this.verifiedUsers = this.verifiedUsers.filter(
				(user) => user.username !== username
			);
			localStorage.setItem(
				this.localStorageUsers,
				JSON.stringify(this.verifiedUsers)
			);
		}

		saveSettingToLocalStorage(key, value) {
			let localSettings = JSON.parse(
				localStorage.getItem(this.localStorageSettings)
			);

			this.options[key].value = value;

			if (localSettings === null) {
				const settings = {
					[key]: value,
				};
				localStorage.setItem(
					this.localStorageSettings,
					JSON.stringify(settings)
				);
				return;
			}

			localSettings[key] = { value };
			localStorage.setItem(
				this.localStorageSettings,
				JSON.stringify(localSettings)
			);
		}
	}

	class StyleHandler {
		settings;
		usernameStyles = "";
		highlightStyles = "";
		otherStyles = "";

		constructor(settings) {
			this.settings = settings;
		}

		refreshStyles() {
			this.createStyles();
			this.createStyleLink(this.usernameStyles, "username");
			this.createStyleLink(this.highlightStyles, "highlight");
			this.createStyleLink(this.otherStyles, "other");
		}

		createStyles() {
			this.usernameStyles = "";
			this.otherStyles = "";

			for (const user of this.settings.verifiedUsers) {
				if (
					this.settings.options.enabledForUsername.getValue() ||
					user.enabledForUsername
				) {
					this.createUsernameCSS(user);
				}
			}

			if (this.settings.options.moveSubscribeButtons.getValue()) {
				this.otherStyles += `
                .has-label::before {
                top: -30px !important;
                left: unset !important;
                right: -10px;
                }
    
                .has-label[label="Unsubscribe"],
                .has-label[label="Subscribe"] {
                font-size: 0.875em !important;
                }
    
                .has-label[label="Unsubscribe"] {
                color: rgba(var(--color-green),.8);
                }
                `;
			}

			this.createHighlightStyles();

			if (this.settings.options.hideLikeCount.getValue()) {
				this.otherStyles += `
                    .like-wrap .count {
                        display: none;
                    }
                `;
			}
		}

		createHighlightStyles() {
			this.highlightStyles = "";
			for (const user of this.settings.verifiedUsers) {
				if (
					this.settings.options.highlightEnabled.getValue() ||
					user.highlightEnabled
				) {
					this.createHighlightCSS(
						user,
						`div.wrap:has( div.header > a.name[href*="/${user.username}/" i] )`
					);
					this.createHighlightCSS(
						user,
						`div.wrap:has( div.details > a.name[href*="/${user.username}/" i] )`
					);
				}

				if (
					this.settings.options.highlightEnabledForReplies.getValue() ||
					user.highlightEnabledForReplies
				) {
					this.createHighlightCSS(
						user,
						`div.reply:has( a.name[href*="/${user.username}/" i] )`
					);
				}

				this.#createActivityCss(user);
			}

			this.disableHighlightOnSmallCards();
		}

		#createActivityCss(user) {
			const colorUserActivity =
				this.settings.options.colorUserActivity.getValue() ??
				user.colorUserActivity;
			const colorUserReplies =
				this.settings.options.colorUserReplies.getValue() ??
				user.colorUserReplies;

			if (colorUserActivity) {
				this.highlightStyles += `
                div.wrap:has( div.header > a.name[href*="/${
					user.username
				}/"]) a,
                div.wrap:has( div.details > a.name[href*="/${
					user.username
				}/"]) a
                {
                    color: ${this.getUserColor(user)};
                }
            `;
			}
			if (colorUserReplies) {
				this.highlightStyles += `
                .reply:has(a.name[href*="/${user.username}/"]) a,
                .reply:has(a.name[href*="/${
					user.username
				}/"]) .markdown-spoiler::before
                {
                    color: ${this.getUserColor(user)};
                }
            `;
			}
		}

		createUsernameCSS(user) {
			this.usernameStyles += `
            a.name[href*="/${user.username}/" i]::after {
                content: "${
					this.stringIsEmpty(user.sign) ??
					this.settings.options.defaultSign.getValue()
				}";
                color: ${this.getUserColor(user) ?? "rgb(var(--color-blue))"}
            }
        `;
		}

		createHighlightCSS(user, selector) {
			this.highlightStyles += `
                ${selector} {
                    margin-right: -${this.settings.options.highlightSize.getValue()};
                    border-right: ${this.settings.options.highlightSize.getValue()} solid ${
			this.getUserColor(user) ?? this.getDefaultHighlightColor()
		};
                    border-radius: 5px;
                }
                `;
		}

		disableHighlightOnSmallCards() {
			this.highlightStyles += `
                div.wrap:has(div.small) {
                margin-right: 0px !important;
                border-right: 0px solid black !important;
                }
                `;
		}

		refreshHomePage() {
			if (!this.settings.options.highlightEnabled.getValue()) {
				return;
			}
			this.createHighlightStyles();
			this.createStyleLink(this.highlightStyles, "highlight");
		}

		clearStyles(id) {
			const styles = document.getElementById(`void-verified-${id}-styles`);
			styles?.remove();
		}

		verifyProfile() {
			if (!this.settings.options.enabledForProfileName.getValue()) {
				return;
			}

			const username =
				window.location.pathname.match(/^\/user\/([^/]*)\/?/)[1];

			const user = this.settings.verifiedUsers.find(
				(u) => u.username.toLowerCase() === username.toLowerCase()
			);

			if (!user) {
				this.clearStyles("profile");
				return;
			}

			const profileStyle = `
                    .name-wrapper h1.name::after {
                    content: "${
						this.stringIsEmpty(user.sign) ??
						this.settings.options.defaultSign.getValue()
					}"
                    }
                `;
			this.createStyleLink(profileStyle, "profile");
		}

		getStyleLink(id) {
			return document.getElementById(`void-verified-${id}-styles`);
		}

		copyUserColor() {
			const usernameHeader = document.querySelector("h1.name");
			const username = usernameHeader.innerHTML.trim();
			const user = this.settings.verifiedUsers.find(
				(u) => u.username === username
			);

			if (!user) {
				return;
			}

			if (
				!(
					user.copyColorFromProfile ||
					this.settings.options.copyColorFromProfile.getValue()
				)
			) {
				return;
			}

			const color =
				getComputedStyle(usernameHeader).getPropertyValue("--color-blue");

			this.settings.updateUserOption(user.username, "color", color);
		}

		getUserColor(user) {
			return (
				user.colorOverride ??
				(user.color &&
				(user.copyColorFromProfile ||
					this.settings.options.copyColorFromProfile.getValue())
					? `rgb(${user.color})`
					: undefined)
			);
		}

		getDefaultHighlightColor() {
			if (this.settings.options.useDefaultHighlightColor.getValue()) {
				return this.settings.options.defaultHighlightColor.getValue();
			}
			return "rgb(var(--color-blue))";
		}

		createStyleLink(styles, id) {
			const oldLink = document.getElementById(`void-verified-${id}-styles`);
			const link = document.createElement("link");
			link.setAttribute("id", `void-verified-${id}-styles`);
			link.setAttribute("rel", "stylesheet");
			link.setAttribute("type", "text/css");
			link.setAttribute(
				"href",
				"data:text/css;charset=UTF-8," + encodeURIComponent(styles)
			);
			document.head?.append(link);
			oldLink?.remove();
			return link;
		}

		stringIsEmpty(string) {
			if (!string || string.length === 0) {
				return undefined;
			}
			return string;
		}
	}

	class GlobalCSS {
		settings;
		styleHandler;

		styleId = "global-css";
		isCleared = false;

		cssInLocalStorage = "void-verified-global-css";
		constructor(settings) {
			this.settings = settings;
			this.styleHandler = new StyleHandler(settings);

			this.css = localStorage.getItem(this.cssInLocalStorage) ?? "";
		}

		createCss() {
			if (!this.settings.options.globalCssEnabled.getValue()) {
				this.styleHandler.clearStyles(this.styleId);
				return;
			}

			if (!this.shouldRender()) {
				return;
			}

			this.isCleared = false;
			this.styleHandler.createStyleLink(this.css, this.styleId);
		}

		updateCss(css) {
			this.css = css;
			this.createCss();
			localStorage.setItem(this.cssInLocalStorage, css);
		}

		clearCssForProfile() {
			if (this.isCleared) {
				return;
			}
			if (!this.shouldRender()) {
				this.styleHandler.clearStyles(this.styleId);
				this.isCleared = true;
			}
		}

		shouldRender() {
			if (window.location.pathname.startsWith("/settings")) {
				return false;
			}

			if (!this.settings.options.globalCssAutoDisable.getValue()) {
				return true;
			}

			if (
				!window.location.pathname.startsWith("/user/") &&
				!window.location.pathname.startsWith("/activity/")
			) {
				return true;
			}

			const profileCustomCss = document.getElementById(
				"customCSS-automail-styles"
			);

			const styleHandler = new StyleHandler(this.settings);
			const voidActivityStyles = styleHandler.getStyleLink("activity-css");
			const voidUserStyles = styleHandler.getStyleLink("user-css");

			if (voidActivityStyles || voidUserStyles) {
				return false;
			}

			if (!profileCustomCss) {
				return true;
			}

			const shouldRender = profileCustomCss.innerHTML.trim().length === 0;
			return shouldRender;
		}
	}

	class ActivityHandler {
		settings;
		constructor(settings) {
			this.settings = settings;
		}

		moveAndDisplaySubscribeButton() {
			if (!this.settings.options.moveSubscribeButtons.getValue()) {
				return;
			}

			const subscribeButtons = document.querySelectorAll(
				"span[label='Unsubscribe'], span[label='Subscribe']"
			);
			for (const subscribeButton of subscribeButtons) {
				if (subscribeButton.parentNode.classList.contains("actions")) {
					continue;
				}

				const container = subscribeButton.parentNode.parentNode;
				const actions = container.querySelector(".actions");
				actions.append(subscribeButton);
			}
		}
	}

	const imageHosts = {
		imgbb: "imgbb",
	};

	const imageHostConfiguration = {
		selectedHost: imageHosts.imgbb,
		configurations: {
			imgbb: {
				name: "imgbb",
				apiKey: "",
			},
		},
	};

	class ImageHostService {
		#configuration;
		#localStorage = "void-verified-image-host-config";
		constructor() {
			const config = JSON.parse(localStorage.getItem(this.#localStorage));
			if (!config) {
				localStorage.setItem(
					this.#localStorage,
					JSON.stringify(imageHostConfiguration)
				);
			}
			this.#configuration = config ?? imageHostConfiguration;
		}

		getImageHostConfiguration(host) {
			return this.#configuration.configurations[host];
		}

		getSelectedHost() {
			return this.#configuration.selectedHost;
		}

		setSelectedHost(host) {
			this.#configuration.selectedHost = host;
			localStorage.setItem(
				this.#localStorage,
				JSON.stringify(this.#configuration)
			);
		}

		setImageHostConfiguration(host, config) {
			this.#configuration.configurations[host] = config;
			localStorage.setItem(
				this.#localStorage,
				JSON.stringify(this.#configuration)
			);
		}
	}

	class ImageHostBase {
		conventToBase64(image) {
			return new Promise(function (resolve, reject) {
				var reader = new FileReader();
				reader.onloadend = function (e) {
					resolve({
						fileName: this.name,
						result: e.target.result,
						error: e.target.error,
					});
				};
				reader.readAsDataURL(image);
			});
		}
	}

	class ImgbbAPI extends ImageHostBase {
		#url = "https://api.imgbb.com/1/upload";
		#configuration;
		constructor(configuration) {
			super();
			this.#configuration = configuration;
		}

		async uploadImage(image) {
			const file = await this.conventToBase64(image);
			if (!file.result) {
				return;
			}

			if (!this.#configuration.apiKey) {
				return;
			}

			const base64 = file.result.split("base64,")[1];

			const settings = {
				method: "POST",
				headers: {
					Accept: "application/json",
					"Content-Type": "application/x-www-form-urlencoded",
				},
				body:
					"image=" +
					encodeURIComponent(base64) +
					"&name=" +
					image.name.split(".")[0],
			};

			try {
				const response = await fetch(
					`${this.#url}?key=${this.#configuration.apiKey}`,
					settings
				);
				const data = await response.json();
				return data;
			} catch (error) {
				console.error(error);
				return error;
			}
		}

		renderSettings() {
			const container = document.createElement("div");
			const apiKeyInput = document.createElement("input");
			apiKeyInput.setAttribute("type", "text");

			const label = document.createElement("label");
			label.append("API key");
			label.setAttribute("class", "void-api-label");
			container.append(label);

			apiKeyInput.setAttribute("value", this.#configuration.apiKey);
			apiKeyInput.addEventListener("change", (event) =>
				this.#updateApiKey(event, this.#configuration)
			);
			apiKeyInput.setAttribute("class", "void-api-key");
			container.append(apiKeyInput);

			const note = document.createElement("div");
			note.append("You need to get the API key from the following link: ");

			note.setAttribute("class", "void-notice");

			const apiKeyLink = document.createElement("a");
			apiKeyLink.setAttribute("href", "https://api.imgbb.com/");
			apiKeyLink.append("api.imgbb.com");
			apiKeyLink.setAttribute("target", "_blank");
			note.append(apiKeyLink);

			container.append(note);

			return container;
		}

		#updateApiKey(event, configuration) {
			const apiKey = event.target.value;
			const config = {
				...configuration,
				apiKey,
			};
			new ImageHostService().setImageHostConfiguration(config.name, config);
		}
	}

	class ImageApiFactory {
		getImageHostInstance() {
			const imageHostService = new ImageHostService();
			switch (imageHostService.getSelectedHost()) {
				case imageHosts.imgbb:
					return new ImgbbAPI(
						imageHostService.getImageHostConfiguration(imageHosts.imgbb)
					);
			}
		}
	}

	class DOM {
		static create(element, classes = null, children = null) {
			const el = document.createElement(element);
			if (classes !== null) {
				for (const className of classes?.split(" ")) {
					if (className.startsWith("#")) {
						el.setAttribute("id", `void-${className.slice(1)}`);
						continue;
					}
					el.classList.add(`void-${className}`);
				}
			}

			if (children) {
				try {
					el.append(...children);
				} catch {
					el.append(children);
				}
			}

			return el;
		}

		static getOrCreate(element, classes) {
			const id = classes
				.split(" ")
				.find((className) => className.startsWith("#"));
			return this.get(id) ?? this.create(element, classes);
		}

		static get(selector) {
			return document.querySelector(selector);
		}

		static getAll(selector) {
			return document.querySelectorAll(selector);
		}
	}

	class SettingsUserInterface {
		settings;
		styleHandler;
		globalCSS;
		userCSS;
		AnilistBlue = "120, 180, 255";
		#activeCategory = "all";

		constructor(settings, styleHandler, globalCSS, userCSS) {
			this.settings = settings;
			this.styleHandler = styleHandler;
			this.globalCSS = globalCSS;
			this.userCSS = userCSS;
		}

		renderSettingsUi() {
			this.#checkAuthFromUrl();
			const container = DOM.get(".settings.container > .content");
			const settingsContainer = DOM.create(
				"div",
				"#verified-settings settings"
			);
			container.append(settingsContainer);

			this.renderSettingsUiContent();
		}

		renderSettingsUiContent() {
			const settingsContainer = DOM.get("#void-verified-settings");
			const innerContainer = DOM.create("div");
			this.#renderSettingsHeader(innerContainer);

			this.#renderCategories(innerContainer);
			this.#renderOptions(innerContainer);
			this.#renderUserTable(innerContainer);
			if (this.settings.options.globalCssEnabled.getValue()) {
				this.#renderCustomCssEditor(innerContainer, this.globalCSS);
			}
			if (
				this.settings.auth?.token &&
				(this.settings.options.profileCssEnabled.getValue() ||
					this.settings.options.activityCssEnabled.getValue())
			) {
				this.#renderCustomCssEditor(innerContainer, this.userCSS);
			}

			this.#renderImageHostSettings(innerContainer);

			this.#creatAuthenticationSection(innerContainer);

			settingsContainer.replaceChildren(innerContainer);
		}

		#renderOptions(settingsContainer) {
			const settingsListContainer = DOM.create("div", "settings-list");
			for (const [key, setting] of Object.entries(this.settings.options)) {
				if (
					setting.category !== this.#activeCategory &&
					this.#activeCategory !== "all"
				) {
					continue;
				}
				this.#renderSetting(setting, settingsListContainer, key);
			}

			settingsContainer.append(settingsListContainer);
		}

		removeSettingsUi() {
			const settings = document.querySelector("#void-verified-settings");
			settings?.remove();
		}

		#renderSettingsHeader(settingsContainer) {
			const headerContainer = DOM.create("div", "settings-header");
			const header = DOM.create("h1", null, "VoidVerified Settings");

			const versionInfo = DOM.create("p", null, [
				"Version: ",
				DOM.create("span", null, this.settings.version),
			]);

			headerContainer.append(header);
			headerContainer.append(versionInfo);
			settingsContainer.append(headerContainer);
		}

		#renderCategories(settingsContainer) {
			const nav = DOM.create("nav", "nav");
			const list = DOM.create("ol");

			list.append(this.#createNavBtn("all"));

			for (const category of Object.values(categories)) {
				list.append(this.#createNavBtn(category));
			}

			nav.append(list);
			settingsContainer.append(nav);
		}

		#createNavBtn(category) {
			const className = category === this.#activeCategory ? "active" : null;
			const li = DOM.create("li", className, category);

			li.addEventListener("click", () => {
				this.#activeCategory = category;
				this.renderSettingsUiContent();
			});

			return li;
		}

		#renderUserTable(settingsContainer) {
			const tableContainer = DOM.create("div", "table #verified-user-table");

			tableContainer.style = `
            margin-top: 25px;
        `;

			const table = DOM.create("table");
			const head = DOM.create("thead");
			const headrow = DOM.create("tr", null, [
				DOM.create("th", null, "Username"),
				DOM.create("th", null, "Sign"),
				DOM.create("th", null, "Color"),
				DOM.create("th", null, "Other"),
			]);

			head.append(headrow);

			const body = DOM.create("tbody");

			for (const user of this.settings.verifiedUsers) {
				body.append(this.#createUserRow(user));
			}

			table.append(head);
			table.append(body);
			tableContainer.append(table);

			const inputForm = DOM.create("form", null, null);

			inputForm.addEventListener("submit", (event) => {
				this.#handleVerifyUserForm(event, this.settings);
			});

			inputForm.append(DOM.create("label", null, "Add user"));
			inputForm.append(DOM.create("input", "#verified-add-user"));
			tableContainer.append(inputForm);

			settingsContainer.append(tableContainer);
		}

		#createUserRow(user) {
			const row = DOM.create("tr");
			const userLink = DOM.create("a", null, user.username);
			userLink.setAttribute(
				"href",
				`https://anilist.co/user/${user.username}/`
			);
			userLink.setAttribute("target", "_blank");
			row.append(DOM.create("td", null, userLink));

			const signInput = DOM.create("input");
			signInput.setAttribute("type", "text");
			signInput.value = user.sign ?? "";
			signInput.addEventListener("input", (event) =>
				this.#updateUserOption(user.username, "sign", event.target.value)
			);
			const signCell = DOM.create("td", null, signInput);
			signCell.append(
				this.#createUserCheckbox(
					user.enabledForUsername,
					user.username,
					"enabledForUsername",
					this.settings.options.enabledForUsername.getValue()
				)
			);

			row.append(DOM.create("th", null, signCell));

			const colorInputContainer = DOM.create("div");

			const colorInput = DOM.create("input");
			colorInput.setAttribute("type", "color");
			colorInput.value = this.#getUserColorPickerColor(user);
			colorInput.addEventListener(
				"change",
				(event) => this.#handleUserColorChange(event, user.username),
				false
			);

			colorInputContainer.append(colorInput);

			const resetColorBtn = DOM.create("button", null, "🔄");
			resetColorBtn.addEventListener("click", () =>
				this.#handleUserColorReset(user.username)
			);

			colorInputContainer.append(resetColorBtn);

			colorInputContainer.append(
				this.#createUserCheckbox(
					user.copyColorFromProfile,
					user.username,
					"copyColorFromProfile",
					this.settings.options.copyColorFromProfile.getValue()
				)
			);

			colorInputContainer.append(
				this.#createUserCheckbox(
					user.highlightEnabled,
					user.username,
					"highlightEnabled",
					this.settings.options.highlightEnabled.getValue()
				)
			);

			colorInputContainer.append(
				this.#createUserCheckbox(
					user.highlightEnabledForReplies,
					user.username,
					"highlightEnabledForReplies",
					this.settings.options.highlightEnabledForReplies.getValue()
				)
			);

			colorInputContainer.append(
				this.#createUserCheckbox(
					user.colorUserActivity,
					user.username,
					"colorUserActivity",
					this.settings.options.colorUserActivity.getValue()
				)
			);

			colorInputContainer.append(
				this.#createUserCheckbox(
					user.colorUserReplies,
					user.username,
					"colorUserReplies",
					this.settings.options.colorUserReplies.getValue()
				)
			);

			const colorCell = DOM.create("td", null, colorInputContainer);
			row.append(colorCell);

			const quickAccessCheckbox = this.#createUserCheckbox(
				user.quickAccessEnabled,
				user.username,
				"quickAccessEnabled",
				this.settings.options.quickAccessEnabled.getValue()
			);

			const otherCell = DOM.create("td", null, quickAccessCheckbox);

			const cssEnabledCheckbox = this.#createUserCheckbox(
				user.onlyLoadCssFromVerifiedUser,
				user.username,
				"onlyLoadCssFromVerifiedUser",
				this.settings.options.onlyLoadCssFromVerifiedUser.getValue()
			);

			otherCell.append(cssEnabledCheckbox);

			row.append(otherCell);

			const deleteButton = DOM.create("button", null, "❌");
			deleteButton.addEventListener("click", () =>
				this.#removeUser(user.username)
			);
			row.append(DOM.create("th", null, deleteButton));
			return row;
		}

		#getUserColorPickerColor(user) {
			if (user.colorOverride) {
				return user.colorOverride;
			}

			if (
				user.color &&
				(user.copyColorFromProfile ||
					this.settings.options.copyColorFromProfile.getValue())
			) {
				return ColorFunctions.rgbToHex(user.color);
			}

			if (this.settings.options.useDefaultHighlightColor.getValue()) {
				return this.settings.options.defaultHighlightColor.getValue();
			}

			return ColorFunctions.rgbToHex(this.AnilistBlue);
		}

		#createUserCheckbox(isChecked, username, settingKey, disabled) {
			const checkbox = DOM.create("input");
			if (disabled) {
				checkbox.setAttribute("disabled", "");
			}

			checkbox.setAttribute("type", "checkbox");
			checkbox.checked = isChecked;
			checkbox.addEventListener("change", (event) => {
				this.#updateUserOption(username, settingKey, event.target.checked);
				this.renderSettingsUiContent();
			});

			checkbox.title = this.settings.options[settingKey].description;
			return checkbox;
		}

		#handleUserColorReset(username) {
			this.#updateUserOption(username, "colorOverride", undefined);
			this.renderSettingsUiContent();
		}

		#handleUserColorChange(event, username) {
			const color = event.target.value;
			this.#updateUserOption(username, "colorOverride", color);
		}

		#handleVerifyUserForm(event, settings) {
			event.preventDefault();

			const usernameInput = DOM.get("#void-verified-add-user");
			const username = usernameInput.value;
			settings.verifyUser(username);
			usernameInput.value = "";
			this.renderSettingsUiContent();
		}

		#updateUserOption(username, key, value) {
			this.settings.updateUserOption(username, key, value);
			this.styleHandler.refreshStyles();
		}

		#removeUser(username) {
			this.settings.removeUser(username);
			this.renderSettingsUiContent();
			this.styleHandler.refreshStyles();
		}

		#renderSetting(setting, settingsContainer, settingKey, disabled = false) {
			if (setting.category === categories.hidden) {
				return;
			}
			const value = setting.getValue();
			const type = typeof value;

			const container = DOM.create("div");
			const input = DOM.create("input");

			if (type === "boolean") {
				input.setAttribute("type", "checkbox");
			} else if (settingKey == "defaultHighlightColor") {
				input.setAttribute("type", "color");
			} else if (type === "string") {
				input.setAttribute("type", "text");
			}

			if (disabled) {
				input.setAttribute("disabled", "");
			}

			input.setAttribute("id", settingKey);

			if (settingKey === "pasteKeybind") {
				input.style.width = "80px";
				input.addEventListener("keydown", (event) =>
					this.#handleKeybind(event, settingKey, input)
				);
			} else {
				input.addEventListener("change", (event) =>
					this.#handleOption(event, settingKey, type)
				);
			}

			if (type === "boolean" && value) {
				input.setAttribute("checked", true);
			} else if (type === "string") {
				input.value = value;
			}

			container.append(input);

			const label = DOM.create("label", null, setting.description);
			label.setAttribute("for", settingKey);
			container.append(label);
			settingsContainer.append(container);
		}

		#handleKeybind(event, settingKey, input) {
			event.preventDefault();
			const keybind = event.key;
			this.settings.saveSettingToLocalStorage(settingKey, keybind);
			input.value = keybind;
		}

		#handleOption(event, settingKey, type) {
			const value =
				type === "boolean" ? event.target.checked : event.target.value;
			this.settings.saveSettingToLocalStorage(settingKey, value);
			this.styleHandler.refreshStyles();

			this.renderSettingsUiContent();
		}

		#renderCustomCssEditor(settingsContainer, cssHandler) {
			const cssName = cssHandler instanceof GlobalCSS ? "global" : "user";
			const container = DOM.create("div", "css-editor");
			const label = DOM.create("label", null, `Custom ${cssName} CSS`);
			label.setAttribute("for", `void-verified-${cssName}-css-editor`);
			container.append(label);

			const textarea = DOM.create(
				"textarea",
				`#verified-${cssName}-css-editor`
			);
			textarea.value = cssHandler.css;
			textarea.addEventListener("change", (event) => {
				this.#handleCustomCssEditor(event, cssHandler);
			});
			container.append(textarea);

			if (cssName === "global") {
				const notice = DOM.create("div");
				notice.innerText =
					"Please note that Custom CSS is disabled in the settings. \nIn the event that you accidentally disable rendering of critical parts of AniList, navigate to the settings by URL";
				notice.style.fontSize = "11px";
				container.append(notice);
			} else {
				const publishButton = DOM.create("button", null, "Publish");
				publishButton.classList.add("button");
				publishButton.addEventListener("click", (event) =>
					this.#handlePublishCss(event, cssHandler)
				);

				const previewButton = DOM.create(
					"button",
					null,
					cssHandler.preview ? "Disable Preview" : "Enable Preview"
				);
				previewButton.classList.add("button");
				previewButton.addEventListener("click", () => {
					cssHandler.togglePreview();
					previewButton.innerText = cssHandler.preview
						? "Disable Preview"
						: "Enable Preview";
				});

				const resetButton = DOM.create("button", null, "Reset");
				resetButton.classList.add("button");
				resetButton.addEventListener("click", () => {
					if (window.confirm("Your changes will be lost.")) {
						cssHandler.getAuthUserCss().then(() => {
							textarea.value = cssHandler.css;
						});
					}
				});

				container.append(publishButton);
				container.append(previewButton);
				container.append(resetButton);
			}

			settingsContainer.append(container);
		}

		#handlePublishCss(event, cssHandler) {
			const btn = event.target;
			btn.innerText = "Publishing...";
			cssHandler.publishUserCss().then(() => {
				btn.innerText = "Publish";
			});
		}

		#handleCustomCssEditor(event, cssHandler) {
			const value = event.target.value;
			cssHandler.updateCss(value);
		}

		#renderImageHostSettings(settingsContainer) {
			const container = DOM.create("div");
			container.append(DOM.create("label", null, "Image Host"));

			const imageHostService = new ImageHostService();
			const imageApiFactory = new ImageApiFactory();

			const select = DOM.create("select");
			for (const imageHost of Object.values(imageHosts)) {
				select.append(
					this.#createOption(
						imageHost,
						imageHost === imageHostService.getSelectedHost()
					)
				);
			}
			container.append(select);

			const hostSpecificSettings = DOM.create("div");
			const imageHostApi = imageApiFactory.getImageHostInstance();
			hostSpecificSettings.append(imageHostApi.renderSettings());

			container.append(hostSpecificSettings);
			settingsContainer.append(container);
		}

		#createOption(value, selected = false) {
			const option = DOM.create("option", null, value);
			if (selected) {
				option.setAttribute("selected", true);
			}
			option.setAttribute("value", value);
			return option;
		}

		#creatAuthenticationSection(settingsContainer) {
			const isAuthenticated =
				this.settings.auth !== null &&
				new Date(this.settings.auth?.expires) > new Date();

			const clientId = 15519;

			const authenticationContainer = DOM.create("div");

			const header = DOM.create("h3", null, "Authenticate VoidVerified");
			const description = DOM.create(
				"p",
				null,
				"Some features of VoidVerified might need your access token to work correctly or fully. Below is a list of features using your access token. If you do not wish to use any of these features, you do not need to authenticate. If revoking authentication, be sure to revoke VoidVerified from Anilist Apps as well."
			);

			const list = DOM.create("ul");
			for (const option of Object.values(this.settings.options).filter(
				(o) => o.authRequired
			)) {
				list.append(DOM.create("li", null, option.description));
			}

			const authLink = DOM.create("a", "button", "Authenticate VoidVerified");
			authLink.setAttribute(
				"href",
				`https://anilist.co/api/v2/oauth/authorize?client_id=${clientId}&response_type=token`
			);

			const removeAuthButton = DOM.create(
				"button",
				null,
				"Revoke auth token"
			);
			removeAuthButton.classList.add("button");
			removeAuthButton.addEventListener("click", () => {
				this.settings.removeAuthToken();
				this.renderSettingsUiContent();
			});

			authenticationContainer.append(header);
			authenticationContainer.append(description);
			authenticationContainer.append(list);
			authenticationContainer.append(
				!isAuthenticated ? authLink : removeAuthButton
			);

			settingsContainer.append(authenticationContainer);
		}

		#checkAuthFromUrl() {
			const hash = window.location.hash.substring(1);
			if (!hash) {
				return;
			}

			const [path, token, type, expiress] = hash.split("&");
			if (path !== "void_auth") {
				return;
			}

			const expiresDate = new Date(
				new Date().getTime() + Number(expiress.split("=")[1]) * 1000
			);

			this.settings.saveAuthToken({
				token: token.split("=")[1],
				expires: expiresDate,
			});

			window.history.replaceState(
				null,
				"",
				"https://anilist.co/settings/developer"
			);
		}
	}

	class QuickAccess {
		settings;
		#quickAccessId = "void-verified-quick-access";
		constructor(settings) {
			this.settings = settings;
		}

		renderQuickAccess() {
			if (this.#quickAccessRendered()) {
				return;
			}

			if (
				!this.settings.options.quickAccessEnabled.getValue() &&
				!this.settings.verifiedUsers.some((user) => user.quickAccessEnabled)
			) {
				return;
			}

			const quickAccessContainer = document.createElement("div");
			quickAccessContainer.setAttribute("class", "void-quick-access");
			quickAccessContainer.setAttribute("id", this.#quickAccessId);

			const sectionHeader = document.createElement("div");
			sectionHeader.setAttribute("class", "section-header");
			const title = document.createElement("h2");
			title.append("Quick Access");
			sectionHeader.append(title);

			quickAccessContainer.append(sectionHeader);

			const quickAccessBody = document.createElement("div");
			quickAccessBody.setAttribute("class", "void-quick-access-wrap");

			for (const user of this.#getQuickAccessUsers()) {
				quickAccessBody.append(this.#createQuickAccessLink(user));
			}

			quickAccessContainer.append(quickAccessBody);

			const section = document.querySelector(
				".container > .home > div:nth-child(2)"
			);
			section.insertBefore(quickAccessContainer, section.firstChild);
		}

		clearBadge() {
			const username =
				window.location.pathname.match(/^\/user\/([^/]*)\/?/)[1];
			this.settings.updateUserOption(
				username,
				"quickAccessBadgeDisplay",
				false
			);
		}

		#createQuickAccessLink(user) {
			const container = document.createElement("a");
			container.setAttribute("class", "void-quick-access-item");
			container.setAttribute(
				"href",
				`https://anilist.co/user/${user.username}/`
			);

			const image = document.createElement("div");
			image.style.backgroundImage = `url(${user.avatar})`;
			image.setAttribute("class", "void-quick-access-pfp");
			container.append(image);

			const username = document.createElement("div");
			username.append(user.username);
			username.setAttribute("class", "void-quick-access-username");

			if (
				(this.settings.options.quickAccessBadge.getValue() ||
					user.quickAccessBadge) &&
				user.quickAccessBadgeDisplay
			) {
				container.classList.add("void-quick-access-badge");
			}

			container.append(username);
			return container;
		}

		#quickAccessRendered() {
			const quickAccess = document.getElementById(this.#quickAccessId);
			return quickAccess !== null;
		}

		#getQuickAccessUsers() {
			if (this.settings.options.quickAccessEnabled.getValue()) {
				return this.settings.verifiedUsers;
			}

			return this.settings.verifiedUsers.filter(
				(user) => user.quickAccessEnabled
			);
		}
	}

	// Copyright (c) 2013 Pieroxy <pieroxy@pieroxy.net>
	// This work is free. You can redistribute it and/or modify it
	// under the terms of the WTFPL, Version 2
	// For more information see LICENSE.txt or http://www.wtfpl.net/
	//
	// For more information, the home page:
	// http://pieroxy.net/blog/pages/lz-string/testing.html
	//
	// LZ-based compression algorithm, version 1.4.4
	var LZString = (function () {
		// private property
		var f = String.fromCharCode;
		var keyStrBase64 =
			"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
		var keyStrUriSafe =
			"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$";
		var baseReverseDic = {};

		function getBaseValue(alphabet, character) {
			if (!baseReverseDic[alphabet]) {
				baseReverseDic[alphabet] = {};
				for (var i = 0; i < alphabet.length; i++) {
					baseReverseDic[alphabet][alphabet.charAt(i)] = i;
				}
			}
			return baseReverseDic[alphabet][character];
		}

		var LZString = {
			compressToBase64: function (input) {
				if (input == null) return "";
				var res = LZString._compress(input, 6, function (a) {
					return keyStrBase64.charAt(a);
				});
				switch (
					res.length % 4 // To produce valid Base64
				) {
					default: // When could this happen ?
					case 0:
						return res;
					case 1:
						return res + "===";
					case 2:
						return res + "==";
					case 3:
						return res + "=";
				}
			},

			decompressFromBase64: function (input) {
				if (input == null) return "";
				if (input == "") return null;
				return LZString._decompress(input.length, 32, function (index) {
					return getBaseValue(keyStrBase64, input.charAt(index));
				});
			},

			compressToUTF16: function (input) {
				if (input == null) return "";
				return (
					LZString._compress(input, 15, function (a) {
						return f(a + 32);
					}) + " "
				);
			},

			decompressFromUTF16: function (compressed) {
				if (compressed == null) return "";
				if (compressed == "") return null;
				return LZString._decompress(
					compressed.length,
					16384,
					function (index) {
						return compressed.charCodeAt(index) - 32;
					}
				);
			},

			//compress into uint8array (UCS-2 big endian format)
			compressToUint8Array: function (uncompressed) {
				var compressed = LZString.compress(uncompressed);
				var buf = new Uint8Array(compressed.length * 2); // 2 bytes per character

				for (var i = 0, TotalLen = compressed.length; i < TotalLen; i++) {
					var current_value = compressed.charCodeAt(i);
					buf[i * 2] = current_value >>> 8;
					buf[i * 2 + 1] = current_value % 256;
				}
				return buf;
			},

			//decompress from uint8array (UCS-2 big endian format)
			decompressFromUint8Array: function (compressed) {
				if (compressed === null || compressed === undefined) {
					return LZString.decompress(compressed);
				} else {
					var buf = new Array(compressed.length / 2); // 2 bytes per character
					for (var i = 0, TotalLen = buf.length; i < TotalLen; i++) {
						buf[i] = compressed[i * 2] * 256 + compressed[i * 2 + 1];
					}

					var result = [];
					buf.forEach(function (c) {
						result.push(f(c));
					});
					return LZString.decompress(result.join(""));
				}
			},

			//compress into a string that is already URI encoded
			compressToEncodedURIComponent: function (input) {
				if (input == null) return "";
				return LZString._compress(input, 6, function (a) {
					return keyStrUriSafe.charAt(a);
				});
			},

			//decompress from an output of compressToEncodedURIComponent
			decompressFromEncodedURIComponent: function (input) {
				if (input == null) return "";
				if (input == "") return null;
				input = input.replace(/ /g, "+");
				return LZString._decompress(input.length, 32, function (index) {
					return getBaseValue(keyStrUriSafe, input.charAt(index));
				});
			},

			compress: function (uncompressed) {
				return LZString._compress(uncompressed, 16, function (a) {
					return f(a);
				});
			},
			_compress: function (uncompressed, bitsPerChar, getCharFromInt) {
				if (uncompressed == null) return "";
				var i,
					value,
					context_dictionary = {},
					context_dictionaryToCreate = {},
					context_c = "",
					context_wc = "",
					context_w = "",
					context_enlargeIn = 2, // Compensate for the first entry which should not count
					context_dictSize = 3,
					context_numBits = 2,
					context_data = [],
					context_data_val = 0,
					context_data_position = 0,
					ii;

				for (ii = 0; ii < uncompressed.length; ii += 1) {
					context_c = uncompressed.charAt(ii);
					if (
						!Object.prototype.hasOwnProperty.call(
							context_dictionary,
							context_c
						)
					) {
						context_dictionary[context_c] = context_dictSize++;
						context_dictionaryToCreate[context_c] = true;
					}

					context_wc = context_w + context_c;
					if (
						Object.prototype.hasOwnProperty.call(
							context_dictionary,
							context_wc
						)
					) {
						context_w = context_wc;
					} else {
						if (
							Object.prototype.hasOwnProperty.call(
								context_dictionaryToCreate,
								context_w
							)
						) {
							if (context_w.charCodeAt(0) < 256) {
								for (i = 0; i < context_numBits; i++) {
									context_data_val = context_data_val << 1;
									if (context_data_position == bitsPerChar - 1) {
										context_data_position = 0;
										context_data.push(
											getCharFromInt(context_data_val)
										);
										context_data_val = 0;
									} else {
										context_data_position++;
									}
								}
								value = context_w.charCodeAt(0);
								for (i = 0; i < 8; i++) {
									context_data_val =
										(context_data_val << 1) | (value & 1);
									if (context_data_position == bitsPerChar - 1) {
										context_data_position = 0;
										context_data.push(
											getCharFromInt(context_data_val)
										);
										context_data_val = 0;
									} else {
										context_data_position++;
									}
									value = value >> 1;
								}
							} else {
								value = 1;
								for (i = 0; i < context_numBits; i++) {
									context_data_val =
										(context_data_val << 1) | value;
									if (context_data_position == bitsPerChar - 1) {
										context_data_position = 0;
										context_data.push(
											getCharFromInt(context_data_val)
										);
										context_data_val = 0;
									} else {
										context_data_position++;
									}
									value = 0;
								}
								value = context_w.charCodeAt(0);
								for (i = 0; i < 16; i++) {
									context_data_val =
										(context_data_val << 1) | (value & 1);
									if (context_data_position == bitsPerChar - 1) {
										context_data_position = 0;
										context_data.push(
											getCharFromInt(context_data_val)
										);
										context_data_val = 0;
									} else {
										context_data_position++;
									}
									value = value >> 1;
								}
							}
							context_enlargeIn--;
							if (context_enlargeIn == 0) {
								context_enlargeIn = Math.pow(2, context_numBits);
								context_numBits++;
							}
							delete context_dictionaryToCreate[context_w];
						} else {
							value = context_dictionary[context_w];
							for (i = 0; i < context_numBits; i++) {
								context_data_val =
									(context_data_val << 1) | (value & 1);
								if (context_data_position == bitsPerChar - 1) {
									context_data_position = 0;
									context_data.push(
										getCharFromInt(context_data_val)
									);
									context_data_val = 0;
								} else {
									context_data_position++;
								}
								value = value >> 1;
							}
						}
						context_enlargeIn--;
						if (context_enlargeIn == 0) {
							context_enlargeIn = Math.pow(2, context_numBits);
							context_numBits++;
						}
						// Add wc to the dictionary.
						context_dictionary[context_wc] = context_dictSize++;
						context_w = String(context_c);
					}
				}

				// Output the code for w.
				if (context_w !== "") {
					if (
						Object.prototype.hasOwnProperty.call(
							context_dictionaryToCreate,
							context_w
						)
					) {
						if (context_w.charCodeAt(0) < 256) {
							for (i = 0; i < context_numBits; i++) {
								context_data_val = context_data_val << 1;
								if (context_data_position == bitsPerChar - 1) {
									context_data_position = 0;
									context_data.push(
										getCharFromInt(context_data_val)
									);
									context_data_val = 0;
								} else {
									context_data_position++;
								}
							}
							value = context_w.charCodeAt(0);
							for (i = 0; i < 8; i++) {
								context_data_val =
									(context_data_val << 1) | (value & 1);
								if (context_data_position == bitsPerChar - 1) {
									context_data_position = 0;
									context_data.push(
										getCharFromInt(context_data_val)
									);
									context_data_val = 0;
								} else {
									context_data_position++;
								}
								value = value >> 1;
							}
						} else {
							value = 1;
							for (i = 0; i < context_numBits; i++) {
								context_data_val = (context_data_val << 1) | value;
								if (context_data_position == bitsPerChar - 1) {
									context_data_position = 0;
									context_data.push(
										getCharFromInt(context_data_val)
									);
									context_data_val = 0;
								} else {
									context_data_position++;
								}
								value = 0;
							}
							value = context_w.charCodeAt(0);
							for (i = 0; i < 16; i++) {
								context_data_val =
									(context_data_val << 1) | (value & 1);
								if (context_data_position == bitsPerChar - 1) {
									context_data_position = 0;
									context_data.push(
										getCharFromInt(context_data_val)
									);
									context_data_val = 0;
								} else {
									context_data_position++;
								}
								value = value >> 1;
							}
						}
						context_enlargeIn--;
						if (context_enlargeIn == 0) {
							context_enlargeIn = Math.pow(2, context_numBits);
							context_numBits++;
						}
						delete context_dictionaryToCreate[context_w];
					} else {
						value = context_dictionary[context_w];
						for (i = 0; i < context_numBits; i++) {
							context_data_val =
								(context_data_val << 1) | (value & 1);
							if (context_data_position == bitsPerChar - 1) {
								context_data_position = 0;
								context_data.push(getCharFromInt(context_data_val));
								context_data_val = 0;
							} else {
								context_data_position++;
							}
							value = value >> 1;
						}
					}
					context_enlargeIn--;
					if (context_enlargeIn == 0) {
						context_enlargeIn = Math.pow(2, context_numBits);
						context_numBits++;
					}
				}

				// Mark the end of the stream
				value = 2;
				for (i = 0; i < context_numBits; i++) {
					context_data_val = (context_data_val << 1) | (value & 1);
					if (context_data_position == bitsPerChar - 1) {
						context_data_position = 0;
						context_data.push(getCharFromInt(context_data_val));
						context_data_val = 0;
					} else {
						context_data_position++;
					}
					value = value >> 1;
				}

				// Flush the last char
				while (true) {
					context_data_val = context_data_val << 1;
					if (context_data_position == bitsPerChar - 1) {
						context_data.push(getCharFromInt(context_data_val));
						break;
					} else context_data_position++;
				}
				return context_data.join("");
			},

			decompress: function (compressed) {
				if (compressed == null) return "";
				if (compressed == "") return null;
				return LZString._decompress(
					compressed.length,
					32768,
					function (index) {
						return compressed.charCodeAt(index);
					}
				);
			},

			_decompress: function (length, resetValue, getNextValue) {
				var dictionary = [],
					enlargeIn = 4,
					dictSize = 4,
					numBits = 3,
					entry = "",
					result = [],
					i,
					w,
					bits,
					resb,
					maxpower,
					power,
					c,
					data = { val: getNextValue(0), position: resetValue, index: 1 };

				for (i = 0; i < 3; i += 1) {
					dictionary[i] = i;
				}

				bits = 0;
				maxpower = Math.pow(2, 2);
				power = 1;
				while (power != maxpower) {
					resb = data.val & data.position;
					data.position >>= 1;
					if (data.position == 0) {
						data.position = resetValue;
						data.val = getNextValue(data.index++);
					}
					bits |= (resb > 0 ? 1 : 0) * power;
					power <<= 1;
				}

				switch ((bits)) {
					case 0:
						bits = 0;
						maxpower = Math.pow(2, 8);
						power = 1;
						while (power != maxpower) {
							resb = data.val & data.position;
							data.position >>= 1;
							if (data.position == 0) {
								data.position = resetValue;
								data.val = getNextValue(data.index++);
							}
							bits |= (resb > 0 ? 1 : 0) * power;
							power <<= 1;
						}
						c = f(bits);
						break;
					case 1:
						bits = 0;
						maxpower = Math.pow(2, 16);
						power = 1;
						while (power != maxpower) {
							resb = data.val & data.position;
							data.position >>= 1;
							if (data.position == 0) {
								data.position = resetValue;
								data.val = getNextValue(data.index++);
							}
							bits |= (resb > 0 ? 1 : 0) * power;
							power <<= 1;
						}
						c = f(bits);
						break;
					case 2:
						return "";
				}
				dictionary[3] = c;
				w = c;
				result.push(c);
				while (true) {
					if (data.index > length) {
						return "";
					}

					bits = 0;
					maxpower = Math.pow(2, numBits);
					power = 1;
					while (power != maxpower) {
						resb = data.val & data.position;
						data.position >>= 1;
						if (data.position == 0) {
							data.position = resetValue;
							data.val = getNextValue(data.index++);
						}
						bits |= (resb > 0 ? 1 : 0) * power;
						power <<= 1;
					}

					switch ((c = bits)) {
						case 0:
							bits = 0;
							maxpower = Math.pow(2, 8);
							power = 1;
							while (power != maxpower) {
								resb = data.val & data.position;
								data.position >>= 1;
								if (data.position == 0) {
									data.position = resetValue;
									data.val = getNextValue(data.index++);
								}
								bits |= (resb > 0 ? 1 : 0) * power;
								power <<= 1;
							}

							dictionary[dictSize++] = f(bits);
							c = dictSize - 1;
							enlargeIn--;
							break;
						case 1:
							bits = 0;
							maxpower = Math.pow(2, 16);
							power = 1;
							while (power != maxpower) {
								resb = data.val & data.position;
								data.position >>= 1;
								if (data.position == 0) {
									data.position = resetValue;
									data.val = getNextValue(data.index++);
								}
								bits |= (resb > 0 ? 1 : 0) * power;
								power <<= 1;
							}
							dictionary[dictSize++] = f(bits);
							c = dictSize - 1;
							enlargeIn--;
							break;
						case 2:
							return result.join("");
					}

					if (enlargeIn == 0) {
						enlargeIn = Math.pow(2, numBits);
						numBits++;
					}

					if (dictionary[c]) {
						entry = dictionary[c];
					} else {
						if (c === dictSize) {
							entry = w + w.charAt(0);
						} else {
							return null;
						}
					}
					result.push(entry);

					// Add w+entry[0] to the dictionary.
					dictionary[dictSize++] = w + entry.charAt(0);
					enlargeIn--;

					w = entry;

					if (enlargeIn == 0) {
						enlargeIn = Math.pow(2, numBits);
						numBits++;
					}
				}
			},
		};
		return LZString;
	})();

	var LZString$1 = LZString;

	class UserCSS {
		#settings;
		#currentActivity;
		#currentUser;
		css = "";
		preview = false;
		cssInLocalStorage = "void-verified-user-css";
		broadcastChannel;

		constructor(settings) {
			this.#settings = settings;
			if (
				this.#settings.auth?.token &&
				this.#settings.options.profileCssEnabled.getValue()
			) {
				const cssInLocalStorage = JSON.parse(
					localStorage.getItem(this.cssInLocalStorage)
				);
				if (cssInLocalStorage) {
					this.css = cssInLocalStorage.css;
					this.preview = cssInLocalStorage.preview;
				} else {
					this.getAuthUserCss();
				}
			}

			this.broadcastChannel = new BroadcastChannel("user-css");
			this.broadcastChannel.addEventListener("message", (event) =>
				this.#handleBroadcastMessage(event, this.#settings)
			);
		}

		async checkActivityCss() {
			if (
				!this.#settings.options.activityCssEnabled.getValue() ||
				!window.location.pathname.startsWith("/activity/")
			) {
				return;
			}

			const activityId = window.location.pathname.match(
				/^\/activity\/([^/]*)\/?/
			)[1];

			if (this.#currentActivity === activityId) {
				return;
			}

			this.#currentActivity = activityId;
			const anilistAPI = new AnilistAPI(this.#settings);
			const result = await anilistAPI.getActivityCss(activityId);
			const username =
				result.data.Activity.user?.name ??
				result.data.Activity.recipient?.name;

			const userColor =
				result.data.Activity.user?.options.profileColor ??
				result.data.Activity.recipient?.options.profileColor;
			const rgb = ColorFunctions.handleAnilistColor(userColor);

			const activityEntry = document.querySelector(
				".container > .activity-entry"
			);

			activityEntry.style.setProperty("--color-blue", rgb);
			activityEntry.style.setProperty("--color-blue-dim", rgb);

			if (username === this.#settings.anilistUser && this.preview) {
				this.#renderCss(this.css, "user-css");
				return;
			}

			if (username === this.#currentUser) {
				this.#clearGlobalCss();
				return;
			}
			new StyleHandler(this.#settings).clearStyles("user-css");

			if (!this.#shouldRenderCss(username)) {
				return;
			}

			const about =
				result.data.Activity.user?.about ??
				result.data.Activity.recipient?.about;

			const css = this.#decodeAbout(about)?.customCSS;
			if (css) {
				this.#renderCss(css, "user-css");
			}

			this.#currentUser = username;
		}

		resetCurrentActivity() {
			this.#currentActivity = null;
		}

		async checkUserCss() {
			if (
				!this.#settings.options.profileCssEnabled.getValue() ||
				!window.location.pathname.startsWith("/user/")
			) {
				return;
			}

			const username =
				window.location.pathname.match(/^\/user\/([^/]*)\/?/)[1];

			if (username === this.#currentUser) {
				return;
			}

			if (username === this.#settings.anilistUser && this.preview) {
				this.#renderCss(this.css, "user-css");
				return;
			}

			if (!this.#shouldRenderCss(username)) {
				new StyleHandler(this.#settings).clearStyles("user-css");
				return;
			}

			this.#currentUser = username;

			const anilistAPI = new AnilistAPI(this.#settings);
			const result = await anilistAPI.getUserAbout(username);
			const about = result.User.about;
			const css = this.#decodeAbout(about)?.customCSS;
			if (!css) {
				new StyleHandler(this.#settings).clearStyles("user-css");
			}
			this.#renderCss(css, "user-css");
		}

		resetCurrentUser() {
			this.#currentUser = null;
		}

		updateCss(css) {
			this.css = css;
			if (this.preview) {
				this.broadcastChannel.postMessage({ type: "css", css });
			}
			this.#saveToLocalStorage();
		}

		async publishUserCss() {
			const username = this.#settings.anilistUser;
			if (!username) {
				return;
			}

			const anilistAPI = new AnilistAPI(this.#settings);
			const result = await anilistAPI.getUserAbout(username);
			let about = result.User.about;
			let aboutJson = this.#decodeAbout(about);
			aboutJson.customCSS = this.css;
			const compressedAbout = LZString$1.compressToBase64(
				JSON.stringify(aboutJson)
			);

			const target = about.match(/^\[\]\(json([A-Za-z0-9+/=]+)\)/)[1];
			if (target) {
				about = about.replace(target, compressedAbout);
			} else {
				about = `[](json${compressedAbout})` + about;
			}
			const mutationResult = await anilistAPI.saveUserAbout(about);
			return mutationResult?.errors === undefined;
		}

		togglePreview() {
			this.preview = !this.preview;
			this.broadcastChannel.postMessage({
				type: "preview",
				preview: this.preview,
			});
			this.#saveToLocalStorage();
		}

		async getAuthUserCss() {
			const anilistAPI = new AnilistAPI(this.#settings);
			const username = this.#settings.anilistUser;
			if (!username) {
				return;
			}
			const response = await anilistAPI.getUserAbout(username);
			const about = response.User.about;
			const css = this.#decodeAbout(about).customCSS;
			this.css = css;
			this.#saveToLocalStorage();
			return css;
		}

		#handleBroadcastMessage(event, settings) {
			switch (event.data.type) {
				case "css":
					this.#handlePreviewCssMessage(event.data.css, settings);
					break;
				case "preview":
					this.#handlePreviewToggleMessage(event.data.preview);
					break;
			}
		}

		#handlePreviewCssMessage(css, settings) {
			this.css = css;
			const hasUserCss = document.getElementById(
				"void-verified-user-css-styles"
			);
			if (hasUserCss) {
				new StyleHandler(settings).createStyleLink(css, "user-css");
			}
		}

		#handlePreviewToggleMessage(preview) {
			this.preview = preview;
			const hasUserCss = document.getElementById(
				"void-verified-user-css-styles"
			);
			if (!hasUserCss) {
				return;
			}

			this.resetCurrentUser();
			this.resetCurrentActivity();

			this.checkUserCss();
			this.checkActivityCss();
		}

		#saveToLocalStorage() {
			localStorage.setItem(
				this.cssInLocalStorage,
				JSON.stringify({
					css: this.css,
					preview: this.preview,
				})
			);
		}

		#shouldRenderCss(username) {
			const user = this.#settings.getUser(username);
			if (
				this.#settings.options.onlyLoadCssFromVerifiedUser.getValue() &&
				!this.#settings.isVerified(username)
			) {
				return false;
			}
			if (user?.onlyLoadCssFromVerifiedUser) {
				return true;
			}
			return !this.#userSpecificRenderingExists();
		}

		#userSpecificRenderingExists() {
			return this.#settings.verifiedUsers.some(
				(user) => user.onlyLoadCssFromVerifiedUser
			);
		}

		#renderCss(css, id) {
			if (!css) {
				return;
			}

			const styleHandler = new StyleHandler(this.#settings);
			styleHandler.createStyleLink(css, id);
			this.#clearGlobalCss();
		}

		#clearGlobalCss() {
			if (this.#settings.options.globalCssAutoDisable.getValue()) {
				new StyleHandler(this.#settings).clearStyles("global-css");
			}
		}

		#decodeAbout(about) {
			let json = (about || "").match(/^\[\]\(json([A-Za-z0-9+/=]+)\)/);
			if (!json) {
				return null;
			}

			let jsonData;
			try {
				jsonData = JSON.parse(atob(json[1]));
			} catch (e) {
				jsonData = JSON.parse(LZString$1.decompressFromBase64(json[1]));
			}
			return jsonData;
		}
	}

	class IntervalScriptHandler {
		styleHandler;
		settingsUi;
		activityHandler;
		settings;
		globalCSS;
		quickAccess;
		userCSS;
		constructor(settings) {
			this.settings = settings;

			this.styleHandler = new StyleHandler(settings);
			this.globalCSS = new GlobalCSS(settings);
			this.userCSS = new UserCSS(settings);
			this.settingsUi = new SettingsUserInterface(
				settings,
				this.styleHandler,
				this.globalCSS,
				this.userCSS
			);
			this.activityHandler = new ActivityHandler(settings);
			this.quickAccess = new QuickAccess(settings);
		}

		currentPath = "";
		evaluationIntervalInSeconds = 1;
		hasPathChanged(path) {
			if (path === this.currentPath) {
				return false;
			}
			this.currentPath = path;
			return true;
		}

		handleIntervalScripts(intervalScriptHandler) {
			const path = window.location.pathname;

			intervalScriptHandler.activityHandler.moveAndDisplaySubscribeButton();
			intervalScriptHandler.globalCSS.clearCssForProfile();

			if (path === "/home") {
				intervalScriptHandler.styleHandler.refreshHomePage();
				intervalScriptHandler.quickAccess.renderQuickAccess();
			}

			if (!path.startsWith("/settings/developer")) {
				intervalScriptHandler.settingsUi.removeSettingsUi();
			}

			if (!intervalScriptHandler.hasPathChanged(path)) {
				return;
			}

			if (path.startsWith("/user/")) {
				intervalScriptHandler.userCSS.checkUserCss();
				intervalScriptHandler.quickAccess.clearBadge();
				intervalScriptHandler.styleHandler.verifyProfile();
			} else {
				intervalScriptHandler.styleHandler.clearStyles("profile");
			}

			if (path.startsWith("/activity/")) {
				intervalScriptHandler.userCSS.checkActivityCss();
			}

			if (!path.startsWith("/activity/") && !path.startsWith("/user/")) {
				intervalScriptHandler.userCSS.resetCurrentActivity();
				intervalScriptHandler.userCSS.resetCurrentUser();
				intervalScriptHandler.styleHandler.clearStyles("user-css");
			}

			intervalScriptHandler.globalCSS.createCss();

			if (path.startsWith("/settings/developer")) {
				intervalScriptHandler.settingsUi.renderSettingsUi();
			}
		}

		enableScriptIntervalHandling() {
			setInterval(() => {
				this.handleIntervalScripts(this);
			}, this.evaluationIntervalInSeconds * 1000);
		}
	}

	class PasteHandler {
		settings;

		#imageFormats = [
			"jpg",
			"png",
			"gif",
			"webp",
			"apng",
			"avif",
			"jpeg",
			"svg",
		];

		// #isKeyPressed = false;
		#uploadInProgress = false;
		constructor(settings) {
			this.settings = settings;
		}

		setup() {
			// window.addEventListener("keydown", (event) => {
			// 	this.#handleKeybind(event);
			// });
			// window.addEventListener("keyup", (event) => {
			// 	this.#handleKeybind(event, false);
			// });
			window.addEventListener("paste", (event) => {
				this.#handlePaste(event);
			});
		}

		// #handleKeybind(event, isKeyDown = true) {
		// 	if (this.settings.options.pasteKeybind.getValue() !== event.key) {
		// 		return;
		// 	}
		// 	this.#isKeyPressed = isKeyDown;
		// }

		async #handlePaste(event) {
			if (event.target.tagName !== "TEXTAREA") {
				return;
			}

			const clipboard = event.clipboardData.getData("text/plain").trim();
			const file = event.clipboardData.items[0]?.getAsFile();
			let result = [];
			if (
				file &&
				file.type.startsWith("image/") &&
				this.settings.options.pasteImagesToHostService.getValue()
			) {
				event.preventDefault();
				if (this.#uploadInProgress) {
					return;
				}
				this.#uploadInProgress = true;
				document.body.classList.add("void-upload-in-progress");
				try {
					const imageApi = new ImageApiFactory().getImageHostInstance();
					const response = await imageApi.uploadImage(file);
					result.push(this.#handleRow(response.data.url));
				} catch (error) {
					console.error(error);
				} finally {
					this.#uploadInProgress = false;
					document.body.classList.remove("void-upload-in-progress");
				}
			} else if (this.settings.options.pasteEnabled.getValue()) {
				event.preventDefault();
				const rows = clipboard.split("\n");

				for (let row of rows) {
					result.push(this.#handleRow(row));
				}
			} else {
				return;
			}

			const transformedClipboard = result.join("\n\n");
			window.document.execCommand("insertText", false, transformedClipboard);
		}

		#handleRow(row) {
			row = row.trim();
			if (
				this.#imageFormats.some((format) =>
					row.toLowerCase().endsWith(format)
				)
			) {
				return this.#handleImg(row);
			} else if (row.toLowerCase().startsWith("http")) {
				return `[](${row})`;
			} else {
				return row;
			}
		}

		#handleImg(row) {
			const img = `img${this.settings.options.pasteImageWidth.getValue()}(${row})`;
			let result = img;
			if (this.settings.options.pasteWrapImagesWithLink.getValue()) {
				result = `[ ${img} ](${row})`;
			}
			return result;
		}
	}

	const styles = /* css */ `
    a[href="/settings/developer" i]::after{content: " & Void"}
    .void-settings .void-nav ol {
        display: flex;
        margin: 8px 0px;
        padding: 0;
    }

    .void-settings .void-nav li {
        list-style: none;
        display: block;
        color: white;
        padding: 3px 8px;
        text-transform: capitalize;
        background: black;
        cursor: pointer;
        min-width: 50px;
        text-align: center;
        font-size: 1.3rem;
    }

    .void-settings .void-nav li.void-active {
        background: rgb(var(--color-blue));
    }

    .void-settings .void-nav li:first-child {
        border-radius: 4px 0px 0px 4px;
    }

    .void-settings .void-nav li:last-child {
        border-radius: 0px 4px 4px 0px;
    }
    
    .void-settings .void-nav li:hover {
        background: rgb(var(--color-blue));
    }

    .void-settings .void-settings-header {
        margin-top: 30px;
    }

    .void-settings .void-table input[type="text"] {
        width: 100px;
    }
    .void-settings .void-table input[type="color"] {
        border: 0;
        height: 24px;
        width: 40px;
        padding: 0;
        background-color: unset;
        cursor: pointer;
    }

    .void-settings .void-table input[type="checkbox"] {
        margin-left: 3px;
        margin-right: 3px;
    }

    .void-settings .void-table button {
        background: unset;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .void-settings .void-table form {
        padding: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .void-settings .void-settings-header span {
        color: rgb(var(--color-blue));
    }

    .void-settings .void-settings-list {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .void-settings .void-settings-list input[type="color"] {
        border: 0;
        height: 20px;
        width: 25px;
        padding: 0;
        background-color: unset;
        cursor: pointer;
    }

    .void-settings .void-settings-list input[type="text"] {
        width: 50px;
    }

    .void-settings .void-settings-list label {
        margin-left: 5px;
    }

    .void-settings .void-css-editor label {
        margin-top: 20px;
        fontSize: 2rem;
        display: inline-block;
    }

    .void-settings .void-css-editor textarea {
        width: 100%;
        height: 200px;
        resize: vertical;
        background: rgb(var(--color-foreground));
        color: rgb(var(--color-text));
    }
    
    .void-quick-access .void-quick-access-wrap {
        background: rgb(var(--color-foreground));
        display: grid;
        grid-template-columns: repeat(auto-fill, 60px);
        grid-template-rows: repeat(auto-fill, 80px);
        gap: 15px;
        padding: 15px;
        margin-bottom: 25px;
    }

    .void-quick-access-item {
        display: inline-block;
    }

    .void-quick-access-pfp {
        background-size: contain;
        background-repeat: no-repeat;
        height: 60px;
        width: 60px;
        border-radius: 4px;
    }

    .void-quick-access-username {
        display: inline-block;
        text-align: center;
        bottom: -20px;
        width: 100%;
        word-break: break-all;
        font-size: 1.2rem;
    }

    .void-quick-access-badge {
        position: relative;
    }

    .void-quick-access-badge::after {
        content: "New";
        background: rgb(var(--color-blue));
        border-radius: 10px;
        padding: 2px 4px;
        font-size: 9px;
        position: absolute;
        top: 2px;
        right: -10px;
        color: white;
    }

    .void-api-label {
        margin-right: 5px;
    }

    .void-api-key {
        width: 300px;
    }

    .void-notice {
        font-size: 11px;
        margin-top: 5px;
    }

    .void-upload-in-progress {
        cursor: wait;
    }
`;

	const settings = new Settings();
	const styleHandler = new StyleHandler(settings);
	const intervalScriptHandler = new IntervalScriptHandler(settings);
	const anilistAPI = new AnilistAPI(settings);
	const pasteHandler = new PasteHandler(settings);

	styleHandler.refreshStyles();
	intervalScriptHandler.enableScriptIntervalHandling();

	anilistAPI.queryUserData();
	pasteHandler.setup();

	styleHandler.createStyleLink(styles, "script");

	console.log(`VoidVerified ${settings.version} loaded.`);

})();