Integrated channel filter, partially restored actor bio.

pages/actors/@actorId/+Page.vue

@@ -1,23 +1,59 @@
 <template>
-	<div class="page">
-		<div class="bio">
-			<img
-				v-if="actor.avatar"
-				:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-				:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
-				class="avatar"
-			>
+	<div class="actor">
+		<div class="actor-header">
+			<h2 class="header-name">
+				<span v-if="actor.entity">{{ actor.name }} ({{ actor.entity.name }})</span>
+				<span v-else>{{ actor.name }}</span>
 
-			<h2 class="name">{{ actor.name }}</h2>
+				<Gender
+					:gender="actor.gender"
+					class="header-gender"
+				/>
+			</h2>
+
+			<li
+				v-if="actor.aliases?.length"
+				class="bio-item"
+			>
+				<dfn class="bio-label">Also known as</dfn>
+				<span class="bio-value">
+					<span
+						v-for="alias in actor.aliases"
+						:key="`alias-${alias.id}`"
+						class="alias"
+					>{{ alias.name }}</span>
+				</span>
+			</li>
+
+			<!--
+			<Social
+				v-if="actor.social && actor.social.length > 0"
+				:actor="actor"
+				class="header-social"
+			/>
+
+			<StashButton
+				:stashed-by="stashedBy"
+				class="actor-stash light"
+				@stash="(stash) => stashActor(stash)"
+				@unstash="(stash) => unstashActor(stash)"
+			/>
+			-->
 		</div>
 
-		<Scenes />
+		<div class="content">
+			<Bio :actor="actor" />
+
+			<Scenes />
+		</div>
 	</div>
 </template>
 
 <script setup>
 import { inject } from 'vue';
 
+import Bio from '#/components/actors/bio.vue';
+import Gender from '#/components/actors/gender.vue';
 import Scenes from '#/components/scenes/scenes.vue';
 
 const pageContext = inject('pageContext');
@@ -27,19 +63,45 @@ const { actor } = pageProps;
 </script>
 
 <style scoped>
-.bio {
+.actor {
 	display: flex;
-	padding: 1rem;
-	background: var(--grey-dark-40);
-	color: var(--text-light);
+	flex-direction: column;
+	flex-grow: 1;
+	overflow: hidden;
 }
 
-.name {
-	margin: 0;
+.actor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--highlight-strong-30);
+    background: var(--grey-dark-40);
 }
 
-.avatar {
-	height: 10rem;
-	margin-right: 1rem;
+.header-name {
+    padding: .5rem 1rem;
+    margin: 0;
+    display: inline-flex;
+    justify-content: space-between;
+    flex-shrink: 0;
+}
+
+.header-gender {
+    display: inline-block;
+    margin: 0 0 0 .5rem;
+    transform: translate(0, .125rem);
+}
+
+.header-social {
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 0 1rem 0 0;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow-y: auto;
 }
 </style>