Added dedicated compact scene tile.

components/scenes/meta.vue

@@ -0,0 +1,93 @@
+<template>
+	<div class="meta">
+		<div class="channel">
+			<Link
+				:href="scene.channel.isIndependent || !scene.network ? `/${scene.channel.type}/${scene.channel.slug}` : `/${scene.network.type}/${scene.network.slug}`"
+				class="favicon-link"
+			>
+				<img
+					:src="scene.channel.isIndependent || !scene.network ? `/logos/${scene.channel.slug}/favicon.png` : `/logos/${scene.network.slug}/favicon.png`"
+					class="favicon"
+				>
+			</Link>
+
+			<Link
+				:href="`/${scene.channel.type}/${scene.channel.slug}`"
+				class="nolink channel-link"
+			>{{ scene.channel.name }}</Link>
+		</div>
+
+		<Link
+			:href="scene.watchUrl"
+			:title="scene.date ? format(scene.date.toISOString(), 'y-MM-dd hh:mm') : `Release date unknown, added ${format(scene.createdAt, 'y-MM-dd')}`"
+			target="_blank"
+			class="date-link nolink"
+			:data-umami-event="scene.affiliate ? 'scenetile-date-click-aff' : 'scenetile-date-click'"
+			:data-umami-event-aff-id="scene.affiliate?.id"
+			:data-umami-event-scene-id="scene.id"
+		>
+			<time
+				:datetime="scene.effectiveDate.toISOString()"
+				class="date"
+				:class="{ nodate: !scene.date }"
+			>{{ format(scene.effectiveDate, {
+				month: 'MMM y',
+				year: 'y',
+			}[scene.datePrecision] || 'MMM d, y') }}</time>
+		</Link>
+	</div>
+</template>
+
+<script setup>
+import { format } from 'date-fns';
+
+defineProps({
+	scene: {
+		type: Object,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.meta {
+	display: flex;
+	justify-content: space-between;
+	align-items: stretch;
+	padding: 0 .5rem;
+	border-radius: 0 0 .25rem .25rem;
+	position: relative;
+	font-size: .8rem;
+	color: var(--text-light);
+	background: var(--shadow-strong-30);
+	box-shadow: 0 0 3px var(--shadow);
+}
+
+.channel {
+	display: inline-flex;
+	align-items: center;
+	font-weight: bold;
+	padding: .4rem 0;
+}
+
+.favicon-link {
+	display: inline-flex;
+}
+
+.favicon {
+	width: 1rem;
+	height: 1rem;
+	margin-right: .5rem;
+	object-fit: contain;
+}
+
+.date-link {
+	display: flex;
+	align-items: center;
+}
+
+.nodate {
+	font-style: italic;
+	color: var(--highlight);
+}
+</style>