More ssb compose fixes.

GNUmakefile

@@ -4,7 +4,7 @@ MAKEFLAGS += --warn-undefined-variables
 MAKEFLAGS += --no-builtin-rules
 
 VERSION_CODE := 18
-VERSION_NUMBER := 0.0.18-wip
+VERSION_NUMBER := 0.0.18
 VERSION_NAME := Celebrating totality for upwards of 3m1.4s.
 
 SQLITE_URL := https://www.sqlite.org/2024/sqlite-amalgamation-3450300.zip

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&r2Xphgr4HGdG4WnqWngj8fcAs1xHfZ1a2DJgqr7hqZA=.sha256"
+	"previous": "&UDqtNEELPRZAP6jSrcKfoXpAr8s7GjWmWLOQINN4kmg=.sha256"
 }

apps/ssb/tf-app.js

@@ -236,7 +236,13 @@ class TfElement extends LitElement {
 		console.log(by_count.sort((x, y) => y.count - x.count).slice(0, 20));
 		let start_time = new Date();
 		users = await this.fetch_about(Object.keys(following).sort(), users);
-		console.log('about took', (new Date() - start_time) / 1000.0, 'seconds for', Object.keys(users).length, 'users');
+		console.log(
+			'about took',
+			(new Date() - start_time) / 1000.0,
+			'seconds for',
+			Object.keys(users).length,
+			'users'
+		);
 		this.following = Object.keys(following);
 		this.users = users;
 		await tags;

apps/ssb/tf-compose.js

@@ -1,4 +1,4 @@
-import {LitElement, html, unsafeHTML} from './lit-all.min.js';
+import {LitElement, html, unsafeHTML, live} from './lit-all.min.js';
 import * as tfutils from './tf-utils.js';
 import * as tfrpc from '/static/tfrpc.js';
 import {styles} from './tf-styles.js';
@@ -66,7 +66,7 @@ class TfComposeElement extends LitElement {
 			updated = true;
 		}
 		if (updated) {
-			this.requestUpdate();
+			setTimeout(() => this.notify(draft), 0);
 		}
 		return tfutils.markdown(text);
 	}
@@ -301,14 +301,14 @@ class TfComposeElement extends LitElement {
 				{
 					values: values,
 					selectTemplate: function (item) {
-						return `[@${item.original.key}](${item.original.value})`;
+						return item ? `[@${item.original.key}](${item.original.value})` : undefined;
 					},
 				},
 				{
 					trigger: '&',
 					values: this.autocomplete,
 					selectTemplate: function (item) {
-						return `![${item.original.key}](${item.original.value})`;
+						return item ? `![${item.original.key}](${item.original.value})` : undefined;
 					},
 				},
 			],
