added slash command and tag search

command-f no longer needed to find a tag. all help/about and "copy visible names" features moved into the slash command menu.

index.css

@@ -36,7 +36,7 @@ h4 {
 	position: fixed;
 	top: 0;
 	left: 0;
-	width: calc(60% - 20px);
+	width: calc(40% - 20px);
 	height: calc(100% - 80px);
 	display: flex;
 	flex-direction: column;
@@ -52,7 +52,7 @@ h4 {
 	position: fixed;
 	z-index: 1;
 	top: 0;
-	left: 60%;
+	left: 40%;
 	width: 50px;
 	height: calc(100% - 40px);
 	flex-shrink: 0;
@@ -102,42 +102,53 @@ h4 {
 	pointer-events: none;  /* Make sure the tooltip doesn't interfere with other interactions */
 }
 
+@keyframes gutter_tease {
+	0%   {
+		transform: translateX(-40px);
+		border-right: 1px solid #ffe300b5;
+	}
+	10% {
+		transform: translateX(0px);
+	}
+	20% {
+		transform: translateX(40px);
+	}
+	30%   {
+		transform: translateX(-20px);
+	}
+	40% {
+		transform: translateX(0px);
+	}
+	50% {
+		transform: translateX(20px);
+	}
+	60%   {
+		transform: translateX(-5px);
+	}
+	70% {
+		transform: translateX(0px);
+	}
+	80% {
+		transform: translateX(5px);
+		border-right: 1px solid #ffe300b5;
+	}
+	90% {
+		transform: translateX(0px);
+	}
+}
+
 #image-container {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	align-items: flex-start;
 	justify-content: space-around;
-	margin-left: calc(60% + 50px);
+	margin-left: calc(40% + 50px);
 	margin-top: 20px;
 	margin-bottom: 20px;
 	width: 100%;
 }
 
-#copy-all-names {
-	position: absolute;
-	z-index: 2;
-	left: calc(70% + 25px);
-	bottom: 50px;
-	transform: translateX(-50%);
-	white-space: nowrap;
-	background-color: #ffe300;
-	opacity: 0.8;
-	padding: 4px 8px;
-	border-radius: 4px;
-	box-shadow: 0 5px 10px black;
-	font-size: 12px;
-	font-weight: bold;
-	color: black;
-	cursor: pointer;
-	transition: opacity 100ms 200ms linear;
-}
-
-#image-container #copy-all-names:hover {
-	opacity: 1;
-	transition: opacity 100ms 0ms linear;
-}
-
 #alert {
 	position: fixed;
 	z-index: 1;
@@ -243,6 +254,10 @@ footer.special #close_footer strong {
 	transition: opacity 50ms linear;
 }
 
+#options_prompts {
+	display: none;
+}
+
 #options_info,
 #options_prompts,
 #options_artist_sort,
@@ -250,13 +265,27 @@ footer.special #close_footer strong {
 	margin-right: 10px;
 }
 
-#options_info > span:first-child,
 #options_prompts > span:first-child,
 #options_artist_sort > span:first-child,
 #options_tag_sort > span:first-child {
 	margin-left: 21px;
 }
 
+#toggles #options_info .count {
+	color: #ffe300;
+	opacity: 0.8;
+	font-weight: bold;
+}
+
+#options_info i {
+	box-sizing: border-box;
+	padding: 1px 7px 1px 5px;
+	background-color: #777;
+	border: 1px solid #ddd;
+	border-radius: 2px;
+	font-size: 12px;
+}
+
 #toggles label {
 	margin: 0 20px 0 0;
 	white-space: nowrap;
@@ -403,88 +432,202 @@ footer.special #close_footer strong {
 	content: 'count';
 }
 
-.information {
+#info_switcher {
+	display: flex;
+	flex-direction: row;
+	background-color: #111;
+}
+
+#info_switcher h2 {
+	margin: 0;
+	padding: 20px;
+	white-space: nowrap;
+	font-size: 16px;
+	cursor: pointer;
+}
+
+#info_switcher h2:hover {
+	background-color: #222;
+}
+
+#info_switcher h2.selected {
+	background-color: #222;
+	cursor: default;
+}
+
+#info_closer {
+	position: absolute;
+	right: 0;
+	font-weight: normal;
+	color: #555
+}
+
+#information {
 	display: none;
+	flex-direction: column;
 	z-index: 2;
 	position: fixed;
-	top: 20px;
-	left: 20px;
-	width: calc(40% - 40px);
-	max-height: calc(100% - 110px);
-	padding: 20px;
-	overflow: auto;
+	top: 50%;
+	left: 50%;
+	transform: translateX(-50%) translateY(-50%);
+	width: 50%;
+	max-width: 600px;
+	height: 50%;
+	border: 4px solid #ffe30080;
+	border-radius: 20px;
+	box-shadow: 0 10px 20px #000;
 	background-color: #222;
-	border-radius: 2px;
-	border: 1px solid black;
-	box-shadow: 0 1px 0px #ffffff3d;
+	overflow: hidden;
 }
 
