From 8b5130c21a28c62d5696552a74bcea59a02e1c3f Mon Sep 17 00:00:00 2001
From: somebody <onesome01@protonmail.com>
Date: Sat, 8 Oct 2022 22:05:44 -0500
Subject: [PATCH] Inital work on substitution

---
 static/koboldai.css            | 20 +++++++++++++++++
 templates/settings flyout.html | 40 ++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/static/koboldai.css b/static/koboldai.css
index 4e3a3593..06e6664d 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -2259,6 +2259,26 @@ body {
 	margin-right: 5px;
 }
 
+/* Substitutions */
+#substitution-header {
+	display: flex;
+	width: 100%;
+	justify-content: space-around;
+}
+
+.substitution-card {
+	display: flex;
+
+	column-gap: 5px;
+	height: 30px;
+	width: 100%;
+	padding: 1px 0px;
+}
+
+.substitution-card > *{
+	min-width: 0;
+}
+
 /*---------------------------------- Global ------------------------------------------------*/
 .hidden {
 	display: none;
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index 7fcabc70..dd937914 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -412,6 +412,46 @@
 				<input type=checkbox class="setting_item_input" data-size="mini" data-onstyle="success" data-toggle="toggle">
 			</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> Substitutions</h4>
+		</div>
+
+		<!--
+			Some good ideas for defaults:
+			-- : –
+			(c) : ©
+			(r) : ®
+			--- : —
+			... : …
+			tm : ™ (maybe)
+		-->
+		<div class="setting_tile_area" id="Substitutions">
+			<span class="help_text">Automatically replaces characters as you type.</span>
+			<div id="substitution-header" class="noselect">
+				<b>Replace</b> <b>With</b>
+			</div>
+
+			<div class="substitution-card">
+				<input class="target">
+				<input class="substitution">
+			</div>
+			<div class="substitution-card">
+				<input class="target">
+				<input class="substitution">
+			</div>
+			<div class="substitution-card">
+				<input class="target">
+				<input class="substitution">
+			</div>
+
+			<div id="new-card" class="substitution-card cursor">
+				<span class="material-icons-outlined">
+					add
+				</span>
+			</div>
+		</div>
+
 	</div>
 	<div id="settings_footer" class="settings_footer">
 		<span>Execution Time: <span id="Execution Time"></span></span> |