Fixed filter selection disappearing if available list is empty.

components/filters/actors.vue

@@ -9,7 +9,7 @@
 			<input
 				v-model="search"
 				type="search"
-				:placeholder="`Filter ${actors.length} actors`"
+				:placeholder="`Filter ${availableActors.length} actors`"
 				class="input input-inline filters-search"
 			>
 
@@ -51,7 +51,7 @@
 		</div>
 
 		<div
-			v-if="availableActors.length === 0"
+			v-if="availableActors.length === 0 && selectedActors.length === 0"
 			class="filter-empty"
 		>No actors</div>
 

components/filters/channels.vue

@@ -26,7 +26,7 @@
 		</div>
 
 		<div
-			v-if="entities.length === 0"
+			v-if="entities.length === 0 && !filters.entity"
 			class="filter-empty"
 		>No channels</div>
 

components/filters/filters.vue

@@ -9,6 +9,7 @@
 			<div class="filters-sidebar">
 				<form
 					class="filters"
+					:class="{ loading }"
 					@submit.prevent
 					@click.stop
 				>
@@ -54,6 +55,10 @@ defineProps({
 		type: Number,
 		default: null,
 	},
+	loading: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 // desktop defaults to open, compact defaults to closed
@@ -315,6 +320,7 @@ function toggleFilters(state) {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
+	background: var(--background);
 }
 
 .filters {
@@ -332,15 +338,15 @@ function toggleFilters(state) {
 }
 
 .filters-toggle {
-	min-width: 1.5rem;
-	height: 2rem;
+	min-width: 2rem;
+	height: 2.5rem;
 	display: none;
 	justify-content: center;
 	align-items: center;
 	padding: 0 .25rem;
 	position: absolute;
-	top: .5rem;
-	right: -2rem;
+	top: .35rem;
+	right: -2.5rem;
 	border-radius: 0 .5rem .5rem 0;
 	background: var(--background);
 	color: var(--shadow);
@@ -381,6 +387,11 @@ function toggleFilters(state) {
 	border-radius: 0;
 }
 
+.loading {
+	opacity: .3;
+	pointer-events: none;
+}
+
 @media (max-width: 1200px) {
 	.filters-container {
 		display: none;
@@ -389,7 +400,7 @@ function toggleFilters(state) {
 		position: fixed;
 		top: 0;
 		left: 0;
-		z-index: 1000;
+		z-index: 500;
 		background: var(--background-dim);
 
 		&.show {

components/filters/tags.vue

@@ -4,7 +4,7 @@
 			<input
 				v-model="search"
 				type="search"
-				:placeholder="`Filter ${tags.length} tags`"
+				:placeholder="`Filter ${groupedTags.available.length} tags`"
 				class="input input-inline filters-search"
 			>
 
@@ -40,7 +40,7 @@
 		</div>
 
 		<div
-			v-if="groupedTags.available.length === 0"
+			v-if="groupedTags.available.length === 0 && groupedTags.selected.length === 0"
 			class="filter-empty"
 		>No tags</div>
 

components/scenes/scenes.vue

@@ -5,7 +5,7 @@
 		<transition name="sidebar">
 			<Filters
 				v-if="showFilters"
-				:class="{ loading }"
+				:loading="loading"
 			>
 				<div class="filter">
 					<input
@@ -324,7 +324,7 @@ function updateFilter(prop, value, reload = true) {
 	}
 }
 
-.loading:not(.ellipsis) {
+.scenes-container.loading:not(.ellipsis) {
 	opacity: .3;
 	pointer-events: none;
 }