Added e-mail alert settings, saveable but not integrated yet.

pages/users/@username/+Page.vue

@@ -6,9 +6,11 @@ import mockupRelease from '#/assets/mockup-release.ts';
 import Alerts from '#/components/alerts/alerts.vue';
 import Revisions from '#/components/edit/revisions.vue';
 import Summaries from '#/components/scenes/summaries.vue';
+// filters are implemented as generic settings panel in case we want to extend it in the future
+import Settings from '#/components/settings/settings.vue';
 import Stashes from '#/components/stashes/stashes.vue';
-
 import ApiKeys from '#/components/user/api-keys.vue';
+import Preferences from '#/components/user/preferences.vue';
 
 const pageContext = inject('pageContext');
 
@@ -18,6 +20,8 @@ const domain = pageContext.routeParams.domain;
 const user = pageContext.user;
 const profile = ref(pageContext.pageProps.profile);
 
+const showFilters = ref(false);
+
 function scrollHorizontal(event) {
 	event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
 }
@@ -31,8 +35,14 @@ function scrollHorizontal(event) {
 					:href="`/user/${profile.username}/`"
 					class="user nolink"
 				>
+					<Icon
+						v-if="section"
+						icon="arrow-left3"
+						class="profile-back"
+					/>
+
 					<img
-						v-if="profile.avatar"
+						v-else-if="profile.avatar"
 						:src="profile.avatar"
 						class="avatar"
 					>
@@ -40,7 +50,18 @@ function scrollHorizontal(event) {
 					<h2 class="username ellipsis">{{ profile.username }}</h2>
 				</a>
 
-				<span class="age">{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
+				<strong
+					v-if="section"
+					class="profile-crumb"
+				>
+					<template v-if="domain">{{ domain }}</template>
+					{{ section }}
+				</strong>
+
+				<span
+					v-else
+					class="age"
+				>{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
 			</div>
 
 			<nav
@@ -84,6 +105,19 @@ function scrollHorizontal(event) {
 					class="domain nolink"
 					:class="{ active: section === 'revisions' && domain === 'actors' }"
 				><Icon icon="profile" />Actor Revisions</a>
+
+				<span
+					:href="`/user/${profile.username}/preferences`"
+					class="domain nolink"
+					:class="{ active: section === 'filters' }"
+					@click="showFilters = true"
+				><Icon icon="filter" />Filters</span>
+
+				<a
+					:href="`/user/${profile.username}/preferences`"
+					class="domain nolink"
+					:class="{ active: section === 'preferences' }"
+				><Icon icon="equalizer" />Preferences</a>
 			</nav>
 
 			<Stashes v-if="section === 'stashes'" />
@@ -97,15 +131,23 @@ function scrollHorizontal(event) {
 			<ApiKeys
 				v-if="section === 'api'"
 			/>
+
+			<Preferences
+				v-if="section === 'preferences'"
+			/>
 		</div>
 
 		<div
 			v-if="section === 'revisions' && profile.id === user?.id"
 			class="profile-section revisions"
 		>
-			<h3 class="section-header heading">{{ domain.slice(0, -1) }} Revisions</h3>
 			<Revisions context="user" />
 		</div>
+
+		<Settings
+			v-if="showFilters"
+			@close="showFilters = false"
+		/>
 	</div>
 </template>
 
@@ -169,6 +211,10 @@ function scrollHorizontal(event) {
 .user {
 	display: flex;
 	overflow: hidden;
+
+	&:hover .profile-back {
+		fill: var(--primary);
+	}
 }
 
 .username {
@@ -196,6 +242,16 @@ function scrollHorizontal(event) {
 	margin-right: 1rem;
 }
 
+.profile-back {
+	padding: .25rem 1.25rem .25rem .25rem;
+	fill: var(--highlight);
+	transform: translateY(-1px);
+}
+
+.profile-crumb {
+	text-transform: capitalize;
+}
+
 .domains {
 	width: 100%;
 	display: grid;
@@ -228,6 +284,7 @@ function scrollHorizontal(event) {
 	&:hover {
 		background: var(--primary);
 		color: var(--text-light);
+		cursor: pointer;
 
 		.icon {
 			fill: var(--text-light);
@@ -249,6 +306,7 @@ function scrollHorizontal(event) {
 @media(--compact) {
 	.domains {
 		padding: .5rem 1rem;
+		grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 	}
 
 	.profile {
@@ -260,6 +318,12 @@ function scrollHorizontal(event) {
 	}
 }
 
+@media(--small) {
+	.domains {
+		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+	}
+}
+
 @media(--small-20) {
 	.profile-header {
 		padding: .5rem;