cory/tildefriends
5
6
Fork 2
Code Issues 33 Pull Requests 1 Actions Releases 28 Wiki Activity

ssb: Trying to untangle some message formatting ugliness. First step: some minor refactoring.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 22m53s
Details

Browse Source
This commit is contained in:
Cory McWilliams 2025-01-01 15:45:11 -05:00
parent e0a048abe6
commit 301b7a4911
2 changed files with 100 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{
"type": "tildefriends-app",
"emoji": "🦀",
"previous": "&bBoMW+AjErDfa483Mg3+h1L25xfDDeVSpcfD9WAwL3U=.sha256"
"previous": "&sPU6rF2WYaSdq1SBw5XyxOjiahAxtGUbeg0LOpkQ6Eg=.sha256"
}

221
apps/ssb/tf-message.js
View File

@ -97,6 +97,13 @@ class TfMessageElement extends LitElement {
}
}
render_json(value) {
let json = JSON.stringify(value, null, 2);
return html`
<pre style="white-space: pre-wrap; overflow-wrap: anywhere">${json}</pre>
`;
}
render_raw() {
let raw = {
id: this.message?.id,
@ -108,9 +115,7 @@ class TfMessageElement extends LitElement {
content: this.message?.content,
signature: this.message?.signature,
};
return html`<div style="white-space: pre-wrap">
${JSON.stringify(raw, null, 2)}
</div>`;
return this.render_json(raw);
}
vote(emoji) {
@ -190,7 +195,7 @@ class TfMessageElement extends LitElement {
render_mention(mention) {
if (!mention?.link || typeof mention.link != 'string') {
return html` <pre>${JSON.stringify(mention)}</pre>`;
return this.render_json(mention);
} else if (
mention?.link?.startsWith('&') &&
mention?.type?.startsWith('image/')
@ -241,9 +246,7 @@ class TfMessageElement extends LitElement {
) {
return html` <a href=${`/${mention.link}/view`}>${mention.name}</a>`;
} else {
return html` <pre style="white-space: pre-wrap">
${JSON.stringify(mention, null, 2)}</pre
>`;
return this.render_json(mention);
}
}
@ -357,16 +360,83 @@ ${JSON.stringify(mention, null, 2)}</pre
return channels.map((x) => html`<tf-tag tag=${x}></tf-tag>`);
}
class_background() {
return this.message?.decrypted
? 'w3-pale-red'
: this.message?.rowid >= this.channel_unread
? 'w3-theme-d2'
: 'w3-theme-d4';
}
render_small_frame(inner) {
let self = this;
return html`
<div
class="w3-card-4 ${this.class_background()} w3-border-theme"
style="margin-top: 8px; padding: 16px; display: inline-block; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
>
<tf-user id=${self.message.author} .users=${self.users}></tf-user>
<span style="padding-right: 8px; text-wrap: nowrap"
><a tfarget="_top" href=${'#' + encodeURIComponent(self.message.id)}
>%</a
>
${new Date(self.message.timestamp).toLocaleString()}</span
>
${raw_button} ${self.format == 'raw' ? self.render_raw() : inner}
${self.render_votes()}
${(self.message.child_messages || []).map(
(x) => html`
<tf-message
.message=${x}
whoami=${self.whoami}
.users=${self.users}
.drafts=${self.drafts}
.expanded=${self.expanded}
channel=${self.channel}
channel_unread=${self.channel_unread}
></tf-message>
`
)}
</div>
`;
}
render_actions() {
let reply =
this.drafts[this.message?.id] !== undefined
? html`
<tf-compose
whoami=${this.whoami}
.users=${this.users}
root=${content.root || this.message.id}
branch=${this.message.id}
.drafts=${this.drafts}
@tf-discard=${this.discard_reply}
author=${this.message.author}
></tf-compose>
`
: html`
<button class="w3-button w3-theme-d1" @click=${this.show_reply}>
Reply
</button>
`;
return html`
<div class="w3-section">
${reply}
<button class="w3-button w3-theme-d1" @click=${this.react}>
React
</button>
${this.render_children()}
</div>
`;
}
render() {
let content = this.message?.content;
if (this.message?.decrypted?.type == 'post') {
content = this.message.decrypted;
}
let class_background = this.message?.decrypted
? 'w3-pale-red'
: this.message?.rowid >= this.channel_unread
? 'w3-theme-d2'
: 'w3-theme-d4';
let class_background = this.class_background();
let self = this;
let raw_button;
switch (this.format) {
@ -421,38 +491,6 @@ ${JSON.stringify(mention, null, 2)}</pre
}
break;
}
function small_frame(inner) {
let body;
return html`
<div
class="w3-card-4 ${class_background} w3-border-theme"
style="margin-top: 8px; padding: 16px; display: inline-block; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
>
<tf-user id=${self.message.author} .users=${self.users}></tf-user>
<span style="padding-right: 8px; text-wrap: nowrap"
><a tfarget="_top" href=${'#' + encodeURIComponent(self.message.id)}
>%</a
>
${new Date(self.message.timestamp).toLocaleString()}</span
>
${raw_button} ${self.format == 'raw' ? self.render_raw() : inner}
${self.render_votes()}
${(self.message.child_messages || []).map(
(x) => html`
<tf-message
.message=${x}
whoami=${self.whoami}
.users=${self.users}
.drafts=${self.drafts}
.expanded=${self.expanded}
channel=${self.channel}
channel_unread=${self.channel_unread}
></tf-message>
`
)}
</div>
`;
}
if (this.message?.type === 'contact_group') {
return html` <div
class="w3-card-4 ${class_background} w3-border-theme"
@ -522,7 +560,9 @@ ${JSON.stringify(mention, null, 2)}</pre
Updated profile for
<tf-user id=${content.about} .users=${this.users}></tf-user>.
</div>`;
return small_frame(html` ${update} ${name} ${image} ${description} `);
return this.render_small_frame(html`
${update} ${name} ${image} ${description}
`);
} else if (content.type == 'contact') {
return html`
<div>
@ -544,24 +584,6 @@ ${JSON.stringify(mention, null, 2)}</pre
</div>
`;
} else if (content.type == 'post') {
let reply =
this.drafts[this.message?.id] !== undefined
? html`
<tf-compose
whoami=${this.whoami}
.users=${this.users}
root=${content.root || this.message.id}
branch=${this.message.id}
.drafts=${this.drafts}
@tf-discard=${this.discard_reply}
author=${this.message.author}
></tf-compose>
`
: html`
<button class="w3-button w3-theme-d1" @click=${this.show_reply}>
Reply
</button>
`;
let self = this;
let body;
switch (this.format) {
@ -578,11 +600,7 @@ ${JSON.stringify(mention, null, 2)}</pre
body = unsafeHTML(tfutils.markdown(content.text));
break;
case 'decrypted':
body = html`<pre
style="white-space: pre-wrap; overflow-wrap: anywhere"
>
${JSON.stringify(content, null, 2)}</pre
>`;
body = this.render_json(content);
break;
}
let content_warning = html`
@ -640,24 +658,7 @@ ${JSON.stringify(content, null, 2)}</pre
>
<span>${raw_button}</span>
</div>
${payload} ${this.render_votes()}
<footer class="w3-container">
${reply}
<button class="w3-button w3-theme-d1" @click=${this.react}>
React
</button>
${!content.root && this.message.rowid < this.channel_unread
? html`
<button
class="w3-button w3-theme-d1"
@click=${this.mark_unread}
>
Mark Unread
</button>
`
: undefined}
${this.render_children()}
</footer>
${payload} ${this.render_votes()} ${this.render_actions()}
</div>
`;
} else if (content.type === 'issue') {
@ -741,24 +742,6 @@ ${JSON.stringify(content, null, 2)}</pre
`;
break;
}
let reply =
this.drafts[this.message?.id] !== undefined
? html`
<tf-compose
whoami=${this.whoami}
.users=${this.users}
root=${content.root || this.message.id}
branch=${this.message.id}
.drafts=${this.drafts}
@tf-discard=${this.discard_reply}
author=${this.message.author}
></tf-compose>
`
: html`
<button class="w3-button w3-theme-d1" @click=${this.show_reply}>
Reply
</button>
`;
return html`
<style>
code {
@ -793,19 +776,12 @@ ${JSON.stringify(content, null, 2)}</pre
</div>
<div>${body}</div>
${this.render_mentions()}
${this.render_votes()}
<footer class="w3-content">
${reply}
<button class="w3-button w3-theme-d1" @click=${this.react}>
React
</button>
${this.render_children()}
</footer>
${this.render_mentions()} ${this.render_votes()}
${this.render_actions()}
</div>
`;
} else if (content.type === 'pub') {
return small_frame(
return this.render_small_frame(
html` <style>
span {
overflow-wrap: anywhere;
@ -823,7 +799,7 @@ ${JSON.stringify(content, null, 2)}</pre
</span>`
);
} else if (content.type === 'channel') {
return small_frame(html`
return this.render_small_frame(html`
<div>
${content.subscribed ? 'subscribed to' : 'unsubscribed from'}
<a href=${'#' + encodeURIComponent('#' + content.channel)}
@ -834,24 +810,25 @@ ${JSON.stringify(content, null, 2)}</pre
} else if (typeof this.message.content == 'string') {
if (this.message?.decrypted) {
if (this.format == 'decrypted') {
return small_frame(
html`<span>🔓</span>
<pre>${JSON.stringify(this.message.decrypted, null, 2)}</pre>`
return this.render_small_frame(
html`<span>🔓</span> ${this.render_json(this.message.decrypted)}`
);
} else {
return small_frame(
return this.render_small_frame(
html`<span>🔓</span>
<div>${this.message.decrypted.type}</div>`
);
}
} else {
return small_frame(html`<span>🔒</span>`);
return this.render_small_frame(html`<span>🔒</span>`);
}
} else {
return small_frame(html`<div><b>type</b>: ${content.type}</div>`);
return this.render_small_frame(
html`<div><b>type</b>: ${content.type}</div>`
);
}
} else {
return small_frame(this.render_raw());
return this.render_small_frame(this.render_raw());
}
}
}