List alerts in profile

assets/components/alerts/add.vue

@@ -215,6 +215,8 @@ async function addAlert() {
 		email: this.email,
 		stashes: this.stashes.map(stash => stash.id),
 	});
+
+	this.$emit('close', true);
 }
 
 function addActor(actor) {

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/header/header.vue

@@ -150,7 +150,7 @@
 <script>
 import Menu from './menu.vue';
 import Search from './search.vue';
-import AddAlert from '../alerts/add-alert.vue';
+import AddAlert from '../alerts/add.vue';
 
 import logo from '../../img/logo.svg';
 

assets/components/stashes/add.vue

@@ -3,7 +3,10 @@
 		title="Add stash"
 		@close="$emit('close', false)"
 	>
-		<form @submit.prevent="addStash">
+		<form
+			class="dialog-body"
+			@submit.prevent="addStash"
+		>
 			<input
 				ref="name"
 				v-model="name"

assets/components/stashes/remove.vue

@@ -3,7 +3,10 @@
 		title="Remove stash"
 		@close="$emit('close', false)"
 	>
-		<form @submit.prevent="removeStash">
+		<form
+			class="dialog-body"
+			@submit.prevent="removeStash"
+		>
 			Are you sure you want to remove stash "{{ stash.name }}"?
 
 			<div class="dialog-actions right">

assets/components/stashes/stash.vue

@@ -78,7 +78,7 @@
 <script>
 import Actor from '../actors/tile.vue';
 import Releases from '../releases/releases.vue';
-import RemoveStash from './remove-stash.vue';
+import RemoveStash from './remove.vue';
 import Toggle from '../form/toggle.vue';
 
 async function fetchStash() {

assets/components/users/alert.vue

@@ -0,0 +1,249 @@
+<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 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

@@ -84,7 +84,7 @@
 <script>
 import ActorPreview from '../actors/preview.vue';
 import ScenePreview from '../releases/scene-preview.vue';
-import RemoveStash from '../stashes/remove-stash.vue';
+import RemoveStash from '../stashes/remove.vue';
 import Toggle from '../form/toggle.vue';
 
 async function publishStash(isPublic) {

assets/components/users/user.vue

@@ -43,18 +43,61 @@
 					<Icon icon="plus2" />
 				</li>
 			</ul>
+
+			<AddStash
+				v-if="showAddStash"
+				@close="closeAddStash"
+			/>
 		</section>
 
-		<AddStash
+		<section
-			v-if="showAddStash"
+			v-if="user.alerts?.length > 0"
-			@close="closeAddStash"
+			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 AddStash from '../stashes/add-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);
@@ -71,13 +114,23 @@ async function closeAddStash(addedStash) {
 	}
 }
 
+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() {
@@ -88,10 +141,12 @@ export default {
 			isMe: false,
 			pageTitle: null,
 			showAddStash: false,
+			showAddAlert: false,
 		};
 	},
 	mounted,
 	methods: {
+		closeAddAlert,
 		closeAddStash,
 		fetchUser,
 	},
@@ -122,7 +177,8 @@ export default {
 	margin: 0 0 1rem 0;
 }
 
-.stashes {
+.stashes,
+.alerts {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	grid-auto-rows: 15fr;
@@ -162,7 +218,8 @@ export default {
 	min-width: 0;
 }
 
-.stashes-add {
+.stashes-add,
+.alerts-add {
 	height: 100%;
 	display: flex;
 	align-items: center;
@@ -186,7 +243,8 @@ export default {
 }
 
 @media(max-width: $breakpoint-kilo) {
-	.stashes {
+	.stashes,
+	.alerts {
 		grid-template-columns: 1fr;
 	}
 }

assets/img/icons/envelop.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>envelop</title>
+<path d="M15 2h-14c-0.55 0-1 0.45-1 1v10c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-10c0-0.55-0.45-1-1-1zM5.831 9.773l-3 2.182c-0.1 0.073-0.216 0.108-0.33 0.108-0.174 0-0.345-0.080-0.455-0.232-0.183-0.251-0.127-0.603 0.124-0.786l3-2.182c0.251-0.183 0.603-0.127 0.786 0.124s0.127 0.603-0.124 0.786zM13.955 11.831c-0.11 0.151-0.282 0.232-0.455 0.232-0.115 0-0.23-0.035-0.33-0.108l-3-2.182c-0.251-0.183-0.307-0.534-0.124-0.786s0.535-0.307 0.786-0.124l3 2.182c0.251 0.183 0.307 0.535 0.124 0.786zM13.831 4.955l-5.5 4c-0.099 0.072-0.215 0.108-0.331 0.108s-0.232-0.036-0.331-0.108l-5.5-4c-0.251-0.183-0.307-0.534-0.124-0.786s0.535-0.307 0.786-0.124l5.169 3.759 5.169-3.759c0.251-0.183 0.603-0.127 0.786 0.124s0.127 0.603-0.124 0.786z"></path>
+</svg>

assets/img/icons/envelop2.svg

@@ -0,0 +1,8 @@
+<!-- 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>envelop2</title>
+<path d="M14.998 3c0.001 0.001 0.001 0.001 0.002 0.002v9.996c-0.001 0.001-0.001 0.001-0.002 0.002h-13.996c-0.001-0.001-0.001-0.001-0.002-0.002v-9.996c0.001-0.001 0.001-0.001 0.002-0.002h13.996zM15 2h-14c-0.55 0-1 0.45-1 1v10c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-10c0-0.55-0.45-1-1-1v0z"></path>
+<path d="M5.831 9.773l-3 2.182c-0.1 0.073-0.216 0.108-0.33 0.108-0.174 0-0.345-0.080-0.455-0.232-0.183-0.251-0.127-0.603 0.124-0.786l3-2.182c0.251-0.183 0.603-0.127 0.786 0.124s0.127 0.603-0.124 0.786z"></path>
+<path d="M13.955 11.831c-0.11 0.151-0.282 0.232-0.455 0.232-0.115 0-0.23-0.035-0.33-0.108l-3-2.182c-0.251-0.183-0.307-0.534-0.124-0.786s0.534-0.307 0.786-0.124l3 2.182c0.251 0.183 0.307 0.535 0.124 0.786z"></path>
+<path d="M13.831 4.955l-5.5 4c-0.099 0.072-0.215 0.108-0.331 0.108s-0.232-0.036-0.331-0.108l-5.5-4c-0.251-0.183-0.307-0.534-0.124-0.786s0.535-0.307 0.786-0.124l5.169 3.759 5.169-3.759c0.251-0.183 0.603-0.127 0.786 0.124s0.127 0.603-0.124 0.786v0z"></path>
+</svg>

assets/img/icons/envelop3.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>envelop3</title>
+<path d="M15 2h-14c-0.55 0-1 0.45-1 1v10c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-10c0-0.55-0.45-1-1-1zM14 4v0.719l-6 3.536-6-3.536v-0.719h12zM2 12v-5.54l6 3.536 6-3.536v5.54h-12z"></path>
+</svg>

assets/img/icons/envelop4.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>envelop4</title>
+<path d="M14.5 2h-13c-0.825 0-1.5 0.675-1.5 1.5v10c0 0.825 0.675 1.5 1.5 1.5h13c0.825 0 1.5-0.675 1.5-1.5v-10c0-0.825-0.675-1.5-1.5-1.5zM6.23 8.6l-4.23 3.295v-7.838l4.23 4.543zM2.756 4h10.488l-5.244 3.938-5.244-3.938zM6.395 8.777l1.605 1.723 1.605-1.723 3.29 4.223h-9.79l3.29-4.223zM9.77 8.6l4.23-4.543v7.838l-4.23-3.295z"></path>
+</svg>

assets/img/icons/envelop5.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>envelop5</title>
+<path d="M14.5 2h-13c-0.825 0-1.5 0.675-1.5 1.5v9c0 0.825 0.675 1.5 1.5 1.5h13c0.825 0 1.5-0.675 1.5-1.5v-9c0-0.825-0.675-1.5-1.5-1.5zM14 5l-6 4.5-6-4.5v-1l6 3 6-3v1z"></path>
+</svg>

assets/js/curate.js

@@ -152,6 +152,32 @@ function curateStash(stash) {
 	return curatedStash;
 }
 
+function curateAlert(alert) {
+	if (!alert) {
+		return null;
+	}
+
+	const curatedAlert = alert;
+
+	if (alert.actors) {
+		curatedAlert.actors = alert.actors.map(actor => curateActor(actor.actor || actor));
+	}
+
+	if (alert.tags) {
+		curatedAlert.tags = alert.tags.map(tag => curateTag(tag.tag || tag));
+	}
+
+	if (alert.entity) {
+		curatedAlert.entity = curateEntity(alert.entity.entity || alert.entity);
+	}
+
+	if (alert.stashes) {
+		curatedAlert.stashes = alert.stashes.map(stash => curateStash(stash.stash || stash));
+	}
+
+	return curatedAlert;
+}
+
 function curateUser(user) {
 	if (!user) {
 		return null;
@@ -163,6 +189,10 @@ function curateUser(user) {
 		curatedUser.stashes = user.stashes.map(stash => curateStash(stash.stash || stash));
 	}
 
+	if (user.alerts) {
+		curatedUser.alerts = user.alerts.map(alert => curateAlert(alert.alert || alert));
+	}
+
 	return curatedUser;
 }
 

assets/js/users/actions.js

@@ -59,6 +59,13 @@ function initUsersActions(store, _router) {
 						id
 						notify
 						email
+						stashes: alertsStashes {
+							stash {
+								id
+								name
+								slug
+							}
+						}
 						tags: alertsTags {
 							tag {
 								id
@@ -76,12 +83,16 @@ function initUsersActions(store, _router) {
 								id
 								name
 								slug
+								type
 								independent
+								hasLogo
 								parent {
 									id
 									name
 									slug
+									type
 									independent
+									hasLogo
 								}
 							}
 						}

src/web/server.js

@@ -104,7 +104,7 @@ async function initServer() {
 	router.delete('/api/stashes/:stashId/movies/:movieId', unstashMovie);
 
 	router.post('/api/alerts', addAlert);
-	router.delete('/api/alerts', removeAlert);
+	router.delete('/api/alerts/:alertId', removeAlert);
 
 	router.get('/api/scenes', fetchScenes);
 	router.get('/api/scenes/:releaseId', fetchScene);