traxxx-web/pages/users/@username/+Page.vue

<script setup>
import { formatDistanceStrict } from 'date-fns';
import { inject, ref } from 'vue';

import mockupRelease from '#/assets/mockup-release.ts';
import Alerts from '#/components/alerts/alerts.vue';
import Revisions from '#/components/edit/revisions.vue';
import Summaries from '#/components/scenes/summaries.vue';
// filters are implemented as generic settings panel in case we want to extend it in the future
import Settings from '#/components/settings/settings.vue';
import Stashes from '#/components/stashes/stashes.vue';
import ApiKeys from '#/components/user/api-keys.vue';
import Preferences from '#/components/user/preferences.vue';

const pageContext = inject('pageContext');

const section = pageContext.routeParams.section;
const domain = pageContext.routeParams.domain;

const user = pageContext.user;
const profile = ref(pageContext.pageProps.profile);

const showFilters = ref(false);

function scrollHorizontal(event) {
	event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}
</script>

<template>
	<div class="page">
		<div class="profile">
			<div class="profile-header">
				<a
					:href="`/user/${profile.username}/`"
					class="user nolink"
				>
					<Icon
						v-if="section"
						icon="arrow-left3"
						class="profile-back"
					/>

					<img
						v-else-if="profile.avatar"
						:src="profile.avatar"
						class="avatar"
					>

					<h2 class="username ellipsis">{{ profile.username }}</h2>
				</a>

				<strong
					v-if="section"
					class="profile-crumb"
				>
					<template v-if="domain">{{ domain }}</template>
					{{ section }}
				</strong>

				<span
					v-else
					class="age"
				>{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
			</div>

			<nav
				v-if="!section && profile.id === user?.id"
				class="domains nobar"
				@wheel.prevent="scrollHorizontal"
			>
				<a
					:href="`/user/${profile.username}/stashes`"
					class="domain nolink"
					:class="{ active: section === 'stashes' }"
				><Icon icon="folder-heart" />Stashes</a>

				<a
					:href="`/user/${profile.username}/alerts`"
					class="domain nolink"
					:class="{ active: section === 'alerts' }"
				><Icon icon="alarm" />Alerts</a>

				<a
					:href="`/user/${profile.username}/templates`"
					class="domain nolink"
					:class="{ active: section === 'templates' }"
				><Icon icon="paste3" />Templates</a>

				<a
					v-if="profile.isIdentityVerified"
					:href="`/user/${profile.username}/api`"
					class="domain nolink"
					:class="{ active: section === 'api' }"
				><Icon icon="key" />API Keys</a>

				<a
					:href="`/user/${profile.username}/revisions/scenes`"
					class="domain nolink"
					:class="{ active: section === 'revisions' && domain === 'scenes' }"
				><Icon icon="file-video2" />Scene Revisions</a>

				<a
					:href="`/user/${profile.username}/revisions/actors`"
					class="domain nolink"
					:class="{ active: section === 'revisions' && domain === 'actors' }"
				><Icon icon="profile" />Actor Revisions</a>

				<span
					:href="`/user/${profile.username}/preferences`"
					class="domain nolink"
					:class="{ active: section === 'filters' }"
					@click="showFilters = true"
				><Icon icon="filter" />Filters</span>

				<a
					:href="`/user/${profile.username}/preferences`"
					class="domain nolink"
					:class="{ active: section === 'preferences' }"
				><Icon icon="equalizer" />Preferences</a>
			</nav>

			<Stashes v-if="section === 'stashes'" />
			<Alerts v-if="section === 'alerts' && profile.id === user?.id" />

			<Summaries
				v-if="section === 'templates' && profile.id === user?.id"
				:release="mockupRelease"
			/>

			<ApiKeys
				v-if="section === 'api'"
			/>

			<Preferences
				v-if="section === 'preferences'"
			/>
		</div>

		<div
			v-if="section === 'revisions' && profile.id === user?.id"
			class="profile-section revisions"
		>
			<Revisions context="user" />
		</div>

		<Settings
			v-if="showFilters"
			@close="showFilters = false"
		/>
	</div>
</template>

<style>
.profile-section {
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .5rem 1rem;
		text-transform: capitalize;

		.button {
			margin-left: 1rem;
		}
	}

	.heading {
		margin: 0;
		font-size: 1.1rem;
		color: var(--primary);
	}
}

@media(--small-20) {
	.profile-section .section-header {
		padding: .5rem;
	}
}
</style>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	background: var(--background-base-10);
}

.profile {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 1200px;
	max-width: 100%;
	margin: 0 .5rem;
}

.profile-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem 1rem;
    color: var(--highlight-strong-30);
    background: var(--shadow-strong-30);
	border-radius: 0 0 .5rem .5rem;
	margin-bottom: .5rem;
}

.user {
	display: flex;
	overflow: hidden;

	&:hover .profile-back {
		fill: var(--primary);
	}
}

.username {
	margin: 0;
	font-size: 1.25rem;
}

.age {
	display: flex;
	flex-shrink: 0;
	font-size: .9rem;

	.icon {
		width: .9rem;
		fill: var(--highlight-strong-20);
		margin-right: .75rem;
		transform: translateY(-1px);
	}
}

.avatar {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: .25rem;
	margin-right: 1rem;
}

.profile-back {
	padding: .25rem 1.25rem .25rem .25rem;
	fill: var(--highlight);
	transform: translateY(-1px);
}

.profile-crumb {
	text-transform: capitalize;
}

.domains {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: .5rem;
	box-sizing: border-box;
	padding: .5rem 0;
	margin-top: .5rem;
}

.domain {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-shrink: 0;
	color: var(--glass-strong-20);
	background: var(--background-dark-20);
	padding: 1.25rem 2rem;
	border-radius: 1rem;
	font-size: 1rem;
	font-weight: bold;

	.icon {
		width: 1.25rem;
		height: 1.25rem;
		transform: translateY(-1px);
		fill: var(--glass-strong-20);
	}

	&:hover {
		background: var(--primary);
		color: var(--text-light);
		cursor: pointer;

		.icon {
			fill: var(--text-light);
		}
	}
}

.revisions {
	width: 100%; /* necessary for FF */
	box-sizing: border-box;
	padding: 0 1rem;
}

.revisions-nav {
	display: flex;
	gap: 1rem;
}

@media(--compact) {
	.domains {
		padding: .5rem 1rem;
		grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
	}

	.profile {
		margin: 0;
	}

	.profile-header {
		border-radius: 0;
	}
}

@media(--small) {
	.domains {
		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	}
}

@media(--small-20) {
	.profile-header {
		padding: .5rem;
	}

	.domains {
		padding: .5rem .5rem;
	}

	.age .icon {
		display: none;
	}
}

@media(--small-30) {
	.age .icon {
		display: none;
	}
}

@media(--small-50) {
	.age {
		display: none;
	}
}
</style>