Moved filter sections to their own components.

assets/css/inputs.css

@@ -22,6 +22,9 @@
 }
 
 .button {
+	display: inline-flex;
+	align-items: center;
+	box-sizing: border-box;
     padding: .5rem 1rem;
     border: none;
     border-radius: .25rem;
@@ -29,10 +32,18 @@
     font-size: 1rem;
     font-weight: bold;
 
+	.icon {
+		padding: .5rem;
+	}
+
 	&:hover {
 		cursor: pointer;
 		background: var(--primary);
 		color: var(--text-light);
+
+		.icon {
+			fill: var(--text-light);
+		}
 	}
 
     &:focus {
@@ -54,6 +65,34 @@
 	}
 }
 
+.button-inline {
+    border: none;
+    background: none;
+	color: var(--grey-dark-20);
+	padding: 0 0 .5rem 0;
+    font-size: 1rem;
+    font-weight: bold;
+
+	.icon {
+		fill: var(--grey-dark-20);
+		padding-left: none;
+	}
+
+	&:hover {
+		cursor: pointer;
+		background: none;
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+
+    &:focus {
+		outline: none;
+    }
+}
+
 .button-cancel {
     background: none;
     color: var(--shadow-strong-10);
@@ -80,6 +119,7 @@
 }
 
 .label-values {
+	flex-shrink: 0;
 	font-weight: normal;
 }
 

assets/css/theme.css

@@ -25,6 +25,7 @@
 	--background-level-10: #fff;
 	--background-level-20: #eee;
 	--background-level-30: #eee;
+	--background-dim: var(--shadow-weak-10);
 
     --shadow-weak-40: rgba(0, 0, 0, .05);
     --shadow-weak-30: rgba(0, 0, 0, .1);

components/actors/tile.vue

@@ -80,6 +80,7 @@ defineProps({
 }
 
 .name {
+	flex-shrink: 0;
 	padding: .25rem .5rem;
 	font-weight: bold;
 	font-size: .9rem;

components/filters/birthdate.vue

@@ -0,0 +1,89 @@
+<template>
+	<div class="filter">
+		<div class="filter-section">
+			<RangeFilter
+				label="age"
+				:min="18"
+				:max="100"
+				:value="filters.age"
+				:disabled="!filters.ageRequired"
+				@enable="(checked) => emit('update', 'ageRequired', checked, filters.ageRequired !== checked)"
+				@input="(range) => emit('update', 'age', range, false)"
+				@change="(range) => emit('update', 'age', range, true)"
+			>
+				<template #start><Icon icon="leaf" /></template>
+				<template #end><Icon icon="tree3" /></template>
+			</RangeFilter>
+		</div>
+
+		<div class="filter-section">
+			<label class="filter-label">
+				<span class="label">
+					<Checkbox
+						:checked="filters.dobRequired"
+						class="checkbox"
+						@change="(checked) => emit('update', 'dobRequired', checked, true)"
+					/>
+
+					<select
+						v-model="dobType"
+						class="input select"
+						@change="(event) => { emit('update', 'dobRequired', true, false); emit('update', 'dobType', dobType, true); }"
+					>
+						<option value="birthday">Birthday</option>
+						<option value="dob">Date of birth</option>
+					</select>
+				</span>
+			</label>
+
+			<div
+				class="input-container"
+				@click="() => emit('update', 'dobRequired', true, true)"
+			>
+				<input
+					:value="filters.dob"
+					:disabled="!filters.dobRequired"
+					:max="maxDob"
+					type="date"
+					class="input"
+					@change="(event) => emit('update', 'dob', event.target.value, true)"
+				>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { format, subYears } from 'date-fns';
+
+import Checkbox from '#/components/form/checkbox.vue';
+import RangeFilter from '#/components/filters/range.vue';
+
+const maxDob = format(subYears(new Date(), 18), 'yyyy-MM-dd');
+
+const props = defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+});
+
+const dobType = ref(props.filters.dobType); // <select> doesn't work well with :value for some reason
+const emit = defineEmits(['update']);
+</script>
+
+<style scoped>
+.input {
+	width: 100%;
+}
+
+.select {
+	flex-grow: 1;
+	color: var(--shadow-strong-10);
+
+	option {
+		color: var(--text);
+	}
+}
+</style>

components/filters/boobs.vue

@@ -0,0 +1,60 @@
+<template>
+	<div class="filter">
+		<RangeFilter
+			label="bra size"
+			:min="0"
+			:max="braSizes.length - 1"
+			:value="filters.braSize"
+			:values="braSizes"
+			:disabled="!filters.braSizeRequired"
+			@enable="(checked) => emit('update', 'braSizeRequired', checked, true)"
+			@input="(range) => emit('update', 'braSize', range, false)"
+			@change="(range) => emit('update', 'braSize', range, true)"
+		>
+			<template #start><Icon icon="boobs-small" /></template>
+			<template #end><Icon icon="boobs-big" /></template>
+		</RangeFilter>
+
+		<span class="filter-label">Enhanced Boobs</span>
+
+		<span
+			:class="{ [['off', 'default', 'on'][naturalBoobsValues.indexOf(filters.naturalBoobs)]]: true }"
+			class="toggle-container noclick"
+		>
+			<span
+				class="toggle-label off"
+				@click="emit('update', 'naturalBoobs', true, true)"
+			><Icon icon="leaf" /></span>
+
+			<input
+				:value="naturalBoobsValues.indexOf(filters.naturalBoobs)"
+				class="toggle"
+				type="range"
+				min="0"
+				max="2"
+				@change="emit('update', 'naturalBoobs', naturalBoobsValues[$event.target.value], true)"
+			>
+
+			<span
+				class="toggle-label on"
+				@click="emit('update', 'naturalBoobs', false, true)"
+			><Icon icon="magic-wand2" /></span>
+		</span>
+	</div>
+</template>
+
+<script setup>
+import RangeFilter from '#/components/filters/range.vue';
+
+defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+
+const braSizes = 'ABCDEFGHIJKZ'.split('');
+const naturalBoobsValues = [true, undefined, false];
+</script>

components/filters/countries.vue

@@ -6,7 +6,7 @@
 			:title="country.name"
 			:class="{ selected: selectedCountry === country.alpha2 }"
 			class="country"
-			@click="updateValue('country', country.alpha2, true)"
+			@click="emit('country', country.alpha2)"
 		>
 			<img
 				:src="`/img/flags/${country.alpha2.toLowerCase()}.svg`"
@@ -18,7 +18,7 @@
 			<Icon
 				v-if="selectedCountry === country.alpha2"
 				icon="cross2"
-				@click.native.stop="updateValue('country', null, true)"
+				@click.native.stop="emit('country', null)"
 			/>
 		</li>
 	</ul>
@@ -34,11 +34,9 @@ defineProps({
 		type: String,
 		default: null,
 	},
-	updateValue: {
-		type: Function,
-		default: null,
-	},
 });