@@ -342,8 +342,7 @@ class TfComposeElement extends LitElement {
 	remove_mention(id) {
 		let draft = this.get_draft();
 		delete draft.mentions[id];
-		this.notify(draft);
+		setTimeout(() => this.notify(), 0);
-		this.requestUpdate();
 	}
 
 	render_mention(mention) {
@@ -542,15 +541,16 @@ class TfComposeElement extends LitElement {
 				${this.render_encrypt()}
 				<div class="w3-container w3-padding-small">
 					<div class="w3-half">
-							<span
+						<span
-								class="w3-input w3-theme-d1 w3-border"
+							class="w3-input w3-theme-d1 w3-border"
-								style="resize: vertical; width: 100%; overflow: hidden; white-space: pre-wrap"
+							style="resize: vertical; width: 100%; overflow: hidden; white-space: pre-wrap"
-								placeholder="Write a post here."
+							placeholder="Write a post here."
-								id="edit"
+							id="edit"
-								@input=${this.input}
+							@input=${this.input}
-								@paste=${this.paste}
+							@paste=${this.paste}
-								contenteditable
+							contenteditable
-							>${draft.text}</span>
+							.innerText=${live(draft.text ?? '')}
+							></span>
 					</div>
 					<div class="w3-half w3-padding">
 						${content_warning}

apps/ssb/tf-message.js

@@ -72,10 +72,7 @@ class TfMessageElement extends LitElement {
 				return expression;
 			}
 		}
-		return html`<div
+		return html`<div class="w3-button" @click=${this.show_reactions}>
-						class="w3-button"
-						@click=${this.show_reactions}
-					>
 			${(this.message.votes || []).map(
 				(vote) => html`
 					<span

apps/ssb/tf-reactions-modal.js

@@ -23,29 +23,45 @@ class TfReactionsModalElement extends LitElement {
 
 	render() {
 		let self = this;
-		return this.votes?.length ? html`
+		return this.votes?.length
-		<div class="w3-modal w3-animate-opacity" style="display: block; box-sizing: border-box">
+			? html` <div
-			<div class="w3-modal-content w3-card-4 w3-theme-d1">
+					class="w3-modal w3-animate-opacity"
-				<div class="w3-container w3-padding">
+					style="display: block; box-sizing: border-box"
-					<header class="w3-container">
+				>
-						<h2>Reactions</h2>
+					<div class="w3-modal-content w3-card-4 w3-theme-d1">
-						<span class="w3-button w3-display-topright" @click=${this.clear}>&times;</span>
+						<div class="w3-container w3-padding">
-					</header>
+							<header class="w3-container">
-					<ul class="w3-theme-dark w3-container w3-ul">
+								<h2>Reactions</h2>
-						${this.votes.map(x => html`
+								<span class="w3-button w3-display-topright" @click=${this.clear}
-							<li class="w3-bar">
+									>&times;</span
-								<span class="w3-bar-item">${x?.content?.vote?.expression}</span>
+								>
-								<tf-user class="w3-bar-item" id=${x.author} .users=${this.users}></tf-user>
+							</header>
-								<span class="w3-bar-item w3-right">${new Date(x?.timestamp).toLocaleString()}</span>
+							<ul class="w3-theme-dark w3-container w3-ul">
-							</li>
+								${this.votes.map(
-						`)}
+									(x) => html`
-					</ul>
+										<li class="w3-bar">
-					<footer class="w3-container w3-padding">
+											<span class="w3-bar-item"
-						<button class="w3-button" @click=${this.clear}>Close</button>
+												>${x?.content?.vote?.expression}</span
-					</footer>
+											>
-				</div>
+											<tf-user
-			</div>
+												class="w3-bar-item"
-		</div>` : undefined;
+												id=${x.author}
+												.users=${this.users}
+											></tf-user>
+											<span class="w3-bar-item w3-right"
+												>${new Date(x?.timestamp).toLocaleString()}</span
+											>
+										</li>
+									`
+								)}
+							</ul>
+							<footer class="w3-container w3-padding">
+								<button class="w3-button" @click=${this.clear}>Close</button>
+							</footer>
+						</div>
+					</div>
+				</div>`
+			: undefined;
 	}
 }
 

apps/ssb/tf-tab-news.js

@@ -85,9 +85,7 @@ class TfTabNewsElement extends LitElement {
 			delete this.drafts[id];
 		}
 		/* Only trigger a re-render if we're creating a new draft or discarding an old one. */
-		if ((previous !== undefined) != (event.detail.draft !== undefined)) {
+		this.drafts = Object.assign({}, this.drafts);
-			this.drafts = Object.assign({}, this.drafts);
-		}
 		tfrpc.rpc.localStorageSet('drafts', JSON.stringify(this.drafts));
 	}
 

core/client.js

@@ -346,8 +346,13 @@ class TfNavigationElement extends LitElement {
 				${this.render_permissions()}
 				${this.status?.message && !this.status.is_error
 					? html`
-						<link type="text/css" rel="stylesheet" href="/static/w3.css" />
+							<link type="text/css" rel="stylesheet" href="/static/w3.css" />
-						<div class="w3-bar-item" style="color: ${this.status.color ?? kStatusColor}">${this.status.message}</div>
+							<div
+								class="w3-bar-item"
+								style="color: ${this.status.color ?? kStatusColor}"
+							>
+								${this.status.message}
+							</div>
 						`
 					: undefined}
 				${Object.keys(this.spark_lines)

src/android/AndroidManifest.xml

@@ -2,7 +2,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
 	package="com.unprompted.tildefriends"
 	android:versionCode="18"
-	android:versionName="0.0.18-wip">
+	android:versionName="0.0.18">
 	<uses-sdk android:minSdkVersion="24" android:targetSdkVersion="34"/>
 	<uses-permission android:name="android.permission.INTERNET"/>
 	<application

src/version.h

@@ -1,2 +1,2 @@
-#define VERSION_NUMBER "0.0.18-wip"
+#define VERSION_NUMBER "0.0.18"
 #define VERSION_NAME "Celebrating totality for upwards of 3m1.4s."