Using navigation for toggling album. Using album for tag photos. Fixed portrait albums.

assets/components/actors/actor.vue

@@ -319,15 +319,14 @@
 				v-if="showAlbum"
 				:items="actor.photos"
 				:title="actor.name"
-				class="portrait"
-				@close="showAlbum = false"
+				:portrait="true"
+				@close="$router.go(-1)"
 			/>
 
 			<div class="actor-content">
 				<Scroll
 					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
 					v-slot="scroll"
-					:expandable="false"
 				>
 					<Photos
 						:actor="actor"
@@ -339,7 +338,7 @@
 				<button
 					v-if="actor.photos && actor.photos.length > 2"
 					class="album-toggle"
-					@click="showAlbum = true"
+					@click="$router.push({ hash: '#album' })"
 				><Icon icon="grid3" />View album</button>
 
 				<FilterBar
@@ -398,6 +397,16 @@ function sfw() {
 	return this.$store.state.ui.sfw;
 }
 
+function showAlbum() {
+	return this.actor.photos?.length > 0 && this.$route.hash === '#album';
+}
+
+async function watchRoute(to, from) {
+	if (to.params.pageNumber !== from.params.pageNumber) {
+		await this.fetchActor();
+	}
+}
+
 async function mounted() {
 	await this.fetchActor();
 
@@ -423,7 +432,6 @@ export default {
 			actor: null,
 			releases: null,
 			totalCount: 0,
-			showAlbum: false,
 			limit: 20,
 			pageTitle: null,
 			bioExpanded: false,
@@ -432,9 +440,10 @@ export default {
 	},
 	computed: {
 		sfw,
+		showAlbum,
 	},
 	watch: {
-		$route: fetchActor,
+		$route: watchRoute,
 		'$store.state.ui.tagFilter': fetchActor,
 	},
 	mounted,
@@ -710,30 +719,6 @@ export default {
 	border-bottom: solid 1px var(--shadow-hint);
 }
 
-.album-toggle {
-	height: fit-content;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: .5rem 1rem;
-	border: none;
-	border-bottom: solid 1px var(--shadow-hint);
-	color: var(--shadow);
-	background: var(--background-dim);
-	font-size: 1rem;
-	font-weight: bold;
-
-	.icon {
-		fill: var(--shadow);
-		margin: -.1rem .5rem 0 0;
-	}
-
-	&:hover {
-		background: var(--shadow-hint);
-		cursor: pointer;
-	}
-}
-
 @media(max-width: $breakpoint4) {
     .descriptions-container {
         display: none;