Added unstash buttons to non-favorites stash items

assets/components/actors/tile.vue

@@ -60,19 +60,26 @@
 				></span>
 
 				<Icon
-					v-show="favorited"
+					v-show="(!stash || stash.primary) && favorited"
 					icon="heart7"
 					class="stash stashed"
 					@click.prevent.native="unstashActor"
 				/>
 
 				<Icon
-					v-show="favorited === false"
+					v-show="(!stash || stash.primary) && favorited === false"
 					icon="heart8"
 					class="stash unstashed"
 					@click.prevent.native="stashActor"
 				/>
 
+				<Icon
+					v-show="stash && !stash.primary"
+					icon="cross2"
+					class="stash unstash"
+					@click.prevent.native="unstashActor"
+				/>
+
 				<span
 					class="details"
 				>
@@ -145,12 +152,14 @@ async function stashActor() {
 }
 
 async function unstashActor() {
-	this.favorited = false;
+	if (!this.stash || this.stash.primary) {
+		this.favorited = false;
+	}
 
 	try {
 		await this.$store.dispatch('unstashActor', {
 			actorId: this.actor.id,
-			stashId: this.$store.getters.favorites.id,
+			stashId: this.stash?.id || this.$store.getters.favorites.id,
 		});
 
 		this.$emit('stash', false);
@@ -176,6 +185,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
 	},
 	emits: ['stash'],
 	data() {
@@ -209,6 +222,11 @@ export default {
         display: inline-block;
         padding-bottom: 150%;
     }
+
+	&:hover .unstashed,
+	&:hover .unstash {
+		fill: var(--lighten);
+	}
 }
 
 .link {
@@ -307,10 +325,15 @@ export default {
 	fill: var(--lighten-weak);
 	filter: drop-shadow(0 0 2px var(--darken));
 
-	&:hover,
+	&:hover.unstashed,
 	&.stashed {
 		fill: var(--primary);
 	}
+
+	&:hover.unstash {
+		fill: var(--text-light);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
 }
 
 .details {

assets/components/releases/movie-tile.vue

@@ -15,18 +15,25 @@
 				>
 
 				<Icon
-					v-show="favorited"
+					v-show="(!stash || stash.primary) && favorited"
 					icon="heart7"
 					class="stash stashed"
 					@click.prevent.native="unstashMovie"
 				/>
 
 				<Icon
-					v-show="favorited === false"
+					v-show="(!stash || stash.primary) && favorited === false"
 					icon="heart8"
 					class="stash unstashed"
 					@click.prevent.native="stashMovie"
 				/>
+
+				<Icon
+					v-show="stash && !stash.primary"
+					icon="cross2"
+					class="stash unstash"
+					@click.prevent.native="unstashMovie"
+				/>
 			</RouterLink>
 
 			<div class="info">
@@ -88,12 +95,14 @@ async function stashMovie() {
 }
 
 async function unstashMovie() {
-	this.favorited = false;
+	if (!this.stash || this.stash.primary) {
+		this.favorited = false;
+	}
 
 	try {
 		await this.$store.dispatch('unstashMovie', {
 			movieId: this.movie.id,
-			stashId: this.$store.getters.favorites.id,
+			stashId: this.stash?.id || this.$store.getters.favorites.id,
 		});
 
 		this.$emit('stash', false);
@@ -115,6 +124,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -141,7 +154,8 @@ export default {
 	box-shadow: 0 0 3px var(--darken-weak);
 	font-size: 0;
 
-	&:hover .unstashed {
+	&:hover .unstashed,
+	&:hover .unstash {
 		fill: var(--lighten);
 	}
 }
@@ -251,6 +265,11 @@ export default {
 	&.stashed {
 		fill: var(--primary);
 	}
+
+	&:hover.unstash {
+		fill: var(--text-light);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
 }
 
 @media(max-width: $breakpoint-kilo) {

assets/components/releases/releases.vue

@@ -18,6 +18,7 @@
 					:release="release"
 					:referer="referer"
 					:index="index"
+					:stash="stash"
 					@stash="isStashed => $emit('stash', isStashed)"
 				/>
 			</li>
@@ -63,6 +64,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
 	},
 	emits: ['stash'],
 	computed: {

assets/components/releases/scene-tile.vue

@@ -46,18 +46,25 @@
 					><Icon icon="blocked" />No thumbnail available</div>
 
 					<Icon
-						v-show="favorited"
+						v-show="(!stash || stash.primary) && favorited"
 						icon="heart7"
 						class="stash stashed"
 						@click.prevent.native="unstashScene"
 					/>
 
 					<Icon
-						v-show="favorited === false"
+						v-show="(!stash || stash.primary) && favorited === false"
 						icon="heart8"
 						class="stash unstashed"
 						@click.prevent.native="stashScene"
 					/>
+
+					<Icon
+						v-show="stash && !stash.primary"
+						icon="cross2"
+						class="stash unstash"
+						@click.prevent.native="unstashScene"
+					/>
 				</a>
 			</span>
 
@@ -169,12 +176,14 @@ async function stashScene() {
 }
 
 async function unstashScene() {
-	this.favorited = false;
+	if (!this.stash || this.stash.primary) {
+		this.favorited = false;
+	}
 
 	try {
 		await this.$store.dispatch('unstashScene', {
 			sceneId: this.release.id,
-			stashId: this.$store.getters.favorites.id,
+			stashId: this.stash?.id || this.$store.getters.favorites.id,
 		});
 
 		this.$emit('stash', false);
@@ -192,6 +201,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
 	},
 	emits: ['stash'],
 	data() {
@@ -236,7 +249,8 @@ export default {
 		text-shadow: 0 0 2px var(--darken-weak);
 	}
 
-	&:hover .unstashed {
+	&:hover .unstashed,
+	&:hover .unstash {
 		fill: var(--lighten);
 	}
 }
@@ -295,6 +309,11 @@ export default {
 		fill: var(--primary);
 		filter: drop-shadow(0 0 2px var(--darken-weak));
 	}
+
+	&:hover.unstash {
+		fill: var(--text-light);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
 }
 
 .row {

assets/components/stashes/stash.vue

@@ -60,6 +60,7 @@
 			<Releases
 				v-if="$route.params.range === 'scenes' && stash.scenes?.length > 0"
 				:releases="stash.scenes.map(item => item.scene)"
+				:stash="stash"
 				class="stash-section stash-scenes"
 				@stash="fetchStash"
 			/>
@@ -71,7 +72,11 @@
 				<li
 					v-for="item in stash.actors"
 					:key="item.id"
-				><Actor :actor="item.actor" /></li>
+				><Actor
+					:actor="item.actor"
+					:stash="stash"
+					@stash="fetchStash"
+				/></li>
 			</ul>
 
 			<div
@@ -82,6 +87,7 @@
 					v-for="item in stash.movies"
 					:key="`movie-${item.id}`"
 					:movie="item.movie"
+					:stash="stash"
 					@stash="fetchStash"
 				/>
 			</div>
@@ -257,6 +263,7 @@ export default {
     display: grid;
     grid-gap: .5rem;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	grid-template-rows: min-content;
 	flex-grow: 1;
 	padding: 1rem;
 	border-top: solid 1px var(--shadow-hint);
@@ -272,10 +279,9 @@ export default {
 	border-top: solid 1px var(--shadow-hint);
 }
 
-.stash-scenes {
+.stash-scenes .tiles {
-	.tiles {
+	grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
-		grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+	grid-template-rows: min-content;
-	}
 }
 
 @media(max-width: $breakpoint-small) {