-.information div {
-	opacity: 0.8;
+#information.shown {
+	display: flex;
+}
+
+.information_section {
+	display: none;
+	padding: 20px;
+	box-sizing: border-box;
+	overflow-y: scroll;
+}
+
+.information_section.selected {
+	display: block;
 }
 
-.information h2, .information h3, .information ul{
+.information_section h2, .information_section h3, .information_section ul{
 	margin-top: 0;
 	margin-left: 0;
 }
 
-.information h3 {
+.information_section h3 {
 	margin-bottom: 10px;
+	font-size: 16px;
+	color: #ffe300;
 }
 
-.information a {
+.information_section a {
 	color: #00ffe7;
 	font-weight: bold;
 	text-decoration: none;
 }
 
-
-.information a:hover {
+.information_section a:hover {
 	color: #fff;
 }
 
-
-.information.shown {
-	display: block;
+.information_section .buttons {
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 20px;
 }
 
-#instructions {
+.information_section .buttons div {
+	display: inline-block;
+	margin-right: 10px;
+	padding: 4px 8px;
+	opacity: 0.8;
+	border: 1px solid #ffe300;
+	border-radius: 4px;
+	cursor: pointer;
+	white-space: nowrap;
+	background-color: black;
+	color: #ffe300;
+	font-size: 12px;
+	font-weight: bold;
+	transition: opacity 100ms 200ms linear;
 }
 
-#about {
+.information_section .buttons div:hover {
+	opacity: 1;
+	transition: opacity 100ms 0ms linear;
+}
 
+#information_actions {
+	display: flex;
+	flex-direction: column;
 }
 
-#export textarea {
-	resize: vertical;
+#info_search_input {
 	width: 100%;
-	height: 150px;
+	margin-bottom: 20px;
+	box-sizing: border-box;
+	padding: 10px;
+	border-radius: 4px;
+	border: none;
+	font-size: 16px;
 }
 
-#export .buttons {
+#info_search_output {
+	flex-grow: 1;
+	/* min-height is needed for flex-grow to to work */
+	min-height: 35px;
 	display: flex;
-	flex-direction: row;
-	margin-bottom: 20px;
+	flex-direction: column;
+	overflow-y: scroll;
+	background-color: #333;
+	border-radius: 4px;
 }
 
-#export .buttons div {
-	cursor: pointer;
+#info_search_output label {
 	opacity: 0.8;
-	padding: 10px;
+	padding: 5px;
 }
 
-#export .buttons div:hover {
+#info_search_output label:hover {
 	opacity: 1;
 }
 
-#export #import_favorites_button, #export #delete_edits_button {
-	opacity: 1;
+#info_search_output label.hidden::after {
+	content: 'low-use is hidden';
+	margin-left: 10px;
+	position: relative;
+	bottom: 1px;
+	padding: 0px 6px;
+	box-sizing: border-box;
+	font-size: 12px;
+	color: #00ffe5;
+	background-color: black;
+	border-radius: 2px;
+}
+
+#info_search_output i {
+	display: none;
+}
+
+#info_search_output .count {
+	opacity: 0.5;
+}
+
+#info_search_output input {
+	margin-right: 10px;
+}
+
+#information_export textarea {
+	width: 90%;
+	height: 150px;
+	margin-bottom: 10px;
+	resize: vertical;
+	background-color: #777;
+	border: none;
+}
+
+#information_export #export_edits_list,
+#information_export #export_artists_list {
+	background-color: #bbb;
+	cursor: not-allowed;
+}
+
+#information_export #import_favorites_button,
+#information_export #delete_edits_button {
 	color: #f77;
+	border: 1px solid #f77;
 }
 
-#export #import_favorites_button:hover, #export #delete_edits_button:hover {
+#information_export #import_favorites_button:hover,
+#information_export #delete_edits_button:hover {
 	opacity: 1;
-	color: #fff;
+	color: #f77;
 }
 
 #filtersHidingAll {
