ssb: Condense child messages a bit.

This commit is contained in:
2025-10-01 12:27:04 -04:00
parent 479d87c8b8
commit 3ef795452d
2 changed files with 26 additions and 14 deletions

View File

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

View File

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