Shortcuts, shortcut viewer, and other fixes

static/koboldai.css

@@ -2382,6 +2382,61 @@ body {
 	z-index: 20;
 }
 
+.popup-close {
+	cursor: pointer;
+}
+
+/* Shortcuts */
+#shortcuts-popup {
+	width: 50%;
+	height: 75%;
+	padding-bottom: 10px;
+	background-color: var(--popup_background_color);
+}
+
+#shortcuts-popup > .popup-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	padding: 4px 7px;
+	margin-bottom: 5px;
+}
+
+#shortcuts-popup h2 {
+	display: inline;
+	margin: 0px;
+	position: relative;
+	top: 4px;
+}
+
+#shortcut-container {
+	padding: 0px 5px;
+	column-count: 2;
+	column-rule: 2px solid #ffffff1b;
+}
+
+.shortcut-item {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}
+
+.shortcut-keys {
+	display: inline-flex;
+	column-gap: 5px;
+
+	margin-bottom: 3px;
+}
+
+.shortcut-key {
+	background-color: #284b62;
+	padding: 2px 5px;
+	font-size: 16px;
+	font-family: monospace;
+	border-radius: 3px;
+}
+
 /*---------------------------------- Global ------------------------------------------------*/
 .hidden {
 	display: none;

static/koboldai.js

@@ -105,6 +105,18 @@ const context_menu_actions = [
 	// {label: "View Token Probabilities", icon: "account_tree", visibilityCondition: "SELECTION", click: view_selection_probabilities},
 ];
 
+// CTRL-[X]
+const shortcuts = [
+	{key: "k", desc: "Finder", func: open_finder},
+	{key: "/", desc: "Help screen", func: () => openPopup("shortcuts-popup")},
+	{key: "z", desc: "Undoes last story action", func: () => socket.emit("back", {})},
+	{key: "y", desc: "Redoes last story action", func: () => socket.emit("redo", {})},
+	{key: "e", desc: "Retries last story action", func: () => socket.emit("retry", {})},
+	{key: "m", desc: "Focuses Memory", func: () => focusEl("#memory")},
+	{key: "l", desc: "Focuses Author's Note", func: () => focusEl("#authors_notes")}, // CTRL-N is reserved :^(
+	{key: "g", desc: "Focuses game text", func: () => focusEl("#input_text")},
+]
+
 function $el(selector) {
 	// We do not preemptively fetch all elements upon execution (wall of consts)
 	// due to the layer of mental overhead it adds to debugging and reading
@@ -4150,16 +4162,20 @@ function highlightEl(element) {
 		return;
 	}
 	
-	let area = $(element).closest(".tab-target")[0];
-	
-	if (!area) {
-		console.error("No error? :^(");
-		return;
+	const area = $(element).closest(".tab-target")[0];
+	if (area) {
+		// If we need to click a tab to make the element visible, do so.
+		let tab = Array.from($(".tab")).filter((c) => c.getAttribute("tab-target") === area.id)[0];
+		tab.click();
 	}
-	
-	let tab = Array.from($(".tab")).filter((c) => c.getAttribute("tab-target") === area.id)[0];
-	tab.click();
+
 	element.scrollIntoView();
+	return element;
+}
+
+function focusEl(element) {
+	const el = highlightEl(element);
+	if (el) el.focus();
 }
 
 function addSearchListing(action, highlight) {
@@ -5323,19 +5339,29 @@ function initalizeTooltips() {
 }
 
 /* -- Shortcuts -- */
-document.addEventListener("keydown", function(event) {
-		
-	if (!event.ctrlKey) return;
+(function() {
+	document.addEventListener("keydown", function(event) {
+		if (!event.ctrlKey) return;
 
-	switch (event.key) {
-		// TODO: Add other shortcuts
-		case "k":
-			open_finder()
-			
+		for (const shortcut of shortcuts) {
+			if (shortcut.key !== event.key) continue;
 			event.preventDefault();
-			break;
-}
-});
+			shortcut.func();
+		}
+	});
+
+	// Display shortcuts in popup
+	const shortcutContainer = $el("#shortcut-container");
+	for (const shortcut of shortcuts) {
+		const shortcutRow = $e("div", shortcutContainer, {classes: ["shortcut-item"]});
+		const shortcutEl = $e("div", shortcutRow, {classes: ["shortcut-keys"]});
+		for (const key of ["Ctrl", shortcut.key.toUpperCase()]) {
+			console.log("HELLO")
+			$e("span", shortcutEl, {classes: ["shortcut-key"], innerText: key});
+		}
+		const shortcutDesc = $e("div", shortcutRow, {classes: ["shortcut-desc"], innerText: shortcut.desc});
+	}
+})();
 
 //function to load more actions if nessisary
 function infinite_scroll() {

templates/popups.html

@@ -170,7 +170,7 @@
 
 	<!---------------- Context Viewer ---------------------->
 	<div id="context-viewer" class="popup-window">
-		<div id="context-viewer-header">
+		<div id="context-viewer-header" class="popup-header">
 			<h3 class="noselect">Context Viewer</h3>
 			<div id="context-viewer-header-right">
 				<div>
@@ -239,4 +239,13 @@
 		<div id="prompt-config-placeholders"></div>
 		<div id="prompt-config-done" onclick="sendPromptConfiguration();">Done</div>
 	</div>
+
+	<!---------------- Shortcuts ------------------->
+	<div id="shortcuts-popup" class="popup-window">
+		<div class="popup-header">
+			<h2>Shortcuts</h2>
+			<span class="popup-close material-icons-outlined" onclick='closePopups();'>close</span>
+		</div>
+		<div id="shortcut-container"></div>
+	</div>
 </div>

themes/Darkness.css

@@ -310,7 +310,7 @@
 
 /* Context Viewer */
 
-#context-viewer-header {
+.popup-header {
     background-color: #141414 !important;
 }
 

themes/Monochrome.css

@@ -315,7 +315,7 @@
 
 /* Context Viewer */
 
-#context-viewer-header {
+.popup-header {
     background-color: #1e2f44 !important;
 }
 

themes/Nostalgia.css

@@ -281,7 +281,7 @@
 
 /* Context Viewer */
 
-#context-viewer-header {
+.popup-header {
     background-color: #262626 !important;
 }
 

themes/Unicorn.css

@@ -332,7 +332,7 @@
 
 /* Context Viewer */
 
-#context-viewer-header {
+.popup-header {
     background-color: #a04a51 !important;
 }