Added alert dialog context trigger to quick alert bell.

components/alerts/create.vue

@@ -386,19 +386,34 @@ import Checkbox from '#/components/form/checkbox.vue';
 
 const { assets } = inject('pageContext');
 
-const emit = defineEmits(['close']);
+const props = defineProps({
+	presetActors: {
+		type: Array,
+		default: () => [],
+	},
+	presetEntities: {
+		type: Array,
+		default: () => [],
+	},
+	presetTags: {
+		type: Array,
+		default: () => [],
+	},
+});
 
-const actors = ref([]);
+const emit = defineEmits(['alert', 'close']);
+
+const actors = ref(props.presetActors);
 const actorResults = ref([]);
 const actorInput = ref(null);
 const actorQuery = ref('');
 
-const entities = ref([]);
+const entities = ref(props.presetEntities);
 const entityResults = ref([]);
 const entityInput = ref(null);
 const entityQuery = ref('');
 
-const tags = ref([]);
+const tags = ref(props.presetTags);
 const tagResults = ref([]);
 const tagInput = ref(null);
 const tagQuery = ref('');
@@ -425,7 +440,7 @@ async function createAlert() {
 		...matches.value.map((match) => match.expression),
 	].filter(Boolean).join(', ');
 
-	await post('/alerts', {
+	const newAlert = await post('/alerts', {
 		all: fieldsAnd.value,
 		allActors: actorAnd.value,
 		allTags: tagAnd.value,
@@ -443,6 +458,7 @@ async function createAlert() {
 		appendErrorMessage: true,
 	});
 
+	emit('alert', newAlert);
 	emit('close', true);
 }
 
@@ -475,7 +491,6 @@ async function searchTags() {
 
 function focusActorInput() {
 	setTimeout(() => {
-		console.log(actorInput.value);
 		actorInput.value.focus();
 	}, 100);
 }

components/stashes/heart.vue

@@ -12,6 +12,7 @@
 				:title="`Remove uncombined alerts for '${item.title || item.name}'`"
 				class="alert active noselect"
 				@click="removeAlert"
+				@contextmenu.prevent="showAlertDialog = true"
 			/>
 
 			<Icon
@@ -20,6 +21,7 @@
 				: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"
+				@contextmenu.prevent="showAlertDialog = true"
 			/>
 
 			<Icon
@@ -28,6 +30,7 @@
 				:title="`Set alert for '${item.title || item.name}' releases`"
 				class="alert noselect"
 				@click="alertItem"
+				@contextmenu.prevent="showAlertDialog = true"
 			/>
 		</div>
 
@@ -113,6 +116,13 @@
 			@created="(newStash) => { showStashDialog = false; reloadStashes(newStash); }"
 			@close="showStashDialog = false;"
 		/>
+
+		<AlertDialog
+			v-if="showAlertDialog"
+			v-bind="{ [`preset-${domain}`]: [item] }"
+			@close="showAlertDialog = false;"
+			@alert="(alert) => setAlerted(alert)"
+		/>
 	</div>
 </template>
 
@@ -125,6 +135,7 @@ import ellipsis from '#/utils/ellipsis.js';
 import Icon from '#/components/icon/icon.vue';
 import StashMenu from '#/components/stashes/menu.vue';
 import StashDialog from '#/components/stashes/create.vue';
+import AlertDialog from '#/components/alerts/create.vue';
 
 const props = defineProps({
 	domain: {
@@ -157,6 +168,7 @@ const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !
 const done = ref(true);
 const showStashes = ref(false);
 const showStashDialog = ref(false);
+const showAlertDialog = ref(false);
 const feedbackCutoff = 20;
 
 const itemKeys = {
@@ -272,6 +284,18 @@ async function removeAlert() {
 	}
 }
 
+function setAlerted(alert) {
+	// only set alerted status if the current item is the only one in the new stash
+	const items = [...alert.actors, ...alert.tags, ...alert.entities, ...alert.matches];
+
+	if (items.length === 1 && alert[props.domain][0]?.id === props.item.id) {
+		itemAlerted.value = true;
+		itemAlerts.value.only = itemAlerts.value.only.concat(alert.id);
+	} else {
+		itemAlerts.value.multi = itemAlerts.value.multi.concat(alert.id);
+	}
+}
+
 function toggleShowStashes(state) {
 	if (props.showSecondary) {
 		return;