traxxx/assets/components/users/user.vue

<template>
	<div
		v-if="user"
		class="user"
	>
		<div class="header">
			<h2 class="username">{{ user.username }}</h2>
		</div>

		<section
			v-if="user.stashes?.length > 0"
			class="section"
		>
			<h3 class="heading">Stashes</h3>

			<ul class="stashes nolist">
				<li
					v-for="stash in user.stashes"
					:key="stash.id"
					class="stash"
				>
					<div class="stash-section stash-header">
						<router-link
							:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
							class="stash-link nolink"
						>
							<h4 class="stash-name">{{ stash.name }}</h4>
						</router-link>

						<label
							v-if="isMe"
							v-tooltip="'Public'"
							:class="{ public: stash.public }"
							class="stash-public"
						>
							<Icon
								v-show="stash.public"
								icon="eye"
							/>

							<Icon
								v-show="!stash.public"
								icon="eye-blocked"
							/>

							<Toggle
								:checked="stash.public"
								@change="checked => publishStash(stash, checked)"
							/>
						</label>
					</div>

					<ul
						v-if="stash.scenes?.length > 0"
						class="stash-section stash-scenes nolist"
					>
						<li
							v-for="{ scene } in stash.scenes"
							:key="scene.id"
							class="stash-scene"
						>
							<ScenePreview
								:scene="scene"
								:stash="stash"
								@unstash="fetchUser"
							/>
						</li>
					</ul>

					<ul
						v-if="stash.actors?.length > 0"
						class="stash-section stash-actors nolist"
					>
						<li
							v-for="{ actor } in stash.actors"
							:key="actor.id"
							class="stash-actor"
						>
							<ActorPreview
								:actor="actor"
								:stash="stash"
								@unstash="fetchUser"
							/>
						</li>
					</ul>
				</li>
			</ul>
		</section>
	</div>
</template>

<script>
import ActorPreview from './actor-preview.vue';
import ScenePreview from './scene-preview.vue';
import Toggle from '../form/toggle.vue';

async function fetchUser() {
	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
	this.isMe = this.user.id === this.$store.state.auth.user?.id;

	this.pageTitle = this.user?.username;
}

async function publishStash(stash, isPublic) {
	await this.$store.dispatch('updateStash', {
		stashId: stash.id,
		stash: { public: isPublic },
	});

	this.fetchUser();
}

async function mounted() {
	await this.fetchUser();
}

export default {
	components: {
		ActorPreview,
		ScenePreview,
		Toggle,
	},
	data() {
		return {
			user: this.$route.params.username === this.$store.state.auth.user?.username
				? this.$store.state.auth.user
				: null,
			isMe: false,
			pageTitle: null,
		};
	},
	mounted,
	methods: {
		fetchUser,
		publishStash,
	},
};
</script>

<style lang="scss" scoped>
@import 'breakpoints';

.header {
	padding: .5rem 1rem;
	background: var(--profile);
}

.username {
	margin: 0;
	font-size: 1.5rem;
	color: var(--text-light);
}

.section {
	padding: 1rem;
	margin: 0 0 1rem 0;
}

.stashes {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.heading {
	color: var(--primary);
}

.stash {
	min-width: 0;
	background: var(--background);
	margin: 0 0 1rem 0;
	box-shadow: 0 0 3px var(--shadow-weak);
}

.stash-section {
	display: flex;
	align-items: center;
	padding: .5rem;

	&:not(:last-child) {
		border-bottom: solid 1px var(--shadow-hint);
	}
}

.stash-header {
	justify-content: space-between;
	padding: 0;
}

.stash-link {
	flex-grow: 1;
	display: inline-block;
	text-decoration: none;
}

.stash-public {
	display: flex;
	align-items: center;
	padding: .5rem;
	cursor: pointer;

	.icon {
		fill: var(--shadow-strong);
		margin: 0 .5rem 0 0;
	}
}

.stash-name {
	padding: .5rem;
	margin: 0;
	color: var(--shadow-strong);
}

.stash-actors,
.stash-scenes {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
	}
}

.stash-scenes {
	height: 8rem;
    grid-gap: .5rem;
}

.stash-actors {
	grid-gap: 1rem;
}

.stash-actor,
.stash-scene {
	height: 100%;
	flex-shrink: 0;
}

@media(max-width: $breakpoint-kilo) {
	.stashes {
		grid-template-columns: 1fr;
	}
}
</style>