Added album button and component to scene page.

assets/components/releases/release.vue

@@ -3,13 +3,6 @@
 		v-if="release"
 		class="content"
 	>
-		<Expand
-			v-if="expanded"
-			class="expand expand-dark"
-			:expanded="expanded"
-			@expand="(state) => expanded = state"
-		/>
-
 		<Scroll
 			v-slot="slotProps"
 			class="scroll-light"
@@ -17,15 +10,26 @@
 		>
 			<Media
 				:release="release"
-				:class="{ expanded }"
 				@load="slotProps.loaded"
 			/>
 		</Scroll>
 
 		<Details :release="release" />
 
+		<button
+			class="album-toggle"
+			@click="showAlbum = true"
+		><Icon icon="grid3" />View album</button>
+
+		<Album
+			v-if="showAlbum"
+			:items="release.photos"
+			:title="release.title"
+			@close="showAlbum = false"
+		/>
+
 		<div class="info column">
-			<div class="row">
+			<div class="row row-title">
 				<h2
 					v-if="release.title"
 					class="title"
@@ -192,14 +196,14 @@
 </template>
 
 <script>
-import Media from './media.vue';
 import Details from './details.vue';
+import Media from './media.vue';
+import Album from '../album/album.vue';
 import Tags from './tags.vue';
 import Clips from './clips.vue';
 import Actor from '../actors/tile.vue';
 import Releases from './releases.vue';
 import Scroll from '../scroll/scroll.vue';
-import Expand from '../expand/expand.vue';
 
 async function fetchRelease() {
 	if (this.$route.name === 'scene') {
@@ -220,10 +224,10 @@ function pageTitle() {
 export default {
 	components: {
 		Actor,
+		Album,
 		Details,
 		Media,
 		Scroll,
-		Expand,
 		Releases,
 		Clips,
 		Tags,
@@ -231,7 +235,7 @@ export default {
 	data() {
 		return {
 			release: null,
-			expanded: false,
+			showAlbum: false,
 		};
 	},
 	computed: {
@@ -285,8 +289,13 @@ export default {
 	margin: 0 2rem 0 0;
 }
 
+.row-title {
+	display: flex;
+	justify-content: space-between;
+}
+
 .title {
-	display: inline-block;
+	display: inline-flex;
 	margin: 0;
 
 	.icon {
@@ -304,11 +313,28 @@ export default {
 	color: var(--shadow);
 }
 
-.title-shoot {
-	margin: 0 0 0 .5rem;
+.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);
-	font-size: .9rem;
+	background: none;
+	font-size: 1rem;
 	font-weight: bold;
+
+	.icon {
+		fill: var(--shadow);
+		margin: -.1rem .5rem 0 0;
+	}
+
+	&:hover {
+		background: var(--shadow-hint);
+		cursor: pointer;
+	}
 }
 
 .description {