Make it easier to @mention the person to whom you are replying.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&0WzpczDOhxawXBY8fAPMQWwOuF8bVRO+cMJJTxBpYOQ=.sha256"
+	"previous": "&uSuRSjzMShdQllrt3gVYhWlixI6o6n0c1c/+pEhJCCI=.sha256"
 }

apps/ssb/tf-compose.js

@@ -13,6 +13,7 @@ class TfComposeElement extends LitElement {
 			branch: {type: String},
 			apps: {type: Object},
 			drafts: {type: Object},
+			author: {type: String},
 		};
 	}
 
@@ -25,6 +26,7 @@ class TfComposeElement extends LitElement {
 		this.branch = undefined;
 		this.apps = undefined;
 		this.drafts = {};
+		this.author = undefined;
 	}
 
 	process_text(text) {
@@ -284,13 +286,25 @@ class TfComposeElement extends LitElement {
 	}
 
 	firstUpdated() {
+		let values = Object.entries(this.users).map((x) => ({
+			key: x[1].name ?? x[0],
+			value: x[0],
+		}));
+		if (this.author) {
+			values = [].concat(
+				[
+					{
+						key: this.users[this.author]?.name,
+						value: this.author,
+					},
+				],
+				values
+			);
+		}
 		let tribute = new Tribute({
 			collection: [
 				{
-					values: Object.entries(this.users).map((x) => ({
+					values: values,
-						key: x[1].name,
-						value: x[0],
-					})),
 					selectTemplate: function (item) {
 						return `[@${item.original.key}](${item.original.value})`;
 					},
@@ -542,8 +556,7 @@ class TfComposeElement extends LitElement {
 								@input=${this.input}
 								@change=${this.change}
 								@paste=${this.paste}
-							>
+							>${draft.text}</textarea
-${draft.text}</textarea
 							>
 						</p>
 					</div>
@@ -552,9 +565,7 @@ ${draft.text}</textarea
 						<div id="preview"></div>
 					</div>
 				</div>
-				${Object.values(draft.mentions || {}).map((x) =>
+				${Object.values(draft.mentions || {}).map((x) => self.render_mention(x))}
-					self.render_mention(x)
-				)}
 				${this.render_attach_app()} ${this.render_content_warning()}
 				<button
 					class="w3-button w3-dark-grey"

apps/ssb/tf-message.js

@@ -498,6 +498,7 @@ ${JSON.stringify(mention, null, 2)}</pre
 									branch=${this.message.id}
 									.drafts=${this.drafts}
 									@tf-discard=${this.discard_reply}
+									author=${this.message.author}
 								></tf-compose>
 							`
 						: html`
@@ -685,6 +686,7 @@ ${JSON.stringify(content, null, 2)}</pre
 									branch=${this.message.id}
 									.drafts=${this.drafts}
 									@tf-discard=${this.discard_reply}
+									author=${this.message.author}
 								></tf-compose>
 							`
 						: html`