Filter UI tweaks (#10951)

* Make AND/OR language consistent in Filter UI

* tweaks

* use em-dash as separator

* prevent and/or group disappearing for UX

app/src/interfaces/_system/system-filter/nodes.vue

@@ -58,9 +58,19 @@
 						<v-icon name="drag_indicator" class="drag-handle" small />
 						<div class="logic-type" :class="{ or: filterInfo[index].name === '_or' }">
 							<span class="key" @click="toggleLogic(index)">
-								{{ filterInfo[index].name === '_and' ? t('interfaces.filter.all') : t('interfaces.filter.any') }}
+								{{
+									filterInfo[index].name === '_and'
+										? t('interfaces.filter.logic_type_and')
+										: t('interfaces.filter.logic_type_or')
+								}}
+							</span>
+							<span class="text">
+								{{
+									`— ${filterInfo[index].name === '_and' ? t('interfaces.filter.all') : t('interfaces.filter.any')} ${t(
+										'interfaces.filter.of_the_following'
+									)}`
+								}}
 							</span>
-							<span class="text">{{ t('interfaces.filter.of_the_following') }}</span>
 						</div>
 						<span class="delete">
 							<v-icon

app/src/interfaces/_system/system-filter/system-filter.vue

@@ -111,16 +111,10 @@ export default defineComponent({
 				}
 			},
 			set(newVal) {
-				switch (newVal.length) {
-					case 0:
-						emit('input', null);
-						break;
-					case 1:
-						emit('input', newVal[0]);
-						break;
-					default:
-						emit('input', { _and: newVal });
-						break;
+				if (newVal.length === 0) {
+					emit('input', null);
+				} else {
+					emit('input', { _and: newVal });
 				}
 			},
 		});

app/src/lang/translations/en-US.yaml

@@ -1254,6 +1254,8 @@ interfaces:
     add_filter: Add Filter
     add_group: And / Or group
     add_value: Add Value
+    logic_type_and: AND
+    logic_type_or: OR
     all: All
     any: Any
     and: and