Merge branch 'master' into experimental

Reviewed-on: http://gitea.unknown.name/DebaucheryLibrarian/traxxx/pulls/44

.eslintrc

@@ -2,7 +2,7 @@
     "root": true,
     "extends": ["airbnb-base", "plugin:vue/recommended"],
     "parserOptions": {
-        "parser": "babel-eslint",
+        "parser": "@babel/eslint-parser",
         "ecmaVersion": 2019,
         "sourceType": "module"
     },
@@ -17,10 +17,11 @@
         "vue/html-indent": ["error", "tab"],
         "vue/multiline-html-element-content-newline": 0,
         "vue/singleline-html-element-content-newline": 0,
+		"vue/multi-word-component-names": 0,
         "no-param-reassign": ["error", {
             "props": true,
             "ignorePropertyModificationsFor": ["state", "acc"]
-        }],
+        }]
     },
     "globals": {
         "CONFIG": true

.gitignore

@@ -2,9 +2,12 @@ node_modules/
 dist/
 log/
 media/
+html/
 public/js/*
 public/css/*
 config/*
 !config/default.js
 assets/js/config/
 !assets/js/config/default.js
+*.heapprofile
+*.heapsnapshot

.nvmrc

@@ -1 +1 @@
-12.13.0
+16.13.0

README.md

@@ -2,12 +2,12 @@
 **NSFW** - The latest releases from your favorite porn studios in one place.
 
 ## Install & run
-Use [nvm](https://github.com/creationix/nvm) to install a recent version of NodeJS. Download and unpack or clone this repository, and run the following in the root directory:
+Use [nvm](https://github.com/creationix/nvm) to install NodeJS v14.15.4 or newer. Download and unpack or clone this repository, and run the following in the root directory:
 
 `npm install`
 
 ### Set up database
-Install PostgreSQL, make sure password authentication is enabled (scram-sha-256) and create a database with a privileged user. For optimal search engine performance, copy `traxxx.stop` to your PostgresQL text search directory, usually `/usr/share/postgresql/tsearch_data/ or `/usr/local/share/postgresql/tsearch_data/`.
+Install PostgreSQL, make sure password authentication is enabled (scram-sha-256) and create a database with a privileged user.
 
 ### Configuration
 Do not modify `config/default.js`, but instead create a copy at `config/local.js` containing the properties you wish to change. If you have set `NODE_ENV`, copy `assets/js/config/default.js` to `assets/js/config/[environment].js`. After setting up PostgreSQL and configuring the details, run the following commands to create and populate the tables, and build the project:
@@ -110,15 +110,17 @@ A GraphQL API is available at `/graphql`, and a REST API is available at the fol
 * `/api/tags/{ID|slug|name}`: Fetch detailed tag by ID, slug or name.
 
 ## Supported networks & sites
-896 channels on 64 networks, continuously expanding!
+1121 channels on 83 networks, continuously expanding!
 
 * 21Naturals
 * 21Sextreme
 * 21Sextury
 * Adult Time
 * Amateur Allure
+* Amateur Euro
+* American Pornstar
 * Assylum
-* Aziani
+* Aziani (Gangbang Creampies)
 * Babes
 * Bang!
 * Bang Bros
@@ -126,24 +128,40 @@ A GraphQL API is available at `/graphql`, and a REST API is available at the fol
 * Brazzers
 * Burning Angel
 * Cherry Pimps
-* DDF Network
+* CzechAV
+* DDF Network / Porn World
 * Digital Playground
 * Dogfart Network
+* Dorcel
+* Elegant Angel
 * Evil Angel
 * Fake Hub
 * Fame Digital
 * Fantasy Massage
-* Full Porn Network
+* FCUK (Exploited College Girls)
+* First Anal Quest
+* ForBondage
+* Full Porn Network (Analized, James Deen)
+* Gaywire
 * Girlsway
+* Hitzefrei
+* Hookup Hotshot
 * Hush Pass
 * Hussie Pass
+* In The Crack
 * Insex
 * Interracial Pass
 * JayRock Productions
+* Jesse Loads Monster Facials
 * Jules Jordan
+* Karups
 * Kelly Madison Media (Teen Fidelity)
+* Killergram
 * Kink
 * LegalPorno
+* LetsDoeIt
+* Little Caprice Dreams
+* Mamacitaz
 * Men
 * Metro HD
 * Mike Adriano
@@ -152,10 +170,13 @@ A GraphQL API is available at `/graphql`, and a REST API is available at the fol
 * Naughty America
 * New Sensations
 * Nubiles
+* Pascal's Sub Sluts
 * Perfect Gonzo
 * Perv City
 * Pimp.XXX
+* Pinky XXX
 * Porn Pros
+* PornCZ
 * Private
 * Pure Taboo
 * Reality Kings
@@ -163,10 +184,13 @@ A GraphQL API is available at `/graphql`, and a REST API is available at the fol
 * Sexy Hub
 * Team Skeet
 * Teen Core Club
+* TransBella
 * Twistys
+* VIP Sex Vault
 * Vivid
 * Vixen
 * VogoV
 * Whale Member (Holed, POVD)
 * Wicked
 * XEmpire
+* ZTOD

assets/components/actors/actor.vue

@@ -6,7 +6,7 @@
 		<div class="actor-header">
 			<h2 class="header-name">
 				<span v-if="actor.entity">{{ actor.name }} ({{ actor.entity.name }})</span>
-				<span v-else="">{{ actor.name }}</span>
+				<span v-else>{{ actor.name }}</span>
 
 				<Gender
 					:gender="actor.gender"
@@ -19,7 +19,13 @@
 				class="bio-item"
 			>
 				<dfn class="bio-label">Also known as</dfn>
-				<span>{{ actor.aliases.join(', ') }}</span>
+				<span class="bio-value">
+					<span
+						v-for="alias in actor.aliases"
+						:key="`alias-${alias.id}`"
+						class="alias"
+					>{{ alias.name }}</span>
+				</span>
 			</li>
 
 			<Social
@@ -27,34 +33,37 @@
 				:actor="actor"
 				class="header-social"
 			/>
+
+			<StashButton
+				:stashed-by="stashedBy"
+				class="actor-stash light"
+				@stash="(stash) => stashActor(stash)"
+				@unstash="(stash) => unstashActor(stash)"
+			/>
 		</div>
 
-		<div class="content-inner actor-inner">
+		<div
+			class="content-inner actor-inner"
+			@scroll="events.emit('scroll', $event)"
+		>
 			<div
 				class="profile"
 				:class="{ expanded: bioExpanded, 'with-avatar': !!actor.avatar }"
 			>
 				<a
 					v-if="actor.avatar"
-					:href="`/media/${actor.avatar.path}`"
+					:href="getPath(actor.avatar)"
 					target="_blank"
 					rel="noopener noreferrer"
 					class="avatar-link"
 				>
 					<img
-						:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+						:src="getPath(actor.avatar, 'thumbnail')"
 						:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
 						class="avatar"
 					>
 				</a>
 
-				<Expand
-					v-if="bioExpanded"
-					:expanded="bioExpanded"
-					class="expand expand-dark"
-					@expand="(state) => bioExpanded = state"
-				/>
-
 				<ul class="bio nolist">
 					<li
 						v-if="actor.realName"
@@ -73,7 +82,19 @@
 						<span class="birthdate">{{ formatDate(actor.dateOfBirth, 'MMMM D, YYYY') }}<span
 							v-if="!actor.dateOfDeath"
 							class="age"
-						>{{ actor.age }}</span></span>
+						>{{ actor.ageFromBirth }}</span></span>
+					</li>
+
+					<li
+						v-else-if="actor.age && !actor.dateOfDeath"
+						class="bio-item"
+					>
+						<dfn class="bio-label"><Icon icon="cake" />Age</dfn>
+
+						<span
+							v-tooltip="'Exact date of birth or age unknown'"
+							class="birthdate"
+						>&gt; {{ actor.age }}</span>
 					</li>
 
 					<li
@@ -298,24 +319,38 @@
 
 				<Expand
 					:expanded="bioExpanded"
-					class="expand expand-dark"
+					class="expand expand-light"
 					@expand="(state) => bioExpanded = state"
 				/>
 			</div>
 
+			<Album
+				v-if="showAlbum"
+				:items="[actor.avatar, ...actor.photos]"
+				:title="actor.name"
+				:portrait="true"
+				:comments="true"
+				@close="$router.replace({ hash: undefined })"
+			/>
+
 			<div class="actor-content">
 				<Scroll
 					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
-					:expanded="photosExpanded"
-					class="scroll-light"
-					@expand="(state) => photosExpanded = state"
+					v-slot="scroll"
 				>
 					<Photos
 						:actor="actor"
 						:class="{ expanded: photosExpanded }"
+						@load="scroll.loaded"
 					/>
 				</Scroll>
 
+				<button
+					v-if="actor.photos && actor.photos.length > 2"
+					class="album-toggle"
+					@click="$router.push({ hash: '#album' })"
+				><Icon icon="grid3" />View album</button>
+
 				<FilterBar
 					ref="filter"
 					:fetch-releases="fetchActor"
@@ -326,11 +361,15 @@
 					:available-actors="actor.actors"
 				/>
 
-				<Releases :releases="releases" />
+				<Releases
+					:releases="releases"
+					:done="done"
+				/>
 
 				<Pagination
 					:items-total="totalCount"
 					:items-per-page="limit"
+					name="actorRange"
 					class="pagination-top"
 				/>
 			</div>
@@ -345,12 +384,16 @@ import Pagination from '../pagination/pagination.vue';
 import FilterBar from '../filters/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Photos from './photos.vue';
+import Album from '../album/album.vue';
 import Expand from '../expand/expand.vue';
 import Scroll from '../scroll/scroll.vue';
 import Gender from './gender.vue';
 import Social from './social.vue';
+import StashButton from '../stashes/button.vue';
+
+async function fetchActor(scroll = true) {
+	this.done = false;
 
-async function fetchActor() {
 	const { actor, releases, totalCount } = await this.$store.dispatch('fetchActorById', {
 		actorId: Number(this.$route.params.actorId),
 		limit: this.limit,
@@ -361,18 +404,44 @@ async function fetchActor() {
 	this.actor = actor;
 	this.releases = releases;
 	this.totalCount = totalCount;
+	this.stashedBy = actor.stashes;
+	this.done = true;
 
-	if (this.$refs.filter) {
+	if (this.$refs.filter && scroll) {
 		this.$refs.filter.$el.scrollIntoView();
 	}
 }
 
+async function stashActor(stashId) {
+	this.stashedBy = await this.$store.dispatch('stashActor', {
+		actorId: this.actor.id,
+		stashId,
+	});
+}
+
+async function unstashActor(stashId) {
+	this.stashedBy = await this.$store.dispatch('unstashActor', {
+		actorId: this.actor.id,
+		stashId,
+	});
+}
+
+function me() {
+	return this.$store.state.auth.user;
+}
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
 
-async function route() {
-	await this.fetchActor();
+function showAlbum() {
+	return this.actor.photos?.length > 0 && this.$route.hash === '#album';
+}
+
+async function watchRoute(to, from) {
+	if ((to.name === 'actor' || to.name === 'actorRange') && to.hash !== '#album' && from.hash !== '#album') {
+		await this.fetchActor();
+	}
 }
 
 async function mounted() {
@@ -385,6 +454,7 @@ async function mounted() {
 
 export default {
 	components: {
+		Album,
 		FilterBar,
 		Pagination,
 		Photos,
@@ -393,27 +463,36 @@ export default {
 		Releases,
 		Gender,
 		Social,
+		StashButton,
 	},
 	data() {
 		return {
 			actor: null,
 			releases: null,
+			done: false,
 			totalCount: 0,
-			limit: 15,
+			limit: 20,
 			pageTitle: null,
 			bioExpanded: false,
 			photosExpanded: false,
+			stashed: false,
+			stashedBy: [],
 		};
 	},
 	computed: {
+		me,
 		sfw,
+		showAlbum,
 	},
 	watch: {
-		$route: route,
+		$route: watchRoute,
+		'$store.state.ui.tagFilter': fetchActor,
 	},
 	mounted,
 	methods: {
 		fetchActor,
+		stashActor,
+		unstashActor,
 	},
 };
 </script>
@@ -434,11 +513,14 @@ export default {
     align-items: center;
     color: var(--lighten-extreme);
     background: var(--profile);
-    padding: .5rem 1rem;
+}
+
+.actor-stash {
+	margin: 0 1rem 0 0;
 }
 
 .header-name {
-    padding: 0;
+    padding: .5rem 1rem;
     margin: 0;
     display: inline-flex;
     justify-content: space-between;
@@ -448,7 +530,7 @@ export default {
 .header-gender {
     display: inline-block;
     margin: 0 0 0 .5rem;
-    transform: translate(0, .1rem);
+    transform: translate(0, .125rem);
 }
 
 .header-social {
@@ -607,6 +689,10 @@ export default {
     text-transform: capitalize;
 }
 
+.alias:not(:last-child)::after {
+	content: ',\00a0';
+}
+
 .scraped {
     color: var(--lighten-weak);
     font-size: .8rem;
@@ -671,10 +757,6 @@ export default {
     margin: 0 0 1rem 0;
 }
 
-.photos {
-	background: var(--background-dim);
-}
-
 .profile-social {
     display: none;
 }
@@ -684,9 +766,26 @@ export default {
 }
 
 .scroll {
+	background: var(--background-dim);
 	border-bottom: solid 1px var(--shadow-hint);
 }
 
+.stash.icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: 0 1rem;
+	fill: var(--lighten);
+
+	&.stashed {
+		fill: var(--primary);
+	}
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
+	}
+}
+
 @media(max-width: $breakpoint4) {
     .descriptions-container {
         display: none;
@@ -738,6 +837,10 @@ export default {
 	.expand {
 		display: block;
 	}
+
+	.actor-stash {
+		margin: 0 .5rem 0 0;
+	}
 }
 
 @media(max-width: $breakpoint0) {
@@ -751,8 +854,16 @@ export default {
     }
 
     .header-name {
-        flex-grow: 1;
+		flex-grow: 1;
 		font-size: 1.3rem;
+		padding: .5rem .5rem .5rem 1rem;
     }
+
+	.stash.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		padding: 0 1rem 0 .25rem;
+		transform: translate(0, -.1rem);
+	}
 }
 </style>

assets/components/actors/actors.vue

@@ -1,70 +1,244 @@
 <template>
-	<div class="actors">
-		<nav class="filter">
-			<ul class="genders nolist">
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'all' }"
-						class="gender-link all"
-					>all</router-link>
-				</li>
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'female', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'female' }"
-						class="gender-link female"
-					><Gender gender="female" /></router-link>
-				</li>
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'male', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'male' }"
-						class="gender-link male"
-						replace
-					><Gender gender="male" /></router-link>
-				</li>
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'trans' }"
-						class="gender-link transsexual"
-						replace
-					><Gender gender="transsexual" /></router-link>
-				</li>
-				<li class="gender">
-					<router-link
-						:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 } }"
-						:class="{ selected: gender === 'other' }"
-						class="gender-link other"
-						replace
-					><Icon icon="question5" /></router-link>
-				</li>
-			</ul>
+	<div
+		ref="content"
+		class="actors"
+	>
+		<nav
+			ref="filters"
+			class="filters"
+		>
+			<div class="filters-row">
+				<ul class="genders nolist">
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'all', pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'all' }"
+							class="gender-link all"
+						>all</router-link>
+					</li>
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'female', pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'female' }"
+							class="gender-link female"
+						><Gender gender="female" /></router-link>
+					</li>
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'male', pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'male' }"
+							class="gender-link male"
+							replace
+						><Gender gender="male" /></router-link>
+					</li>
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'trans', pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'trans' }"
+							class="gender-link transsexual"
+							replace
+						><Gender gender="transsexual" /></router-link>
+					</li>
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'other', pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'other' }"
+							class="gender-link other"
+							replace
+						><Icon icon="question5" /></router-link>
+					</li>
+				</ul>
 
-			<ul class="letters nolist">
-				<li
-					v-for="letterX in letters"
-					:key="letterX"
-					class="letter"
-				>
-					<router-link
-						:to="{ name: 'actors', params: { gender, letter: letterX, pageNumber: 1 } }"
-						:class="{ selected: letterX === letter }"
-						class="letter-link"
-						replace
-					>{{ letterX || 'All' }}</router-link>
-				</li>
-			</ul>
+				<ul class="filters-attributes nolist">
+					<li>
+						<Tooltip class="filter boobs">
+							<span
+								class="filter-trigger"
+								:class="{ enabled: ageRequired }"
+							><Icon icon="vcard" />Age</span>
+
+							<template v-slot:tooltip>
+								<RangeFilter
+									label="age"
+									:min="18"
+									:max="100"
+									:value="age"
+									:disabled="!ageRequired"
+									@enable="(checked) => updateValue('ageRequired', checked, true)"
+									@input="(range) => updateValue('age', range, false)"
+									@change="(range) => updateValue('age', range, true)"
+								>
+									<template v-slot:start><Icon icon="leaf" /></template>
+									<template v-slot:end><Icon icon="tree3" /></template>
+								</RangeFilter>
+
+								<div class="filter-section">
+									<label class="filter-label">
+										<span class="label">
+											<Checkbox
+												:checked="dobRequired"
+												class="checkbox"
+												@change="(checked) => updateValue('dobRequired', checked, true)"
+											/>Date of birth
+										</span>
+									</label>
+
+									<div
+										class="input-container"
+										@click="() => updateValue('dobRequired', true, true)"
+									>
+										<input
+											v-model="dob"
+											:disabled="!dobRequired"
+											type="date"
+											class="input"
+											@change="updateFilters"
+										>
+									</div>
+								</div>
+							</template>
+						</Tooltip>
+					</li>
+
+					<li>
+						<Tooltip class="filter">
+							<span
+								class="filter-trigger boobs"
+								:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
+							><Icon icon="boobs" />Boobs</span>
+
+							<template v-slot:tooltip>
+								<RangeFilter
+									label="size"
+									:min="0"
+									:max="boobSizes.length - 1"
+									:value="boobSize"
+									:values="boobSizes"
+									:disabled="!boobSizeRequired"
+									@enable="(checked) => updateValue('boobSizeRequired', checked, true)"
+									@input="(range) => updateValue('boobSize', range, false)"
+									@change="(range) => updateValue('boobSize', range, true)"
+								>
+									<template v-slot:start><Icon icon="boobs-small" /></template>
+									<template v-slot:end><Icon icon="boobs-big" /></template>
+								</RangeFilter>
+
+								<div class="filter-section">
+									<span class="filter-label">Enhanced</span>
+
+									<span
+										:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
+										class="toggle-container noclick"
+									>
+										<span
+											class="toggle-label off"
+											@click="updateValue('naturalBoobs', 0)"
+										><Icon icon="leaf" /></span>
+
+										<input
+											v-model.number="naturalBoobs"
+											class="toggle"
+											type="range"
+											min="0"
+											max="2"
+											@change="updateFilters"
+										>
+
+										<span
+											class="toggle-label on"
+											@click="updateValue('naturalBoobs', 2)"
+										><Icon icon="magic-wand2" /></span>
+									</span>
+								</div>
+							</template>
+						</Tooltip>
+					</li>
+
+					<li>
+						<Tooltip class="filter boobs">
+							<span
+								class="filter-trigger"
+								:class="{ enabled: heightRequired || weightRequired }"
+							><Icon icon="rulers" />Physique</span>
+
+							<template v-slot:tooltip>
+								<RangeFilter
+									label="height"
+									:min="50"
+									:max="220"
+									:value="height"
+									:disabled="!heightRequired"
+									unit="cm"
+									@enable="(checked) => updateValue('heightRequired', checked, true)"
+									@input="(range) => updateValue('height', range, false)"
+									@change="(range) => updateValue('height', range, true)"
+								>
+									<template v-slot:start><Icon icon="height-short" /></template>
+									<template v-slot:end><Icon icon="height" /></template>
+								</RangeFilter>
+
+								<RangeFilter
+									label="weight"
+									:min="30"
+									:max="200"
+									:value="weight"
+									:disabled="!weightRequired"
+									unit="kg"
+									@enable="(checked) => updateValue('weightRequired', checked, true)"
+									@input="(range) => updateValue('weight', range, false)"
+									@change="(range) => updateValue('weight', range, true)"
+								>
+									<template v-slot:start><Icon icon="meter-slow" /></template>
+									<template v-slot:end><Icon icon="meter-fast" /></template>
+								</RangeFilter>
+							</template>
+						</Tooltip>
+					</li>
+
+					<li>
+						<Tooltip class="filter">
+							<span
+								:class="{ enabled: country }"
+								class="filter-trigger"
+							><img
+								v-if="$route.query.c"
+								:src="`/img/flags/${$route.query.c.toLowerCase()}.svg`"
+								class="flag"
+							><Icon
+								v-else
+								icon="earth2"
+							/>Country</span>
+
+							<template v-slot:tooltip>
+								<input
+									v-model="countryQuery"
+									placeholder="Search"
+									class="input"
+								>
+
+								<Countries
+									v-if="!countryQuery"
+									:countries="topCountries"
+									:selected-country="country"
+									:update-value="updateValue"
+								/>
+
+								<Countries
+									:countries="filteredCountries"
+									:selected-country="country"
+									:update-value="updateValue"
+								/>
+							</template>
+						</Tooltip>
+					</li>
+				</ul>
+			</div>
+
+			<SearchBar :placeholder="`Search ${totalCount} actors`" />
 		</nav>
 
-		<Pagination
-			:items-total="totalCount"
-			:items-per-page="limit"
-		/>
-
 		<div
-			v-lazy-container="{ selector: '.lazy' }"
+			ref="tiles"
 			class="tiles"
 		>
 			<Actor
@@ -78,7 +252,7 @@
 			v-if="totalCount > 0"
 			:items-total="totalCount"
 			:items-per-page="limit"
-			class="pagination-top"
+			class="pagination-bottom"
 		/>
 
 		<Footer />
@@ -86,34 +260,95 @@
 </template>
 
 <script>
+import dayjs from 'dayjs';
+
 import Actor from './tile.vue';
 import Gender from './gender.vue';
+import Checkbox from '../form/checkbox.vue';
+import Countries from './countries.vue';
+import RangeFilter from './filter-range.vue';
+import SearchBar from '../search/bar.vue';
 import Pagination from '../pagination/pagination.vue';
 
-async function fetchActors() {
+const toggleValues = [true, null, false];
+const boobSizes = 'ABCDEFGHIJKZ'.split('');
+const topCountries = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
+
+function updateFilters() {
+	this.$router.push({
+		name: 'actors',
+		params: {
+			pageNumber: 1,
+			gender: this.gender,
+		},
+		query: {
+			nb: this.naturalBoobs !== 1 ? this.naturalBoobs : undefined,
+			bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
+			h: this.heightRequired ? this.height.join(',') : undefined,
+			w: this.weightRequired ? this.weight.join(',') : undefined,
+			c: this.country ? this.country : undefined,
+			age: this.ageRequired ? this.age.join(',') : undefined,
+			dob: this.dobRequired ? this.dob : undefined,
+			query: this.$route.query.query,
+		},
+	});
+}
+
+function updateValue(prop, value, load = true) {
+	this[prop] = value;
+
+	if (load) {
+		this.updateFilters();
+	}
+}
+
+async function fetchActors(scroll) {
 	const curatedGender = this.gender.replace('trans', 'transsexual');
 
-	const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
+	const { actors, countries, totalCount } = await this.$store.dispatch('fetchActors', {
 		limit: this.limit,
 		pageNumber: Number(this.$route.params.pageNumber) || 1,
-		letter: this.letter.replace('all', ''),
+		query: this.$route.query.query,
 		gender: curatedGender === 'other' ? null : curatedGender,
+		age: this.ageRequired && this.age,
+		dob: this.dobRequired && this.dob,
+		boobSize: this.boobSizeRequired && this.boobSize,
+		country: this.country,
+		naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
+		height: this.heightRequired && this.height,
+		weight: this.weightRequired && this.weight,
 	});
 
+	const countriesByAlpha2 = countries.reduce((acc, country) => ({ ...acc, [country.alpha2]: country }), {});
+
 	this.actors = actors;
 	this.totalCount = totalCount;
+
+	this.countries = countries;
+	this.topCountries = [...(this.country && !topCountries.includes(this.country) ? [this.country] : []), ...topCountries].map(alpha2 => countriesByAlpha2[alpha2]);
+
+	if (scroll) {
+		this.$refs.tiles?.scrollIntoView();
+	}
 }
 
-function letter() {
-	return this.$route.params.letter || 'all';
+function filteredCountries() {
+	const countryQueryExpression = new RegExp(this.countryQuery, 'i');
+
+	return this.countryQuery?.length > 0
+		? this.countries.filter(country => countryQueryExpression.test(country.name) || countryQueryExpression.test(country.alpha2))
+		: this.countries;
 }
 
 function gender() {
 	return this.$route.params.gender || 'all';
 }
 
-async function route() {
-	await this.fetchActors();
+async function route(to, from) {
+	const scroll = to.params.pageNumber !== from.params.pageNumber
+		|| to.params.gender !== from.params.gender;
+
+	await this.fetchActors(scroll);
 }
 
 async function mounted() {
@@ -125,21 +360,40 @@ async function mounted() {
 export default {
 	components: {
 		Actor,
+		Checkbox,
+		Countries,
 		Gender,
+		RangeFilter,
+		SearchBar,
 		Pagination,
 	},
 	data() {
 		return {
 			actors: [],
+			countries: [],
+			topCountries: [],
+			countryQuery: null,
 			pageTitle: null,
 			totalCount: 0,
-			limit: 30,
-			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
+			limit: 50,
+			age: this.$route.query.age?.split(',') || [18, 100],
+			ageRequired: !!this.$route.query.age,
+			dob: this.$route.query.dob || dayjs().subtract(21, 'years').format('YYYY-MM-DD'),
+			dobRequired: !!this.$route.query.dob,
+			boobSizes,
+			boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
+			boobSizeRequired: !!this.$route.query.bs,
+			country: this.$route.query.c || null,
+			naturalBoobs: Number(this.$route.query.nb) || 1,
+			height: this.$route.query.h?.split(',').map(Number) || [50, 220],
+			heightRequired: !!this.$route.query.h,
+			weight: this.$route.query.w?.split(',').map(Number) || [30, 200],
+			weightRequired: !!this.$route.query.w,
 		};
 	},
 	computed: {
-		letter,
 		gender,
+		filteredCountries,
 	},
 	watch: {
 		$route: route,
@@ -147,6 +401,8 @@ export default {
 	mounted,
 	methods: {
 		fetchActors,
+		updateFilters,
+		updateValue,
 	},
 };
 </script>
@@ -185,38 +441,53 @@ export default {
 .actors {
     display: flex;
     flex-direction: column;
+	flex-grow: 1;
+	overflow-y: auto;
 }
 
 .tiles {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+	grid-template-rows: min-content;
     grid-gap: .5rem;
     padding: 1rem;
     flex-grow: 1;
 }
 
-.filter {
+.search {
+	width: 0;
+	justify-content: flex-end;
+	flex-grow: 1;
+	box-sizing: border-box;
+	padding: 0 1rem;
+}
+
+.filters,
+.filters-row {
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
-    padding: 0 1rem;
-    margin: 1rem 0;
+}
+
+.filters {
+	margin: 1rem 0 .5rem 0;
+}
+
+.filters-row,
+.filter {
+	padding: 0 1rem;
 }
 
 .genders {
     display: flex;
     flex-shrink: 0;
     padding: 0 .5rem 0 0;
-    border-right: solid 1px var(--shadow-hint);
-    margin: 0 1rem 0 0;
 }
 
-.letter,
 .gender {
     display: inline-block;
 }
 
-.letter-link,
 .gender-link {
     width: 2.5rem;
     height: 2.5rem;
@@ -260,10 +531,235 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint) {
-    .genders {
-        flex-direction: column;
+.filter-trigger {
+	display: inline-flex;
+	align-items: center;
+	color: var(--shadow);
+	font-weight: bold;
+
+	.icon,
+	.flag {
+		fill: var(--shadow);
+		width: 1rem;
+		height: 1rem;
+		margin: -.1rem .75rem 0 0;
+	}
+
+	&:hover {
+		color: var(--shadow-strong);
+		cursor: pointer;
+
+		.icon {
+			fill: var(--shadow-strong);
+		}
+	}
+
+	&.enabled {
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+.label-values {
+	font-weight: normal;
+}
+
+.filter-split {
+	display: flex;
+	align-items: center;
+}
+
+.filter-label {
+	display: flex;
+	justify-content: space-between;
+	padding: .75rem .5rem .5rem .5rem;
+	color: var(--shadow);
+	font-weight: bold;
+	font-size: .9rem;
+
+	.checkbox {
+		margin: 0 .75rem 0 0;
+	}
+
+	.label {
+		display: inline-flex;
+		align-items: center;
+		text-transform: capitalize;
+	}
+}
+
+.input-container {
+	box-sizing: border-box;
+	padding: 0 .5rem .5rem .5rem;
+
+	.input {
+		width: 100%;
+	}
+}
+
+.toggle-container,
+.range-container {
+	display: flex;
+	flex-grow: 1;
+	align-items: center;
+	padding: .5rem 0;
+
+	&.on {
+		.toggle-label.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--enabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--enabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--enabled);
+			}
+		}
+	}
+
+	&.off {
+		.toggle-label.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--disabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--disabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--disabled);
+			}
+		}
+	}
+}
+
+.toggle-label {
+	display: inline-flex;
+	justify-content: center;
+	min-width: 1.5rem;
+	flex-shrink: 0;
+	padding: 0 .5rem;
+	color: var(--shadow);
+	font-weight: bold;
+	font-size: .9rem;
+
+	&.on {
+		text-align: right;
+	}
+
+	.icon {
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		&.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		&.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+	}
+}
+
+.toggle {
+	width: 0;
+	flex-grow: 1;
+	height: 1.25rem;
+	appearance: none;
+	border-radius: 1rem;
+	background-color: var(--shadow-hint);
+	background-image: radial-gradient(circle, var(--shadow-weak) .3rem, transparent calc(.3rem + 1px));
+	cursor: pointer;
+
+	&::-webkit-slider-thumb {
+		appearance: none;
+		background: var(--disabled-handle);
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: .625rem;
+		box-shadow: 0 0 3px var(--darken-weak);
+	}
+
+	&::-moz-range-thumb {
+		appearance: none;
+		background: var(--disabled-handle);
+		width: 1.25rem;
+		height: 1.25rem;
+		border: none;
+		border-radius: .625rem;
+		box-shadow: 0 0 3px var(--darken-weak);
+	}
+}
+
+@media(max-width: $breakpoint-mega) {
+    .filters {
+        flex-direction: column-reverse;
     }
+
+	::v-deep(.search) {
+		width: 100%;
+		justify-content: center;
+		margin: 0 0 1rem 0;
+	}
+}
+
+@media(max-width: $breakpoint-kilo) {
+	.filters {
+		margin: 1rem 0 0 0;
+	}
+
+    .filters-row {
+        flex-direction: column;
+
+		.filter {
+			padding: 0 1rem 1rem 1rem;
+		}
+    }
+
+	.filters-attributes {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	.genders {
+		padding: 0;
+		margin: 0 0 1.5rem 0;
+	}
+
+	.tiles {
+		padding: .5rem 1rem 1rem 1rem;
+	}
 }
 
 @media(max-width: $breakpoint-micro) {

assets/components/actors/countries.vue

@@ -0,0 +1,88 @@
+<template>
+	<ul class="countries nolist">
+		<li
+			v-for="country in countries"
+			:key="country.alpha2"
+			:title="country.name"
+			:class="{ selected: selectedCountry === country.alpha2 }"
+			class="country"
+			@click="updateValue('country', country.alpha2, true)"
+		>
+			<img
+				:src="`/img/flags/${country.alpha2.toLowerCase()}.svg`"
+				class="flag"
+			>
+
+			<span class="country-name">{{ country.alias || country.name }}</span>
+
+			<Icon
+				v-if="selectedCountry === country.alpha2"
+				icon="cross2"
+				@click.native.stop="updateValue('country', null, true)"
+			/>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+	props: {
+		countries: {
+			type: Array,
+			default: () => [],
+		},
+		selectedCountry: {
+			type: String,
+			default: null,
+		},
+		updateValue: {
+			type: Function,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.countries:not(:last-child) {
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
+.country {
+	width: 15rem;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+
+	.flag {
+		width: 1.25rem;
+		padding: .25rem .5rem;
+	}
+
+	.icon {
+		padding: .25rem .5rem;;
+		fill: var(--shadow);
+
+		&:hover {
+			fill: var(--shadow-strong);
+		}
+	}
+
+	&:hover {
+		background: var(--shadow-hint);
+		cursor: pointer;
+	}
+
+	&.selected {
+		font-weight: bold;
+	}
+}
+
+.country-name {
+	flex-grow: 1;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: .25rem .5rem;
+}
+</style>

assets/components/actors/filter-range.vue

@@ -0,0 +1,215 @@
+<template>
+	<div class="filter-section">
+		<label class="filter-label noselect">
+			<span class="label">
+				<Checkbox
+					:checked="!disabled"
+					class="checkbox"
+					@change="(checked) => $emit('enable', checked)"
+				/>{{ label }}
+			</span>
+
+			<span
+				v-if="!disabled"
+				class="label-values"
+			>{{ value[0] }} - {{ value[1] }}<template v-if="unit">&nbsp;{{ unit }}</template></span>
+		</label>
+
+		<span class="filter-split">
+			<Range
+				:min="min"
+				:max="max"
+				:value="value"
+				:values="values"
+				:disabled="disabled"
+				:allow-enable="allowEnable"
+				@enable="$emit('enable', true)"
+				@input="(range) => $emit('input', range)"
+				@change="(range) => $emit('change', range)"
+			>
+				<template v-slot:start><slot name="start" /></template>
+				<template v-slot:end><slot name="end" /></template>
+			</Range>
+		</span>
+	</div>
+</template>
+
+<script>
+import Checkbox from '../form/checkbox.vue';
+import Range from '../form/range.vue';
+
+export default {
+	components: {
+		Checkbox,
+		Range,
+	},
+	props: {
+		label: {
+			type: String,
+			default: null,
+		},
+		value: {
+			type: Array,
+			default: () => [0, 10],
+		},
+		values: {
+			type: Array,
+			default: null,
+		},
+		min: {
+			type: Number,
+			default: 0,
+		},
+		max: {
+			type: Number,
+			default: 10,
+		},
+		unit: {
+			type: String,
+			default: null,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		allowEnable: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	emits: ['change', 'input', 'enable'],
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.filter-section {
+	width: 15rem;
+	max-width: 100%;
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
+.filter-label {
+	display: flex;
+	justify-content: space-between;
+	padding: .75rem .5rem .5rem .5rem;
+	color: var(--shadow);
+	font-weight: bold;
+	font-size: .9rem;
+
+	.label {
+		display: inline-flex;
+		align-items: center;
+		text-transform: capitalize;
+	}
+
+	.checkbox {
+		margin: 0 .75rem 0 0;
+	}
+
+	.icon {
+		margin: 0 .5rem 0 0;
+	}
+}
+
+.label-values {
+	font-weight: normal;
+}
+
+.filter-split {
+	display: flex;
+	align-items: center;
+}
+
+.toggle-container,
+.range-container {
+	display: flex;
+	flex-grow: 1;
+	align-items: center;
+	padding: .5rem 0;
+
+	&.on {
+		.toggle-label.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--enabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--enabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--enabled);
+			}
+		}
+	}
+
+	&.off {
+		.toggle-label.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--disabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--disabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--disabled);
+			}
+		}
+	}
+}
+
+.toggle-label {
+	display: inline-flex;
+	justify-content: center;
+	min-width: 1.5rem;
+	flex-shrink: 0;
+	padding: 0 .5rem;
+	color: var(--shadow);
+	font-weight: bold;
+	font-size: .9rem;
+
+	&.on {
+		text-align: right;
+	}
+
+	.icon {
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		&.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		&.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+	}
+}
+</style>

assets/components/actors/gender.vue

@@ -23,19 +23,19 @@ export default {
 .gender {
     &.female .icon {
         fill: var(--female);
-        filter: drop-shadow(0 0 1px var(--shadow));
+        filter: drop-shadow(0 0 1px var(--darken));
     }
 
     &.male .icon {
         fill: var(--male);
-        filter: drop-shadow(0 0 1px var(--shadow));
+        filter: drop-shadow(0 0 1px var(--darken));
     }
 
     &.transsexual .icon {
-        fill: var(--text-contrast);
+        fill: var(--text-light);
         filter: drop-shadow(1px 0 0 var(--female)) drop-shadow(-1px 0 0 var(--female)) drop-shadow(0 1px 0 var(--female)) drop-shadow(0 -1px 0 var(--female))
             drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male))
-            drop-shadow(0 0 1px var(--shadow))
+            drop-shadow(0 0 1px var(--darken))
     }
 }
 </style>

assets/components/actors/photos.vue

@@ -1,6 +1,5 @@
 <template>
 	<div
-		v-lazy-container
 		class="photos"
 		:class="{
 			avatar: !!actor.avatar,
@@ -8,43 +7,51 @@
 		}"
 	>
 		<a
-			v-show="actor.avatar"
-			:href="`/media/${actor.avatar.path}`"
+			v-if="actor.avatar"
+			:href="getPath(actor.avatar)"
 			target="_blank"
 			rel="noopener noreferrer"
 			class="avatar-link photo-link"
 		>
 			<img
-				:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-				:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-				:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
+				:src="getPath(actor.avatar, 'thumbnail')"
+				:style="{ 'background-image': getBgPath(actor.avatar, 'lazy') }"
 				:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
+				:width="actor.avatar.thumbnailWidth"
+				:height="actor.avatar.thumbnailHeight"
+				loading="lazy"
 				class="avatar photo"
-				@load="$parent.$emit('load')"
+				@load="$emit('load', $event)"
 			>
 		</a>
 
 		<a
-			v-for="photo in actor.photos"
+			v-for="photo in photos"
 			:key="`photo-${photo.id}`"
-			:href="`/media/${photo.path}`"
+			:href="getPath(photo)"
 			target="_blank"
 			rel="noopener noreferrer"
 			class="photo-link"
 		>
 			<img
-				:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-				:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-				:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
+				:src="getPath(photo, 'thumbnail')"
+				:style="{ 'background-image': getBgPath(photo, 'lazy') }"
 				:title="`© ${photo.credit || photo.entity.name}`"
+				:width="photo.thumbnailWidth"
+				:height="photo.thumbnailHeight"
+				loading="lazy"
 				class="photo"
-				@load="$parent.$emit('load')"
+				@load="$emit('load', $event)"
 			>
 		</a>
 	</div>
 </template>
 
 <script>
+function photos() {
+	return this.actor.photos.filter(photo => !photo.entropy || photo.entropy > 5.5);
+}
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@@ -56,8 +63,10 @@ export default {
 			default: null,
 		},
 	},
+	emits: ['load'],
 	computed: {
 		sfw,
+		photos,
 	},
 };
 </script>
@@ -69,11 +78,7 @@ export default {
     display: flex;
 	box-sizing: border-box;
 	padding: .5rem 1rem;
-	margin: 0 1rem 0 0;
     font-size: 0;
-	overflow-x: scroll;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
 
 	&.expanded {
 		flex-wrap: wrap;
@@ -96,20 +101,23 @@ export default {
     .avatar-link {
         display: none;
     }
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
 }
 
 .photo-link {
-	margin: 0 .5rem 0 0;
+	padding: 0 .5rem 0 0;
+
+	&:last-child {
+		padding: 0 1rem 0 0;
+	}
 }
 
 .photo {
     height: 15rem;
+	width: auto;
     box-shadow: 0 0 3px var(--darken-weak);
 	object-fit: cover;
+	background-position: center;
+	background-size: cover;
 }
 
 @media(max-width: $breakpoint3) {

assets/components/actors/preview.vue

@@ -0,0 +1,86 @@
+<template>
+	<router-link
+		:to="`/actor/${actor.id}/${actor.slug}`"
+		class="actor nolink"
+	>
+		<div class="avatar">
+			<img
+				v-if="actor.avatar"
+				:src="getPath(actor.avatar, 'lazy')"
+				class="avatar-image"
+			>
+
+			<Icon
+				v-else-if="actor.gender"
+				:icon="actor.gender"
+				class="avatar-fallback"
+			/>
+		</div>
+
+		<span class="name">{{ actor.name }}</span>
+	</router-link>
+</template>
+
+<script>
+async function unstashActor(actorId, stashId) {
+	await this.$store.dispatch('unstashActor', { actorId, stashId });
+}
+
+export default {
+	props: {
+		actor: {
+			type: Object,
+			default: null,
+		},
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+	methods: {
+		unstashActor,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.actor {
+	height: 2.5rem;
+	display: inline-flex;
+	align-items: center;
+	border: solid 1px var(--shadow-hint);
+
+	&:hover {
+		border: solid 1px var(--primary);
+	}
+}
+
+.avatar {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 100%;
+	border-right: solid 1px var(--shadow-hint);
+}
+
+.avatar-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: 50% 0;
+}
+
+.avatar-fallback {
+	fill: var(--shadow-weak);
+}
+
+.name {
+	display: inline-flex;
+	align-items: center;
+	height: 100%;
+	padding: 0 .5rem;
+	font-size: .8rem;
+	font-weight: bold;
+}
+</style>

assets/components/actors/tile.vue

@@ -3,7 +3,7 @@
 		v-if="actor"
 		class="actor"
 	>
-		<router-link
+		<RouterLink
 			:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
 			class="link"
 		>
@@ -15,17 +15,17 @@
 					class="name"
 				>{{ actor.name }}</span>
 
-				<router-link
-					v-if="actor.network"
-					v-tooltip="actor.network.name"
-					:to="{ name: 'network', params: { networkSlug: actor.network.slug } }"
+				<RouterLink
+					v-if="actor.entity"
+					v-tooltip="actor.entity.name"
+					:to="{ name: actor.entity.type, params: { entitySlug: actor.entity.slug, range: 'new', pageNumber: 1 } }"
 					class="favicon"
 				>
 					<img
-						:src="`/img/logos/${actor.network.slug}/favicon.png`"
+						:src="`/img/logos/${actor.entity.slug}/favicon_dark.png`"
 						class="favicon-icon"
 					>
-				</router-link>
+				</RouterLink>
 
 				<Icon
 					v-if="alias"
@@ -45,9 +45,10 @@
 			<div class="avatar-container">
 				<img
 					v-if="actor.avatar"
-					:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-					:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
-					class="avatar lazy"
+					:src="getPath(actor.avatar, 'thumbnail')"
+					:style="{ 'background-image': getBgPath(actor.avatar, 'lazy') }"
+					loading="lazy"
+					class="avatar"
 				>
 
 				<span
@@ -58,6 +59,27 @@
 					class="avatar-fallback"
 				></span>
 
+				<Icon
+					v-show="(!stash || stash.primary) && favorited"
+					icon="heart7"
+					class="stash stashed"
+					@click.prevent.native="unstashActor"
+				/>
+
+				<Icon
+					v-show="(!stash || stash.primary) && favorited === false"
+					icon="heart8"
+					class="stash unstashed"
+					@click.prevent.native="stashActor"
+				/>
+
+				<Icon
+					v-show="stash && !stash.primary"
+					icon="cross2"
+					class="stash unstash"
+					@click.prevent.native="unstashActor"
+				/>
+
 				<span
 					class="details"
 				>
@@ -71,13 +93,19 @@
 						>{{ actor.ageAtDeath }}</span>
 
 						<span
-							v-else-if="actor.age"
+							v-else-if="actor.ageFromBirth"
 							v-tooltip="`Born on ${formatDate(actor.dateOfBirth, 'MMMM D, YYYY')}`"
 							class="age-now"
+						>{{ actor.ageFromBirth }}</span>
+
+						<span
+							v-else-if="actor.age"
+							v-tooltip="`At least ${actor.age}`"
+							class="age-now"
 						>{{ actor.age }}</span>
 
 						<span
-							v-if="actor.ageThen && actor.ageThen < actor.age"
+							v-if="actor.ageThen && actor.ageThen < actor.ageFromBirth"
 							v-tooltip="`${actor.ageThen} years old on release date`"
 							class="age-then"
 						>{{ actor.ageThen }}</span>
@@ -101,13 +129,45 @@
 					/>
 				</span>
 			</div>
-		</router-link>
+		</RouterLink>
 	</div>
 </template>
 
 <script>
 import Gender from './gender.vue';
 
+async function stashActor() {
+	this.favorited = true;
+
+	try {
+		await this.$store.dispatch('stashActor', {
+			actorId: this.actor.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', true);
+	} catch (error) {
+		this.favorited = false;
+	}
+}
+
+async function unstashActor() {
+	if (!this.stash || this.stash.primary) {
+		this.favorited = false;
+	}
+
+	try {
+		await this.$store.dispatch('unstashActor', {
+			actorId: this.actor.id,
+			stashId: this.stash?.id || this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', false);
+	} catch (error) {
+		this.favorited = true;
+	}
+}
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@@ -125,10 +185,24 @@ export default {
 			type: Object,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+	emits: ['stash'],
+	data() {
+		return {
+			favorited: this.actor.isFavorited,
+		};
 	},
 	computed: {
 		sfw,
 	},
+	methods: {
+		stashActor,
+		unstashActor,
+	},
 };
 </script>
 
@@ -140,7 +214,7 @@ export default {
     display: inline-block;
     position: relative;
     box-shadow: 0 0 3px var(--darken-weak);
-    background: var(--background);
+    background: var(--info);
 	overflow: hidden;
 
     &::before {
@@ -148,6 +222,11 @@ export default {
         display: inline-block;
         padding-bottom: 150%;
     }
+
+	&:hover .unstashed,
+	&:hover .unstash {
+		fill: var(--lighten);
+	}
 }
 
 .link {
@@ -158,12 +237,8 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    color: var(--text);
+    color: var(--text-light);
     text-decoration: none;
-
-    &:hover {
-        color: var(--primary);
-    }
 }
 
 .handle {
@@ -174,7 +249,8 @@ export default {
 	box-shadow: 0 0 3px var(--shadow);
 
 	.name {
-		padding: .5rem;
+		padding: .25rem .5rem;
+		font-size: .9rem;
 	}
 
 	.alias {
@@ -225,7 +301,9 @@ export default {
     align-items: center;
     justify-content: center;
     object-fit: cover;
-    object-position: 50% 0;
+    object-position: center 0;
+	background-size: cover;
+	background-position: center 0;
 }
 
 .avatar-fallback {
@@ -234,6 +312,27 @@ export default {
     opacity: .1;
 }
 
+.stash {
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: .25rem .25rem .5rem .5rem;
+	position: absolute;
+	top: 0;
+	right: 0;
+	fill: var(--lighten-weak);
+	filter: drop-shadow(0 0 2px var(--darken));
+
+	&:hover.unstashed,
+	&.stashed {
+		fill: var(--primary);
+	}
+
+	&:hover.unstash {
+		fill: var(--text-light);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
+}
+
 .details {
     background: var(--darken);
     color: var(--text-light);
@@ -278,4 +377,10 @@ export default {
 .age-then {
     color: var(--lighten);
 }
+
+@media(max-width: $breakpoint) {
+	.name {
+		font-size: .9rem;
+	}
+}
 </style>

assets/components/album/album.vue

@@ -0,0 +1,295 @@
+<template>
+	<teleport to="body">
+		<div class="album">
+			<div class="album-header">
+				<h3 class="album-title">{{ title }}</h3>
+
+				<Icon
+					icon="cross2"
+					class="close"
+					@click.native="$emit('close')"
+				/>
+			</div>
+
+			<div class="album-body">
+				<div
+					v-if="entity || tag"
+					class="campaign-container"
+				>
+					<Campaign
+						:entity="entity"
+						:tag="tag"
+						:min-ratio="3"
+					/>
+				</div>
+
+				<div
+					class="album-items"
+					:class="{ portrait }"
+				>
+					<div
+						v-for="item in albumItems"
+						:key="item.id"
+						class="item-container"
+					>
+						<a
+							:href="getPath(item, null, { local })"
+							class="item-link"
+							target="_blank"
+						>
+							<img
+								:src="getPath(item, 'thumbnail', { local })"
+								:style="{ 'background-image': getBgPath(item, 'lazy', { local }) }"
+								:width="item.thumbnailWidth"
+								:height="item.thumbnailHeight"
+								:title="item.title"
+								loading="lazy"
+								class="item image"
+							>
+
+							<Logo :photo="item" />
+
+							<router-link
+								v-if="comments && item.title && item.entity"
+								:to="`/${item.entity.type}/${item.entity.slug}`"
+								class="item-comment"
+							>{{ item.title }} for {{ item.entity.name }}</router-link>
+
+							<span
+								v-else-if="comments && item.title"
+								class="item-comment"
+							>{{ item.title }}</span>
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</teleport>
+</template>
+
+<script>
+import Logo from './logo.vue';
+import Campaign from '../campaigns/campaign.vue';
+
+function albumItems() {
+	return this.items
+		.filter(Boolean)
+		.map(item => ({
+			...item,
+			title: item.comment || (item.credit && `© ${item.credit}`) || (item.entity && `© ${item.entity.name}`),
+		}));
+}
+
+export default {
+	components: {
+		Logo,
+		Campaign,
+	},
+	props: {
+		items: {
+			type: Array,
+			default: () => [],
+		},
+		title: {
+			type: String,
+			default: null,
+		},
+		local: {
+			type: Boolean,
+			default: false,
+		},
+		portrait: {
+			type: Boolean,
+			default: false,
+		},
+		comments: {
+			type: Boolean,
+			default: true,
+		},
+		entity: {
+			type: Object,
+			default: null,
+		},
+		tag: {
+			type: Object,
+			default: null,
+		},
+	},
+	computed: {
+		albumItems,
+	},
+	emits: ['close'],
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.album {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: var(--darken-extreme);
+	z-index: 10;
+}
+
+.album-header {
+	display: flex;
+	justify-content: space-between;
+	flex-shrink: 0;
+}
+
+.album-title {
+	display: block;
+	flex-grow: 1;
+	align-items: center;
+	padding: 1rem;
+	margin: 0;
+	color: var(--text-light);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: center;
+	text-transform: capitalize;
+}
+
+.close {
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: 1rem;
+	fill: var(--lighten);
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--text-light);
+	}
+}
+
+.album-body {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	justify-content: center;
+	overflow-y: auto;
+}
+
+.campaign-container {
+	flex-shrink: 0;
+	text-align: center;
+}
+
+.album-items {
+	height: 0;
+	display: grid;
+	flex-grow: 1;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+	grid-gap: 0 1rem;
+	padding: 1rem;
+	margin: auto 0;
+
+	&.portrait {
+		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+	}
+}
+
+.item-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.item-link {
+	position: relative;
+	margin: 0 0 .5rem 0;
+	overflow: hidden;
+
+	&:hover {
+		.item-comment {
+			transform: translateY(0);
+		}
+
+		::v-deep(.album-logo) {
+			opacity: 0;
+		}
+	}
+}
+
+.item {
+	max-width: 100%;
+	max-height: 100%;
+	height: auto;
+	background-size: cover;
+	background-position: center;
+}
+
+.item-comment {
+	width: 100%;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	box-sizing: border-box;
+	padding: .5rem;
+	color: var(--text-light);
+	background: var(--darken);
+	font-size: .9rem;
+	text-shadow: 0 0 3px var(--darken);
+	text-decoration: none;
+	white-space: normal;
+	line-height: 1.25;
+	transform: translateY(100%);
+	transition: transform .25s ease;
+}
+
+@media(max-width: $breakpoint-giga) {
+	.album-items {
+		grid-template-columns: repeat(auto-fill, minmax(22.5rem, 1fr));
+
+		.portrait {
+			grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+		}
+	}
+}
+
+@media(max-width: $breakpoint-mega) {
+	.album-items.portrait {
+		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	}
+}
+
+@media(max-width: $breakpoint-kilo) {
+	.album-items {
+		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+		grid-gap: 0 .5rem;
+		padding: .5rem;
+	}
+
+	.item-link {
+		margin: 0 0 .25rem 0;
+	}
+}
+
+@media(max-width: $breakpoint) {
+	.album-items {
+		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+	}
+}
+
+@media(max-width: $breakpoint-micro) {
+	.album-items {
+		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+	}
+}
+
+@media(max-width: $breakpoint-pico) {
+	.album-items {
+		grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+	}
+}
+</style>

assets/components/album/logo.vue

@@ -0,0 +1,66 @@
+<template>
+	<router-link
+		v-if="photo.entity"
+		v-tooltip="photo.entity.name"
+		:to="`/${photo.entity.type}/${photo.entity.slug}`"
+	>
+		<img
+			v-if="favicon && photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent"
+			:src="`/img/logos/${photo.entity.parent.slug}/favicon.png`"
+			class="album-logo favicon"
+		>
+
+		<img
+			v-else-if="favicon"
+			:src="`/img/logos/${photo.entity.slug}/favicon.png`"
+			class="album-logo favicon"
+		>
+
+		<img
+			v-else-if="photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent"
+			:src="`/img/logos/${photo.entity.parent.slug}/${photo.entity.slug}.png`"
+			class="album-logo"
+		>
+
+		<img
+			v-else
+			:src="`/img/logos/${photo.entity.slug}/network.png`"
+			class="album-logo"
+		>
+	</router-link>
+</template>
+
+<script>
+module.exports = {
+	props: {
+		photo: {
+			type: Object,
+			default: null,
+		},
+		favicon: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.album-logo {
+	max-height: .75rem;
+	max-width: 5rem;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	padding: .5rem;
+	transition: transform .25s ease, opacity .25s ease;
+	filter: drop-shadow(0 0 2px var(--shadow-weak));
+}
+
+@media(max-width: $breakpoint-small) {
+	.album-logo:not(.favicon) {
+		max-height: .5rem;
+		max-width: 3.5rem;
+	}
+}
+</style>

assets/components/alerts/add.vue

@@ -0,0 +1,441 @@
+<template>
+	<Dialog
+		title="Add alert"
+		@close="$emit('close')"
+	>
+		<form
+			class="dialog-body"
+			@submit.prevent="addAlert"
+		>
+			<div class="dialog-section">
+				<h3 class="dialog-heading">
+					When<span class="dialog-description">All to appear in the same scene</span>
+				</h3>
+
+				<div class="alert-section">
+					<h4
+						v-if="actors.length > 1"
+						class="alert-heading"
+					>Actors</h4>
+
+					<h4
+						v-else
+						class="alert-heading"
+					>Actor</h4>
+
+					<ul class="actors nolist">
+						<li
+							v-for="actor in actors"
+							:key="`actor-${actor.id}`"
+							class="actor"
+						>
+							<ActorPreview :actor="actor" />
+
+							<Icon
+								icon="cross3"
+								class="remove"
+								@click.native="removeActor(actor)"
+							/>
+						</li>
+
+						<Tooltip>
+							<li class="actor placeholder"><template v-if="actors.length === 0">Any actor</template>
+								<Icon
+									icon="plus3"
+									class="add"
+								/>
+							</li>
+
+							<template #tooltip>
+								<Search
+									content="actors"
+									@select="actor => addActor(actor)"
+								/>
+							</template>
+						</Tooltip>
+					</ul>
+				</div>
+
+				<div class="alert-section">
+					<h4
+						v-if="actors.length > 1"
+						class="alert-heading"
+					>Do</h4>
+
+					<h4
+						v-else
+						class="alert-heading"
+					>Does</h4>
+
+					<ul class="tags nolist">
+						<li
+							v-for="tag in tags"
+							:key="`tag-${tag.id}`"
+							class="tag"
+						>{{ tag.name }}
+							<Icon
+								icon="cross3"
+								class="remove"
+								@click.native="removeTag(tag)"
+							/>
+						</li>
+
+						<Tooltip>
+							<li class="tag placeholder"><template v-if="tags.length === 0">Any type of scene</template>
+								<Icon
+									icon="plus3"
+									class="add"
+								/>
+							</li>
+
+							<template #tooltip>
+								<Search
+									content="tags"
+									:defaults="['anal', 'blowbang', 'mfm', 'dp', 'gangbang', 'airtight']"
+									@select="tag => addTag(tag)"
+								/>
+							</template>
+						</Tooltip>
+					</ul>
+				</div>
+
+				<div class="alert-section">
+					<h4 class="alert-heading">For</h4>
+
+					<div class="entities">
+						<div
+							v-if="entity"
+							class="entity"
+						>
+							<Entity :entity="entity" />
+
+							<Icon
+								icon="cross3"
+								class="remove"
+								@click.native="removeEntity(entity)"
+							/>
+						</div>
+
+						<Tooltip v-if="!entity">
+							<div class="entity placeholder">
+								Any channel
+
+								<Icon
+									icon="plus3"
+									class="add"
+								/>
+							</div>
+
+							<template #tooltip>
+								<Search
+									label="Search channels"
+									content="entities"
+									@select="entity => addEntity(entity)"
+								/>
+							</template>
+						</Tooltip>
+					</div>
+				</div>
+			</div>
+
+			<div class="dialog-section">
+				<h3 class="dialog-heading">Then</h3>
+
+				<label class="alert-label">
+					<Checkbox
+						:checked="notify"
+						@change="checked => notify = checked"
+					/>Notify me in traxxx
+				</label>
+
+				<!--
+				<label class="alert-label">
+					<Checkbox
+						:checked="email"
+						@change="checked => email = checked"
+					/>Send me an e-mail
+				</label>
+				-->
+
+				<div class="stashes-container">
+					<ul class="stashes nolist">
+						<li
+							v-for="stash in stashes"
+							:key="`stash-${stash.id}`"
+							class="stash"
+						>{{ stash.name }}
+
+							<Icon
+								icon="cross3"
+								class="remove"
+								@click.native="removeStash(stash)"
+							/>
+						</li>
+
+						<Tooltip>
+							<li class="stash placeholder">
+								Add to stash
+								<Icon
+									icon="plus3"
+									class="add"
+								/>
+							</li>
+
+							<template #tooltip>
+								<Search
+									content="stashes"
+									@select="stash => addStash(stash)"
+								/>
+							</template>
+						</Tooltip>
+					</ul>
+				</div>
+			</div>
+
+			<div class="dialog-actions right">
+				<button
+					:disabled="actors.length === 0 && tags.length === 0 && !entity"
+					type="submit"
+					class="button button-primary"
+				>Add alert</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script>
+import ActorPreview from '../actors/preview.vue';
+import Entity from '../entities/tile.vue';
+import Checkbox from '../form/checkbox.vue';
+import Search from './search.vue';
+
+async function addAlert() {
+	await this.$store.dispatch('addAlert', {
+		actors: this.actors.map((actor) => actor.id),
+		tags: this.tags.map((tag) => tag.id),
+		entity: this.entity?.id,
+		notify: this.notify,
+		email: this.email,
+		stashes: this.stashes.map((stash) => stash.id),
+	});
+
+	this.$emit('close', true);
+}
+
+function addActor(actor) {
+	if (!this.actors.some((selectedActor) => selectedActor.id === actor.id)) {
+		this.actors = this.actors.concat(actor);
+	}
+
+	this.events.emit('blur');
+}
+
+function addEntity(entity) {
+	this.entity = entity;
+	this.events.emit('blur');
+}
+
+function addTag(tag) {
+	if (!this.tags.some((selectedTag) => selectedTag.id === tag.id)) {
+		this.tags = this.tags.concat(tag);
+	}
+
+	this.events.emit('blur');
+}
+
+function removeActor(actor) {
+	this.actors = this.actors.filter((listedActor) => listedActor.id !== actor.id);
+}
+
+function removeEntity() {
+	this.entity = null;
+}
+
+function removeTag(tag) {
+	this.tags = this.tags.filter((listedTag) => listedTag.id !== tag.id);
+}
+
+function addStash(stash) {
+	if (!this.stashes.some((selectedStash) => selectedStash.id === stash.id)) {
+		this.stashes = this.stashes.concat(stash);
+	}
+
+	this.events.emit('blur');
+}
+
+function removeStash(stash) {
+	this.stashes = this.stashes.filter((listedStash) => listedStash.id !== stash.id);
+}
+
+export default {
+	components: {
+		ActorPreview,
+		Checkbox,
+		Entity,
+		Search,
+	},
+	emits: ['close'],
+	data() {
+		return {
+			actors: [],
+			tags: [],
+			entity: null,
+			notify: true,
+			email: false,
+			stashes: [],
+			availableStashes: this.$store.state.auth.user.stashes,
+		};
+	},
+	methods: {
+		addActor,
+		addAlert,
+		addEntity,
+		addTag,
+		addStash,
+		removeActor,
+		removeEntity,
+		removeTag,
+		removeStash,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-section {
+	width: 30rem;
+	max-width: 100%;
+
+	&:first-child {
+		border-bottom: solid 1px var(--shadow-hint);
+		margin: 0 0 1rem 0;
+	}
+}
+
+.dialog-heading {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 0 0 .25rem 0;
+	color: var(--primary);
+}
+
+.dialog-description {
+	color: var(--shadow);
+	font-size: .9rem;
+	font-weight: normal;
+}
+
+.alert-heading {
+	margin: .75rem 0 .25rem 0;
+}
+
+.actors,
+.entities,
+.tags {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	font-size: 0;
+}
+
+.actors > .actor,
+.entity,
+.tag,
+.stash {
+	position: relative;
+	font-size: 1rem;
+	margin: 0 .5rem .5rem 0;
+}
+
+.entity .tile {
+	width: 10rem;
+	height: 2.5rem;
+}
+
+.tag:not(.placeholder),
+.stash:not(.placeholder) {
+	padding: .5rem .75rem;
+	border: solid 1px var(--shadow-hint);
+	margin: 0 .75rem 0 0;
+	font-size: .9rem;
+	font-weight: bold;
+}
+
+.stashes {
+	margin: 0 0 0 .25rem;
+	color: var(--text);
+}
+
+.remove {
+	width: 1rem;
+	height: 1rem;
+	position: absolute;
+	top: -.35rem;
+	right: -.35rem;
+	z-index: 1;
+	border: solid 1px var(--darken-hint);
+	border-radius: 50%;
+	background: var(--background);
+	fill: var(--shadow-weak);
+	box-shadow: 0 0 1px var(--shadow);
+
+	&:hover {
+		fill: var(--text-light);
+		background: var(--primary);
+		border: solid 1px var(--primary);
+		cursor: pointer;
+	}
+}
+
+.placeholder {
+	display: inline-flex;
+	align-items: center;
+	color: var(--shadow-strong);
+	padding: .75rem 0;
+	margin: 0 0 .5rem 0;
+	font-size: 1rem;
+
+	.add {
+		fill: var(--shadow);
+		margin: 0 0 0 .5rem;
+	}
+
+	&:hover {
+		color: var(--primary);
+		cursor: pointer;
+
+		.add {
+			fill: var(--primary);
+		}
+	}
+}
+
+.alert-label {
+	display: flex;
+	align-items: center;
+	padding: .5rem 0;
+	margin: 0 0 .25rem 0;
+	cursor: pointer;
+}
+
+.stashes-heading {
+	display: flex;
+	align-items: center;
+	margin: 0 0 .5rem 0;
+	font-size: 1rem;
+
+	.alert-label {
+		display: inline-block;
+		margin: 0;
+	}
+}
+
+.tooltip-container {
+	display: inline-block;
+}
+
+.check-container {
+	display: inline-block;
+	margin: 0 .5rem 0 0;
+}
+</style>

assets/components/alerts/remove.vue

@@ -0,0 +1,41 @@
+<template>
+	<Dialog
+		title="Remove alert"
+		@close="$emit('close', false)"
+	>
+		<form
+			class="dialog-body"
+			@submit.prevent="removeAlert"
+		>
+			Are you sure you want to remove alert?
+
+			<div class="dialog-actions right">
+				<button
+					type="submit"
+					class="button button-primary"
+				>Remove</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script>
+async function removeAlert() {
+	await this.$store.dispatch('removeAlert', this.alert.id);
+
+	this.$emit('close', true);
+}
+
+export default {
+	props: {
+		alert: {
+			type: Object,
+			default: null,
+		},
+	},
+	emits: ['close'],
+	methods: {
+		removeAlert,
+	},
+};
+</script>

assets/components/alerts/search.vue

@@ -0,0 +1,147 @@
+<template>
+	<div>
+		<input
+			ref="input"
+			v-model="query"
+			:placeholder="label || `Search ${content}`"
+			class="input"
+			@input="search"
+		>
+
+		<ul
+			v-if="results.length > 0"
+			class="nolist"
+		>
+			<li
+				v-for="result in results"
+				:key="`result-${result.id}`"
+				class="result"
+				@click="selectResult(result)"
+			>
+				<Icon
+					v-if="result.type === 'network'"
+					v-tooltip="'Network'"
+					icon="device_hub"
+				/>
+
+				<Icon
+					v-if="result.type === 'channel'"
+					v-tooltip="'Channel'"
+					icon="tv"
+				/>
+
+				<img
+					v-if="result.avatar"
+					:src="getPath(result.avatar)"
+					class="avatar"
+				>{{ result.name }}
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+async function search() {
+	if (this.content === 'actors') {
+		const { actors } = await this.$store.dispatch('fetchActors', {
+			query: this.query,
+			limit: 10,
+		});
+
+		this.results = actors;
+	}
+
+	if (this.content === 'entities') {
+		this.results = await this.$store.dispatch('searchEntities', {
+			query: this.query,
+			limit: 10,
+		});
+	}
+
+	if (this.content === 'tags') {
+		this.results = await this.$store.dispatch('searchTags', {
+			query: this.query,
+			minLength: 1,
+			limit: 10,
+		});
+	}
+
+	if (this.content === 'stashes') {
+		this.results = this.$store.state.auth.user.stashes.filter(stash => new RegExp(this.query).test(stash.name));
+	}
+}
+
+function selectResult(item) {
+	this.query = null;
+	this.results = [];
+
+	this.$emit('select', item);
+}
+
+async function mounted() {
+	this.$refs.input.focus();
+
+	if (this.defaults.length > 0 && this.content === 'tags') {
+		this.results = await this.$store.dispatch('fetchTags', {
+			slugs: this.defaults,
+		});
+	}
+
+	if (this.content === 'stashes') {
+		this.results = this.$store.state.auth.user.stashes;
+	}
+}
+
+export default {
+	props: {
+		content: {
+			type: String,
+			default: null,
+		},
+		defaults: {
+			type: Array,
+			default: () => [],
+		},
+		label: {
+			type: String,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			query: null,
+			results: [],
+		};
+	},
+	emits: ['select'],
+	mounted,
+	methods: {
+		search,
+		selectResult,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.result {
+	color: var(--text);
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+
+	&:hover {
+		color: var(--primary);
+		cursor: pointer;
+	}
+}
+
+.avatar {
+	height: 2rem;
+	margin: 0 .5rem 0 0;
+}
+
+.icon {
+	fill: var(--shadow);
+	margin: -.1rem .75rem 0 0;
+}
+</style>

assets/components/auth/login.vue

@@ -0,0 +1,124 @@
+<template>
+	<form
+		class="login"
+		@submit.prevent="login"
+	>
+		<div
+			v-if="error"
+			class="feedback error"
+		>{{ error }}</div>
+
+		<div
+			v-if="success"
+			class="feedback success"
+		>Login successful, redirecting</div>
+
+		<template v-else>
+			<input
+				v-model="username"
+				placeholder="Username or e-mail"
+				type="text"
+				class="input"
+				required
+			>
+
+			<input
+				v-model="password"
+				placeholder="Password"
+				type="password"
+				class="input"
+				required
+			>
+
+			<button
+				type="submit"
+				class="button button-primary"
+			>Log in</button>
+
+			<RouterLink
+				v-if="$store.state.auth.signup"
+				:to="{ name: 'signup', query: { ref: $route.query.ref } }"
+				class="link link-external signup"
+			>Sign up</RouterLink>
+		</template>
+	</form>
+</template>
+
+<script>
+async function login() {
+	this.error = null;
+	this.success = false;
+
+	try {
+		const user = await this.$store.dispatch('login', {
+			username: this.username,
+			password: this.password,
+		});
+
+		this.success = true;
+
+		setTimeout(() => {
+			this.$router.replace(this.$route.query.ref || { name: 'user', params: { username: user.username } });
+		}, 1000);
+	} catch (error) {
+		this.error = error.message;
+	}
+}
+
+function mounted() {
+	if (!this.$store.state.auth.login) {
+		this.$router.replace({ name: 'not-found' });
+	}
+}
+
+export default {
+	data() {
+		return {
+			username: null,
+			password: null,
+			success: false,
+			error: null,
+		};
+	},
+	mounted,
+	methods: {
+		login,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.login {
+	width: 20rem;
+	display: flex;
+	flex-direction: column;
+	margin: auto;
+}
+
+.input {
+	margin: 0 0 .5rem 0;
+}
+
+.feedback {
+	padding: 1rem;
+	text-align: center;
+	font-weight: bold;
+}
+
+.error {
+	color: var(--error);
+}
+
+.success {
+	color: var(--shadow-strong);
+}
+
+.button {
+	margin: 0 0 .25rem 0;
+}
+
+.signup {
+	padding: .5rem;
+	text-align: center;
+}
+</style>

assets/components/auth/signup.vue

@@ -0,0 +1,134 @@
+<template>
+	<form
+		class="signup"
+		@submit.prevent="signup"
+	>
+		<div
+			v-if="error"
+			class="feedback error"
+		>{{ error }}</div>
+
+		<div
+			v-if="success"
+			class="feedback success"
+		>Signup successful, redirecting</div>
+
+		<template v-else>
+			<input
+				v-model="username"
+				placeholder="Username"
+				type="text"
+				class="input"
+				required
+			>
+
+			<input
+				v-model="email"
+				placeholder="E-mail"
+				type="email"
+				class="input"
+				required
+			>
+
+			<input
+				v-model="password"
+				placeholder="Password"
+				type="password"
+				class="input"
+				required
+			>
+
+			<button
+				type="submit"
+				class="button button-primary"
+			>Sign up</button>
+
+			<RouterLink
+				v-if="$store.state.auth.login"
+				:to="{ name: 'login', query: { ref: $route.query.ref } }"
+				class="link link-external login"
+			>Log in</RouterLink>
+		</template>
+	</form>
+</template>
+
+<script>
+async function signup() {
+	this.error = null;
+	this.success = false;
+
+	try {
+		await this.$store.dispatch('signup', {
+			username: this.username,
+			email: this.email,
+			password: this.password,
+		});
+
+		this.success = true;
+
+		setTimeout(() => {
+			this.$router.replace(this.$route.query.ref || { name: 'home' });
+		}, 1000);
+	} catch (error) {
+		this.error = error.message;
+	}
+}
+
+function mounted() {
+	if (!this.$store.state.auth.signup) {
+		this.$router.replace({ name: 'not-found' });
+	}
+}
+
+export default {
+	data() {
+		return {
+			username: null,
+			email: null,
+			password: null,
+			success: false,
+			error: null,
+		};
+	},
+	mounted,
+	methods: {
+		signup,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.signup {
+	width: 20rem;
+	display: flex;
+	flex-direction: column;
+	margin: auto;
+}
+
+.input {
+	margin: 0 0 .5rem 0;
+}
+
+.feedback {
+	padding: 1rem;
+	text-align: center;
+	font-weight: bold;
+}
+
+.error {
+	color: var(--error);
+}
+
+.success {
+	color: var(--shadow-strong);
+}
+
+.button {
+	margin: 0 0 .25rem 0;
+}
+
+.login {
+	padding: .5rem;
+	text-align: center;
+}
+</style>

assets/components/campaigns/campaign.vue

@@ -0,0 +1,152 @@
+<template>
+	<a
+		v-if="campaign"
+		:href="campaign.url || campaign.affiliate?.url"
+		target="_blank"
+		class="campaign"
+	>
+		<img
+			v-if="campaign.banner.entity.type === 'network' || !campaign.banner.entity.parent"
+			:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`"
+			:width="campaign.banner.width"
+			:height="campaign.banner.height"
+			class="campaign-banner"
+		>
+
+		<img
+			v-if="campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network'"
+			:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`"
+			:width="campaign.banner.width"
+			:height="campaign.banner.height"
+			class="campaign-banner"
+		>
+	</a>
+</template>
+
+<script>
+function ratioFilter(banner) {
+	if (!banner) {
+		return false;
+	}
+
+	if (this.minHeight && banner.height < this.minHeight) {
+		return false;
+	}
+
+	if (this.maxHeight && banner.height > this.minHeight) {
+		return false;
+	}
+
+	if (this.minRatio && banner.ratio < this.minRatio) {
+		return false;
+	}
+
+	if (this.maxRatio && banner.ratio > this.maxRatio) {
+		return false;
+	}
+
+	return true;
+}
+
+function entityCampaign() {
+	const bannerCampaigns = this.entity.campaigns
+		.concat(this.entity.children?.flatMap(child => child.campaigns))
+		.concat(this.entity.parent?.campaigns)
+		.filter(campaignX => campaignX && this.ratioFilter(campaignX.banner));
+
+	if (bannerCampaigns.length > 0) {
+		const randomCampaign = bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
+
+		this.$emit('campaign', randomCampaign);
+		return randomCampaign;
+	}
+
+	this.$emit('campaign', null);
+	return null;
+}
+
+function tagCampaign() {
+	const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && this.ratioFilter(banner));
+	const banner = campaignBanners[Math.floor(Math.random() * campaignBanners.length)];
+
+	if (banner?.campaigns.length > 0) {
+		const randomCampaign = {
+			...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
+			banner,
+		};
+
+		this.$emit('campaign', randomCampaign);
+		return randomCampaign;
+	}
+
+	this.$emit('campaign', null);
+	return null;
+}
+
+function campaign() {
+	if (this.entity) {
+		return this.entityCampaign();
+	}
+
+	if (this.tag) {
+		return this.tagCampaign();
+	}
+
+	this.$emit('campaign', null); // allow parent to toggle campaigns depending on availability
+	return null;
+}
+
+export default {
+	props: {
+		entity: {
+			type: Object,
+			default: null,
+		},
+		tag: {
+			type: Object,
+			default: null,
+		},
+		minHeight: {
+			type: Number,
+			default: null,
+		},
+		maxHeight: {
+			type: Number,
+			default: null,
+		},
+		minRatio: {
+			type: Number,
+			default: null,
+		},
+		maxRatio: {
+			type: Number,
+			default: null,
+		},
+	},
+	emits: ['campaign'],
+	computed: {
+		campaign,
+	},
+	methods: {
+		entityCampaign,
+		ratioFilter,
+		tagCampaign,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.campaign {
+	height: 100%;
+	display: inline-flex;
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+}
+
+.campaign-banner {
+	height: auto;
+	max-height: 100%;
+	max-width: 100%;
+}
+</style>

assets/components/container/container.vue

@@ -1,70 +1,129 @@
 <template>
-	<div
-		class="container"
-		:class="theme"
-	>
+	<div class="container">
+		<Warning
+			v-if="showWarning"
+			class="warning-container"
+			@enter="(includeQueer) => setConsent(true, includeQueer)"
+			@leave="setConsent(false)"
+		/>
+
 		<transition name="slide">
 			<Sidebar
 				v-if="showSidebar"
-				@toggle="(state) => showSidebar = state"
+				@toggle-sidebar="(state) => toggleSidebar(state)"
+				@show-filters="(state) => toggleFilters(state)"
 			/>
 		</transition>
 
-		<Header :toggle-sidebar="toggleSidebar" />
+		<Header
+			@toggle-sidebar="(state) => toggleSidebar(state)"
+			@show-filters="(state) => toggleFilters(state)"
+		/>
 
-		<div class="content">
-			<router-view />
+		<p
+			v-if="config.showDisclaimer"
+			class="disclaimer"
+		>{{ config.disclaimer }}</p>
+
+		<div
+			ref="content"
+			class="content"
+			@scroll="scroll"
+		>
+			<router-view @scroll="scrollToTop" />
 		</div>
+
+		<Filters
+			v-if="showFilters"
+			@close="toggleFilters(false)"
+		/>
 	</div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
-import EventBus from '../../js/event-bus';
-
+import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
-
-function theme(state) {
-	return state.ui.theme;
-}
+import Filters from '../filters/filters.vue';
 
 function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
 }
 
+function toggleFilters(state) {
+	this.showFilters = state;
+	this.showSidebar = false;
+}
+
+async function setConsent(consent, includeQueer) {
+	if (consent) {
+		this.showWarning = false;
+		localStorage.setItem('consent', window.env.sessionId);
+	}
+
+	if (includeQueer) {
+		this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.filter((tag) => !['gay', 'bisexual', 'transsexual'].includes(tag)));
+		return;
+	}
+
+	this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.concat(['gay', 'bisexual', 'transsexual']));
+}
+
+function blur(event) {
+	this.events.emit('blur', event);
+}
+
+function resize(event) {
+	this.events.emit('resize', event);
+}
+
+function scroll(event) {
+	this.events.emit('scroll', event);
+}
+
+function scrollToTop() {
+	this.$refs.content.scrollTop = 0;
+}
+
 function mounted() {
-	document.addEventListener('click', () => {
-		EventBus.$emit('blur');
-	});
+	document.addEventListener('click', this.blur);
+	window.addEventListener('resize', this.resize);
+}
+
+function beforeUnmount() {
+	document.removeEventListener('click', this.blur);
+	window.removeEventListener('resize', this.resize);
 }
 
 export default {
 	components: {
 		Header,
 		Sidebar,
+		Warning,
+		Filters,
 	},
 	data() {
 		return {
 			showSidebar: false,
+			showWarning: localStorage.getItem('consent') !== window.env.sessionId,
+			showFilters: false,
 		};
 	},
-	computed: {
-		...mapState({
-			theme,
-		}),
-	},
 	mounted,
+	beforeUnmount,
 	methods: {
 		toggleSidebar,
+		toggleFilters,
+		setConsent,
+		blur,
+		resize,
+		scroll,
+		scrollToTop,
 	},
 };
 </script>
 
 <style lang="scss">
-@import 'theme';
-
 .container {
     position: relative;
     height: 100%;
@@ -89,7 +148,6 @@ export default {
 	flex-grow: 1;
 	overflow-y: auto;
 	overflow-x: hidden;
-	box-shadow: 0 0 3px var(--shadow-weak);
 	z-index: 1;
 }
 
@@ -104,7 +162,7 @@ export default {
 	}
 }
 
-.slide-enter,
+.slide-enter-from,
 .slide-leave-to {
 	&.sidebar-container {
 		background: transparent;
@@ -123,3 +181,15 @@ export default {
     box-sizing: border-box;
 }
 </style>
+
+<style lang="scss" scoped>
+.disclaimer {
+	padding: .5rem 1rem;
+	margin: 0;
+	color: var(--text-light);
+	background: var(--warn);
+	font-weight: bold;
+	box-shadow: inset 0 0 3px var(--darken-weak);
+	text-align: center;
+}
+</style>

assets/components/container/warning.vue

@@ -0,0 +1,268 @@
+<template>
+	<div class="warning-container">
+		<div class="warning">
+			<strong class="title">
+				<span
+					class="logo"
+					v-html="logo"
+				/>contains sexually explicit content
+			</strong>
+
+			<ul class="rules">
+				<li class="rule">You are at least 18 years old, and legally permitted to view adult material in your jurisdiction.</li>
+				<li class="rule">You do not regard erotic and frankly pornographic media as obscene or offensive.</li>
+				<li class="rule">You understand that most sexual scenarios depicted on this website are fictional, performed by professional actors for the purpose of entertainment, and not representative of real-life interactions.</li>
+			</ul>
+
+			<span class="preferences">You can adjust your content preferences later</span>
+
+			<div class="actions">
+				<a
+					href="https://www.google.com"
+					class="button leave"
+					@click="$emit('leave')"
+				><Icon icon="arrow-left16" />Leave</a>
+
+				<button
+					class="button enter queer"
+					@click="$emit('enter', true)"
+				>
+					<span class="button-title">Enter</span>
+					<span class="button-sub">I want to see gay, bi and trans content</span>
+				</button>
+
+				<button
+					class="button enter straight"
+					@click="$emit('enter', false)"
+				>
+					<span class="button-title">Enter</span>
+					<span class="button-sub">I prefer straight content</span>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import logo from '../../img/logo.svg';
+
+export default {
+	data() {
+		return {
+			logo,
+		};
+	},
+	emits: ['enter'],
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.warning-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	z-index: 10;
+	background: var(--background-censor);
+	backdrop-filter: blur(.25rem);
+	overflow-y: auto;
+}
+
+.warning {
+	color: var(--text);
+	width: 50rem;
+	max-height: 100%;
+	max-width: 100%;
+	margin: 1rem;
+}
+
+.copy,
+.rules {
+	padding: .5rem 1rem;
+}
+
+.title {
+	display: block;
+	font-size: 2rem;
+	margin: 1rem 0;
+	color: var(--text);
+	text-align: center;
+}
+
+.logo {
+	width: 6.5rem;
+    display: inline-block;
+	fill: var(--primary);
+	margin: 0 .6rem 0 0;
+
+	::v-deep(svg) {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.copy {
+	display: block;
+	padding: 0 1rem;
+	font-weight: bold;
+}
+
+.rules {
+	margin: 0 0 0 1rem;
+	text-align: left;
+	text-shadow: 0 0 3px var(--highlight-strong);
+}
+
+.rule {
+	padding: .5rem 1rem;
+	line-height: 1.5;
+}
+
+.actions {
+	display: flex;
+	text-align: center;
+	padding: 1rem 0;
+}
+
+.button {
+	display: inline-flex;
+	flex-basis: 0;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	border-radius: .25rem;
+	padding: 0;
+	position: relative;
+	cursor: pointer;
+	font-size: 1.5rem;
+	text-decoration: none;
+	transition: border-radius .2s ease;
+
+	&.leave {
+		color: var(--shadow-strong);
+		flex-direction: row;
+		padding: 1rem;
+
+		.icon {
+			width: 1.5rem;
+			height: 1.5rem;
+			margin: 0 1rem 0 0;
+			fill: var(--shadow);
+		}
+
+		&:hover {
+			color: var(--text);
+		}
+	}
+
+	&.enter {
+		flex-grow: 1;
+	}
+
+	&.straight,
+	&.queer {
+		color: var(--lighten-strong);
+		background: var(--darken-censor);
+
+		&:before {
+			content: '';
+			width: calc(100% + .3rem);
+			height: calc(100% + .25rem);
+			position: absolute;
+			z-index: -1;
+			filter: blur(.25rem);
+			transition: filter .2s ease;
+		}
+
+		&:hover {
+			color: var(--text-light);
+			border-radius: 0;
+
+			.button-sub {
+				color: var(--text-light);
+			}
+		}
+	}
+
+	&.straight:before {
+		background: var(--primary);
+	}
+
+	&.queer:before {
+		background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #a0f, #fff, #f8f, #0ff);
+	}
+
+	&:not(:last-child) {
+		margin: 0 2rem 0 0;
+	}
+
+	&:hover {
+		.icon {
+			fill: var(--text);
+		}
+
+		&.straight:before,
+		&.queer:before {
+			filter: blur(0);
+		}
+	}
+}
+
+.button-title,
+.button-sub {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.button-title {
+	font-size: 1.5rem;
+	padding: .5rem 0 .15rem 0;
+	font-weight: bold;
+}
+
+.button-sub {
+	display: block;
+	font-size: .8rem;
+	padding: .15rem .5rem .75rem .5rem;
+	color: var(--lighten);
+}
+
+.preferences {
+	color: var(--shadow);
+	display: block;
+	padding: .5rem 0 1rem 0;
+	text-align: center;
+	font-size: .9rem;
+}
+
+@media(max-width: $breakpoint) {
+	.title {
+		font-size: 1.75rem;
+	}
+
+	.logo {
+		width: 5.75rem;
+		margin: 0 .5rem 0 0;
+	}
+}
+
+@media(max-width: $breakpoint-small) {
+	.actions {
+		flex-direction: column-reverse;
+		padding: 0;
+
+		.button {
+			margin: 0 0 1rem 0;
+		}
+
+		.button:first-child {
+			margin: 0;
+		}
+	}
+}
+</style>

assets/components/dialog/dialog.vue

@@ -0,0 +1,139 @@
+<template>
+	<teleport to="body">
+		<div
+			class="container"
+			@click="$emit('close')"
+		>
+			<div
+				class="dialog"
+				@click.stop="events.emit('blur')"
+			>
+				<div
+					v-if="title || $slots.header"
+					class="header"
+				>
+					<slot name="header">
+						<h2 class="header-title">{{ title }}</h2>
+					</slot>
+
+					<Icon
+						icon="cross2"
+						class="close"
+						@click="$emit('close')"
+					/>
+				</div>
+
+				<div class="body">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</teleport>
+</template>
+
+<script>
+function mounted() {
+	this.events.emit('blur');
+}
+
+export default {
+	props: {
+		title: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['close'],
+	mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 1rem;
+	background: var(--darken-strong);
+	z-index: 10;
+}
+
+.dialog {
+	display: flex;
+	flex-direction: column;
+	max-width: 100%;
+	max-height: 100%;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--darken-weak);
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--primary);
+	color: var(--text-light);
+	font-size: 1.5rem;
+	font-weight: bold;
+}
+
+.header-title {
+	padding: .5rem .5rem .5rem 1rem;
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 1.25rem;
+}
+
+.close {
+	height: 100%;
+	padding: 0 1rem;
+	fill: var(--lighten);
+
+	&:hover {
+		fill: var(--lighten-strong);
+		cursor: pointer;
+	}
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow: hidden;
+
+	::v-deep(.section) {
+		padding: 1rem;
+	}
+}
+
+::v-deep(.dialog-body) {
+	padding: 1rem;
+	flex-grow: 1;
+	overflow-y: auto;
+}
+
+::v-deep(.dialog-section:not(:last-child)) {
+	border-bottom: solid 1px var(--shadow-hint);
+	overflow: auto;
+}
+
+::v-deep(.dialog-actions) {
+	display: flex;
+	margin: 1rem 0 0 0;
+
+	&.center {
+		justify-content: center;
+	}
+
+	&.right {
+		justify-content: flex-end;
+	}
+}
+</style>

assets/components/entities/children.vue

@@ -1,10 +1,15 @@
 <template>
 	<div class="children">
-		<EntityTile
+		<div
 			v-for="child in entity.children"
 			:key="`child-${child.id}`"
-			:entity="child"
-		/>
+			class="tile-container"
+		>
+			<EntityTile
+				:entity="child"
+				@load="(event) => $emit('load', event)"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -15,6 +20,7 @@ export default {
 	components: {
 		EntityTile,
 	},
+	emits: ['load'],
 	props: {
 		entity: {
 			type: Object,
@@ -33,13 +39,15 @@ export default {
 	padding: 1rem;
 	margin: 0 1rem 0 0;
 	border-bottom: solid 1px var(--darken-hint);
-	overflow-x: auto;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
+
+	.tile-container {
+		display: inline-block;
+		padding: 0 1rem 0 0;
+	}
 
 	.tile {
 		width: 15rem;
-		margin: 0 1rem 0 0;
+		height: 6rem;
 	}
 
 	&.expanded {
@@ -48,14 +56,14 @@ export default {
 		grid-gap: 1rem;
 		margin: 0;
 
+		.tile-container {
+			padding: 0;
+		}
+
 		.tile {
 			width: 100%;
 		}
 	}
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
 }
 
 @media(max-width: $breakpoint0) {

assets/components/entities/entity.vue

@@ -5,7 +5,7 @@
 	>
 		<div class="info">
 			<a
-				:href="entity.url"
+				:href="entityUrl"
 				target="_blank"
 				rel="noopener"
 				class="link link-child"
@@ -51,7 +51,7 @@
 				>{{ tag.name }}</li>
 			</ul>
 
-			<router-link
+			<RouterLink
 				v-if="entity.parent"
 				:to="`/${entity.parent.type}/${entity.parent.slug}`"
 				class="link link-parent"
@@ -72,33 +72,50 @@
 					v-else
 					class="name parent-name"
 				>{{ entity.parent.name }}</h3>
-			</router-link>
+
+				<Icon icon="device_hub" />
+			</RouterLink>
 		</div>
 
 		<div
-			ref="content"
 			class="content-inner"
+			@scroll="events.emit('scroll', $event)"
 		>
 			<Scroll
 				v-if="entity.children.length > 0"
+				v-slot="scroll"
+				:expandable="true"
 				:expanded="expanded"
-				class="scroll-dark"
+				class="scroll-light"
 				@expand="(state) => expanded = state"
 			>
 				<Children
 					:entity="entity"
 					:class="{ expanded }"
+					@load="scroll.loaded"
 				/>
 			</Scroll>
 
+			<div class="campaign-container">
+				<Campaign
+					:entity="entity"
+					:min-ratio="3"
+				/>
+			</div>
+
 			<FilterBar
+				ref="filter"
 				:fetch-releases="fetchEntity"
 				:items-total="totalCount"
 				:items-per-page="limit"
+				:available-tags="entity.tags"
 			/>
 
 			<div class="releases">
-				<Releases :releases="entity.releases" />
+				<Releases
+					:releases="entity.releases"
+					:done="done"
+				/>
 
 				<Pagination
 					:items-total="totalCount"
@@ -113,15 +130,17 @@
 </template>
 
 <script>
-import Vue from 'vue';
-
 import FilterBar from '../filters/filter-bar.vue';
 import Pagination from '../pagination/pagination.vue';
 import Releases from '../releases/releases.vue';
 import Children from './children.vue';
 import Scroll from '../scroll/scroll.vue';
+import Campaign from '../campaigns/campaign.vue';
+
+async function fetchEntity(scroll = true) {
+	this.done = false;
+	this.entityUrl = null;
 
-async function fetchEntity() {
 	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
 		entitySlug: this.$route.params.entitySlug,
 		entityType: this.$route.name,
@@ -135,18 +154,31 @@ async function fetchEntity() {
 
 	this.pageTitle = entity.name;
 
-	Vue.nextTick(() => {
-		this.$refs.content.scrollTop = 0;
-	});
+	const campaign = entity.campaigns.find((campaignX) => !campaignX.banner)
+		|| entity.parent?.campaigns.find((campaignX) => !campaignX.banner);
+
+	const affiliateParams = new URLSearchParams({
+		...(entity.url && Object.fromEntries(new URL(entity.url).searchParams)), // preserve any query in entity URL, e.g. ?siteId=5
+		...(campaign?.affiliate?.parameters && Object.fromEntries(new URLSearchParams(campaign.affiliate.parameters))), // append affiliate parameters
+	}).toString();
+
+	this.entityUrl = campaign?.url || campaign?.affiliate?.url || `${entity.url}${campaign?.affiliate?.parameters ? `?${affiliateParams}` : ''}`;
+	this.done = true;
+
+	if (scroll && this.$refs.filter?.$el) {
+		this.$refs.filter.$el.scrollIntoView();
+	}
 }
 
 async function mounted() {
 	await this.fetchEntity();
 }
 
-async function route() {
-	await this.fetchEntity();
-	this.expanded = false;
+async function route(to) {
+	if (to.name === 'channel' || to.name === 'network' || to.name === 'studio') {
+		await this.fetchEntity();
+		this.expanded = false;
+	}
 }
 
 export default {
@@ -156,18 +188,22 @@ export default {
 		Children,
 		Releases,
 		Scroll,
+		Campaign,
 	},
 	data() {
 		return {
 			entity: null,
 			pageTitle: null,
 			totalCount: null,
+			done: false,
 			limit: Number(this.$route.query.limit) || 20,
 			expanded: false,
+			entityUrl: null,
 		};
 	},
 	watch: {
 		$route: route,
+		'$store.state.ui.tagFilter': fetchEntity,
 	},
 	mounted,
 	methods: {
@@ -187,7 +223,7 @@ export default {
 }
 
 .link {
-	max-width: 20rem;
+	max-width: 15rem;
 	display: flex;
 	align-items: center;
 	box-sizing: border-box;
@@ -196,6 +232,8 @@ export default {
 }
 
 .link-child {
+	flex-shrink: 0;
+
 	.icon {
 		fill: var(--lighten);
 		margin: 0 0 0 1rem;
@@ -208,7 +246,15 @@ export default {
 
 .link-parent {
 	flex-direction: row-reverse;
+	flex-shrink: 0;
 	margin: 0 0 0 3rem;
+
+	.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		fill: var(--lighten);
+		margin: 0 .5rem 0 0;
+	}
 }
 
 .logo {
@@ -218,7 +264,7 @@ export default {
 }
 
 .logo-child {
-	height: 2rem;
+	height: 3rem;
 }
 
 .logo-parent {
@@ -227,6 +273,7 @@ export default {
 
 .favicon {
 	height: 1rem;
+	flex-shrink: 0;
 }
 
 .content-inner {
@@ -234,6 +281,16 @@ export default {
 	flex-direction: column;
 }
 
+.scroll {
+	background: var(--profile);
+}
+
+.campaign-container {
+	background: var(--background-dim);
+	text-align: center;
+	padding: .5rem;
+}
+
 .releases {
 	flex-grow: 1;
 }

assets/components/entities/tile.vue

@@ -4,33 +4,49 @@
 		:title="entity.name"
 		class="tile"
 	>
-		<template v-if="entity.hasLogo">
-			<img
-				v-if="entity.type === 'network' || entity.independent"
-				:src="`/img/logos/${entity.slug}/thumbs/network.png`"
-				:alt="entity.name"
-				class="logo"
-			>
+		<div class="tile-logo">
+			<template v-if="entity.hasLogo">
+				<img
+					v-if="entity.type === 'network' || entity.independent"
+					:src="`/img/logos/${entity.slug}/thumbs/network.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
 
-			<img
-				v-else-if="entity.parent"
-				:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
-				:alt="entity.name"
-				class="logo"
-			>
+				<img
+					v-else-if="entity.parent"
+					:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
 
-			<img
+				<img
+					v-else
+					:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
+			</template>
+
+			<span
 				v-else
-				:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
-				:alt="entity.name"
-				class="logo"
-			>
-		</template>
+				class="name"
+			>{{ entity.name }}</span>
+		</div>
 
 		<span
-			v-else
-			class="name"
-		>{{ entity.name }}</span>
+			v-if="entity.childrenTotal > 0 || typeof entity.sceneTotal !== 'undefined'"
+			class="count"
+		>
+			<span v-if="typeof entity.sceneTotal !== 'undefined'">{{ entity.sceneTotal }} scenes</span>
+			<span v-if="entity.type === 'network'">{{ entity.childrenTotal }} channels</span>
+		</span>
 	</router-link>
 </template>
 
@@ -42,6 +58,7 @@ export default {
 			default: null,
 		},
 	},
+	emits: ['load'],
 };
 </script>
 
@@ -49,18 +66,31 @@ export default {
 @import 'theme';
 
 .tile {
-    height: 6rem;
+    height: 100%;
     background: var(--tile);
     display: flex;
+	flex-direction: column;
     flex-shrink: 0;
 	justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    padding: .5rem 1rem;
     border-radius: .25rem;
+	position: relative;
     box-shadow: 0 0 3px rgba(0, 0, 0, .25);
     text-align: center;
     text-decoration: none;
+	overflow: hidden;
+
+	&:hover .count {
+		bottom: 0;
+	}
+}
+
+.tile-logo {
+	display: flex;
+	flex-grow: 1;
+    padding: .5rem 1rem;
+	overflow: hidden;
 }
 
 .logo {
@@ -68,11 +98,30 @@ export default {
 	max-height: 100%;
     display: flex;
     align-items: center;
+	align-self: center;
 }
 
 .name {
+	display: flex;
+	align-items: center;
 	color: var(--text-light);
     font-size: 1.25rem;
     font-weight: bold;
 }
+
+.count {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	position: absolute;
+	bottom: -1.75rem;
+	box-sizing: border-box;
+	padding: .25rem .5rem;
+	background: var(--darken-strong);
+	box-shadow: 0 0 3px var(--darken);
+	color: var(--text-light);
+	text-align: center;
+	text-shadow: 1px 1px var(--darken);
+	transition: bottom .1s ease;
+}
 </style>

assets/components/expand/expand.vue

@@ -33,26 +33,12 @@ export default {
 	justify-content: center;
 	padding: .5rem;
 
-	.icon {
-		fill: var(--shadow);
-	}
-
-	&:hover {
-		cursor: pointer;
-		background: var(--shadow-hint);
-
-		.icon {
-			fill: var(--text);
-		}
-	}
-}
-
-.expand-dark {
 	.icon {
 		fill: var(--lighten);
 	}
 
 	&:hover {
+		cursor: pointer;
 		background: var(--lighten-hint);
 
 		.icon {
@@ -60,4 +46,18 @@ export default {
 		}
 	}
 }
+
+.expand-dark {
+	.icon {
+		fill: var(--darken-weak);
+	}
+
+	&:hover {
+		background: var(--darken-hint);
+
+		.icon {
+			fill: var(--darken);
+		}
+	}
+}
 </style>

assets/components/filters/actor-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="users" />
 
@@ -14,46 +14,48 @@
 			>Actors</div>
 		</div>
 
-		<div slot="popover">
-			<router-link
-				class="filter-clear"
-				:to="{ query: { ...$route.query, actors: undefined } }"
-				:class="{ active: selectedActors.length > 0 }"
-			>clear all<Icon icon="cross2" /></router-link>
+		<template v-slot:tooltip>
+			<div @click.stop>
+				<router-link
+					class="filter-clear"
+					:to="{ query: { ...$route.query, actors: undefined } }"
+					:class="{ active: selectedActors.length > 0 }"
+				>clear all<Icon icon="cross2" /></router-link>
 
-			<ul class="filter-items nolist">
-				<li
-					v-for="actor in availableActors"
-					:key="actor.id"
-					class="filter-item"
-					:class="{ selected: selectedActors.includes(actor.slug) }"
-				>
-					<router-link
-						:to="{ query: {
-							...$route.query,
-							actors: actor.slug,
-						}, params: { pageNumber: 1 } }"
-						class="filter-name"
-					>{{ actor.name }}</router-link>
-
-					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(actor) }, params: { pageNumber: 1 } }"
-						class="filter-include"
+				<ul class="filter-items nolist">
+					<li
+						v-for="actor in availableActors"
+						:key="actor.id"
+						class="filter-item"
+						:class="{ selected: selectedActors.includes(actor.slug) }"
 					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
+						<router-link
+							:to="{ query: {
+								...$route.query,
+								actors: actor.slug,
+							}, params: { pageNumber: 1 } }"
+							class="filter-name"
+						>{{ actor.name }}</router-link>
 
-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
+						<router-link
+							:to="{ query: { ...$route.query, ...getNewRange(actor) }, params: { pageNumber: 1 } }"
+							class="filter-include"
+						>
+							<Icon
+								icon="checkmark"
+								class="filter-add"
+							/>
+
+							<Icon
+								icon="cross2"
+								class="filter-remove"
+							/>
+						</router-link>
+					</li>
+				</ul>
+			</div>
+		</template>
+	</Tooltip>
 </template>
 
 <script>

assets/components/filters/channel-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="antenna" />
 
@@ -14,60 +14,62 @@
 			>Channels</div>
 		</div>
 
-		<div slot="popover">
-			<router-link
-				class="filter-clear"
-				:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
-				:class="{ active: selectedLength > 0 }"
-			>clear all<Icon icon="cross2" /></router-link>
+		<template v-slot:tooltip>
+			<div @click.stop>
+				<router-link
+					class="filter-clear"
+					:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
+					:class="{ active: selectedLength > 0 }"
+				>clear all<Icon icon="cross2" /></router-link>
 
-			<ul class="filter-items nolist">
-				<li
-					v-for="channel in channelsPerNetwork"
-					:key="`channel-${channel.id}`"
-					class="filter-item"
-					:class="{
-						[channel.type]: true,
-						independent: channel.independent,
-						selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.slug),
-						disabled: channel.parent && selectedNetworks.includes(channel.parent.slug),
-					}"
-				>
-					<router-link
-						:to="{ query: {
-							...$route.query,
-							[channel.type === 'network' ? 'networks' : 'channels']: channel.slug,
-							[channel.type === 'network' ? 'channels' : 'networks']: undefined,
-						}, params: { pageNumber: 1 } }"
-						class="filter-name"
+				<ul class="filter-items nolist">
+					<li
+						v-for="channel in channelsPerNetwork"
+						:key="`channel-${channel.id}`"
+						class="filter-item"
+						:class="{
+							[channel.type]: true,
+							independent: channel.independent,
+							selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.slug),
+							disabled: channel.parent && selectedNetworks.includes(channel.parent.slug),
+						}"
 					>
-						<img
-							v-if="channel.type === 'network' || channel.independent || !channel.parent "
-							:src="`/img/logos/${channel.slug}/favicon.png`"
-							class="favicon"
+						<router-link
+							:to="{ query: {
+								...$route.query,
+								[channel.type === 'network' ? 'networks' : 'channels']: channel.slug,
+								[channel.type === 'network' ? 'channels' : 'networks']: undefined,
+							}, params: { pageNumber: 1 } }"
+							class="filter-name"
 						>
+							<img
+								v-if="channel.type === 'network' || channel.independent || !channel.parent "
+								:src="`/img/logos/${channel.slug}/favicon.png`"
+								class="favicon"
+							>
 
-						{{ channel.name }}
-					</router-link>
+							{{ channel.name }}
+						</router-link>
 
-					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
-						class="filter-include"
-					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
+						<router-link
+							:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
+							class="filter-include"
+						>
+							<Icon
+								icon="checkmark"
+								class="filter-add"
+							/>
 
-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
+							<Icon
+								icon="cross2"
+								class="filter-remove"
+							/>
+						</router-link>
+					</li>
+				</ul>
+			</div>
+		</template>
+	</Tooltip>
 </template>
 
 <script>

assets/components/filters/filter-bar.vue

@@ -1,41 +1,33 @@
 <template>
 	<div class="filter-bar noselect">
 		<div class="sort">
-			<router-link
-				:to="{ params: { range: 'latest', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'latest' || range === 'latest' }"
+			<RouterLink
+				v-for="section in ranges"
+				:key="section"
+				:to="{ params: { range: section, pageNumber: 1 }, query: $route.query }"
+				:class="{ active: $route.name === section || range === section }"
 				class="range range-button"
-			>Latest</router-link>
-
-			<router-link
-				:to="{ params: { range: 'upcoming', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
-				class="range-button"
-			>Upcoming</router-link>
-
-			<router-link
-				:to="{ params: { range: 'new', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'new' || range === 'new' }"
-				class="range-button"
-			>New</router-link>
+			>{{ section }}</RouterLink>
 		</div>
 
+		<span
+			v-if="itemsTotal && showTotal"
+			class="total"
+		>{{ itemsTotal }} <template v-if="itemsTotal === 1">scene</template><template v-else>scenes</template></span>
+
 		<div class="filters">
 			<ActorFilter
 				class="filters-filter"
-				:filter="filter"
 				:available-actors="availableActors"
 			/>
 
 			<ChannelFilter
 				class="filters-filter"
-				:filter="filter"
 				:available-channels="availableChannels"
 			/>
 
 			<TagFilter
 				class="filters-filter"
-				:filter="filter"
 				:available-tags="availableTags"
 			/>
 		</div>
@@ -49,10 +41,6 @@ import ActorFilter from './actor-filter.vue';
 import ChannelFilter from './channel-filter.vue';
 import TagFilter from './tag-filter.vue';
 
-function filter(state) {
-	return state.ui.filter;
-}
-
 function range() {
 	return this.$route.params.range;
 }
@@ -88,6 +76,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		showTotal: {
+			type: Boolean,
+			default: true,
+		},
 		itemsTotal: {
 			type: Number,
 			default: 0,
@@ -96,6 +88,10 @@ export default {
 			type: Number,
 			default: 10,
 		},
+		ranges: {
+			type: Array,
+			default: () => ['latest', 'upcoming', 'new'],
+		},
 		availableTags: {
 			type: Array,
 			default: () => [],
@@ -111,7 +107,6 @@ export default {
 	},
 	computed: {
 		...mapState({
-			filter,
 			range,
 			batch,
 		}),
@@ -131,6 +126,20 @@ export default {
 	display: inline-flex;
 	align-items: center;
 
+	.filter-applied {
+		flex-grow: 1;
+		padding: .75rem .5rem;
+		font-size: 1rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-align: right;
+
+		&.empty {
+			color: var(--shadow);
+		}
+	}
+
 	.icon {
 		fill: var(--shadow);
 		margin: -.1rem 0 0 0;
@@ -149,28 +158,19 @@ export default {
 	}
 }
 
-.filter-applied {
-	flex-grow: 1;
-	padding: .75rem .5rem;
-	font-size: 1rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	text-align: right;
-
-	&.empty {
-		color: var(--shadow);
-	}
-}
-
 .filter-mode {
 	width: 100%;
+	color: var(--shadow);
 	background: none;
 	padding: .75rem;
 	margin: 0 0 .5rem 0;
 	font-size: 1rem;
 	border: none;
 	border-bottom: solid 1px var(--shadow-hint);
+
+	option {
+		color: var(--text-dark);
+	}
 }
 
 .filter-clear {
@@ -178,25 +178,25 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	padding: .5rem 1rem;
-	color: var(--darken-weak);
+	color: var(--shadow-weak);
 	text-decoration: none;
 	cursor: default;
 
 	.icon {
-		fill: var(--darken-hint);
+		fill: var(--shadow-hint);
 		margin: 0 0 0 1rem;
 	}
 
 	&.active {
-		color: var(--darken);
+		color: var(--shadow);
 
 		.icon {
-			fill: var(--darken-weak);
+			fill: var(--shadow-weak);
 		}
 
 		&:hover {
 			color: var(--text);
-			background: var(--darken-hint);
+			background: var(--shadow-hint);
 			cursor: pointer;
 
 			.icon {
@@ -211,7 +211,7 @@ export default {
 	align-items: center;
 
 	&:hover {
-		background: var(--darken-hint);
+		background: var(--shadow-hint);
 		cursor: pointer;
 	}
 
@@ -239,7 +239,7 @@ export default {
 		width: 1rem;
 		height: 1rem;
 		padding: .5rem 1rem;
-		fill: var(--darken-hint);
+		fill: var(--shadow-hint);
 	}
 
 	.filter-remove {
@@ -263,7 +263,7 @@ export default {
 
 .filter-include:hover,
 .filter-name:hover {
-	background: var(--darken-hint);
+	background: var(--shadow-hint);
 }
 
 @media(max-width: $breakpoint-small) {
@@ -278,6 +278,10 @@ export default {
 	.filters-filter:last-child .filter {
 		padding: .5rem 0 .5rem .5rem;
 	}
+
+	.total {
+		display: none;
+	}
 }
 </style>
 
@@ -319,6 +323,7 @@ export default {
     text-decoration: none;
 	border: solid 1px transparent;
 	border-bottom: none;
+	text-transform: capitalize;
 
     &:hover:not(.active) {
         color: var(--shadow-strong);
@@ -351,4 +356,11 @@ export default {
 		margin: 0 1rem 0 0;
 	}
 }
+
+.total {
+	flex-shrink: 0;
+	padding: 0 1rem;
+	color: var(--shadow);
+	font-size: .8rem;
+}
 </style>

assets/components/filters/filters.vue

@@ -0,0 +1,84 @@
+<template>
+	<Dialog
+		title="Filters"
+		@close="$emit('close')"
+	>
+		<div class="filters dialog-body">
+			<h3 class="form-heading">Show me</h3>
+
+			<ul class="tags nolist">
+				<li
+					v-for="tag in tags"
+					:key="tag"
+					class="tags-item"
+				>
+					<Checkbox
+						:checked="!tagFilter.includes(tag)"
+						:label="tag"
+						class="tag"
+						@change="(state) => filterTag(tag, state)"
+					/>
+				</li>
+			</ul>
+
+			<p class="disclaimer">You may still incidentally see filtered out content</p>
+		</div>
+	</Dialog>
+</template>
+
+<script>
+import Checkbox from '../form/checkbox.vue';
+
+function tagFilter() {
+	return this.$store.state.ui.tagFilter;
+}
+
+function filterTag(tag, isChecked) {
+	if (isChecked) {
+		this.$store.dispatch('setTagFilter', this.tagFilter.filter(filteredTag => filteredTag !== tag));
+	} else {
+		this.$store.dispatch('setTagFilter', this.tagFilter.concat(tag));
+	}
+}
+
+export default {
+	components: {
+		Checkbox,
+	},
+	data() {
+		return {
+			tags: ['anal', 'gay', 'transsexual', 'bisexual', 'pissing', 'anal prolapse'],
+		};
+	},
+	computed: {
+		tagFilter,
+	},
+	emits: ['close'],
+	methods: {
+		filterTag,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.filters {
+	width: 20rem;
+	max-width: 100%;
+}
+
+.tags-item {
+	display: block;
+}
+
+.tag {
+	padding: .5rem 0;
+}
+
+.disclaimer {
+	margin: 1rem 0 0 0;
+	line-height: 1.5;
+	text-align: center;
+	font-size: .9rem;
+	color: var(--shadow);
+}
+</style>

assets/components/filters/tag-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="price-tag4" />
 
@@ -14,58 +14,63 @@
 			>Tags</div>
 		</div>
 
-		<div slot="popover">
-			<select
-				v-model="mode"
-				class="filter-mode"
-				@change="$router.push({ query: { ...$route.query, mode }, params: { pageNumber: 1 } })"
+		<template #tooltip>
+			<div
+				class="filter-options"
+				@click.stop
 			>
-				<option value="all">match all selected</option>
-				<option value="any">match any selected</option>
-			</select>
-
-			<router-link
-				class="filter-clear"
-				:to="{ query: { ...$route.query, tags: undefined, mode: undefined } }"
-				:class="{ active: selectedTags.length > 0 }"
-			>clear all<Icon icon="cross2" /></router-link>
-
-			<ul class="filter-items nolist">
-				<li
-					v-for="tag in availableTags"
-					:key="`tag-${tag.id}`"
-					class="filter-item"
-					:class="{ selected: selectedTags.includes(tag.slug) }"
+				<select
+					v-model="mode"
+					class="filter-mode"
+					@change="$router.push({ query: { ...$route.query, mode }, params: { pageNumber: 1 } })"
 				>
-					<router-link
-						:to="{ query: { ...$route.query, tags: tag.slug, mode }, params: { pageNumber: 1 } }"
-						class="filter-name"
-					>{{ tag.name }}</router-link>
+					<option value="all">match all selected</option>
+					<option value="any">match any selected</option>
+				</select>
 
-					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
-						class="filter-include"
+				<router-link
+					class="filter-clear"
+					:to="{ query: { ...$route.query, tags: undefined, mode: undefined } }"
+					:class="{ active: selectedTags.length > 0 }"
+				>clear all<Icon icon="cross2" /></router-link>
+
+				<ul class="filter-items nolist">
+					<li
+						v-for="tag in availableTags"
+						:key="`tag-${tag.id}`"
+						class="filter-item"
+						:class="{ selected: selectedTags.includes(tag.slug) }"
 					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
+						<router-link
+							:to="{ query: { ...$route.query, tags: tag.slug, mode }, params: { pageNumber: 1 } }"
+							class="filter-name"
+						>{{ tag.name }}</router-link>
 
-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
+						<router-link
+							:to="{ query: { ...$route.query, ...getNewRange(tag.slug), mode }, params: { pageNumber: 1 } }"
+							class="filter-include"
+						>
+							<Icon
+								icon="checkmark"
+								class="filter-add"
+							/>
+
+							<Icon
+								icon="cross2"
+								class="filter-remove"
+							/>
+						</router-link>
+					</li>
+				</ul>
+			</div>
+		</template>
+	</Tooltip>
 </template>
 
 <script>
 function getNewRange(tag) {
 	if (this.selectedTags.includes(tag)) {
-		return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') || undefined };
+		return { tags: this.selectedTags.filter((selectedTag) => selectedTag !== tag).join(',') || undefined };
 	}
 
 	return { tags: this.selectedTags.concat(tag).join(',') };
@@ -77,10 +82,6 @@ function selectedTags() {
 
 export default {
 	props: {
-		filter: {
-			type: Array,
-			default: () => [],
-		},
 		compact: {
 			type: Boolean,
 			default: false,
@@ -103,3 +104,9 @@ export default {
 	},
 };
 </script>
+
+<style lang="scss" scoped>
+.filter-options {
+	width: 15rem;
+}
+</style>

assets/components/footer/footer.vue

@@ -6,19 +6,32 @@
 			:to="{ name: 'stats' }"
 			class="segment footer-link nolink"
 		>stats</router-link>
+
+		<a
+			v-if="config.discord"
+			:href="config.discord"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="segment footer-link nolink discord"
+		><Icon icon="discord" /></a>
 	</footer>
 </template>
 
 <style lang="scss" scoped>
 .footer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	background: var(--background-dim);
 	color: var(--shadow);
 	font-size: .8rem;
 	font-weight: bold;
-	text-align: center;
+	box-shadow: inset -3px 0 3px var(--shadow-hint);
 }
 
 .segment {
+	display: inline-flex;
+	align-items: center;
 	padding: .5rem;
 
 	&:not(:last-child) {
@@ -31,6 +44,17 @@
 
 	&:hover {
 		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+.discord {
+	.icon {
+		fill: var(--shadow);
+		width: 4rem;
 	}
 }
 </style>

assets/components/form/checkbox.vue

@@ -0,0 +1,102 @@
+<template>
+	<label class="check-container noselect">
+		<span
+			v-if="label"
+			class="check-label"
+		>{{ label }}</span>
+
+		<input
+			v-show="false"
+			:id="`checkbox-${uid}`"
+			:checked="checked"
+			type="checkbox"
+			class="check-checkbox"
+			@change="$emit('change', $event.target.checked)"
+		>
+
+		<label
+			:for="`checkbox-${uid}`"
+			class="check"
+		/>
+	</label>
+</template>
+
+<script>
+export default {
+	props: {
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		label: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['change'],
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.check-container {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.check {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	flex-shrink: 0;
+	position: relative;
+	background-color: var(--shadow-hint);
+    cursor: pointer;
+    transition: background .15s ease;
+
+    &::after {
+        content: '';
+        width: .5rem;
+        height: .3rem;
+        border: solid 2px var(--text-light);
+        border-top: none;
+        border-right: none;
+        margin: -.2rem 0 0 0;
+        transform: rotateZ(-45deg) scaleX(0);
+        transition: transform .15s ease;
+    }
+}
+
+.check-cross .check::before {
+	content: '';
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background: url('/img/icons/cross3.svg') no-repeat center/80%;
+	opacity: .15;
+	transition: transform .1s ease;
+}
+
+.check-checkbox:checked + .check {
+    background: var(--primary);
+
+    &::after {
+        transform: rotateZ(-45deg) scaleX(1);
+    }
+
+	&::before {
+        transform: scaleX(0);
+	}
+}
+
+.check-label {
+	overflow: hidden;
+	text-transform: capitalize;
+	text-overflow: ellipsis;
+	margin: 0 .5rem 0 0;
+}
+</style>

assets/components/form/range.vue

@@ -0,0 +1,245 @@
+<template>
+	<div class="range-container">
+		<div
+			class="label label-start"
+			:class="{ disabled }"
+			@click="setValue('valueA', min)"
+		>
+			<slot name="start" />
+		</div>
+
+		<div
+			class="range"
+			:class="{ disabled }"
+			:style="{ background: `linear-gradient(90deg, var(--slider-track) ${minPercentage}%, var(--slider-range) ${minPercentage}%, var(--slider-range) ${maxPercentage}%, var(--slider-track) ${maxPercentage}%)` }"
+			@click="setNearest"
+		>
+			<input
+				v-model.number="valueA"
+				:min="min"
+				:max="max"
+				:data-value="valueA"
+				:disabled="disabled"
+				type="range"
+				class="slider"
+				@input="emit('input')"
+				@change="emit('change')"
+				@click.stop
+			>
+
+			<input
+				v-model.number="valueB"
+				:min="min"
+				:max="max"
+				:data-value="valueB"
+				:disabled="disabled"
+				type="range"
+				class="slider"
+				@input="emit('input')"
+				@change="emit('change')"
+				@click.stop
+			>
+		</div>
+
+		<div
+			class="label label-end"
+			:class="{ disabled }"
+			@click="setValue('valueB', max)"
+		>
+			<slot name="end" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { nextTick } from 'vue';
+
+function minValue() {
+	return Math.min(this.valueA, this.valueB);
+}
+
+function maxValue() {
+	return Math.max(this.valueA, this.valueB);
+}
+
+function minPercentage() {
+	return ((this.minValue - this.min) / (this.max - this.min)) * 100;
+}
+
+function maxPercentage() {
+	return ((this.maxValue - this.min) / (this.max - this.min)) * 100;
+}
+
+function emit(type = 'change') {
+	if (this.values) {
+		this.$emit(type, [this.values[this.minValue], this.values[this.maxValue]]);
+		return;
+	}
+
+	this.$emit(type, [this.minValue, this.maxValue]);
+}
+
+function setNearest(event) {
+	if (this.allowEnable) {
+		this.emit('enable');
+	}
+
+	nextTick(() => {
+		if (!this.disabled) {
+			const closestValue = Math.round((event.offsetX / event.target.getBoundingClientRect().width) * (this.max - this.min)) + this.min;
+			const closestSlider = Math.abs(this.valueA - closestValue) < Math.abs(this.valueB - closestValue) ? 'valueA' : 'valueB';
+
+			this[closestSlider] = closestValue;
+			this.emit();
+		}
+	});
+}
+
+function setValue(prop, value) {
+	if (this.allowEnable) {
+		this.emit('enable');
+	}
+
+	nextTick(() => {
+		if (!this.disabled) {
+			this[prop] = value;
+			this.emit();
+		}
+	});
+}
+
+export default {
+	props: {
+		min: {
+			type: Number,
+			default: 0,
+		},
+		max: {
+			type: Number,
+			default: 10,
+		},
+		value: {
+			type: Array,
+			default: () => [3, 7],
+		},
+		values: {
+			type: Array,
+			default: null,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		allowEnable: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	emits: ['change', 'input', 'enable'],
+	data() {
+		if (this.values) {
+			return {
+				valueA: this.values.indexOf(this.value[0]),
+				valueB: this.values.indexOf(this.value[1]),
+			};
+		}
+
+		return {
+			valueA: this.value[0],
+			valueB: this.value[1],
+		};
+	},
+	computed: {
+		minValue,
+		maxValue,
+		minPercentage,
+		maxPercentage,
+	},
+	methods: {
+		emit,
+		setNearest,
+		setValue,
+	},
+};
+</script>
+
+<style lang="scss">
+.dark .range-container .range {
+	--slider-range: var(--lighten-weak);
+}
+</style>
+
+<style lang="scss" scoped>
+@mixin thumb {
+	appearance: none;
+	display: block;
+	width: 1.25rem;
+	height: 1.25rem;
+	border: none;
+	border-radius: 50%;
+	background: var(--slider-thumb);
+	pointer-events: visible;
+	cursor: pointer;
+	box-shadow: 0 0 3px var(--darken-weak);
+}
+
+.range-container {
+	display: flex;
+	justify-content: space-between;
+}
+
+.range {
+	--slider-track: var(--shadow-hint);
+	--slider-range: var(--primary-faded);
+	--slider-thumb: var(--primary);
+
+	position: relative;
+	height: 1.25rem;
+	flex-grow: 1;
+	border-radius: .625rem;
+
+	&.disabled {
+		--slider-range: var(--shadow-weak);
+		--slider-thumb: var(--disabled-handle);
+	}
+}
+
+.slider {
+	width: 100%;
+	top: 0;
+	margin: 0;
+	appearance: none;
+	position: absolute;
+	background: none;
+	outline: none;
+	pointer-events: none;
+}
+
+.slider::-webkit-slider-thumb {
+	@include thumb;
+}
+
+.slider::-moz-range-thumb {
+	@include thumb;
+	transform: translateY(2px);
+}
+
+.label {
+	padding: 0 .5rem;
+
+	&:hover:not(.disabled) {
+		cursor: pointer;
+
+		::v-deep(.icon) {
+			fill: var(--primary);
+		}
+	}
+}
+
+::v-deep(.icon) {
+	width: 1.25rem;
+	height: 1.25rem;
+	flex-shrink: 0;
+	fill: var(--shadow);
+}
+</style>

assets/components/form/toggle.vue

@@ -0,0 +1,115 @@
+<template>
+	<label
+		class="toggle-container noselect"
+		:class="{ light: $store.state.ui.theme === 'dark' }"
+	>
+		<input
+			:id="`toggle-${id}`"
+			:checked="checked"
+			:true-value="trueValue"
+			:false-value="falseValue"
+			:disabled="disabled"
+			type="checkbox"
+			class="toggle-input"
+			@change="$emit('change', $event.target.checked)"
+		>
+
+		<label
+			:for="`toggle-${id}`"
+			class="toggle"
+		/>
+	</label>
+</template>
+
+<script>
+export default {
+	props: {
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		trueValue: {
+			type: null,
+			default: true,
+		},
+		falseValue: {
+			type: null,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['change'],
+	data() {
+		return {
+			id: Math.floor(new Date().getTime() * Math.random()),
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.toggle-container {
+	display: inline-block;
+	cursor: pointer;
+
+	&.light {
+		.toggle {
+			background: var(--lighten-weak);
+		}
+
+		.toggle-input:checked + .toggle {
+			background: var(--lighten);
+		}
+	}
+}
+
+.toggle {
+	width: 2rem;
+	height: .9rem;
+	display: flex;
+	align-items: center;
+	position: relative;
+	background: var(--shadow-hint);
+	border-radius: 1rem;
+	cursor: pointer;
+
+	&::after {
+		content: '';
+		background-color: var(--background-light);
+		width: 1rem;
+		height: 1rem;
+		display: inline-block;
+		position: absolute;
+		left: 0;
+		border-radius: 50%;
+		box-shadow: 0 0 2px var(--darken-strong);
+		transition: background-color .2s ease, left .2s ease;
+	}
+}
+
+.toggle-input {
+	display: none;
+
+	&:checked + .toggle {
+		background: var(--primary-faded);
+
+		&::after {
+			background: var(--primary);
+			left: calc(100% - 1rem);
+		}
+	}
+
+	&[disabled] + .toggle {
+		background: var(--shadow-weak);
+
+		&::after {
+			background: var(--shadow);
+		}
+	}
+}
+</style>

assets/components/header/header.vue

@@ -16,7 +16,8 @@
 					<li class="nav-item">
 						<router-link
 							v-slot="{ href, isActive, navigate }"
-							to="/actors"
+							:to="{ name: 'actors', params: { pageNumber: 1 } }"
+							custom
 						>
 							<a
 								class="nav-link"
@@ -30,7 +31,8 @@
 					<li class="nav-item">
 						<router-link
 							v-slot="{ href, isActive, navigate }"
-							to="/networks"
+							:to="{ name: 'channels' }"
+							custom
 						>
 							<a
 								class="nav-link"
@@ -44,7 +46,8 @@
 					<li class="nav-item">
 						<router-link
 							v-slot="{ href, isActive, navigate }"
-							to="/tags"
+							:to="{ name: 'tags' }"
+							custom
 						>
 							<a
 								class="nav-link"
@@ -58,7 +61,8 @@
 					<li class="nav-item">
 						<router-link
 							v-slot="{ href, isActive, navigate }"
-							to="/movies"
+							:to="{ name: 'movies', params: { range: 'latest', pageNumber: 1 } }"
+							custom
 						>
 							<a
 								class="nav-link"
@@ -75,50 +79,52 @@
 		<div class="header-section">
 			<div
 				class="sidebar-toggle noselect"
-				@click.stop="toggleSidebar"
+				@click.stop="$emit('toggleSidebar')"
 			><Icon icon="menu" /></div>
 
-			<div class="header-toggles">
-				<Icon
-					v-show="!sfw"
-					v-tooltip="'Hit S to enable safe mode'"
-					icon="flower"
-					class="toggle noselect"
-					@click.native="setSfw(true)"
-				/>
+			<Tooltip v-if="me">
+				<div
+					class="header-button header-notifications"
+					:class="{ unseen: unseenNotificationsCount > 0 }"
+				>
+					<Icon icon="bell2" />
 
-				<Icon
-					v-show="sfw"
-					v-tooltip="'Hit N to disable safe mode'"
-					icon="fire"
-					class="toggle noselect"
-					@click.native="setSfw(false)"
-				/>
+					<span
+						v-if="unseenNotificationsCount > 0"
+						class="notifications-count"
+					>{{ unseenNotificationsCount }}</span>
+				</div>
 
-				<Icon
-					v-show="theme === 'light'"
-					v-tooltip="'Hit D to use dark theme'"
-					icon="moon"
-					class="toggle noselect"
-					@click.native="setTheme('dark')"
-				/>
+				<template v-slot:tooltip>
+					<Notifications
+						:notifications="notifications"
+						:unseen-count="unseenNotificationsCount"
+						@check="fetchNotifications"
+						@add-alert="showAddAlert = true"
+					/>
+				</template>
+			</Tooltip>
 
-				<Icon
-					v-show="theme === 'dark'"
-					v-tooltip="'Hit L to use light theme'"
-					icon="sun"
-					class="toggle noselect"
-					@click.native="setTheme('light')"
-				/>
-			</div>
+			<Tooltip>
+				<div class="header-button header-account">
+					<div class="account">
+						<Icon
+							icon="user3-long"
+							class="avatar"
+						/>
+					</div>
+				</div>
 
-			<Search class="search-full" />
+				<template v-slot:tooltip>
+					<Menu @show-filters="state => $emit('showFilters', state)" />
+				</template>
+			</Tooltip>
 
-			<v-popover
+			<Tooltip
 				class="search-compact"
 				:open="searching"
-				@show="searching = true"
-				@hide="searching = false"
+				@open="searching = true"
+				@close="searching = false"
 			>
 				<button
 					type="button"
@@ -127,65 +133,73 @@
 					icon="search"
 				/></button>
 
-				<Search
-					slot="popover"
-					:searching="searching"
-					class="compact"
-					@search="searching = false"
-				/>
-			</v-popover>
+				<template v-slot:tooltip>
+					<Search
+						:searching="searching"
+						class="compact"
+						@search="searching = false"
+						@click.stop
+					/>
+				</template>
+			</Tooltip>
+
+			<Search class="search-full" />
 		</div>
+
+		<AddAlert
+			v-if="showAddAlert"
+			@close="showAddAlert = false"
+		>Alert</AddAlert>
 	</header>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import Menu from './menu.vue';
+import Notifications from './notifications.vue';
+import AddAlert from '../alerts/add.vue';
 
 import Search from './search.vue';
 
 import logo from '../../img/logo.svg';
 
-function sfw(state) {
-	return state.ui.sfw;
+function me() {
+	return this.$store.state.auth.user;
 }
 
-function theme(state) {
-	return state.ui.theme;
-}
+async function fetchNotifications() {
+	const { notifications, unseenCount } = await this.$store.dispatch('fetchNotifications');
 
-function setTheme(newTheme) {
-	this.$store.dispatch('setTheme', newTheme);
-}
-
-function setSfw(enabled) {
-	this.$store.dispatch('setSfw', enabled);
+	this.notifications = notifications;
+	this.unseenNotificationsCount = unseenCount;
 }
 
 export default {
 	components: {
+		AddAlert,
+		Menu,
+		Notifications,
 		Search,
 	},
-	props: {
-		toggleSidebar: {
-			type: Function,
-			default: null,
-		},
-	},
+	emits: ['toggleSidebar', 'showFilters'],
 	data() {
 		return {
 			logo,
 			searching: false,
+			showFilters: false,
+			showAddAlert: false,
+			notifications: [],
+			unseenNotificationsCount: 0,
 		};
 	},
 	computed: {
-		...mapState({
-			sfw,
-			theme,
-		}),
+		me,
 	},
+	watch: {
+		me: fetchNotifications,
+	},
+	mounted: fetchNotifications,
 	methods: {
-		setSfw,
-		setTheme,
+		fetchNotifications,
 	},
 };
 </script>
@@ -300,22 +314,67 @@ export default {
     }
 }
 
-.header-toggles {
-    margin: 0 .5rem 0 0;
+.header-button {
+	padding: 1rem .75rem;
 
-    .icon {
-        padding: 1rem .75rem;
-        fill: var(--shadow);
+	.icon {
+		fill: var(--shadow);
+	}
 
-        &:hover {
-            fill: var(--shadow-strong);
-            cursor: pointer;
-        }
+	&:hover {
+		cursor: pointer;
 
-        &.active {
-            fill: var(--primary);
-        }
-    }
+		.account {
+			border-color: var(--primary);
+		}
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+.header-account {
+	padding: 1rem 1.25rem 1rem .75rem;
+}
+
+.header-notifications {
+	position: relative;
+	padding: 1rem .75rem;
+
+	&.unseen .icon {
+		fill: var(--primary);
+	}
+}
+
+.notifications-count {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	bottom: .3rem;
+	left: 0;
+	color: var(--primary);
+	font-size: .6rem;
+	font-weight: bold;
+}
+
+.account {
+	width: 1.25rem;
+	height: 1.25rem;
+	display: flex;
+	justify-content: center;
+	border: solid 2px var(--shadow);
+	border-radius: 1.5rem;
+	overflow: hidden;
+
+	.avatar {
+		width: 1rem;
+		height: 1rem;
+		margin: .3rem 0 0 0;
+		fill: var(--shadow);
+	}
 }
 
 .search-compact {
@@ -352,8 +411,8 @@ export default {
         display: flex;
     }
 
-    .header-toggles {
-        margin: 0;
+    .header-account {
+		padding: 1rem .5rem 1rem 1rem;
     }
 }
 
@@ -363,27 +422,19 @@ export default {
     }
 
 	.logo-link {
-		margin: -.25rem .75rem 0 0;
+		margin: -.25rem 1.25rem 0 0;
 	}
 
 	.nav-link {
-		padding: 0 .75rem;
+		padding: 0.05rem .75rem 0 .75rem;
 	}
 
     .search-compact {
         display: none;
     }
 
-	.header-toggles {
-		display: none;
-	}
-}
-
-@media(max-width: $breakpoint-micro) {
-}
-
-@media(max-width: $breakpoint-nano) {
-	.header-toggles {
+	.header-account,
+	.header-notifications {
 		display: none;
 	}
 }

assets/components/header/menu.vue

@@ -0,0 +1,190 @@
+<template>
+	<div class="menu">
+		<ul class="menu-items noselect">
+			<RouterLink
+				v-if="login && me"
+				:to="{ name: 'user', params: { username: me.username } }"
+				class="menu-username"
+			>{{ me.username }}</RouterLink>
+
+			<RouterLink
+				v-if="me && favorites"
+				:to="{ name: 'stash', params: { stashId: favorites.id, range: 'scenes', pageNumber: 1 } }"
+				class="menu-item"
+			><Icon icon="heart7" />Favorites</RouterLink>
+
+			<RouterLink
+				v-else-if="login"
+				:to="{ name: 'login', query: { ref: $route.path } }"
+				class="menu-item"
+				@click.stop
+			>
+				<Icon icon="enter2" />Log in
+			</RouterLink>
+
+			<li
+				v-show="!sfw"
+				class="menu-item"
+				@click.stop="setSfw(true)"
+			>
+				<Icon
+					icon="flower"
+					class="toggle noselect"
+				/>Safe mode
+			</li>
+
+			<li
+				v-show="sfw"
+				class="menu-item"
+				@click.stop="setSfw(false)"
+			>
+				<Icon
+					icon="fire"
+					class="toggle noselect"
+				/>Filth mode
+			</li>
+
+			<li
+				v-show="theme === 'light'"
+				class="menu-item"
+				@click.stop="setTheme('dark')"
+			>
+				<Icon
+					icon="moon"
+					class="toggle noselect"
+				/>Dark theme
+			</li>
+
+			<li
+				v-show="theme === 'dark'"
+				class="menu-item"
+				@click.stop="setTheme('light')"
+			>
+				<Icon
+					icon="sun"
+					class="toggle noselect"
+				/>Light theme
+			</li>
+
+			<li
+				class="menu-item"
+				@click="$emit('showFilters', true)"
+			>
+				<Icon icon="filter" />Filters
+			</li>
+
+			<li
+				v-if="login && me"
+				class="menu-item"
+				@click.stop="$store.dispatch('logout')"
+			>
+				<Icon icon="exit2" />Log out
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+function sfw(state) {
+	return state.ui.sfw;
+}
+
+function theme(state) {
+	return state.ui.theme;
+}
+
+function login(state) {
+	return state.auth.login;
+}
+
+function signup(state) {
+	return state.auth.signup;
+}
+
+function favorites() {
+	return this.me?.stashes.find(stash => stash.primary);
+}
+
+function me(state) {
+	return state.auth.user;
+}
+
+function setTheme(newTheme) {
+	this.$store.dispatch('setTheme', newTheme);
+}
+
+function setSfw(enabled) {
+	this.$store.dispatch('setSfw', enabled);
+}
+
+export default {
+	computed: {
+		...mapState({
+			login,
+			signup,
+			sfw,
+			theme,
+			me,
+		}),
+		favorites,
+	},
+	emits: ['showFilters'],
+	methods: {
+		setSfw,
+		setTheme,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.menu-items {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.menu-item {
+	display: flex;
+	padding: .75rem 1rem .75rem .75rem;
+	color: var(--text);
+	text-decoration: none;
+
+	.icon {
+		fill: var(--shadow);
+		margin: 0 1rem 0 0;
+	}
+
+	&.disabled {
+		color: var(--shadow-weak);
+		cursor: default;
+
+		.icon {
+			fill: var(--shadow-weak);
+		}
+	}
+
+	&:hover:not(.disabled) {
+		cursor: pointer;
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+.menu-username {
+	display: block;
+	font-weight: bold;
+	color: var(--shadow-strong);
+	font-size: .9rem;
+	padding: .75rem 1rem;
+	border-bottom: solid 1px var(--shadow-hint);
+	text-align: center;
+	text-decoration: none;
+}
+</style>

assets/components/header/notifications.vue

@@ -0,0 +1,341 @@
+<template>
+	<div class="notifications">
+		<div class="notifications-header">
+			<h4 class="notifications-title">Notifications</h4>
+
+			<div class="notifications-actions">
+				<Icon
+					v-if="unseenCount > 0"
+					v-tooltip="'Mark all as seen'"
+					icon="checkmark"
+					@click="checkNotifications"
+				/>
+
+				<Icon
+					v-tooltip="'Add alert'"
+					icon="plus3"
+					@click="$emit('addAlert')"
+				/>
+			</div>
+		</div>
+
+		<div class="notifications-body">
+			<div
+				v-if="notifications.length === 0"
+				class="notifications-empty"
+			>No notifications</div>
+
+			<ul
+				v-else
+				class="nolist"
+			>
+				<li
+					v-for="notification in notifications"
+					:key="`notification-${notification.id}`"
+					:class="{ unseen: !notification.seen }"
+					class="notification"
+					@click="checkNotification(notification.id, true)"
+				>
+					<router-link
+						:to="`/scene/${notification.scene.id}/${notification.scene.slug}`"
+						class="notification-link"
+					>
+						<img
+							:src="getPath(notification.scene.poster, 'thumbnail')"
+							class="poster"
+						>
+
+						<div class="notification-body">
+							<div class="notification-row notification-title">
+								<img
+									v-if="notification.scene.entity.type === 'network' || notification.scene.entity.independent"
+									v-tooltip="notification.scene.entity.name"
+									:src="`/img/logos/${notification.scene.entity.slug}/favicon_${theme === 'dark' ? 'light' : 'dark'}.png`"
+									class="notification-favicon"
+								>
+
+								<img
+									v-else
+									v-tooltip="notification.scene.entity.name"
+									:src="`/img/logos/${notification.scene.entity.parent.slug}/favicon_${theme === 'dark' ? 'light' : 'dark'}.png`"
+									class="notification-favicon"
+								>
+
+								New&nbsp;<ul
+									v-if="notification.alert?.tags.length > 0"
+									class="nolist notification-tags"
+								>
+									<li
+										v-for="tag in notification.alert.tags"
+										:key="`notification-tag-${tag.slug}`"
+										class="notification-tag"
+									>{{ tag.name }}</li>&nbsp;
+								</ul>scene
+							</div>
+
+							<div class="notification-row notification-details">
+								<span class="notification-date">{{ formatDate(notification.scene.date, 'MMM D') }}</span>
+
+								<ul
+									v-if="notification.scene.actors.length > 0"
+									class="nolist notification-actors"
+								>
+									<li
+										v-for="actor in notification.scene.actors"
+										:key="`notification-actor-${actor.slug}`"
+										class="notification-actor"
+									>{{ actor.name }}</li>
+								</ul>
+							</div>
+						</div>
+
+						<Icon
+							v-if="!notification.seen"
+							v-tooltip="'Mark as seen'"
+							icon="checkmark"
+							class="notification-check"
+							@click.prevent.stop="checkNotification(notification.id)"
+						/>
+
+						<Icon
+							v-if="notification.alert"
+							v-tooltip="`You set an alert for <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'all'}</strong> scenes with <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> for <strong>${notification.alert.entity?.name || 'any channel'}</strong>`"
+							icon="question5"
+							@click.prevent.stop
+						/>
+					</router-link>
+				</li>
+			</ul>
+		</div>
+
+		<div @click="events.emit('blur')">
+			<router-link
+				to="/notifications"
+				class="notification-link notification-more"
+			>See all</router-link>
+		</div>
+	</div>
+</template>
+
+<script>
+async function checkNotifications() {
+	await this.$store.dispatch('checkNotifications');
+
+	this.$emit('check');
+}
+
+async function checkNotification(notificationId, blur) {
+	await this.$store.dispatch('checkNotification', notificationId);
+
+	this.$emit('check');
+
+	if (blur) {
+		this.events.emit('blur');
+	}
+}
+
+export default {
+	props: {
+		notifications: {
+			type: Array,
+			default: () => [],
+		},
+		unseenCount: {
+			type: Number,
+			default: 0,
+		},
+	},
+	data() {
+		return {
+			showAddAlert: false,
+		};
+	},
+	emits: ['addAlert'],
+	methods: {
+		checkNotifications,
+		checkNotification,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.notifications {
+	width: 30rem;
+	max-height: calc(100vh - 5rem);
+	display: flex;
+	flex-direction: column;
+}
+
+.notifications-header {
+	display: flex;
+	justify-content: space-between;
+
+	.icon {
+		padding: .5rem;
+		fill: var(--shadow);
+
+		&:first-child {
+			padding: .5rem .5rem .5rem 1.5rem;
+		}
+
+		&:last-child {
+			padding: .5rem 1.5rem .5rem .5rem;
+		}
+
+		&:hover {
+			fill: var(--primary);
+			cursor: pointer;
+		}
+	}
+}
+
+.notifications-title {
+	display: inline-block;
+	padding: .5rem 1rem;
+	margin: 0;
+	color: var(--shadow);
+	font-size: 1rem;
+	font-weight: bold;
+}
+
+.notifications-body {
+	flex-grow: 1;
+	overflow-y: auto;
+	box-shadow: 0 0 3px var(--shadow-weak);
+}
+
+.notifications-empty {
+	padding: .5rem 1rem;
+	color: var(--shadow);
+}
+
+.notification {
+	display: block;
+	border-right: solid .5rem var(--shadow-touch);
+	color: var(--text);
+
+	&.unseen {
+		border-right: solid .5rem var(--primary);
+	}
+
+	.icon {
+		padding: 1.3rem .5rem;
+		fill: var(--shadow-weak);
+
+		&.notification-check {
+			padding: 1.3rem .5rem 1.3rem 1rem;
+		}
+
+		&:last-child {
+			padding: 1.3rem 1rem 1.3rem .5rem;
+		}
+
+		&:hover {
+			fill: var(--primary);
+		}
+	}
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-hint);
+		margin: 0 0 -1px 0;
+	}
+
+	&:hover {
+		background: var(--shadow-touch);
+
+		&:not(.unseen) {
+			border-right: solid .5rem var(--shadow-weak);
+		}
+	}
+}
+
+.notification-link {
+	display: flex;
+	align-items: stretch;
+	color: inherit;
+	text-decoration: none;
+}
+
+.notification-body {
+	flex-grow: 1;
+	padding: .4rem 0 0 0;
+	overflow: hidden;
+}
+
+.notification-row {
+	display: flex;
+	overflow: hidden;
+}
+
+.notification-title {
+	margin: .15rem .5rem .3rem .5rem;
+}
+
+.notification-favicon {
+	width: 1rem;
+	height: 1rem;
+	margin: 0 .5rem 0 0;
+}
+
+.notification-tags {
+	white-space: nowrap;
+}
+
+.notification-actors {
+	padding: 0 .5rem;
+	height: 1.25rem;
+	display: inline-block;
+	overflow: hidden;
+}
+
+.notification-date {
+	width: 3rem;
+	flex-shrink: 0;
+	padding: .25rem .25rem .35rem .25rem;
+	border-right: solid 1px var(--shadow-hint);
+	border-top: solid 1px var(--shadow-hint);
+	color: var(--shadow-strong);
+	font-size: .8rem;
+	text-align: center;
+}
+
+.notification-actor,
+.notification-tag {
+	white-space: nowrap;
+
+	&:not(:last-child)::after {
+		content: ',';
+		padding: 0 .1rem 0 0;
+	}
+}
+
+.notification-actor {
+	padding: .25rem .15rem .35rem 0;
+	color: var(--shadow-strong);
+	font-size: .9rem;
+}
+
+.notification-tag {
+	font-weight: bold;
+}
+
+.notification-more {
+	display: block;
+	padding: .5rem 1rem;
+	color: var(--shadow);
+	text-align: center;
+	font-size: .9rem;
+	font-weight: bold;
+
+	&:hover {
+		color: var(--primary);
+	}
+}
+
+.poster {
+	width: 6rem;
+	height: 3.6rem;
+	object-fit: cover;
+	object-position: center;
+}
+</style>

assets/components/header/search.vue

@@ -21,16 +21,15 @@
 
 <script>
 async function search() {
-	this.$router.push({ name: 'search', query: { q: this.query } });
-	this.$emit('search');
+	if (this.query) {
+		this.$router.push({ name: 'search', query: { q: this.query } });
+		this.$emit('search');
+	}
 }
 
 function searching(to) {
 	if (to) {
-		setTimeout(() => {
-			// nextTick does not seem to work
-			this.$refs.search.focus();
-		}, 20);
+		this.$refs.search.focus();
 	}
 }
 
@@ -52,6 +51,7 @@ export default {
 			query: this.$route.query ? this.$route.query.q : null,
 		};
 	},
+	emits: ['search'],
 	watch: {
 		$route: route,
 		searching,
@@ -72,19 +72,19 @@ export default {
     flex-grow: 1;
     align-items: center;
     justify-content: flex-end;
-    padding: 0 1rem 0 0;
     border-left: solid 1px var(--shadow-hint);
+	margin: 0 .25rem 0 0;
 
     &.compact {
         padding: 0;
         border: none;
 
-        .search-input {
-            border: solid 1px var(--shadow-hint);
-        }
+		.search-input {
+			padding: .75rem .5rem .75rem .75rem;
+		}
 
         .search-button {
-            padding: 0 .5rem 0 1rem;
+            padding: 1rem 1rem .75rem .25rem;
             margin: 0;
         }
     }
@@ -93,7 +93,7 @@ export default {
 .search-input {
     height: 100%;
     width: 100%;
-    padding: .5rem 0 .5rem .5rem;
+    padding: .5rem 0 .5rem .75rem;
     border: none;
     color: var(--text);
     background: var(--background);
@@ -120,14 +120,20 @@ export default {
         }
     }
 
-    &:focus::placeholder {
-        color: var(--shadow-weak);
+    &:focus {
+		&::placeholder {
+			color: var(--shadow-weak);
+		}
+
+		& + .search-button:not(:hover) .icon {
+			fill: var(--shadow);
+		}
     }
 }
 
 .search-button {
     height: 100%;
-    padding: 0 1rem;
+    padding: 0 1.25rem 0 1rem;
     background: none;
     border: none;
     margin: .3rem 0 0 0;
@@ -141,7 +147,7 @@ export default {
         cursor: pointer;
 
         .icon {
-            fill: var(--shadow);
+            fill: var(--primary);
         }
     }
 }

assets/components/home/home.vue

@@ -1,18 +1,20 @@
 <template>
 	<div class="home">
-		<div
-			ref="content"
-			class="content-inner"
-		>
+		<div class="content-inner">
 			<FilterBar
+				ref="filter"
 				:fetch-releases="fetchReleases"
 				:is-home="true"
 				:items-total="totalCount"
 				:items-per-page="limit"
 				:content="$refs.content"
+				:show-total="false"
 			/>
 
-			<Releases :releases="releases" />
+			<Releases
+				:releases="releases"
+				:done="done"
+			/>
 
 			<Pagination
 				v-if="totalCount > 0"
@@ -31,7 +33,9 @@ import FilterBar from '../filters/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Pagination from '../pagination/pagination.vue';
 
-async function fetchReleases() {
+async function fetchReleases(scroll = true) {
+	this.done = false;
+
 	const { releases, totalCount } = await this.$store.dispatch('fetchReleases', {
 		limit: this.limit,
 		range: this.$route.params.range,
@@ -40,12 +44,11 @@ async function fetchReleases() {
 
 	this.totalCount = totalCount;
 	this.releases = releases;
+	this.done = true;
 
-	this.$refs.content.scrollTop = 0;
-}
-
-async function route() {
-	await this.fetchReleases();
+	if (scroll) {
+		this.$refs.filter?.$el.scrollIntoView();
+	}
 }
 
 async function mounted() {
@@ -65,13 +68,15 @@ export default {
 			releases: [],
 			networks: [],
 			pageTitle: null,
-			limit: 20,
+			limit: 30,
 			totalCount: 0,
 			from: null,
+			done: false,
 		};
 	},
 	watch: {
-		$route: route,
+		$route: fetchReleases,
+		'$store.state.ui.tagFilter': fetchReleases,
 	},
 	mounted,
 	methods: {

assets/components/icon/icon.vue

@@ -28,7 +28,7 @@ export default {
 		};
 	},
 	beforeMount() {
-		this.svg = require(`../../img/icons/${this.icon}.svg`).default;
+		this.svg = require(`../../img/icons/${this.icon}.svg`).default; // eslint-disable-line global-require, import/no-dynamic-require
 	},
 };
 </script>

assets/components/loading/ellipsis.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class="load-container">
+		<div class="load-ellipsis">
+			<div />
+			<div />
+			<div />
+			<div />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.load-container {
+	display: inline-flex;
+	position: relative;
+	padding: 1rem;
+}
+
+.load-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 5rem;
+    height: .75rem;
+}
+
+.load-ellipsis div {
+    position: absolute;
+    top: 0;
+    width: .75rem;
+    height: .75rem;
+    border-radius: 50%;
+    background: var(--primary);
+}
+
+.load-ellipsis div:nth-child(1) {
+    left: .5rem;
+    animation: load-ellipsis1 0.5s infinite linear;
+}
+
+.load-ellipsis div:nth-child(2) {
+    left: .5rem;
+    animation: load-ellipsis2 0.5s infinite linear;
+}
+
+.load-ellipsis div:nth-child(3) {
+    left: 2rem;
+    animation: load-ellipsis3 0.5s infinite linear;
+}
+
+.load-ellipsis div:nth-child(4) {
+    left: 3.5rem;
+    animation: load-ellipsis4 0.5s infinite linear;
+}
+
+@keyframes load-ellipsis1 {
+	0% {
+		transform: scale(0);
+	}
+	100% {
+		transform: scale(0.5);
+	}
+}
+
+@keyframes load-ellipsis2 {
+	0% {
+		transform: translate(0, 0) scale(0.5);
+	}
+	100% {
+		transform: translate(1.5rem, 0) scale(1);
+	}
+}
+
+@keyframes load-ellipsis3 {
+	0% {
+		transform: translate(0, 0) scale(1);
+	}
+	100% {
+		transform: translate(1.5rem, 0) scale(0.5);
+	}
+}
+
+@keyframes load-ellipsis4 {
+    0% {
+		transform: scale(0.5);
+    }
+    100% {
+		transform: scale(0);
+    }
+}
+</style>

assets/components/networks/networks.vue

@@ -1,44 +1,41 @@
 <template>
 	<div class="networks">
-		<form
-			class="search"
-			@submit.prevent="searchEntities"
-		>
-			<input
-				v-model="query"
-				:placeholder="`Find ${channelCount} channels in ${entities.length} networks`"
-				class="query"
-				@input="searchEntities"
-			>
-
-			<button
-				type="submit"
-				class="search-button"
-			><Icon icon="search" /></button>
-		</form>
-
-		<div
-			v-if="query.length > 0"
-			class="entity-tiles"
-		>
-			<Entity
-				v-for="entity in searchResults"
-				:key="`${entity.type}-tile-${entity.slug}`"
-				:entity="entity"
+		<div class="content-inner">
+			<SearchBar
+				:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
+				:eager="true"
 			/>
 
-			<span v-if="searchResults.length === 0">No results for "{{ query }}"</span>
-		</div>
+			<span
+				v-if="done && entities.length === 0"
+				class="empty"
+			>No results for "{{ $route.query.query }}"</span>
 
-		<div
-			v-else
-			class="entity-tiles"
-		>
-			<Entity
-				v-for="entity in entities"
-				:key="`entity-tile-${entity.slug}`"
-				:entity="entity"
-			/>
+			<template v-else>
+				<h2 class="heading">Popular</h2>
+
+				<div
+					class="entity-tiles"
+				>
+					<Entity
+						v-for="entity in popularEntities"
+						:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
+						:entity="entity"
+					/>
+				</div>
+
+				<h2 class="heading">All networks</h2>
+
+				<div
+					class="entity-tiles"
+				>
+					<Entity
+						v-for="entity in entities"
+						:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
+						:entity="entity"
+					/>
+				</div>
+			</template>
 		</div>
 
 		<Footer />
@@ -47,21 +44,78 @@
 
 <script>
 import Entity from '../entities/tile.vue';
+import SearchBar from '../search/bar.vue';
 
-async function searchEntities() {
-	this.searchResults = await this.$store.dispatch('searchEntities', {
-		query: this.query,
-		limit: 50,
-	});
-}
+async function fetchEntities() {
+	if (this.$route.query.query) {
+		await this.searchEntities();
+		return;
+	}
+
+	this.done = false;
 
-async function mounted() {
 	this.entities = await this.$store.dispatch('fetchEntities', {
 		type: 'network',
 		entitySlugs: [],
 	});
 
-	this.pageTitle = 'Networks';
+	this.done = true;
+}
+
+async function searchEntities() {
+	this.done = false;
+
+	this.entities = await this.$store.dispatch('searchEntities', {
+		query: this.$route.query.query,
+		limit: 20,
+	});
+
+	this.done = true;
+}
+
+function popularEntities() {
+	const entitiesBySlug = Object.fromEntries(this.entities.map((entity) => [entity.slug, entity]));
+
+	return [
+		'21sextury',
+		'amateurallure',
+		'analvids',
+		'bamvisions',
+		'bang',
+		'bangbros',
+		'blowpass',
+		'brazzers',
+		'burningangel',
+		'digitalplayground',
+		'dogfartnetwork',
+		'dorcel',
+		'elegantangel',
+		'evilangel',
+		'fakehub',
+		'girlsway',
+		'hookuphotshot',
+		'hussiepass',
+		'insex',
+		'julesjordan',
+		'kellymadison',
+		'kink',
+		'mofos',
+		'naughtyamerica',
+		'newsensations',
+		'pervcity',
+		'pornpros',
+		'private',
+		'realitykings',
+		'twistys',
+		'vixen',
+		'xempire',
+	].map((slug) => entitiesBySlug[slug]).filter(Boolean);
+}
+
+async function mounted() {
+	this.pageTitle = 'Channels';
+
+	await this.fetchEntities();
 }
 
 function channelCount() {
@@ -71,20 +125,25 @@ function channelCount() {
 export default {
 	components: {
 		Entity,
+		SearchBar,
 	},
 	data() {
 		return {
-			query: '',
+			done: false,
 			pageTitle: null,
 			entities: [],
-			searchResults: [],
 		};
 	},
 	computed: {
 		channelCount,
+		popularEntities,
+	},
+	watch: {
+		$route: fetchEntities,
 	},
 	mounted,
 	methods: {
+		fetchEntities,
 		searchEntities,
 	},
 };
@@ -94,56 +153,40 @@ export default {
 @import 'theme';
 
 .networks {
-    padding: 0 1rem;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.content-inner {
+	padding: 0 1rem;
 }
 
 .search {
-    display: flex;
-    width: 100%;
-    max-width: 40rem;
-}
-
-.query {
-    color: var(--text);
-    background: var(--background);
-    flex-grow: 1;
-    box-sizing: border-box;
-    padding: 1rem;
-    border: none;
-    box-sizing: border-box;
-    box-shadow: 0 0 3px var(--darken-weak);
-    margin: 1rem 0;
-    font-size: 1rem;
-    outline: none;
-
-    &:focus {
-        box-shadow: 0 0 3px var(--primary);
-    }
-}
-
-.search-button {
-    padding: 1rem;
-    background: none;
-    border: none;
-
-    .icon {
-        fill: var(--shadow);
-    }
-
-    &:hover {
-        cursor: pointer;
-
-        .icon {
-            fill: var(--primary);
-        }
-    }
+	margin: 1rem 0 0 0;
 }
 
 .entity-tiles {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-    grid-gap: 1rem;
+    grid-gap: .5rem;
     padding: 1rem 0;
+
+	.tile {
+		height: 6rem;
+	}
+}
+
+.empty {
+	display: block;
+	margin: 1rem 0;
+	color: var(--shadow);
+	font-size: 1.25rem;
+	font-weight: bold;
+}
+
+.heading {
+	margin: 1rem 0 0 0;
 }
 
 @media(max-width: $breakpoint2) {

assets/components/notifications/notifications.vue

@@ -0,0 +1,76 @@
+<template>
+	<div
+		ref="page"
+		class="notifications-container"
+	>
+		<h1 class="heading">Notifications</h1>
+
+		<ul class="notifications nolist">
+			<li
+				v-for="notification in notifications"
+				:key="notification.id"
+			>
+				<SceneTile :release="notification.scene" />
+			</li>
+		</ul>
+
+		<Pagination
+			:items-total="totalCount"
+			:items-per-page="10"
+		/>
+	</div>
+</template>
+
+<script>
+import Pagination from '../pagination/pagination.vue';
+import SceneTile from '../releases/scene-tile.vue';
+
+async function fetchNotifications() {
+	const { notifications, totalCount, unseenCount } = await this.$store.dispatch('fetchNotifications', {
+		page: this.$route.params.pageNumber,
+		limit: this.limit,
+	});
+
+	this.notifications = notifications;
+	this.unseenNotificationsCount = unseenCount;
+	this.totalCount = totalCount;
+
+	this.$emit('scroll');
+}
+
+export default {
+	components: {
+		Pagination,
+		SceneTile,
+	},
+	data() {
+		return {
+			notifications: [],
+			limit: 10,
+			totalCount: 0,
+			unseenNotificationsCount: 0,
+		};
+	},
+	emits: ['scroll'],
+	watch: {
+		$route: fetchNotifications,
+	},
+	mounted: fetchNotifications,
+};
+</script>
+
+<style lang="scss" scoped>
+.notifications-container {
+	padding: 1rem;
+}
+
+.notifications {
+	display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+	grid-gap: .5rem;
+}
+
+.pagination {
+	margin: 1rem 0 0 0;
+}
+</style>

assets/components/pagination/pagination.vue

@@ -9,12 +9,12 @@
 		>
 			<router-link
 				class="pagination-button cursor"
-				:to="{ params: { pageNumber: 1 }, query: $route.query }"
+				:to="{ name, params: { ...params, pageNumber: 1 }, query: $route.query }"
 			><Icon icon="first2" /></router-link>
 
 			<router-link
 				class="pagination-button cursor"
-				:to="{ params: { pageNumber: pageNumber - 1 }, query: $route.query }"
+				:to="{ name, params: { ...params, pageNumber: pageNumber - 1 }, query: $route.query }"
 			><Icon icon="arrow-left" /></router-link>
 		</span>
 
@@ -30,14 +30,14 @@
 			<router-link
 				v-for="pageX in pageNumber - 1"
 				:key="`page-${pageX}`"
-				:to="{ params: { pageNumber: pageNumber - pageX }, query: $route.query }"
+				:to="{ name, params: { ...params, pageNumber: pageNumber - pageX }, query: $route.query }"
 				class="pagination-button page"
 			> {{ pageNumber - pageX }} </router-link>
 		</span>
 
 		<router-link
 			:key="`page-${pageNumber}`"
-			:to="{ params: { pageNumber }, query: $route.query }"
+			:to="{ name, params: { ...params, pageNumber }, query: $route.query }"
 			class="pagination-button page active"
 		> {{ pageNumber }} </router-link>
 
@@ -45,7 +45,7 @@
 			<router-link
 				v-for="pageX in (pageCount - pageNumber)"
 				:key="`page-${pageX + pageNumber}`"
-				:to="{ params: { pageNumber: pageX + pageNumber }, query: $route.query }"
+				:to="{ name, params: { ...params, pageNumber: pageX + pageNumber }, query: $route.query }"
 				class="pagination-button page"
 			> {{ pageX + pageNumber }} </router-link>
 		</span>
@@ -56,12 +56,12 @@
 		>
 			<router-link
 				class="pagination-button cursor"
-				:to="{ params: { pageNumber: pageNumber + 1 }, query: $route.query }"
+				:to="{ name, params: { ...params, pageNumber: pageNumber + 1 }, query: $route.query }"
 			><Icon icon="arrow-right" /></router-link>
 
 			<router-link
 				class="pagination-button cursor"
-				:to="{ params: { pageNumber: pageCount }, query: $route.query }"
+				:to="{ name, params: { ...params, pageNumber: pageCount }, query: $route.query }"
 			><Icon icon="last2" /></router-link>
 		</span>
 
@@ -100,6 +100,14 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		name: {
+			type: String,
+			default: null,
+		},
+		params: {
+			type: Object,
+			default: null,
+		},
 	},
 	computed: {
 		pageNumber,

assets/components/releases/banner.vue

@@ -0,0 +1,385 @@
+<template>
+	<div class="media-container">
+		<div
+			class="media"
+			:class="{ center: (release.photos?.length || 0) + (release.scenesPhotos?.length || 0) < 2, preview: !me }"
+		>
+			<div
+				v-if="release.trailer || release.teaser"
+				class="trailer-container"
+			>
+				<Player
+					v-if="release.trailer"
+					:video="release.trailer"
+					:poster="poster"
+					class="item trailer"
+					@play="playing = true; paused = false;"
+					@pause="playing = false; paused = true;"
+				/>
+
+				<Player
+					v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
+					:video="release.teaser"
+					:poster="poster"
+					:alt="release.title"
+					:class="{ sfw: sfw && paused }"
+					class="item trailer"
+					@play="playing = true; paused = false;"
+					@pause="playing = false; paused = true;"
+				/>
+
+				<img
+					v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
+					:src="getPath(release.teaser, 'thumbnail', { original: true })"
+					:alt="release.title"
+					:width="release.teaser.thumbnailWidth"
+					:height="release.teaser.thumbnailHeight"
+					loading="lazy"
+					class="item trailer"
+				>
+
+				<span
+					v-if="release.poster || release.teaser"
+					class="poster-links"
+				>
+					<a
+						v-if="release.teaser"
+						v-tooltip="'View teaser'"
+						:href="getPath(release.teaser)"
+						:class="{ playing }"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="poster-link"
+					><Icon icon="film4" /></a>
+
+					<a
+						v-if="release.poster"
+						v-tooltip="'View poster'"
+						:href="getPath(release.poster)"
+						:class="{ playing }"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="poster-link"
+					><Icon icon="image" /></a>
+				</span>
+
+				<span
+					v-if="sfw && !playing"
+					class="warning"
+				>
+					<Icon icon="warning2" />NSFW
+				</span>
+			</div>
+
+			<template v-if="release.covers?.length > 0">
+				<div
+					v-for="cover in release.covers"
+					:key="`cover-${cover.id}`"
+					class="item-container"
+				>
+					<a
+						:href="getPath(cover)"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<img
+							:src="getPath(cover, 'thumbnail')"
+							:style="{ 'background-image': getBgPath(cover, 'lazy') }"
+							:width="cover.thumbnailWidth"
+							:height="cover.thumbnailHeight"
+							class="item cover"
+							loading="lazy"
+							@load="$emit('load', $event)"
+						>
+					</a>
+				</div>
+			</template>
+
+			<div
+				v-for="photo in photos"
+				:key="`media-${photo.id}`"
+				class="item-container"
+			>
+				<a
+					:href="getPath(photo)"
+					:class="{ sfw }"
+					class="item-link"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<img
+						:src="getPath(photo, 'thumbnail')"
+						:style="{ 'background-image': `url('${getPath(photo, 'lazy')}` }"
+						:alt="`Photo ${photo.index + 1}`"
+						:width="photo.thumbnailWidth"
+						:height="photo.thumbnailHeight"
+						loading="lazy"
+						class="item"
+						@load="$emit('load', $event)"
+					>
+
+					<span
+						v-if="sfw"
+						class="warning"
+					>
+						<Icon icon="warning2" />NSFW
+					</span>
+				</a>
+			</div>
+
+			<div
+				v-if="!me"
+				class="item-container item-more"
+			><router-link
+				:to="{ name: 'login', query: { ref: $route.path } }"
+				class="link"
+			>Log in</router-link>&nbsp;for more photos, trailers and features!</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import Player from '../video/player.vue';
+
+function sfw() {
+	return this.$store.state.ui.sfw;
+}
+
+function me() {
+	return this.$store.state.auth.user;
+}
+
+function poster() {
+	if (this.release.poster) {
+		return this.getPath(this.release.poster, 'thumbnail');
+	}
+
+	if (this.release.covers?.length > 0) {
+		return this.getPath(this.release.covers[0], 'thumbnail');
+	}
+
+	if (this.photos?.length > 0) {
+		return this.getPath(this.release.photos[0], 'thumbnail');
+	}
+
+	return null;
+}
+
+function photos() {
+	const clips = this.release.clips || [];
+	const clipPostersById = clips.reduce((acc, clip) => ({ ...acc, [clip.poster.id]: clip.poster }), {});
+	const uniqueClipPosters = Array.from(new Set(clips.map((clip) => clip.poster.id) || [])).map((posterId) => clipPostersById[posterId]);
+	const photosWithClipPosters = (this.release.photos || []).concat(this.release.scenesPhotos || []).concat(uniqueClipPosters);
+
+	if (this.release.trailer || (this.release.teaser && this.release.teaser.mime !== 'image/gif')) {
+		// poster will be on trailer video
+		return photosWithClipPosters;
+	}
+
+	if (this.release.poster) {
+		// no trailer, add poster to photos
+		return [this.release.poster].concat(photosWithClipPosters);
+	}
+
+	// no poster available
+	return photosWithClipPosters;
+}
+
+export default {
+	components: {
+		Player,
+	},
+	props: {
+		release: {
+			type: Object,
+			default: null,
+		},
+		expanded: {
+			type: Boolean,
+			default: false,
+		},
+		test: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['load'],
+	data() {
+		return {
+			player: null,
+			playing: false,
+			paused: false,
+		};
+	},
+	computed: {
+		me,
+		photos,
+		poster,
+		sfw,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.media {
+    flex-shrink: 0;
+    white-space: nowrap;
+    font-size: 0;
+}
+
+.media.center {
+	width: 1200px;
+	max-width: 100%;
+	display: flex;
+	margin: 0 auto;
+}
+
+.poster-links {
+	display: flex;
+    position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.poster-link {
+    transition: opacity .1s ease;
+	padding: .5rem;
+
+    .icon {
+        width: 1.5rem;
+        height: 1.5rem;
+        fill: var(--lighten-strong);
+        filter: drop-shadow(0 0 1px var(--darken-weak));
+    }
+
+    &.playing {
+        opacity: 0;
+    }
+
+	&:first-child {
+		padding-left: .75rem;
+	}
+
+	&:last-child {
+		padding-right: .75rem;
+	}
+
+    &:hover {
+        cursor: pointer;
+        opacity: 1;
+
+        .icon {
+            fill: var(--text-light);
+        }
+    }
+}
+
+.item-container,
+.trailer-container {
+	height: 100%;
+	max-width: 100%;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+	flex-shrink: 0;
+
+    .warning {
+        display: none;
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        background: var(--darken-weak);
+        color: var(--text-light);
+        font-size: 1.2rem;
+        font-weight: bold;
+        text-shadow: 0 0 3px var(--darken-strong);
+        pointer-events: none;
+        animation: alert .5s ease infinite .1s;
+
+        .icon {
+            display: block;
+            fill: var(--text-light);
+            width: 3rem;
+            height: 3rem;
+            margin: 0 0 .25rem 0;
+            filter: drop-shadow(0 0 3px var(--darken));
+            animation: alert .5s ease infinite .1s;
+        }
+    }
+
+    &:hover .warning {
+        display: inline-flex;
+    }
+}
+
+.item {
+	max-width: 100%;
+	width: auto;
+	height: 18rem;
+	box-shadow: 0 0 3px var(--shadow-weak);
+	background-size: cover;
+}
+
+.item-more {
+	height: auto;
+	flex-grow: 1;
+	align-items: center;
+	padding: .5rem 2rem;
+	color: var(--text-light);
+	text-shadow: 0 0 3px var(--darken);
+	font-weight: bold;
+	font-size: 1rem;
+
+	.link {
+		color: inherit;
+		text-decoration: underline;
+	}
+}
+
+.trailer-container {
+	width: 32rem;
+    max-width: 100%;
+}
+
+.trailer {
+	width: 100%;
+	max-width: 32rem;
+	max-height: 100%;
+
+    &.sfw {
+        filter: blur(2rem);
+    }
+}
+
+@keyframes alert {
+    0% {
+        color: var(--text-light);
+        fill: var(--text-light);
+    }
+    50% {
+        color: var(--alert);
+        fill: var(--alert);
+    }
+}
+
+@media(max-width: $breakpoint-micro) {
+	.media.center.preview {
+		flex-direction: column;
+	}
+
+	.item-more {
+		font-size: .9rem;
+	}
+
+	.media:not(.expanded) .item,
+    .trailer-container {
+		height: 56vw; /* 16:9 ratio for full-width video */
+    }
+}
+</style>

