traxxx/assets/components/users/stash.vue

<template>
	<div 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>
				<span class="stash-more">Browse</span>
			</router-link>

			<span class="header-actions noselect">
				<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(checked)"
					/>
				</label>

				<Icon
					v-if="isMe && !stash.primary"
					icon="bin"
					class="stash-remove"
					@click.native="showRemoveStash = true"
				/>

				<RemoveStash
					v-if="showRemoveStash"
					:stash="stash"
					@close="removeStash"
				/>
			</span>
		</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"
				/>
			</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"
				/>
			</li>
		</ul>
	</div>
</template>

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

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

	this.$emit('publish', isPublic);
}

async function removeStash(removed) {
	this.showRemoveStash = false;

	if (removed) {
		this.$emit('remove');
	}
}

export default {
	components: {
		ActorPreview,
		ScenePreview,
		RemoveStash,
		Toggle,
	},
	props: {
		stash: {
			type: Object,
			default: null,
		},
		isMe: {
			type: Boolean,
			default: false,
		},
	},
	emits: ['publish', 'remove'],
	data() {
		return {
			showRemoveStash: false,
		};
	},
	methods: {
		publishStash,
		removeStash,
	},
};
</script>

<style lang="scss" scoped>
.stash {
	min-width: 0;
	height: 100%;
	background: var(--background);
	box-shadow: 0 0 3px var(--darken-weak);
}

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

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

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

.stash-link {
	display: inline-flex;
	align-items: center;
	flex-grow: 1;
	text-decoration: none;
	overflow: hidden;

	&:hover .stash-more {
		color: var(--primary);
	}
}

.stash-name {
	display: inline-block;
	padding: .5rem;
	margin: 0;
	color: var(--shadow-strong);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stash-more {
	flex-shrink: 0;
	margin: 0 0 0 .5rem;
	color: var(--shadow);
	font-size: .9rem;
}

.header-actions {
	display: flex;
	align-items: stretch;
}

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

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

.stash-remove {
	height: auto;
	padding: 0 .5rem 0 .75rem;
	fill: var(--shadow);

	&:hover {
		cursor: pointer;
		fill: var(--shadow-strong);
	}
}

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

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

.stash-scenes {
	height: 8rem;
}

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

	&:last-child {
		padding: 0 .5rem 0 0;
	}
}

</style>