Separated full heart button into component.

assets/components/stashes/button.vue

@@ -0,0 +1,95 @@
+<template>
+	<span>
+		<Tooltip class="stash-trigger">
+			<Icon
+				v-show="me"
+				icon="menu"
+				class="stash noselect"
+				:class="{ stashed }"
+			/>
+
+			<template v-slot:tooltip>
+				<StashMenu
+					:stashed-by="stashedBy"
+					@stash="(stashId) => $emit('stash', stashId)"
+					@unstash="(stashId) => $emit('unstash', stashId)"
+				/>
+			</template>
+		</Tooltip>
+
+		<Icon
+			v-show="me && favorited"
+			icon="heart7"
+			class="stash stashed noselect"
+			@click.native="() => $emit('unstash', favorites.id)"
+		/>
+
+		<Icon
+			v-show="me && !favorited"
+			icon="heart8"
+			class="stash unstashed noselect"
+			@click.native="() => $emit('stash', favorites.id)"
+		/>
+	</span>
+</template>
+
+<script>
+import StashMenu from './menu.vue';
+
+function favorited() {
+	return this.stashedBy.some(stash => stash.primary);
+}
+
+function stashed() {
+	return this.stashedBy.some(stash => !stash.primary);
+}
+
+function favorites() {
+	return this.$store.getters.favorites;
+}
+
+function me() {
+	return this.$store.state.auth.user;
+}
+
+export default {
+	components: {
+		StashMenu,
+	},
+	props: {
+		stashedBy: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['stash', 'unstash'],
+	computed: {
+		me,
+		favorites,
+		favorited,
+		stashed,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.stash.icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: 0 .75rem;
+	fill: var(--shadow);
+
+	&.stashed {
+		fill: var(--primary);
+	}
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
+	}
+}
+
+.stash-trigger {
+	display: inline-block;
+}
+</style>

assets/components/stashes/menu.vue

@@ -9,7 +9,7 @@
 				<Checkbox
 					:checked="stashedByIds.has(stash.id)"
 					class="menu-check"
-					@change="(checked) => checked ? $emit('stash', stash) : $emit('unstash', stash)"
+					@change="(checked) => checked ? $emit('stash', stash.id) : $emit('unstash', stash.id)"
 				/>{{ stash.name }}
 			</label>
 		</li>
@@ -28,10 +28,6 @@ export default {
 		Checkbox,
 	},
 	props: {
-		item: {
-			type: Object,
-			default: null,
-		},
 		stashedBy: {
 			type: Array,
 			default: () => [],