assets/components/releases/chapters.vue

@@ -0,0 +1,235 @@
+<template>
+	<div
+		v-if="timeline"
+		class="timeline"
+	>
+		<ul class="timeline-items nolist">
+			<li
+				v-for="chapter in timeline"
+				:key="`chapter-${chapter.id}`"
+				:style="{ left: `${(chapter.time / duration) * 100}%` }"
+				:title="formatDuration(chapter.time)"
+				class="timeline-item"
+			><router-link
+				:to="`/tag/${chapter.tags[0].slug}`"
+				class="link"
+			>{{ chapter.tags[0]?.name || '&nbsp;' }}</router-link></li>
+		</ul>
+	</div>
+
+	<ul
+		v-else
+		class="chapters nolist"
+	>
+		<li
+			v-for="chapter in chapters"
+			:key="`chapter-${chapter.id}`"
+			class="chapter"
+		>
+			<a
+				v-if="chapter.poster"
+				:href="getPath(chapter.poster)"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<img
+					:src="getPath(chapter.poster, 'thumbnail')"
+					class="chapter-poster"
+				>
+			</a>
+
+			<span class="chapter-details">
+				<span
+					v-if="chapter.time"
+					v-tooltip="'Time in video'"
+					class="chapter-time"
+				><Icon icon="film3" /> {{ formatDuration(chapter.time) }}</span>
+
+				<span
+					v-if="chapter.duration"
+					v-tooltip="'Duration'"
+					class="chapter-duration"
+				><Icon icon="stopwatch" />{{ formatDuration(chapter.duration) }}</span>
+			</span>
+
+			<div class="chapter-info">
+				<h3
+					v-if="chapter.title"
+					class="chapter-row chapter-title"
+					:title="chapter.title"
+				>{{ chapter.title }}</h3>
+
+				<p
+					v-if="chapter.description"
+					class="chapter-row chapter-description"
+				>{{ chapter.description }}</p>
+
+				<Tags
+					:tags="chapter.tags"
+					class="chapter-row chapter-tags"
+				/>
+			</div>
+		</li>
+	</ul>
+</template>
+
+<script>
+import Tags from './tags.vue';
+
+function timeline() {
+	if (this.chapters.every(chapter => chapter.time)) {
+		return this.chapters.filter(chapter => chapter.tags?.length > 0);
+	}
+
+	return null;
+}
+
+export default {
+	components: {
+		Tags,
+	},
+	props: {
+		chapters: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		const lastChapter = this.chapters[this.chapters.length - 1];
+
+		return {
+			duration: lastChapter.time + lastChapter.duration,
+		};
+	},
+	computed: {
+		timeline,
+	},
+};
+</script>
+
+<style lang="scss">
+.chapter-tags.tags-container {
+	margin: 0 0 .5rem 0;
+
+	.tags {
+		padding: 2px 0 0 2px;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.chapters {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+	grid-gap: 1rem;
+}
+
+.chapter {
+	display: flex;
+	flex-direction: column;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak);
+	margin: 0 0 .5rem 0;
+	font-size: 0;
+}
+
+.chapter-poster {
+	width: 100%;
+	height: 10rem;
+	object-fit: cover;
+	object-position: center;
+}
+
+.chapter-details {
+	height: 1.75rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 .5rem;
+	margin: 0 0 .75rem 0;
+	color: var(--text-light);
+	background: var(--profile);
+	font-size: .9rem;
+	font-weight: bold;
+
+	.icon {
+		fill: var(--text-light);
+		margin: -.1rem .5rem 0 0;
+	}
+}
+
+.chapter-duration,
+.chapter-time {
+	display: flex;
+	align-items: center;
+}
+
+.chapter-duration .icon {
+	/* narrower icon */
+	margin: -.1rem .3rem 0 0;
+}
+
+.chapter-info {
+	padding: 0 .5rem;
+	font-size: 1rem;
+}
+
+.chapter-row {
+	margin: 0 0 .5rem 0;
+}
+
+.chapter-title {
+	padding: 0;
+	font-size: 1rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.chapter-description {
+	line-height: 1.5;
+}
+
+.timeline-items {
+	position: relative;
+	height: 5rem;
+	border-bottom: solid 1px var(--shadow-weak);
+}
+
+.timeline-item {
+	position: absolute;
+	bottom: -.25rem;
+	padding: .1rem .5rem;
+	border-radius: .6rem;
+	color: var(--primary);
+	background: var(--background);
+	transform: rotate(-60deg);
+	transform-origin: 0 50%;
+	box-shadow: 0 0 3px var(--shadow-weak);
+	font-size: .8rem;
+	font-weight: bold;
+
+	.link {
+		color: inherit;
+	}
+
+	&:before {
+		content: '';
+		display: inline-block;
+		width: 1rem;
+		height: 2px;
+		position: absolute;
+		left: calc(-1rem + 1px);
+		margin: .3rem .5rem 0 0;
+		background: var(--primary);
+	}
+}
+
+@media(max-width: $breakpoint-micro) {
+	.chapters {
+		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	}
+}
+</style>

assets/components/releases/clips.vue

@@ -1,126 +0,0 @@
-<template>
-	<ul class="clips nolist">
-		<li
-			v-for="clip in clips"
-			:key="`clip-${clip.id}`"
-			class="clip"
-		>
-			<div class="clip-poster-container">
-				<a
-					v-if="clip.poster"
-					:href="`/media/${clip.poster.path}`"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<img
-						:src="`/media/${clip.poster.thumbnail}`"
-						class="clip-poster"
-					>
-				</a>
-
-				<span
-					v-if="clip.duration"
-					class="clip-duration"
-				>{{ formatDuration(clip.duration) }}</span>
-			</div>
-
-			<div class="clip-info">
-				<h3
-					v-if="clip.title"
-					class="clip-row clip-title"
-					:title="clip.title"
-				>{{ clip.title }}</h3>
-
-				<p class="clip-row clip-description">{{ clip.description }}</p>
-
-				<Tags
-					:tags="clip.tags"
-					class="clip-row clip-tags"
-				/>
-			</div>
-		</li>
-	</ul>
-</template>
-
-<script>
-import Tags from './tags.vue';
-
-export default {
-	components: {
-		Tags,
-	},
-	props: {
-		clips: {
-			type: Array,
-			default: () => [],
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'breakpoints';
-
-.clips {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-	grid-gap: 1rem;
-}
-
-.clip {
-	background: var(--background);
-	box-shadow: 0 0 3px var(--shadow-weak);
-	margin: 0 0 .5rem 0;
-}
-
-.clip-poster-container {
-	position: relative;
-	margin: 0 0 1rem 0;
-}
-
-.clip-poster {
-	width: 100%;
-	height: 10rem;
-	object-fit: cover;
-	object-position: center;
-}
-
-.clip-duration {
-	background: var(--darken);
-	color: var(--text-light);
-	display: block;
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: .25rem .5rem;
-	font-size: .9rem;
-	font-weight: bold;
-	text-shadow: 0 0 2px var(--darken-strong);
-}
-
-.clip-info {
-	padding: 0 1rem;
-}
-
-.clip-row {
-	margin: 0 0 .75rem 0;
-}
-
-.clip-title {
-	padding: 0;
-	font-size: 1rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.clip-description {
-	line-height: 1.5;
-}
-
-@media(max-width: $breakpoint-micro) {
-	.clips {
-		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
-	}
-}
-</style>

assets/components/releases/details.vue

@@ -154,6 +154,7 @@ export default {
 .site {
     display: inline-flex;
     align-items: center;
+	max-width: 50%;
     padding: .25rem 0;
     font-size: 0;
 }
@@ -167,7 +168,7 @@ export default {
 }
 
 .logo-site {
-    height: 2.5rem;
+    height: 2.25rem;
     max-width: 15rem;
 	margin: .25rem 0;
     object-fit: contain;
@@ -205,6 +206,10 @@ export default {
         display: none;
     }
 
+	.logo-site {
+		height: 1.5rem;
+	}
+
 	.logo-site {
 		width: 100%;
 	}

assets/components/releases/media.vue

@@ -1,287 +0,0 @@
-<template>
-	<div
-		v-lazy-container
-		class="media"
-	>
-		<div
-			v-if="release.trailer || release.teaser"
-			class="trailer-container"
-		>
-			<video
-				v-if="release.trailer"
-				:src="`/media/${release.trailer.path}`"
-				:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
-				:alt="release.title"
-				:class="{ sfw: sfw && paused }"
-				class="item trailer"
-				controls
-				@playing="playing = true; paused = false;"
-				@pause="playing = false; paused = true;"
-			>Sorry, the tailer cannot be played in your browser</video>
-
-			<video
-				v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
-				:src="`/media/${release.teaser.path}`"
-				:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
-				:alt="release.title"
-				:class="{ sfw: sfw && paused }"
-				class="item trailer"
-				controls
-				@playing="playing = true; paused = false;"
-				@pause="playing = false; paused = true;"
-			>Sorry, the tailer cannot be played in your browser</video>
-
-			<img
-				v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
-				:data-src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
-				:alt="release.title"
-				class="item trailer"
-			>
-
-			<a
-				v-if="release.poster"
-				v-tooltip="'View poster'"
-				:href="`/media/${release.poster.path}`"
-				:class="{ playing }"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="poster-link"
-			><Icon icon="image" /></a>
-
-			<span
-				v-if="sfw && !playing"
-				class="warning"
-			>
-				<Icon icon="warning2" />NSFW
-			</span>
-		</div>
-
-		<template v-if="release.covers && release.covers.length > 0">
-			<a
-				v-for="cover in release.covers"
-				:key="`cover-${cover.id}`"
-				:href="`/media/${cover.path}`"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					:data-src="`/media/${cover.thumbnail}`"
-					:data-loading="`/media/${cover.lazy}`"
-					class="item cover"
-					@load="$parent.$emit('load')"
-				>
-			</a>
-		</template>
-
-		<div
-			v-for="photo in photos"
-			:key="`media-${photo.id}`"
-			class="item-container"
-		>
-			<a
-				:href="`/media/${photo.path}`"
-				:class="{ sfw }"
-				class="item-link"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-					:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
-					:alt="`Photo ${photo.index + 1}`"
-					class="item"
-					@load="$parent.$emit('load')"
-				>
-
-				<span
-					v-if="sfw"
-					class="warning"
-				>
-					<Icon icon="warning2" />NSFW
-				</span>
-			</a>
-		</div>
-	</div>
-</template>
-
-<script>
-function sfw() {
-	return this.$store.state.ui.sfw;
-}
-
-function photos() {
-	const clips = this.release.clips || [];
-	const clipPostersById = clips.reduce((acc, clip) => ({ ...acc, [clip.poster.id]: clip.poster }), {});
-	const uniqueClipPosters = Array.from(new Set(clips.map(clip => clip.poster.id) || [])).map(posterId => clipPostersById[posterId]);
-	const photosWithClipPosters = (this.release.photos || []).concat(uniqueClipPosters);
-
-	if (this.release.trailer || this.release.teaser) {
-		// poster will be on trailer video
-		return photosWithClipPosters;
-	}
-
-	if (this.release.poster) {
-		// no trailer, add poster to photos
-		return [this.release.poster].concat(photosWithClipPosters);
-	}
-
-	// no poster available
-	return photosWithClipPosters;
-}
-
-export default {
-	props: {
-		release: {
-			type: Object,
-			default: null,
-		},
-		expanded: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			playing: false,
-			paused: false,
-		};
-	},
-	computed: {
-		photos,
-		sfw,
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import 'theme';
-
-.media {
-    flex-shrink: 0;
-    white-space: nowrap;
-    overflow-x: auto;
-    scrollbar-width: none;
-	scroll-behavior: smooth;
-    font-size: 0;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-
-	&.expanded {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
-		grid-gap: 1rem;
-		justify-content: center;
-		margin: 0 0 1rem 0;
-	}
-}
-
-.poster-link {
-    position: absolute;
-    top: .5rem;
-    right: .5rem;
-    transition: opacity .1s ease;
-
-    .icon {
-        width: 1.5rem;
-        height: 1.5rem;
-        fill: var(--lighten-strong);
-        filter: drop-shadow(0 0 1px var(--darken-weak));
-    }
-
-    &.playing {
-        opacity: 0;
-    }
-
-    &:hover {
-        cursor: pointer;
-        opacity: 1;
-
-        .icon {
-            fill: var(--text-light);
-        }
-    }
-}
-
-.item-container,
-.trailer-container {
-	max-width: 100%;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-	flex-shrink: 0;
-
-    .warning {
-        display: none;
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        background: var(--darken-weak);
-        color: var(--text-light);
-        font-size: 1.2rem;
-        font-weight: bold;
-        text-shadow: 0 0 3px var(--darken-strong);
-        pointer-events: none;
-        animation: alert .5s ease infinite .1s;
-
-        .icon {
-            display: block;
-            fill: var(--text-light);
-            width: 3rem;
-            height: 3rem;
-            margin: 0 0 .25rem 0;
-            filter: drop-shadow(0 0 3px var(--darken));
-            animation: alert .5s ease infinite .1s;
-        }
-    }
-
-    &:hover .warning {
-        display: inline-flex;
-    }
-}
-
-.item {
-	height: 18rem;
-	max-width: 100%;
-	box-shadow: 0 0 3px var(--shadow-weak);
-}
-
-.trailer-container {
-	height: 18rem;
-	width: 32rem;
-    max-width: 100%;
-}
-
-.trailer {
-	width: 100%;
-	max-height: 100%;
-	object-fit: cover;
-
-    &.sfw {
-        filter: blur(2rem);
-    }
-}
-
-@keyframes alert {
-    0% {
-        color: var(--text-light);
-        fill: var(--text-light);
-    }
-    50% {
-        color: var(--alert);
-        fill: var(--alert);
-    }
-}
-
-@media(max-width: $breakpoint0) {
-	.media:not(.expanded) .item,
-    .trailer-container {
-		height: 56vw; /* 16:9 ratio for full-width video */
-    }
-}
-</style>

assets/components/releases/movie-tile.vue

@@ -1,23 +1,54 @@
 <template>
 	<div class="tile">
+		<Details :release="movie" />
+
 		<div class="movie">
-			<router-link
+			<RouterLink
 				:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 				class="cover"
 			>
 				<img
 					v-if="movie.covers[0]"
-					:src="`/media/${movie.covers[0].thumbnail}`"
+					:src="getPath(movie.covers[0], 'thumbnail')"
+					:style="{ 'background-image': getBgPath(movie.covers[0], 'lazy') }"
+					loading="lazy"
 				>
-			</router-link>
+
+				<div
+					v-else
+					:title="movie.title"
+					class="unavailable"
+				><Icon icon="blocked" /></div>
+
+				<Icon
+					v-show="(!stash || stash.primary) && favorited"
+					icon="heart7"
+					class="stash stashed"
+					@click.prevent.native="unstashMovie"
+				/>
+
+				<Icon
+					v-show="(!stash || stash.primary) && favorited === false"
+					icon="heart8"
+					class="stash unstashed"
+					@click.prevent.native="stashMovie"
+				/>
+
+				<Icon
+					v-show="stash && !stash.primary"
+					icon="cross2"
+					class="stash unstash"
+					@click.prevent.native="unstashMovie"
+				/>
+			</RouterLink>
 
 			<div class="info">
-				<router-link
+				<RouterLink
 					:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 					class="title-link"
 				>
 					<h3 class="title">{{ movie.title }}</h3>
-				</router-link>
+				</RouterLink>
 
 				<ul
 					class="actors nolist"
@@ -27,10 +58,10 @@
 						v-for="actor in movie.actors"
 						:key="`tag-${movie.id}-${actor.id}`"
 						class="actor"
-					><router-link
+					><RouterLink
 						:to="`/actor/${actor.id}/${actor.slug}`"
 						class="actor-link"
-					>{{ actor.name }}</router-link></li>
+					>{{ actor.name }}</RouterLink></li>
 				</ul>
 
 				<ul
@@ -41,21 +72,55 @@
 						v-for="tag in movie.tags"
 						:key="`tag-${movie.id}-${tag.id}`"
 						class="tag"
-					><router-link
+					><RouterLink
 						:to="`/tag/${tag.slug}`"
 						class="tag-link"
-					>{{ tag.name }}</router-link></li>
+					>{{ tag.name }}</RouterLink></li>
 				</ul>
 			</div>
 		</div>
-
-		<Details :release="movie" />
 	</div>
 </template>
 
 <script>
 import Details from './tile-details.vue';
 
+async function stashMovie() {
+	this.favorited = true;
+
+	try {
+		await this.$store.dispatch('stashMovie', {
+			movieId: this.movie.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', true);
+	} catch (error) {
+		this.favorited = false;
+	}
+}
+
+async function unstashMovie() {
+	if (!this.stash || this.stash.primary) {
+		this.favorited = false;
+	}
+
+	try {
+		await this.$store.dispatch('unstashMovie', {
+			movieId: this.movie.id,
+			stashId: this.stash?.id || this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', false);
+	} catch (error) {
+		this.favorited = true;
+	}
+}
+
+function sfw() {
+	return this.$store.state.ui.sfw;
+}
+
 export default {
 	components: {
 		Details,
@@ -65,6 +130,22 @@ export default {
 			type: Object,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			favorited: this.movie.isFavorited,
+		};
+	},
+	computed: {
+		sfw,
+	},
+	methods: {
+		stashMovie,
+		unstashMovie,
 	},
 };
 </script>
@@ -78,6 +159,11 @@ export default {
 	background: var(--background);
 	box-shadow: 0 0 3px var(--darken-weak);
 	font-size: 0;
+
+	&:hover .unstashed,
+	&:hover .unstash {
+		fill: var(--lighten);
+	}
 }
 
 .movie {
@@ -91,17 +177,34 @@ export default {
 
 .cover {
 	height: 16rem;
+	width: 11.25rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	position: relative;
 	box-shadow: 0 0 3px var(--darken-weak);
+    background-color: var(--shadow-hint);
 
 	img {
 		height: 100%;
-		max-width: 12rem;
+		width: 100%;
+		background-position: center;
+		background-size: cover;
 		object-fit: cover;
-		object-position: center ;
+		object-position: center;
+	}
+
+	.unavailable .icon {
+		width: 2rem;
+		height: 2rem;
+		fill: var(--shadow-hint);
 	}
 }
 
 .info {
+	display: flex;
+	flex-direction: column;
 	flex-grow: 1;
 	overflow: hidden;
 }
@@ -117,9 +220,11 @@ export default {
 }
 
 .actors {
+	height: 0;
+	flex-grow: 1;
 	padding: 0 1rem;
-	margin: 0 0 1rem 0;
 	line-height: 1.5;
+	overflow: hidden;
 }
 
 .actor:not(:last-child)::after {
@@ -139,7 +244,7 @@ export default {
 }
 
 .tags {
-	padding: .2rem 1rem 0 1rem;
+	padding: .25rem 1rem;
 	height: 1.75rem;
 	line-height: 2;
 	overflow: hidden;
@@ -163,9 +268,36 @@ export default {
 	}
 }
 
-@media(max-width: $breakpoint) {
+.stash {
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: .25rem .5rem .5rem .5rem;
+	position: absolute;
+	top: 0;
+	left: 0;
+	fill: var(--lighten-weak);
+	filter: drop-shadow(0 0 2px var(--darken));
+
+	&:hover.unstashed,
+	&.stashed {
+		fill: var(--primary);
+	}
+
+	&:hover.unstash {
+		fill: var(--text-light);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
+}
+
+@media(max-width: $breakpoint-kilo) {
 	.cover {
 		height: 12rem;
+		width: 8.25rem;
+	}
+
+	/* ensure no half actor names show */
+	.actors {
+		margin: 0 0 1rem 0;
 	}
 }
 </style>

assets/components/releases/movies.vue

@@ -1,13 +1,25 @@
 <template>
 	<div class="movies">
 		<div class="content-inner">
-			<div class="tiles">
+			<SearchBar :placeholder="`Search ${totalCount} movies`" />
+
+			<div
+				ref="tiles"
+				class="tiles"
+			>
 				<MovieTile
 					v-for="movie in movies"
 					:key="`movie-${movie.id}`"
 					:movie="movie"
 				/>
 			</div>
+
+			<Pagination
+				v-if="totalCount > 0"
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
 		</div>
 
 		<Footer />
@@ -16,27 +28,67 @@
 
 <script>
 import MovieTile from './movie-tile.vue';
+import SearchBar from '../search/bar.vue';
+import Pagination from '../pagination/pagination.vue';
+
+async function fetchMovies() {
+	if (this.$route.query.query) {
+		await this.searchMovies();
+		return;
+	}
 
-async function mounted() {
 	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
-		limit: 30,
+		limit: this.limit,
+		range: this.$route.params.range,
+		pageNumber: this.$route.params.pageNumber,
 	});
 
 	this.movies = movies;
 	this.totalCount = totalCount;
+
+	this.$refs.tiles.scrollIntoView();
+}
+
+async function searchMovies() {
+	const { movies, totalCount } = await this.$store.dispatch('searchMovies', {
+		query: this.$route.query.query,
+		limit: this.limit,
+		pageNumber: this.$route.params.pageNumber,
+	});
+
+	this.movies = movies;
+	this.totalCount = totalCount;
+
+	this.$refs.tiles.scrollIntoView();
+}
+
+async function mounted() {
+	this.pageTitle = 'Movies';
+
+	await this.fetchMovies();
 }
 
 export default {
 	components: {
 		MovieTile,
+		SearchBar,
+		Pagination,
 	},
 	data() {
 		return {
 			movies: [],
 			totalCount: 0,
+			limit: 20,
 		};
 	},
+	watch: {
+		$route: fetchMovies,
+	},
 	mounted,
+	methods: {
+		fetchMovies,
+		searchMovies,
+	},
 };
 </script>
 
@@ -49,14 +101,22 @@ export default {
 	flex-grow: 1;
 }
 
+.content-inner {
+	padding: 0 1rem;
+}
+
+.search {
+	margin: 1rem 0 0 0;
+}
+
 .tiles {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 	grid-gap: 1rem;
-	padding: 1rem;
+	padding: 1rem 0;
 }
 
-@media(max-width: $breakpoint) {
+@media(max-width: $breakpoint-kilo) {
 	.tiles {
 		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 	}

assets/components/releases/release.vue

@@ -1,40 +1,48 @@
 <template>
 	<div
 		v-if="release"
+		ref="content"
 		class="content"
+		@scroll="events.emit('scroll', $event)"
 	>
-		<Expand
-			v-if="expanded"
-			class="expand"
-			:expanded="expanded"
-			@expand="(state) => expanded = state"
-		/>
-
 		<Scroll
-			class="scroll-light"
+			v-slot="slotProps"
+			class="scroll-light banner"
+			:style="{ 'background-image': bannerBackground }"
 			:expandable="false"
 		>
-			<Media
+			<Banner
 				:release="release"
-				:class="{ expanded }"
+				class="media"
+				@load="slotProps.loaded"
 			/>
 		</Scroll>
 
 		<Details :release="release" />
 
-		<Expand
-			v-if="release.photos && release.photos.length > 0"
-			class="expand-bottom"
-			:expanded="expanded"
-			@expand="(state) => expanded = state"
+		<button
+			v-if="release.photos?.length > 0 || release.scenesPhotos?.length > 0"
+			class="album-toggle"
+			@click="$router.push({ hash: '#album' })"
+		><Icon icon="grid3" />View album</button>
+
+		<Album
+			v-if="showAlbum"
+			:items="[release.poster, ...(release.photos || []), ...(release.scenesPhotos || [])]"
+			:title="release.title"
+			:path="config.media.mediaPath"
+			@close="$router.replace({ hash: undefined })"
 		/>
 
 		<div class="info column">
-			<div class="row">
+			<div class="row row-title">
 				<h2
 					v-if="release.title"
 					class="title"
-				>{{ release.title }}</h2>
+				>
+					{{ release.title }}
+					<template v-if="release.movies?.[0]?.title && /^scene \d+$/i.test(release.title)"><span class="title-composed">&nbsp;from&nbsp;</span>{{ release.movies[0].title }}</template>
+				</h2>
 
 				<h2
 					v-else-if="release.actors.length > 0"
@@ -46,20 +54,16 @@
 						icon="question2"
 					/>
 				</h2>
-			</div>
 
-			<div
-				v-if="release.tags.length > 0"
-				class="row"
-			>
-				<Tags :tags="release.tags" />
+				<StashButton
+					:stashed-by="stashedBy"
+					@stash="(stash) => stashScene(stash)"
+					@unstash="(stash) => unstashScene(stash)"
+				/>
 			</div>
 
 			<div class="row associations">
-				<ul
-					v-lazy-container="{ selector: '.lazy' }"
-					class="actors nolist"
-				>
+				<ul class="actors nolist">
 					<li
 						v-for="actor in release.actors"
 						:key="actor.id"
@@ -69,22 +73,29 @@
 				</ul>
 			</div>
 
+			<Tags
+				v-if="release.tags.length > 0"
+				:tags="release.tags"
+			/>
+
 			<div
-				v-if="release.movies && release.movies.length > 0"
+				v-if="release.movies?.length > 0 || release.series?.length > 0"
 				class="row"
 			>
 				<span class="row-label">Part of</span>
 
 				<div class="movies">
 					<router-link
-						v-for="movie in release.movies"
+						v-for="movie in [...release.movies, ...release.series]"
 						:key="`movie-${movie.id}`"
-						:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
+						:to="{ name: movie.type || 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 						class="movie"
 					>
 						<span class="movie-title">{{ movie.title }}</span>
+
 						<img
-							:src="`/media/${movie.covers[0].thumbnail}`"
+							v-if="movie.covers.length > 0 || movie.poster"
+							:src="getPath(movie.covers[0] || movie.poster, 'thumbnail')"
 							class="movie-cover"
 						>
 					</router-link>
@@ -96,6 +107,20 @@
 				:releases="release.scenes"
 			/>
 
+			<div
+				v-if="release.directors && release.directors.length > 0"
+				class="row"
+			>
+				<span class="row-label">Director</span>
+
+				<router-link
+					v-for="director in release.directors"
+					:key="`director-${director.id}`"
+					class="link director"
+					:to="`/director/${director.id}/${director.slug}`"
+				>{{ director.name }}</router-link>
+			</div>
+
 			<div
 				v-if="release.description"
 				class="row"
@@ -104,6 +129,15 @@
 				<p class="description">{{ release.description }}</p>
 			</div>
 
+			<div
+				v-if="release.chapters?.length > 0"
+				class="row nolist"
+			>
+				<span class="row-label">Chapters</span>
+
+				<Chapters :chapters="release.chapters" />
+			</div>
+
 			<div class="row row-tidbits">
 				<div
 					v-if="release.duration"
@@ -169,15 +203,6 @@
 				</div>
 			</div>
 
-			<div
-				v-if="release.clips && release.clips.length > 0"
-				class="row nolist"
-			>
-				<span class="row-label">Clips</span>
-
-				<Clips :clips="release.clips" />
-			</div>
-
 			<div
 				v-if="release.comment"
 				class="row"
@@ -200,16 +225,17 @@
 </template>
 
 <script>
-import Media from './media.vue';
 import Details from './details.vue';
+import Banner from './banner.vue';
+import StashButton from '../stashes/button.vue';
+import Album from '../album/album.vue';
 import Tags from './tags.vue';
-import Clips from './clips.vue';
+import Chapters from './chapters.vue';
 import Actor from '../actors/tile.vue';
 import Releases from './releases.vue';
 import Scroll from '../scroll/scroll.vue';
-import Expand from '../expand/expand.vue';
 
-async function fetchRelease() {
+async function fetchRelease(scroll = true) {
 	if (this.$route.name === 'scene') {
 		this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
 	}
@@ -217,33 +243,76 @@ async function fetchRelease() {
 	if (this.$route.name === 'movie') {
 		this.release = await this.$store.dispatch('fetchMovieById', this.$route.params.releaseId);
 	}
+
+	if (this.$route.name === 'serie') {
+		this.release = await this.$store.dispatch('fetchSerieById', this.$route.params.releaseId);
+	}
+
+	if (scroll && this.$refs.content) {
+		this.$refs.content.scrollTop = 0;
+	}
+
+	this.stashedBy = this.release.stashes;
+}
+
+async function stashScene(stashId) {
+	this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
+		sceneId: this.release.id,
+		movieId: this.release.id,
+		stashId,
+	});
+}
+
+async function unstashScene(stashId) {
+	this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
+		sceneId: this.release.id,
+		movieId: this.release.id,
+		stashId,
+	});
+}
+
+function me() {
+	return this.$store.state.auth.user;
+}
+
+function bannerBackground() {
+	return (this.release.poster && this.getBgPath(this.release.poster, 'thumbnail'))
+		|| (this.release.covers.length > 0 && this.getBgPath(this.release.covers[0], 'thumbnail'));
 }
 
 function pageTitle() {
 	return this.release
 		&& (this.release.title
-		|| (this.release.actors.length > 0 ? `${this.release.actors.map(actor => actor.name).join(', ')} for ${this.release.entity.name}` : null));
+		|| (this.release.actors.length > 0 ? `${this.release.actors.map((actor) => actor.name).join(', ')} for ${this.release.entity.name}` : null));
+}
+
+function showAlbum() {
+	return (this.release.photos?.length > 0 || this.release.scenesPhotos?.length > 0) && this.$route.hash === '#album';
 }
 
 export default {
 	components: {
 		Actor,
+		Album,
+		Banner,
+		Chapters,
 		Details,
-		Media,
-		Scroll,
-		Expand,
 		Releases,
-		Clips,
+		Scroll,
+		StashButton,
 		Tags,
 	},
 	data() {
 		return {
 			release: null,
-			expanded: false,
+			stashedBy: [],
 		};
 	},
 	computed: {
 		pageTitle,
+		bannerBackground,
+		me,
+		showAlbum,
 	},
 	watch: {
 		$route: fetchRelease,
@@ -251,6 +320,8 @@ export default {
 	mounted: fetchRelease,
 	methods: {
 		fetchRelease,
+		stashScene,
+		unstashScene,
 	},
 };
 </script>
@@ -261,15 +332,25 @@ export default {
 	border-bottom: solid 1px var(--shadow-hint);
 }
 
+.banner {
+	background-position: center;
+	background-size: cover;
+
+	:deep(.scrollable) {
+		backdrop-filter: blur(1rem);
+	}
+}
+
 .info {
-    padding: 1rem;
+    padding: 1rem 0;
     border-left: solid 1px var(--shadow-hint);
     border-right: solid 1px var(--shadow-hint);
     flex-grow: 1;
 }
 
 .row {
-    margin: 0 0 1.5rem 0;
+	padding: 0 1rem;
+    margin: 0 0 1rem 0;
 
     &.associations {
         align-items: start;
@@ -293,9 +374,16 @@ export default {
 	margin: 0 2rem 0 0;
 }
 
+.row-title {
+	display: flex;
+	justify-content: space-between;
+}
+
 .title {
-	display: inline-block;
+	display: inline-flex;
 	margin: 0;
+	font-size: 1.5rem;
+	line-height: 1.25;
 
 	.icon {
 		fill: var(--shadow);
@@ -312,11 +400,28 @@ export default {
 	color: var(--shadow);
 }
 
-.title-shoot {
-	margin: 0 0 0 .5rem;
+.album-toggle {
+	height: fit-content;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: .5rem 1rem;
+	border: none;
+	border-bottom: solid 1px var(--shadow-hint);
 	color: var(--shadow);
-	font-size: .9rem;
+	background: none;
+	font-size: 1rem;
 	font-weight: bold;
+
+	.icon {
+		fill: var(--shadow);
+		margin: -.1rem .5rem 0 0;
+	}
+
+	&:hover {
+		background: var(--shadow-hint);
+		cursor: pointer;
+	}
 }
 
 .description {
@@ -365,6 +470,10 @@ export default {
 	text-overflow: ellipsis;
 }
 
+.releases {
+	margin: 0 0 .5rem 0;
+}
+
 .flag {
 	height: 1rem;
 	margin: 0 0 -.15rem .1rem;
@@ -375,6 +484,10 @@ export default {
     color: var(--link);
     text-decoration: none;
 
+	&.director:not(:last-child)::after {
+		content: ', ';
+	}
+
     &:hover {
         color: var(--primary);
 
@@ -388,21 +501,31 @@ export default {
     display: none;
 }
 
+@media(max-width: $breakpoint-kilo) {
+	.releases {
+		padding: .5rem;
+    }
+}
+
 @media(max-width: $breakpoint) {
     .hideable {
         display: none;
     }
 
-    .row .showable {
-        display: block;
+	.row .showable {
+		display: block;
     }
 
     .tidbit .showable {
         display: inline-block;
     }
 
+	.title {
+		font-size: 1.25rem;
+	}
+
     .actors {
-        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
     }
 }
 </style>

assets/components/releases/releases.vue

@@ -5,10 +5,11 @@
 			class="heading"
 		><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
 
+		<Ellipsis v-if="!done" />
+
 		<ul
-			v-if="releases.length > 0"
+			v-else-if="releases.length > 0"
 			:key="sfw"
-			v-lazy-container="{ selector: '.thumbnail' }"
 			class="nolist tiles"
 		>
 			<li
@@ -19,12 +20,14 @@
 					:release="release"
 					:referer="referer"
 					:index="index"
+					:stash="stash"
+					@stash="isStashed => $emit('stash', isStashed)"
 				/>
 			</li>
 		</ul>
 
 		<span
-			v-if="releases.length === 0 && range !== 'all'"
+			v-else-if="releases.length === 0 && range !== 'all'"
 			class="empty"
 		>No {{ range }} releases</span>
 
@@ -36,6 +39,7 @@
 </template>
 
 <script>
+import Ellipsis from '../loading/ellipsis.vue';
 import SceneTile from './scene-tile.vue';
 
 function range() {
@@ -48,6 +52,7 @@ function sfw() {
 
 export default {
 	components: {
+		Ellipsis,
 		SceneTile,
 	},
 	props: {
@@ -59,11 +64,20 @@ export default {
 			type: String,
 			default: null,
 		},
+		done: {
+			type: Boolean,
+			default: true,
+		},
 		referer: {
 			type: String,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
 	},
+	emits: ['stash'],
 	computed: {
 		range,
 		sfw,
@@ -72,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .heading {
     padding: 0;
@@ -100,7 +114,7 @@ export default {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
-    grid-gap: 1rem;
+    grid-gap: .5rem;
 	box-sizing: border-box;
 	padding: 1rem;
 }
@@ -112,15 +126,29 @@ export default {
     font-weight: bold;
 }
 
-@media(max-width: $breakpoint3) {
+@media(max-width: $breakpoint-mega) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
     }
 }
 
-@media(max-width: $breakpoint2) {
+@media(max-width: $breakpoint-kilo) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
+		grid-gap: .5rem;
+		padding: .5rem;
+    }
+}
+
+@media(max-width: $breakpoint) {
+    .tiles {
+		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    }
+}
+
+@media(max-width: $breakpoint-micro) {
+    .tiles {
+		grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
     }
 }
 </style>

assets/components/releases/scene-preview.vue

@@ -0,0 +1,118 @@
+<template>
+	<a
+		:href="`/scene/${scene.id}/${scene.slug || ''}`"
+		target="_blank"
+		rel="noopener noreferrer"
+		class="scene nolink"
+	>
+		<img
+			:src="getPath(scene.poster, 'thumbnail')"
+			class="scene-poster"
+		>
+
+		<div class="scene-header">
+			<span class="scene-actors nolist">{{ scene.actors.map(actor => actor.name).join(', ') }}</span>
+		</div>
+
+		<div class="scene-footer">
+			<img
+				v-if="scene.entity.parent"
+				:src="`/img/logos/${scene.entity.parent.slug}/favicon_light.png`"
+				class="scene-favicon"
+			>
+
+			<img
+				v-else
+				:src="`/img/logos/${scene.entity.slug}/favicon_light.png`"
+				class="scene-favicon"
+			>
+
+			<span class="scene-title">{{ scene.title }}</span>
+		</div>
+	</a>
+</template>
+
+<script>
+export default {
+	props: {
+		scene: {
+			type: Object,
+			default: null,
+		},
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.scene {
+	width: 14rem;
+	height: 100%;
+	position: relative;
+	font-size: 0;
+}
+
+.scene-poster {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: 50% 0;
+}
+
+.scene-header,
+.scene-footer {
+	width: 100%;
+	height: 1.25rem;
+	display: flex;
+	align-items: center;
+	position: absolute;
+	left: 0;
+	background: var(--darken-weak);
+	color: var(--text-light);
+	font-size: .7rem;
+	font-weight: bold;
+	overflow: hidden;
+	text-shadow: 0 0 2px var(--text-dark);
+}
+
+.scene-header {
+	top: 0;
+}
+
+.scene-footer {
+	bottom: 0;
+}
+
+.scene-title {
+	padding: .25rem .5rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.scene-actors {
+	padding: 0 .5rem;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.scene-unstash {
+	fill: var(--lighten-strong);
+	padding: .25rem;
+	filter: drop-shadow(0 0 1px var(--shadow));
+
+	&:hover {
+		fill: var(--text-light);
+	}
+}
+
+.scene-favicon {
+	width: 1rem;
+	height: 1rem;
+	padding: .1rem 0 0 .25rem;
+}
+</style>

assets/components/releases/scene-tile.vue

@@ -1,121 +1,158 @@
 <template>
 	<div
-		:id="`${release.type}-${release.id}`"
+		:id="`scene-${release.id}`"
 		:class="{ new: release.isNew }"
 		class="tile"
 	>
-		<span class="poster">
-			<a
-				:href="`/scene/${release.id}/${release.slug || ''}`"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="link"
-			>
-				<img
-					v-if="release.poster"
-					:data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
-					:data-loading="sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}`"
-					:alt="release.title"
-					class="thumbnail"
-				>
+		<Details
+			:release="release"
+			class="details-compact"
+		/>
 
-				<span
-					v-else-if="release.covers && release.covers.length > 0"
-					class="covers"
+		<div class="tile-body">
+			<span class="poster">
+				<a
+					:href="`/scene/${release.id}/${release.slug || ''}`"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="link"
 				>
 					<img
-						v-for="cover in release.covers"
-						:key="cover.id"
-						:data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
-						:data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
+						v-if="release.poster"
+						:src="getPath(release.poster, 'thumbnail')"
+						:style="{ 'background-image': getBgPath(release.poster, 'lazy') }"
 						:alt="release.title"
-						class="thumbnail cover"
+						:width="release.poster.thumbnailWidth"
+						:height="release.poster.thumbnailHeight"
+						class="thumbnail"
+						loading="lazy"
 					>
-				</span>
 
-				<div
-					v-else
-					:title="release.title"
-					class="thumbnail"
-				>No thumbnail available</div>
-			</a>
-
-			<Details :release="release" />
-		</span>
-
-		<div class="info">
-			<a
-				:href="`/scene/${release.id}/${release.slug || ''}`"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="row link"
-			>
-				<h3
-					v-if="release.title"
-					v-tooltip.bottom="release.title"
-					:title="release.title"
-					class="title"
-				>{{ release.title }}</h3>
-
-				<h3
-					v-else-if="release.actors.length > 0"
-					class="title title-composed"
-				>{{ release.actors[0].name }} for {{ release.entity.name }}</h3>
-
-				<h3
-					v-else
-					class="title title-empty"
-				>{{ release.entity.name }}</h3>
-			</a>
-
-			<span class="row">
-				<ul
-					class="actors nolist"
-					:title="release.actors.map(actor => actor.name).join(', ')"
-				>
-					<li
-						v-for="actor in release.actors"
-						:key="actor.id"
-						class="actor"
+					<img
+						v-else-if="release.photos && release.photos.length > 0"
+						:src="getPath(release.photos[0], 'thumbnail')"
+						:style="{ 'background-image': getBgPath(release.photos[0], 'lazy') } "
+						:alt="release.title"
+						:width="release.photos[0].thumbnailWidth"
+						:height="release.photos[0].thumbnailHeight"
+						class="thumbnail"
+						loading="lazy"
 					>
-						<router-link
-							:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
-							class="actor-link"
-						>{{ actor.name }}</router-link>
-					</li>
-				</ul>
+
+					<div
+						v-else
+						:title="release.title"
+						class="thumbnail unavailable"
+					><Icon icon="blocked" />No thumbnail available</div>
+
+					<Icon
+						v-show="(!stash || stash.primary) && favorited"
+						icon="heart7"
+						class="stash stashed"
+						@click.prevent.native="unstashScene"
+					/>
+
+					<Icon
+						v-show="(!stash || stash.primary) && favorited === false"
+						icon="heart8"
+						class="stash unstashed"
+						@click.prevent.native="stashScene"
+					/>
+
+					<Icon
+						v-show="stash && !stash.primary"
+						icon="cross2"
+						class="stash unstash"
+						@click.prevent.native="unstashScene"
+					/>
+				</a>
 			</span>
 
-			<div class="labels">
-				<router-link
-					v-if="release.shootId && release.studio"
-					:to="{ name: 'studio', params: { entitySlug: release.studio.slug } }"
-					:title="release.studio && release.studio.name"
-					class="shoot nolink"
-				>{{ release.shootId }}</router-link>
+			<div class="info">
+				<Details
+					:release="release"
+					class="details-wide"
+				/>
+
+				<a
+					:href="`/scene/${release.id}/${release.slug || ''}`"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="row link"
+				>
+					<h3
+						v-if="release.title"
+						v-tooltip.bottom="release.title"
+						:title="release.title"
+						class="title"
+					>
+						{{ release.title }}<template v-if="release.movies?.[0]?.title && /^scene \d+$/i.test(release.title)"><span class="title-composed">&nbsp;from&nbsp;</span>{{ release.movies[0].title }}</template>
+					</h3>
+
+					<h3
+						v-else-if="release.actors.length > 0"
+						class="title title-composed"
+					>{{ release.actors[0].name }} for {{ release.entity.name }}</h3>
+
+					<h3
+						v-else
+						class="title title-empty"
+					>{{ release.entity.name }}</h3>
+				</a>
 
 				<span
-					v-else-if="release.shootId"
-					:title="release.studio && release.studio.name"
-					class="shoot nolink"
-				>{{ release.shootId }}</span>
-
-				<ul
-					v-if="release.tags.length > 0"
-					:title="release.tags.map(tag => tag.name).join(', ')"
-					class="tags nolist"
+					v-if="release.actors?.length > 0"
+					class="row"
 				>
-					<li
-						v-for="tag in release.tags"
-						:key="`tag-${tag.slug}`"
-						class="tag"
+					<ul
+						class="actors nolist"
+						:title="release.actors.map(actor => actor.name).join(', ')"
 					>
-						<router-link
-							:to="`/tag/${tag.slug}`"
-							class="tag-link"
-						>{{ tag.name }}</router-link>
-					</li>
-				</ul>
+						<li
+							v-for="actor in release.actors"
+							:key="actor.id"
+							class="actor"
+						>
+							<RouterLink
+								:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
+								:class="{ [actor.gender]: !!actor.gender }"
+								class="actor-link"
+							>{{ actor.name }}</RouterLink>
+						</li>
+					</ul>
+				</span>
+
+				<div class="labels">
+					<RouterLink
+						v-if="release.shootId && release.studio"
+						:to="`/studio/${release.studio.slug}`"
+						:title="release.studio && release.studio.name"
+						class="shoot nolink"
+					>{{ release.shootId }}</RouterLink>
+
+					<span
+						v-else-if="release.shootId"
+						:title="release.studio && release.studio.name"
+						class="shoot nolink"
+					>{{ release.shootId }}</span>
+
+					<ul
+						v-if="release.tags?.length > 0"
+						:title="release.tags.map(tag => tag.name).join(', ')"
+						class="tags nolist"
+					>
+						<li
+							v-for="tag in release.tags"
+							:key="`tag-${tag.slug}`"
+							class="tag"
+						>
+							<RouterLink
+								:to="`/tag/${tag.slug}`"
+								class="tag-link"
+							>{{ tag.name }}</RouterLink>
+						</li>
+					</ul>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -124,8 +161,36 @@
 <script>
 import Details from './tile-details.vue';
 
-function sfw() {
-	return this.$store.state.ui.sfw;
+async function stashScene() {
+	this.favorited = true;
+
+	try {
+		await this.$store.dispatch('stashScene', {
+			sceneId: this.release.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', true);
+	} catch (error) {
+		this.favorited = false;
+	}
+}
+
+async function unstashScene() {
+	if (!this.stash || this.stash.primary) {
+		this.favorited = false;
+	}
+
+	try {
+		await this.$store.dispatch('unstashScene', {
+			sceneId: this.release.id,
+			stashId: this.stash?.id || this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', false);
+	} catch (error) {
+		this.favorited = true;
+	}
 }
 
 export default {
@@ -137,42 +202,70 @@ export default {
 			type: Object,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
 	},
-	computed: {
-		sfw,
+	emits: ['stash'],
+	data() {
+		return {
+			favorited: this.release.isFavorited,
+		};
+	},
+	methods: {
+		stashScene,
+		unstashScene,
 	},
 };
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .tile {
     background: var(--background);
+	position: relative;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     overflow: hidden;
-    box-shadow: 0 0 3px var(--darken-weak);
     height: 100%;
+    box-shadow: 0 0 3px var(--darken-weak);
 
 	&.new .poster::after {
 		content: 'new';
 		position: absolute;
-		top: 0;
-		right: 0;
-		padding: .15rem .25rem .15rem .35rem;
-		border-radius: 0 0 0 .5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		bottom: 0;
+		right: .5rem;
+		width: 2rem;
+		box-sizing: border-box;
+		padding: .1rem 0 .05rem 0;
+		border-radius: .25rem .25rem 0 0;
+		background: var(--info);
 		color: var(--text-light);
-		background: var(--primary);
-		font-size: .8rem;
+		font-size: .7rem;
 		font-weight: bold;
+		line-height: 1;
+		box-shadow: 0 0 3px var(--shadow);
 	}
+
+	&:hover .unstashed,
+	&:hover .unstash {
+		fill: var(--lighten);
+	}
+}
+
+.tile-body {
+	display: flex;
+	flex-direction: column;
 }
 
 .poster {
     position: relative;
-    margin: 0 0 .6rem 0;
 }
 
 .covers {
@@ -196,21 +289,52 @@ export default {
     background-color: var(--shadow-hint);
     color: var(--shadow);
     text-shadow: 1px 1px 0 var(--highlight);
+
+	.icon {
+		display: none;
+		width: 2rem;
+		height: 2rem;
+		fill: var(--shadow-hint);
+	}
+}
+
+.stash {
+	width: 1.5rem;
+	height: 1.5rem;
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: .25rem .25rem .5rem .5rem;
+	filter: drop-shadow(0 0 2px var(--darken));
+	fill: var(--lighten-weak);
+
+	&:hover.unstashed,
+	&.stashed {
+		fill: var(--primary);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
+
+	&:hover.unstash {
+		fill: var(--text-light);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
 }
 
 .row {
+	max-width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
     padding: 0 .5rem;
-    margin: 0 0 .25rem 0;
 }
 
 .info {
     display: flex;
     flex-direction: column;
+	align-items: flex-start;
     flex-grow: 1;
+	overflow: hidden;
 }
 
 .link {
@@ -220,7 +344,7 @@ export default {
 .title {
     margin: 0;
     color: var(--text);
-    font-size: 1rem;
+    font-size: .9rem;
     line-height: 1.5;
 	white-space: nowrap;
     text-overflow: ellipsis;
@@ -246,8 +370,9 @@ export default {
 }
 
 .actor-link {
-    color: var(--link);
+    color: var(--text);
     text-decoration: none;
+	font-size: .9rem;
 
     &:hover {
         color: var(--primary);
@@ -255,7 +380,7 @@ export default {
 }
 
 .labels {
-    padding: .1rem .5rem 1.5rem .5rem;
+    padding: 0 .5rem 1.25rem .5rem;
     max-height: .5rem;
     overflow-y: hidden;
 	font-size: 0;
@@ -279,21 +404,98 @@ export default {
 
 .tag {
     margin: 0 0 1rem 0;
+
+	&:not(:first-child) .tag-link {
+		border-left: none;
+	}
 }
 
 .tag-link {
-	background: var(--background);
+	background: var(--shadow-touch);
     color: var(--shadow);
     display: inline-block;
     padding: .25rem .5rem;
+	margin: 0 1px 0 0;
     font-size: .75rem;
     font-weight: bold;
     text-decoration: none;
     line-height: 1;
-	box-shadow: 0 0 3px var(--shadow-weak);
 
     &:hover {
         color: var(--primary);
     }
 }
+
+.details-wide {
+	margin: 0 0 .4rem 0;
+}
+
+.details-compact {
+	display: none;
+}
+
+@media(max-width: $breakpoint) {
+	.thumbnail {
+		height: 11rem;
+	}
+}
+
+@media(max-width: $breakpoint-micro) {
+	.tile-body {
+		flex-direction: row;
+	}
+
+	.poster {
+		margin: 0;
+	}
+
+	.thumbnail {
+		width: 9rem;
+		height: 6rem;
+		font-size: 0;
+		box-shadow: 0 0 3px var(--shadow-weak);
+
+		.icon {
+			display: block;
+		}
+	}
+
+	.info {
+		padding: .5rem .25rem 0 .25rem;
+	}
+
+	.row {
+		margin: 0 0 .15rem 0;
+	}
+
+	.title,
+	.actor-link {
+		font-size: .9rem;
+	}
+
+	.details-wide {
+		display: none;
+	}
+
+	.details-compact {
+		display: flex;
+	}
+
+	.shoot {
+		display: none;
+	}
+
+	.tile.new .poster::after {
+		top: 0;
+		right: .25rem;
+		bottom: auto;
+		border-radius: 0 0 .25rem .25rem;
+		padding: .05rem 0 .1rem 0;
+	}
+
+	.stash {
+		left: 0;
+		padding: .25rem .5rem .5rem .25rem;
+	}
+}
 </style>

assets/components/releases/tags.vue

@@ -1,19 +1,64 @@
 <template>
-	<ul class="tags nolist">
-		<li
-			v-for="tag in tags"
-			:key="`tag-${tag.slug}`"
-			class="tag"
+	<div
+		class="tags-container"
+		:class="{ overflowing }"
+	>
+		<ul
+			ref="tags"
+			class="tags nolist"
+			:class="{ expanded }"
 		>
-			<a
-				:href="`/tag/${tag.slug}`"
-				class="link"
-			>{{ tag.name }}</a>
-		</li>
-	</ul>
+			<li
+				v-for="tag in tags"
+				:key="`tag-${tag.slug}`"
+				class="tag"
+			>
+				<a
+					:href="`/tag/${tag.slug}`"
+					class="link"
+				>{{ tag.name }}</a>
+			</li>
+		</ul>
+
+		<button
+			v-if="overflowing && !expanded"
+			class="tags-more"
+			@click="expanded = true"
+		>more tags</button>
+
+		<button
+			v-if="expanded"
+			class="tags-more"
+			@click="expanded = false"
+		>fewer tags</button>
+	</div>
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
+function updateOverflowing() {
+	nextTick(() => {
+		const containerBoundaries = this.$refs.tags.getBoundingClientRect();
+		const containerBottom = containerBoundaries.top + containerBoundaries.height;
+
+		this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
+			const tagBoundaries = tag.getBoundingClientRect();
+
+			return tagBoundaries.top > containerBottom;
+		});
+	});
+}
+
+function mounted() {
+	window.addEventListener('resize', this.updateOverflowing);
+	this.updateOverflowing();
+}
+
+function beforeUnmount() {
+	window.removeEventListener('resize', this.updateOverflowing);
+}
+
 export default {
 	props: {
 		tags: {
@@ -21,10 +66,43 @@ export default {
 			default: () => [],
 		},
 	},
+	data() {
+		return {
+			overflowing: false,
+			expanded: false,
+		};
+	},
+	watch: {
+		expanded: updateOverflowing,
+	},
+	mounted,
+	beforeUnmount,
+	methods: {
+		updateOverflowing,
+	},
 };
 </script>
 
 <style lang="scss" scoped>
+.tags-container {
+	margin: 0 0 1.5rem 0;
+
+	&.overflowing {
+		margin: 0 0 .5rem 0;
+	}
+}
+
+.tags {
+	max-height: 4.7rem;
+	padding: 2px 1rem 0 1rem;
+	text-align: left;
+	overflow: hidden;
+
+	&.expanded {
+		max-height: unset;
+	}
+}
+
 .tag .link {
 	color: var(--link);
     background: var(--background);
@@ -39,4 +117,20 @@ export default {
         color: var(--primary);
     }
 }
+
+.tags-more {
+	background: var(--shadow-touch);
+	padding: .5rem 1rem;
+	border: none;
+	margin: .25rem 0 .5rem 1rem;
+	color: var(--shadow);
+	font-size: .8rem;
+	font-weight: bold;
+
+	&:hover {
+		background: var(--shadow-hint);
+		color: var(--shadow-strong);
+		cursor: pointer;
+	}
+}
 </style>

assets/components/releases/tile-details.vue

@@ -4,7 +4,7 @@
 		:class="{ new: release.isNew }"
 	>
 		<span
-			v-if="release.entity.type !== 'network' && !release.entity.independent && release.entity.parent"
+			v-if="release.entity && release.entity.type !== 'network' && !release.entity.independent && release.entity.parent"
 			class="site"
 		>
 			<router-link
@@ -12,10 +12,17 @@
 				:title="`Part of ${release.entity.parent.name}`"
 				:to="`/${release.entity.parent.type}/${release.entity.parent.slug}`"
 				class="site-link"
-			><img
-				:src="`/img/logos/${release.entity.parent.slug}/favicon.png`"
-				class="favicon"
-			></router-link>
+			>
+				<img
+					:src="`/img/logos/${release.entity.parent.slug}/favicon_light.png`"
+					class="favicon favicon-light"
+				>
+
+				<img
+					:src="`/img/logos/${release.entity.parent.slug}/favicon_dark.png`"
+					class="favicon favicon-dark"
+				>
+			</router-link>
 
 			<router-link
 				v-tooltip.bottom="`More from ${release.entity.name}`"
@@ -26,13 +33,20 @@
 		</span>
 
 		<router-link
-			v-else
+			v-else-if="release.entity"
 			:to="`/${release.entity.type}/${release.entity.slug}`"
 			class="site site-link"
-		><img
-			:src="`/img/logos/${release.entity.slug}/favicon.png`"
-			class="favicon"
-		>{{ release.entity.name }}</router-link>
+		>
+			<img
+				:src="`/img/logos/${release.entity.slug}/favicon_light.png`"
+				class="favicon favicon-light"
+			>
+
+			<img
+				:src="`/img/logos/${release.entity.slug}/favicon_dark.png`"
+				class="favicon favicon-dark"
+			>{{ release.entity.name }}
+		</router-link>
 
 		<a
 			v-if="release.date"
@@ -43,17 +57,16 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			class="date"
-		><Icon icon="share2" />{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</a>
+		>{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</a>
 
 		<a
 			v-else
 			:href="release.url"
-			:class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
 			title="Scene date N/A, showing date added"
 			target="_blank"
 			rel="noopener noreferrer"
 			class="date"
-		>{{ `(${formatDate(release.dateAdded, 'MMMM D, YYYY')})` }}</a>
+		>{{ `(${formatDate(release.createdAt, 'MMMM D, YYYY')})` }}</a>
 	</span>
 </template>
 
@@ -69,31 +82,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'breakpoints';
+
 .details {
     width: 100%;
     display: flex;
     justify-content: space-between;
+	z-index: 1;
 	white-space: nowrap;
-    background: var(--profile);
+    background: var(--info);
     font-size: 0;
 	font-weight: bold;
-	box-shadow: 0 0 3px var(--darken);
 
     .favicon {
-		width: 1rem;
-        margin: 0 .25rem 0 0;
+		width: 2rem;
+		box-sizing: border-box;
+		padding: .4rem .5rem;
     }
-
-	/*
-	&.new .date::before {
-		content: '';
-		width: .5rem;
-		height: .5rem;
-		border-radius: 50%;
-		margin: 0 .25rem 0 0;
-		background: var(--primary);
-	}
-	*/
 }
 
 .site,
@@ -102,7 +107,7 @@ export default {
     align-items: center;
     position: relative;
     font-size: .8rem;
-    padding: .5rem;
+    padding: .4rem .5rem;
     color: var(--text-light);
     text-decoration: none;
 
@@ -116,9 +121,51 @@ export default {
 	}
 }
 
+.site {
+	padding: 0 .5rem 0 0;
+}
+
 .site-link {
     display: flex;
     color: var(--text-light);
     text-decoration: none;
 }
+
+.favicon-dark {
+	display: none;
+}
+
+@media(max-width: $breakpoint-kilo) {
+	/* light details bar
+	.details {
+		background: var(--background);
+		box-shadow: none;
+
+		.favicon-dark {
+			display: inline-block;
+		}
+
+		.favicon-light {
+			display: none;
+		}
+	}
+
+	.site-link,
+	.date {
+		color: var(--text);
+	}
+	*/
+
+	.details .favicon {
+		padding: .35rem .5rem .35rem .5rem;
+	}
+
+	.date {
+		padding: .35rem .5rem;
+	}
+
+	.site {
+		padding: 0 .5rem 0 0;
+	}
+}
 </style>

assets/components/scroll/scroll.vue

@@ -1,5 +1,12 @@
 <template>
 	<div class="scroll">
+		<Expand
+			v-if="expanded"
+			:expanded="expanded"
+			class="expand-light"
+			@expand="(state) => $emit('expand', state)"
+		/>
+
 		<Expand
 			v-if="expanded"
 			:expanded="expanded"
@@ -8,13 +15,6 @@
 		/>
 
 		<div class="scrollable">
-			<Expand
-				v-if="expanded"
-				:expanded="expanded"
-				class="expand-light"
-				@expand="(state) => $emit('expand', state)"
-			/>
-
 			<div
 				v-show="enabled && !expanded"
 				class="scroll-button scroll-left noselect"
@@ -22,7 +22,12 @@
 				@click="scroll('left')"
 			><Icon icon="arrow-left3" /></div>
 
-			<slot />
+			<div
+				ref="content"
+				class="scroll-content"
+			>
+				<slot :loaded="loaded" />
+			</div>
 
 			<div
 				v-show="enabled && !expanded"
@@ -35,16 +40,22 @@
 		<Expand
 			v-if="expanded || (expandable && scrollable)"
 			:expanded="expanded"
-			class="expand-dark"
+			class="expand-light"
 			@expand="(state) => $emit('expand', state)"
 		/>
 
 		<Expand
 			v-if="expanded || (expandable && scrollable)"
 			:expanded="expanded"
-			class="expand-light"
+			class="expand-dark"
 			@expand="(state) => $emit('expand', state)"
 		/>
+
+		<button
+			v-if="album && items && items.length > 0 && scrollable"
+			class="album-toggle"
+			@click="showAlbum = true"
+		><Icon icon="grid3" />View album</button>
 	</div>
 </template>
 
@@ -52,34 +63,35 @@
 import Expand from '../expand/expand.vue';
 
 function updateScroll() {
-	this.scrollable = this.target.scrollWidth > this.target.clientWidth;
-	this.scrollAtStart = this.target.scrollLeft === 0;
-	this.scrollAtEnd = this.target.scrollWidth - this.target.clientWidth === this.target.scrollLeft;
+	this.scrollable = this.$refs.content.scrollWidth > this.$refs.content.clientWidth;
+	this.scrollAtStart = this.$refs.content.scrollLeft === 0;
+	this.scrollAtEnd = this.$refs.content.scrollWidth - this.$refs.content.clientWidth === this.$refs.content.scrollLeft;
 }
 
 function scroll(direction) {
 	if (direction === 'right') {
-		this.target.scrollLeft = this.target.scrollLeft + this.target.clientWidth - 100;
+		this.$refs.content.scrollLeft = this.$refs.content.scrollLeft + this.$refs.content.clientWidth - 100;
 	}
 
 	if (direction === 'left') {
-		this.target.scrollLeft = this.target.scrollLeft - this.target.clientWidth + 100;
+		this.$refs.content.scrollLeft = this.$refs.content.scrollLeft - this.$refs.content.clientWidth + 100;
 	}
 }
 
-function mounted() {
-	this.target = this.$slots.default[0].elm;
-
-	this.target.addEventListener('scroll', () => this.updateScroll());
-	window.addEventListener('resize', this.updateScroll);
-
+function loaded(_event) {
 	// typically triggered by slotted component when an image loads, affecting scrollWidth
-	this.$on('load', () => this.updateScroll());
 	this.updateScroll();
 }
 
-function beforeDestroy() {
-	this.target.removeEventListener('scroll', this.updateScroll);
+function mounted() {
+	this.$refs.content.addEventListener('scroll', () => this.updateScroll());
+	window.addEventListener('resize', this.updateScroll);
+
+	this.updateScroll();
+}
+
+function beforeUnmount() {
+	this.$refs.content.removeEventListener('scroll', this.updateScroll);
 
 	window.removeEventListener('resize', this.updateScroll);
 }
@@ -99,16 +111,23 @@ export default {
 		},
 		expandable: {
 			type: Boolean,
-			default: true,
+			default: false,
 		},
 		expanded: {
 			type: Boolean,
 			default: false,
 		},
+		album: {
+			type: Boolean,
+			default: false,
+		},
+		items: {
+			type: Array,
+			default: null,
+		},
 	},
 	data() {
 		return {
-			target: null,
 			scrollable: true,
 			scrollAtStart: true,
 			scrollAtEnd: false,
@@ -116,26 +135,23 @@ export default {
 	},
 	mounted,
 	updated,
-	beforeDestroy,
+	beforeUnmount,
 	methods: {
 		scroll,
+		loaded,
 		updateScroll,
 	},
 };
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
-.scroll {
-	background: var(--profile);
+.scroll.expanded {
+	padding: 0;
 
-	&.expanded {
-		padding: 0;
-
-		.scroll {
-			display: none;
-		}
+	.scroll {
+		display: none;
 	}
 }
 
@@ -143,78 +159,14 @@ export default {
 	position: relative;
 }
 
-.expand-light {
-	display: none;
-}
+.scroll-content {
+	overflow-x: scroll;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
 
-.scroll-light {
-	background: var(--background-dim);
-
-	.scroll-button {
-		.icon {
-			fill: var(--darken);
-		}
-
-		&.scroll-start .icon,
-		&.scroll-end .icon {
-			fill: var(--darken-weak);
-		}
-
-		&:hover:not(.scroll-start):not(.scroll-end) .icon {
-			fill: var(--text-dark);
-		}
-	}
-
-	.scroll-left {
-		background: linear-gradient(to right, var(--background-dim) 50%, transparent);
-	}
-
-	.scroll-right {
-		background: linear-gradient(to left, var(--background-dim) 50%, transparent);
-	}
-
-	.expand-dark {
-		display: none;
-	}
-
-	.expand-light {
-		display: block;
-	}
-}
-
-.scroll-dark {
-	background: var(--profile);
-
-	.scroll-button {
-		.icon {
-			fill: var(--lighten);
-		}
-
-		&.scroll-start .icon,
-		&.scroll-end .icon {
-			fill: var(--darken-weak);
-		}
-
-		&:hover:not(.scroll-start):not(.scroll-end) .icon {
-			fill: var(--text-light);
-		}
-	}
-
-	.scroll-left {
-		background: linear-gradient(to right, var(--profile) 50%, transparent);
-	}
-
-	.scroll-right {
-		background: linear-gradient(to left, var(--profile) 50%, transparent);
-	}
-
-	.expand-light {
-		display: none;
-	}
-
-	.expand-dark {
-		display: block;
-	}
+    &::-webkit-scrollbar {
+        display: none;
+    }
 }
 
 .scroll-button {
@@ -233,6 +185,29 @@ export default {
 		display: none;
 	}
 
+	&.scroll-start {
+		left: 0;
+	}
+
+	&.scroll-end {
+		right: 0;
+	}
+
+	.icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		fill: var(--lighten);
+	}
+
+	&.scroll-start .icon,
+	&.scroll-end .icon {
+		fill: var(--lighten-weak);
+	}
+
+	&:hover:not(.scroll-start):not(.scroll-end) .icon {
+		fill: var(--lighten-strong);
+	}
+
 	&:hover {
 		display: flex;
 		cursor: pointer;
@@ -249,7 +224,26 @@ export default {
 	padding: 1rem .5rem 1rem 2rem;
 }
 
-@media(max-width: $breakpoint) {
+.scroll .expand-light {
+	display: none;
+}
+
+.scroll-light {
+	.expand-light {
+		display: block;
+	}
+
+	.expand-dark {
+		display: none;
+	}
+}
+
+.scroll-dark .expand-light {
+	display: none;
+}
+
+@media(max-width: $breakpoint-micro) {
+	/* buttons block swiping motion */
 	.scroll-button {
 		display: none;
 	}

assets/components/search/bar.vue

@@ -0,0 +1,101 @@
+<template>
+	<form
+		class="search"
+		@submit.prevent="() => search()"
+	>
+		<input
+			v-model="query"
+			:placeholder="placeholder || 'Search'"
+			class="query"
+			@input="() => search(true)"
+		>
+
+		<button
+			type="submit"
+			class="search-button"
+		><Icon icon="search" /></button>
+	</form>
+</template>
+
+<script>
+function search(typing) {
+	if (!typing || this.eager) {
+		this.$router.replace({
+			query: { query: this.query || undefined },
+			params: { ...this.$route.params, pageNumber: 1 },
+		});
+	}
+}
+
+function resetQuery() {
+	this.query = this.$route.query.query || null;
+}
+
+export default {
+	props: {
+		placeholder: {
+			type: String,
+			default: null,
+		},
+		eager: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			query: this.$route.query.query || null,
+		};
+	},
+	watch: {
+		$route: resetQuery,
+	},
+	methods: {
+		search,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.search {
+    display: flex;
+    width: 100%;
+}
+
+.query {
+    max-width: 40rem;
+	min-width: 10rem;
+    color: var(--text);
+    background: var(--background);
+    flex-grow: 1;
+    box-sizing: border-box;
+    padding: 1rem;
+    border: none;
+    box-sizing: border-box;
+    box-shadow: 0 0 3px var(--darken-weak);
+    font-size: 1rem;
+    outline: none;
+
+    &:focus {
+        box-shadow: 0 0 3px var(--primary);
+    }
+}
+
+.search-button {
+    padding: 1rem;
+    background: none;
+    border: none;
+
+    .icon {
+        fill: var(--shadow);
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: var(--primary);
+        }
+    }
+}
+</style>

assets/components/search/search.vue

@@ -5,34 +5,32 @@
 			class="summary"
 		>Searching...</span>
 
-		<span
-			v-if="!loading"
-			class="summary"
-		>Found {{ actors.length }} actors for '{{ query }}'</span>
+		<template v-if="actors.length > 0">
+			<span class="summary">Found {{ actors.length }} actors for '{{ query }}'</span>
 
-		<div
-			v-if="!loading && actors.length > 0"
-			v-lazy-container="{ selector: '.lazy' }"
-			class="tiles"
-		>
-			<Actor
-				v-for="actor in actors"
-				:key="`actor-${actor.id}`"
-				:actor="actor.aliasFor || actor"
-				:alias="actor.aliasFor && actor"
+			<div class="tiles">
+				<Actor
+					v-for="actor in actors"
+					:key="`actor-${actor.id}`"
+					:actor="actor.aliasFor || actor"
+					:alias="actor.aliasFor && actor"
+				/>
+			</div>
+		</template>
+
+		<template v-if="releases.length > 0">
+			<span class="summary">Found {{ releases.length }} releases for '{{ query }}'</span>
+
+			<Releases
+				class="embedded"
+				:releases="releases"
 			/>
-		</div>
+		</template>
 
 		<span
-			v-if="!loading"
+			v-if="!loading && actors.length === 0 && releases.length === 0"
 			class="summary"
-		>Found {{ releases.length }} releases for '{{ query }}'</span>
-
-		<Releases
-			v-if="!loading && releases.length > 0"
-			class="embedded"
-			:releases="releases"
-		/>
+		>No results</span>
 	</div>
 </template>
 
@@ -43,7 +41,7 @@ import Releases from '../releases/releases.vue';
 async function search() {
 	const results = await this.$store.dispatch('search', {
 		query: this.query,
-		limit: 100,
+		limit: 10,
 	});
 
 	this.loading = false;
@@ -109,7 +107,6 @@ export default {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
     grid-gap: 0 .5rem;
-    flex-grow: 1;
 	margin: 0 0 1rem 0;
 }
 

assets/components/sidebar/sidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="sidebar-container"
-		@click="$emit('toggle', false)"
+		@click="$emit('toggleSidebar', false)"
 	>
 		<div
 			class="sidebar"
@@ -12,7 +12,7 @@
 					<router-link
 						to="/updates"
 						class="logo-link"
-						@click.native="$emit('toggle', false)"
+						@click="$emit('toggleSidebar', false)"
 					>
 						<h1 class="sidebar-logo">
 							<div
@@ -25,22 +25,25 @@
 					<Icon
 						icon="cross2"
 						class="sidebar-close noselect"
-						@click.native="$emit('toggle', false)"
+						@click.native="$emit('toggleSidebar', false)"
 					/>
 				</div>
 
 				<Search
 					class="search"
-					@search="$emit('toggle', false)"
+					@search="$emit('toggleSidebar', false)"
 				/>
 
 				<nav class="nav">
 					<ul class="nolist">
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/updates"
-								@click.native="$emit('toggle', false)"
+								custom
 							>
 								<a
 									class="nav-link"
@@ -51,11 +54,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/actors"
-								@click.native="$emit('toggle', false)"
+								custom
 							>
 								<a
 									class="nav-link"
@@ -66,11 +72,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
-								to="/networks"
-								@click.native="$emit('toggle', false)"
+								to="/channels"
+								custom
 							>
 								<a
 									class="nav-link"
@@ -81,11 +90,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/movies"
-								@click.native="$emit('toggle', false)"
+								custom
 							>
 								<a
 									class="nav-link"
@@ -96,11 +108,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/tags"
-								@click.native="$emit('toggle', false)"
+								custom
 							>
 								<a
 									class="nav-link"
@@ -114,30 +129,63 @@
 				</nav>
 			</div>
 
-			<div class="sidebar-section toggles noselect">
+			<div class="sidebar-section controls noselect">
 				<label
-					v-show="sfw"
-					class="toggle"
-					@click="setSfw(false)"
-				><Icon icon="fire" />Disable safe mode</label>
+					v-if="login && me"
+					@click="$emit('toggleSidebar', false)"
+				>
+					<router-link
+						:to="{ name: 'user', params: { username: me.username } }"
+						class="toggle username nolink"
+					>{{ me.username }}</router-link>
+				</label>
 
-				<label
-					v-show="!sfw"
-					class="toggle"
-					@click="setSfw(true)"
-				><Icon icon="flower" />Enable safe mode</label>
+				<div class="toggles noselect">
+					<label
+						v-if="login && !me"
+						@click="$emit('toggleSidebar', false)"
+					>
+						<router-link
+							:to="{ name: 'login', query: { ref: $route.path } }"
+							class="toggle nolink"
+						><Icon icon="enter2" />Log in</router-link>
+					</label>
 
-				<label
-					v-show="theme === 'dark'"
-					class="toggle"
-					@click="setTheme('light')"
-				><Icon icon="sun" />Use light theme</label>
+					<label
+						v-if="login && me"
+						class="toggle"
+						@click.stop="$store.dispatch('logout')"
+					><Icon icon="exit2" />Log out</label>
 
-				<label
-					v-show="theme === 'light'"
-					class="toggle"
-					@click="setTheme('dark')"
-				><Icon icon="moon" />Use dark theme</label>
+					<label
+						v-show="sfw"
+						class="toggle"
+						@click="setSfw(false)"
+					><Icon icon="fire" />Disable safe mode</label>
+
+					<label
+						v-show="!sfw"
+						class="toggle"
+						@click="setSfw(true)"
+					><Icon icon="flower" />Enable safe mode</label>
+
+					<label
+						v-show="theme === 'dark'"
+						class="toggle"
+						@click="setTheme('light')"
+					><Icon icon="sun" />Use light theme</label>
+
+					<label
+						v-show="theme === 'light'"
+						class="toggle"
+						@click="setTheme('dark')"
+					><Icon icon="moon" />Use dark theme</label>
+
+					<label
+						class="toggle"
+						@click="$emit('showFilters', true)"
+					><Icon icon="filter" />Filters</label>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -158,6 +206,18 @@ function theme(state) {
 	return state.ui.theme;
 }
 
+function login(state) {
+	return state.auth.login;
+}
+
+function signup(state) {
+	return state.auth.signup;
+}
+
+function me(state) {
+	return state.auth.user;
+}
+
 function setTheme(newTheme) {
 	this.$store.dispatch('setTheme', newTheme);
 }
@@ -170,6 +230,7 @@ export default {
 	components: {
 		Search,
 	},
+	emits: ['toggleSidebar', 'showFilters'],
 	data() {
 		return {
 			logo,
@@ -177,6 +238,9 @@ export default {
 	},
 	computed: {
 		...mapState({
+			login,
+			signup,
+			me,
 			sfw,
 			theme,
 		}),
@@ -235,6 +299,12 @@ export default {
     margin: 0;
 }
 
+.sidebar-section {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
 .logo-link {
     display: block;
     height: 100%;
@@ -249,7 +319,7 @@ export default {
 	fill: var(--primary);
 }
 
-::v-deep .search {
+:deep(.search) {
 	height: 3rem;
 	border-bottom: solid 1px var(--shadow-hint);
 	padding: 0;
@@ -260,6 +330,11 @@ export default {
 	}
 }
 
+.nav {
+	flex-grow: 1;
+	overflow-x: auto;
+}
+
 .nav-item {
     display: block;
 }
@@ -280,18 +355,25 @@ export default {
     }
 }
 
-.toggles {
-	border-top: solid 1px var(--shadow-hint);
+.controls {
 	margin: .5rem 0 0 0;
 }
 
+.toggles {
+	flex-shrink: 0;
+	border-top: solid 1px var(--shadow-hint);
+}
+
 .toggle {
 	display: flex;
-	align-self: flex-end;
 	padding: 1rem;
 	color: var(--shadow);
 	font-weight: bold;
 
+	&.username {
+		justify-content: center;
+	}
+
 	.icon {
 		fill: var(--shadow);
 		margin: 0 1rem 0 0;

assets/components/stashes/add.vue

@@ -0,0 +1,53 @@
+<template>
+	<Dialog
+		title="Add stash"
+		@close="$emit('close', false)"
+	>
+		<form
+			class="dialog-body"
+			@submit.prevent="addStash"
+		>
+			<input
+				ref="name"
+				v-model="name"
+				type="input"
+				placeholder="Name"
+				class="input"
+			>
+
+			<div class="dialog-actions right">
+				<button
+					type="submit"
+					class="button button-primary"
+				>Add</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script>
+async function addStash() {
+	await this.$store.dispatch('createStash', {
+		name: this.name,
+	});
+
+	this.$emit('close', true);
+}
+
+function mounted() {
+	this.$refs.name.focus();
+}
+
+export default {
+	data() {
+		return {
+			name: null,
+		};
+	},
+	emits: ['close'],
+	mounted,
+	methods: {
+		addStash,
+	},
+};
+</script>

assets/components/stashes/button.vue

@@ -0,0 +1,112 @@
+<template>
+	<span class="stash-container">
+		<Tooltip class="stash-trigger">
+			<Icon
+				v-show="me"
+				icon="menu"
+				class="stash noselect"
+				:class="{ stashed }"
+			/>
+
+			<template v-slot:tooltip>
+				<StashMenu
+					:stashed-by="stashedBy"
+					@stash="(stashId) => $emit('stash', stashId)"
+					@unstash="(stashId) => $emit('unstash', stashId)"
+				/>
+			</template>
+		</Tooltip>
+
+		<Icon
+			v-show="me && favorited"
+			icon="heart7"
+			class="stash stashed noselect"
+			@click.native="() => $emit('unstash', favorites.id)"
+		/>
+
+		<Icon
+			v-show="me && !favorited"
+			icon="heart8"
+			class="stash unstashed noselect"
+			@click.native="() => $emit('stash', favorites.id)"
+		/>
+	</span>
+</template>
+
+<script>
+import StashMenu from './menu.vue';
+
+function favorited() {
+	return this.stashedBy.some(stash => stash.primary);
+}
+
+function stashed() {
+	return this.stashedBy.some(stash => !stash.primary);
+}
+
+function favorites() {
+	return this.$store.getters.favorites;
+}
+
+function me() {
+	return this.$store.state.auth.user;
+}
+
+export default {
+	components: {
+		StashMenu,
+	},
+	props: {
+		stashedBy: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['stash', 'unstash'],
+	computed: {
+		me,
+		favorites,
+		favorited,
+		stashed,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.stash-container {
+	flex-shrink: 0;
+
+	&.light .icon {
+		fill: var(--lighten);
+	}
+}
+
+.stash.icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: 0 .5rem;
+	fill: var(--shadow);
+
+	&.stashed {
+		fill: var(--primary);
+	}
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
+	}
+}
+
+.stash-trigger {
+	display: inline-block;
+}
+
+@media(max-width: $breakpoint) {
+	.stash.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+}
+</style>

assets/components/stashes/menu.vue

@@ -0,0 +1,71 @@
+<template>
+	<ul class="menu nolist">
+		<li
+			v-for="stash in stashes"
+			:key="`stash-${stash.id}`"
+			class="menu-item"
+		>
+			<label class="menu-stash noselect">
+				<Checkbox
+					:checked="stashedByIds.has(stash.id)"
+					class="menu-check"
+					@change="(checked) => checked ? $emit('stash', stash.id) : $emit('unstash', stash.id)"
+				/>{{ stash.name }}
+			</label>
+		</li>
+	</ul>
+</template>
+
+<script>
+import Checkbox from '../form/checkbox.vue';
+
+function stashes() {
+	return this.$store.state.auth.user?.stashes || [];
+}
+
+export default {
+	components: {
+		Checkbox,
+	},
+	props: {
+		stashedBy: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['stash', 'unstash'],
+	data() {
+		const stashedByIds = new Set(this.stashedBy.map(stash => stash.id));
+
+		return {
+			stashedByIds,
+		};
+	},
+	computed: {
+		stashes,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.menu-item {
+	color: var(--text);
+	display: block;
+}
+
+.menu-stash {
+	display: flex;
+	align-items: center;
+	padding: .5rem 1rem .5rem .5rem;
+
+	&:hover {
+		color: var(--primary);
+		cursor: pointer;
+	}
+}
+
+.menu-check {
+	display: inline-block;
+	margin: 0 .75rem 0 0;
+}
+</style>

assets/components/stashes/remove.vue

@@ -0,0 +1,41 @@
+<template>
+	<Dialog
+		title="Remove stash"
+		@close="$emit('close', false)"
+	>
+		<form
+			class="dialog-body"
+			@submit.prevent="removeStash"
+		>
+			Are you sure you want to remove stash "{{ stash.name }}"?
+
+			<div class="dialog-actions right">
+				<button
+					type="submit"
+					class="button button-primary"
+				>Remove</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script>
+async function removeStash() {
+	await this.$store.dispatch('removeStash', this.stash.id);
+
+	this.$emit('close', true);
+}
+
+export default {
+	props: {
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+	emits: ['close'],
+	methods: {
+		removeStash,
+	},
+};
+</script>

assets/components/stashes/stash.vue

@@ -0,0 +1,300 @@
+<template>
+	<div
+		v-if="stash"
+		class="stash content"
+	>
+		<div class="stash-header">
+			<h2
+				:title="stash.name"
+				class="stash-name"
+			>{{ stash.name }}</h2>
+
+			<span class="header-section">
+				<RouterLink
+					v-if="stash.user"
+					:to="{ name: 'user', params: { username: stash.user.username } }"
+					class="header-item stash-username nolink"
+				><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></RouterLink>
+
+				<label
+					v-if="isMine"
+					v-tooltip="'Public'"
+					:class="{ public: stash.public }"
+					class="header-item stash-public"
+				>
+					<Icon
+						v-show="stash.public"
+						icon="eye"
+					/>
+
+					<Icon
+						v-show="!stash.public"
+						icon="eye-blocked"
+					/>
+
+					<Toggle
+						:checked="stash.public"
+						class="light"
+						@change="checked => publishStash(checked)"
+					/>
+				</label>
+
+				<Icon
+					v-if="isMine && !stash.primary"
+					icon="bin"
+					class="stash-remove"
+					@click.native="showRemoveStash = true"
+				/>
+
+				<RemoveStash
+					v-if="showRemoveStash"
+					:stash="stash"
+					@close="removeStash"
+				/>
+			</span>
+		</div>
+
+		<div class="content-inner">
+			<FilterBar :ranges="['scenes', 'actors', 'movies']" />
+
+			<Releases
+				v-if="$route.params.range === 'scenes' && stash.scenes?.length > 0"
+				:releases="stash.scenes.map(item => item.scene)"
+				:stash="stash"
+				class="stash-section stash-scenes"
+				@stash="fetchStash"
+			/>
+
+			<ul
+				v-if="$route.params.range === 'actors'"
+				class="stash-section stash-actors nolist"
+			>
+				<li
+					v-for="item in stash.actors"
+					:key="item.id"
+				><Actor
+					:actor="item.actor"
+					:stash="stash"
+					@stash="fetchStash"
+				/></li>
+			</ul>
+
+			<div
+				v-if="$route.params.range === 'movies'"
+				class="stash-movies"
+			>
+				<Movie
+					v-for="item in stash.movies"
+					:key="`movie-${item.id}`"
+					:movie="item.movie"
+					:stash="stash"
+					@stash="fetchStash"
+				/>
+			</div>
+
+			<Pagination
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
+
+			<Footer />
+		</div>
+	</div>
+</template>
+
+<script>
+import Actor from '../actors/tile.vue';
+import Releases from '../releases/releases.vue';
+import Movie from '../releases/movie-tile.vue';
+import RemoveStash from './remove.vue';
+import Toggle from '../form/toggle.vue';
+import FilterBar from '../filters/filter-bar.vue';
+import Pagination from '../pagination/pagination.vue';
+
+async function fetchStash() {
+	this.stash = await this.$store.dispatch('fetchStash', {
+		stashId: this.$route.params.stashId,
+		section: this.$route.params.range,
+		pageNumber: this.$route.params.pageNumber || 1,
+		limit: this.limit,
+	});
+
+	this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;
+
+	if (this.$route.params.range === 'scenes') {
+		this.totalCount = this.stash.sceneTotal;
+	}
+
+	if (this.$route.params.range === 'actors') {
+		this.totalCount = this.stash.actorTotal;
+	}
+
+	if (this.$route.params.range === 'movies') {
+		this.totalCount = this.stash.movieTotal;
+	}
+
+	this.pageTitle = this.stash.name;
+}
+
+async function publishStash(isPublic) {
+	await this.$store.dispatch('updateStash', {
+		stashId: this.stash.id,
+		stash: { public: isPublic },
+	});
+
+	this.fetchStash();
+}
+
+async function removeStash(removed) {
+	this.showRemoveStash = false;
+
+	if (removed && this.stash.user) {
+		this.$router.replace({ name: 'user', params: { username: this.stash.user.username } });
+		return;
+	}
+
+	if (removed) {
+		this.$router.replace({ name: 'home' });
+	}
+}
+
+async function mounted() {
+	await this.fetchStash();
+}
+
+export default {
+	components: {
+		Actor,
+		Movie,
+		Releases,
+		RemoveStash,
+		Pagination,
+		FilterBar,
+		Toggle,
+	},
+	data() {
+		return {
+			stash: null,
+			limit: Number(this.$route.query.limit) || 20,
+			pageTitle: null,
+			showRemoveStash: false,
+			isMine: false,
+			totalCount: 0,
+		};
+	},
+	watch: {
+		$route: fetchStash,
+	},
+	mounted,
+	methods: {
+		fetchStash,
+		publishStash,
+		removeStash,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.stash-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--profile);
+	color: var(--text-light);
+
+	.icon {
+		fill: var(--text-light);
+		margin: -.1rem .5rem 0 0;
+	}
+}
+
+.header-section,
+.header-item {
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+
+.stash-name,
+.stash-username {
+	box-sizing: border-box;
+	padding: .5rem 1rem;
+	font-weight: bold;
+}
+
+.stash-username {
+	display: inline-flex;
+	align-items: center;
+	margin: 0 .5rem 0 0;
+}
+
+.stash-name {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	margin: 0;
+}
+
+.stash-public {
+	cursor: pointer;
+	margin: 0 .5rem 0 0;
+
+	.icon {
+		margin: 0 .75rem 0 0;
+		cursor: pointer;
+	}
+}
+
+.stash-remove.icon {
+	height: 100%;
+	padding: 0 1rem;
+	fill: var(--lighten-strong);
+
+	&:hover {
+		fill: var(--text-light);
+		cursor: pointer;
+	}
+}
+
+.stash-actors {
+    display: grid;
+    grid-gap: .5rem;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	grid-template-rows: min-content;
+	flex-grow: 1;
+	padding: 1rem;
+	border-top: solid 1px var(--shadow-hint);
+}
+
+.stash-movies {
+	display: grid;
+	flex-grow: 1;
+	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+	grid-template-rows: min-content;
+	grid-gap: 1rem;
+	padding: 1rem;
+	border-top: solid 1px var(--shadow-hint);
+}
+
+.stash-scenes .tiles {
+	grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+	grid-template-rows: min-content;
+}
+
+@media(max-width: $breakpoint-small) {
+	.stash-name {
+		font-size: 1.25rem;
+	}
+
+	.username-name {
+		display: none;
+	}
+
+	.stash-username {
+		margin: 0;
+	}
+}
+</style>

assets/components/stats/stats.vue

@@ -3,7 +3,17 @@
 		<div class="content-inner">
 			<h1 class="heading">Stats</h1>
 
-			<span class="version">traxxx {{ version }}</span>
+			<dl class="stat-table">
+				<div class="stat-row">
+					<dt class="stat-label">Version</dt>
+					<dd class="stat-value">{{ version }}</dd>
+				</div>
+
+				<div class="stat-row">
+					<dt class="stat-label">Content updated</dt>
+					<dd class="stat-value">{{ formatDate(lastScrape, 'YYYY-MM-DD HH:mm') }}</dd>
+				</div>
+			</dl>
 
 			<dl class="stat-table">
 				<div class="stat-row">
@@ -46,6 +56,7 @@ async function mounted() {
 	this.totalActors = stats.totalActors;
 	this.totalNetworks = stats.totalNetworks;
 	this.totalChannels = stats.totalChannels;
+	this.lastScrape = stats.lastScrape;
 
 	this.version = VERSION; // eslint-disable-line no-undef
 }
@@ -75,6 +86,10 @@ export default {
 	padding: 1rem;
 }
 
+.stat-table {
+	margin: 0 0 1rem 0;
+}
+
 .stat-row {
 	width: 20rem;
 	max-width: 100%;

assets/components/tags/photos.vue

@@ -1,25 +1,12 @@
 <template>
 	<div class="photos">
-		<a
-			v-if="tag.poster"
-			:href="`/img/${poster.path}`"
-			:title="poster.comment"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="photo-link"
-		>
-			<img
-				:src="`/img/${poster.thumbnail}`"
-				:alt="tag.poster.comment"
-				class="poster"
-				@load="$parent.$emit('load')"
-			>
-
-			<span
-				v-if="poster.comment"
-				class="photo-comment"
-			>{{ poster.comment }}</span>
-		</a>
+		<Campaign
+			:tag="tag"
+			:min-height="240"
+			:max-ratio="1.5"
+			class="photo-link photo"
+			@campaign="campaign => $emit('campaign', campaign)"
+		/>
 
 		<a
 			v-for="photo in photos"
@@ -31,14 +18,25 @@
 			class="photo-link"
 		>
 			<img
-				:src="`/img/${photo.thumbnail}`"
+				:src="getPath(photo, 'thumbnail', { local: true })"
+				:style="{ 'background-image': getBgPath(photo, 'lazy', { local: true }) }"
 				:alt="photo.comment"
+				:width="photo.thumbnailWidth"
+				:height="photo.thumbnailHeight"
 				class="photo"
-				@load="$parent.$emit('load')"
+				@load="$emit('load', $event)"
 			>
 
+			<Logo :photo="photo" />
+
+			<router-link
+				v-if="photo.comment && photo.entity"
+				:to="`/${photo.entity.type}/${photo.entity.slug}`"
+				class="photo-comment"
+			>{{ photo.comment }} for {{ photo.entity.name }}</router-link>
+
 			<span
-				v-if="photo.comment"
+				v-else-if="photo.comment"
 				class="photo-comment"
 			>{{ photo.comment }}</span>
 		</a>
@@ -46,31 +44,38 @@
 </template>
 
 <script>
-function poster() {
-	if (this.$store.state.ui.sfw) {
-		return this.tag.poster.sfw;
-	}
-
-	return this.tag.poster;
-}
+import Logo from '../album/logo.vue';
+import Campaign from '../campaigns/campaign.vue';
 
 function photos() {
+	if (this.tag.poster && this.$store.state.ui.sfw) {
+		return [this.tag.poster].concat(this.tag.photos).map(photo => photo.sfw);
+	}
+
 	if (this.$store.state.ui.sfw) {
 		return this.tag.photos.map(photo => photo.sfw);
 	}
 
+	if (this.tag.poster) {
+		return [this.tag.poster].concat(this.tag.photos);
+	}
+
 	return this.tag.photos;
 }
 
 export default {
+	components: {
+		Logo,
+		Campaign,
+	},
 	props: {
 		tag: {
 			type: Object,
 			default: null,
 		},
 	},
+	emits: ['load', 'campaign'],
 	computed: {
-		poster,
 		photos,
 	},
 };
@@ -79,13 +84,11 @@ export default {
 <style lang="scss" scoped>
 .photos {
 	width: 100%;
-	padding: .5rem 1rem 0 .5rem;
+	padding: .5rem 1rem;
 	box-sizing: border-box;
-	overflow-x: auto;
 	white-space: nowrap;
-    scrollbar-width: none;
-	scroll-behavior: smooth;
     font-size: 0;
+	border-bottom: solid 1px var(--shadow-hint);
 
     &::-webkit-scrollbar {
         display: none;
@@ -112,21 +115,32 @@ export default {
 	display: inline-block;
 	position: relative;
 	overflow: hidden;
+	margin: 0 .5rem 0 0;
 
-	&:not(:last-child) {
-		margin: 0 .5rem 0 0;
+	&:last-child {
+		margin: 0 1rem 0 0;
 	}
 
-	&:hover .photo-comment {
-		transform: translateY(0);
+	&:hover {
+		.photo-comment {
+			transform: translateY(0);
+		}
+
+		::v-deep(.album-logo) {
+			opacity: 0;
+		}
 	}
 }
 
 .poster,
 .photo {
+	width: auto;
 	max-height: 15rem;
 	max-width: 100%;
 	box-shadow: 0 0 3px var(--shadow-weak);
+	object-fit: cover;
+	background-position: center;
+	background-size: cover;
 }
 
 .photo-comment {
@@ -140,9 +154,15 @@ export default {
 	background: var(--shadow);
 	font-size: .9rem;
 	text-shadow: 0 0 3px var(--shadow);
+	text-decoration: none;
 	white-space: normal;
 	line-height: 1.25;
 	transform: translateY(100%);
 	transition: transform .25s ease;
 }
+
+::v-deep(.campaign) .campaign-banner {
+	max-height: 15rem;
+	width: auto;
+}
 </style>

assets/components/tags/tag.vue

@@ -10,7 +10,10 @@
 			</h2>
 		</div>
 
-		<div class="content-inner">
+		<div
+			class="content-inner"
+			@scroll="events.emit('scroll', $event)"
+		>
 			<div
 				v-if="description"
 				class="description header-description"
@@ -19,18 +22,52 @@
 
 			<Scroll
 				v-if="hasMedia"
-				:expanded="expanded"
-				class="scroll-light"
-				@expand="(state) => expanded = state"
+				v-slot="scroll"
+				class="scroll-dark"
 			>
 				<Photos
 					:tag="tag"
 					:class="{ expanded }"
+					@load="scroll.loaded"
+					@campaign="campaign => showBannerCampaign = !campaign"
 				/>
 			</Scroll>
 
-			<FilterBar :fetch-releases="fetchReleases" />
-			<Releases :releases="releases" />
+			<button
+				v-if="tag.photos && tag.photos.length > 2"
+				class="album-toggle"
+				@click="$router.push({ hash: '#album' })"
+			><Icon icon="grid3" />View album</button>
+
+			<Album
+				v-if="showAlbum"
+				:items="[tag.poster, ...tag.photos]"
+				:title="tag.name"
+				:local="true"
+				:tag="tag"
+				class="portrait"
+				@close="$router.replace({ hash: undefined })"
+			/>
+
+			<div
+				v-if="showBannerCampaign"
+				class="campaign-container"
+			>
+				<Campaign
+					:tag="tag"
+					:min-ratio="3"
+				/>
+			</div>
+
+			<FilterBar
+				ref="filter"
+				:fetch-releases="fetchReleases"
+			/>
+
+			<Releases
+				:releases="releases"
+				:done="done"
+			/>
 
 			<Pagination
 				:items-total="totalCount"
@@ -44,20 +81,23 @@
 </template>
 
 <script>
-/* eslint-disable no-v-html */
 import { Converter } from 'showdown';
 
 import escapeHtml from '../../../src/utils/escape-html';
 
 import FilterBar from '../filters/filter-bar.vue';
 import Photos from './photos.vue';
+import Album from '../album/album.vue';
 import Releases from '../releases/releases.vue';
 import Pagination from '../pagination/pagination.vue';
 import Scroll from '../scroll/scroll.vue';
+import Campaign from '../campaigns/campaign.vue';
 
 const converter = new Converter();
 
-async function fetchReleases() {
+async function fetchReleases(scroll = true) {
+	this.done = false;
+
 	const { tag, releases, totalCount } = await this.$store.dispatch('fetchTagBySlug', {
 		tagSlug: this.$route.params.tagSlug,
 		pageNumber: Number(this.$route.params.pageNumber),
@@ -71,10 +111,26 @@ async function fetchReleases() {
 
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
+
+	this.done = true;
+
+	if (this.hasMedia) {
+		this.showBannerCampaign = true;
+	}
+
+	if (scroll && this.$refs.filter) {
+		this.$refs.filter.$el.scrollIntoView();
+	}
 }
 
-async function route() {
-	await this.fetchReleases();
+function showAlbum() {
+	return this.tag.photos?.length > 0 && this.$route.hash === '#album';
+}
+
+async function watchRoute(to, from) {
+	if (to.hash !== '#album' && from.hash !== '#album') {
+		await this.fetchReleases();
+	}
 }
 
 async function mounted() {
@@ -86,24 +142,32 @@ export default {
 	components: {
 		FilterBar,
 		Releases,
+		Album,
 		Photos,
 		Pagination,
 		Scroll,
+		Campaign,
 	},
 	data() {
 		return {
 			tag: null,
 			description: null,
 			releases: null,
+			done: false,
 			totalCount: 0,
-			limit: 15,
+			limit: 20,
 			pageTitle: null,
 			hasMedia: false,
 			expanded: false,
+			showBannerCampaign: false, // only show if photo campaign is not available
 		};
 	},
+	computed: {
+		showAlbum,
+	},
 	watch: {
-		$route: route,
+		$route: watchRoute,
+		'$store.state.ui.tagFilter': fetchReleases,
 	},
 	mounted,
 	methods: {
@@ -135,12 +199,14 @@ export default {
 @import 'theme';
 
 .header {
+	display: flex;
     background: var(--profile);
     color: var(--text-light);
     justify-content: space-between;
 }
 
 .title {
+	display: inline-block;
     padding: .5rem 1rem;
     margin: 0;
     flex-shrink: 0;
@@ -159,4 +225,15 @@ export default {
 	color: var(--text-light);
 	background: var(--profile);
 }
+
+.scroll {
+	background: var(--background-dim);
+}
+
+.campaign-container {
+	max-height: 90px;
+	padding: .5rem 1rem 0 1rem;
+	background: var(--background-dim);
+	text-align: center;
+}
 </style>

assets/components/tags/tags.vue

@@ -1,23 +1,29 @@
 <template>
 	<div class="tags">
-		<div
-			v-for="(tags, category) in categories"
-			:key="category"
-			class="category"
-		>
-			<h3 class="heading">{{ category }}</h3>
+		<div class="content-inner">
+			<SearchBar
+				:placeholder="'Search tags'"
+				class="search"
+			/>
 
 			<div
-				:key="sfw"
-				v-lazy-container
-				class="tiles"
+				v-for="(tags, category) in categories"
+				:key="category"
+				class="category"
 			>
-				<Tag
-					v-for="tag in tags"
-					:key="`tag-${tag.id}`"
-					:tag="tag"
-					:lazy="true"
-				/>
+				<h3 class="heading">{{ category }}</h3>
+
+				<div
+					:key="sfw"
+					class="tiles"
+				>
+					<Tag
+						v-for="tag in tags"
+						:key="`tag-${tag.id}`"
+						:tag="tag"
+						:lazy="true"
+					/>
+				</div>
 			</div>
 		</div>
 
@@ -27,116 +33,133 @@
 
 <script>
 import Tag from './tile.vue';
+import SearchBar from '../search/bar.vue';
+
+const tagSlugsByCategory = {
+	popular: [
+		'anal',
+		'lesbian',
+		'interracial',
+		'mff',
+		'mfm',
+		'teen',
+		'milf',
+		'blowjob',
+		'gay',
+		'transsexual',
+		'dp',
+		'gangbang',
+		'facial',
+		'creampie',
+		'squirting',
+	],
+	appearance: [
+		'asian',
+		'black',
+		'latina',
+		'white',
+		'natural-boobs',
+		'enhanced-boobs',
+		'blonde',
+		'brunette',
+		'redhead',
+		'tattoos',
+		'piercings',
+	],
+	sexuality: [
+		'gay',
+		'bisexual',
+		'transsexual',
+	],
+	oral: [
+		'blowjob',
+		'pussy-eating',
+		'ass-eating',
+		'deepthroat',
+		'facefucking',
+		'69',
+		'atm',
+	],
+	manual: [
+		'handjob',
+		'fingering',
+		'anal-fingering',
+		'titty-fucking',
+		'fisting',
+		'anal-fisting',
+	],
+	group: [
+		'mfm',
+		'mff',
+		'orgy',
+		'gangbang',
+		'blowbang',
+	],
+	cumshot: [
+		'facial',
+		'creampie',
+		'cum-in-mouth',
+		'cum-on-boobs',
+		'cum-on-butt',
+		'cum-on-pussy',
+		'anal-creampie',
+		'oral-creampie',
+		'bukkake',
+		'fake-cum',
+	],
+	roleplay: [
+		'family',
+		'parody',
+		'schoolgirl',
+		'nurse',
+		'maid',
+		'nun',
+	],
+	extreme: [
+		'dp',
+		'airtight',
+		'dap',
+		'dvp',
+		'triple-penetration',
+		'tap',
+		'tvp',
+	],
+	fetish: [
+		'bdsm',
+		'femdom',
+		'bondage',
+		'free-use',
+		'latex',
+		'blindfold',
+	],
+	toys: [
+		'toys',
+		'toy-anal',
+		'toy-dp',
+		'double-dildo',
+		'double-dildo-blowjob',
+		'double-dildo-kiss',
+		'double-dildo-anal',
+		'double-dildo-dp',
+	],
+	misc: [
+		'gaping',
+		'squirting',
+		'oil',
+		'vr',
+		'bts',
+	],
+};
 
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
 
-async function mounted() {
-	const tagSlugsByCategory = {
-		popular: [
-			'anal',
-			'lesbian',
-			'interracial',
-			'mff',
-			'mfm',
-			'teen',
-			'milf',
-			'blowjob',
-			'dp',
-			'gangbang',
-			'facial',
-			'creampie',
-			'squirting',
-		],
-		appearance: [
-			'asian',
-			'ebony',
-			'latina',
-			'caucasian',
-			'natural-boobs',
-			'fake-boobs',
-			'blonde',
-			'brunette',
-			'redhead',
-			'tattoos',
-			'piercings',
-		],
-		oral: [
-			'blowjob',
-			'pussy-eating',
-			'ass-eating',
-			'69',
-			'double-blowjob',
-			'deepthroat',
-			'facefucking',
-			'atm',
-		],
-		manual: [
-			'handjob',
-			'fingering',
-			'anal-fingering',
-			'titty-fucking',
-			'fisting',
-			'anal-fisting',
-		],
-		group: [
-			'mfm',
-			'mff',
-			'orgy',
-			'gangbang',
-			'blowbang',
-		],
-		cumshot: [
-			'facial',
-			'creampie',
-			'cum-in-mouth',
-			'cum-on-boobs',
-			'cum-on-butt',
-			'cum-on-pussy',
-			'anal-creampie',
-			'oral-creampie',
-			'bukkake',
-			'fake-cum',
-		],
-		toys: [
-			'toy-anal',
-			'toy-dp',
-			'double-dildo',
-			'double-dildo-blowjob',
-			'double-dildo-kiss',
-			'double-dildo-anal',
-			'double-dildo-dp',
-		],
-		roleplay: [
-			'family',
-			'parody',
-			'schoolgirl',
-			'nurse',
-			'maid',
-		],
-		fetish: [
-			'bdsm',
-			'femdom',
-			'bondage',
-			'blindfold',
-		],
-		extreme: [
-			'dp',
-			'airtight',
-			'dap',
-			'dvp',
-			'da-tp',
-			'dv-tp',
-			'tap',
-		],
-		misc: [
-			'gaping',
-			'squirting',
-			'oil',
-			'bts',
-		],
-	};
+async function fetchTags() {
+	if (this.$route.query.query) {
+		await this.searchTags();
+		return;
+	}
 
 	const tags = await this.$store.dispatch('fetchTags', {
 		slugs: Object.values(tagSlugsByCategory).flat(),
@@ -144,17 +167,42 @@ async function mounted() {
 
 	const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});
 
-	this.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => ({
-		...acc,
-		[category]: tagSlugs.map(tagSlug => tagsBySlug[tagSlug]),
-	}), {});
+	this.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => {
+		const categoryTags = tagSlugs.map((tagSlug) => tagsBySlug[tagSlug]).filter(Boolean);
 
+		if (categoryTags.length === 0) {
+			return acc;
+		}
+
+		return {
+			...acc,
+			[category]: categoryTags,
+		};
+	}, {});
+}
+
+async function searchTags() {
+	const tags = await this.$store.dispatch('searchTags', {
+		minLength: 1,
+		query: this.$route.query.query,
+		limit: 20,
+	});
+
+	this.categories = {
+		results: tags,
+	};
+}
+
+async function mounted() {
 	this.pageTitle = 'Tags';
+
+	await this.fetchTags();
 }
 
 export default {
 	components: {
 		Tag,
+		SearchBar,
 	},
 	data() {
 		return {
@@ -165,14 +213,28 @@ export default {
 	computed: {
 		sfw,
 	},
+	watch: {
+		$route: fetchTags,
+		'$store.state.ui.tagFilter': fetchTags,
+	},
 	mounted,
+	methods: {
+		fetchTags,
+		searchTags,
+	},
 };
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .tags {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.content-inner {
     padding: 1rem 1rem 0 1rem;
 }
 
@@ -180,35 +242,97 @@ export default {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
     grid-gap: 1rem;
-    margin: 0 0 1.5rem 0;
 }
 
 .heading {
     text-transform: capitalize;
 	padding: 0 0 0 .5rem;
-	margin: 2rem 0 1rem 0;
+	margin: 1.25rem 0 1rem 0;
 }
 
 .category:first-child .heading {
 	margin: .5rem 0 1rem 0;
 }
 
-@media(max-width: $breakpoint3) {
+.search {
+	margin: 0 0 .25rem 0;
+}
+
+@media(max-width: $breakpoint-mega) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(18rem, .5fr));
+        grid-template-columns: repeat(auto-fill, minmax(17.75rem, .5fr));
     }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 12rem;
+	}
+}
+
+@media(max-width: $breakpoint-kilo) {
+    .tiles {
+        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+		grid-gap: .5rem;
+    }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 14rem;
+	}
 }
 
 @media(max-width: $breakpoint) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
 		grid-gap: .5rem;
     }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 11rem;
+	}
 }
 
-@media(max-width: $breakpoint0) {
+@media(max-width: $breakpoint-small) {
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 10rem;
+	}
+}
+
+@media(max-width: $breakpoint-micro) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
     }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 7.5rem;
+	}
+}
+
+@media(max-width: $breakpoint-mini) {
+    .tiles {
+        grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
+    }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 12rem;
+	}
+}
+
+@media(max-width: $breakpoint-nano) {
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 10rem;
+	}
+}
+
+@media(max-width: $breakpoint-pico) {
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 8rem;
+	}
 }
 </style>

assets/components/tags/tile.vue

@@ -1,46 +1,63 @@
 <template>
 	<div
-		v-if="tag.poster"
 		class="tile"
 	>
 		<router-link
 			:to="`/tag/${tag.slug}`"
 			:title="tag.name"
+			:class="{ blank: !tag.poster }"
 			class="poster-link"
 		>
-			<img
-				v-if="!lazy && !sfw"
-				:src="`/img/${tag.poster.thumbnail}`"
-				:title="tag.poster.comment"
-				:alt="tag.name"
-				class="poster"
-			>
+			<template v-if="tag.poster">
+				<img
+					v-if="!lazy && !sfw"
+					:src="`/img/${tag.poster.thumbnail}`"
+					:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
+					:title="comment"
+					:alt="tag.name"
+					class="poster"
+				>
 
-			<img
-				v-if="!lazy && sfw"
-				:src="`/img/${tag.poster.sfw.thumbnail}`"
-				:title="tag.poster.sfw.comment"
-				:alt="tag.name"
-				class="poster"
-			>
+				<img
+					v-if="!lazy && sfw"
+					:src="`/img/${tag.poster.sfw.thumbnail}`"
+					:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
+					:title="tag.poster.sfw.comment"
+					:alt="tag.name"
+					class="poster"
+				>
 
-			<img
-				v-if="lazy && !sfw"
-				:data-src="`/img/${tag.poster.thumbnail}`"
-				:data-loading="`/img/${tag.poster.lazy}`"
-				:title="tag.poster.comment"
-				:alt="tag.name"
-				class="poster"
-			>
+				<img
+					v-if="lazy && !sfw"
+					:src="`/img/${tag.poster.thumbnail}`"
+					:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
+					:title="comment"
+					:alt="tag.name"
+					loading="lazy"
+					class="poster"
+				>
 
-			<img
-				v-if="lazy && sfw"
-				:data-src="`/img/${tag.poster.sfw.thumbnail}`"
-				:data-loading="`/img/${tag.poster.sfw.lazy}`"
-				:title="tag.poster.sfw.comment"
-				:alt="tag.name"
-				class="poster"
-			>
+				<img
+					v-if="lazy && sfw"
+					:src="`/img/${tag.poster.sfw.thumbnail}`"
+					:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
+					:title="tag.poster.sfw.comment"
+					:alt="tag.name"
+					loading="lazy"
+					class="poster"
+				>
+
+				<Logo
+					v-if="!sfw"
+					:photo="tag.poster"
+					favicon
+				/>
+			</template>
+
+			<Icon
+				v-else
+				icon="price-tag2"
+			/>
 		</router-link>
 
 		<router-link
@@ -49,19 +66,19 @@
 			:title="tag.name"
 		>{{ tag.name }}</router-link>
 	</div>
-
-	<span
-		v-else
-		class="title"
-	>{{ tag.name }}</span>
 </template>
 
 <script>
+import Logo from '../album/logo.vue';
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
 
 export default {
+	components: {
+		Logo,
+	},
 	props: {
 		tag: {
 			type: Object,
@@ -72,6 +89,11 @@ export default {
 			default: false,
 		},
 	},
+	data() {
+		return {
+			comment: this.tag.poster?.entity ? `${this.tag.poster.comment} for ${this.tag.poster.entity.name}` : this.tag.poster?.comment,
+		};
+	},
 	computed: {
 		sfw,
 	},
@@ -79,38 +101,62 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
-
 .tile {
+	display: flex;
+	flex-direction: column;
     box-sizing: border-box;
     position: relative;
 	text-decoration: none;
 	font-size: 0;
 
 	&:hover {
-		.poster {
-			box-shadow: 0 0 3px var(--darken);
+		.poster,
+		.blank {
+			box-shadow: 0 0 2px var(--darken);
 		}
 
 		.title {
-			background: var(--primary);
+			color: var(--primary);
 		}
 	}
 }
 
 .poster {
+	display: inline-block;
     width: 100%;
+	object-fit: cover;
+	background-size: cover;
+	background-position: center;
     box-shadow: 0 0 3px var(--darken-weak);
 }
 
+.poster,
+.blank {
+	height: 13.5rem;
+}
+
+.poster-link {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	flex-grow: 1;
+	background: var(--shadow-hint);
+
+	.icon {
+		width: 2rem;
+		height: 2rem;
+		fill: var(--shadow-weak);
+	}
+}
+
 .title {
 	display: block;
     box-sizing: border-box;
-    padding: .5rem 1rem;
+    padding: .5rem;
 	overflow: hidden;
 	white-space: nowrap;
-	color: var(--text-light);
-	background: var(--profile);
+	color: var(--shadow-strong);
 	text-decoration: none;
 	font-size: .9rem;
     font-weight: bold;

assets/components/tooltip/tooltip.vue

@@ -0,0 +1,184 @@
+<template>
+	<div class="tooltip-container">
+		<div
+			ref="trigger"
+			class="trigger noselect"
+			@click.stop="toggle"
+		>
+			<slot />
+		</div>
+
+		<teleport to="body">
+			<div
+				v-if="opened"
+				ref="tooltip"
+				class="tooltip-wrapper"
+				:style="{ transform: `translate3d(${tooltipX}px, ${tooltipY}px, 0)` }"
+				@click.stop
+			>
+				<div
+					class="tooltip-inner"
+					:style="{ 'max-height': `calc(100vh - ${tooltipY}px - 1rem)` }"
+				>
+					<div class="tooltip">
+						<slot name="tooltip" />
+					</div>
+				</div>
+
+				<div
+					class="tooltip-arrow"
+					:style="{ transform: `translate3d(${arrowOffset}px, 0, 0)` }"
+				/>
+			</div>
+		</teleport>
+	</div>
+</template>
+
+<script>
+import { nextTick } from 'vue';
+
+function getX(triggerBoundary, tooltipBoundary) {
+	const idealPosition = triggerBoundary.left + (triggerBoundary.width / 2) - (tooltipBoundary.width / 2);
+	const rightEdgeOverflow = Math.max((idealPosition + tooltipBoundary.width) - window.innerWidth, 0);
+
+	// don't overflow left edge
+	if (idealPosition < 0) {
+		return {
+			tooltipX: 0,
+			arrowOffset: idealPosition,
+		};
+	}
+
+	// don't overflow right edge
+	if (rightEdgeOverflow > 0) {
+		return {
+			tooltipX: window.innerWidth - tooltipBoundary.width,
+			arrowOffset: rightEdgeOverflow,
+		};
+	}
+
+	// position at the center of trigger
+	return {
+		tooltipX: idealPosition,
+		arrowOffset: 0,
+	};
+}
+
+async function calculate() {
+	if (!this.opened) {
+		return;
+	}
+
+	const triggerBoundary = this.$refs.trigger.getBoundingClientRect();
+	const tooltipBoundary = this.$refs.tooltip.getBoundingClientRect();
+
+	const { tooltipX, arrowOffset } = this.getX(triggerBoundary, tooltipBoundary);
+
+	this.tooltipY = triggerBoundary.top + triggerBoundary.height + 5;
+	this.tooltipX = tooltipX;
+	this.arrowOffset = arrowOffset;
+}
+
+async function open() {
+	this.events.emit('blur');
+
+	await nextTick();
+
+	this.opened = true;
+	await nextTick();
+
+	this.calculate();
+	this.$emit('open');
+}
+
+function close() {
+	this.opened = false;
+
+	this.tooltipY = 0;
+	this.tooltipX = 0;
+	this.arrowOffset = 0;
+
+	this.$emit('close');
+}
+
+function toggle() {
+	if (this.opened) {
+		this.close();
+		return;
+	}
+
+	this.open();
+}
+
+function mounted() {
+	this.events.on('blur', () => {
+		this.close();
+	});
+
+	this.events.on('resize', () => {
+		this.calculate();
+	});
+
+	this.events.on('scroll', () => {
+		this.calculate();
+	});
+}
+
+export default {
+	data() {
+		return {
+			opened: false,
+			tooltipX: 0,
+			tooltipY: 0,
+			arrowOffset: 0,
+		};
+	},
+	emits: ['open', 'close'],
+	mounted,
+	methods: {
+		calculate,
+		getX,
+		open,
+		close,
+		toggle,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.tooltip-wrapper {
+	display: flex;
+	top: 0;
+	left: 0;
+	flex-direction: column;
+	justify-content: center;
+	position: absolute;
+	z-index: 10;
+}
+
+.tooltip-inner {
+	position: relative;
+	overflow-y: auto;
+	background: var(--background);
+	box-shadow: 0 0 .5rem var(--darken);
+}
+
+.tooltip {
+	position: relative;
+	background: var(--background);
+}
+
+.tooltip-arrow {
+	content: '';
+	width: 0;
+	height: 0;
+	position: absolute;
+	top: -.5rem;
+	left: calc(50% - .5rem);
+	border-left: .5rem solid transparent;
+	border-right: .5rem solid transparent;
+	border-bottom: .5rem solid var(--background);
+	margin: 0 auto;
+	filter: drop-shadow(0 0 3px var(--darken-weak));
+}
+</style>

assets/components/users/alert.vue

@@ -0,0 +1,252 @@
+<template>
+	<div class="alert">
+		<div class="alert-section alert-header">
+			<div class="alert-targets">
+				<Icon
+					v-if="alert.notify"
+					icon="bell2"
+					class="alert-action"
+				/>
+
+				<Icon
+					v-if="alert.email"
+					icon="envelop"
+					class="alert-action"
+				/>
+
+				<Icon
+					v-if="alert.stashes?.length > 0"
+					v-tooltip="alert.stashes.map(stash => stash.name).join()"
+					icon="heart7"
+					class="alert-action"
+				/>
+			</div>
+
+			<span class="header-actions noselect">
+				<Icon
+					v-if="isMe"
+					icon="bin"
+					class="alert-remove"
+					@click.native="showRemoveAlert = true"
+				/>
+
+				<RemoveAlert
+					v-if="showRemoveAlert"
+					:alert="alert"
+					@close="removeAlert"
+				/>
+			</span>
+		</div>
+
+		<div class="alert-triggers">
+			<div
+				v-if="alert.actors?.length > 0"
+				class="alert-section alert-trigger"
+			>
+				<h4
+					v-if="alert.actors.length > 1"
+					class="alert-heading"
+				>Actors</h4>
+
+				<h4
+					v-else
+					class="alert-heading"
+				>Actor</h4>
+
+				<ul class="alert-actors nolist">
+					<li
+						v-for="actor in alert.actors"
+						:key="`actor-${actor.id}`"
+						class="alert-actor"
+					>
+						<ActorPreview
+							:actor="actor"
+							:alert="alert"
+						/>
+					</li>
+				</ul>
+			</div>
+
+			<div
+				v-if="alert.tags?.length > 0"
+				class="alert-section alert-trigger"
+			>
+				<h4
+					v-if="alert.tags.length > 1"
+					class="alert-heading"
+				>Tags</h4>
+
+				<h4
+					v-else
+					class="alert-heading"
+				>Tag</h4>
+
+				<ul class="alert-tags nolist">
+					<li
+						v-for="tag in alert.tags"
+						:key="`tag-${tag.id}`"
+					><router-link
+						:to="`/tag/${tag.slug}`"
+						class="tag nolink"
+					>{{ tag.name }}</router-link></li>
+				</ul>
+			</div>
+
+			<div
+				v-if="alert.entity"
+				class="alert-section alert-trigger"
+			>
+				<h4 class="alert-heading">Channel</h4>
+
+				<Entity
+					v-if="alert.entity"
+					:entity="alert.entity"
+					class="entity"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import ActorPreview from '../actors/preview.vue';
+import RemoveAlert from '../alerts/remove.vue';
+import Entity from '../entities/tile.vue';
+
+async function removeAlert(removed) {
+	this.showRemoveAlert = false;
+
+	if (removed) {
+		this.$emit('remove');
+	}
+}
+
+export default {
+	components: {
+		ActorPreview,
+		Entity,
+		RemoveAlert,
+	},
+	props: {
+		alert: {
+			type: Object,
+			default: null,
+		},
+		isMe: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['remove'],
+	data() {
+		return {
+			showRemoveAlert: false,
+		};
+	},
+	methods: {
+		removeAlert,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.alert {
+	min-width: 0;
+	height: 100%;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--darken-weak);
+}
+
+.alert-header {
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
+.alert-section {
+	display: inline-block;
+	padding: .5rem;
+}
+
+.alert-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: stretch;
+	padding: 0;
+
+	.alert-action {
+		padding: .5rem;
+		fill: var(--shadow);
+	}
+}
+
+.alert-triggers {
+	display: flex;
+}
+
+.alert-heading {
+	display: block;
+	padding: 0 .5rem .5rem 0;
+	margin: 0;
+	color: var(--shadow-strong);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: .9rem;
+}
+
+.alert-more {
+	flex-shrink: 0;
+	margin: 0 0 0 .5rem;
+	color: var(--shadow);
+	font-size: .9rem;
+}
+
+.header-actions {
+	display: flex;
+	align-items: stretch;
+}
+
+.alert-remove {
+	height: auto;
+	padding: 0 .5rem 0 .75rem;
+	fill: var(--shadow);
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--shadow-strong);
+	}
+}
+
+.alert-triggers {
+	dislay: flex;
+	flex-wrap: wrap;
+}
+
+.alert-trigger {
+	flex-shrink: 0;
+	flex-grow: 1;
+}
+
+.alert-actors,
+.alert-tags {
+	display: flex;
+	grid-gap: .5rem;
+}
+
+.tag {
+	color: var(--shadow-strong);
+	padding: .5rem;
+	border: solid 1px var(--shadow-hint);
+	font-size: .9rem;
+	font-weight: bold;
+
+	&:hover {
+		cursor: pointer;
+		border: solid 1px var(--primary);
+	}
+}
+
+.entity {
+	width: 10rem;
+	height: 2.5rem;
+}
+</style>

assets/components/users/stash.vue

@@ -0,0 +1,247 @@
+<template>
+	<div class="stash">
+		<div class="stash-section stash-header">
+			<router-link
+				:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug, range: 'scenes', pageNumber: 1 } }"
+				class="stash-link nolink"
+			>
+				<h4 class="stash-name">{{ stash.name }}</h4>
+				<span class="stash-more">Browse</span>
+			</router-link>
+
+			<span class="header-actions noselect">
+				<label
+					v-if="isMe"
+					v-tooltip="'Public'"
+					:class="{ public: stash.public }"
+					class="stash-public"
+				>
+					<Icon
+						v-show="stash.public"
+						icon="eye"
+					/>
+
+					<Icon
+						v-show="!stash.public"
+						icon="eye-blocked"
+					/>
+
+					<Toggle
+						:checked="stash.public"
+						@change="checked => publishStash(checked)"
+					/>
+				</label>
+
+				<Icon
+					v-if="isMe && !stash.primary"
+					icon="bin"
+					class="stash-remove"
+					@click.native="showRemoveStash = true"
+				/>
+
+				<RemoveStash
+					v-if="showRemoveStash"
+					:stash="stash"
+					@close="removeStash"
+				/>
+			</span>
+		</div>
+
+		<ul
+			v-if="stash.scenes?.length > 0"
+			class="stash-section stash-scenes nolist"
+		>
+			<li
+				v-for="{ scene } in stash.scenes"
+				:key="scene.id"
+				class="stash-scene"
+			>
+				<ScenePreview
+					:scene="scene"
+					:stash="stash"
+				/>
+			</li>
+		</ul>
+
+		<ul
+			v-if="stash.actors?.length > 0"
+			class="stash-section stash-actors nolist"
+		>
+			<li
+				v-for="{ actor } in stash.actors"
+				:key="actor.id"
+				class="stash-actor"
+			>
+				<ActorPreview
+					:actor="actor"
+					:stash="stash"
+				/>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import ActorPreview from '../actors/preview.vue';
+import ScenePreview from '../releases/scene-preview.vue';
+import RemoveStash from '../stashes/remove.vue';
+import Toggle from '../form/toggle.vue';
+
+async function publishStash(isPublic) {
+	await this.$store.dispatch('updateStash', {
+		stashId: this.stash.id,
+		stash: { public: isPublic },
+	});
+
+	this.$emit('publish', isPublic);
+}
+
+async function removeStash(removed) {
+	this.showRemoveStash = false;
+
+	if (removed) {
+		this.$emit('remove');
+	}
+}
+
+export default {
+	components: {
+		ActorPreview,
+		ScenePreview,
+		RemoveStash,
+		Toggle,
+	},
+	props: {
+		stash: {
+			type: Object,
+			default: null,
+		},
+		isMe: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['publish', 'remove'],
+	data() {
+		return {
+			showRemoveStash: false,
+		};
+	},
+	methods: {
+		publishStash,
+		removeStash,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.stash {
+	min-width: 0;
+	height: 100%;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--darken-weak);
+}
+
+.stash-section {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+
+	&:not(:last-child),
+	&.stash-header {
+		border-bottom: solid 1px var(--shadow-hint);
+	}
+}
+
+.stash-header {
+	justify-content: space-between;
+	align-items: stretch;
+	padding: 0;
+}
+
+.stash-link {
+	display: inline-flex;
+	align-items: center;
+	flex-grow: 1;
+	text-decoration: none;
+	overflow: hidden;
+
+	&:hover .stash-more {
+		color: var(--primary);
+	}
+}
+
+.stash-name {
+	display: inline-block;
+	padding: .5rem;
+	margin: 0;
+	color: var(--shadow-strong);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.stash-more {
+	flex-shrink: 0;
+	margin: 0 0 0 .5rem;
+	color: var(--shadow);
+	font-size: .9rem;
+}
+
+.header-actions {
+	display: flex;
+	align-items: stretch;
+}
+
+.stash-public {
+	display: inline-flex;
+	align-items: center;
+	padding: .5rem;
+	cursor: pointer;
+
+	.icon {
+		fill: var(--shadow-strong);
+		margin: 0 .5rem 0 0;
+	}
+}
+
+.stash-remove {
+	height: auto;
+	padding: 0 .5rem 0 .75rem;
+	fill: var(--shadow);
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--shadow-strong);
+	}
+}
+
+.stash-actors,
+.stash-scenes {
+	display: flex;
+	overflow-x: auto;
+    grid-gap: .5rem;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+	}
+}
+
+.stash-scenes {
+	height: 8rem;
+}
+
+.stash-actor,
+.stash-scene {
+	height: 100%;
+	flex-shrink: 0;
+	font-size: 0;
+
+	&:last-child {
+		padding: 0 .5rem 0 0;
+	}
+}
+
+</style>

assets/components/users/user.vue

@@ -0,0 +1,250 @@
+<template>
+	<div
+		v-if="user"
+		class="user"
+	>
+		<div class="header">
+			<h2 class="username">{{ user.username }}</h2>
+		</div>
+
+		<section
+			v-if="user.stashes?.length > 0"
+			class="section"
+		>
+			<div class="section-header">
+				<h3 class="section-heading">Stashes</h3>
+
+				<Icon
+					icon="plus3"
+					class="header-add"
+					@click="showAddStash = true"
+				/>
+			</div>
+
+			<ul class="section-body stashes nolist">
+				<li
+					v-for="stash in user.stashes"
+					:key="stash.id"
+					class="stashes-stash"
+				>
+					<Stash
+						:stash="stash"
+						:is-me="isMe"
+						@publish="() => fetchUser()"
+						@remove="() => fetchUser()"
+					/>
+				</li>
+
+				<li
+					v-if="isMe"
+					class="stashes-stash stashes-add"
+					@click="showAddStash = true"
+				>
+					<Icon icon="plus2" />
+				</li>
+			</ul>
+
+			<AddStash
+				v-if="showAddStash"
+				@close="closeAddStash"
+			/>
+		</section>
+
+		<section class="section">
+			<div class="section-header">
+				<h3 class="section-heading">Alerts</h3>
+
+				<Icon
+					icon="plus3"
+					class="header-add"
+					@click="showAddAlert = true"
+				/>
+			</div>
+
+			<ul class="section-body alerts nolist">
+				<li
+					v-for="alert in user.alerts"
+					:key="`alert-${alert.id}`"
+					class="alert"
+				>
+					<Alert
+						:alert="alert"
+						:is-me="isMe"
+						@remove="() => fetchUser()"
+					/>
+				</li>
+
+				<li
+					class="alerts-add"
+					@click="showAddAlert = true"
+				>
+					<Icon icon="plus2" />
+				</li>
+			</ul>
+
+			<AddAlert
+				v-if="showAddAlert"
+				@close="closeAddAlert"
+			>Alert</AddAlert>
+		</section>
+	</div>
+</template>
+
+<script>
+import Stash from './stash.vue';
+import Alert from './alert.vue';
+import AddStash from '../stashes/add.vue';
+import AddAlert from '../alerts/add.vue';
+
+async function fetchUser() {
+	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
+	this.isMe = this.user?.id === this.$store.state.auth.user?.id;
+
+	this.pageTitle = this.user?.username;
+}
+
+async function closeAddStash(addedStash) {
+	this.showAddStash = false;
+
+	if (addedStash) {
+		await this.fetchUser();
+	}
+}
+
+async function closeAddAlert(addedAlert) {
+	this.showAddAlert = false;
+
+	if (addedAlert) {
+		await this.fetchUser();
+	}
+}
+
+async function mounted() {
+	await this.fetchUser();
+}
+
+export default {
+	components: {
+		AddAlert,
+		AddStash,
+		Alert,
+		Stash,
+	},
+	data() {
+		return {
+			user: this.$route.params.username === this.$store.state.auth.user?.username
+				? this.$store.state.auth.user
+				: null,
+			isMe: false,
+			pageTitle: null,
+			showAddStash: false,
+			showAddAlert: false,
+		};
+	},
+	mounted,
+	methods: {
+		closeAddAlert,
+		closeAddStash,
+		fetchUser,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	background: var(--profile);
+}
+
+.username {
+	padding: .5rem 1rem;
+	margin: 0;
+	font-size: 1.5rem;
+	color: var(--text-light);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.section {
+	padding: 1rem 0;
+	margin: 0 0 1rem 0;
+}
+
+.stashes,
+.alerts {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-auto-rows: 15fr;
+	grid-gap: 1rem;
+}
+
+.section-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 0 0 1rem 0;
+}
+
+.section-body {
+	padding: 0 1rem;
+}
+
+.section-heading {
+	color: var(--primary);
+	padding: 0 1rem;
+	margin: 0;
+	font-size: 1.25rem;
+}
+
+.header-add {
+	height: auto;
+	padding: .5rem 1rem;
+	fill: var(--shadow);
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
+	}
+}
+
+.stashes-stash {
+	min-width: 0;
+}
+
+.stashes-add,
+.alerts-add {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	padding: 1rem;
+	background: var(--shadow-touch);
+
+	.icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		fill: var(--shadow-hint);
+	}
+
+	&:hover {
+		background: var(--shadow-hint);
+		cursor: pointer;
+
+		.icon {
+			fill: var(--shadow-weak);
+		}
+	}
+}
+
+@media(max-width: $breakpoint-kilo) {
+	.stashes,
+	.alerts {
+		grid-template-columns: 1fr;
+	}
+}
+</style>

assets/components/video/player.vue

@@ -0,0 +1,143 @@
+<template>
+	<video
+		ref="player"
+		:poster="poster"
+		crossorigin="anonymous"
+		class="player video-js vjs-big-play-centered"
+		@playing="$emit('play')"
+		@pause="$emit('pause')"
+	/>
+</template>
+
+<script>
+import videoJs from 'video.js';
+import 'videojs-vr/dist/videojs-vr.min';
+
+function updatePlayer() {
+	this.player.src(this.getPath(this.video));
+	this.player.poster(this.poster);
+}
+
+function initPlayer() {
+	this.player = videoJs(this.$refs.player, {
+		controls: true,
+		inactivityTimeout: 1000,
+		controlBar: {
+			pictureInPictureToggle: false,
+			volumePanel: {
+				inline: false,
+			},
+		},
+	}, () => {
+		this.player.src(this.getPath(this.video));
+
+		if (this.video.isVr) {
+			this.player.vr({ projection: '180' });
+		}
+	});
+}
+
+export default {
+	props: {
+		video: {
+			type: Object,
+			default: null,
+		},
+		poster: {
+			type: String,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			player: null,
+		};
+	},
+	emits: ['play', 'pause'],
+	watch: {
+		video: updatePlayer,
+		poster: updatePlayer,
+	},
+	mounted: initPlayer,
+};
+</script>
+
+<style lang="scss">
+.player.video-js {
+	.vjs-poster {
+		background-size: cover;
+	}
+
+	.vjs-control-bar {
+		background-color: var(--darken);
+	}
+
+	.vjs-slider {
+		background-color: var(--darken-weak);
+	}
+
+	.vjs-play-progress {
+		background-color: var(--primary);
+
+		.vjs-time-tooltip {
+			color: var(--darken-strong);
+		}
+	}
+
+	.vjs-load-progress {
+		background-color: var(--lighten-weak);
+
+		div {
+			background-color: var(--darken-weak);
+		}
+	}
+
+	.vjs-mouse-display .vjs-time-tooltip {
+		background-color: var(--darken-strong);
+	}
+
+	.vjs-remaining-time {
+		line-height: 2rem;
+		font-size: .75rem;
+		font-weight: bold;
+	}
+
+	.vjs-big-play-button {
+		background-color: var(--darken);
+		width: 4rem;
+		height: 4rem;
+		margin: -2rem 0 0 -2rem;
+		border: none;
+		border-radius: 50%;
+
+		.vjs-icon-placeholder {
+			font-size: 2.5rem;
+			line-height: 4rem;
+		}
+
+		&:hover {
+			background-color: var(--primary);
+		}
+	}
+
+	.vjs-control:focus::before,
+	.vjs-control:hover::before,
+	.vjs-control:focus {
+		text-shadow: 0 0 .5rem var(--lighten-strong);
+	}
+
+	.vjs-error-display {
+		overflow: hidden;
+	}
+
+	.vjs-modal-dialog-content {
+		white-space: normal;
+	}
+
+	&:hover {
+		.vjs-big-play-button {
+			background-color: var(--primary);
+		}
+	}
+}
+</style>

assets/css/_breakpoints.scss

@@ -1,4 +1,6 @@
+$breakpoint-pico: 270px;
 $breakpoint-nano: 320px;
+$breakpoint-mini: 400px;
 $breakpoint-micro: 540px;
 $breakpoint-small: 620px;
 $breakpoint: 720px;

assets/css/_forms.scss

@@ -0,0 +1,5 @@
+.form-heading {
+	margin: 0 0 .5rem 0;
+	font-size: 1rem;
+	font-weight: bold;
+}

assets/css/_inputs.scss

@@ -1,3 +1,21 @@
+.input {
+	box-sizing: border-box;
+	padding: .5rem;
+	border: solid 1px var(--shadow-hint);
+	color: var(--shadow-strong);
+	background: var(--background);
+	font-size: 1rem;
+	font-family: inherit;
+
+	&:focus {
+		border: solid 1px var(--primary);
+	}
+
+	&::-webkit-calendar-picker-indicator {
+		opacity: .5;
+	}
+}
+
 .select {
     color: var(--shadow-strong);
     background: var(--background);
@@ -6,3 +24,62 @@
     border: solid 1px var(--shadow-weak);
     cursor: pointer;
 }
+
+.button {
+	border: none;
+	background: none;
+	padding: .5rem;
+	font-size: .9rem;
+	font-weight: bold;
+
+	&:hover {
+		cursor: pointer;
+	}
+}
+
+.button-primary {
+	color: var(--text-light);
+	background: var(--primary);
+
+	&:hover {
+		background: var(--primary-strong);
+	}
+
+	&:disabled {
+		background: var(--shadow-weak);
+		cursor: default;
+	}
+}
+
+.button-secondary {
+	color: var(--primary);
+
+	&:hover {
+		color: var(--highlight-strong);
+		background: var(--primary);
+	}
+}
+
+.album-toggle {
+	height: fit-content;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: .5rem 1rem;
+	border: none;
+	border-bottom: solid 1px var(--shadow-hint);
+	color: var(--shadow);
+	background: var(--background-dim);
+	font-size: 1rem;
+	font-weight: bold;
+
+	.icon {
+		fill: var(--shadow);
+		margin: -.1rem .5rem 0 0;
+	}
+
+	&:hover {
+		background: var(--shadow-hint);
+		cursor: pointer;
+	}
+}

assets/css/_theme.scss

@@ -5,57 +5,90 @@ $breakpoint3: 1200px;
 $breakpoint4: 1500px;
 
 :root {
-	/* --primary: #ff886c; */
+    --primary: #f65596;
+    --primary-strong: #f90071;
+    --primary-faded: #ffcce4;
+
+	/*
+    --primary: #f04288;
+
     --primary: #ff6c88;
+    --primary-strong: #ff4166;
+    --primary-faded: #ffdfee;
+
+    --primary: #f28;
+    --primary-strong: #f90071;
+    --primary-faded: #ffcce4;
+	*/
 
     --text-dark: #222;
     --text-light: #fff;
 
+    --background-light: #fff;
+    --background-dark: #222;
+
     --darken: rgba(0, 0, 0, .5);
-    --darken-strong: rgba(0, 0, 0, .7);
+    --darken-censor: rgba(0, 0, 0, .95);
     --darken-extreme: rgba(0, 0, 0, .9);
+    --darken-strong: rgba(0, 0, 0, .7);
     --darken-weak: rgba(0, 0, 0, .2);
     --darken-hint: rgba(0, 0, 0, .1);
+    --darken-touch: rgba(0, 0, 0, .05);
 
-    --lighten: rgba(255, 255, 255, .5);
-    --lighten-strong: rgba(255, 255, 255, .7);
+    --lighten-censor: rgba(255, 255, 255, .95);
     --lighten-extreme: rgba(255, 255, 255, .9);
+    --lighten-strong: rgba(255, 255, 255, .7);
+    --lighten: rgba(255, 255, 255, .5);
     --lighten-weak: rgba(255, 255, 255, .2);
     --lighten-hint: rgba(255, 255, 255, .05);
+    --lighten-touch: rgba(255, 255, 255, .03);
 
     --logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
     --logo-highlight: drop-shadow(0 0 1px $highlight);
 
+    --info: #321b24;
+
     --male: #0af;
     --female: #f0a;
 
     --alert: #f00;
+    --error: #f00;
     --warn: #fa0;
     --success: #5c2;
+
+	--enabled: #5c2;
+	--enabled-background: rgba(0, 255, 0, .1);
+	--disabled: #c20;
+	--disabled-background: rgba(255, 0, 0, .1);
+	--disabled-handle: #aaa;
 }
 
 .light {
     --text: #222;
     --text-contrast: #fff;
 
-    --background: #fff;
-    --background-dim: #fafafa;
+    --background: var(--background-light);
+    --background-censor: rgba(255, 255, 255, .95);
+    --background-dim: #f5f5f5;
     --background-soft: #fdfdfd;
 
     --profile: #222;
     --tile: #2a2a2a;
 
     --link: #dd6688;
+    --link-external: #48f;
     --empty: #333;
 
 	--crease: #eaeaea;
 
     --shadow: rgba(0, 0, 0, .5);
+    --shadow-censor: rgba(0, 0, 0, .95);
     --shadow-extreme: rgba(0, 0, 0, .9);
     --shadow-strong: rgba(0, 0, 0, .7);
     --shadow-modest: rgba(0, 0, 0, .3);
     --shadow-weak: rgba(0, 0, 0, .2);
     --shadow-hint: rgba(0, 0, 0, .1);
+    --shadow-touch: rgba(0, 0, 0, .05);
 
     --highlight: rgba(255, 255, 255, .5);
     --highlight-extreme: rgba(255, 255, 255, .9);
@@ -69,11 +102,12 @@ $breakpoint4: 1500px;
     --text: #fff;
     --text-contrast: #222;
 
-    --background: #222;
-    --background-dim: #181818;
-    --background-soft: #111;
+    --background: #181818;
+    --background-censor: rgba(0, 0, 0, .95);
+    --background-dim: #111;
+    --background-soft: #000;
 
-    --profile: #222;
+    --profile: #0a0a0a;
     --tile: #2a2a2a;
 
     --link: #dd6688;
@@ -87,6 +121,7 @@ $breakpoint4: 1500px;
     --shadow-modest: rgba(255, 255, 255, .3);
     --shadow-weak: rgba(255, 255, 255, .2);
     --shadow-hint: rgba(255, 255, 255, .075);
+    --shadow-touch: rgba(255, 255, 255, .05);
 
     --highlight: rgba(0, 0, 0, .5);
     --highlight-extreme: rgba(0, 0, 0, .9);

assets/css/style.scss

@@ -1,6 +1,8 @@
 @import 'theme';
+@import 'forms';
 @import 'inputs';
 @import 'states';
+@import 'video';
 @import 'tooltip';
 
 html,
@@ -11,6 +13,11 @@ body {
 body {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
+	overflow: hidden;
+}
+
+#container {
+	height: 100%;
 }
 
 .nolist {
@@ -37,3 +44,12 @@ body {
         fill: var(--primary);
     }
 }
+
+.link {
+	color: var(--link);
+	text-decoration: none;
+}
+
+.link-external {
+	color: var(--link-external);
+}

assets/img/favicon/2021-03/favicon.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="26.528891mm"
+   height="26.528891mm"
+   viewBox="0 0 26.528891 26.528891"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="-25.862887"
+     inkscape:cy="46.089189"
+     inkscape:document-units="mm"
+     inkscape:current-layer="text835"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1024"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-41.157469,-57.836902)">
+    <g
+       aria-label="t"
+       id="text835"
+       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:35.2778px;line-height:1.25;font-family:Orbitron;-inkscape-font-specification:'Orbitron Heavy';fill:#ff2280;fill-opacity:1;stroke:none;stroke-width:0.264583">
+      <path
+         d="m 53.328303,69.30218 v 9.666111 h 7.584722 v 5.3975 h -7.831667 q -1.058333,0 -2.010833,-0.388055 -0.9525,-0.423334 -1.658056,-1.128889 -0.670277,-0.705556 -1.093611,-1.622778 -0.388055,-0.917222 -0.388055,-1.975556 V 57.836902 h 5.3975 v 6.067778 h 7.584722 v 5.3975 z"
+         style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:35.2778px;font-family:Orbitron;-inkscape-font-specification:'Orbitron Heavy';fill:#ff2280;fill-opacity:1;stroke-width:0.264583"
+         id="path858" />
+    </g>
+  </g>
+</svg>

assets/img/icons/accessibility.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>accessibility</title>
+<path d="M6.5 1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5z"></path>
+<path d="M10 5l5.15-2.221-0.371-0.929-6.279 2.15h-1l-6.279-2.15-0.371 0.929 5.15 2.221v4l-2.051 6.634 0.935 0.355 2.902-6.489h0.429l2.902 6.489 0.935-0.355-2.051-6.634z"></path>
+</svg>

assets/img/icons/accessibility2.svg

@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>accessibility2</title>
+<path d="M16 10.985l-1.545 1.030-2.955-4.015h-4.5v-1h4v-2h-4v-1l-2-0.5v6.5h5.5l3.268 4.357 3.119-2.079z"></path>
+<path d="M8 1.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
+<path d="M10.609 12.349c-0.903 1.3-2.407 2.151-4.109 2.151-2.761 0-5-2.239-5-5 0-1.937 1.101-3.616 2.711-4.446l-0.978-1.174c-1.933 1.126-3.233 3.221-3.233 5.62 0 3.59 2.91 6.5 6.5 6.5 2.096 0 3.96-0.992 5.148-2.532l-1.039-1.119z"></path>
+</svg>

assets/img/icons/alarm-add.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>alarm-add</title>
+<path d="M8 2c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zM8 14.625c-3.107 0-5.625-2.518-5.625-5.625s2.518-5.625 5.625-5.625c3.107 0 5.625 2.518 5.625 5.625s-2.518 5.625-5.625 5.625zM14.606 4.487c0.251-0.438 0.394-0.946 0.394-1.487 0-1.657-1.343-3-3-3-0.966 0-1.825 0.457-2.374 1.166 2.061 0.426 3.831 1.644 4.98 3.322v0zM6.374 1.166c-0.549-0.709-1.408-1.166-2.374-1.166-1.657 0-3 1.343-3 3 0 0.541 0.143 1.049 0.394 1.487 1.148-1.678 2.919-2.896 4.98-3.322z"></path>
+<path d="M11 8h-2v-2h-2v2h-2v2h2v2h2v-2h2z"></path>
+</svg>

assets/img/icons/alarm-cancel.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>alarm-cancel</title>
+<path d="M8 2c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zM8 14.625c-3.107 0-5.625-2.518-5.625-5.625s2.518-5.625 5.625-5.625c3.107 0 5.625 2.518 5.625 5.625s-2.518 5.625-5.625 5.625zM14.606 4.487c0.251-0.438 0.394-0.946 0.394-1.487 0-1.657-1.343-3-3-3-0.966 0-1.825 0.457-2.374 1.166 2.061 0.426 3.831 1.644 4.98 3.322v0zM6.374 1.166c-0.549-0.709-1.408-1.166-2.374-1.166-1.657 0-3 1.343-3 3 0 0.541 0.143 1.049 0.394 1.487 1.148-1.678 2.919-2.896 4.98-3.322z"></path>
+<path d="M11.457 11.043l-1.414 1.414-2.043-2.043-2.043 2.043-1.414-1.414 2.043-2.043-2.043-2.043 1.414-1.414 2.043 2.043 2.043-2.043 1.414 1.414-2.043 2.043 2.043 2.043z"></path>
+</svg>

assets/img/icons/alarm-check.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>alarm-check</title>
+<path d="M8 2c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zM8 14.625c-3.107 0-5.625-2.518-5.625-5.625s2.518-5.625 5.625-5.625c3.107 0 5.625 2.518 5.625 5.625s-2.518 5.625-5.625 5.625zM14.606 4.487c0.251-0.438 0.394-0.946 0.394-1.487 0-1.657-1.343-3-3-3-0.966 0-1.825 0.457-2.374 1.166 2.061 0.426 3.831 1.644 4.98 3.322v0zM6.374 1.166c-0.549-0.709-1.408-1.166-2.374-1.166-1.657 0-3 1.343-3 3 0 0.541 0.143 1.049 0.394 1.487 1.148-1.678 2.919-2.896 4.98-3.322z"></path>
+<path d="M11 6.5l-4 4-1.5-1.5-1 1 2.5 2.5 5-5z"></path>
+</svg>

assets/img/icons/alarm.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>alarm</title>
+<path d="M8 2c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zM8 14.625c-3.107 0-5.625-2.518-5.625-5.625s2.518-5.625 5.625-5.625c3.107 0 5.625 2.518 5.625 5.625s-2.518 5.625-5.625 5.625zM14.606 4.487c0.251-0.438 0.394-0.946 0.394-1.487 0-1.657-1.343-3-3-3-0.966 0-1.825 0.457-2.374 1.166 2.061 0.426 3.831 1.644 4.98 3.322v0zM6.374 1.166c-0.549-0.709-1.408-1.166-2.374-1.166-1.657 0-3 1.343-3 3 0 0.541 0.143 1.049 0.394 1.487 1.148-1.678 2.919-2.896 4.98-3.322z"></path>
+<path d="M8 9v-4h-1v5h4v-1z"></path>
+</svg>

assets/img/icons/bell-check.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>bell-check</title>
+<path d="M16 13c-1.657 0-3-1.343-3-3v-4.455c0-2.199-1.718-4.033-4-4.454v-1.091h-2v1.091c-2.282 0.421-4 2.255-4 4.454v4.455c0 1.657-1.343 3-3 3v1h6.712c-0.081 0.178-0.127 0.377-0.127 0.586 0 0.781 0.633 1.414 1.414 1.414s1.414-0.633 1.414-1.414c0-0.209-0.045-0.407-0.127-0.586h6.713v-1zM7 11.559l-2.42-3.201 0.747-0.747 1.674 1.205 3.83-3.392 0.778 0.778-4.608 5.358z"></path>
+</svg>

assets/img/icons/bell-cross.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>bell-cross</title>
+<path d="M16 13c-1.657 0-3-1.343-3-3v-4.455c0-2.199-1.718-4.033-4-4.454v-1.091h-2v1.091c-2.282 0.421-4 2.255-4 4.454v4.455c0 1.657-1.343 3-3 3v1h6.712c-0.081 0.178-0.127 0.377-0.127 0.586 0 0.781 0.633 1.414 1.414 1.414s1.414-0.633 1.414-1.414c0-0.209-0.045-0.407-0.127-0.586h6.713v-1zM11 9.5l-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2 2 2z"></path>
+</svg>

assets/img/icons/bell-minus.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>bell-minus</title>
+<path d="M16 13c-1.657 0-3-1.343-3-3v-4.455c0-2.199-1.718-4.033-4-4.454v-1.091h-2v1.091c-2.282 0.421-4 2.255-4 4.454v4.455c0 1.657-1.343 3-3 3v1h6.712c-0.081 0.178-0.127 0.377-0.127 0.586 0 0.781 0.633 1.414 1.414 1.414s1.414-0.633 1.414-1.414c0-0.209-0.045-0.407-0.127-0.586h6.713v-1zM11 9h-6v-2h6v2z"></path>
+</svg>

assets/img/icons/bell-plus.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>bell-plus</title>
+<path d="M16 13c-1.657 0-3-1.343-3-3v-4.455c0-2.199-1.718-4.033-4-4.454v-1.091h-2v1.091c-2.282 0.421-4 2.255-4 4.454v4.455c0 1.657-1.343 3-3 3v1h6.712c-0.081 0.178-0.127 0.377-0.127 0.586 0 0.781 0.633 1.414 1.414 1.414s1.414-0.633 1.414-1.414c0-0.209-0.045-0.407-0.127-0.586h6.713v-1zM11 9h-2v2h-2v-2h-2v-2h2v-2h2v2h2v2z"></path>
+</svg>

assets/img/icons/bell.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>bell</title>
+<path d="M16.023 12.5c0-4.5-4-3.5-4-7 0-0.29-0.028-0.538-0.079-0.749-0.263-1.766-1.44-3.183-2.965-3.615 0.014-0.062 0.021-0.125 0.021-0.191 0-0.52-0.45-0.945-1-0.945s-1 0.425-1 0.945c0 0.065 0.007 0.129 0.021 0.191-1.71 0.484-2.983 2.208-3.020 4.273-0.001 0.030-0.001 0.060-0.001 0.091 0 3.5-4 2.5-4 7 0 1.191 2.665 2.187 6.234 2.439 0.336 0.631 1.001 1.061 1.766 1.061s1.43-0.43 1.766-1.061c3.568-0.251 6.234-1.248 6.234-2.439 0-0.004-0-0.007-0-0.011l0.024 0.011zM12.91 13.345c-0.847 0.226-1.846 0.389-2.918 0.479-0.089-1.022-0.947-1.824-1.992-1.824s-1.903 0.802-1.992 1.824c-1.072-0.090-2.071-0.253-2.918-0.479-1.166-0.311-1.724-0.659-1.928-0.845 0.204-0.186 0.762-0.534 1.928-0.845 1.356-0.362 3.1-0.561 4.91-0.561s3.554 0.199 4.91 0.561c1.166 0.311 1.724 0.659 1.928 0.845-0.204 0.186-0.762 0.534-1.928 0.845z"></path>
+</svg>