+
+const emit = defineEmits(['country']);
 </script>
 
 <style scoped>

components/filters/country.vue

@@ -0,0 +1,81 @@
+<template>
+	<div
+		v-if="filteredCountries.length > 0"
+		class="countries-container"
+	>
+		<input
+			v-if="!filters.country"
+			v-model="countryQuery"
+			type="search"
+			placeholder="Filter country"
+			class="input input-inline countries-search"
+		>
+
+		<div class="countries-list">
+			<Countries
+				v-if="!countryQuery && !filters.country && topCountries.length < filteredCountries.length"
+				:countries="topCountries"
+				:selected-country="filters.country"
+				@country="(alpha2) => emit('update', 'country', alpha2, true)"
+			/>
+
+			<Countries
+				:countries="filteredCountries"
+				:selected-country="filters.country"
+				@country="(alpha2) => emit('update', 'country', alpha2, true)"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+import Countries from './countries.vue';
+
+const props = defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+	countries: {
+		type: Array,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+
+const pageContext = inject('pageContext');
+const { pageProps } = pageContext;
+
+const allCountries = computed(() => props.countries || pageProps.countries);
+const countryQuery = ref('');
+
+const topCountryAlpha2s = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
+const topCountries = computed(() => topCountryAlpha2s.map((alpha2) => allCountries.value.find((country) => country.alpha2 === alpha2)).filter(Boolean));
+const filteredCountries = computed(() => allCountries.value.filter((country) => new RegExp(countryQuery.value, 'i').test(country.name)));
+</script>
+
+<style scoped>
+.countries-container {
+	border-bottom: solid 1px var(--shadow-weak-30);
+	padding: .25rem 0;
+	margin-bottom: .5rem;
+}
+
+.countries-search {
+	width: 100%;
+	margin-bottom: .25rem;
+	border-bottom: solid 1px var(--shadow-weak-40);
+}
+
+.countries-list {
+	max-height: 13rem;
+	overflow-y: auto;
+}
+
+:deep(.country.selected) .country-name {
+	padding: .5rem;
+}
+</style>

components/filters/filters.vue

@@ -0,0 +1,99 @@
+<template>
+	<div
+		class="filters-container"
+		:class="{ 'compact-hide': !showFilters }"
+		@click="toggleFilters(false)"
+	>
+		<form
+			v-show="showFilters"
+			class="filters"
+			@submit.prevent
+			@click.stop
+		>
+			<slot />
+		</form>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const showFilters = ref(true);
+
+function toggleFilters(state) {
+	showFilters.value = state ?? !showFilters.value;
+}
+</script>
+
+<style scoped>
+.filters-container {
+	position: relative;
+}
+
+.filters {
+	width: 17rem;
+	flex-shrink: 0;
+	padding: .5rem 0;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+.filters-toggle {
+	min-width: 1.5rem;
+	height: 2rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0 .25rem;
+	border-radius: 0 .25rem .25rem 0;
+	background: var(--background);
+	color: var(--shadow);
+	font-weight: bold;
+	box-shadow: inset 0 0 3px var(--shadow-weak-30);
+
+	&.show {
+		padding: 0 .5rem 0 1.25rem;
+
+		.icon {
+			margin-left: .5rem;
+		}
+	}
+
+	.icon {
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+@media (max-width: 1200px) {
+	.filters-container {
+		height: 100%;
+		width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1000;
+		background: var(--background-dim);
+	}
+
+	.filters {
+		height: 100%;
+		overflow-y: auto;
+	}
+
+	.compact-hide {
+		display: none;
+	}
+}
+</style>

components/filters/gender.vue

@@ -0,0 +1,113 @@
+<template>
+	<ul class="filter genders nolist">
+		<li>
+			<button
+				:class="{ selected: filters.gender === undefined }"
+				type="button"
+				class="gender-button all"
+				@click="emit('update', 'gender', undefined, true)"
+			>all</button>
+		</li>
+
+		<li>
+			<button
+				:class="{ selected: filters.gender === 'female' }"
+				type="button"
+				class="gender-button female"
+				@click="emit('update', 'gender', 'female', true)"
+			><Gender gender="female" /></button>
+		</li>
+
+		<li>
+			<button
+				:class="{ selected: filters.gender === 'male' }"
+				type="button"
+				class="gender-button male"
+				@click="emit('update', 'gender', 'male', true)"
+			><Gender gender="male" /></button>
+		</li>
+
+		<li>
+			<button
+				:class="{ selected: filters.gender === 'transsexual' }"
+				type="button"
+				class="gender-button transsexual"
+				@click="emit('update', 'gender', 'transsexual', true)"
+			><Gender gender="transsexual" /></button>
+		</li>
+
+		<li>
+			<button
+				:class="{ selected: filters.gender === 'other' }"
+				type="button"
+				class="gender-button other"
+				@click="emit('update', 'gender', 'other', true)"
+			><Icon icon="question5" /></button>
+		</li>
+	</ul>
+</template>
+
+<script setup>
+import Gender from '#/components/actors/gender.vue';
+
+defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+</script>
+
+<style scoped>
+.genders {
+	display: flex;
+	justify-content: center;
+	gap: .5rem;
+}
+
+.gender-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+	border: none;
+    color: var(--shadow);
+    background: var(--background);
+    font-weight: bold;
+    text-decoration: none;
+	font-size: .9rem;
+    box-shadow: 0 0 3px var(--shadow-weak-20);
+
+    .male,
+    .female,
+    .transsexual {
+        padding: .2rem 0 0 0;
+    }
+
+    .icon {
+        fill: var(--shadow);
+    }
+
+    &:hover {
+        color: var(--text);
+        cursor: pointer;
+
+        .icon {
+            fill: var(--text);
+        }
+    }
+
+    &.selected {
+        background: var(--primary);
+        color: var(--text-light);
+
+        &.other .icon {
+            fill: var(--text-light);
+        }
+    }
+}
+</style>

components/filters/physique.vue

@@ -0,0 +1,46 @@
+<template>
+	<div class="filter">
+		<RangeFilter
+			label="height"
+			:min="50"
+			:max="220"
+			:value="filters.height"
+			:disabled="!filters.heightRequired"
+			unit="cm"
+			@enable="(checked) => emit('update', 'heightRequired', checked, filters.heightRequired !== checked)"
+			@input="(range) => emit('update', 'height', range, false)"
+			@change="(range) => emit('update', 'height', range, true)"
+		>
+			<template #start><Icon icon="height-short" /></template>
+			<template #end><Icon icon="height" /></template>
+		</RangeFilter>
+
+		<RangeFilter
+			label="weight"
+			:min="30"
+			:max="200"
+			:value="filters.weight"
+			:disabled="!filters.weightRequired"
+			unit="kg"
+			@enable="(checked) => emit('update', 'weightRequired', checked, filters.weightRequired !== checked)"
+			@input="(range) => emit('update', 'weight', range, false)"
+			@change="(range) => emit('update', 'weight', range, true)"
+		>
+			<template #start><Icon icon="meter-slow" /></template>
+			<template #end><Icon icon="meter-fast" /></template>
+		</RangeFilter>
+	</div>
+</template>
+
+<script setup>
+import RangeFilter from '#/components/filters/range.vue';
+
+defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+</script>

components/header/header.vue

@@ -58,6 +58,7 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 .header {
 	display: flex;
 	align-items: center;
+	z-index: 1000; /* make sure shadow shows up above content */
 	box-shadow: 0 0 3px var(--shadow-weak-10);
 }
 

components/pagination/pagination.vue

@@ -138,9 +138,7 @@ const nextPages = computed(() => Array.from({ length: 4 }, (value, index) => {
 function go(page, event) {
 	if (!props.redirect) {
 		event.preventDefault();
-
 		history.pushState({}, '', event.target.href); // eslint-disable-line no-restricted-globals
-		currentPage.value = page;
 	}
 
 	emit('navigation', {

pages/actors/+Page.vue

@@ -1,10 +1,6 @@
 <template>
 	<div class="page">
-		<form
+		<Filters>
-			v-show="showFilters"
-			class="filters"
-			@submit.prevent
-		>
 			<div class="filter">
 				<input
 					v-model="q"
@@ -15,203 +11,31 @@
 				>
 			</div>
 
-			<ul class="filter genders nolist">
+			<GenderFilter
-				<li>
+				:filters="filters"
-					<button
+				@update="updateFilter"
-						:class="{ selected: filters.gender === undefined }"
+			/>
-						class="gender-button all"
-						@click="updateFilter('gender', undefined, true)"
-					>all</button>
-				</li>
 
-				<li>
+			<BirthdateFilter
-					<button
+				:filters="filters"
-						:class="{ selected: filters.gender === 'female' }"
+				@update="updateFilter"
-						class="gender-button female"
+			/>
-						@click="updateFilter('gender', 'female', true)"
-					><Gender gender="female" /></button>
-				</li>
 
-				<li>
+			<BoobsFilter
-					<button
+				:filters="filters"
-						:class="{ selected: filters.gender === 'male' }"
+				@update="updateFilter"
-						class="gender-button male"
+			/>
-						@click="updateFilter('gender', 'male', true)"
-					><Gender gender="male" /></button>
-				</li>
 
-				<li>
+			<PhysiqueFilter
-					<button
+				:filters="filters"
-						:class="{ selected: filters.gender === 'transsexual' }"
+				@update="updateFilter"
-						class="gender-button transsexual"
+			/>
-						@click="updateFilter('gender', 'transsexual', true)"
-					><Gender gender="transsexual" /></button>
-				</li>
 
-				<li>
+			<CountryFilter
-					<button
+				:filters="filters"
-						:class="{ selected: filters.gender === 'other' }"
+				:countries="countries"
-						class="gender-button other"
+				@update="updateFilter"
-						@click="updateFilter('gender', 'other', true)"
+			/>
-					><Icon icon="question5" /></button>
-				</li>
-			</ul>
-
-			<div class="filter">
-				<div class="filter-section">
-					<RangeFilter
-						label="age"
-						:min="18"
-						:max="100"
-						:value="filters.age"
-						:disabled="!filters.ageRequired"
-						@enable="(checked) => updateFilter('ageRequired', checked, filters.ageRequired !== checked)"
-						@input="(range) => updateFilter('age', range, false)"
-						@change="(range) => updateFilter('age', range, true)"
-					>
-						<template #start><Icon icon="leaf" /></template>
-						<template #end><Icon icon="tree3" /></template>
-					</RangeFilter>
-				</div>
-
-				<div class="filter-section">
-					<label class="filter-label">
-						<span class="label">
-							<Checkbox
-								:checked="filters.dobRequired"
-								class="checkbox"
-								@change="(checked) => updateFilter('dobRequired', checked, true)"
-							/>
-
-							<select
-								v-model="filters.dobType"
-								class="input select"
-								@change="() => updateFilter('dobRequired', true, true)"
-							>
-								<option value="birthday">Birthday</option>
-								<option value="dob">Date of birth</option>
-							</select>
-						</span>
-					</label>
-
-					<div
-						class="input-container"
-						@click="() => updateFilter('dobRequired', true, true)"
-					>
-						<input
-							:value="filters.dob"
-							:disabled="!filters.dobRequired"
-							:max="maxDob"
-							type="date"
-							class="input"
-							@change="(event) => updateFilter('dob', event.target.value, true)"
-						>
-					</div>
-				</div>
-			</div>
-
-			<div class="filter">
-				<RangeFilter
-					label="bra size"
-					:min="0"
-					:max="braSizes.length - 1"
-					:value="filters.braSize"
-					:values="braSizes"
-					:disabled="!filters.braSizeRequired"
-					@enable="(checked) => updateFilter('braSizeRequired', checked, true)"
-					@input="(range) => updateFilter('braSize', range, false)"
-					@change="(range) => updateFilter('braSize', range, true)"
-				>
-					<template #start><Icon icon="boobs-small" /></template>
-					<template #end><Icon icon="boobs-big" /></template>
-				</RangeFilter>
-
-				<span class="filter-label">Enhanced Boobs</span>
-
-				<span
-					:class="{ [['off', 'default', 'on'][naturalBoobsValues.indexOf(filters.naturalBoobs)]]: true }"
-					class="toggle-container noclick"
-				>
-					<span
-						class="toggle-label off"
-						@click="updateFilter('naturalBoobs', true, true)"
-					><Icon icon="leaf" /></span>
-
-					<input
-						:value="naturalBoobsValues.indexOf(filters.naturalBoobs)"
-						class="toggle"
-						type="range"
-						min="0"
-						max="2"
-						@change="updateFilter('naturalBoobs', naturalBoobsValues[$event.target.value], true)"
-					>
-
-					<span
-						class="toggle-label on"
-						@click="updateFilter('naturalBoobs', false, true)"
-					><Icon icon="magic-wand2" /></span>
-				</span>
-			</div>
-
-			<div class="filter">
-				<RangeFilter
-					label="height"
-					:min="50"
-					:max="220"
-					:value="filters.height"
-					:disabled="!filters.heightRequired"
-					unit="cm"
-					@enable="(checked) => updateFilter('heightRequired', checked, filters.heightRequired !== checked)"
-					@input="(range) => updateFilter('height', range, false)"
-					@change="(range) => updateFilter('height', range, true)"
-				>
-					<template #start><Icon icon="height-short" /></template>
-					<template #end><Icon icon="height" /></template>
-				</RangeFilter>
-
-				<RangeFilter
-					label="weight"
-					:min="30"
-					:max="200"
-					:value="filters.weight"
-					:disabled="!filters.weightRequired"
-					unit="kg"
-					@enable="(checked) => updateFilter('weightRequired', checked, filters.weightRequired !== checked)"
-					@input="(range) => updateFilter('weight', range, false)"
-					@change="(range) => updateFilter('weight', range, true)"
-				>
-					<template #start><Icon icon="meter-slow" /></template>
-					<template #end><Icon icon="meter-fast" /></template>
-				</RangeFilter>
-			</div>
-
-			<div
-				v-if="filteredCountries.length > 0"
-				class="countries-container"
-			>
-				<input
-					v-if="!filters.country"
-					v-model="countryQuery"
-					type="search"
-					placeholder="Filter country"
-					class="input input-inline countries-search"
-				>
-
-				<div class="countries-list">
-					<Countries
-						v-if="!countryQuery && !filters.country && topCountries.length < filteredCountries.length"
-						:countries="topCountries"
-						:selected-country="filters.country"
-						:update-value="updateFilter"
-					/>
-
-					<Countries
-						:countries="filteredCountries"
-						:selected-country="filters.country"
-						:update-value="updateFilter"
-					/>
-				</div>
-			</div>
 
 			<div class="filter">
 				<Checkbox
@@ -220,89 +44,107 @@
 					@change="(checked) => updateFilter('avatarRequired', checked, true)"
 				/>
 			</div>
-		</form>
+		</Filters>
 
-		<div class="actors-anchor">
+		<div class="actors-container">
-			<div
+			<div class="actors-header">
-				class="sidebar-toggle"
+				<!--
-				@click="toggleFilters"
+				<div
-			>
-				<Icon
 					v-show="showFilters"
-					icon="arrow-left3"
+					class="filters-toggle hide"
-				/>
+					@click.stop="toggleFilters(hide)"
+				>
+					<Icon
+						icon="arrow-left3"
+					/>
+				</div>
 
-				<Icon
+				<div
 					v-show="!showFilters"
-					icon="arrow-right3"
+					class="filters-toggle show"
-				/>
+					@click.stop="toggleFilters(true)"
-			</div>
+				>
+					Filters
+					<Icon
+						icon="arrow-right3"
+					/>
+				</div>
+				-->
 
-			<div
+				<div class="meta">
-				ref="container"
+					<span class="count">{{ total }} results</span>
-				class="actors-container"
+
-			>
+					<select
-				<ul class="actors nolist">
+						v-model="order"
-					<li
+						class="input"
-						v-for="actor in actors"
+						@change="search"
-						:key="`actor-${actor.id}`"
 					>
-						<ActorTile
+						<option value="name.asc">Name</option>
-							:actor="actor"
+						<option value="likes.desc">Likes</option>
-						/>
+						<option value="scenes.desc">Scenes</option>
-					</li>
+					</select>
-				</ul>
+				</div>
-
-				<Pagination
-					:page="currentPage"
-					:total="total"
-					:redirect="false"
-					@navigation="paginate"
-				/>
 			</div>
+
+			<ul class="actors nolist">
+				<li
+					v-for="actor in actors"
+					:key="`actor-${actor.id}`"
+				>
+					<ActorTile
+						:actor="actor"
+					/>
+				</li>
+			</ul>
+
+			<Pagination
+				:page="currentPage"
+				:total="total"
+				:redirect="false"
+				@navigation="paginate"
+			/>
 		</div>
 	</div>
 </template>
 
 <script setup>
-import { ref, computed, inject } from 'vue';
+import { ref, inject } from 'vue';
 import { format, subYears } from 'date-fns';
 
 import navigate from '#/src/navigate.js';
 import { get } from '#/src/api.js';
+import events from '#/src/events.js';
 
 import ActorTile from '#/components/actors/tile.vue';
 import Pagination from '#/components/pagination/pagination.vue';
-import Gender from '#/components/actors/gender.vue';
 import Checkbox from '#/components/form/checkbox.vue';
-import RangeFilter from '#/components/filters/range.vue';
+import Filters from '#/components/filters/filters.vue';
-import Countries from '#/components/filters/countries.vue';
+import GenderFilter from '#/components/filters/gender.vue';
+import BirthdateFilter from '#/components/filters/birthdate.vue';
+import BoobsFilter from '#/components/filters/boobs.vue';
+import PhysiqueFilter from '#/components/filters/physique.vue';
+import CountryFilter from '#/components/filters/country.vue';
 
 const pageContext = inject('pageContext');
 const { pageProps, urlParsed, routeParams } = pageContext;
 
 const q = ref(urlParsed.search.q);
 const actors = ref([]);
-
-const container = ref(null);
-const showFilters = ref(true);
-
 const countries = ref(pageProps.countries);
-const countryQuery = ref('');
 
-const topCountryAlpha2s = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
+const showFilters = ref(false);
-const topCountries = computed(() => topCountryAlpha2s.map((alpha2) => countries.value.find((country) => country.alpha2 === alpha2)).filter(Boolean));
-const filteredCountries = computed(() => countries.value.filter((country) => new RegExp(countryQuery.value, 'i').test(country.name)));
 
-const maxDob = format(subYears(new Date(), 18), 'yyyy-MM-dd');
+if (pageContext.isHydration) { // hide sidebar on mobile, we can only run this client-side
+	if (window.matchMedia('(max-width: 1200px)')?.matches) {
+		showFilters.value = false;
+	}
+}
 
 actors.value = pageProps.actors;
 
-const braSizes = 'ABCDEFGHIJKZ'.split('');
-const naturalBoobsValues = [true, undefined, false];
-
 const currentPage = ref(Number(routeParams.page));
 const total = ref(Number(pageProps.total));
+const order = ref(urlParsed.search.order || 'likes.desc');
 
 const filters = ref({
 	gender: urlParsed.search.gender,
@@ -329,6 +171,7 @@ async function search(resetPage = true) {
 
 	const query = {
 		q: q.value || undefined,
+		order: order.value,
 		gender: filters.value.gender || undefined,
 		age: filters.value.ageRequired ? filters.value.age.join(',') : undefined,
 		dob: filters.value.dobRequired ? filters.value.dob : undefined,
@@ -341,15 +184,17 @@ async function search(resetPage = true) {
 		avatar: filters.value.avatarRequired || undefined,
 	};
 
-	const res = await get('/actors', { ...query, page: currentPage.value }); // client uses param rather than query pagination
+	const res = await get('/actors', {
+		...query,
+		page: currentPage.value, // client uses param rather than query pagination
+	});
 
 	actors.value = res.actors;
 	total.value = res.total;
 
 	countries.value = res.countries;
 
-	container.value.scrollTop = 0;
+	events.emit('scrollUp');
-
 	navigate(`/actors/${currentPage.value}`, query, { redirect: false });
 }
 
@@ -359,6 +204,8 @@ function paginate({ page }) {
 }
 
 function updateFilter(prop, value, reload = true) {
+	console.log('update!', prop, value);
+
 	filters.value[prop] = value;
 
 	if (reload) {
@@ -366,9 +213,11 @@ function updateFilter(prop, value, reload = true) {
 	}
 }
 
-function toggleFilters() {
+/*
-	showFilters.value = !showFilters.value;
+function toggleFilters(state) {
+	showFilters.value = state ?? !showFilters.value;
 }
+*/
 </script>
 
 <style>
@@ -401,68 +250,31 @@ function toggleFilters() {
 
 <style scoped>
 .page {
-	height: 100%;
+	min-height: 100%;
 	display: flex;
-	overflow: hidden;
+	align-items: stretch;
 }
 
-.filters {
+.actors-header {
-	width: 17rem;
-	position: relative;
-	flex-shrink: 0;
-	border-right: solid 1px var(--shadow-weak-30);
-	overflow-y: auto;
-
-	.input {
-		width: 100%;
-	}
-}
-
-.filter {
-	padding: .5rem;
-
-	&:not(:last-child) {
-		border-bottom: solid 1px var(--shadow-weak-30);
-	}
-}
-
-.actors-anchor {
-	flex-grow: 1;
-	position: relative;
-}
-
-.sidebar-toggle {
-	width: 1.5rem;
-	height: 2rem;
 	display: flex;
-	justify-content: center;
 	align-items: center;
-	position: absolute;
+	padding: .5rem 0 .75rem 0;
-	bottom: .5rem;
+}
-	left: 0;
-	z-index: 10;
-	border-radius: 0 .25rem .25rem 0;
-	background: var(--background);
-	box-shadow: 0 0 3px var(--shadow-weak-30);
 
-	.icon {
+.meta {
-		fill: var(--shadow);
+	display: flex;
-	}
+	flex-grow: 1;
-
+	justify-content: space-between;
-	&:hover {
+	align-items: center;
-		cursor: pointer;
+	padding: 0 1rem;
-
-		.icon {
-			fill: var(--primary);
-		}
-	}
 }
 
 .actors-container {
-	height: 100%;
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
 	box-sizing: border-box;
-	padding: 1rem;
+	padding: 0 1rem 1rem 1rem;
-	overflow-y: auto;
 }
 
 .actors {
@@ -472,116 +284,15 @@ function toggleFilters() {
 	gap: .25rem;
 }
 
-.genders {
+.filter {
-	display: flex;
-	justify-content: center;
-	gap: .5rem;
-}
-
-.gender-button {
-    width: 2.5rem;
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-	border: none;
-    color: var(--shadow);
-    background: var(--background);
-    font-weight: bold;
-    text-decoration: none;
-	font-size: .9rem;
-    box-shadow: 0 0 3px var(--shadow-weak-20);
-
-    .male,
-    .female,
-    .transsexual {
-        padding: .2rem 0 0 0;
-    }
-
-    .icon {
-        fill: var(--shadow);
-    }
-
-    &:hover {
-        color: var(--text);
-        cursor: pointer;
-
-        .icon {
-            fill: var(--text);
-        }
-    }
-
-    &.selected {
-        background: var(--primary);
-        color: var(--text-light);
-
-        &.other .icon {
-            fill: var(--text-light);
-        }
-    }
-}
-
-.select {
-	flex-grow: 1;
-	color: var(--shadow-strong-10);
-
-	option {
-		color: var(--text);
-	}
-}
-
-.countries-container {
-	border-bottom: solid 1px var(--shadow-weak-30);
-	padding: .25rem 0;
-	margin-bottom: .5rem;
-}
-
-.countries-search {
-	width: 100%;
-	margin-bottom: .25rem;
-	border-bottom: solid 1px var(--shadow-weak-40);
-}
-
-.countries-list {
-	max-height: 13rem;
-	overflow-y: auto;
-}
-
-:deep(.country.selected) .country-name {
 	padding: .5rem;
-}
 
-.filter-trigger {
+	.input {
-	display: flex;
+		width: 100%;
-	align-items: center;
-	color: var(--shadow);
-	font-size: .9rem;
-	font-weight: bold;
-
-	.icon,
-	.flag {
-		fill: var(--shadow);
-		width: 1rem;
-		height: 1rem;
-		margin: -.1rem .75rem 0 0;
 	}
 
-	&:hover {
+	&:not(:last-child) {
-		color: var(--shadow-strong);
+		border-bottom: solid 1px var(--shadow-weak-30);
-		cursor: pointer;
-
-		.icon {
-			fill: var(--shadow-strong);
-		}
-	}
-
-	&.enabled {
-		color: var(--primary);
-
-		.icon {
-			fill: var(--primary);
-		}
 	}
 }
 </style>

pages/actors/+onBeforeRender.js

@@ -10,6 +10,7 @@ export async function onBeforeRender(pageContext) {
 	} = await fetchActors(curateActorsQuery(pageContext.urlQuery), {
 		page: Number(pageContext.routeParams.page) || 1,
 		limit: Number(pageContext.urlParsed.search.limit) || 120,
+		order: pageContext.urlParsed.search.order?.split('.') || ['likes', 'desc'],
 	});
 
 	return {

renderer/container.vue

@@ -5,20 +5,31 @@
 	>
 		<Header />
 
-		<div class="content">
+		<div
-			<slot />
+			ref="content"
+			class="content"
+		>
+			<slot @scroll="scroll" />
 		</div>
 	</div>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+
 import events from '#/src/events.js';
 
 import Header from '../components/header/header.vue';
 
+const content = ref(null);
+
 function blur() {
 	events.emit('blur');
 }
+
+onMounted(() => {
+	events.on('scrollUp', () => { content.value.scrollTop = 0; });
+});
 </script>
 
 <style scoped>

src/actors.js

@@ -23,13 +23,14 @@ export function curateActor(actor, context = {}) {
 			alpha2: actor.residence_country_alpha2,
 			name: actor.residence_country_name,
 		},
-		avatar: actor.avatar_id ? {
+		avatar: actor.avatar && {
-			id: actor.avatar_id,
+			id: actor.avatar.id,
-			path: actor.avatar_path,
+			path: actor.avatar.path,
-			thumbnail: actor.avatar_thumbnail,
+			thumbnail: actor.avatar.thumbnail,
-			lazy: actor.avatar_lazy,
+			lazy: actor.avatar.lazy,
-			isS3: actor.avatar_s3,
+			isS3: actor.avatar.is_s3,
-		} : null,
+		},
+		likes: actor.stashed,
 	};
 }
 
@@ -46,20 +47,9 @@ export function sortActorsByGender(actors) {
 
 export async function fetchActorsById(actorIds) {
 	const [actors] = await Promise.all([
-		knex('actors')
+		knex('actors_meta')
-			.select(
+			.select('actors_meta.*')
-				'actors.*',
+			.whereIn('actors_meta.id', actorIds),
-				'avatars.id as avatar_id',
-				'avatars.path as avatar_path',
-				'avatars.thumbnail as avatar_thumbnail',
-				'avatars.lazy as avatar_lazy',
-				'avatars.width as avatar_width',
-				'avatars.height as avatar_height',
-				'avatars.is_s3 as avatar_s3',
-			)
-			.whereIn('actors.id', actorIds)
-			.leftJoin('media as avatars', 'avatars.id', 'actors.avatar_media_id')
-			.groupBy('actors.id', 'avatars.id'),
 	]);
 
 	const curatedActors = actorIds.map((actorId) => {
@@ -85,6 +75,7 @@ function curateOptions(options) {
 		page: options?.page || 1,
 		limit: options?.limit || 30,
 		requireAvatar: options?.requireAvatar || false,
+		order: [options.order?.[0] || 'name', options.order?.[1] || 'asc'],
 	};
 }
 
@@ -194,12 +185,33 @@ function buildQuery(filters) {
 	return { query, expressions };
 }
 
+const sortMap = {
+	likes: 'stashed',
+	scenes: 'scenes',
+};
+
+function getSort(order) {
+	if (order[0] === 'name') {
+		return [{
+			slug: order[1],
+		}];
+	}
+
+	return [
+		{
+			[sortMap[order[0]]]: order[1],
+		},
+		{
+			slug: 'asc', // sort by name where primary order is equal
+		},
+	];
+}
+
 export async function fetchActors(filters, rawOptions) {
 	const options = curateOptions(rawOptions);
 	const { query, expressions } = buildQuery(filters);
 
 	console.log(options);
-	console.log('offset', (options.page - 1) * options.limit);
 
 	const result = await searchApi.search({
 		index: 'actors',
@@ -207,7 +219,7 @@ export async function fetchActors(filters, rawOptions) {
 		expressions,
 		limit: options.limit,
 		offset: (options.page - 1) * options.limit,
-		sort: [{ slug: 'asc' }],
+		sort: getSort(options.order),
 		aggs: {
 			countries: {
 				terms: {

src/web/actors.js

@@ -27,6 +27,7 @@ export async function fetchActorsApi(req, res) {
 	} = await fetchActors(curateActorsQuery(req.query), {
 		page: Number(req.query.page) || 1,
 		limit: Number(req.query.limit) || 120,
+		order: req.query.order?.split('.') || ['likes', 'desc'],
 	});
 
 	res.send({

vite.config.js

@@ -1,5 +1,5 @@
 import vue from '@vitejs/plugin-vue';
-import vike from 'vike/plugin';
+import vike from 'vike/plugin'; // eslint-disable-line import/extensions
 
 import postCssGlobalData from '@csstools/postcss-global-data';
 import postCssNesting from 'postcss-nesting';