traxxx/assets/components/stashes/button.vue

<template>
	<span class="stash-container">
		<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>
@import 'breakpoints';

.stash-container {
	flex-shrink: 0;

	&.light .icon {
		fill: var(--lighten);
	}
}

.stash.icon {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0 .5rem;
	fill: var(--shadow);

	&.stashed {
		fill: var(--primary);
	}

	&:hover {
		fill: var(--primary);
		cursor: pointer;
	}
}

.stash-trigger {
	display: inline-block;
}

@media(max-width: $breakpoint) {
	.stash.icon {
		width: 1.25rem;
		height: 1.25rem;
	}
}
</style>