From ec01557f4f5e42fa90d7bec71ac6c9b5f557dc8b Mon Sep 17 00:00:00 2001
From: somebody <onesome01@protonmail.com>
Date: Thu, 25 Aug 2022 20:41:50 -0500
Subject: [PATCH] Add tweaks and 1 example tweak

---
 static/koboldai.css            | 19 +++++++++++++++
 static/koboldai.js             | 44 +++++++++++++++++++++++++++++++++-
 templates/settings flyout.html | 12 +++++++++-
 themes/tweaks/hide-timing.css  |  2 ++
 4 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 themes/tweaks/hide-timing.css

diff --git a/static/koboldai.css b/static/koboldai.css
index df8e176d..35f3f237 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -656,6 +656,25 @@ input[type="range"]::-ms-fill-upper {
 	filter: brightness(85%);
 }
 
+/* Tweaks */
+.tweak-container {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	color: var(--setting_text);
+	background-color: var(--setting_background);
+	border-radius: var(--radius_settings_background);
+	padding: 10px 8px;
+	margin-bottom: 5px;
+	width: 100%;
+}
+
+#Tweaks {
+	/* Don't add space under last tweak-container. Also, CSS, why no last-of-class!?!? */
+	margin-bottom: 0px;
+}
+
 /*----------------RIGHT FLYOUT MENU------------------*/
 .right_menu_icon {
 	position: fixed;
diff --git a/static/koboldai.js b/static/koboldai.js
index c28871de..e52b8785 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -2812,4 +2812,46 @@ $(document).ready(function(){
 	}
 	preserve_game_space(!(getCookie("preserve_game_space") == "false"));
 	options_on_right(!(getCookie("options_on_right") == "false"));
-});
\ No newline at end of file
+
+
+	// Tweak registering
+	let enabledTweaks = JSON.parse(getCookie("enabledTweaks", "[]"));
+
+	function saveTweaks() {
+		let out = [];
+
+		// TODO: Better saving
+		for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
+			let toggle = tweakContainer.querySelector("input");
+			let path = tweakContainer.getAttribute("tweak-path");
+			if (toggle.checked) out.push(path);
+		}
+
+		setCookie("enabledTweaks", JSON.stringify(out));
+	}
+
+
+	for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
+		let toggle = tweakContainer.querySelector("input");
+		let path = tweakContainer.getAttribute("tweak-path");
+
+		$(toggle).change(function(e) {
+			let path = $(this).closest(".tweak-container")[0].getAttribute("tweak-path");
+			let id = `tweak-${path}`;
+
+			if (this.checked) {
+				let style = document.createElement("link");
+				style.rel = "stylesheet";
+				style.href = `/themes/tweaks/${path}.css`;
+				style.id = id;
+				document.head.appendChild(style);
+			} else {
+				document.getElementById(id).remove();
+			}
+
+			saveTweaks();
+		});
+
+		if (enabledTweaks.includes(path)) toggle.click();
+	}
+});
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index 164cea33..3b5da6da 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -296,8 +296,18 @@
 				<span>Advanced Theme</h4>
 			</div>
 		</div>
+
+		<div class="collapsable_header" onclick="toggle_setting_category(this);">
+			<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Tweaks</h4>
+		</div>
+		<div class="setting_tile_area" id="Tweaks">
+			<span class="help_text">Small UI changes that can be mixed and matched.</span>
+			<div class="tweak-container" tweak-path="hide-timing">
+				<span>Hide timing information</span>
+				<input type=checkbox class="setting_item_input" data-size="mini" data-onstyle="success" data-toggle="toggle">
+			</div>
+		</div>
 	</div>
-	<span class=>
 	<span class="material-icons-outlined cursor show_footer_icon" onclick='if (document.getElementById("settings_footer").classList.contains("hidden")){
 																		       document.getElementById("settings_footer").classList.remove("hidden");
 																		   } else {
diff --git a/themes/tweaks/hide-timing.css b/themes/tweaks/hide-timing.css
new file mode 100644
index 00000000..f51afef8
--- /dev/null
+++ b/themes/tweaks/hide-timing.css
@@ -0,0 +1,2 @@
+.show_footer_icon { display: none; }
+#settings_footer { display: none; }