Integrated channel filter, partially restored actor bio.

components/filters/actors.vue

@@ -78,7 +78,7 @@
 						:title="actor.name"
 					>{{ actor.name }}</span>
 
-					<span class="actor-details">
+					<span class="filter-details">
 						<div class="actor-gender">
 							<Gender
 								:gender="actor.gender"
@@ -180,12 +180,6 @@ function selectGender() {
 	align-items: stretch;
 }
 
-.actor-details {
-	display: flex;
-	align-items: stretch;
-	margin-left: .5rem;
-}
-
 .actor-gender {
 	width: 1rem;
 	display: flex;

components/filters/channels.vue

@@ -13,61 +13,62 @@
 				class="filter-sort order noselect"
 				@click="order = 'count'"
 			>
-				<Icon
-					icon="sort-alpha-asc"
-				/>
+				<Icon icon="sort-alpha-asc" />
 			</div>
 
 			<div
 				v-show="order === 'count'"
 				class="filter-sort order noselect"
-				@click="order = 'priority'"
+				@click="order = 'name'"
 			>
-				<Icon
-					icon="sort-numeric-desc"
-				/>
+				<Icon icon="sort-numeric-desc" />
 			</div>
 		</div>
 
 		<ul
 			class="filter-items nolist"
 		>
-			<template v-for="network in networks">
-				<li
-					v-for="(channel) in [network, ...(network.children || [])]"
-					:key="`filter-channel-${channel.id}`"
-					class="filter-item"
-					:class="{ channel: !channel.isIndependent && channel.type !== 'network', selected: filters.channel?.id === channel.id }"
-					@click="emit('update', 'channel', channel)"
-				>
-					<span class="filter-name">
-						<span
-							class="filter-text"
-							:title="channel.name"
+			<li
+				v-for="entity in entities"
+				:key="`filter-channel-${entity.id}`"
+				class="filter-item"
+				:class="{ channel: !entity.isIndependent && entity.type !== 'network', selected: filters.entity?.id === entity.id }"
+				@click="emit('update', 'entity', entity)"
+			>
+				<span class="filter-name">
+					<span
+						class="filter-text"
+						:title="entity.name"
+					>
+						<img
+							v-if="entity.isIndependent || entity.type === 'network'"
+							:src="`/logos/${entity.slug}/favicon_dark.png`"
+							class="favicon"
 						>
-							<img
-								v-if="channel.isIndependent || channel.type === 'network'"
-								:src="`/logos/${channel.slug}/favicon_dark.png`"
-								class="favicon"
-							>
 
-							<Icon
-								v-else
-								icon="arrow-up4"
-							/>
+						<Icon
+							v-else
+							icon="arrow-up4"
+						/>
 
-							{{ channel.name }}
-						</span>
-
-						<span class="channel-details">
-							<span
-								v-if="channel.count"
-								class="filter-count"
-							>{{ channel.count }}</span>
-						</span>
+						{{ entity.name }}
 					</span>
-				</li>
-			</template>
+
+					<span class="filter-details">
+						<span
+							v-if="entity.count"
+							class="filter-count"
+						>{{ entity.count }}</span>
+
+						<Icon
+							v-if="filters.entity?.id === entity.id"
+							icon="cross2"
+							class="filter-remove"
+							@click.native.stop="emit('update', 'entity', null)"
+						/>
+					</span>
+				</span>
+			</li>
 		</ul>
 	</div>
 </template>
@@ -95,7 +96,15 @@ const order = ref('name');
 const { pageProps } = inject('pageContext');
 const { channel: pageChannel } = pageProps;
 
-const networks = computed(() => {
+function sort(channelA, channelB) {
+	if (order.value === 'count') {
+		return channelB.count - channelA.count;
+	}
+
+	return channelA.name.localeCompare(channelB.name);
+}
+
+const entities = computed(() => {
 	const filteredChannels = props.channels.filter((channel) => channel.id !== pageChannel?.id
 		&& (searchRegexp.value.test(channel.name)
 		|| searchRegexp.value.test(channel.slug)
@@ -119,7 +128,14 @@ const networks = computed(() => {
 		acc[channel.parent.id].children.push(channel);
 
 		return acc;
-	}, {}));
+	}, {}))
+		.map((network) => ({
+			...network,
+			children: network.children?.sort(sort),
+			count: network.count || network.children?.reduce((acc, channel) => acc + channel.count, 0),
+		}))
+		.sort(sort)
+		.flatMap((network) => [network, ...(network.children || [])]);
 });
 </script>
 
@@ -134,11 +150,12 @@ const networks = computed(() => {
 }
 
 .filter-item.channel {
-	.icon {
+	.filter-text .icon {
 		width: 1.5rem;
 		height: 1rem;
 		transform: rotate(-135deg);
 		fill: var(--shadow-weak-30);
+		overflow: hidden; /* prevent parent jumping on load */
 	}
 }
 

components/filters/countries.vue

@@ -18,6 +18,7 @@
 			<Icon
 				v-if="selectedCountry === country.alpha2"
 				icon="cross2"
+				class="filter-remove"
 				@click.native.stop="emit('country', null)"
 			/>
 		</li>
@@ -55,15 +56,6 @@ const emit = defineEmits(['country']);
 		padding: .25rem .25rem .25rem .5rem;
 	}
 
-	.icon {
-		padding: .25rem .6rem;
-		fill: var(--shadow);
-
-		&:hover {
-			fill: var(--shadow-strong-10);
-		}
-	}
-
 	&:hover {
 		background: var(--shadow-weak-30);
 		cursor: pointer;

components/filters/filters.vue

@@ -250,6 +250,21 @@ function toggleFilters(state) {
 	}
 }
 
+.filter-details {
+	display: flex;
+	align-items: stretch;
+	margin-left: .5rem;
+
+	.filter-remove.icon {
+		padding: .25rem .6rem;
+		fill: var(--shadow);
+
+		&:hover {
+			fill: var(--alert);
+		}
+	}
+}
+
 .filter-count {
 	width: 1.5rem;
 	display: flex;