Add a thing to inspect reactions. #48

apps/ssb/tf-reactions-modal.js

@@ -0,0 +1,47 @@
+import {LitElement, html, unsafeHTML} from './lit-all.min.js';
+import {styles} from './tf-styles.js';
+
+class TfReactionsModalElement extends LitElement {
+	static get properties() {
+		return {
+			users: {type: Object},
+			votes: {type: Array},
+		};
+	}
+
+	static styles = styles;
+
+	constructor() {
+		super();
+		this.votes = [];
+		this.users = {};
+	}
+
+	clear() {
+		this.votes = [];
+	}
+
+	render() {
+		let self = this;
+		return this.votes?.length ? html`
+		<div class="w3-modal w3-animate-opacity" style="display: block">
+			<div class="w3-modal-content w3-card-4 w3-theme-d1">
+				<header class="w3-container">
+					<h2>Reactions</h2>
+					<span class="w3-button w3-display-topright" @click=${this.clear}>&times;</span>
+				</header>
+				<ul class="w3-theme-dark w3-container w3-ul">
+					${this.votes.map(x => html`
+						<li class="w3-bar">
+							<span class="w3-bar-item">${x?.content?.vote?.expression}</span>
+							<tf-user class="w3-bar-item" id=${x.author} .users=${this.users}></tf-user>
+							<span class="w3-bar-item w3-right">${new Date(x?.timestamp).toLocaleString()}</span>
+						</li>
+					`)}
+				</ul>
+			</div>
+		</div>` : undefined;
+	}
+}
+
+customElements.define('tf-reactions-modal', TfReactionsModalElement);