fixed broken edit mode

also made it possible to get to actions by clicking

index.css

@@ -211,6 +211,7 @@ h4 {
 
 #toggles #options_info {
 	margin-bottom: 10px;
+	cursor: pointer;
 }
 
 #toggles #options_info .count {
@@ -222,6 +223,10 @@ h4 {
 	opacity: 1;
 }
 
+#toggles #options_info:hover .count {
+	opacity: 0.8;
+}
+
 #options_info i {
 	box-sizing: border-box;
 	padding: 1px 7px 1px 5px;
@@ -234,6 +239,7 @@ h4 {
 label {
 	display: flex;
 	gap: 8px;
+	height: 22px;
 	margin: 0 20px 6px 0;
 	white-space: nowrap;
 	opacity: 0.8;
@@ -304,6 +310,7 @@ input[type="checkbox"] {
 	border-radius: 3px;
 	place-content: center;
 	box-shadow: inset 0px 3px 5px #00000045;
+	transition: all 100ms cubic-bezier(.35,1.63,.84,1.64);
 }
 
 label.category input[type="checkbox"] {
@@ -314,6 +321,10 @@ label.top_control input[type="checkbox"] {
 	border-color: rgba(255, 227, 0, 0.5);
 }
 
+label.warning input[type="checkbox"] {
+	border-color: rgba(255, 0, 0, 0.5);
+}
+
 label span:first-of-type {
 	opacity: 0.8;
 }
@@ -745,13 +756,13 @@ input[type="checkbox"]:checked::before {
 	flex-direction: column;
 	overflow-y: scroll;
 	overflow-x: hidden;
-	background-color: #fbc1c1;
+	background-color: #400;
 	border-radius: 4px;
 	border: 2px solid #b30000;
 	box-shadow: inset 0px 3px 4px #00000096;
 	text-align: left;
 	font-size: 14px;
-	color: #000;
+	color: #f88;
 	opacity: 1;
 	cursor: default;
 }

index.js

@@ -630,8 +630,9 @@ function updateArtistsCountPerTag(whoCalled) {
 	}
 	timer = setTimeout(function() {
 		// for checkbox, we defer counts because it's slow
+		// delay for 100 to allow CSS animation to complete
 		updateArtistsCountPerTagSlow();
-	},0);
+	},100);
 }
 
 function updateArtistsCountPerTagSlow() {
@@ -642,6 +643,7 @@ function updateArtistsCountPerTagSlow() {
 	let divs = document.querySelectorAll('.image-item');
 	let hiddenDivs = document.querySelectorAll('.image-item.hidden');
 	let deprecatedDivs = document.querySelectorAll('.image-item[data-deprecated="true"]');
+	let last = performance.now();
 	checkboxes.forEach(function(checkbox) {
 		let isTop = checkbox.parentNode.classList.contains('top_control');
 		if(!isTop) {
@@ -1954,7 +1956,7 @@ function editTagsExitEditMode(imageItem) {
 	let tagLabels = tagArea.querySelectorAll('label');
 	tagLabels.forEach(function(label) {
 		let input = label.querySelector('input');
-		if(input.checked) {
+		if(input.checked && input.value != 'known' && input.value != 'unknown') {
 			tagList += input.value + ', ';
 			label.remove();
 		}
@@ -2014,9 +2016,10 @@ function searchForTags(input, event, tagList) {
 	let matches = 0;
 	let match = '';
 	let range = 'start'
-	for(i=0,il=tagsConcatenated.length; i<il; i++) {
-		let tag = tagsConcatenated[i];
-		for (var i=0, il=tagList.length; i<il; i++) {
+	let tagsConcatenatedArray = Array.from(tagsConcatenated);
+	for(i=0,il=tagsConcatenatedArray.length; i<il; i++) {
+		let tag = tagsConcatenatedArray[i];
+		for (var j=0, jl=tagList.length; j<jl; j++) {
 			if(typeof tagList[i] == 'string') {
 				// first tagList item is boolean
 				if(tag.toLowerCase() == tagList[i].toLowerCase()) {
@@ -2024,7 +2027,7 @@ function searchForTags(input, event, tagList) {
 				}
 			}
 		}
-		if(tag.toLowerCase().indexOf(input.value.toLowerCase()) == 0) {
+		if(tag.toLowerCase().indexOf(input.value.toLowerCase()) > -1) {
 			range = 'continue';
 			let matchSpan = document.createElement('span');
 			matchSpan.textContent = tag;
@@ -2210,6 +2213,12 @@ function addAllListeners() {
 		});
 	});
 	// information
+	var options_info = document.getElementById('options_info');
+	options_info.addEventListener('click', function(e) {
+		showInfo();
+		showInformation('actions');
+		e.stopPropagation();
+	});
 	var info_actions = document.getElementById('info_actions');
 	info_actions.addEventListener('click', function(e) {
 		showInformation('actions');