Fixed showcased filter not adhered. Improved filter settings UI.

components/dialog/dialog.vue

@@ -46,6 +46,19 @@ onMounted(() => emit('open'));
 	border-radius: 0 0 .25rem .25rem;
 	background: var(--background);
 }
+
+.dialog-heading {
+	color: var(--primary);
+	margin: 0 0 .5rem 0;
+	font-size: 1rem;
+}
+
+.dialog-description {
+	margin: 0 0 .5rem 0;
+	color: var(--shadow-strong-10);
+	font-size: .9rem;
+	line-height: 1.5;
+}
 </style>
 
 <style scoped>

components/form/checkbox.vue

@@ -71,6 +71,11 @@ defineEmits(['change']);
     }
 }
 
+.check-container.minus .check::after {
+	border-left: none;
+	transform: scaleX(0);
+}
+
 .check-cross .check::before {
 	content: '';
 	width: 100%;
@@ -93,6 +98,14 @@ defineEmits(['change']);
 	}
 }
 
+.check-container.minus .check-checkbox:checked + .check {
+    background: var(--error);
+
+	&::after {
+		transform: scaleX(1);
+	}
+}
+
 .check-label {
 	overflow: hidden;
 	text-transform: capitalize;

components/settings/settings.vue

@@ -2,6 +2,10 @@
 	<Dialog title="Settings">
 		<div class="dialog-body">
 			<div class="dialog-section">
+				<h3 class="dialog-heading">Filter</h3>
+
+				<p class="dialog-description">Check the tags that you prefer to be <strong>excluded</strong> from the results. The filter is a courtesy, and provides no guarantees.</p>
+
 				<ul class="tags nolist">
 					<li
 						v-for="tag in tags"
@@ -11,6 +15,7 @@
 						<label class="tag noselect">
 							<Checkbox
 								:checked="checkedTags.has(tag)"
+								class="minus"
 								@change="(checked) => toggleTag(tag, checked)"
 							/>{{ tag }}
 						</label>

src/web/scenes.js

@@ -35,6 +35,7 @@ export async function curateScenesQuery(query) {
 		notEntityIds,
 		movieId: Number(query.movieId) || null,
 		stashId: Number(query.stashId) || null,
+		isShowcased: query.isShowcased ?? true,
 	};
 }