Improved alert filter UI.

components/alerts/alerts.vue

@@ -52,15 +52,22 @@
 					:class="{ active: filterExpressions }"
 					@click="filterExpressions = !filterExpressions"
 				/>
-			</div>
 
-			<div class="filters-section">
 				<Icon
+					v-if="filterCombined === false"
 					icon="target3"
 					title="Only show uncombined alerts"
+					class="noselect active filters-uncombined"
+					@click="toggleFilterCombined"
+				/>
+
+				<Icon
+					v-else
+					icon="make-group"
+					title="Only show combined alerts"
 					class="noselect filters-uncombined"
 					:class="{ active: filterCombined }"
-					@click="filterCombined = !filterCombined"
+					@click="toggleFilterCombined"
 				/>
 			</div>
 		</div>
@@ -239,7 +246,7 @@ const filterActors = ref(false);
 const filterEntities = ref(false);
 const filterTags = ref(false);
 const filterExpressions = ref(false);
-const filterCombined = ref(false);
+const filterCombined = ref(null);
 
 const filteredAlerts = computed(() => {
 	const queryRegex = new RegExp(query.value, 'i');
@@ -261,7 +268,11 @@ const filteredAlerts = computed(() => {
 			return false;
 		}
 
-		if (filterCombined.value && [...alert.actors, ...alert.entities, ...alert.tags, ...alert.matches].length > 1) {
+		if (filterCombined.value === false && [...alert.actors, ...alert.entities, ...alert.tags, ...alert.matches].length > 1) {
+			return false;
+		}
+
+		if (filterCombined.value === true && [...alert.actors, ...alert.entities, ...alert.tags, ...alert.matches].length === 1) {
 			return false;
 		}
 
@@ -323,6 +334,14 @@ async function removeAlert(alert) {
 		done.value = true;
 	}
 }
+
+const filterCombinedStates = [null, true, false];
+
+function toggleFilterCombined() {
+	const index = filterCombinedStates.indexOf(filterCombined.value);
+
+	filterCombined.value = filterCombinedStates[(index + 1) % filterCombinedStates.length];
+}
 </script>
 
 <style scoped>
@@ -333,9 +352,13 @@ async function removeAlert(alert) {
 
 .filters {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
-	padding-left: .5rem;
-	margin-bottom: .5rem;
+	gap: .5rem;
+	box-sizing: border-box;
+	padding: 0 .5rem;
+	margin: .5rem 0 .75rem 0;
+	overflow: hidden;
 
 	.input {
 		margin-right: 1rem;
@@ -348,22 +371,28 @@ async function removeAlert(alert) {
 		fill: var(--glass);
 
 		&:hover {
-			fill: var(--primary);
+			fill: var(--glass-strong-10);
 			cursor: pointer;
 		}
 
 		&.active {
 			fill: var(--primary);
 		}
+
+		&.success {
+			fill: var(--success);
+		}
+
+		&.error {
+			fill: var(--error);
+		}
 	}
 }
 
-.filters-section {
-	&:not(:last-child) {
-		padding-right: .5rem;
-		border-right: solid 1px var(--glass-weak-30);
-		margin-right: .5rem;
-	}
+.filters-uncombined.icon {
+	padding-left: .75rem;
+	border-left: solid 1px var(--glass-weak-30);
+	margin-left: .5rem;
 }
 
 .alert {
@@ -480,6 +509,10 @@ async function removeAlert(alert) {
 	.alert {
 		padding: 0 .5rem;
 	}
+
+	.filters {
+		justify-content: space-between;
+	}
 }
 
 @media(--small-20) {
@@ -493,4 +526,15 @@ async function removeAlert(alert) {
 		justify-content: space-between;
 	}
 }
+
+@media(--small-30) {
+	.filters {
+		flex-direction: column;
+		justify-content: center;
+
+		.input {
+			width: 100%;
+		}
+	}
+}
 </style>

components/stashes/heart.vue

@@ -5,6 +5,7 @@
 	>
 		<div
 			v-if="showSecondary && !!itemAlerts"
+			class="alert-trigger"
 		>
 			<Icon
 				v-if="itemAlerted"
@@ -360,4 +361,10 @@ async function reloadStashes(newStash) {
 		fill: var(--text-light);
 	}
 }
+
+.alert-trigger:not(:last-child) {
+	padding-right: .25rem;
+	border-right: solid 1px var(--highlight-weak-30);
+	margin-right: .25rem;
+}
 </style>