Added alert dialog. Fixed image rotation EXIT data being discarded.

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>