Displaying fingerprints on scene page.

pages/scene/+Page.vue

@@ -343,6 +343,43 @@
 					</ul>
 				</div>
 
+				<div
+					v-if="user && scene.fingerprints.length > 0"
+					class="section fingerprints"
+				>
+					<h3 class="heading">Fingerprints</h3>
+
+					<div class="fingerprints-container">
+						<table class="fingerprints-table">
+							<thead class="fingerprints-head">
+								<tr class="fingerprints-header">
+									<th class="fingerprints-heading">Hash</th>
+									<th class="fingerprints-heading">Type</th>
+									<th class="fingerprints-heading">Duration</th>
+									<th class="fingerprints-heading">Submissions</th>
+									<th class="fingerprints-heading">Source</th>
+									<th class="fingerprints-heading">First added</th>
+								</tr>
+							</thead>
+
+							<tbody class="fingerprints-body">
+								<tr
+									v-for="fingerprint in scene.fingerprints"
+									:key="`fingerprint-${fingerprint.hash}`"
+									class="fingerprint"
+								>
+									<td class="fingerprint-field fingerprint-hash">{{ fingerprint.hash }}</td>
+									<td class="fingerprint-field fingerprint-type">{{ fingerprint.type.toUpperCase() }}</td>
+									<td class="fingerprint-field fingerprint-duration">{{ formatDuration(fingerprint.duration) }}</td>
+									<td class="fingerprint-field fingerprint-submission">{{ fingerprint.submissions }}</td>
+									<td class="fingerprint-field fingerprint-source">{{ fingerprint.source || 'traxxx' }}</td>
+									<td class="fingerprint-field fingerprint-date">{{ formatDate(fingerprint.createdAt, 'yyyy-MM-dd') }}</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+
 				<div
 					class="scene-actions section"
 				>
@@ -740,6 +777,55 @@ function copySummary() {
 	display: none;
 }
 
+.fingerprints {
+	margin-top: 1.5rem;
+}
+
+.fingerprints-container {
+	max-height: 10rem;
+	overflow-y: auto;
+	resize: vertical;
+
+	&[style*="height"] {
+		max-height: unset;
+	}
+}
+
+.fingerprints-table {
+	width: 100%;
+}
+
+.fingerprints-head {
+	background: var(--background-base-10);
+	position: sticky;
+	top: 0;
+}
+
+.fingerprints-heading {
+	color: var(--shadow);
+	font-weight: normal;
+	padding: .25rem;
+	text-align: left;
+}
+
+.fingerprint {
+	&:nth-child(2n + 1) {
+		background: var(--shadow-weak-50);
+	}
+
+	&:hover {
+		background: var(--shadow-weak-40);
+	}
+}
+
+.fingerprint-field {
+	padding: .25rem;
+}
+
+.fingerprint-hash {
+	user-select: all;
+}
+
 @media(--compact) {
 	.content {
 		margin: 0;