Added quick alert buttons to entity and tag headers.

pages/entities/@entitySlug/+Page.vue

@@ -1,46 +1,54 @@
 <template>
 	<div class="page">
 		<div class="header">
-			<a
-				:href="entityUrl"
-				target="_blank"
-				rel="noopener"
-				class="link-child nolink"
-				:data-umami-event="entity.affiliate ? 'entity-click-aff' : 'entity-click'"
-				:data-umami-event-aff-id="entity.affiliate?.id"
-				:data-umami-event-entity="entity.slug"
-			>
-				<template v-if="entity.hasLogo">
-					<img
-						v-if="entity.type === 'network'"
-						class="logo logo-child"
-						:alt="entity.name"
-						:title="`${entity.name} (#${entity.id})`"
-						:src="`/logos/${entity.slug}/thumbs/network.png`"
-					>
+			<div class="entity-container">
+				<a
+					:href="entityUrl"
+					target="_blank"
+					rel="noopener"
+					class="link-child nolink"
+					:data-umami-event="entity.affiliate ? 'entity-click-aff' : 'entity-click'"
+					:data-umami-event-aff-id="entity.affiliate?.id"
+					:data-umami-event-entity="entity.slug"
+				>
+					<template v-if="entity.hasLogo">
+						<img
+							v-if="entity.type === 'network'"
+							class="logo logo-child"
+							:alt="entity.name"
+							:title="`${entity.name} (#${entity.id})`"
+							:src="`/logos/${entity.slug}/thumbs/network.png`"
+						>
 
-					<img
-						v-else-if="entity.parent && !entity.isIndependent"
-						class="logo logo-child"
-						:alt="entity.name"
-						:title="`${entity.name} (#${entity.id})`"
-						:src="`/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
-					>
+						<img
+							v-else-if="entity.parent && !entity.isIndependent"
+							class="logo logo-child"
+							:alt="entity.name"
+							:title="`${entity.name} (#${entity.id})`"
+							:src="`/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
+						>
 
-					<img
+						<img
+							v-else
+							class="logo logo-child"
+							:alt="entity.name"
+							:title="`${entity.name} (#${entity.id})`"
+							:src="`/logos/${entity.slug}/thumbs/${entity.slug}.png`"
+						>
+					</template>
+
+					<h2
 						v-else
-						class="logo logo-child"
-						:alt="entity.name"
-						:title="`${entity.name} (#${entity.id})`"
-						:src="`/logos/${entity.slug}/thumbs/${entity.slug}.png`"
-					>
-				</template>
+						class="name"
+					>{{ entity.name }}</h2>
+				</a>
 
-				<h2
-					v-else
-					class="name"
-				>{{ entity.name }}</h2>
-			</a>
+				<Heart
+					domain="entities"
+					:item="entity"
+					class="light"
+				/>
+			</div>
 
 			<Domains
 				:domain="domain"
@@ -144,6 +152,7 @@ import EntityTile from '#/components/entities/tile.vue';
 import Scenes from '#/components/scenes/scenes.vue';
 import Movies from '#/components/movies/movies.vue';
 import Domains from '#/components/domains/domains.vue';
+import Heart from '#/components/stashes/heart.vue';
 
 const { pageProps, routeParams } = inject('pageContext');
 const { entity } = pageProps;
@@ -201,6 +210,11 @@ const entityUrl = (() => {
 	}
 }
 
+.entity-container {
+	display: flex;
+	align-items: center;
+}
+
 .name {
 	display: block;
 	padding: 1rem;
@@ -229,6 +243,10 @@ const entityUrl = (() => {
 	position: relative;
 }
 
+.bookmarks {
+	margin: -.25rem 0 0 .25rem;
+}
+
 .children {
 	background: var(--grey-dark-50);
 	display: flex;

pages/entities/@entitySlug/+onBeforeRender.js

@@ -47,7 +47,7 @@ export async function onBeforeRender(pageContext) {
 		[entity],
 		entityReleases,
 	] = await Promise.all([
-		fetchEntitiesById([Number(entityId)], { includeChildren: true }),
+		fetchEntitiesById([Number(entityId)], { includeChildren: true }, pageContext.user),
 		fetchReleases(pageContext, entityId),
 	]);
 

pages/tags/@tagId/+Page.vue

@@ -2,6 +2,12 @@
 	<div class="page">
 		<div class="header">
 			<h2 class="title">{{ tag.name }}</h2>
+
+			<Heart
+				domain="tags"
+				:item="tag"
+				class="light"
+			/>
 		</div>
 
 		<div class="content">
@@ -30,6 +36,7 @@ import { inject } from 'vue';
 import Scenes from '#/components/scenes/scenes.vue';
 import Movies from '#/components/movies/movies.vue';
 import Domains from '#/components/domains/domains.vue';
+import Heart from '#/components/stashes/heart.vue';
 
 const pageContext = inject('pageContext');
 const { tag, description } = pageContext.pageProps;
@@ -59,11 +66,23 @@ const domain = pageContext.routeParams.domain;
 }
 
 .header {
-	padding: .5rem 1rem;
+	display: flex;
+	align-items: center;
+	padding: .25rem 1rem;
 	color: var(--text-light);
 	background: var(--grey-dark-40);
 }
 
+.bookmarks {
+	margin-left: .5rem;
+
+	:deep(.icon.alert) {
+		height: 1.25rem;
+		padding: .5rem .5rem .25rem .5rem;
+		overflow: hidden;
+	}
+}
+
 .title {
 	margin: 0;
 	text-transform: capitalize;

pages/tags/@tagId/+onBeforeRender.js

@@ -40,7 +40,7 @@ export async function onBeforeRender(pageContext) {
 	const tagSlug = pageContext.routeParams.tagSlug;
 
 	const [[tag], tagReleases, campaigns] = await Promise.all([
-		fetchTagsById([tagSlug]),
+		fetchTagsById([tagSlug], {}, pageContext.user),
 		fetchReleases(pageContext),
 		getRandomCampaigns([
 			{ tagSlugs: [tagSlug], minRatio: 1.5 },