@@ -739,23 +882,23 @@ footer.special #close_footer strong {
 }
 
 @keyframes enlarge {
-  0%   {
-    opacity: 0;
+	0%   {
+		opacity: 0;
 	transform: translateY(0px);
-  }
-  100% {
-    opacity: 1;
+	}
+	100% {
+		opacity: 1;
 	transform: translateY(20px);
-  }
+	}
 }
 
 @keyframes reduce {
-  0%   {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+	0%   {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 .image-item .deprecated {

index.html

@@ -13,127 +13,134 @@
 <body>
 	<div id="layout">
 		<div id="rows">
-			<div id="instructions" class="information">
-				<div>
-					<h2>How to</h2>
-					<h3>Clicking an artist's...</h3>
-					<ul>
-						<li><strong>name</strong> copies them to clipboard</li>
-						<li><strong>tags</strong> toggles those checkmarks</li>
-						<li><strong>star</strong> marks them as favorite</li>
-						<li>🎨, 🧑, and 🏞️ switches the prompt/image</li>
-						<li>✍️ enters tag-editing mode, see below</li>
-					</ul>
-					<h3>Permissive filter</h3>
-					<ul>
-						<li><strong>checked:</strong> artists matching <strong>any</strong> checked tags</li>
-						<li><strong>unchecked:</strong> artists matching <strong>all</strong> checked tags</li>
-						<li>use unchecked to filter your favorites</li>
-					</ul>
-					<h3>Hide low-use tags</h3>
-					<ul>
-						<li><strong>checked:</strong> hides tags that match less than 4 artists, ~50% of all tags</li>
-						<li>note that all hidden tags are unchecked</li>
-					</ul>
-					<h3>Hide unknown to SDXL</h3>
-					<ul>
-						<li>I've hand verified that SDXL doesn't know these artists' styles</li>
-						<li>If you prompt with their names, the result will be unlike their actual style and generic, and you can achieve similar results by prompting "a painting", etc.</li>
-						<li>They're included in the database for the record of whar SDXL doesn't know, but the images may be removed.</li>
-					</ul>
-					<h3>When using Stable Diffusion</h3>
-					<ul>
-						<li>Reproduce these styles with the prompt with "by {Artist full name}, ...."</li>
-						<li>Adding the style tags to the prompt can also help</li>
-						<li>You can combine the styles of two are more artists</li>
-					</ul>
-					<h3>✍️ Tag-editing is only for offline use!</h3>
-					<ul>
-						<li>If you are viewing this from Hugging Face, your tag edits won't be applied.  They'll be saved and applied if you've downloaded the repository and are viewing your local file.  In both cases, your edits will be available for export 📥 as text.  If you want to suggestions for tag improvements for everyone's benefit, then edit tags, copy the text from 📥, and post it as a comment to Hugging Face.  I will incorporate accurate edits ASAP.  Thank you for contributing!</li>
-					</ul>
+			<div id="information">
+				<div id="info_switcher">
+					<h2 id="info_actions" class="selected">🔍&nbsp;&nbsp;&nbsp;actions</h2>
+					<h2 id="info_help">⁉️&nbsp;&nbsp;&nbsp;how to</h2>
+					<h2 id="info_about">📓&nbsp;&nbsp;&nbsp;about</h2>
+					<h2 id="info_export">📤&nbsp;&nbsp;&nbsp;export</h2>
+					<h2 id="info_closer">ESC</h2>
 				</div>
-			</div>
-			<div id="about" class="information">
-				<div>
-					<h2>About</h2>
-					<h3>Incomplete beta version!</h3>
-					<p>
-						I'll add thousands more artists to the database soon.  I want to work out any major issues first.  Please <a href="https://huggingface.co/spaces/mattthew/SDXL-artists-browser/discussions" target="_blank">give feedback on Huggingface</a>.
-					</p>
-					<h3>How to support this project</h3>
-					<ul>
-						<li>Please tell a friends or share on your socials</li>
-						<li>Suggest artists I should add or remove</li>
-						<li>Suggest features and report bugs</li>
-						<li><a href="https://huggingface.co/spaces/mattthew/SDXL-artists-browser/discussions" target="_blank">Leave all feedback on Huggingface</a></li>
-						<li>I don't need money.  Thanks always feels nice!</li>
-					</ul>
-					<h3>Image parameters</h3>
-					<ul>
-						<li>
-							All: Steps: 20, Sampler: DPM++ 2M Karras, CFG scale: 10, Seed: 42 or 43, Size: 1024x1024, Model hash: 31e35c80fc, Model: sd_xl_base_1.0, Version: v1.5.1 (no refiner pass)
-						</li>
-						<li>
-						 	🎨 Prompt: by {Artist full name}, artwork image, Negative prompt: frame, border, text, signature
-						</li>
-						<li>
-							🧑 Prompt: by {Artist full name}, image of a gently smiling face, portrait of a person, head and torso, sitting in their room, Negative prompt: self-portrait, outside, frame, border, text, signature
-						</li>
-						<li>
-							🏞️ Prompt: by {Artist full name}, image of a landscape, outdoor natural scenery, water, bridge, Negative prompt: people, person, frame, border, text, signature
-						</li>
-					</ul>
-					<h3>Disclaimers</h3>
-					<ul>
-						<li>This tools is just for fun.  This information NOT be correct! The tags are from a mix of sources and manual input.  Many tags are AI generated.  I make corrections when I happen to spot them or when submitted.</li>
-						<li>Remember, SDXL is only a crude imitation of these artists.  Check out these artists' actual artwork for more inspiration!</li>
-						<li>This database has more straight white male artists than in the actual population.  That's because they've been favored by art-collectors, past and present.  Please suggest artists I should add.</li>
-						<li>My code doesn't use cookies and sends nothing to any server.  But it's hosted on Huggingface, and I can't control if they cookie you</li>
-						<li>Open source.  Creatives Commons license.  Download for free.</li>
-						<li>I don't get nor do I want compensation for this</li>
-						<li>I'm not affiliated with Stability AI</li>
-						<li>Use at your own risk 🧟</li>
-					</ul>
-					<h3>Why do many images show a car?</h3>
-					<ul>
-						<li>
-							It's an artifact of the way SDXL was trained.  It appears consistently, but not always, for any prompt doesn't include a specific subject.  Surprisingly, the car appears for many artists, for many different seeds, and for many different prompts and negative prompts.  For example, I use the non-specific 🎨 prompt, "artwork image".  I picked that intentionally to reveal the subject matter biases SDXL has for each artist.  This artifact of SDXL probably reveals a bias of the model towards generating car images.
-						</li>
-					</ul>
-					<h3>Missing images</h3>
-					<p>
-						If artists are listed in the database file, but their image files are missing, the files are listed below.
-					</p>
-					<ul id="missing_images_report"></ul>
-				</div>
-			</div>
-			<div id="export" class="information">
-				<div>
-					<h3>Export/Import favorited artists</h2>
-					<textarea id="export_favorites_list" placeholder="You haven't favorited any artists yet."></textarea>
+				<div id="information_actions" class="information_section selected">
 					<div class="buttons">
-						<div id="export_favorites_button">copy to clipboard</div>
-						<div id="import_favorites_button">import</div>
+						<div id="copy-all-names">copy matching artist names</div>
 					</div>
-					<h3>Export tag-edits to send to author</h2>
-					<textarea id="export_edits_list" placeholder="You haven't edited any tags yet."></textarea>
-					<div class="buttons">
-						<div id="export_edits_button">copy to clipboard</div>
-						<div id="delete_edits_button">restore official database</div>
+					<input type="text" id="info_search_input" name="info_search_input" value="" data-match="" placeholder="search for tags" autocomplete="off">
+					<div id="info_search_output"></div>
+				</div>
+				<div id="information_help" class="information_section">
+					<div>
+						<h3>Clicking an artist's...</h3>
+						<ul>
+							<li><strong>name</strong> copies them to clipboard</li>
+							<li><strong>tags</strong> toggles those checkmarks</li>
+							<li><strong>star</strong> marks them as favorite</li>
+							<li>🎨, 🧑, and 🏞️ switches the prompt/image</li>
+							<li>✍️ enters tag-editing mode, see below</li>
+						</ul>
+						<h3>Permissive filter</h3>
+						<ul>
+							<li><strong>checked:</strong> artists matching <strong>any</strong> checked tags</li>
+							<li><strong>unchecked:</strong> artists matching <strong>all</strong> checked tags</li>
+							<li>use unchecked to filter your favorites</li>
+						</ul>
+						<h3>Hide low-use tags</h3>
+						<ul>
+							<li><strong>checked:</strong> hides tags that match less than 4 artists, ~50% of all tags</li>
+							<li>note that all hidden tags are unchecked</li>
+						</ul>
+						<h3>Hide unknown to SDXL</h3>
+						<ul>
+							<li>I've hand verified that SDXL doesn't know these artists' styles</li>
+							<li>If you prompt with their names, the result will be unlike their actual style and generic, and you can achieve similar results by prompting "a painting", etc.</li>
+							<li>They're included in the database for the record of whar SDXL doesn't know, but the images may be removed.</li>
+						</ul>
+						<h3>When using Stable Diffusion</h3>
+						<ul>
+							<li>Reproduce these styles with the prompt with "by {Artist full name}, ...."</li>
+							<li>Adding the style tags to the prompt can also help</li>
+							<li>You can combine the styles of two are more artists</li>
+						</ul>
+						<h3>✍️ Tag-editing is only for offline use!</h3>
+						<ul>
+							<li>If you are viewing this from Hugging Face, your tag edits won't be applied.  They'll be saved and applied if you've downloaded the repository and are viewing your local file.  In both cases, your edits will be available for export 📥 as text.  If you want to suggestions for tag improvements for everyone's benefit, then edit tags, copy the text from 📥, and post it as a comment to Hugging Face.  I will incorporate accurate edits ASAP.  Thank you for contributing!</li>
+						</ul>
 					</div>
-					<h3>Export database</h2>
-					<textarea id="export_artists_list"></textarea>
-					<div class="buttons">
-						<div id="export_artists_button">copy to clipboard</div>
+				</div>
+				<div id="information_about" class="information_section">
+					<div>
+						<h3>How to support this project</h3>
+						<ul>
+							<li>Please tell a friends or share on your socials</li>
+							<li>Suggest artists I should add or remove</li>
+							<li>Suggest features and report bugs</li>
+							<li><a href="https://huggingface.co/spaces/mattthew/SDXL-artists-browser/discussions" target="_blank">Leave all feedback on Huggingface</a></li>
+							<li>I don't need money.  Thanks always feels nice!</li>
+						</ul>
+						<h3>Image parameters</h3>
+						<ul>
+							<li>
+								All: Steps: 20, Sampler: DPM++ 2M Karras, CFG scale: 10, Seed: 42 or 43, Size: 1024x1024, Model hash: 31e35c80fc, Model: sd_xl_base_1.0, Version: v1.5.1 (no refiner pass)
+							</li>
+							<li>
+							 	🎨 Prompt: by {Artist full name}, artwork image, Negative prompt: frame, border, text, signature
+							</li>
+							<li>
+								🧑 Prompt: by {Artist full name}, image of a gently smiling face, portrait of a person, head and torso, sitting in their room, Negative prompt: self-portrait, outside, frame, border, text, signature
+							</li>
+							<li>
+								🏞️ Prompt: by {Artist full name}, image of a landscape, outdoor natural scenery, water, bridge, Negative prompt: people, person, frame, border, text, signature
+							</li>
+						</ul>
+						<h3>Disclaimers</h3>
+						<ul>
+							<li>This tools is just for fun.  This information NOT be correct! The tags are from a mix of sources and manual input.  Many tags are AI generated.  I make corrections when I happen to spot them or when submitted.</li>
+							<li>Remember, SDXL is only a crude imitation of these artists.  Check out these artists' actual artwork for more inspiration!</li>
+							<li>This database has more straight white male artists than in the actual population.  That's because they've been favored by art-collectors, past and present.  Please suggest artists I should add.</li>
+							<li>My code doesn't use cookies and sends nothing to any server.  But it's hosted on Huggingface, and I can't control if they cookie you</li>
+							<li>Open source.  Creatives Commons license.  Download for free.</li>
+							<li>I don't get nor do I want compensation for this</li>
+							<li>I'm not affiliated with Stability AI</li>
+							<li>Use at your own risk 🧟</li>
+						</ul>
+						<h3>Why do many images show a car?</h3>
+						<ul>
+							<li>
+								It's an artifact of the way SDXL was trained.  It appears consistently, but not always, for any prompt doesn't include a specific subject.  Surprisingly, the car appears for many artists, for many different seeds, and for many different prompts and negative prompts.  For example, I use the non-specific 🎨 prompt, "artwork image".  I picked that intentionally to reveal the subject matter biases SDXL has for each artist.  This artifact of SDXL probably reveals a bias of the model towards generating car images.
+							</li>
+						</ul>
+						<h3>Missing images</h3>
+						<p>
+							If artists are listed in the database file, but their image files are missing, the files are listed below.
+						</p>
+						<ul id="missing_images_report"></ul>
+					</div>
+				</div>
+				<div id="information_export" class="information_section">
+					<div>
+						<h3>Export/Import favorited artists</h3>
+						<textarea id="export_favorites_list" value="" placeholder="You haven't favorited any artists yet." autocomplete="off"></textarea>
+						<div class="buttons">
+							<div id="export_favorites_button">copy to clipboard</div>
+							<div id="import_favorites_button">import</div>
+						</div>
+						<h3>Export tag-edits to send to author</h3>
+						<textarea id="export_edits_list" value="" placeholder="You haven't edited any tags yet." autocomplete="off" disabled="true"></textarea>
+						<div class="buttons">
+							<div id="export_edits_button">copy to clipboard</div>
+							<div id="delete_edits_button">restore official database</div>
+						</div>
+						<h3>Export database</h3>
+						<textarea id="export_artists_list" value="" placeholder="If this is visible, there's a bug" autocomplete="off" disabled="true"></textarea>
+						<div class="buttons">
+							<div id="export_artists_button">copy to clipboard</div>
+						</div>
 					</div>
 				</div>
 			</div>
 			<div id="toggles">
 				<div id="options_info">
-					<span class="count">documents:</span>
-					<span class="link" id="infoI">⁉️&nbsp;</span>
-					<span class="link" id="infoA">📓&nbsp;</span>
-					<span class="link" id="infoX">📤&nbsp;</span>
+					<span class="count">press <i>/</i> key for actions</span>
 				</div>
 				<div id="options_prompts">
 					<span class="count">show me:</span>
@@ -187,7 +194,6 @@
 					check-mark any tag or ‟permissive”<br>
 					👀
 				</div>
-				<div id="copy-all-names">copy all visible names</div>
 				<!-- JS will insert images here -->
 				<!--
 				<div class="image-item tag1 tag2">

index.js

@@ -8,6 +8,7 @@ var artTypes = ['🎨','🧑','🏞️'];
 var imgTypeShown = 0;
 var log = '';
 var editMostUsedMode = false;
+var informationMode = false;
 var windowWidth = 0;
 var gutterStartPosX, mouseStartPosX, gutterEndPercentX
 var style, tempStyle, stylesheet, tempStylesheet, imgHoverRule, teaseRules;
@@ -496,7 +497,8 @@ function storeCheckboxStateAll(isChecked) {
 async function loadOptionsState() {
 	await loadItemBasedOnAccessType('optionsChecked').then(state => {
 		if(state['prompt']) {
-			document.getElementById('options_prompts').querySelectorAll('.selected')[0].classList.remove('selected');
+			let optionsPrompts = document.getElementById('options_prompts');
+			optionsPrompts.querySelectorAll('.selected')[0].classList.remove('selected');
 			document.getElementById(state['prompt']).classList.add('selected');
 			if(state['prompt'] == 'promptA') {
 				imgTypeShown = 0;
@@ -533,7 +535,8 @@ function highlightSelectedOption(selected) {
 			imgTypeShown++;
 			if(imgTypeShown > 2) { imgTypeShown = 0; }
 		}
-		var links = document.getElementById('options_prompts').querySelectorAll('.link');
+		let optionsPrompts = document.getElementById('options_prompts');
+		var links = optionsPrompts.querySelectorAll('.link');
 		links.forEach(function(link) {
 			link.classList.remove('selected');
 		});
@@ -773,10 +776,8 @@ function unhideBasedOnPermissiveSetting() {
 	var unHidden = document.querySelectorAll('.image-item').length - document.querySelectorAll('.image-item.hidden').length;
 	if(unHidden == 0) {
 		document.getElementById('filtersHidingAll').classList.add('shown');
-		document.getElementById('copy-all-names').style.display = 'none'
 	} else {
 		document.getElementById('filtersHidingAll').classList.remove('shown');
-		document.getElementById('copy-all-names').style.display = ''
 	}
 }
 
@@ -889,26 +890,129 @@ function checkOrUncheckAll(isChecked) {
 	}
 }
 
-function showInstructions() {
-	document.getElementById('instructions').classList.add('shown');
-	hideToggles();
+function showInfo() {
+	document.getElementById('information').classList.add('shown');
+	informationMode = true;
 }
 
-function showAbout() {
-	document.getElementById('about').classList.add('shown');
-	hideToggles();
+function hideInfo() {
+	document.getElementById('info_search_input').value = '';
+	document.getElementById('information').classList.remove('shown');
+	informationMode = false;
+}
+
+function showInformation(tab) {
+	let information = document.querySelectorAll('.information_section');
+	information.forEach(function(element) {
+		element.classList.remove('selected');
+	});
+	document.getElementById('information_' + tab).classList.add('selected');
+	let info = document.querySelectorAll('#info_switcher h2');
+	info.forEach(function(element) {
+		element.classList.remove('selected');
+	});
+	document.getElementById('info_' + tab).classList.add('selected');
+	if (tab == 'actions') {
+		document.getElementById('info_search_input').focus();
+	} else if(tab == 'export') {
+		showExport();
+	}
+}
+
+function searchForTagsInfo() {
+	let input = document.getElementById('info_search_input');
+	if(input.dataset.match != '') {
+		event.preventDefault();
+		if(event.key === 'Backspace' || event.keyCode === 8) {
+			input.value = '';
+			input.dataset.match = '';
+		} else {
+			input.value = input.dataset.match;
+		}
+		return;
+	}
+	let output = document.getElementById('info_search_output');
+	output.innerHTML = '';
+	let matches = 0;
+	let match = '';
+	let range = 'start'
+	let tags = document.querySelectorAll('#toggles label:not(.top_control):not(.category)');
+	tags.forEach(function(tag) {
+		let tagName = tag.querySelector('input').name;
+		if(tagName.toLowerCase().indexOf(input.value.toLowerCase()) > -1) {
+			range = 'continue';
+			let label = tag.cloneNode(true);
+			label.addEventListener('change', function(e) {
+				toggleMatchingTag(this);
+			});
+			output.appendChild(label);
+			match = tagName;
+			matches++;
+		} else {
+			if(range != 'start') {
+				range = 'stop';
+			}
+		}
+		if(range == 'stop') {
+			return;
+		}
+	});
+	if(matches == 1) {
+		input.value = match;
+		event.preventDefault();
+		input.dataset.match = match;
+	} else {
+		sortInfoSearchTags(output);
+	}
+}
+
+function sortInfoSearchTags(output) {
+	let labels = Array.from(output.querySelectorAll('label'));
+	let sortByCount = document.getElementById('sortTC').classList.contains('selected');
+	labels.sort(function(a, b) {
+		if(sortByCount) {
+			var numA = parseInt(a.querySelector('.count').textContent.replace(/,/g, '').trim().substring(2),10);
+			var numB = parseInt(b.querySelector('.count').textContent.replace(/,/g, '').trim().substring(2),10);
+			return numB - numA;
+		} else {
+			var aValue = a.querySelector('input[type="checkbox"]').name;
+			var bValue = b.querySelector('input[type="checkbox"]').name;
+			return aValue.localeCompare(bValue);
+		}
+	});
+	labels.forEach(function(label) {
+		output.appendChild(label);
+	});
+}
+
+function toggleMatchingTag(searchLabel) {
+	let toggleLabels = document.getElementById('toggles').querySelectorAll('label');
+	let searchInput = searchLabel.querySelector('input');
+	let toggleMatch;
+	toggleLabels.forEach(function(label) {
+		let toggleInput = label.querySelector('input');
+		if(toggleInput.value == searchInput.value) {
+			toggleMatch = label;
+			return;
+		}
+	});
+	toggleMatch.querySelector('input').checked = searchInput.checked;
+	hideAllArtists();
+	unhideBasedOnPermissiveSetting();
+	storeCheckboxState(toggleMatch);
+	updateArtistsCountPerTag('click');
+	let input = document.getElementById('info_search_input');
+	input.focus();
 }
 
 function showExport() {
-	hideToggles();
-	document.getElementById('export').classList.add('shown');
 	// favorites
 	var textareaF = document.getElementById('export_favorites_list');
 	var favoritedArtists = false;
 	loadItemBasedOnAccessType('favoritedArtists').then(state => {
 		var value = '';
 		if(state) {
-			value += '\r\n\r\nTo import these favorites later, click "copy to clipboard" and save to any file.  Then paste the text from that file into this text box, and click "import". The imported text must contain the JSON string below (the curly brackets and what\'s between them).\r\n\r\n' + JSON.stringify(state);
+			value += 'To import these favorites later, click "copy to clipboard" and save to any file.  Then paste the text from that file into this text box, and click "import". The imported text must contain the JSON string below (the curly brackets and what\'s between them).\r\n\r\n' + JSON.stringify(state);
 			textareaF.value = value;
 		} else {
 			value += 'You haven\'t favorited any artists yet.\r\n\r\n';
@@ -1021,14 +1125,6 @@ function importFavorites() {
 	}
 }
 
-function hideInformation() {
-	var information = document.querySelectorAll('.information');
-	information.forEach(function(element) {
-		element.classList.remove('shown');
-	});
-	showToggles();
-}
-
 function sortTags() {
 	if(document.getElementById('sortTC').classList.contains('selected')) {
 		sortTagsByCount();
@@ -1450,13 +1546,17 @@ function copyStuffToClipboard(item,stuff) {
 			str += item.querySelectorAll('h3 span')[1].textContent + '\n';
 			count++;
 		}
-		navigator.clipboard.writeText(str)
-			.then(() => {
-				doAlert('Copied ' + count.toLocaleString() + ' names to clipboard!',1);
-			})
-			.catch(() => {
-				doAlert('😭😭 Can\'t access clipboard',1);
-			});
+		if(count > 0) {
+			navigator.clipboard.writeText(str)
+				.then(() => {
+					doAlert('Copied ' + count.toLocaleString() + ' names to clipboard!',1);
+				})
+				.catch(() => {
+					doAlert('😭😭 Can\'t access clipboard',1);
+				});
+		} else {
+			doAlert('No artists are visible!',1);
+		}
 	}
 }
 
@@ -1615,7 +1715,6 @@ function movePartition(e) {
 	document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% - 20px)';
 	document.getElementById('gutter').style.left =  gutterEndPercentX + '%';
 	document.getElementById('image-container').style.marginLeft = 'calc(' + gutterEndPercentX + '% + 50px)';
-	document.getElementById('copy-all-names').style.left = 'calc(' + (gutterEndPercentX + ((100-gutterEndPercentX)/2)) + '% + 25px)';
 	imgHoverRule.style.width = gutterEndPercentX + '%';
 	// prevent text from being selected during drag
 	if (window.getSelection) {
@@ -1637,22 +1736,19 @@ function teasePartition() {
 	tempStyle.id = 'teaseDragStyle';
 	document.head.appendChild(tempStyle);
 	tempStylesheet = tempStyle.sheet;
-	// add temporary transitions
-	tempStylesheet.insertRule('#toggles { transition: width 200ms ease-out; }', 0);
-	tempStylesheet.insertRule('#gutter { transition: left 200ms ease-out; }', 0);
-	tempStylesheet.insertRule('#image-container { transition: margin-left 200ms ease-out, opacity 200ms 200ms linear; }', 0);
-	document.getElementById('image-container').style.opacity = 0;
-	// set position
+	// apply temporary rules
 	window.setTimeout(function() {
-		let gutterEndPercentX = 40;
-		document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% - 20px)';
-		document.getElementById('gutter').style.left =  gutterEndPercentX + '%';
-		document.getElementById('image-container').style.marginLeft = 'calc(' + gutterEndPercentX + '% + 50px)';
-		document.getElementById('image-container').style.opacity = '';
-	},600);
+		tempStylesheet.insertRule('#gutter div { '
+			+ 'animation-name: gutter_tease;'
+			+ 'animation-duration: 800ms;'
+			+ 'animation-timing-function: ease-out;'
+			+ 'animation-iteration-count: 1;'
+			+ 'animation-direction: forward;'
+		+ '}', 0);
+	},1000);
 	window.setTimeout(function() {
 		document.getElementById('teaseDragStyle').remove();
-	},1000);
+	},2000);
 }
 
 function editTagsClicked(clickedImageItem) {
@@ -1927,6 +2023,28 @@ function deleteAllEdits() {
 }
 
 function addAllListeners() {
+	// global
+	document.addEventListener('keydown', function(event) {
+		if(event.key === 'Escape' || event.keyCode === 27) {
+			// event.key for modern browsers, event.keyCode for older ones
+			enterExitEditMostUsedMode('exit');
+			editTagsFindArtistInEditMode();
+			hideInfo();
+		}
+	});
+	document.addEventListener('keyup', function(event) {
+		if(event.key === '/') {
+			showInfo();
+			showInformation('actions');
+		}
+	});
+	document.querySelector('body').addEventListener('click', function(e) {
+		if(informationMode) {
+			if(!e.target.closest('#information')) {
+				hideInfo();
+			}
+		}
+	});
 	// checkboxes
 	var checkboxes = document.querySelectorAll('input[type="checkbox"]');
 	checkboxes.forEach(function(checkbox) {
@@ -1978,39 +2096,35 @@ function addAllListeners() {
 			}
 		}
 	});
-	// options
-	var infoI = document.getElementById('infoI');
-	infoI.addEventListener('click', function(e) {
-		showInstructions();
+	// information
+	var info_actions = document.getElementById('info_actions');
+	info_actions.addEventListener('click', function(e) {
+		showInformation('actions');
 	});
-	var infoA = document.getElementById('infoA');
-	infoA.addEventListener('click', function(e) {
-		showAbout();
+	var info_help = document.getElementById('info_help');
+	info_help.addEventListener('click', function(e) {
+		showInformation('help');
 	});
-	var infoE = document.getElementById('infoX');
-	infoX.addEventListener('click', function(e) {
-		showExport();
+	var info_about = document.getElementById('info_about');
+	info_about.addEventListener('click', function(e) {
+		showInformation('about');
 	});
-	// prompts
-	var promptA = document.getElementById('promptA');
-	promptA.addEventListener('click', function(e) {
-		highlightSelectedOption('promptA');
-		rotatePromptsImages();
-		storeOptionsState();
+	var info_export = document.getElementById('info_export');
+	info_export.addEventListener('click', function(e) {
+		showInformation('export');
 	});
-	var promptP = document.getElementById('promptP');
-	promptP.addEventListener('click', function(e) {
-		highlightSelectedOption('promptP');
-		rotatePromptsImages();
-		storeOptionsState();
+	var info_closer = document.getElementById('info_closer');
+	info_closer.addEventListener('click', function(e) {
+		hideInfo();
 	});
-	var promptL = document.getElementById('promptL');
-	promptL.addEventListener('click', function(e) {
-		highlightSelectedOption('promptL');
-		rotatePromptsImages();
-		storeOptionsState();
+	var info_search = document.getElementById('info_search_input')
+	info_search.addEventListener('keyup', function(e) {
+		searchForTagsInfo(e);
+	});
+	var copyAllNames = document.getElementById('copy-all-names');
+	copyAllNames.addEventListener('click', function(e) {
+		copyStuffToClipboard(this, 'copyAllNames')
 	});
-	// information
 	var export_favorites = document.getElementById('export_favorites_button');
 	export_favorites.addEventListener('click', function(e) {
 		exportTextarea('favorites');
@@ -2031,14 +2145,27 @@ function addAllListeners() {
 	export_artists.addEventListener('click', function(e) {
 		exportTextarea('artists');
 	});
-	var information = document.querySelectorAll('.information');
-	information.forEach(function(element) {
-		element.addEventListener('mouseleave', function(e) {
-			if (!element.contains(e.relatedTarget)) {
-				hideInformation();
-			}
-		});
+	// prompts
+	/*
+	var promptA = document.getElementById('promptA');
+	promptA.addEventListener('click', function(e) {
+		highlightSelectedOption('promptA');
+		rotatePromptsImages();
+		storeOptionsState();
 	});
+	var promptP = document.getElementById('promptP');
+	promptP.addEventListener('click', function(e) {
+		highlightSelectedOption('promptP');
+		rotatePromptsImages();
+		storeOptionsState();
+	});
+	var promptL = document.getElementById('promptL');
+	promptL.addEventListener('click', function(e) {
+		highlightSelectedOption('promptL');
+		rotatePromptsImages();
+		storeOptionsState();
+	});
+	*/
 	// sorting
 	var sortTA = document.getElementById('sortTA');
 	sortTA.addEventListener('click', function(e) {
@@ -2069,14 +2196,6 @@ function addAllListeners() {
 	mostUsed.addEventListener('click', function(e) {
 		enterExitEditMostUsedMode();
 	});
-	document.addEventListener('keydown', function(event) {
-		if (event.key === 'Escape' || event.keyCode === 27) {
-			// event.key for modern browsers, event.keyCode for older ones
-			enterExitEditMostUsedMode('exit');
-			editTagsFindArtistInEditMode();
-			hideInformation();
-		}
-	});
 	var labels = document.querySelectorAll('label');
 	Array.from(labels).forEach(function(label) {
 		label.addEventListener('click', function(e) {
@@ -2141,11 +2260,6 @@ function addAllListeners() {
 			gutter.removeEventListener('mousemove', movePartition, false);
 		}, false);
 	}, false);
-	// copy-all
-	var copyAllNames = document.getElementById('copy-all-names');
-	copyAllNames.addEventListener('click', function(e) {
-		copyStuffToClipboard(this, 'copyAllNames')
-	});
 	// footer
 	var closeFooter = document.getElementById('close_footer');
 	closeFooter.addEventListener('click', function(e) {