From efb3a12dcc41a11ddd4787ca29520ef81214a49e Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 20 Apr 2025 09:35:39 -0400
Subject: [PATCH] ssb: Make the reactions list dialog a bit more
 compact/concise.

---
 apps/ssb.json                  |  2 +-
 apps/ssb/tf-reactions-modal.js | 37 ++++++++++++++++++----------------
 apps/ssb/tf-tab-news-feed.js   |  9 ++++-----
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 5254762d..61c9d28d 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&jko2iokTaY2t/pD9m4ekMr0wsLjov3LVl9ShysXEjkE=.sha256"
+	"previous": "&Zv/eOewtUPxYuALmYV8v+JDKwH4+aN8zCTYFwB7oYEw=.sha256"
 }
diff --git a/apps/ssb/tf-reactions-modal.js b/apps/ssb/tf-reactions-modal.js
index 84cbfa41..f4a30a3b 100644
--- a/apps/ssb/tf-reactions-modal.js
+++ b/apps/ssb/tf-reactions-modal.js
@@ -41,23 +41,26 @@ class TfReactionsModalElement extends LitElement {
 								>
 							</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>
-									`
-								)}
+								${this.votes
+									.sort((x, y) => y.timestamp - x.timestamp)
+									.map(
+										(x) => html`
+											<li style="display: flex; flex-direction: row; gap: 4px">
+												<span style="flex-basis: 3em"
+													>${x?.content?.vote?.expression}</span
+												>
+												<tf-user
+													style="flex: 1 1"
+													id=${x.author}
+													.users=${this.users}
+												></tf-user>
+												<span
+													style="flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+													>${new Date(x?.timestamp).toLocaleString()}</span
+												>
+											</li>
+										`
+									)}
 							</ul>
 							<footer class="w3-container w3-padding">
 								<button class="w3-button" @click=${this.clear}>Close</button>
diff --git a/apps/ssb/tf-tab-news-feed.js b/apps/ssb/tf-tab-news-feed.js
index 9199445c..48d1dcee 100644
--- a/apps/ssb/tf-tab-news-feed.js
+++ b/apps/ssb/tf-tab-news-feed.js
@@ -179,11 +179,10 @@ class TfTabNewsFeedElement extends LitElement {
 								JOIN messages ON messages.rowid = messages_fts.rowid
 								JOIN json_each(?1) AS following ON messages.author = following.value
 								JOIN json_tree(messages.content, '$.mentions') AS mention ON mention.value = '#' || ?4
-							),
-						news AS (SELECT * FROM all_news
-							WHERE (?2 IS NULL OR all_news.timestamp >= ?2) AND all_news.timestamp < ?3
-							ORDER BY all_news.timestamp DESC LIMIT 20)
-					SELECT TRUE AS is_primary, news.* FROM news
+							)
+					SELECT TRUE AS is_primary, all_news.* FROM all_news
+						WHERE (?2 IS NULL OR all_news.timestamp >= ?2) AND all_news.timestamp < ?3
+						ORDER BY all_news.timestamp DESC LIMIT 20
 				`,
 				[
 					JSON.stringify(this.following),