Added movies page to actors, entities and tags.

pages/entities/@entitySlug/+Page.vue

@@ -36,6 +36,13 @@
 				>{{ entity.name }}</h2>
 			</a>
 
+			<Domains
+				:domain="domain"
+				:path="`/${entity.type}/${entity.slug}`"
+				:domains="['scenes', 'movies']"
+				class="domains-header"
+			/>
+
 			<a
 				v-if="entity.parent"
 				:href="`/${entity.parent.type}/${entity.parent.slug}`"
@@ -61,6 +68,13 @@
 		</div>
 
 		<div class="content">
+			<Domains
+				:domain="domain"
+				:path="`/${entity.type}/${entity.slug}`"
+				:domains="['scenes', 'movies']"
+				class="domains-bar"
+			/>
+
 			<div class="children-container">
 				<ul
 					v-if="entity.children.length > 0"
@@ -98,7 +112,8 @@
 				</div>
 			</div>
 
-			<Scenes />
+			<Scenes v-if="domain === 'scenes'" />
+			<Movies v-if="domain === 'movies'" />
 		</div>
 	</div>
 </template>
@@ -108,14 +123,17 @@ import { ref, computed, inject } from 'vue';
 
 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';
 
-const { pageProps } = inject('pageContext');
+const { pageProps, routeParams } = inject('pageContext');
 const { entity } = pageProps;
 
 const children = ref(null);
 const expanded = ref(false);
 
 const scrollable = computed(() => children.value?.scrollWidth > children.value?.clientWidth);
+const domain = routeParams.domain;
 
 const entityUrl = (() => {
 	if (!entity.url) {
@@ -173,7 +191,7 @@ const entityUrl = (() => {
 .logo {
 	height: 2rem;
 	max-width: 15rem;
-	padding: .75rem 1rem;
+	padding: .5rem 1rem;
 	object-fit: contain;
 }
 
@@ -184,7 +202,7 @@ const entityUrl = (() => {
 
 .favicon {
 	display: none;
-	padding: .75rem 1rem;
+	padding: .5rem 1rem;
 	height: 1.5rem;
 }
 
@@ -256,6 +274,29 @@ const entityUrl = (() => {
 	}
 }
 
+.domains-bar {
+	display: none;
+}
+
+@media(--small-20) {
+	.logo {
+		padding: .5rem 1rem;
+	}
+
+	.favicon {
+		height: 1rem;
+		padding: .5rem 1rem;
+	}
+
+	.domains-header {
+		display: none;
+	}
+
+	.domains-bar {
+		display: flex;
+	}
+}
+
 @media(--compact) {
 	.logo {
 		height: 1.25rem;
@@ -277,15 +318,4 @@ const entityUrl = (() => {
 		margin-right: 1rem;
 	}
 }
-
-@media(--small-20) {
-	.logo {
-		padding: .5rem 1rem;
-	}
-
-	.favicon {
-		height: 1rem;
-		padding: .5rem 1rem;
-	}
-}
 </style>