Added quick alert button to actor bio.

components/stashes/heart.vue

@@ -3,6 +3,34 @@
 		v-if="user"
 		class="bookmarks"
 	>
+		<div
+			v-if="showSecondary && !!itemAlerts"
+		>
+			<Icon
+				v-if="itemAlerted"
+				icon="bell2"
+				:title="`Remove alerts for '${item.title || item.name}'`"
+				class="alert active noselect"
+				@click="removeAlert"
+			/>
+
+			<Icon
+				v-else-if="itemAlerts.multi.length > 0"
+				icon="bell-plus"
+				:title="`Set alert for '${item.title || item.name}', ${itemAlerts.multi.length} combined alert${itemAlerts.multi.length > 1 ? 's' : ''} active`"
+				class="alert partial noselect"
+				@click="alertItem"
+			/>
+
+			<Icon
+				v-else
+				icon="bell-plus"
+				:title="`Set alert for '${item.title || item.name}' releases`"
+				class="alert noselect"
+				@click="alertItem"
+			/>
+		</div>
+
 		<VDropdown
 			v-if="showSecondary || (hasSecondaryStash && pageStash?.user.id !== user.id)"
 			:shown="showStashes"
@@ -119,11 +147,19 @@ const pageContext = inject('pageContext');
 const pageStash = pageContext.pageProps.stash;
 const user = pageContext.user;
 
+console.log(props.item, props.item.alerts);
+
 const stashes = ref(pageContext.assets?.stashes);
 const primaryStash = pageContext.assets?.primaryStash;
 const itemStashes = ref(props.item.stashes);
+const itemAlerts = ref(props.item.alerts);
+const itemAlerted = ref(props.item.alerts?.only.length > 0);
 const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !itemStash.isPrimary));
 
+if (props.domain === 'actors') {
+	console.log(itemAlerts.value);
+}
+
 const done = ref(true);
 const showStashes = ref(false);
 const showStashDialog = ref(false);
@@ -154,9 +190,9 @@ async function stashItem(stash) {
 		emit('stashed', stash);
 	} catch (error) {
 		itemStashes.value = stashState;
+	} finally {
+		done.value = true;
 	}
-
-	done.value = true;
 }
 
 async function unstashItem(stash) {
@@ -178,9 +214,68 @@ async function unstashItem(stash) {
 		emit('unstashed', stash);
 	} catch (error) {
 		itemStashes.value = stashState;
+	} finally {
+		done.value = true;
+	}
+}
+
+async function alertItem() {
+	if (!done.value) {
+		return;
 	}
 
-	done.value = true;
+	const alertLabel = props.item.title || props.item.name;
+
+	done.value = false;
+	itemAlerted.value = true;
+
+	try {
+		const newAlert = await post('/alerts', {
+			...(props.domain === 'actors' && { actors: [props.item.id] }),
+			...(props.domain === 'tags' && { tags: [props.item.id] }),
+			...(props.domain === 'entities' && { entities: [props.item.id] }),
+			notify: true,
+			email: false,
+			preset: true,
+		}, {
+			successFeedback: `Alert set for '${alertLabel}'`,
+			errorFeedback: `Failed to set alert for '${alertLabel}'`,
+			appendErrorMessage: true,
+		});
+
+		itemAlerts.value.only = itemAlerts.value.only.concat(newAlert.id);
+	} catch (error) {
+		itemAlerted.value = false;
+	} finally {
+		done.value = true;
+	}
+}
+
+async function removeAlert() {
+	if (done.value === false) {
+		return;
+	}
+
+	const alertLabel = props.item.title || props.item.name;
+	const alertIds = itemAlerts.value.only;
+
+	done.value = false;
+
+	itemAlerted.value = false;
+	itemAlerts.value.only = itemAlerts.value.only.filter((alertId) => !alertIds.includes(alertId));
+
+	try {
+		await del(`/alerts/${alertIds.join(',')}`, {
+			undoFeedback: `Removed alert for '${alertLabel}'`,
+			errorFeedback: `Failed to remove alert for '${alertLabel}'`,
+			appendErrorMessage: true,
+		});
+	} catch (error) {
+		itemAlerted.value = true;
+		itemAlerts.value.only = itemAlerts.value.only.concat(alertIds);
+	} finally {
+		done.value = true;
+	}
 }
 
 function toggleShowStashes(state) {
@@ -229,10 +324,22 @@ async function reloadStashes(newStash) {
 		}
 	}
 
+	.icon.alert {
+		width: 1.3rem;
+		padding: .7rem .5rem;
+	}
+
 	.icon.heart:hover,
-	.icon.heart.favorited {
+	.icon.alert:hover,
+	.icon.heart.favorited,
+	.icon.alert.active {
 		cursor: pointer;
 		fill: var(--primary);
 	}
+
+	.icon.alert.partial {
+		cursor: pointer;
+		fill: var(--text-light);
+	}
 }
 </style>