ssb: Condense child messages a bit.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&01jXxJgs24zTcJk+csXeUWfm/MQ/+94Zy7K0r2OYmWw=.sha256"
+	"previous": "&ULwb8udTxSkqf+mcZ0NxJs6p/hGB03eQEEKzJvWO3fk=.sha256"
 }

apps/ssb/tf-message.js

@@ -24,6 +24,7 @@ class TfMessageElement extends LitElement {
 			channel: {type: String},
 			channel_unread: {type: Number},
 			recent_reactions: {type: Array},
+			depth: {type: Number},
 		};
 	}
 
@@ -40,6 +41,7 @@ class TfMessageElement extends LitElement {
 		this.expanded = {};
 		this.channel_unread = -1;
 		this.recent_reactions = [];
+		this.depth = 0;
 	}
 
 	connectedCallback() {
@@ -362,23 +364,26 @@ class TfMessageElement extends LitElement {
 					</button>
 				`;
 			} else {
-				return html` <div class="w3-container w3-margin-bottom">
+				return html` <ul class="w3-container w3-margin-bottom w3-ul w3-card-4">
 						${repeat(
 							this.message.child_messages || [],
 							(x) => x.id,
 							(x) =>
-								html`<tf-message
-									.message=${x}
-									whoami=${this.whoami}
-									.users=${this.users}
-									.drafts=${this.drafts}
-									.expanded=${this.expanded}
-									channel=${this.channel}
-									channel_unread=${this.channel_unread}
-									.recent_reactions=${this.recent_reactions}
-								></tf-message>`
+								html`<li style="padding: 0">
+									<tf-message
+										.message=${x}
+										whoami=${this.whoami}
+										.users=${this.users}
+										.drafts=${this.drafts}
+										.expanded=${this.expanded}
+										channel=${this.channel}
+										channel_unread=${this.channel_unread}
+										.recent_reactions=${this.recent_reactions}
+										depth=${this.depth + 1}
+									></tf-message>
+								</li>`
 						)}
-					</div>
+					</ul>
 					<button
 						class="w3-button w3-theme-d1 w3-block w3-bar"
 						style="box-sizing: border-box"
@@ -549,7 +554,10 @@ class TfMessageElement extends LitElement {
 				}
 			</style>
 			<div
-				class="w3-card-4 ${this.class_background()} w3-border-theme w3-margin-top"
+				class="w3-card-4 ${this.class_background()} w3-border-theme ${this
+					.depth == 0
+					? 'w3-margin-top'
+					: ''}"
 				style="overflow-wrap: anywhere; display: block; max-width: 100%"
 			>
 				${inner}
@@ -576,6 +584,7 @@ class TfMessageElement extends LitElement {
 						channel=${self.channel}
 						channel_unread=${self.channel_unread}
 						.recent_reactions=${self.recent_reactions}
+						depth=${self.depth + 1}
 					></tf-message>
 				`
 			)}
@@ -707,6 +716,7 @@ class TfMessageElement extends LitElement {
 									.expanded=${this.expanded}
 									channel=${this.channel}
 									channel_unread=${this.channel_unread}
+									depth=${this.depth + 1}
 								></tf-message>`
 						)}
 					</div>
@@ -762,6 +772,7 @@ class TfMessageElement extends LitElement {
 									.expanded=${this.expanded}
 									channel=${this.channel}
 									channel_unread=${this.channel_unread}
+									depth=${this.depth + 1}
 								></tf-message>`
 						)}
 					</div>
@@ -842,6 +853,7 @@ class TfMessageElement extends LitElement {
 								.expanded=${this.expanded}
 								channel=${this.channel}
 								channel_unread=${this.channel_unread}
+								depth=${this.depth + 1}
 							></tf-message>
 						`
 					)}