Added unidentified actors and actor count filters.

components/actors/search.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { nanoid } from 'nanoid';
 import { ref, useId } from 'vue';
 
 import { get } from '#/src/api.js';
@@ -9,7 +10,12 @@ defineProps({
 		type: Boolean,
 		default: false,
 	},
+	showUnknown: {
+		type: Boolean,
+		default: false,
+	},
 });
+
 const emit = defineEmits(['actor']);
 const dropdownId = useId();
 const actors = ref([]);
@@ -49,6 +55,23 @@ function focus() {
 				>
 
 				<ul class="actors nolist">
+					<li
+						v-if="showUnknown"
+						class="actor-unknown"
+					>
+						<span class="actor-label">Unidentified</span>
+
+						<Icon
+							v-for="gender in ['male', 'female', 'transsexual', null]"
+							:key="`actor-unknown-${gender}`"
+							v-close-popper
+							:icon="gender || 'question5'"
+							class="actor-gender"
+							:class="{ [`actor-${gender || 'other'}`]: true }"
+							@click="emit('actor', { name: gender ? `Unknown ${gender}` : 'Unknown', gender, isUnknown: true, id: `${gender || 'other'}_${nanoid()}` })"
+						/>
+					</li>
+
 					<li
 						v-for="actor in actors"
 						:key="`actor-${actor.slug}`"
@@ -89,6 +112,41 @@ function focus() {
 	}
 }
 
+.actor-unknown {
+	display: flex;
+	align-items: center;
+
+	.actor-label {
+		padding: .25rem .5rem;
+		flex-grow: 1;
+	}
+}
+
+.actor-gender {
+	padding: .5rem .5rem;
+
+	&:hover {
+		background: var(--glass-weak-50);
+		cursor: pointer;
+	}
+}
+
+.actor-male {
+	fill: var(--male);
+}
+
+.actor-female {
+	fill: var(--female);
+}
+
+.actor-transsexual {
+	fill: var(--trans);
+}
+
+.actor-other {
+	fill: var(--glass);
+}
+
 .avatar {
 	position: fixed;
 	display: none;